diff --git a/Dockerfile b/Dockerfile index f3b43539a284af535480622799395286199aee66..9bf42f966d345277f6372c1d4ba3f638b1fc6b63 100644 --- a/Dockerfile +++ b/Dockerfile @@ -39,4 +39,4 @@ ENV DASHBOARD_BASE_URL=http://localhost:4200 \ TRAFFIC_SIMULATION_BASE_URL=http://localhost:8082/traffic-simulation \ TRAFFIC_SIMULATION_STORAGE_URL=http://localhost:8081 \ TRAFFIC_SIMULATION_DSS_URL=http://localhost:8083 \ - TRAFFIC_SIMULATION_STOMP_URL=ws://localhost:8082/gs-guide-websocket + TRAFFIC_SIMULATION_STOMP_URL=ws://localhost:/gs-guide-websocket diff --git a/src/app/@theme/layouts/one-column/one-column.layout.ts b/src/app/@theme/layouts/one-column/one-column.layout.ts index cc0b789a59901c1e4be24642cc4a5f63937397d1..99a51fb27a72864beda0ec2b0274628717daf8ff 100644 --- a/src/app/@theme/layouts/one-column/one-column.layout.ts +++ b/src/app/@theme/layouts/one-column/one-column.layout.ts @@ -9,7 +9,7 @@ import { Component } from '@angular/core'; <ngx-header></ngx-header> </nb-layout-header> - <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive> + <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive style="z-index:999"> <ng-content select="nb-menu"></ng-content> </nb-sidebar> diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6382d50dfbc81a6cd579220a6872accb1290a78f..be08f901d19a232575c94498652634d07061231b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -30,6 +30,7 @@ import { AuthGuard } from './auth/services/auth.guard'; import { AuthLogoutComponent } from './auth/logout/auth-logout.component'; import { MarkdownModule } from 'ngx-markdown'; + import { UiFeaturesModule } from './pages/ui-features/ui-features.module'; import { ChartModule } from 'angular2-chartjs'; import 'chartjs-plugin-zoom'; @@ -53,6 +54,7 @@ import { DatastorageService } from './pages/dashboard-management/services/datast BrowserAnimationsModule, HttpClientModule, AppRoutingModule, + UiFeaturesModule, NbSidebarModule.forRoot(), NbMenuModule.forRoot(), NbDatepickerModule.forRoot(), diff --git a/src/app/auth/services/keyrock-user-information.service.ts b/src/app/auth/services/keyrock-user-information.service.ts index d2fcb601c7f5ea8b257260f4acff136b9c636ced..c124e987623c68796feff11c5a44ae5807828ae9 100644 --- a/src/app/auth/services/keyrock-user-information.service.ts +++ b/src/app/auth/services/keyrock-user-information.service.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Observable } from 'rxjs'; import { ConfigService } from '@ngx-config/core'; import { IDMUser } from '../oauth/model/idmuser'; @@ -12,9 +12,11 @@ import { map } from 'rxjs/operators'; export class KeyrockUserInformationService { apiURL: string; client_id: string; + realm: string; constructor(configService: ConfigService, private http: HttpClient) { this.apiURL = configService.getSettings("idmBaseURL"); this.client_id = configService.getSettings("client_id"); + this.realm = configService.getSettings("idmRealmName"); } getRole(): Observable<string[]> { @@ -32,6 +34,13 @@ export class KeyrockUserInformationService { getUser(): Observable<IDMUser> { return this.http.get<IDMUser>(`${this.apiURL}/user`); } + getUsers(): any { + +let httpHeaders = new HttpHeaders( {"Access-Control-Allow-Origin": "*","Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, Authorization", "Access-Control-Allow-Methods": "GET, POST, PUT, OPTIONS, DELETE"}); + return this.http.get(`${this.apiURL}/${this.realm}/users`, { + headers: httpHeaders, + } ); + } getLogoutUrl(): string { return `${this.apiURL}/auth/external_logout?_method=DELETE&client_id=${this.client_id}`; diff --git a/src/app/auth/services/token.interceptor.ts b/src/app/auth/services/token.interceptor.ts index 6221d0d71e33be8884f40fca04e86ff66d228b37..05a3735dc685e50dd9d9f4e3e42c2f61e4ff5c9c 100644 --- a/src/app/auth/services/token.interceptor.ts +++ b/src/app/auth/services/token.interceptor.ts @@ -8,25 +8,30 @@ import { import { Observable } from 'rxjs'; import { NbAuthOAuth2JWTToken, NbAuthOAuth2Token, NbAuthService } from '@nebular/auth'; import { ConfigService } from '@ngx-config/core'; -import { switchMap, tap } from 'rxjs/operators'; +import { finalize, switchMap, tap } from 'rxjs/operators'; +import { LoaderService } from '../../services/loader.service'; @Injectable() export class TokenInterceptor implements HttpInterceptor { token; - constructor(public auth: NbAuthService, public config:ConfigService) {} + constructor(public auth: NbAuthService, public config:ConfigService, public loaderService:LoaderService) {} intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { + this.loaderService.show(); if (req.url.indexOf('/assets/') > -1) { - return next.handle(req); + return next.handle(req).pipe( + finalize(() => this.loaderService.hide())); } if (req.url.indexOf('/oauth2/token') > -1 || req.url.indexOf('/openid-connect/token') > -1 || req.url.indexOf('/api/menu-blocks') > -1|| req.url.indexOf('/public/dashboards') > -1) { - return next.handle(req); + return next.handle(req).pipe( + finalize(() => this.loaderService.hide())); } if (req.url.indexOf(this.config.getSettings('idra_base_url')+'/Idra') > -1) { - return next.handle(req); + return next.handle(req).pipe( + finalize(() => this.loaderService.hide())); } @@ -45,12 +50,14 @@ export class TokenInterceptor implements HttpInterceptor { newHeaders = newHeaders.append('Authorization', 'Bearer ' + this.token.getPayload().access_token); } const authReq = req.clone({ headers: newHeaders }); - return next.handle(authReq); + return next.handle(authReq).pipe( + finalize(() => this.loaderService.hide())); }) ) } else { const authReq = req.clone({ headers: newHeaders }); - return next.handle(authReq); + return next.handle(authReq).pipe( + finalize(() => this.loaderService.hide())); } } diff --git a/src/app/pages/data-catalogue/data-catalogue-routing.module.ts b/src/app/pages/data-catalogue/data-catalogue-routing.module.ts index c2fca5fb488a884cdfd2c8f084b55be6d4bcf2bf..524a59bce3590757af076c041d93fbfcc22d6140 100644 --- a/src/app/pages/data-catalogue/data-catalogue-routing.module.ts +++ b/src/app/pages/data-catalogue/data-catalogue-routing.module.ts @@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router'; import { DataCatalogueComponent } from './data-catalogue.component'; import { DatasetComponent } from './dataset/dataset.component'; import { SearchComponent } from './search/search.component'; +import {DatasetFilteredComponent} from './dataset-filtered/dataset-filtered.component'; const routes: Routes = [ { @@ -14,10 +15,15 @@ const routes: Routes = [ path: '', component: SearchComponent }, +{ + path:'filtered', + component: DatasetFilteredComponent +}, { path:':id', component: DatasetComponent -}] +}, +] }]; @NgModule({ diff --git a/src/app/pages/data-catalogue/data-catalogue.module.ts b/src/app/pages/data-catalogue/data-catalogue.module.ts index 4a41712e806e6d6d80b3238f2d3ffaf8d95810fd..3154294fbacd5936804ca13a5894eb5c15627037 100644 --- a/src/app/pages/data-catalogue/data-catalogue.module.ts +++ b/src/app/pages/data-catalogue/data-catalogue.module.ts @@ -12,8 +12,9 @@ import { DistributionComponent } from './distribution/distribution.component'; import { MarkdownModule } from 'ngx-markdown'; import { DataletIframeComponent } from './datalet-iframe/datalet-iframe.component'; import { ShowDataletsComponent } from './show-datalets/show-datalets.component'; +import { DatasetFilteredComponent } from './dataset-filtered/dataset-filtered.component'; @NgModule({ - declarations: [DataCatalogueComponent, SearchComponent, DatasetComponent, DistributionComponent, DataletIframeComponent, ShowDataletsComponent], + declarations: [DataCatalogueComponent, SearchComponent, DatasetComponent, DistributionComponent, DataletIframeComponent, ShowDataletsComponent, DatasetFilteredComponent], imports: [ ThemeModule, NbFormFieldModule, diff --git a/src/app/pages/data-catalogue/dataset-filtered/dataset-filtered.component.html b/src/app/pages/data-catalogue/dataset-filtered/dataset-filtered.component.html new file mode 100644 index 0000000000000000000000000000000000000000..a009467b5d21728f7d818b95886d1ebb395b2a6a --- /dev/null +++ b/src/app/pages/data-catalogue/dataset-filtered/dataset-filtered.component.html @@ -0,0 +1,25 @@ +<div [nbSpinner]="loading" nbSpinnerSize="giant" nbSpinnerStatus="primary"> + + <div class="row" *ngIf="searchResponse.count>0"> + + + <div class="col-12"> + + <!-- results --> + <nb-card *ngFor="let dataset of searchResponse.results | slice:0:10; let i=index" class="minicard"> + <nb-card-header> + <a routerLink="/pages/datasets/{{dataset.id}}">{{dataset.title}}</a> + </nb-card-header> + <nb-card-body class="content-truncated"> + <span class="truncated">{{dataset.description}}</span> + </nb-card-body> + <nb-card-footer> + <nb-tag-list size="small"> + <nb-tag *ngFor="let tmp of dataset.distributionFormats" text="{{tmp.format}} ({{tmp.count}})" size="tiny" [style.background]="getColor(tmp.format)"> + </nb-tag> + </nb-tag-list> + </nb-card-footer> + </nb-card> + </div> + </div> +</div> diff --git a/src/app/pages/data-catalogue/dataset-filtered/dataset-filtered.component.scss b/src/app/pages/data-catalogue/dataset-filtered/dataset-filtered.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..d5e5beca01612459d3b769e1e2865eed4c9f0850 --- /dev/null +++ b/src/app/pages/data-catalogue/dataset-filtered/dataset-filtered.component.scss @@ -0,0 +1,23 @@ +.no-border{ + border: none; + :first-child{ + border: none; + } +} + +.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.content-truncated { + width:100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.minicard{ + height:unset; +} \ No newline at end of file diff --git a/src/app/pages/data-catalogue/dataset-filtered/dataset-filtered.component.spec.ts b/src/app/pages/data-catalogue/dataset-filtered/dataset-filtered.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..92b1a88a6060961f50373a87282275cc0c7c1569 --- /dev/null +++ b/src/app/pages/data-catalogue/dataset-filtered/dataset-filtered.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DatasetFilteredComponent } from './dataset-filtered.component'; + +describe('DatasetFilteredComponent', () => { + let component: DatasetFilteredComponent; + let fixture: ComponentFixture<DatasetFilteredComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DatasetFilteredComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(DatasetFilteredComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/data-catalogue/dataset-filtered/dataset-filtered.component.ts b/src/app/pages/data-catalogue/dataset-filtered/dataset-filtered.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..13af05fd76d875632027fe6e4352245b6c895768 --- /dev/null +++ b/src/app/pages/data-catalogue/dataset-filtered/dataset-filtered.component.ts @@ -0,0 +1,169 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { NbTagComponent, NbTagInputAddEvent } from '@nebular/theme'; +import { DCATDataset,FormatCount } from '../model/dcatdataset'; +import { ODMSCatalogueInfo } from '../model/odmscatalogue-info'; +import { SearchFacet } from '../model/search-facet'; +import { SearchFilter } from '../model/search-filter'; +import { SearchRequest } from '../model/search-request'; +import { SearchResult } from '../model/search-result'; +import { DataCataglogueAPIService } from '../services/data-cataglogue-api.service'; +import { NbLayoutScrollService } from '@nebular/theme'; +import {KeyrockUserInformationService} from '../../../auth/services/keyrock-user-information.service'; +import { OidcUserInformationService } from '../../../auth/services/oidc-user-information.service'; + +@Component({ + selector: 'ngx-dataset-filtered', + templateUrl: './dataset-filtered.component.html', + styleUrls: ['./dataset-filtered.component.scss'] +}) +export class DatasetFilteredComponent implements OnInit { + separatorKeys:number[] = [13, 188]; + searchResponse:SearchResult=new SearchResult(); + searchRequest:SearchRequest=new SearchRequest(); + + cataloguesInfos: Array<ODMSCatalogueInfo>=[]; + user: any; + tags: string[] = []; + + constructor(private restApi:DataCataglogueAPIService, private nbScroll: NbLayoutScrollService,private userService: OidcUserInformationService, private keyrockUserInformationService: KeyrockUserInformationService ) { } + + loading=false; + + facetLimits={}; + page: number = 1; + + @Input() + totalDatasets:number=0; + + filters: Array<string> = []; + filtersTags: Array<string>= []; + + + ngOnInit(): void { + this.userService.onUserChange() + .subscribe((user: any) => { + this.user = user; + if (this.user.hasOwnProperty('topics')) { + this.tags = this.user.topics.topics; + } + if (this.tags.length > 0) { + this.tags.forEach(element => { + this.searchDatasetOnTagsValue(element); + }); + + } + + }); + } + searchDatasetOnTagsValue(tag) { + this.searchRequest.nodes.push(1); + let index = this.searchRequest.filters.findIndex(x=> x.field==="ALL"); + if(index<0){ + this.searchRequest.filters.push(new SearchFilter("ALL",tag)); + }else{ + let filter=this.searchRequest.filters[index]; + filter.value=tag; + } + this.searchOnFilter(); + /* tags.forEach(element => { + console.log(element); + this.searchRequest.filters.push(new SearchFilter('ALL',element)); + this.searchOnFilter(); + + });*/ + + } +searchOnFilter(){ + this.restApi.searchDatasets(this.searchRequest).subscribe( + res=>{ + // this.searchResponse=res + if (res.count > 0){ + console.log(res); + console.log(this.searchResponse); + + this.totalDatasets = this.totalDatasets + res.count; + let oldResult = this.searchResponse.results; + if (oldResult === undefined){ + this.searchResponse=res; + this.searchResponse.results.map((x:DCATDataset)=>{ this.processDataset(x) }) + } else { + console.log(oldResult); + let newResult = oldResult.concat(res.results); + console.log(newResult); + this.searchResponse.count= this.searchResponse.count + res.count; + this.searchResponse.results= newResult; + console.log(this.searchResponse); + this.searchResponse.results.map((x:DCATDataset)=>{ this.processDataset(x) }) + } + + this.loading=false; + } + + }, + err=>{ + console.log(err); + this.loading=false; + }); +} +processDataset(dataset:DCATDataset):DCATDataset{ + let tmp=[]; + dataset.distributionFormats=[]; + for(let d of dataset.distributions){ + if(tmp.indexOf(d.format)<0){ + let fC=new FormatCount(); + fC.format=d.format; + fC.count=1; + dataset.distributionFormats.push(fC); + tmp.push(d.format); + }else{ + dataset.distributionFormats[tmp.indexOf(d.format)].count++; + } + } + + dataset.description = dataset.description.replace(/\*/g,'').replace(/\\n/g,'') + .replace(/\(http.*\)/g,'').replace(/##\s*/g,'') + .replace(/<.*>(.*)<\/.*>/g,'$1') + .replace(/>/g,'').replace(/\[|\]/g,'') + + return dataset; +} + getColor(format:string):string{ + switch(format.toLowerCase()){ + case 'csv': + return '#dfb100'; + case 'html': + return '#55a1ce'; + case 'json': + case 'xml': + return '#ef7100'; + case 'text': + case 'txt': + return '#74cbec'; + case 'xls': + case 'xlsx': + return '#2db55d'; + case 'zip': + return '#686868'; + case 'api': + return 'ec96be'; + case 'pdf': + return '#e0051e'; + case 'rdf': + case 'nquad': + case 'turtle': + case 'ntriples': + return '#0b4498'; + case 'fiware': + case 'ngsi': + case 'ngsi-ld': + case 'fiware-ngsi': + case 'fiware-ngsi-ld': + return '#65c3d1'; + default: + return 'default'; + } + } + + + + } diff --git a/src/app/pages/pages-menu.ts b/src/app/pages/pages-menu.ts index 25d8dc8905cb00bc29fd1c80a4130c2f79e97af5..d7379f9714532c34b0d363d99aeb94b6096660a2 100644 --- a/src/app/pages/pages-menu.ts +++ b/src/app/pages/pages-menu.ts @@ -174,6 +174,14 @@ export const MENU_ITEMS: NbMenuItem[] = [ name: "dashboard-management", }, }, + { + title: "Most relevant dataset", + icon: "search-outline", + link: "/pages/datasets/filtered", + data: { + name: "catalogues", + }, + }, { title: "Data Catalogue", icon: "search-outline", diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts index f1258a97cf91321e67cfb9ad67ca717afce0a32b..0870ac010bbea02dd48061a907fcd2f7ac4bbc3b 100644 --- a/src/app/pages/pages.component.ts +++ b/src/app/pages/pages.component.ts @@ -12,6 +12,7 @@ import { MENU_ITEMS } from './pages-menu'; selector: 'ngx-pages', styleUrls: ['pages.component.scss'], template: ` + <ngx-loader></ngx-loader> <ngx-one-column-layout> <nb-menu [items]="menu"></nb-menu> <router-outlet></router-outlet> diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index 0c8e3bd5a49bd02618e7d8bcbf039f694504c9d4..c1062fb56889fd219c283fb19f53351303c0e2ea 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -9,6 +9,7 @@ import { TranslateModule } from '@ngx-translate/core'; import { UtilitiesComponent } from './utilities/utilities.component'; import { MapLayersComponent } from './map-layers/map-layers.component'; import { GuideComponent } from './guide/guide.component'; +import { UiFeaturesModule } from './ui-features/ui-features.module'; @NgModule({ @@ -20,6 +21,7 @@ import { GuideComponent } from './guide/guide.component'; MiscellaneousModule, TranslateModule, NbStepperModule, + UiFeaturesModule ], declarations: [ PagesComponent, diff --git a/src/app/pages/ui-features/loader/loader.component.html b/src/app/pages/ui-features/loader/loader.component.html new file mode 100644 index 0000000000000000000000000000000000000000..e44b9b11b327c11e4a182e94e5e8fc4ca7885342 --- /dev/null +++ b/src/app/pages/ui-features/loader/loader.component.html @@ -0,0 +1,13 @@ +<!--<div class="overlay" *ngIf="isLoadingValue" [nbSpinner]="true" nbSpinnerSize="giant" nbSpinnerStatus="primary"> + +</div>--> + +<style>@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@-moz-keyframes spin{0%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.spinner{position:fixed;top:0;left:0;width:100%;height:100%;z-index:3;background: rgba(254, 253, 253, 0.8);overflow:hidden} .spinner div:first-child{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;box-shadow:0 3px 3px 0 rgba(19,153,114,1);transform:translate3d(0,0,0);animation:spin 2s linear infinite} .spinner div:first-child:after,.spinner div:first-child:before{content:'';position:absolute;border-radius:50%} .spinner div:first-child:before{top:5px;left:5px;right:5px;bottom:5px;box-shadow:0 3px 3px 0 rgb(234,206,0);-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite} .spinner div:first-child:after{top:15px;left:15px;right:15px;bottom:15px;box-shadow:0 3px 3px 0 rgba(244,230,127,1);animation:spin 1.5s linear infinite}</style> + <div id="nb-global-spinner" class="spinner" *ngIf="isLoadingValue"> + <div class="blob blob-0"></div> + <div class="blob blob-1"></div> + <div class="blob blob-2"></div> + <div class="blob blob-3"></div> + <div class="blob blob-4"></div> + <div class="blob blob-5"></div> + </div> diff --git a/src/app/pages/ui-features/loader/loader.component.scss b/src/app/pages/ui-features/loader/loader.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..d83145c8577182af6aa7190473c7e35ea48f351d --- /dev/null +++ b/src/app/pages/ui-features/loader/loader.component.scss @@ -0,0 +1,12 @@ +.overlay { + position: fixed; + // display: block; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-color: rgba(202, 202, 202, 0.8); + //background-color: red; + z-index: 3; + // z-index: 99999; + } \ No newline at end of file diff --git a/src/app/pages/ui-features/loader/loader.component.spec.ts b/src/app/pages/ui-features/loader/loader.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..3c9400fef1e90eb273e5d694025b38e869c74ca4 --- /dev/null +++ b/src/app/pages/ui-features/loader/loader.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LoaderComponent } from './loader.component'; + +describe('LoaderComponent', () => { + let component: LoaderComponent; + let fixture: ComponentFixture<LoaderComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ LoaderComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(LoaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/ui-features/loader/loader.component.ts b/src/app/pages/ui-features/loader/loader.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..10e265796411f31c86234b5689a1d621e9b33390 --- /dev/null +++ b/src/app/pages/ui-features/loader/loader.component.ts @@ -0,0 +1,36 @@ +import { Component, OnInit,ChangeDetectionStrategy, SimpleChanges, ChangeDetectorRef } from '@angular/core'; +import { LoaderService } from '../../../services/loader.service'; +import { BehaviorSubject, Subject } from 'rxjs'; +import { threadId } from 'worker_threads'; + +@Component({ + selector: 'ngx-loader', + templateUrl: './loader.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, + styleUrls: ['./loader.component.scss'] +}) +export class LoaderComponent implements OnInit { + + isLoading; + noLoader; + + + constructor(private loaderService: LoaderService, private changeDetectorRef: ChangeDetectorRef) { + + changeDetectorRef.detach(); + setInterval(() => { this.changeDetectorRef.detectChanges(); }, 500); + } + get isLoadingValue(){ + return this.isLoading; +} + +ngOnInit(): void { + this.loaderService.loader.subscribe(color => {console.log(color); + this.isLoading = color; + // + }); + this.changeDetectorRef.detectChanges(); + //this.isLoading = this.loaderService.isLoading$.getValue(); +} + +} diff --git a/src/app/pages/ui-features/ui-features.module.ts b/src/app/pages/ui-features/ui-features.module.ts index 24788e9149a857e22c8aa1cbea4715cadc71d9e3..f096d6772f21e496c7d4a0f66818e898fac5497f 100644 --- a/src/app/pages/ui-features/ui-features.module.ts +++ b/src/app/pages/ui-features/ui-features.module.ts @@ -1,5 +1,5 @@ import { NgModule } from '@angular/core'; -import { NbAlertModule, NbCardModule, NbIconModule, NbPopoverModule, NbSearchModule } from '@nebular/theme'; +import { NbAlertModule, NbCardModule, NbIconModule, NbPopoverModule, NbSearchModule, NbSpinnerModule } from '@nebular/theme'; import { ThemeModule } from '../../@theme/theme.module'; import { UiFeaturesRoutingModule } from './ui-features-routing.module'; @@ -7,12 +7,16 @@ import { UiFeaturesComponent } from './ui-features.component'; import { GridComponent } from './grid/grid.component'; import { IconsComponent } from './icons/icons.component'; import { TypographyComponent } from './typography/typography.component'; +import { LoaderComponent } from './loader/loader.component'; + const components = [ UiFeaturesComponent, GridComponent, IconsComponent, TypographyComponent, + LoaderComponent + ]; @NgModule({ @@ -24,9 +28,13 @@ const components = [ NbAlertModule, ThemeModule, UiFeaturesRoutingModule, + NbSpinnerModule ], declarations: [ ...components, + + ], + exports: [ ...components, ], }) export class UiFeaturesModule { } diff --git a/src/app/services/loader.service.spec.ts b/src/app/services/loader.service.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..aef696199092917d53ea5934776a2a0d22f530d5 --- /dev/null +++ b/src/app/services/loader.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { LoaderService } from './loader.service'; + +describe('LoaderService', () => { + let service: LoaderService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(LoaderService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/loader.service.ts b/src/app/services/loader.service.ts new file mode 100644 index 0000000000000000000000000000000000000000..1a0ca84fcb4b78a9d557b3288fa994c690f1463f --- /dev/null +++ b/src/app/services/loader.service.ts @@ -0,0 +1,24 @@ +import { Injectable } from '@angular/core'; +import { BehaviorSubject, Subject } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class LoaderService { + isLoading$ = new BehaviorSubject<boolean>(false); + loader = this.isLoading$.asObservable(); + + + constructor() { } + + show() { + this.isLoading$.next(true); + + } + + hide() { + this.isLoading$.next(false); + + + } +} diff --git a/src/assets/config.json b/src/assets/config.json index 5c0beacb726b2281f8e6aa1007ff02595ecaad46..1933e20656bd157f64aa25bec3c7e6c6c369b8a6 100644 --- a/src/assets/config.json +++ b/src/assets/config.json @@ -14,7 +14,7 @@ "bike_analysis_api_base_url":"http://localhost:8001/urbanite_bikes", "biketrajectory_api_base_url":"http://localhost:8000/biketrajectories", "bus_od_api_base_url":"http://localhost:8000/busesod", - "idra_base_url":"http://localhost:8082", + "idra_base_url":"http://localhost:8080", "traffic_simulation_base_url":"http://localhost:8082/traffic-simulation", "traffic_simulation_storage_url":"http://localhost:8081", "traffic_simulation_dss_url":"http://localhost:8083",