Merge branch 'master' of...

Merge branch 'master' of https://git.code.tecnalia.com/urbanite/private/wp5-integration-and-devops/urbanite-ui-template

src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.html

@@ -29,7 +29,7 @@
     "
   >
     <nb-card-body class="single-sim">
-      <span>
+      <span class="text-name">
         {{ simulation.name }}
         <nb-icon
           [icon]="
@@ -53,9 +53,7 @@
         >
         </nb-icon>
       </span>
-      <span class="subtitle-2 text-description">{{
-        simulation.description
-      }}</span>
+      <span class="text-description">{{ simulation.description }}</span>
       <button
         *ngIf="selectedSimulation == simulation; else elseBlock"
         nbButton
@@ -65,17 +63,23 @@
       >
         selected
       </button>
-      <span
-        class="subtitle-2 text-hint"
-        [@socketStatusAnimation]="simulation.animationState"
-        (@socketStatusAnimation.done)="onAnimationEventDone($event, i)"
-        (@socketStatusAnimation.start)="onAnimationEventStart($event, i)"
-      ></span>
       <ng-template #elseBlock>
         <button nbButton status="primary" (click)="onSelect(simulation)">
           select
         </button>
       </ng-template>
+      <span
+        class="text-duration"
+        *ngIf="
+          simulation.duration != undefined;
+          else elseSimulationDurationBlock
+        "
+      >
+        {{ simulation.duration }}
+      </span>
+      <ng-template #elseSimulationDurationBlock>
+        <span class="text-duration"> no data about duration </span>
+      </ng-template>
     </nb-card-body>
   </nb-card>
 </section>
@@ -308,8 +312,9 @@
       nbTooltip="This button will run Preprocess Data, Generate Population, Generate Travel Demand Model and Run the Simulation. GET http://localhost:8082/traffic-simulation/simulation/{id}/run"
       [disabled]="!selectedSimulation || runSimulationBtnDisabled"
     >
-      Run simulation</button
-    ><nb-icon
+      Run simulation
+    </button>
+    <!-- <nb-icon
       [icon]="
         runSimulation.status == 'running'
           ? 'loader-outline'
@@ -329,7 +334,7 @@
       [ngClass]="{ 'icon-spin': runSimulation.status == 'running' }"
       class="icon"
     >
-    </nb-icon>
+    </nb-icon> -->
   </div>
   <div class="mb-2 button-envelope">
     <button

src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.scss

@@ -100,20 +100,22 @@
       align-items: center;
       padding-top: 0.25rem;
       padding-bottom: 0.25rem;
-      span {
-        margin-right: 15px;
+      span.text-name {
         min-width: 280px;
-      }
-      span.text-hint {
-        min-width: 210px;
+        margin-right: 15px;
       }
       span.text-description {
         min-width: 220px;
+        margin-right: 15px;
       }
       button {
         margin-right: 15px;
         min-width: 112px;
       }
+      span.text-duration {
+        min-width: 220px;
+        flex-grow: 1;
+      }
     }
     span.text-hint,
     span.text-description {
@@ -153,6 +155,34 @@
   }
 }
 
+@media screen and (max-width: 1000px) {
+  .nb-card {
+    margin-top: 0.75rem !important;
+    .single-sim {
+      display: flex;
+      flex-wrap: wrap;
+      > * {
+        margin-bottom: 0.25rem;
+      }
+      span {
+        width: 100%;
+      }
+      span.text-name {
+        margin-right: 0px;
+      }
+      span.text-description {
+        margin-right: 0px;
+      }
+      button {
+        margin-right: 0px;
+      }
+      button {
+        order: 4;
+      }
+    }
+  }
+}
+
 .icon {
   margin-left: 0.25em;
   margin-right: 0.3em;

src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.ts

@@ -372,12 +372,10 @@ export class ExistingSimulationsComponent implements OnInit {
     );
     let startTime, endTime;
     startTime = new Date();
-    console.log("🚀☢ ~ this.selectedSimulation", this.selectedSimulation);
     this.simulationService
       .getCalculateKPIs(this.selectedCity.cityId, this.selectedSimulation.id)
       .subscribe(
         (res) => {
-          console.log("🚀☢ ~ res", res);
           this.calculateKPIS.status = "";
           endTime = new Date();
           let timeDiff = endTime - startTime;
@@ -425,10 +423,6 @@ export class ExistingSimulationsComponent implements OnInit {
           // rudimentary way of concincing our-spider-chart to redownload evaluated json
           this.selectedSimulationToEmit.emit(undefined);
           setTimeout(() => {
-            console.log(
-              "🚀☢ ~ this.selectedSimulation.id.toString()",
-              this.selectedSimulation
-            );
             this.selectedSimulationToEmit.emit(this.selectedSimulation);
             this.showToast(`Updating spider chart.`, "Info", "info");
           }, 0);

src/app/pages/simulation-wizard/ml-module/ml-module.component.scss

@@ -27,4 +27,7 @@
       }
     }
   }
+  a {
+    text-decoration: none;
+  }
 }

