first try to update wp4 ui module

package.json

@@ -58,6 +58,7 @@
     "@ngx-config/http-loader": "^9.0.0",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
+    "@stomp/ng2-stompjs": "^8.0.0",
     "@swimlane/ngx-charts": "^14.0.0",
     "@turf/turf": "^6.3.0",
     "@types/leaflet": "1.2.3",
@@ -81,6 +82,7 @@
     "ionicons": "2.0.1",
     "iso8601-js-period": "^0.2.1",
     "leaflet": "1.2.0",
+    "leaflet-area-select": "^1.0.5",
     "leaflet-draw": "^1.0.4",
     "leaflet-timedimension": "^1.1.1",
     "leaflet.awesome-markers": "^2.0.5",

src/app/@theme/components/header/header.component.ts

@@ -11,6 +11,8 @@ import { NbAuthService } from '@nebular/auth';
 import { Router } from '@angular/router';
 import { OidcUserInformationService } from '../../../auth/services/oidc-user-information.service';
 import { UserClaims } from '../../../auth/oidc/oidc';
+import { CityService } from '../../../pages/simulation-wizard/utils/services/city.service';
+import { City } from '../../../pages/simulation-wizard/utils/data/city';
 import { ConfigService } from '@ngx-config/core';
 import { TranslateService } from '@ngx-translate/core';
 

src/app/app-routing.module.ts

@@ -5,6 +5,7 @@ import { AuthLoginComponent } from './auth/login/auth-login.component';
 import { AuthCallbackComponent } from './auth/callback/auth-callback.component';
 import { AuthGuard } from './auth/services/auth.guard';
 import { AuthLogoutComponent } from './auth/logout/auth-logout.component';
+import { ResultsMapComponent } from './pages/simulation-wizard/results-map/results-map.component';
 
 export const routes: Routes = [
   {
@@ -13,6 +14,10 @@ export const routes: Routes = [
       .then(m => m.PagesModule),
     // canActivate: [AuthGuard]
   },
+  {
+    path: "results-map",
+    component: ResultsMapComponent
+  },
   {
     path: 'keycloak-auth',
     component: NbAuthComponent,

src/app/app.component.ts

@@ -11,6 +11,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { NbAuthJWTToken, NbAuthOAuth2JWTToken, NbAuthOAuth2Token, NbAuthService, NbAuthStrategy, NbOAuth2AuthStrategy, NbOAuth2ClientAuthMethod, NbOAuth2GrantType, NbOAuth2ResponseType } from '@nebular/auth';
 import { ConfigService } from '@ngx-config/core';
 import { OidcJWTToken } from './auth/oidc/oidc';
+import { CityService } from './pages/simulation-wizard/utils/services/city.service';
 import { TranslateService } from '@ngx-translate/core';
 
 @Component({

src/app/app.module.ts

@@ -81,15 +81,42 @@ import { DatastorageService } from './pages/dashboard-management/services/datast
            view: '*'
          },
          MANAGER: {
-           view: ['external-app', 'maps', 'messina', 'home', 'about', 'charts', 'catalogues', 'simulation-wizard', 'map-layers', 'traffic simulation', 'tecnalia', 'dashboard-management', 'PRIVATE_DASHBOARDS', 'SHARED_DASHBOARDS', 'PUBLIC_DASHBOARDS']
+          view: [
+            'external-app',
+            'maps',
+            'messina',
+            'home',
+            'about',
+            'charts',
+            'catalogues',
+            'simulation-wizard',
+            'map-layers',
+            'traffic simulation',
+            'tecnalia',
+            'dashboard-management',
+            'PRIVATE_DASHBOARDS',
+            'SHARED_DASHBOARDS',
+            'PUBLIC_DASHBOARDS'],
         },
         CITIZEN: {
-           view: ['home', 'about', 'ui-features','catalogues', 'simulation-wizard', 'traffic simulation', 'tecnalia', 'PRIVATE_DASHBOARDS', 'SHARED_DASHBOARDS', 'PUBLIC_DASHBOARDS']
-         }
-         ,
+          view: [
+            'home',
+            'about',
+            'ui-features',
+            'catalogues',
+            'simulation-wizard',
+            'traffic simulation',
+            'tecnalia',
+            'PRIVATE_DASHBOARDS',
+            'SHARED_DASHBOARDS',
+            'PUBLIC_DASHBOARDS'],
+        },
         ANONYMOUS: {
-           view: ['home', 'about', 'PUBLIC_DASHBOARDS']
-         }
+          view: [
+            'home',
+            'about',
+            'PUBLIC_DASHBOARDS'],
+         },
        },
      })
    ],

