From b4a19524bb2853fba311a6bf18c5a93ea05f5538 Mon Sep 17 00:00:00 2001 From: zdenevuk <zdenko.vuk@ijs.si> Date: Wed, 14 Dec 2022 10:12:11 +0100 Subject: [PATCH] This is a combination of 10 commits. WIP getting error removed selected kpi from handleresponse WIP making some important changes WIP 2 WIP 3 WIP 4, not working looks to be working looks to be working fine. looks to be working --- .../results-map/results-map.component.html | 8 +- .../results-map/results-map.component.ts | 203 +++++++----------- 2 files changed, 78 insertions(+), 133 deletions(-) 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 7a835da1..46046d12 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,7 @@ /> </div> <div id="inputsLegendContainer"> - <form [formGroup]="newLegendValues" (ngSubmit)="onNewLegendSubmit()"> + <form [formGroup]="newBrinkValues" (ngSubmit)="onApplyNewValuesSubmit()"> <section> <div> <div> @@ -124,14 +124,12 @@ /> </div> <div> - <label for="" - >6th color, up to unlimited</label - > + <label for="">6th color, up to unlimited</label> </div> </div> <div> <button nbButton status="primary" type="submit"> - Confirm new legend + Apply new values </button> </div> </section> 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 2f963558..b68d8e7c 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 @@ -14,6 +14,7 @@ import { FormControl, FormGroup } from "@angular/forms"; styleUrls: ["./results-map.component.scss"], }) export class ResultsMapComponent implements OnChanges { + @Input() selectedSimulation: Simulation; public map: L.Map; options = { layers: [ @@ -26,18 +27,15 @@ export class ResultsMapComponent implements OnChanges { center: L.latLng({ lat: 50, lng: 14 }), }; mapLegend = new L.Control({ position: "bottomright" }); - radioButtonLayersControl: any; - loadGeojsons: Object[] = []; checkedRadioButton: string = ""; + extractingKeysLoopLimit: number = 3498; + geojsonLoading: boolean = false; geoJsonStyleWeight: number = 5; geoJsonStyleOpacity: number = 0.8; + grayscale: number = 50; + loadGeojsons: Object[] = []; maxKeyValues: Object = {}; - grayscale: any = 50; - geojsonLoading: boolean = false; - @Input() selectedSimulation: Simulation; - selectedGeojson: string = ""; - extractingKeysLoopLimit: number = 3498; - newLegendValues = new FormGroup({ + newBrinkValues = new FormGroup({ legend_0: new FormControl(undefined), legend_1: new FormControl(undefined), legend_2: new FormControl(undefined), @@ -45,6 +43,9 @@ export class ResultsMapComponent implements OnChanges { legend_4: new FormControl(undefined), legend_5: new FormControl(undefined), }); + newBrinkValuesApplied: boolean = false; + radioButtonLayersControl: any; + selectedGeojson: string = ""; constructor( private simulationService: SimulationService, @@ -126,10 +127,7 @@ export class ResultsMapComponent implements OnChanges { .getGeojson(this.selectedSimulation["id"].toString(), selectedKpi) .subscribe((res) => { this.loadGeojsons[index]["response"] = res; - this.handleResponse( - selectedKpi, - this.loadGeojsons[index]["response"] - ); + this.handleResponse(this.loadGeojsons[index]["response"]); }), (error) => { this.toastrService.show( @@ -142,22 +140,13 @@ export class ResultsMapComponent implements OnChanges { this.geojsonLoading = false; }; } else { - this.handleResponse( - selectedKpi, - this.loadGeojsons[index]["response"] - ); + this.handleResponse(this.loadGeojsons[index]["response"]); } } }); } - handleResponse(selectedKpi, res) { - this.loadGeojsons.forEach((geojson, index) => { - if (geojson["buttonValue"] == selectedKpi) { - this.loadGeojsons[index]["response"] = res; - } - }); - + handleResponse(res) { if (res["message"] == "Calculating...") { this.toastrService.show( "Server says: Calculating the KPI visualization. GEOJSON loading will not be completed.", @@ -218,6 +207,7 @@ export class ResultsMapComponent implements OnChanges { continue; obj[`${keys[i]}`] = propertyGeojsons[i]; } + this.radioButtonLayersControl = new L.Control.Layers(obj, null, { collapsed: false, }); @@ -226,6 +216,16 @@ export class ResultsMapComponent implements OnChanges { this.geojsonLoading = false; } + onApplyNewValuesSubmit() { + // here we are forcing the user to make his choices again + if (this.radioButtonLayersControl) + this.radioButtonLayersControl.remove(this.map); + this.resetLayersAndButton(); + + this.selectedGeojson = undefined; + this.newBrinkValuesApplied = true; + } + setLegend(legendType) { if (this.map != undefined && legendType == undefined) { this.map.removeControl(this.mapLegend); @@ -259,21 +259,14 @@ export class ResultsMapComponent implements OnChanges { var div = L.DomUtil.create("div"); let grades; - if ( - this.newLegendValues.get("legend_0").touched || - this.newLegendValues.get("legend_1").touched || - this.newLegendValues.get("legend_2").touched || - this.newLegendValues.get("legend_3").touched || - this.newLegendValues.get("legend_4").touched || - this.newLegendValues.get("legend_5").touched - ) { + if (this.newBrinkValuesApplied == true) { grades = [ 0, - this.newLegendValues.get("legend_0").value, - this.newLegendValues.get("legend_1").value, - this.newLegendValues.get("legend_2").value, - this.newLegendValues.get("legend_3").value, - this.newLegendValues.get("legend_4").value, + 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, ]; } else { grades = [ @@ -310,7 +303,7 @@ export class ResultsMapComponent implements OnChanges { "'>■</span> " + grades[i] + (grades[i + 1] ? "–" + grades[i + 1] + "</p>" : "+</p>"); - this.newLegendValues.get(`legend_${i - 1}`).setValue(`${grades[i]}`); + this.newBrinkValues.get(`legend_${i - 1}`).setValue(`${grades[i]}`); } } else { for (let i = 5; i > 0; i--) { @@ -320,7 +313,7 @@ export class ResultsMapComponent implements OnChanges { "'>■</span> " + grades[i] + (grades[i + 1] ? "–" + grades[i + 1] + "</p>" : "+</p>"); - this.newLegendValues.get(`legend_${i - 1}`).setValue(`${grades[i]}`); + this.newBrinkValues.get(`legend_${i - 1}`).setValue(`${grades[i]}`); } div.innerHTML += "<p style='background:white; display: inline; font-size:17px'> <span style='color:" + @@ -445,6 +438,7 @@ export class ResultsMapComponent implements OnChanges { } } } + jsonFile.allKeys = allKeys; return allKeys; } @@ -532,26 +526,50 @@ export class ResultsMapComponent implements OnChanges { }), }); } else { - tmp = L.geoJSON(<any>jsonFile, { - style: (feature) => ({ - weight: this.geoJsonStyleWeight, - color: MapColors.getColor( - feature["properties"], - keys[f], - this.maxKeyValues[`maxValue_${keys[f]}`], - ratiosBetweenGrades, - parseInt(feature["properties"]["capacity"]) == 9999 - ? true - : false - ), - opacity: this.geoJsonStyleOpacity, - }), - onEachFeature: (feature, layer) => - layer.on({ - mouseover: (e) => this.highlightFeature(e, feature.properties), - mouseout: (e) => this.resetFeature(e, feature.properties), + if (this.newBrinkValuesApplied) { + tmp = L.geoJSON(<any>jsonFile, { + style: (feature) => ({ + weight: this.geoJsonStyleWeight, + color: MapColors.getNewColor( + this.newBrinkValues, + feature["properties"], + keys[f], + parseInt(feature["properties"]["capacity"]) == 9999 + ? true + : false + ), + opacity: this.geoJsonStyleOpacity, }), - }); + onEachFeature: (feature, layer) => + layer.on({ + mouseover: (e) => + this.highlightFeature(e, feature.properties), + mouseout: (e) => this.resetFeature(e, feature.properties), + }), + }); + } else { + tmp = L.geoJSON(<any>jsonFile, { + style: (feature) => ({ + weight: this.geoJsonStyleWeight, + color: MapColors.getColor( + feature["properties"], + keys[f], + this.maxKeyValues[`maxValue_${keys[f]}`], + ratiosBetweenGrades, + parseInt(feature["properties"]["capacity"]) == 9999 + ? true + : false + ), + opacity: this.geoJsonStyleOpacity, + }), + onEachFeature: (feature, layer) => + layer.on({ + mouseover: (e) => + this.highlightFeature(e, feature.properties), + mouseout: (e) => this.resetFeature(e, feature.properties), + }), + }); + } } } tmp["myKey"] = keys[f]; @@ -812,75 +830,4 @@ export class ResultsMapComponent implements OnChanges { res["zoom"] ); } - - onNewLegendSubmit() { - console.log( - "%c for some reason this DESELECTS radio button and also layers", - "background: darkgoldenrod; color: black; font-weight: bold;" - ); - - if (this.radioButtonLayersControl) - this.radioButtonLayersControl.remove(this.map); - this.resetLayersAndButton(); - - console.log( - "%c hardcoded 3 here", - "background: red; color: black; font-weight: bold;" - ); - - const keys = this.extractKeys(this.loadGeojsons[3]["response"]); - const jsonFile = this.loadGeojsons[3]["response"]; - let propertyGeojsons = []; - - for (let f = 0; f < keys.length; f++) { - let tmp: Object = {}; - - if ( - this.maxKeyValues["maxValue_" + keys[f]] == undefined || - this.maxKeyValues["maxValue_" + keys[f]] == 0 - ) { - tmp = L.geoJSON(<any>{ - type: "FeatureCollection", - features: [], - }); - } else { - tmp = L.geoJSON(<any>jsonFile, { - style: (feature) => ({ - weight: this.geoJsonStyleWeight, - color: MapColors.getNewColor( - this.newLegendValues, - feature["properties"], - keys[f], - parseInt(feature["properties"]["capacity"]) == 9999 ? true : false - ), - opacity: this.geoJsonStyleOpacity, - }), - onEachFeature: (feature, layer) => - layer.on({ - mouseover: (e) => this.highlightFeature(e, feature.properties), - mouseout: (e) => this.resetFeature(e, feature.properties), - }), - }); - propertyGeojsons.push(tmp); - } - tmp["myKey"] = keys[f]; - } - - let obj = {}; - - for (let i = 0; i < propertyGeojsons.length; i++) { - if ( - propertyGeojsons[i].myKey == "link_id" || - propertyGeojsons[i].myKey == "modes" || - propertyGeojsons[i].myKey == "internal_travel_by_mode" - ) - continue; - obj[`${keys[i]}`] = propertyGeojsons[i]; - } - this.radioButtonLayersControl = new L.Control.Layers(obj, null, { - collapsed: false, - }); - this.map.addControl(this.radioButtonLayersControl); - this.addListenerToRadioButtonLayersControlAndSetLegend(); - } } -- GitLab