src/app/pages/simulation-wizard/our-spider-chart/our-spider-chart.component.ts

@@ -98,7 +98,7 @@ export class OurSpiderChartComponent implements OnChanges {
                       values_B.push(entry[1] as string);
                     }
                   } else {
-                    console.log("🚀☢ Setting 0");
+                    console.log("🚀☢ Setting 0 for ", entry[0]);
                     if (j == 0) {
                       values_A.push(0);
                     } else if (j == 1) {

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

+// legendInverted are those who 'more is better'
+export const legendInverted: string[] = [
+    'infra', 'speed', 'bikeability_safety', 'capacity'
+]
+
+// ratiosBetweenGrades are used for legend
+export const ratiosBetweenGrades: number[] = [25.6, 12.8, 6.4, 3.2, 1.6];

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

@@ -14,18 +14,46 @@
       <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]="clickedButton == 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
+          (click)="openOverviewOfIndicators(dialog)"
+          nbTooltip="click for overview of indicators"
+          [disabled]="selectedSimulation == undefined"
+        >
+          <nb-icon icon="info-outline"></nb-icon>
         </button>
       </div>
+      <ng-template #dialog let-data let-ref="dialogRef">
+        <nb-card>
+          <nb-card-header
+            >Overview of Indicators for {{ data | titlecase }}
+          </nb-card-header>
+          <nb-card-body>
+            <img
+              src="{{
+                'assets/images/overviewOfIndicators' +
+                  data[0].toUpperCase() +
+                  data.slice(1) +
+                  '.png'
+              }}"
+              alt=""
+            />
+          </nb-card-body>
+          <nb-card-footer>
+            <button nbButton (click)="ref.close()">Close</button>
+          </nb-card-footer>
+        </nb-card>
+      </ng-template>
     </div>
     <div id="grayscaleInput">
       <input

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

@@ -16,7 +16,7 @@
   }
   ::ng-deep .leaflet-top.leaflet-right {
     position: relative;
-    top: 37px;
+    top: 42px;
   }
   #grayscaleInput {
     background: #fffd;

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

-import { Component, Input } from "@angular/core";
+import { Component, Input, TemplateRef, OnChanges } from "@angular/core";
 import * as L from "leaflet";
 import { SimulationService } from "../utils/services/simulation.service";
 import * as MapColors from "./map-colors-local";
-import { NbToastrService } from "@nebular/theme";
+import { legendInverted, ratiosBetweenGrades } from "./results-map-settings";
+import { NbToastrService, NbDialogService } from "@nebular/theme";
 import { Simulation } from "../utils/data/simulation";
 
 @Component({
@@ -10,7 +11,7 @@ import { Simulation } from "../utils/data/simulation";
   templateUrl: "./results-map.component.html",
   styleUrls: ["./results-map.component.scss"],
 })
