diff --git a/src/app/pages/simulation-wizard/results-map/results-map.component.html b/src/app/pages/simulation-wizard/results-map/results-map.component.html index 2db75993b408b04ff504e5b3ddb4cc1ed4b27297..19dd08327b076c533d3fbc14d07f3284b9929576 100644 --- a/src/app/pages/simulation-wizard/results-map/results-map.component.html +++ b/src/app/pages/simulation-wizard/results-map/results-map.component.html @@ -65,7 +65,10 @@ </div> </div> <div id="inputsLegendContainer"> - <form [formGroup]="newBrinkValues" (ngSubmit)="onApplyNewValuesSubmit()"> + <form + [formGroup]="newBrinkValuesForm" + (ngSubmit)="onApplyNewValuesSubmit()" + > <div> <div> <label for="">1st color, up to</label> @@ -131,7 +134,7 @@ nbButton status="primary" type="submit" - [disabled]="!newBrinkValues.dirty" + [disabled]="!newBrinkValuesForm.dirty" > Apply new values </button> diff --git a/src/app/pages/simulation-wizard/results-map/results-map.component.ts b/src/app/pages/simulation-wizard/results-map/results-map.component.ts index 9ff09a5dcf595d7d90c0c953a44213a3658a52ac..54ecdc058437a7f330a224f7bba303c61eeb678c 100644 --- a/src/app/pages/simulation-wizard/results-map/results-map.component.ts +++ b/src/app/pages/simulation-wizard/results-map/results-map.component.ts @@ -1,4 +1,10 @@ -import { Component, Input, TemplateRef, OnChanges } from "@angular/core"; +import { + Component, + Input, + TemplateRef, + OnChanges, + OnInit, +} from "@angular/core"; import * as L from "leaflet"; import { SimulationService } from "../utils/services/simulation.service"; import * as MapColors from "./map-colors-local"; @@ -13,7 +19,7 @@ import { FormControl, FormGroup } from "@angular/forms"; templateUrl: "./results-map.component.html", styleUrls: ["./results-map.component.scss"], }) -export class ResultsMapComponent implements OnChanges { +export class ResultsMapComponent implements OnInit, OnChanges { @Input() selectedSimulation: Simulation; public map: L.Map; options = { @@ -35,7 +41,7 @@ export class ResultsMapComponent implements OnChanges { grayscale: number = 50; loadGeojsons: Object[] = []; maxKeyValues: Object = {}; - newBrinkValues = new FormGroup({ + newBrinkValuesForm = new FormGroup({ legend_0: new FormControl(undefined), legend_1: new FormControl(undefined), legend_2: new FormControl(undefined), @@ -53,6 +59,10 @@ export class ResultsMapComponent implements OnChanges { private dialogService: NbDialogService, private networkService: NetworkService ) {} + ngOnInit(): void { + this.newBrinkValuesForm.disable(); + } + onMapReady(map: L.Map) { this.map = map; this.grayscaleChange(); @@ -63,28 +73,28 @@ export class ResultsMapComponent implements OnChanges { this.setMapPositionAndZoom(res); }); }, 50); - setTimeout(() => { - console.log( - "%cTemporary", - "background: peru; font-weight: bold; color: black; font-family: serif; padding: 0 10px;" - ); - const celkomplet: HTMLElement = document.querySelectorAll( - ".buttons" - )[0] as HTMLElement; - celkomplet.style.display = "none"; - }, 825); - setTimeout(() => { - const celkomplet1: HTMLElement = document.querySelectorAll( - ".appearance-filled.size-medium.shape-rectangle.status-primary.ng-star-inserted.nb-transition" - )[1] as HTMLElement; - celkomplet1.click(); - }, 1000); - setTimeout(() => { - const celkomplet2: HTMLElement = document.querySelectorAll( - "#loadGeojsonButtonsContainer button" - )[1] as HTMLElement; - celkomplet2.click(); - }, 1050); + // setTimeout(() => { + // console.log( + // "%cTemporary", + // "background: peru; font-weight: bold; color: black; font-family: serif; padding: 0 10px;" + // ); + // const celkomplet: HTMLElement = document.querySelectorAll( + // ".buttons" + // )[0] as HTMLElement; + // celkomplet.style.display = "none"; + // }, 825); + // setTimeout(() => { + // const celkomplet1: HTMLElement = document.querySelectorAll( + // ".appearance-filled.size-medium.shape-rectangle.status-primary.ng-star-inserted.nb-transition" + // )[1] as HTMLElement; + // celkomplet1.click(); + // }, 1000); + // setTimeout(() => { + // const celkomplet2: HTMLElement = document.querySelectorAll( + // "#loadGeojsonButtonsContainer button" + // )[1] as HTMLElement; + // celkomplet2.click(); + // }, 1050); // setTimeout(() => { // const celkomplet3: HTMLElement = document.querySelectorAll( // ".leaflet-control-layers-selector" @@ -249,11 +259,11 @@ export class ResultsMapComponent implements OnChanges { if (this.newBrinkValuesApplied == true) { grades = [ 0, - this.newBrinkValues.get("legend_0").value, - this.newBrinkValues.get("legend_1").value, - this.newBrinkValues.get("legend_2").value, - this.newBrinkValues.get("legend_3").value, - this.newBrinkValues.get("legend_4").value, + this.newBrinkValuesForm.get("legend_0").value, + this.newBrinkValuesForm.get("legend_1").value, + this.newBrinkValuesForm.get("legend_2").value, + this.newBrinkValuesForm.get("legend_3").value, + this.newBrinkValuesForm.get("legend_4").value, ]; } else { grades = [ @@ -292,7 +302,9 @@ export class ResultsMapComponent implements OnChanges { "'>■</span> " + grades[i] + (grades[i + 1] ? "–" + grades[i + 1] + "</p>" : "+</p>"); - this.newBrinkValues.get(`legend_${i - 1}`).setValue(`${grades[i]}`); + this.newBrinkValuesForm + .get(`legend_${i - 1}`) + .setValue(`${grades[i]}`); } } else { div.innerHTML += @@ -310,7 +322,9 @@ export class ResultsMapComponent implements OnChanges { grades[i] + (grades[i + 1] ? "–" + grades[i + 1] + "</p>" : "+</p>"); - this.newBrinkValues.get(`legend_${i - 1}`).setValue(`${grades[i]}`); + this.newBrinkValuesForm + .get(`legend_${i - 1}`) + .setValue(`${grades[i]}`); } } @@ -514,7 +528,7 @@ export class ResultsMapComponent implements OnChanges { style: (feature) => ({ weight: this.geoJsonStyleWeight, color: MapColors.getNewColor( - this.newBrinkValues, + this.newBrinkValuesForm, feature["properties"], keys[f], parseInt(feature["properties"]["capacity"]) == 9999 @@ -535,7 +549,7 @@ export class ResultsMapComponent implements OnChanges { style: (feature) => ({ weight: this.geoJsonStyleWeight, color: MapColors.getNewColor( - this.newBrinkValues, + this.newBrinkValuesForm, feature["properties"], keys[f], parseInt(feature["properties"]["capacity"]) == 9999 @@ -553,7 +567,7 @@ export class ResultsMapComponent implements OnChanges { }); } } else { - // default, newBrinkValues not applied + // default, newBrinkValuesForm not applied if (keys[f] == "capacity") { tmp = L.geoJSON(<any>jsonFile, { style: (feature) => ({ @@ -658,9 +672,9 @@ export class ResultsMapComponent implements OnChanges { public addListenerToRadioButtonLayersControlAndSetLegend() { this.map.on("baselayerchange", (e) => { - console.log(" I ho pauroa d i te"); this.setLegend(e["name"]); this.checkedRadioButton = e["name"]; + this.newBrinkValuesForm.enable(); }); }