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 {
             "'>&#9632</span> " +
             grades[i] +
             (grades[i + 1] ? "&ndash;" + 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 {
             "'>&#9632</span> " +
             grades[i] +
             (grades[i + 1] ? "&ndash;" + 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