-export class ResultsMapComponent {
+export class ResultsMapComponent implements OnChanges {
   public map: L.Map;
   options = {
     layers: [
@@ -24,25 +25,37 @@ export class ResultsMapComponent {
   };
   mapLegend = new L.Control({ position: "bottomright" });
   radioButtonLayersControl: any;
+  loadGeojsons: Object[] = [
+    {
+      response: undefined,
+      buttonLabel: "bikeability",
+    },
+    {
+      response: undefined,
+      buttonLabel: "bikeIntensity",
+    },
+    {
+      response: undefined,
+      buttonLabel: "bikeSafety",
+    },
+    {
+      response: undefined,
+      buttonLabel: "pollution",
+    },
+  ];
   checkedRadioButton: string = "";
   geoJsonStyleWeight: number = 5;
   geoJsonStyleOpacity: number = 0.8;
   maxKeyValues: Object = {};
-  ratiosBetweenGrades: number[] = [25.6, 12.8, 6.4, 3.2, 1.6];
   grayscale: any = 50;
   geojsonLoading: boolean = false;
   @Input() selectedSimulation: Simulation;
-  clickedButton: string = "";
-  loadGeojsonButtons: string[] = [
-    "bikeability",
-    "bikeIntensity",
-    "bikeSafety",
-    "pollution",
-  ];
+  selectedGeojson: string = "";
 
   constructor(
     private simulationService: SimulationService,
-    private toastrService: NbToastrService
+    private toastrService: NbToastrService,
+    private dialogService: NbDialogService
   ) {}
   onMapReady(map: L.Map) {
     this.map = map;
@@ -57,7 +70,7 @@ export class ResultsMapComponent {
     //   );
     //   const celkomplet: HTMLElement = document.querySelectorAll(
     //     ".ng-tns-c441-0.appearance-filled.size-medium.shape-rectangle.status-primary.ng-star-inserted.nb-transition"
-    //   )[6] as HTMLElement;
+    //   )[1] as HTMLElement;
     //   celkomplet.click();
     // }, 995);
     // setTimeout(() => {
@@ -72,21 +85,57 @@ export class ResultsMapComponent {
     // }, 1000);
   }
 
-  onLoad(selectedKpi: string) {
-    this.clickedButton = selectedKpi;
+  onLoadClick(selectedKpi: string) {
+    this.selectedGeojson = selectedKpi;
+    this.resetLayersAndButton();
     this.setMapZoom();
 
     if (this.radioButtonLayersControl)
       this.radioButtonLayersControl.remove(this.map);
 
+    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) => {
+            .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"]
+          );
+        }
+      }
+    });
+  }
+
+  handleResponse(selectedKpi, res) {
+    this.loadGeojsons.forEach((geojson, index) => {
+      if (geojson["buttonLabel"] == selectedKpi) {
+        this.loadGeojsons[index]["response"] = res;
+      }
+    });
+
     if (res["message"] == "Calculating...") {
       this.toastrService.show(
         "Server says: Calculating the KPI visualization. GEOJSON loading will not be completed.",
@@ -153,35 +202,20 @@ export class ResultsMapComponent {
     this.map.addControl(this.radioButtonLayersControl);
     this.addListenerToRadioButtonLayersControl();
     this.geojsonLoading = false;
-        },
-        (error) => {
-          this.toastrService.show(error["message"], "Error Getting Geojson", {
-            status: "danger",
-          });
-          this.geojsonLoading = false;
-        }
-      );
   }
 
-  // LEGEND
   setLegend(legendType) {
+    if (this.map != undefined && legendType == undefined) {
+      this.map.removeControl(this.mapLegend);
+      return;
+    }
+    if (this.map == undefined) {
+      return;
+    }
+
     this.mapLegend.onAdd = (map) => {
       let direction: string;
-      if (
-        legendType == "PM" ||
-        legendType == "CO2_rep" ||
-        legendType == "CO" ||
-        legendType == "CO2_TOTAL" ||
-        legendType == "HC" ||
-        legendType == "NOx" ||
-        legendType == "pedestrianTravelTime" ||
-        legendType == "bike_count" ||
-        legendType == "bus_count" ||
-        legendType == "car_count" ||
-        legendType == "infra" ||
-        legendType == "speed" ||
-        legendType == "bikeability_safety"
-      ) {
+      if (legendInverted.indexOf(legendType) == -1) {
         direction = "lowToHigh";
       } else {
         direction = "highToLow";
@@ -191,6 +225,10 @@ export class ResultsMapComponent {
         this.maxKeyValues["maxValue_" + legendType] == undefined ||
         this.maxKeyValues["maxValue_" + legendType] == 0
       ) {
+        this.toastrService.info(
+          "Geojson not displayed because all values are undefined or zero!",
+          "Geojson not displayed"
+        );
         let div = L.DomUtil.create("div");
         div.innerHTML += `<p style='background:white; display: inline; font-size:17px; padding: 0 7px; background: #ff3d71'>Values for ${legendType} kpi are undefined or zero!</p>`;
         return div;
@@ -200,24 +238,19 @@ export class ResultsMapComponent {
       const grades = [
         0,
         this.limitMyDigits(
-          this.maxKeyValues["maxValue_" + legendType] /
-            this.ratiosBetweenGrades[0]
+          this.maxKeyValues["maxValue_" + legendType] / ratiosBetweenGrades[0]
         ),
         this.limitMyDigits(
-          this.maxKeyValues["maxValue_" + legendType] /
-            this.ratiosBetweenGrades[1]
+          this.maxKeyValues["maxValue_" + legendType] / ratiosBetweenGrades[1]
         ),
         this.limitMyDigits(
-          this.maxKeyValues["maxValue_" + legendType] /
-            this.ratiosBetweenGrades[2]
+          this.maxKeyValues["maxValue_" + legendType] / ratiosBetweenGrades[2]
         ),
         this.limitMyDigits(
-          this.maxKeyValues["maxValue_" + legendType] /
-            this.ratiosBetweenGrades[3]
+          this.maxKeyValues["maxValue_" + legendType] / ratiosBetweenGrades[3]
         ),
         this.limitMyDigits(
-          this.maxKeyValues["maxValue_" + legendType] /
-            this.ratiosBetweenGrades[4]
+          this.maxKeyValues["maxValue_" + legendType] / ratiosBetweenGrades[4]
         ),
       ];
 
@@ -372,6 +405,16 @@ export class ResultsMapComponent {
 
     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 {
         if (keys[f] == "capacity") {
           tmp = L.geoJSON(<any>jsonFile, {
             style: (feature) => ({
@@ -380,8 +423,10 @@ export class ResultsMapComponent {
                 feature["properties"]["capacity"],
                 keys[f],
                 this.maxKeyValues[`maxValue_${keys[f]}`],
-              this.ratiosBetweenGrades,
-              parseInt(feature["properties"]["capacity"]) == 9999 ? true : false
+                ratiosBetweenGrades,
+                parseInt(feature["properties"]["capacity"]) == 9999
+                  ? true
+                  : false
               ),
               opacity: this.geoJsonStyleOpacity,
             }),
@@ -401,8 +446,10 @@ export class ResultsMapComponent {
                   feature["properties"].dailyInternalBikeTravels,
                 keys[f],
                 this.maxKeyValues[`maxValue_${keys[f]}`],
-              this.ratiosBetweenGrades,
-              parseInt(feature["properties"]["capacity"]) == 9999 ? true : false
+                ratiosBetweenGrades,
+                parseInt(feature["properties"]["capacity"]) == 9999
+                  ? true
+                  : false
               ),
               opacity: this.geoJsonStyleOpacity,
             }),
@@ -422,8 +469,10 @@ export class ResultsMapComponent {
                   feature["properties"].pedestrianTravelTime,
                 keys[f],
                 this.maxKeyValues[`maxValue_${keys[f]}`],
-              this.ratiosBetweenGrades,
-              parseInt(feature["properties"]["capacity"]) == 9999 ? true : false
+                ratiosBetweenGrades,
+                parseInt(feature["properties"]["capacity"]) == 9999
+                  ? true
+                  : false
               ),
               opacity: this.geoJsonStyleOpacity,
             }),
@@ -441,8 +490,10 @@ export class ResultsMapComponent {
                 feature["properties"],
                 keys[f],
                 this.maxKeyValues[`maxValue_${keys[f]}`],
-              this.ratiosBetweenGrades,
-              parseInt(feature["properties"]["capacity"]) == 9999 ? true : false
+                ratiosBetweenGrades,
+                parseInt(feature["properties"]["capacity"]) == 9999
+                  ? true
+                  : false
               ),
               opacity: this.geoJsonStyleOpacity,
             }),
@@ -453,6 +504,7 @@ export class ResultsMapComponent {
               }),
           });
         }
+      }
       tmp["myKey"] = keys[f];
       res.push(tmp);
     }
@@ -573,12 +625,16 @@ export class ResultsMapComponent {
   }
 
   setMapZoom() {
+    if (this.selectedSimulation != undefined) {
       if (this.selectedSimulation["city"]["cityId"] == "amsterdam") {
         this.map.setView(new L.LatLng(52.4, 4.9), 9);
       } else if (this.selectedSimulation["city"]["cityId"] == "bilbao") {
         this.map.setView(new L.LatLng(43.3, -2.9), 9);
       } else if (this.selectedSimulation["city"]["cityId"] == "helsinki") {
-      this.map.setView(new L.LatLng(60.2, 24.9), 9);
+        this.map.setView(
+          new L.LatLng(60.16005488265436, 24.920971999284017),
+          13
+        );
       } else if (this.selectedSimulation["city"]["cityId"] == "messina") {
         this.map.setView(new L.LatLng(38.2, 15.6), 9);
       } else {
@@ -588,3 +644,39 @@ export class ResultsMapComponent {
       }
     }
   }
+
+  openOverviewOfIndicators(dialog: TemplateRef<any>) {
+    this.dialogService.open(dialog, {
+      context: this.selectedSimulation["city"]["cityId"],
+    });
+  }
+
+  resetLayersAndButton() {
+    let timeout = 100;
+    if (this.map != undefined) {
+      this.map.eachLayer((layer) => {
+        if (layer["feature"] != undefined) {
+          setTimeout(() => {
+            this.map.removeLayer(layer);
+            timeout += 50;
+          }, timeout);
+        }
+      });
+
+      if (this.radioButtonLayersControl)
+        this.radioButtonLayersControl.remove(this.map);
+    }
+    this.setLegend(undefined);
+  }
+
+  ngOnChanges() {
+    this.resetLayersAndButton();
+    this.selectedGeojson = "";
+
+    Object.entries(this.loadGeojsons).forEach((entry) => {
+      entry[1]["response"] = undefined;
+    });
+
+    this.setMapZoom();
+  }
+}