also added high to low colors for inputsLegendContainer

src/app/pages/simulation-wizard/results-map/results-map.component.ts

@@ -57,21 +57,6 @@ export class ResultsMapComponent implements OnChanges {
     this.map = map;
     this.grayscaleChange();
 
-    const legendLabels = document.querySelectorAll(
-      "#inputsLegendContainer > form > div > div > label"
-    );
-    for (let i = 0; i < legendLabels.length; i++) {
-      (legendLabels[i] as HTMLElement).style.backgroundColor =
-        MapColors.colorsAll[legendLabels.length - i - 1];
-    }
-    const inputsLegend = document.querySelectorAll(
-      "#inputsLegendContainer > form > div > div > input"
-    );
-    for (let i = 0; i < inputsLegend.length; i++) {
-      (inputsLegend[i] as HTMLElement).style.backgroundColor =
-        MapColors.colorsAll[inputsLegend.length - i];
-    }
-
     setTimeout(() => {
       this.map.invalidateSize();
       this.networkService.getMapInfo().subscribe((res) => {
@@ -97,7 +82,7 @@ export class ResultsMapComponent implements OnChanges {
     setTimeout(() => {
       const celkomplet2: HTMLElement = document.querySelectorAll(
         "#loadGeojsonButtonsContainer button"
-      )[3] as HTMLElement;
+      )[1] as HTMLElement;
       celkomplet2.click();
     }, 1050);
     // setTimeout(() => {
@@ -291,6 +276,8 @@ export class ResultsMapComponent implements OnChanges {
         ];
       }
 
+      this.setInputsLegendContainerColors(direction);
+
       if (direction == "lowToHigh") {
         div.innerHTML +=
           "<p style='background:white; display: inline; font-size:17px'> <span style='color:" +
@@ -314,6 +301,7 @@ export class ResultsMapComponent implements OnChanges {
           "'>&#9632</span> <" +
           grades[1] +
           "</p>";
+
         for (let i = 1; i < 6; i++) {
           div.innerHTML +=
             "<p style='background:white; display: inline; font-size:17px'> <span style='color:" +
@@ -321,6 +309,7 @@ export class ResultsMapComponent implements OnChanges {
             "'>&#9632</span> " +
             grades[i] +
             (grades[i + 1] ? "&ndash;" + grades[i + 1] + "</p>" : "+</p>");
+
           this.newBrinkValues.get(`legend_${i - 1}`).setValue(`${grades[i]}`);
         }
       }
@@ -335,7 +324,6 @@ export class ResultsMapComponent implements OnChanges {
     let text = "";
 
     if (feature["cityWide"]) {
-      console.log(" we have cityWide");
       for (let p in feature["cityWide"]["pollution"]) {
         const tmp = this.limitMyDigits(feature["cityWide"]["pollution"][p]);
         if (p == this.checkedRadioButton) {
@@ -670,6 +658,7 @@ 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"];
     });
@@ -923,4 +912,38 @@ export class ResultsMapComponent implements OnChanges {
       res["zoom"]
     );
   }
+
+  setInputsLegendContainerColors(direction: string): void {
+    if (direction == "lowToHigh") {
+      const legendLabels = document.querySelectorAll(
+        "#inputsLegendContainer > form > div > div > label"
+      );
+      for (let i = 0; i < legendLabels.length; i++) {
+        (legendLabels[i] as HTMLElement).style.backgroundColor =
+          MapColors.colorsAll[legendLabels.length - i - 1];
+      }
+      const inputsLegend = document.querySelectorAll(
+        "#inputsLegendContainer > form > div > div > input"
+      );
+      for (let i = 0; i < inputsLegend.length; i++) {
+        (inputsLegend[i] as HTMLElement).style.backgroundColor =
+          MapColors.colorsAll[inputsLegend.length - i];
+      }
+    } else {
+      const legendLabels = document.querySelectorAll(
+        "#inputsLegendContainer > form > div > div > label"
+      );
+      for (let i = 0; i < legendLabels.length; i++) {
+        (legendLabels[i] as HTMLElement).style.backgroundColor =
+          MapColors.colorsAll[i];
+      }
+      const inputsLegend = document.querySelectorAll(
+        "#inputsLegendContainer > form > div > div > input"
+      );
+      for (let i = 0; i < inputsLegend.length; i++) {
+        (inputsLegend[i] as HTMLElement).style.backgroundColor =
+          MapColors.colorsAll[i];
+      }
+    }
+  }
 }