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 8257d6101e4f88999ba43c9529fea341a309b177..9ff09a5dcf595d7d90c0c953a44213a3658a52ac 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 @@ -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 { "'>■</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 { "'>■</span> " + grades[i] + (grades[i + 1] ? "–" + 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]; + } + } + } }