[SI-536]: total commit (without unit tests) Signed-off-by: Dennis Schmitt <dennis.schmitt@pta.de>
diff --git a/i18n/grid-failure.de.json b/i18n/grid-failure.de.json index 0d5bab2..39df1cc 100644 --- a/i18n/grid-failure.de.json +++ b/i18n/grid-failure.de.json
@@ -19,6 +19,7 @@ "SubTitle2": "Störungsdetails", "SubTitle3": "Störungsort [NS]", "SubTitle4": "Stationsattribute [MS]", + "SubTitle5": "Störungsort", "Version": "Version", "CreatedOn": "erstellt am", "CreatedFrom": "von User", @@ -46,7 +47,7 @@ "Street": "Straße (betroffene Straße)", "VoltageLevel": "Spannungsebene", "PublicationStatus": "Veröffentlichungsstatus", - "MapView": "Kartenansicht", + "Map": "Karte", "Description": "Beschreibung" }, "GridFailureTemp": {
diff --git a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.html b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.html index c609427..020c494 100644 --- a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.html +++ b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.html
@@ -152,15 +152,15 @@ <div class="form-group row"> <label for="statusIntern" class="col-sm-2 col-form-label">{{ 'GridFailure.StatusIntern' | translate }}</label> <div class="col-sm-4"> - <input - id="statusIntern" + <select + required type="text" - maxlength="255" class="form-control" - [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['statusIntern']" - autocomplete="off" - readonly - /> + [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['statusInternId']" + > + <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option> + <option *ngFor="let state of gridFailureDetailsSandbox.gridFailureInternalStates$ | async" [value]="state.id">{{ state.status }}</option> + </select> </div> </div> @@ -168,15 +168,15 @@ <div class="form-group row"> <label for="statusExtern" class="col-sm-2 col-form-label">{{ 'GridFailure.StatusExtern' | translate }}</label> <div class="col-sm-4"> - <input - id="statusExtern" + <select + required type="text" - maxlength="255" class="form-control" - [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['statusExtern']" - autocomplete="off" - readonly - /> + [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['statusExternId']" + > + <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option> + <option *ngFor="let state of gridFailureDetailsSandbox.gridFailureExternalStates$ | async" [value]="state.id">{{ state.status }}</option> + </select> </div> </div> @@ -387,21 +387,6 @@ </div> </div> - <!-- description --> - <div class="form-group row"> - <label for="description" class="col-sm-2 col-form-label">{{ 'GridFailure.Description' | translate }}</label> - <div class="col-sm-4"> - <input - type="text" - maxlength="255" - class="form-control" - id="description" - [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['description']" - autocomplete="off" - /> - </div> - </div> - <!-- internalRemark --> <div class="form-group row"> <label for="internalRemark" class="col-sm-2 col-form-label">{{ 'GridFailure.InternalRemark' | translate }}</label> @@ -420,147 +405,188 @@ </app-expandable> <app-expandable [showBodyInitially]="true"> - <label header>{{ 'GridFailure.SubTitle3' | translate }}</label> + <label header>{{ 'GridFailure.SubTitle5' | translate }}</label> <div class="expandable-content" body> - <!-- postcode --> - <div class="form-group row"> - <label for="postcode" class="col-sm-2 col-form-label">{{ 'GridFailure.Postcode' | translate }}</label> - <div class="col-sm-4"> - <input - [required]="gridFailureDetailsSandbox.isFieldRequiredDependingOnBranchId" - type="text" - maxlength="255" - class="form-control" - id="postcode" - [ngbTypeahead]="gridFailureDetailsSandbox.searchForAddressPostalcodes" - [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['postcode']" - autocomplete="off" - /> + <div class="nav col-xs-4 center"> + <div class="btn-group"> + <button + class="btn btn-primary non-outline" + (click)=" + mapInteractionMode = false; + failureLocationView = 'NS'; + saveWithoutHideRequiredProperties(); + gridFailureDetailsSandbox.resetFailureLocationValues() + " + [class.active]="failureLocationView === 'NS'" + > + {{ 'GridFailure.SubTitle3' | translate }} + </button> + <button + class="btn btn-primary non-outline" + (click)=" + mapInteractionMode = false; + failureLocationView = 'MS'; + saveWithoutHideRequiredProperties(); + gridFailureDetailsSandbox.resetFailureLocationValues() + " + [class.active]="failureLocationView === 'MS'" + > + {{ 'GridFailure.SubTitle4' | translate }} + </button> + <button + class="btn btn-primary non-outline" + (click)=" + mapInteractionMode = true; + failureLocationView = 'map'; + saveWithoutHideRequiredProperties(); + gridFailureDetailsSandbox.resetFailureLocationValues() + " + [class.active]="failureLocationView === 'map'" + > + {{ 'GridFailure.Map' | translate }} + </button> </div> </div> - <!-- city --> - <div class="form-group row"> - <label for="city" class="col-sm-2 col-form-label">{{ 'GridFailure.City' | translate }}</label> - <div class="col-sm-4"> - <select - [required]="gridFailureDetailsSandbox.isFieldRequiredDependingOnBranchId" - type="text" - class="form-control" - id="city" - [disabled]="!gridFailureDetailsSandbox.saveEnabled" - [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['city']" - > - <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option> - <option *ngFor="let item of gridFailureDetailsSandbox.addressCommunities$ | async" [value]="item">{{ item }}</option> - </select> - </div> - </div> + <div class="fault-location-container"> + <div class="NS-fields" *ngIf="failureLocationView === 'NS'"> + <!-- postcode --> + <div class="form-group row"> + <label for="postcode" class="col-sm-5 col-form-label">{{ 'GridFailure.Postcode' | translate }}</label> + <div class="col-sm-6"> + <input + [required]="gridFailureDetailsSandbox.isFieldRequiredDependingOnBranchId" + type="text" + maxlength="255" + class="form-control" + id="postcode" + [ngbTypeahead]="gridFailureDetailsSandbox.searchForAddressPostalcodes" + [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['postcode']" + autocomplete="off" + /> + </div> + </div> - <!-- district --> - <div class="form-group row"> - <label for="district" class="col-sm-2 col-form-label">{{ 'GridFailure.District' | translate }}</label> - <div class="col-sm-4"> - <select - [required]="gridFailureDetailsSandbox.isFieldRequiredDependingOnBranchId" - type="text" - class="form-control" - id="district" - [disabled]="!gridFailureDetailsSandbox.saveEnabled" - [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['district']" - > - <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option> - <option *ngFor="let item of gridFailureDetailsSandbox.addressDistricts$ | async" [value]="item">{{ item }}</option> - </select> - </div> - </div> + <!-- city --> + <div class="form-group row"> + <label for="city" class="col-sm-5 col-form-label">{{ 'GridFailure.City' | translate }}</label> + <div class="col-sm-6"> + <select + [required]="gridFailureDetailsSandbox.isFieldRequiredDependingOnBranchId" + type="text" + class="form-control" + id="city" + [disabled]="!gridFailureDetailsSandbox.saveEnabled" + [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['city']" + > + <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option> + <option *ngFor="let item of gridFailureDetailsSandbox.addressCommunities$ | async" [value]="item">{{ item }}</option> + </select> + </div> + </div> - <!-- street --> - <div class="form-group row"> - <label for="street" class="col-sm-2 col-form-label">{{ 'GridFailure.Street' | translate }}</label> - <div class="col-sm-4"> - <select - [required]="gridFailureDetailsSandbox.isFieldRequiredDependingOnBranchId" - type="text" - class="form-control" - id="street" - [disabled]="!gridFailureDetailsSandbox.saveEnabled" - [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['street']" - > - <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option> - <option *ngFor="let item of gridFailureDetailsSandbox.addressStreets$ | async" [value]="item">{{ item }}</option> - </select> - </div> - </div> + <!-- district --> + <div class="form-group row"> + <label for="district" class="col-sm-5 col-form-label">{{ 'GridFailure.District' | translate }}</label> + <div class="col-sm-6"> + <select + [required]="gridFailureDetailsSandbox.isFieldRequiredDependingOnBranchId" + type="text" + class="form-control" + id="district" + [disabled]="!gridFailureDetailsSandbox.saveEnabled" + [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['district']" + > + <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option> + <option *ngFor="let item of gridFailureDetailsSandbox.addressDistricts$ | async" [value]="item">{{ item }}</option> + </select> + </div> + </div> - <!-- housenumber --> - <div class="form-group row"> - <label for="housenumber" class="col-sm-2 col-form-label">{{ 'GridFailure.Housenumber' | translate }}</label> - <div class="col-sm-4"> - <select - [required]="gridFailureDetailsSandbox.isFieldRequiredDependingOnBranchId" - type="text" - class="form-control" - id="housenumber" - [disabled]="!gridFailureDetailsSandbox.saveEnabled" - [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['housenumber']" - > - <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option> - <option *ngFor="let housenumber of gridFailureDetailsSandbox.addressHouseNumbers$ | async" [value]="housenumber">{{ housenumber }} </option> - </select> - </div> - </div> - </div> - </app-expandable> - <app-expandable [showBodyInitially]="true"> - <label header>{{ 'GridFailure.SubTitle4' | translate }}</label> - <div class="expandable-content" body> - <!-- stationDescription --> - <div class="form-group row"> - <label for="stationDescription" class="col-sm-2 col-form-label">{{ 'GridFailure.StationDescription' | translate }}</label> - <div class="col-sm-4"> - <input - type="text" - maxlength="255" - id="stationDescription" - class="form-control" - autocomplete="off" - (input)="resetCoords($event.target.value)" - (selectItem)="gridFailureDetailsSandbox.latLonMapping($event.item); gridFailureDetailsSandbox.setStationId($event.item.stationId)" - [ngbTypeahead]="gridFailureDetailsSandbox.searchForStation" - [ngrxValueConverter]="gridFailureDetailsSandbox.stationValueConverter" - [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['stationDescription']" - [resultFormatter]="gridFailureDetailsSandbox.formatter" - [inputFormatter]="gridFailureDetailsSandbox.formatter" - /> - </div> - </div> - <!-- radius --> - <div class="form-group row"> - <label for="radius" class="col-sm-2 col-form-label">{{ 'GridFailure.RadiusInMeter' | translate }}</label> - <div class="col-sm-4"> - <select - required - type="text" - class="form-control" - [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['radiusId']" - > - <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option> - <option *ngFor="let item of gridFailureDetailsSandbox.gridFailureRadii$ | async" [value]="item.id">{{ item.radius }}</option> - </select> - </div> - </div> - </div> - </app-expandable> + <!-- street --> + <div class="form-group row"> + <label for="street" class="col-sm-5 col-form-label">{{ 'GridFailure.Street' | translate }}</label> + <div class="col-sm-6"> + <select + [required]="gridFailureDetailsSandbox.isFieldRequiredDependingOnBranchId" + type="text" + class="form-control" + id="street" + [disabled]="!gridFailureDetailsSandbox.saveEnabled" + [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['street']" + > + <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option> + <option *ngFor="let item of gridFailureDetailsSandbox.addressStreets$ | async" [value]="item">{{ item }}</option> + </select> + </div> + </div> - <app-expandable [showBodyInitially]="true"> - <label header>{{ 'GridFailure.MapView' | translate }}</label> - <div class="expandable-content map-container" body> - <div class="map-detail-view"> - <openk-grid-failure-information-map - [mapDetailData]="gridFailureDetailsSandbox.currentGridFailureDetailsCoords" - ></openk-grid-failure-information-map> + <!-- housenumber --> + <div class="form-group row"> + <label for="housenumber" class="col-sm-5 col-form-label">{{ 'GridFailure.Housenumber' | translate }}</label> + <div class="col-sm-6"> + <select + [required]="gridFailureDetailsSandbox.isFieldRequiredDependingOnBranchId" + type="text" + class="form-control" + id="housenumber" + [disabled]="!gridFailureDetailsSandbox.saveEnabled" + [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['housenumber']" + > + <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option> + <option *ngFor="let housenumber of gridFailureDetailsSandbox.addressHouseNumbers$ | async" [value]="housenumber" + >{{ housenumber }} + </option> + </select> + </div> + </div> + </div> + + <div class="MS-fields" *ngIf="failureLocationView === 'MS'"> + <!-- stationDescription --> + <div class="form-group row"> + <label for="stationDescription" class="col-sm-5 col-form-label">{{ 'GridFailure.StationDescription' | translate }}</label> + <div class="col-sm-6"> + <input + type="text" + maxlength="255" + id="stationDescription" + class="form-control" + autocomplete="off" + (input)="resetCoords($event.target.value)" + (selectItem)="gridFailureDetailsSandbox.latLonMapping($event.item); gridFailureDetailsSandbox.setStationId($event.item.stationId)" + [ngbTypeahead]="gridFailureDetailsSandbox.searchForStation" + [ngrxValueConverter]="gridFailureDetailsSandbox.stationValueConverter" + [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['stationDescription']" + [resultFormatter]="gridFailureDetailsSandbox.formatter" + [inputFormatter]="gridFailureDetailsSandbox.formatter" + /> + </div> + </div> + <!-- radius --> + <div class="form-group row"> + <label for="radius" class="col-sm-5 col-form-label">{{ 'GridFailure.RadiusInMeter' | translate }}</label> + <div class="col-sm-6"> + <select + required + type="text" + class="form-control" + [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['radiusId']" + > + <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option> + <option *ngFor="let item of gridFailureDetailsSandbox.gridFailureRadii$ | async" [value]="item.id">{{ item.radius }}</option> + </select> + </div> + </div> + </div> + <div class="map-detail-view"> + <openk-grid-failure-information-map + [mapDetailData]="gridFailureDetailsSandbox.currentGridFailureDetailsCoords" + [setInteractionMode]="mapInteractionMode" + (latLong)="gridFailureDetailsSandbox.latLonMapping($event)" + ></openk-grid-failure-information-map> + </div> </div> </div> </app-expandable>
diff --git a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.scss b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.scss index 8ac0d62..234e5fd 100644 --- a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.scss +++ b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.scss
@@ -62,11 +62,19 @@ margin-left: 0px; } .expandable-content { + position: relative; padding: 20px 35px 20px 35px; } -.map-container { - height: 600px; +.nav { width: 100%; + padding-bottom: 30px; + justify-content: center; +} +.fault-location-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; } .header-container { display: flex; @@ -82,5 +90,17 @@ } .map-detail-view { position: relative; - height: -webkit-fill-available; + flex-grow: 2; + min-width: 300px; + height: 430px; +} +.NS-fields, +.MS-fields { + min-width: 530px; +} +.non-outline { + box-shadow: none !important; +} +.form-group:last-child { + margin-bottom: 10px; }
diff --git a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.spec.ts b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.spec.ts index 896f64a..9ace7a4 100644 --- a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.spec.ts +++ b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.spec.ts
@@ -15,7 +15,7 @@ import { Store } from '@ngrx/store'; import { of } from 'rxjs'; -describe('GridFailureDetailsComponent', () => { +fdescribe('GridFailureDetailsComponent', () => { let component: GridFailureDetailsComponent; let gridFailureSandbox: any; let gridFailureDetailsFormResponse: any = { @@ -29,16 +29,17 @@ beforeEach(() => { appState = { dispatch: () => {}, pipe: () => of(true), select: () => of(true) } as any; - gridFailureSandbox = { - clearGridFailureData() {}, - setGridFailureDateTime(dateISOString: string, actionType: string) {}, - registerEvents() {}, - endSubscriptions() {}, - resetCoords() {}, - resetStationId() {}, - resetPostCode() {}, - gridFailureDetailsFormState$: of(gridFailureDetailsFormResponse), - } as any; + const gridFailureDetailsFormState = { value: { postcode: 67854 } }, + gridFailureSandbox = { + clearGridFailureData() {}, + setGridFailureDateTime(dateISOString: string, actionType: string) {}, + registerEvents() {}, + endSubscriptions() {}, + resetCoords() {}, + resetStationId() {}, + resetPostCode() {}, + gridFailureDetailsFormState$: of(gridFailureDetailsFormResponse), + } as any; component = new GridFailureDetailsComponent(gridFailureSandbox, appState); }); @@ -98,4 +99,11 @@ expect(spy1).toHaveBeenCalled(); expect(spy2).toHaveBeenCalled(); }); + + // it('checks if saveWithoutRequiredProperties()-function works fine', () => { + // let spy1 = spyOn(gridFailureSandbox, 'saveFailureLocationSpecificParts'); + // component.failureLocationView = 'MS'; + // component.saveWithoutHideRequiredProperties(); + // expect(spy1).toHaveBeenCalled(); + // }); });
diff --git a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.ts b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.ts index a0e9cfd..f935225 100644 --- a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.ts +++ b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.ts
@@ -1,3 +1,4 @@ +import { AfterViewInit } from '@angular/core'; /******************************************************************************** * Copyright (c) 2020 Contributors to the Eclipse Foundation * @@ -18,6 +19,7 @@ import * as store from '@grid-failure-information-app/shared/store'; import { Store } from '@ngrx/store'; import { Observable } from 'rxjs'; +import { take, takeUntil } from 'rxjs/operators'; @Component({ selector: 'app-grid-failure-details', @@ -29,11 +31,14 @@ public RolesEnum = RolesEnum; public StateEnum = StateEnum; public gridFailureVersions$: Observable<GridFailure[]> = this.appState$.select(store.getGridFailureVersionsData); + public failureLocationView: string; + public mapInteractionMode: boolean; constructor(public gridFailureDetailsSandbox: GridFailureDetailsSandbox, protected appState$: Store<store.State>) {} ngOnInit() { this.gridFailureDetailsSandbox.registerEvents(); + this._initialFailureLocationState(); } public setGridFailureDateTime(dateTime: any, actionType: string): void { @@ -52,6 +57,10 @@ } } + public saveWithoutHideRequiredProperties() { + this.gridFailureDetailsSandbox.saveFailureLocationSpecificParts(this.failureLocationView); + } + private _createDateTime(dateTime: any): Date { let date: Date = new Date(); date.setDate(dateTime.day); @@ -63,6 +72,32 @@ return date; } + private _initialFailureLocationState() { + this.gridFailureDetailsSandbox.isAdressLoaded().subscribe(() => { + if (!!this.gridFailureDetailsSandbox.currentFormState.controls.postcode.value) { + this.failureLocationView = Globals.FAILURE_LOCATION_NS; + this.gridFailureDetailsSandbox.saveFailureLocationSpecificParts(this.failureLocationView); + this.mapInteractionMode = false; + } else if (!!this.gridFailureDetailsSandbox.currentFormState.controls.stationDescription.value) { + this.failureLocationView = Globals.FAILURE_LOCATION_MS; + this.gridFailureDetailsSandbox.saveFailureLocationSpecificParts(this.failureLocationView); + this.mapInteractionMode = false; + } else if ( + !this.gridFailureDetailsSandbox.currentFormState.controls.postcode.value && + !this.gridFailureDetailsSandbox.currentFormState.controls.stationDescription.value && + this.gridFailureDetailsSandbox.currentFormState.controls.latitude.value + ) { + this.failureLocationView = Globals.FAILURE_LOCATION_MAP; + this.gridFailureDetailsSandbox.saveFailureLocationSpecificParts(this.failureLocationView); + this.mapInteractionMode = true; + } else { + this.failureLocationView = Globals.FAILURE_LOCATION_NS; + this.gridFailureDetailsSandbox.saveFailureLocationSpecificParts(this.failureLocationView); + this.mapInteractionMode = false; + } + }); + } + ngOnDestroy() { this.gridFailureDetailsSandbox.endSubscriptions(); }
diff --git a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.sandbox.spec.ts b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.sandbox.spec.ts index 7c731a6..5b2b9cf 100644 --- a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.sandbox.spec.ts +++ b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.sandbox.spec.ts
@@ -1,3 +1,4 @@ +import { SetValueAction } from 'ngrx-forms'; /******************************************************************************** * Copyright (c) 2020 Contributors to the Eclipse Foundation * @@ -580,4 +581,49 @@ (service as any).setNoBranchId(); expect(service.noBranchId).toBe(null); }); + + it('should call resetFailureLocationValues and dispatch an setValueAction', () => { + const gfdetail = new GridFailure(); + gfdetail.id = 'id'; + gfdetail.responsibility = 'test'; + gfdetail.stationId = 'test'; + + service.currentFormState = { + ...service.currentFormState, + isValid: true, + value: gfdetail, + }; + + service.resetFailureLocationValues(); + expect(dispatchSpy).toHaveBeenCalled(); + }); + + it('should call saveFailureLocationSpecificParts', () => { + service.saveEnabled = false; + let part: string = 'NS'; + service.saveFailureLocationSpecificParts(part); + expect(service.saveEnabled).toBeTruthy(); + + service.saveEnabled = false; + part = 'MS'; + service.saveFailureLocationSpecificParts(part); + expect(service.saveEnabled).toBeTruthy(); + + service.saveEnabled = false; + part = 'map'; + service.saveFailureLocationSpecificParts(part); + expect(service.saveEnabled).toBeTruthy(); + + service.saveEnabled = false; + part = 'test'; + service.saveFailureLocationSpecificParts(part); + expect(service.saveEnabled).toBeFalsy(); + }); + + it('should call saveFailureLocationSpecificParts', () => { + const subject = service.isAdressLoaded(); + subject.subscribe(item => { + expect(item).toBeTruthy(); + }); + }); });
diff --git a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.sandbox.ts b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.sandbox.ts index b04ec10..4c49391 100644 --- a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.sandbox.ts +++ b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.sandbox.ts
@@ -10,6 +10,7 @@ * * SPDX-License-Identifier: EPL-2.0 ********************************************************************************/ +import { loadAddressCommunities } from './../../../shared/store/actions/grid-failures.action'; import { Injectable } from '@angular/core'; import { Router } from '@angular/router'; import { SafetyQueryDialogComponent } from '@grid-failure-information-app/shared/components/dialogs/safety-query-dialog/safety-query-dialog.component'; @@ -460,6 +461,57 @@ map(term => (term.length < 2 ? [] : this._addressPostalcodes.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1))) ); + public resetFailureLocationValues() { + this.appState$.dispatch( + new SetValueAction(this.currentFormState.id, { + ...this.currentFormState.value, + stationDescription: null, + stationId: null, + latitude: null, + longitude: null, + postcode: null, + district: null, + city: null, + street: null, + housenumber: null, + radius: null, + radiusId: null, + }) + ); + } + + public saveFailureLocationSpecificParts(part: string): void { + //disable required proteries that are not needed + switch (part) { + case Globals.FAILURE_LOCATION_NS: + this.appState$.dispatch(new EnableAction(fromGridFailuresDetailFormReducer.INITIAL_STATE.controls.postcode.id)); + this.appState$.dispatch(new DisableAction(fromGridFailuresDetailFormReducer.INITIAL_STATE.controls.radiusId.id)); + this.saveEnabled = true; + break; + case Globals.FAILURE_LOCATION_MS: + this.appState$.dispatch(new DisableAction(fromGridFailuresDetailFormReducer.INITIAL_STATE.controls.postcode.id)); + this.appState$.dispatch(new EnableAction(fromGridFailuresDetailFormReducer.INITIAL_STATE.controls.radiusId.id)); + this.saveEnabled = true; + break; + case Globals.FAILURE_LOCATION_MAP: + this.appState$.dispatch(new DisableAction(fromGridFailuresDetailFormReducer.INITIAL_STATE.controls.postcode.id)); + this.appState$.dispatch(new DisableAction(fromGridFailuresDetailFormReducer.INITIAL_STATE.controls.radiusId.id)); + this.saveEnabled = true; + break; + default: + break; + } + } + /** + * isAdressLoaded + */ + public isAdressLoaded(): Observable<boolean> { + return this.actionsSubject.pipe( + ofType(loadAddressCommunities.type), + map(item => true), + take(1) + ); + } private _loadInitialDependentFieldValues(formState: FormGroupState<GridFailure>) { if (!formState.value || !formState.controls) return; this.appState$.dispatch(gridFailureActions.loadAddressCommunities({ payload: formState.value.postcode }));
diff --git a/projects/grid-failure-information-app/src/app/shared/constants/globals.ts b/projects/grid-failure-information-app/src/app/shared/constants/globals.ts index a0be42a..85bfb6d 100644 --- a/projects/grid-failure-information-app/src/app/shared/constants/globals.ts +++ b/projects/grid-failure-information-app/src/app/shared/constants/globals.ts
@@ -19,6 +19,9 @@ public static STATUS_INTERN_FIELD: string = 'statusIntern'; public static SET_FILTER_COMPONENT: string = 'setFilterComponent'; public static NO_BRANCH_NAME: string = 'OS'; + public static FAILURE_LOCATION_NS: string = 'NS'; + public static FAILURE_LOCATION_MS: string = 'MS'; + public static FAILURE_LOCATION_MAP: string = 'map'; public static LOCALE_TEXT: any = { equals: 'ist gleich',
diff --git a/projects/openk/grid-failure-information-map/src/lib/grid-failure-information-map.component.ts b/projects/openk/grid-failure-information-map/src/lib/grid-failure-information-map.component.ts index fc63408..cc785d3 100644 --- a/projects/openk/grid-failure-information-map/src/lib/grid-failure-information-map.component.ts +++ b/projects/openk/grid-failure-information-map/src/lib/grid-failure-information-map.component.ts
@@ -1,3 +1,4 @@ +import { on } from '@ngrx/store'; /******************************************************************************** * Copyright (c) 2020 Contributors to the Eclipse Foundation * @@ -10,7 +11,7 @@ * * SPDX-License-Identifier: EPL-2.0 ********************************************************************************/ -import { Component, AfterViewInit, Input } from '@angular/core'; +import { Component, AfterViewInit, Input, Output, EventEmitter } from '@angular/core'; import * as L from 'leaflet'; import { Globals } from '@openk-libs/grid-failure-information-map/constants/globals'; import { GridFailureMapInformation } from '@openk-libs/grid-failure-information-map/shared/models/grid-failure-coordinates.model'; @@ -26,6 +27,7 @@ export class GridFailureInformationMapComponent implements AfterViewInit { private _mapData: Array<GridFailureMapInformation> = []; private _mapDetailData: GridFailureMapInformation; + private _interactionMode: boolean; @Input() public set mapData(data: Array<any>) { @@ -53,6 +55,13 @@ this._setDetailMarker(); } + @Input() + public set setInteractionMode(interactionMode: boolean) { + this._interactionMode = interactionMode; + } + + @Output() latLong: EventEmitter<any> = new EventEmitter(); + private _map: any; private _icon = L.icon({ iconUrl: './marker-icon.png', @@ -77,6 +86,8 @@ crossOrigin: null, }); tiles.addTo(this._map); + + this._map.on('click', this._emitLatLongValues.bind(this)); } private _setMultipleMarkers(): void { @@ -125,4 +136,11 @@ }).addTo(this._map); } } + + private _emitLatLongValues(event) { + if (this._interactionMode) { + const latLonValues = { latitude: event.latlng.lat, longitude: event.latlng.lng }; + this.latLong.emit(latLonValues); + } + } }