This is a combination of 2 commits.

just removed a log

some updates

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>

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

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