src/app/pages/maps/single-map/single-map.component.ts

@@ -4,6 +4,7 @@ import * as L from 'leaflet';
 
 import AMTram2020 from '../../../../assets/map/am_tram_2020.json';
 import AMTram2018 from '../../../../assets/map/am_tram_2018.json';
+import { Scenario } from "../../simulation-wizard/utils/data/scenario";
 
 @Component({
   selector: 'ngx-single-map',

src/app/pages/pages-menu.ts

@@ -187,16 +187,40 @@ export const MENU_ITEMS: NbMenuItem[] = [
     }
   },
   {
-    title: 'Traffic Simulation',
-    icon: 'briefcase',
+    title: "Traffic Simulation",
+    icon: "briefcase",
     data: {
-      name: 'traffic simulation',
+      name: "traffic simulation",
     },
     children: [
       {
-        title: 'Simulations',
-        link: '/pages/simulation-wizard',
+        title: "Simulations",
+        link: "/pages/simulation-wizard/simulations",
       },
+      {
+        title: "Create Simulation",
+        link: "/pages/simulation-wizard/simulation-creation",
+      },
+      {
+        title: "ML Module",
+        link: "/pages/simulation-wizard/ml-module",
+      },
+      {
+        title: "Recommender",
+        link: "/pages/simulation-wizard/recommender",
+      },
+      {
+        title: "Visualizations",
+        link: "/pages/simulation-wizard/visualizations",
+      },
+      {
+        title: 'Edit Network Map',
+        link: '/pages/simulation-wizard/edit-network-map',
+      },
+      // {
+      //   title: 'Single Map Animated',
+      //   link: '/pages/simulation-wizard/single-map-bravo',
+      // },
     ],
   },
   {

src/app/pages/simulation-wizard/comparison/comparison.component.html

-<div class="row">
-  <!-- Current DISABLED -->
-  <div *ngIf="false && simulation1" class="col-md-5">
-    <h4>{{simulation1.name}}</h4>
-    <p>{{simulation1.description}}</p>
-    <ngx-single-map-jsi
-      [selectedScenario]="scenario">
-    </ngx-single-map-jsi>
-  </div>
-
-  <!-- Proposed DISABLED -->
-  <div *ngIf="false && simulation2" class="col-md-5">
-    <h4>{{simulation2.name}}</h4>
-    <p>{{simulation2.description}}</p>
-    <ngx-single-map-jsi
-      [selectedScenario]="scenario">
-    </ngx-single-map-jsi>
-  </div>
-</div>
-
-<!-- Radar -->
-<div class="row">
-  <div *ngIf="simulation1 && simulation2"
-       class="col-lg-12">
-    <ngx-decision-support-radar [scenario]="scenario">
-    </ngx-decision-support-radar>
-  </div>
-</div>

src/app/pages/simulation-wizard/comparison/comparison.component.ts

-import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
-import {Scenario} from '../data/scenario';
-import {Simulation} from '../data/simulation';
-
-@Component({
-  selector: 'ngx-comparison',
-  templateUrl: './comparison.component.html',
-  styleUrls: ['./comparison.component.scss']
-})
-export class ComparisonComponent implements OnInit, OnChanges {
-
-  @Input() simulation1?: Simulation;
-  @Input() simulation2?: Simulation;
-  @Input() scenario?: Scenario;
-
-  constructor() {
-  }
-
-  ngOnInit(): void {
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    console.log("comparison changes:", changes)
-  }
-
-
-}

src/app/pages/simulation-wizard/data/com.service.ts

-import {Injectable} from '@angular/core';
-import {HttpClient, HttpHeaders} from '@angular/common/http';
-import {Observable, of, pipe} from 'rxjs';
-import { tap } from 'rxjs/operators';
-import {Scenario} from './scenario';
-import {Network} from './network';
-import {POPULATIONS} from './populations.mock';
-import {Fleet} from './fleet';
-import {FLEETS} from './fleets.mock';
-import {Vehicle} from './vehicle';
-import {VEHICLES} from './vehicles.mock';
-import {Simulation} from './simulation';
-import { ConfigService } from '@ngx-config/core';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class ComService {
-  //ENG- Moved this on config.json and loaded by configService
-  //public traffic_sim_server: string = "http://localhost:8081";
-  public traffic_sim_server: any;
-
-  constructor(private http: HttpClient, configService: ConfigService) { 
-    this.traffic_sim_server = configService.getSettings("jsi.traffic_sim_server");
-  }
-
-  sendGetResultsVis(simId: number): Observable<any> {
-    const options = {
-      headers: new HttpHeaders({
-        'Content-Type': 'application/json',
-      }),
-      observe: 'response' as const,
-    };
-    const url: string = `${this.traffic_sim_server}/simulation/${simId}/results/vis-trips`;
-    return this.http.get(url).pipe(tap(console.log));
-  }
-
-  // Scenario
-  createScenario(scenario: Scenario) {
-    const payload: Object = {
-      name: scenario.name,
-      description: scenario.description,
-    };
-    console.log(payload);
-    const options = {
-      headers: new HttpHeaders({
-        'Content-Type':  'application/json',
-      }),
-    };
-    const url: string = `${this.traffic_sim_server}/scenario/new`;
-    return this.http.post<Scenario>(url, payload, options);
-  }
-
-  getScenarios(): Observable<Scenario[]> {
-    const url: string = `${this.traffic_sim_server}/scenario`;
-    return this.http.get<Scenario[]>(url);
-  }
-
-  getScenario(id: number): Observable<Scenario> {
-    const url: string = `${this.traffic_sim_server}/scenario/`;
-    return this.http.get<Scenario>(url);
-  }
-
-  // Network
-  getNetworks(): Observable<Network[]> {
-    const url: string = `${this.traffic_sim_server}/network/`;
-    return this.http.get<Network[]>(url);
-  }
-
-  selectNetwork(netId: string): Observable<Network> {
-    const options = {
-      headers: new HttpHeaders({
-        'Content-Type': 'application/json',
-      }),
-      observe: 'body' as const,
-    };
-    const url: string = `${this.traffic_sim_server}/network/${netId}/`;
-    return this.http.get<Network>(url);
-  }
-
-  // Simulation
-  getSimulations(scenarioId: number): Observable<Simulation[]> {
-    const options = {
-      headers: new HttpHeaders({
-        'Content-Type': 'application/json',
-      }),
-      observe: 'body' as const,
-    };
-    const url: string = `${this.traffic_sim_server}/scenario/simulations/${scenarioId}/`;
-    return this.http.get<Simulation[]>(url).pipe(
-      tap(console.log)
-    );
-  }
-
-  updateSimulation(simulation: Simulation): Observable<Simulation> {
-    const options = {
-      headers: new HttpHeaders({
-        'Content-Type': 'application/json'
-      })
-    }
-    const url: string = `${this.traffic_sim_server}/simulation/${simulation.simId}`;
-    return this.http.put<Simulation>(url, simulation, options);
-  }
-
-  runSimulation(id: number): Observable<any> {
-    const url: string = `${this.traffic_sim_server}/simulation/${id}/run`
-    console.log(url);
-    return this.http.get(url);
-  }
-
-  // Population
-  getPopulations(): Observable<Population[]> {
-    return of(POPULATIONS);
-  }
-
-  // Fleet
-  getFleets(): Observable<Fleet[]> {
-    return of(FLEETS);
-  }
-  getFleetById(id: number): Observable<Fleet> {
-    return of(FLEETS.find(fleet => fleet.id === id));
-  }
-
-  // Vehicle
-  getVehiclesByIds(ids: number[]): Observable<Vehicle[]> {
-    return of(VEHICLES.filter(vehicle => vehicle.id in ids));
-  }
-
-
-}
-
-export class Population {
-  id: number;
-  name: string;
-  description?: string;
-}

src/app/pages/simulation-wizard/data/fleet.ts

-import {VehicleShare} from './vehicle-share';
-
-export interface Fleet {
-  id: number;
-  name: string;
-  description: string;
-  vehicleShares: VehicleShare[];
-}

src/app/pages/simulation-wizard/data/fleets.mock.ts

-import {Fleet} from './fleet';
-
-export const FLEETS: Fleet[] = [
-  {
-    id: 1,
-    name: 'Test fleet',
-    description: 'Fleet of mock vehicles',
-    vehicleShares: [{
-      id: 1,
-      vehicle_id: 1,
-      share_percent: 0.1,
-    }, {
-      id: 2,
-      vehicle_id: 2,
-      share_percent: 0.4,
-    }, {
-      id: 3,
-      vehicle_id: 3,
-      share_percent: 0.25,
-    }, {
-      id: 4,
-      vehicle_id: 4,
-      share_percent: 0.1,
-    }, {
-      id: 5,
-      vehicle_id: 5,
-      share_percent: 0.1,
-    }, {
-      id: 6,
-      vehicle_id: 6,
-      share_percent: 0.05,
-    }],
-  }, {
-    id: 2,
-    name: 'Another Test fleet',
-    description: 'Fleet of mock vehicles',
-    vehicleShares: [{
-      id: 1,
-      vehicle_id: 1,
-      share_percent: 0.4,
-    }, {
-      id: 2,
-      vehicle_id: 2,
-      share_percent: 0.1,
-    }, {
-      id: 3,
-      vehicle_id: 3,
-      share_percent: 0.25,
-    }, {
-      id: 4,
-      vehicle_id: 4,
-      share_percent: 0.1,
-    }, {
-      id: 5,
-      vehicle_id: 5,
-      share_percent: 0.1,
-    }, {
-      id: 6,
-      vehicle_id: 6,
-      share_percent: 0.05,
-    }],
-  },
-];

src/app/pages/simulation-wizard/data/network.ts

-import {LatLngBounds} from 'leaflet';
-
-export class Network {
-  id: number;
-  name: string;
-  filePath: string;
-  levelOfDetail: number;
-  bounds: LatLngBounds;
-}

src/app/pages/simulation-wizard/data/populations.mock.ts

-import { Population } from './com.service';
-
-export const POPULATIONS: Population[] = [{
-  id: 1,
-  name: 'Population test 1',
-}, {
-  id: 2,
-  name: 'Population test 2',
-  description: 'only nice people here',
-}];
-

src/app/pages/simulation-wizard/data/scenario.ts

-export class Scenario {
-  id: number;
-  name: string;
-  description: string;
-  // simulations: Simulation;
-}
-

src/app/pages/simulation-wizard/data/simulation.ts

-export class Simulation {
-  simId: number;
-  name: string;
-  description?: string;
-  config_id?: number;
-  configFileName?: string;
-  emissionsFactors?: string;
-  outputEvents?: string;
-  outputEventsEmissions?: string;
-  linkStats?: string;
-
-}

src/app/pages/simulation-wizard/data/vehicle-share.ts

-import {Vehicle} from './vehicle';
-
-export interface VehicleShare {
-  id: number;
-  vehicle_id: number;
-  vehicle?: Vehicle;
-  share_percent: number;
-  expanded?: false;
-}

src/app/pages/simulation-wizard/data/vehicle.ts

-export interface Vehicle {
-  id: number;
-  name: string;
-  description: string;
-  vehicleType: string;
-  motorVolume: number;
-  emissionStd: string;
-}

src/app/pages/simulation-wizard/data/vehicles.mock.ts

-import { Vehicle } from './vehicle';
-
-export const VEHICLES: Vehicle[] = [
-  {
-    id: 1,
-    name: 'Small car',
-    description: 'A very small car.',
-    vehicleType: 'car',
-    motorVolume: 1.2,
-    emissionStd: 'EURO-4',
-  }, {
-    id: 2,
-    name: 'Normal car',
-    description: 'A very regular car.',
-    vehicleType: 'car',
-    motorVolume: 1.6,
-    emissionStd: 'EURO-4',
-  }, {
-    id: 3,
-    name: 'Big car',
-    description: 'A very big car.',
-    vehicleType: 'car',
-    motorVolume: 2.4,
-    emissionStd: 'EURO-4',
-  }, {
-    id: 4,
-    name: 'Old car',
-    description: 'A very old car.',
-    vehicleType: 'car',
-    motorVolume: 2.0,
-    emissionStd: 'EURO-2',
-  }, {
-    id: 5,
-    name: 'New small car',
-    description: 'A very new and small car.',
-    vehicleType: 'car',
-    motorVolume: 1.2,
-    emissionStd: 'EURO-6',
-  }, {
-    id: 6,
-    name: 'New big car',
-    description: 'A very new and big car.',
-    vehicleType: 'car',
-    motorVolume: 3.2,
-    emissionStd: 'EURO-6',
-  },
-];