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 79d70efe93ef1946bf3a7eaaa3b8491574a814ae..e1c6c6f0a0e88ed64bd83fac52721355b5ea22f9 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
@@ -14,16 +14,15 @@
<div id="loadGeojsonButtonsContainer">
<button
nbButton
- status="primary"
size="small"
- (click)="onLoad(l)"
+ (click)="onLoadClick(l.buttonLabel)"
nbTooltip="Select a simulation in order to use this button. GET http://localhost:8083/dss/geojson/{id}/selectedKpi"
[disabled]="selectedSimulation == undefined"
[nbSpinner]="geojsonLoading"
- [status]="selectedGeojson == l ? 'control' : 'primary'"
- *ngFor="let l of loadGeojsonButtons"
+ [status]="selectedGeojson == l.buttonLabel ? 'control' : 'primary'"
+ *ngFor="let l of loadGeojsons"
>
- load {{ l }} geojson
+ load {{ l.buttonLabel }} geojson
</button>
<button
nbButton
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 3a52ce6d6d9e6dbc1a7f32323a2f064798f5d08a..c5584b286657216b23e33e2c23fa510c8e7c5526 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
@@ -25,11 +25,23 @@ export class ResultsMapComponent implements OnChanges {
};
mapLegend = new L.Control({ position: "bottomright" });
radioButtonLayersControl: any;
- loadGeojsonButtons: string[] = [
- "bikeability",
- "bikeIntensity",
- "bikeSafety",
- "pollution",
+ loadGeojsons: Object[] = [
+ {
+ response: undefined,
+ buttonLabel: "bikeability",
+ },
+ {
+ response: undefined,
+ buttonLabel: "bikeIntensity",
+ },
+ {
+ response: undefined,
+ buttonLabel: "bikeSafety",
+ },
+ {
+ response: undefined,
+ buttonLabel: "pollution",
+ },
];
checkedRadioButton: string = "";
geoJsonStyleWeight: number = 5;
@@ -73,7 +85,7 @@ export class ResultsMapComponent implements OnChanges {
// }, 1000);
}
- onLoad(selectedKpi: string) {
+ onLoadClick(selectedKpi: string) {
this.selectedGeojson = selectedKpi;
this.resetLayersAndButton();
this.setMapZoom();
@@ -81,88 +93,115 @@ export class ResultsMapComponent implements OnChanges {
if (this.radioButtonLayersControl)
this.radioButtonLayersControl.remove(this.map);
- this.toastrService.show("This might take a while", "Info", {
- status: "info",
+ this.loadGeojsons.forEach((geojson, index) => {
+ if (geojson["buttonLabel"] == selectedKpi) {
+ if (this.loadGeojsons[index]["response"] == undefined) {
+ this.toastrService.show("This might take a while", "Info", {
+ status: "info",
+ });
+ this.geojsonLoading = true;
+ this.simulationService
+ .getGeojson(this.selectedSimulation["id"].toString(), selectedKpi)
+ .subscribe((res) => {
+ this.loadGeojsons[index]["response"] = res;
+ this.handleResponse(
+ selectedKpi,
+ this.loadGeojsons[index]["response"]
+ );
+ }),
+ (error) => {
+ this.toastrService.show(
+ error["message"],
+ "Error Getting Geojson",
+ {
+ status: "danger",
+ }
+ );
+ this.geojsonLoading = false;
+ };
+ } else {
+ this.handleResponse(
+ selectedKpi,
+ this.loadGeojsons[index]["response"]
+ );
+ }
+ }
});
- this.geojsonLoading = true;
- this.simulationService
- .getGeojson(this.selectedSimulation["id"].toString(), selectedKpi)
- .subscribe(
- (res) => {
- if (res["message"] == "Calculating...") {
- this.toastrService.show(
- "Server says: Calculating the KPI visualization. GEOJSON loading will not be completed.",
- "Geojson not ready",
- {
- status: "danger",
- duration: 10000,
- }
- );
- this.geojsonLoading = false;
- return;
- } else if (res["message"] == "Calculating the KPI visualization.") {
- this.toastrService.show(
- "Server says: Calculating the KPI visualization. GEOJSON loading will not be completed.",
- "Geojson not ready",
- {
- status: "danger",
- duration: 10000,
- }
- );
- this.geojsonLoading = false;
- return;
- } else if (res["message"] == "Please prepare visualizations first.") {
- this.toastrService.show(
- "The visualization is not prepared yet, try again in a few minutes.",
- "Geojson not ready",
- {
- status: "danger",
- duration: 10000,
- }
- );
- this.geojsonLoading = false;
- return;
- } else if (res["message"] && res["message"].length > 0) {
- this.toastrService.show(
- "Geojson might not be ready",
- "API response contains a message",
- {
- status: "warning",
- }
- );
- }
+ }
- this.toastrService.show("", "Geojson Loaded", {
- status: "success",
- });
+ handleResponse(selectedKpi, res) {
+ this.loadGeojsons.forEach((geojson, index) => {
+ if (geojson["buttonLabel"] == selectedKpi) {
+ this.loadGeojsons[index]["response"] = res;
+ }
+ });
- const keys = this.extractKeys(res);
- const propertyGeojsons = this.populatePropertyGeojsons(res, keys);
- 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.addListenerToRadioButtonLayersControl();
- this.geojsonLoading = false;
- },
- (error) => {
- this.toastrService.show(error["message"], "Error Getting Geojson", {
- status: "danger",
- });
- this.geojsonLoading = false;
+ if (res["message"] == "Calculating...") {
+ this.toastrService.show(
+ "Server says: Calculating the KPI visualization. GEOJSON loading will not be completed.",
+ "Geojson not ready",
+ {
+ status: "danger",
+ duration: 10000,
+ }
+ );
+ this.geojsonLoading = false;
+ return;
+ } else if (res["message"] == "Calculating the KPI visualization.") {
+ this.toastrService.show(
+ "Server says: Calculating the KPI visualization. GEOJSON loading will not be completed.",
+ "Geojson not ready",
+ {
+ status: "danger",
+ duration: 10000,
}
);
+ this.geojsonLoading = false;
+ return;
+ } else if (res["message"] == "Please prepare visualizations first.") {
+ this.toastrService.show(
+ "The visualization is not prepared yet, try again in a few minutes.",
+ "Geojson not ready",
+ {
+ status: "danger",
+ duration: 10000,
+ }
+ );
+ this.geojsonLoading = false;
+ return;
+ } else if (res["message"] && res["message"].length > 0) {
+ this.toastrService.show(
+ "Geojson might not be ready",
+ "API response contains a message",
+ {
+ status: "warning",
+ }
+ );
+ }
+
+ this.toastrService.show("", "Geojson Loaded", {
+ status: "success",
+ });
+
+ const keys = this.extractKeys(res);
+ const propertyGeojsons = this.populatePropertyGeojsons(res, keys);
+ 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.addListenerToRadioButtonLayersControl();
+ this.geojsonLoading = false;
}
setLegend(legendType) {
@@ -628,5 +667,9 @@ export class ResultsMapComponent implements OnChanges {
ngOnChanges() {
this.resetLayersAndButton();
this.selectedGeojson = "";
+
+ Object.entries(this.loadGeojsons).forEach((entry) => {
+ entry[1]["response"] = undefined;
+ });
}
}