diff --git a/src/web/src/app/scenario-historicaldata/scenario-historicaldata-routing.module.ts b/src/web/src/app/scenario-historicaldata/scenario-historicaldata-routing.module.ts index 20551d6..2aa3f0d 100644 --- a/src/web/src/app/scenario-historicaldata/scenario-historicaldata-routing.module.ts +++ b/src/web/src/app/scenario-historicaldata/scenario-historicaldata-routing.module.ts @@ -6,10 +6,15 @@ const routes: Routes = [ { path: "", component: ScenarioHistoricaldataComponent - }]; + }, + { + path: ":tmid", + component: ScenarioHistoricaldataComponent + } +]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) -export class ScenarioHistoricaldataRoutingModule { } +export class ScenarioHistoricaldataRoutingModule {} diff --git a/src/web/src/app/scenario-historicaldata/scenario-historicaldata.component.html b/src/web/src/app/scenario-historicaldata/scenario-historicaldata.component.html index 2f5d19e..5308d4e 100644 --- a/src/web/src/app/scenario-historicaldata/scenario-historicaldata.component.html +++ b/src/web/src/app/scenario-historicaldata/scenario-historicaldata.component.html @@ -3,23 +3,22 @@ Clicking on a data source that can be visualized will show the visualization diagram. Since this API provides data from the past, it is also possible to retrieve data from machines which are currently offline.">
- + + + [dropdownPosition]="'bottom'" [(ngModel)]="selectedSourceKey" (change)="sourceKeySelectChanged($event)"> -
-
-
-
- - -
+
+
+
+ +
diff --git a/src/web/src/app/scenario-historicaldata/scenario-historicaldata.component.spec.ts b/src/web/src/app/scenario-historicaldata/scenario-historicaldata.component.spec.ts index b43585b..2740d28 100644 --- a/src/web/src/app/scenario-historicaldata/scenario-historicaldata.component.spec.ts +++ b/src/web/src/app/scenario-historicaldata/scenario-historicaldata.component.spec.ts @@ -8,22 +8,24 @@ import { DebugElement } from "@angular/core"; import { of, throwError } from "rxjs"; import { SourceKeys } from "./source-keys.model"; import { RouterTestingModule } from "@angular/router/testing"; +import { Router } from "@angular/router"; const sourceKeysMock: SourceKeys = { tmid: "1", keys: ["Energy!AirPressure", "Energy!ElectricPower"] }; -describe("ScenarioHistoricaldataComponent", () => { +fdescribe("ScenarioHistoricaldataComponent", () => { let component: ScenarioHistoricaldataComponent; let fixture: ComponentFixture; let historicalDataService: HistoricalDataService; + let router: Router; let element: DebugElement; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ScenarioHistoricaldataComponent], - imports: [SharedModule, HttpClientTestingModule, RouterTestingModule], + imports: [SharedModule, HttpClientTestingModule, RouterTestingModule.withRoutes([])], providers: [HistoricalDataService] }).compileComponents(); })); @@ -33,20 +35,23 @@ describe("ScenarioHistoricaldataComponent", () => { component = fixture.componentInstance; element = fixture.debugElement; historicalDataService = element.injector.get(HistoricalDataService); + router = element.injector.get(Router); }); it("should create", () => { expect(component).toBeTruthy(); }); - it("should fetch data and display it", fakeAsync(async () => { + fit("should fetch data and display it", fakeAsync(async () => { const getSourceKeysSpy = spyOn(historicalDataService, "getSourceKeys").and.returnValue(of(sourceKeysMock)); + const routerNavigateSpy = spyOn(router, "navigate").and.returnValue(null); fixture.detectChanges(); expect(getSourceKeysSpy).toHaveBeenCalledTimes(0); const machineId = "1"; component.selectedMachineChanged(machineId); fixture.detectChanges(); + expect(routerNavigateSpy).toHaveBeenCalled(); expect(getSourceKeysSpy).toHaveBeenCalledTimes(1); expect(getSourceKeysSpy).toHaveBeenCalledWith(machineId); expect((await component.sourceKeys$.toPromise()).keys.length).toEqual(2); diff --git a/src/web/src/app/scenario-historicaldata/scenario-historicaldata.component.ts b/src/web/src/app/scenario-historicaldata/scenario-historicaldata.component.ts index d87f0d3..c473b62 100644 --- a/src/web/src/app/scenario-historicaldata/scenario-historicaldata.component.ts +++ b/src/web/src/app/scenario-historicaldata/scenario-historicaldata.component.ts @@ -5,6 +5,7 @@ import { HistoricalDataService } from "./scenario-historicaldata.service"; import { HistoricalDataResponseElement, HistoricItemData } from "./historical-data.model"; import { filter, concatMap, tap, map, catchError } from "rxjs/operators"; import * as moment from "moment"; +import { Router, ActivatedRoute } from "@angular/router"; @Component({ selector: "app-scenario-historicaldata", @@ -18,6 +19,7 @@ export class ScenarioHistoricaldataComponent implements OnInit { limit: 1000 } }); + public loadingCriterias: any; sourceKeys$: Observable; error$ = new Subject(); loading$ = new Subject(); @@ -25,14 +27,25 @@ export class ScenarioHistoricaldataComponent implements OnInit { lineChartScheme = { domain: ["#e3000b", "#0092b4", "#303741"] }; + public selectedMachineId: string; + public selectedSourceKey: string; - constructor(private readonly historicalDataService: HistoricalDataService) { + constructor( + private readonly historicalDataService: HistoricalDataService, + private readonly router: Router, + private readonly route: ActivatedRoute + ) { this.error$.next(false); this.loading$.next(false); } ngOnInit() { - this.searchCriteria$ + this.selectedMachineId = this.route.snapshot.params.tmid; + if (this.route.snapshot.queryParams.sourceKey) { + this.selectedSourceKey = this.route.snapshot.queryParams.sourceKey; + } + + this.loadingCriterias = this.searchCriteria$ .pipe( filter(this.filterIncompleteSearchCriteria()), tap(this.setLoadingFlags()), @@ -89,6 +102,10 @@ export class ScenarioHistoricaldataComponent implements OnInit { } public selectedMachineChanged(tmid: string) { + this.selectedMachineId = tmid; + this.lineSeriesData = null; + this.createRoute(); + this.error$.next(false); this.loading$.next(true); this.sourceKeys$ = null; @@ -107,6 +124,14 @@ export class ScenarioHistoricaldataComponent implements OnInit { sourceKeys => { this.sourceKeys$ = of(sourceKeys); this.loading$.next(false); + if (this.selectedSourceKey) { + if (sourceKeys.keys.some(el => el === this.selectedSourceKey)) { + this.sourceKeySelectChanged(this.selectedSourceKey); + } else { + this.selectedSourceKey = null; + this.createRoute(); + } + } }, error => { console.error("could not load sourceKeys", error); @@ -132,6 +157,8 @@ export class ScenarioHistoricaldataComponent implements OnInit { if (!key) { return; } + this.selectedSourceKey = key; + this.createRoute(); this.sourceKeySelected(key); } @@ -174,6 +201,14 @@ export class ScenarioHistoricaldataComponent implements OnInit { ); }; } + + private createRoute(): void { + this.router.navigate(["scenario-historicaldata", this.selectedMachineId], { + queryParams: { + sourceKey: this.selectedSourceKey + } + }); + } } interface ScenarionHistoricaldataSearchCriteria { diff --git a/src/web/src/app/scenario-machinestate/scenario-machinestate-routing.module.ts b/src/web/src/app/scenario-machinestate/scenario-machinestate-routing.module.ts index 3322620..8557616 100644 --- a/src/web/src/app/scenario-machinestate/scenario-machinestate-routing.module.ts +++ b/src/web/src/app/scenario-machinestate/scenario-machinestate-routing.module.ts @@ -1,20 +1,20 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; -import { ScenarioMachinestateComponent } from './scenario-machinestate.component'; +import { NgModule } from "@angular/core"; +import { Routes, RouterModule } from "@angular/router"; +import { ScenarioMachinestateComponent } from "./scenario-machinestate.component"; const routes: Routes = [ { - path: '', + path: "", component: ScenarioMachinestateComponent }, { - path: ':tmid', + path: ":tmid", component: ScenarioMachinestateComponent } ]; @NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] }) -export class ScenarioMachinestateRoutingModule { } +export class ScenarioMachinestateRoutingModule {} diff --git a/src/web/src/app/shared/components/select-machine/select-machine.component.html b/src/web/src/app/shared/components/select-machine/select-machine.component.html index 78df9be..a86c4c0 100644 --- a/src/web/src/app/shared/components/select-machine/select-machine.component.html +++ b/src/web/src/app/shared/components/select-machine/select-machine.component.html @@ -1,5 +1,5 @@
- diff --git a/src/web/src/app/shared/components/select-machine/select-machine.component.ts b/src/web/src/app/shared/components/select-machine/select-machine.component.ts index 78ba174..a132742 100644 --- a/src/web/src/app/shared/components/select-machine/select-machine.component.ts +++ b/src/web/src/app/shared/components/select-machine/select-machine.component.ts @@ -28,15 +28,16 @@ export class SelectMachineComponent implements OnInit { ngOnInit() { this.items$ = this.machineOverviewService.getSubscriptions().pipe( - tap(subscriptions => { - for (const subscription of subscriptions) { - for (const machine of subscription.assignedMachines) { - if (machine.tmid === this.initialMachineId) { - this.selectedMachine = machine; + tap(subscriptions => { + for (const subscription of subscriptions) { + for (const machine of subscription.assignedMachines) { + if (machine.tmid === this.initialMachineId) { + this.selectedMachine = machine; + this.selectedMachineChanged(this.selectedMachine); + } + } } - } - } - }), + }), catchError(err => { this.error$.next(true); this.loading$.next(false);