diff --git a/src/app/pages/simulation-wizard-copied/edit-network-map/edit-network-map.component.html b/src/app/pages/simulation-wizard-copied/edit-network-map/edit-network-map.component.html deleted file mode 100644 index 9297f023dde723d0591926e671356eb427079d3c..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/edit-network-map/edit-network-map.component.html +++ /dev/null @@ -1,41 +0,0 @@ -<nb-card> - <nb-card-header>Draw Polylines on Map </nb-card-header> - <nb-card-body> - <div - leaflet - id="map" - #map - [leafletOptions]="options" - (leafletMapReady)="onMapReady($event)" - class="mb-4" - ></div> - <div class="row"> - <div class="col-sm-6"> - <button - class="m-1" - nbButton - fullWidth - outlined - status="primary" - (click)="onAddSelectedBikeLanes()" - [disabled]="!allLinestrings.length" - > - Add Selected Bike Lanes - </button> - </div> - <div class="col-sm-6"> - <button - class="m-1" - nbButton - fullWidth - outlined - status="danger" - (click)="onReset()" - [disabled]="!allLinestrings.length" - > - Reset - </button> - </div> - </div> - </nb-card-body> -</nb-card> diff --git a/src/app/pages/simulation-wizard-copied/edit-network-map/edit-network-map.component.scss b/src/app/pages/simulation-wizard-copied/edit-network-map/edit-network-map.component.scss deleted file mode 100644 index 4580c9148e403b842a1bc5c120fdc18aed02d46d..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/edit-network-map/edit-network-map.component.scss +++ /dev/null @@ -1,17 +0,0 @@ -@import "../../../@theme/styles/themes"; - -@include nb-install-component() { - nb-card-body { - padding: 8px; - } - - ::ng-deep .leaflet-top, - ::ng-deep .leaflet-bottom { - z-index: 997; - } - - ::ng-deep .leaflet-container { - width: 100%; - height: nb-theme(card-height-large); - } -} diff --git a/src/app/pages/simulation-wizard-copied/edit-network-map/edit-network-map.component.spec.ts b/src/app/pages/simulation-wizard-copied/edit-network-map/edit-network-map.component.spec.ts deleted file mode 100644 index 6354bde4f719c9739d67e9904b28d5ee7295bcfc..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/edit-network-map/edit-network-map.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { EditNetworkMapComponent } from './edit-network-map.component'; - -describe('EditNetworkMapComponent', () => { - let component: EditNetworkMapComponent; - let fixture: ComponentFixture<EditNetworkMapComponent>; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ EditNetworkMapComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(EditNetworkMapComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/pages/simulation-wizard-copied/edit-network-map/edit-network-map.component.ts b/src/app/pages/simulation-wizard-copied/edit-network-map/edit-network-map.component.ts deleted file mode 100644 index 042fa7ed85912120b99b915bc94691f57c1f43a3..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/edit-network-map/edit-network-map.component.ts +++ /dev/null @@ -1,111 +0,0 @@ -import { Component, OnInit } from "@angular/core"; -import * as L from "leaflet"; -import "leaflet-draw"; -import { SimulationService } from "../utils/services/simulation.service"; -import { NbToastrService } from "@nebular/theme"; - -@Component({ - selector: "ngx-edit-network-map", - templateUrl: "./edit-network-map.component.html", - styleUrls: ["./edit-network-map.component.scss"], -}) -export class EditNetworkMapComponent implements OnInit { - public map: L.Map; - public lastLinestring: Object; - public allLinestrings: Object[] = []; - public allLayers: L.Layer[] = []; - geoJsonStyleWeight: number = 4; - geoJsonStyleOpacity: number = 0.5; - options = { - layers: [ - L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { - maxZoom: 19, - attribution: "...", - }), - ], - zoom: 15, - center: L.latLng({ lat: 43.263, lng: -2.935 }), - }; - - constructor( - private simulationService: SimulationService, - private toastrService: NbToastrService - ) {} - - ngOnInit() {} - - onMapReady(map: L.Map) { - this.map = map; - const drawControl = new L.Control.Draw({ - draw: { - polygon: false, - marker: false, - circlemarker: false, - rectangle: false, - circle: false, - }, - }); - - this.map.addControl(drawControl); - this.map.on(L.Draw.Event.CREATED, (e: any) => { - const type = e.layerType; - if (type === "polyline") { - this.allLayers.push(e.layer); - (e.layer as L.Layer).addEventListener("click", (e) => { - e.target["highlighted"] - ? this.resetFeature(e.target) - : this.highlightFeature(e.target); - }); - this.map.addLayer(this.allLayers[this.allLayers.length - 1]); - this.lastLinestring = e.layer.editing.latlngs[0]; - this.allLinestrings.push(e.layer.editing.latlngs[0]); - this.toastrService.show( - `Currently ${this.allLinestrings.length} polylines.`, - "Polyline Added", - { - status: "info", - } - ); - } - }); - } - - onAddSelectedBikeLanes() { - this.allLayers.forEach((layer, index) => { - if (layer["highlighted"] == true) { - console.log("🚀☢ ~ layer high", index, layer["highlighted"]); - } - }); - this.toastrService.show("Sending to server (WIP)", "Notification", { - status: "info", - }); - } - - onReset() { - this.lastLinestring = undefined; - this.allLinestrings = []; - this.allLayers.forEach((element) => { - this.map.removeLayer(element); - }); - this.allLayers = []; - this.toastrService.show("Cleared", "Reset", { - status: "danger", - }); - } - - private highlightFeature(target) { - target["highlighted"] = true; - target.setStyle({ - weight: 10, - opacity: 1.0, - }); - } - - private resetFeature(target) { - target["highlighted"] = false; - target.setStyle({ - weight: this.geoJsonStyleWeight, - opacity: this.geoJsonStyleOpacity, - }); - } -} diff --git a/src/app/pages/simulation-wizard-copied/existing-simulations/existing-simulations.component.html b/src/app/pages/simulation-wizard-copied/existing-simulations/existing-simulations.component.html deleted file mode 100644 index f5641804e1c6a4744e320fa1ae43b1ccaeea2f94..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/existing-simulations/existing-simulations.component.html +++ /dev/null @@ -1,422 +0,0 @@ -<section class="rounded-border"> - <div class="d-flex justify-content-between mb-1"> - <h6>Select Simulation:</h6> - <button - nbButton - outline - shape="round" - status="primary" - (click)="onAddSimulation()" - id="button-add-simulation" - nbTooltip="Add New Simulation" - > - <nb-icon icon="folder-add-outline"></nb-icon> - </button> - </div> - <nb-card *ngIf="simulations.length == 0"> - <nb-card-body> - <div> - No simulations found - <nb-icon status="danger" icon="alert-triangle-outline"></nb-icon> - </div> - </nb-card-body> - </nb-card> - - <nb-card - *ngFor="let simulation of simulations; index as i" - [className]=" - selectedSimulation == simulation ? 'nb-card selected' : 'nb-card' - " - > - <nb-card-body class="single-sim"> - <span> - {{ simulation.name }} - <nb-icon - [icon]=" - simulation.status == 'running' - ? 'loader-outline' - : simulation.status == 'error' - ? 'close-outline' - : simulation.status == 'created' - ? '' - : 'checkmark-circle-2-outline' - " - [status]=" - simulation.status == 'error' - ? 'danger' - : simulation.status == 'running' - ? '' - : 'success' - " - [ngClass]="{ 'icon-spin': simulation.status == 'running' }" - class="icon" - > - </nb-icon> - </span> - <span class="subtitle-2 text-description">{{ - simulation.description - }}</span> - <button - *ngIf="selectedSimulation == simulation; else elseBlock" - nbButton - status="primary" - (click)="onSelect(simulation)" - disabled - > - 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> - </nb-card-body> - </nb-card> -</section> -<section class="buttons"> - <div class="mt-2 mb-2 rounded-border"> - <h6>Create travel demand model dataset</h6> - <div class="fragment-1 mt-2 mb-2"> - <div class="rounded-border"> - <div class="button-envelope"> - <button - nbButton - (click)="onPreprocessData()" - nbTooltip="Select at least one simulation before using this button. You will likely need to click Generate Population later. GET http://localhost:8082/traffic-simulation/scripts/city/{city}/preprocess_data" - [disabled]="!selectedSimulation || preprocessDataBtnDisabled" - > - preprocess data - </button> - <nb-icon - [icon]=" - preprocessData.status == 'running' - ? 'loader-outline' - : preprocessData.status == 'error' - ? 'close-outline' - : preprocessData.status == 'created' - ? '' - : 'checkmark-circle-2-outline' - " - [status]=" - preprocessData.status == 'error' - ? 'danger' - : preprocessData.status == 'running' - ? '' - : 'success' - " - [ngClass]="{ 'icon-spin': preprocessData.status == 'running' }" - class="icon" - > - </nb-icon> - </div> - <div class="button-envelope"> - <button - nbButton - (click)="onGeneratePopulation()" - nbTooltip="Preprocess Data must be completed before you can use this button. You will likely have to click Generate Travel Demand Model later. GET localhost:8082/traffic-simulation/scripts/city/{city}/generate_population" - [disabled]="generatePopulationBtnDisabled" - > - Generate Population - </button> - <nb-icon - [icon]=" - generatePopulation.status == 'running' - ? 'loader-outline' - : generatePopulation.status == 'error' - ? 'close-outline' - : generatePopulation.status == 'created' - ? '' - : 'checkmark-circle-2-outline' - " - [status]=" - generatePopulation.status == 'error' - ? 'danger' - : generatePopulation.status == 'running' - ? '' - : 'success' - " - [ngClass]="{ 'icon-spin': generatePopulation.status == 'running' }" - class="icon" - > - </nb-icon> - </div> - </div> - <div class="rounded-border"> - <form - [formGroup]="generateTravelDemandForm" - (ngSubmit)="onGenerateTravelDemand()" - > - <div class=""> - <input - type="text" - nbInput - placeholder="Travel Demand Model Name" - formControlName="travelDemandModelName" - [status]="checkValid(travelDemandModelName) ? 'danger' : 'basic'" - nbTooltip="Travel Demand Model Name is required" - /> - </div> - <div class="mt-2"> - <nb-select - placeholder="Select Network" - appearance="filled" - [(selected)]="selectedNetwork" - formControlName="selectedNetwork" - nbTooltip="Network Id is required" - > - <nb-option *ngFor="let n of networks" [value]="n">{{ - n.name - }}</nb-option> - </nb-select> - </div> - <div class="button-envelope"> - <button - nbButton - nbTooltip="A simulation must be selected in order to use this button. POST localhost:8082/traffic-simulation/scripts/city/{city}/travel_demand" - [disabled]=" - !selectedSimulation || - generateTravelDemandForm.status == 'INVALID' - " - > - Generate Travel Demand Model</button - ><nb-icon - [icon]=" - generateTravelDemand.status == 'running' - ? 'loader-outline' - : generateTravelDemand.status == 'error' - ? 'close-outline' - : generateTravelDemand.status == 'created' - ? '' - : 'checkmark-circle-2-outline' - " - [status]=" - generateTravelDemand.status == 'error' - ? 'danger' - : generateTravelDemand.status == 'running' - ? '' - : 'success' - " - [ngClass]="{ - 'icon-spin': generateTravelDemand.status == 'running' - }" - class="icon" - > - </nb-icon> - </div> - </form> - </div> - - <div class="instructions-btn"> - <button - nbTooltip="Select a simulation first. Be aware that each button overwrites old files." - nbTooltipPlacement="bottom" - nbButton - > - instructions - <nb-icon icon="question-mark-outline"></nb-icon> - </button> - </div> - </div> - </div> - - <div class="mb-2 datepicker rounded-border"> - <h6>Create calibration dataset <nb-icon icon="clock-outline"></nb-icon></h6> - <div class="inner"> - <div> - <nb-icon icon="log-out-outline"></nb-icon> - <input - nbInput - [nbDatepicker]="formcontrolFrom" - [formControl]="datePickerFormControlFrom" - [status]="datesValid == false ? 'danger' : 'basic'" - /> - <nb-datepicker - #formcontrolFrom - [min]="datePickerDateMin" - [max]="datePickerFromDateMax" - ></nb-datepicker> - </div> - <div> - <nb-icon icon="log-in-outline"></nb-icon> - <input - nbInput - [nbDatepicker]="formcontrolTo" - [formControl]="datePickerFormControlTo" - [status]="datesValid == false ? 'danger' : 'basic'" - /> - <nb-datepicker - #formcontrolTo - [min]="datePickerToDateMin" - [max]="datePickerDateMax" - ></nb-datepicker> - </div> - <div class="button-envelope"> - <button - nbButton - (click)="onCreateCalibrationDatasets()" - nbTooltip="Calibration for selected date. A Simulation must be selected. POST http://localhost:8083/dss/calibration_preprocess" - [disabled]=" - !selectedSimulation || - createCalibrationDatasetsBtnDisabled || - datesValid == false - " - > - Create calibration datasets - </button> - <nb-icon - [icon]=" - createCalibrationDatasets.status == 'running' - ? 'loader-outline' - : createCalibrationDatasets.status == 'error' - ? 'close-outline' - : createCalibrationDatasets.status == 'created' - ? '' - : 'checkmark-circle-2-outline' - " - [status]=" - createCalibrationDatasets.status == 'error' - ? 'danger' - : createCalibrationDatasets.status == 'running' - ? '' - : 'success' - " - [ngClass]="{ - 'icon-spin': createCalibrationDatasets.status == 'running' - }" - class="icon" - > - </nb-icon> - </div> - </div> - </div> - - <nb-select placeholder="Select Calibration" class="mb-2" appearance="filled"> - <nb-option *ngFor="let p of travelDemandModels" [value]="p">{{ - p - }}</nb-option> - </nb-select> - <div class="mb-2 button-envelope"> - <button - nbButton - (click)="onRunSimulation()" - 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 - [icon]=" - runSimulation.status == 'running' - ? 'loader-outline' - : runSimulation.status == 'error' - ? 'close-outline' - : runSimulation.status == 'created' - ? '' - : 'checkmark-circle-2-outline' - " - [status]=" - runSimulation.status == 'error' - ? 'danger' - : runSimulation.status == 'running' - ? '' - : 'success' - " - [ngClass]="{ 'icon-spin': runSimulation.status == 'running' }" - class="icon" - > - </nb-icon> - </div> - <div class="mb-2 button-envelope"> - <button - nbButton - (click)="onCalculateKPIS()" - nbTooltip="Select at least one simulation before using this button. GET localhost:8083/dss/kpis/bilbao/{id}" - [disabled]="calculateKPISBtnDisabled" - > - Calculate KPIs</button - ><nb-icon - [icon]=" - calculateKPIS.status == 'running' - ? 'loader-outline' - : calculateKPIS.status == 'error' - ? 'close-outline' - : calculateKPIS.status == 'created' - ? '' - : 'checkmark-circle-2-outline' - " - [status]=" - calculateKPIS.status == 'error' - ? 'danger' - : calculateKPIS.status == 'running' - ? '' - : 'success' - " - [ngClass]="{ 'icon-spin': calculateKPIS.status == 'running' }" - class="icon" - > - </nb-icon> - </div> - <div class="mb-2 mt-2 div-dss rounded-border"> - <h6>Compare for DSS <nb-icon icon="clock-outline"></nb-icon></h6> - <div class="inner"> - <span - *ngIf="selectedSimulation; else elseBlock" - class="selectImitation active" - > - {{ selectedSimulation.name }} - </span> - <ng-template #elseBlock> - <span class="selectImitation"> Select a Simulation </span> - </ng-template> - <nb-select - placeholder="Compare With Simulation" - appearance="filled" - [(selected)]="selectedCompareWithSimulation" - > - <nb-option *ngFor="let s of simulations" [value]="s">{{ - s.name - }}</nb-option> - </nb-select> - <div class="button-envelope"> - <button - nbButton - (click)="onRunDss()" - nbTooltip="Select two simulations for comparison to use this button. POST http://localhost:8083/dss/kpi_eval/{city}" - [disabled]=" - runDssBtnDisabled || - !selectedSimulation || - !selectedCompareWithSimulation || - selectedSimulation == selectedCompareWithSimulation - " - > - Run Dss</button - ><nb-icon - [icon]=" - runDss.status == 'running' - ? 'loader-outline' - : runDss.status == 'error' - ? 'close-outline' - : runDss.status == 'created' - ? '' - : 'checkmark-circle-2-outline' - " - [status]=" - runDss.status == 'error' - ? 'danger' - : runDss.status == 'running' - ? '' - : 'success' - " - [ngClass]="{ 'icon-spin': runDss.status == 'running' }" - class="icon" - > - </nb-icon> - </div> - </div> - </div> -</section> diff --git a/src/app/pages/simulation-wizard-copied/existing-simulations/existing-simulations.component.scss b/src/app/pages/simulation-wizard-copied/existing-simulations/existing-simulations.component.scss deleted file mode 100644 index a239ae83824c0fe0f612e40cfa1fb7bce7dd9d2d..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/existing-simulations/existing-simulations.component.scss +++ /dev/null @@ -1,201 +0,0 @@ -@import "../../../@theme/styles/themes.scss"; -@include nb-install-component() { - .rounded-border { - padding: 4px; - border: 1px solid #ddd; - box-shadow: 0 0 1px #e1e1e1; - border-radius: 6px; - } - #button-add-simulation { - min-width: unset; - } - section.buttons { - margin-top: 1rem; - .fragment-1 { - display: flex; - justify-content: space-between; - & > div { - margin: 8px; - } - } - - .button-envelope { - margin-top: 8px; - margin-bottom: 8px; - } - - .datepicker .inner, - .div-dss .inner { - display: flex; - align-items: flex-end; - & > *:not(:last-child) { - margin-right: 20px; - nb-icon { - margin-right: 5px; - } - } - .button-envelope { - margin-top: 0; - margin-bottom: 0; - } - } - - .button-envelope { - margin-top: 8px; - margin-bottom: 8px; - } - - @media screen and (max-width: 900px) { - .fragment-1 { - display: block; - & .instructions-btn { - display: block; - button { - width: 100%; - } - } - } - .button-envelope { - display: flex; - flex-direction: row; - button { - width: 100%; - } - .icon { - margin-top: 0.5em; - } - } - .datepicker .inner, - .div-dss .inner { - flex-direction: column; - justify-content: flex-start; - align-items: stretch; - & > *:not(:last-child) { - margin-bottom: 8px; - } - } - } - } - ::ng-deep .nb-card { - margin-bottom: 0.5rem; - .single-sim { - display: flex; - align-items: center; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - span { - margin-right: 15px; - min-width: 280px; - } - span.text-hint { - min-width: 210px; - } - span.text-description { - min-width: 220px; - } - button { - margin-right: 15px; - min-width: 112px; - } - } - span.text-hint, - span.text-description { - font-weight: normal; - } - &.selected { - font-weight: bold; - box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.4), - 0 1px 1px 0 rgba(0, 0, 0, 0.28), 0 1px 3px 0 rgba(0, 0, 0, 0.24); - border-color: #000; - background: #a6f0a64f; - span.text-hint, - span.text-description { - font-weight: bold; - } - } - .toggle-envelope { - display: inline-block; - width: 53px; - height: 30px; - position: relative; - .toggle { - display: block; - position: absolute; - top: -20px; - } - } - } - button, - nb-select { - min-width: 240px; - } -} - -.icon { - margin-left: 0.25em; - margin-right: 0.3em; - position: relative; - top: 0.2rem; -} - -.icon-spin { - animation-name: spin; - animation-duration: 2000ms; - animation-iteration-count: infinite; - animation-timing-function: linear; -} -@keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -.selectImitation { - appearance: button; - background-color: #edf1f7; - border-bottom-color: rgb(247, 249, 252); - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; - border-bottom-style: solid; - border-bottom-width: 1px; - border-left-color: rgb(247, 249, 252); - border-left-style: solid; - border-left-width: 1px; - border-right-color: rgb(247, 249, 252); - border-right-style: solid; - border-right-width: 1px; - border-top-color: rgb(247, 249, 252); - border-top-left-radius: 0px; - border-top-right-radius: 0px; - border-top-style: solid; - border-top-width: 1px; - box-sizing: border-box; - color: #929bb3; - cursor: normal; - font-family: Roboto; - font-size: 15px; - font-weight: 400; - line-height: 24px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; - min-width: 96px; - overflow-x: hidden; - overflow-y: hidden; - padding-bottom: 7px; - padding-left: 18px; - padding-right: 35.2px; - padding-top: 7px; - position: relative; - text-align: left; - text-overflow: ellipsis; - white-space: nowrap; - width: 240px; - &.active { - color: rgb(34, 43, 69); - } -} diff --git a/src/app/pages/simulation-wizard-copied/existing-simulations/existing-simulations.component.spec.ts b/src/app/pages/simulation-wizard-copied/existing-simulations/existing-simulations.component.spec.ts deleted file mode 100644 index 8556dd735a8b8ecc4c6ea9e11a07ea4eb79a6ccf..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/existing-simulations/existing-simulations.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ExistingSimulationsComponent } from './existing-simulations.component'; - -describe('ExistingSimulationsComponent', () => { - let component: ExistingSimulationsComponent; - let fixture: ComponentFixture<ExistingSimulationsComponent>; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ ExistingSimulationsComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(ExistingSimulationsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/pages/simulation-wizard-copied/existing-simulations/existing-simulations.component.ts b/src/app/pages/simulation-wizard-copied/existing-simulations/existing-simulations.component.ts deleted file mode 100644 index c3bff0a3f74174dfebab5c86c1a9c120959ec11d..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/existing-simulations/existing-simulations.component.ts +++ /dev/null @@ -1,512 +0,0 @@ -import { Component, EventEmitter, OnInit, Output } from "@angular/core"; -import { Simulation } from "../utils/data/simulation"; -import { SimulationService } from "../utils/services/simulation.service"; -import { - animate, - state, - style, - transition, - trigger, - AnimationEvent, -} from "@angular/animations"; -import { socketStatusAnimation } from "../utils/animations/socket-status.animation"; -import { RxStompService } from "@stomp/ng2-stompjs"; -import { - NbToastrService, - NbDateService, - NbDialogService, -} from "@nebular/theme"; -import { FormControl } from "@angular/forms"; -import { AbstractControl, FormBuilder, Validators } from "@angular/forms"; -import { Network } from "../utils/data/network"; -import { NetworkService } from "../utils/services/network.service"; -import { SimulationCreationComponent } from "../simulation-creation/simulation-creation.component"; -import { CityService } from "../utils/services/city.service"; -import { City } from "../utils/data/city"; - -@Component({ - selector: "ngx-existing-simulations", - templateUrl: "./existing-simulations.component.html", - styleUrls: ["./existing-simulations.component.scss"], - animations: [ - trigger("expansionIndicator", [ - state( - "expanded", - style({ - transform: "rotate(180deg)", - }) - ), - transition("collapsed => expanded", animate("100ms ease-in")), - transition("expanded => collapsed", animate("100ms ease-out")), - ]), - trigger("accordionItemBody", [ - state( - "collapsed", - style({ - overflow: "hidden", - visibility: "hidden", - height: 0, - }) - ), - state( - "expanded", - style({ - overflow: "hidden", - visibility: "visible", - }) - ), - transition("collapsed => expanded", animate("100ms ease-in")), - transition("expanded => collapsed", animate("100ms ease-out")), - ]), - socketStatusAnimation, - ], -}) -export class ExistingSimulationsComponent implements OnInit { - selectedCity: City = undefined; - simulations: Simulation[] = []; - selectedSimulation: Simulation; - @Output() selectedSimulationToEmit = new EventEmitter<string>(); - networks: Network[] = []; - travelDemandModels: Object[] = [ - "Travel Demand Model 1 (hardcoded)", - "Travel Demand Model 2 (hardcoded)", - ]; - selectedNetwork: Network = undefined; - preprocessData: any = { - status: "", - }; - generatePopulation: any = { - status: "", - }; - generateTravelDemand: any = { - status: "", - }; - runSimulation: any = { - status: "", - }; - calculateKPIS: any = { - status: "", - }; - selectedCompareWithSimulation: Simulation; - runDss: any = { - status: "", - }; - createCalibrationDatasets: any = { - status: "", - }; - preprocessDataBtnDisabled: boolean; - generatePopulationBtnDisabled: boolean; - datePickerFormControlFrom = new FormControl(new Date(2020, 0, 1)); - datePickerFormControlTo = new FormControl(new Date(2020, 0, 2)); - datePickerDateMin: Date; - datePickerDateMax: Date; - datePickerFromDateMax: Date; - datePickerToDateMin: Date; - datesValid: boolean = true; - createCalibrationDatasetsBtnDisabled: boolean; - runSimulationBtnDisabled: boolean; - calculateKPISBtnDisabled: boolean; - runDssBtnDisabled: boolean; - selectedScenario: number; - generateTravelDemandForm = this.formBuilder.group({ - travelDemandModelName: ["", Validators.required], - selectedNetwork: ["", Validators.required], - }); - dialogRef: any; - - constructor( - private simulationService: SimulationService, - private rxStompService: RxStompService, - private toastrService: NbToastrService, - private formBuilder: FormBuilder, - private networkService: NetworkService, - protected dateService: NbDateService<Date>, - private dialogService: NbDialogService, - private cityService: CityService - ) { - this.datePickerDateMin = new Date(2020, 0, 1); - this.datePickerDateMax = this.dateService.addMonth( - this.dateService.today(), - 1 - ); - } - - ngOnInit(): void { - this.resetButtonsAndStatuses(); - - this.cityService.getSelectedCityNotBehavior().subscribe((city) => { - this.selectedCity = city; - }); - - this.simulationService - .getSimulationsAll() - .subscribe((returnedSimulations) => { - for (let l = 0; l < Object.entries(returnedSimulations).length; l++) { - let c = Simulation.deserialize( - Object.entries(returnedSimulations)[l][1] - ); - this.simulations.push(c); - } - }); - - console.log( - "rxStompService is probably working but server never sends updated because simulation is not triggered" - ); - - this.rxStompService - .watch("/topic/simulationRunStatus") - .subscribe((updatedSimulationFrame) => { - console.log( - "%cthis content is just copypasted from a similar file", - "background: sienna; font-weight: bold; color: black; font-family: serif" - ); - - let updatedSimulation = JSON.parse(updatedSimulationFrame.body); - let index = this.simulations.findIndex( - (simulation) => simulation.id == updatedSimulation.id - ); - if (index == -1) { - this.simulations.push(Simulation.deserialize(updatedSimulation)); - } else { - this.simulations[index] = Simulation.deserialize(updatedSimulation); - this.simulations[index].statusWSMessage = - updatedSimulationFrame.headers.statusWSMessage; - this.simulations[index].animationState = - this.simulations[index].animationState == "hidden" - ? "show" - : "replaceHide"; - } - }); - - this.networkService.getNetworks().subscribe((res) => { - this.networks = res; - }); - - this.datePickerFormControlFrom.valueChanges.subscribe((x) => { - this.datePickerToDateMin = this.dateService.addDay(x, 1); - this.evaluateDatesValid(); - }); - - this.datePickerFormControlTo.valueChanges.subscribe((x) => { - this.datePickerFromDateMax = this.dateService.addDay(x, -1); - this.evaluateDatesValid(); - }); - } - - evaluateDatesValid() { - if ( - this.datePickerFormControlFrom.value < this.datePickerFormControlTo.value - ) { - this.datesValid = true; - } else { - this.datesValid = false; - } - } - - onSelect(simulation) { - this.selectedSimulation = simulation; - this.selectedSimulationToEmit.emit(simulation.id.toString()); - } - - onPreprocessData() { - this.preprocessDataBtnDisabled = true; - this.preprocessData.status = "running"; - this.generatePopulation.status = "created"; - this.generateTravelDemand.status = "created"; - this.simulationService.getPreprocessData("bilbao").subscribe( - (res) => { - this.generatePopulationBtnDisabled = false; - this.preprocessData.status = "success"; - }, - (error) => { - console.log("🚀☢ ~ error", error); - this.showToast( - `${error["message"]}`, - `${error["error"]["error"]}`, - "danger" - ); - this.preprocessData.status = "error"; - } - ); - } - - onGeneratePopulation() { - this.generatePopulationBtnDisabled = true; - this.generatePopulation.status = "running"; - this.showToast("This should take about 20 seconds", "Info", "info"); - this.simulationService.getGeneratePopulation("bilbao").subscribe( - (res) => { - this.generatePopulation.status = ""; - }, - (error) => { - console.log("🚀☢ ~ error", error); - this.showToast( - `${error["message"]}`, - `${error["error"]["error"]}`, - "danger" - ); - this.generatePopulation.status = "error"; - } - ); - } - - onGenerateTravelDemand() { - this.generateTravelDemand.status = "running"; - this.showToast("This should take about 10 seconds", "Info", "info"); - - console.log("🚀 hardcoded to bilbao"); - // # TODO remove hardcoded to bilbao - this.simulationService - .postTravelDemand( - "bilbao", - this.generateTravelDemandForm.value.travelDemandModelName, - this.generateTravelDemandForm.value.selectedNetwork.id, - this.selectedSimulation.id - ) - .subscribe( - (res) => { - this.generateTravelDemand.status = ""; - }, - (error) => { - console.log("🚀☢ ~ error", error); - this.showToast( - `${error["message"]}`, - `${error["error"]["error"]}`, - "danger" - ); - this.generateTravelDemand.status = "error"; - } - ) - .add(() => { - this.preprocessDataBtnDisabled = false; - }); - } - - onCreateCalibrationDatasets() { - this.createCalibrationDatasetsBtnDisabled = true; - this.createCalibrationDatasets.status = "running"; - this.showToast( - "this should take about 45 seconds for one day duration and about 8 additional seconds for every additional day", - "Info", - "info" - ); - let startTime, endTime; - startTime = new Date(); - - this.simulationService - .getNetworkFromSimulation(this.selectedSimulation.id) - .subscribe((res) => { - this.simulationService - .postCalibrationPreprocess( - this.datePickerFormControlFrom.value, - this.datePickerFormControlTo.value, - res.id - ) - .subscribe( - (res) => { - endTime = new Date(); - let timeDiff = endTime - startTime; - timeDiff /= 1000; - this.showToast( - `add/finally statement - postCalibrationPreprocess is over. - It took ${timeDiff} seconds to complete.`, - "Success", - "success" - ); - this.createCalibrationDatasets.status = ""; - }, - (error) => { - console.log("🚀☢ ~ error", error); - this.showToast( - `${error["message"]}`, - `${error["error"]["error"]}`, - "danger" - ); - this.createCalibrationDatasets.status = "error"; - } - ) - .add(() => { - this.createCalibrationDatasetsBtnDisabled = false; - }); - }); - } - - onRunSimulation() { - this.runSimulationBtnDisabled = true; - this.runSimulation.status = "running"; - this.showToast("This may take a while ...", "Info", "info"); - this.simulationService - .runSimulation(this.selectedSimulation) - .subscribe( - (res) => { - console.log("currently doing nothing with result"); - }, - (error) => { - this.showToast( - `${error["message"]}`, - `${error["error"]["error"]}`, - "danger" - ); - this.runSimulation.status = "error"; - } - ) - .add(() => { - this.runSimulationBtnDisabled = false; - }); - } - - onCalculateKPIS() { - this.calculateKPISBtnDisabled = true; - this.calculateKPIS.status = "running"; - this.showToast( - "this should take about 40 seconds to complete.", - "Info", - "info" - ); - let startTime, endTime; - startTime = new Date(); - - console.log("hardcoded on 1"); - // #TODO remove bilbao and the number 1 - this.simulationService - .getCalculateKPIs("bilbao", 1) - .subscribe( - (res) => { - console.log("🚀☢ ~ res", res); - this.calculateKPIS.status = ""; - endTime = new Date(); - let timeDiff = endTime - startTime; - timeDiff /= 1000; - this.showToast( - `onCalculateKPIS is over. - It took ${timeDiff} seconds to complete.`, - "Success", - "success" - ); - }, - (error) => { - console.log("🚀☢ ~ error", error); - this.calculateKPIS.status = "error"; - this.showToast(`${error["message"]}`, `${error["name"]}`, "danger"); - } - ) - .add(() => { - this.calculateKPISBtnDisabled = false; - }); - } - - onRunDss() { - this.runDssBtnDisabled = true; - this.runDss.status = "running"; - this.simulationService - .postRunDss( - [this.selectedSimulation.id, this.selectedCompareWithSimulation.id], - this.selectedCity.cityId - ) - .subscribe( - (res) => { - this.showToast(`onRunDss is over.`, "Success", "success"); - }, - (error) => { - this.runDss.status = "error"; - this.showToast( - `${error["message"]}`, - `${error["statusText"]}`, - "danger" - ); - } - ) - .add(() => { - this.runDssBtnDisabled = false; - }); - } - - onReset() { - this.selectedSimulation = undefined; - this.generateTravelDemandForm.reset(); - - if (!this.generatePopulationBtnDisabled) { - this.showToast( - "Looks like we're in the middle of creating data for Preprocess Data, Generate Population and Generate Travel Demand. Data might be polluted and might need to be recreated.", - "Warning", - "warning" - ); - setTimeout(() => { - this.preprocessData.status = "error"; - this.generatePopulation.status = "error"; - this.generateTravelDemand.status = "error"; - }, 250); - } - - this.resetButtonsAndStatuses(); - } - - resetButtonsAndStatuses() { - this.preprocessData.status = ""; - this.generatePopulation.status = ""; - this.generateTravelDemand.status = ""; - this.createCalibrationDatasets.status = ""; - this.runSimulation.status = ""; - this.calculateKPIS.status = ""; - this.runDss.status = ""; - this.preprocessDataBtnDisabled = false; - this.generatePopulationBtnDisabled = true; - this.calculateKPISBtnDisabled = false; - this.runDssBtnDisabled = false; - } - - showToast(msg: string, title: string, status: string) { - this.toastrService.show(msg, title, { status: status }); - } - - onAnimationEventDone(event: AnimationEvent, index: number) { - if ( - event.toState == "show" && - this.simulations[index].animationState == "show" - ) - this.simulations[index].animationState = "shown"; - else if ( - event.toState == "shown" && - this.simulations[index].animationState == "shown" - ) - this.simulations[index].animationState = "hide"; - else if ( - event.toState == "hide" && - this.simulations[index].animationState == "hide" - ) - this.simulations[index].animationState = "hidden"; - else if ( - event.toState == "replaceHide" && - this.simulations[index].animationState == "replaceHide" - ) - this.simulations[index].animationState = "replaceShow"; - else if ( - event.toState == "replaceShow" && - this.simulations[index].animationState == "replaceShow" - ) - this.simulations[index].animationState = "shown"; - } - - onAnimationEventStart(event: AnimationEvent, index: number) { - if (event.toState == "show" || event.toState == "replaceShow") { - (event.element as HTMLElement).innerHTML = - this.simulations[index].statusWSMessage; - } - } - - get travelDemandModelName() { - return this.generateTravelDemandForm.get("travelDemandModelName"); - } - - get networkId() { - return this.generateTravelDemandForm.get("networkId"); - } - - checkValid(control: AbstractControl) { - return control.invalid && (control.dirty || control.touched); - } - - onAddSimulation(): void { - this.dialogRef = this.dialogService.open(SimulationCreationComponent, {}); - } -} diff --git a/src/app/pages/simulation-wizard-copied/ml-module/ml-module.component.html b/src/app/pages/simulation-wizard-copied/ml-module/ml-module.component.html deleted file mode 100644 index fa47d3b3b3ce065f4d54fba337b01e9f2ba0fcd4..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/ml-module/ml-module.component.html +++ /dev/null @@ -1,90 +0,0 @@ -<nb-card> - <nb-card-header> - <h5>ML Module</h5> - </nb-card-header> - <nb-card-body> - <div class="mb-2"> - <a href="{{ file_url }}"> - <button nbButton status="">Download PPT</button> - </a> - </div> - <div class="experiments"> - <nb-accordion *ngFor="let experiment of experiments; index as i"> - <nb-accordion-item - [className]=" - selectedExperiment == experiment - ? 'my-accordion selected' - : 'my-accordion' - " - > - <nb-accordion-item-header> - <button - *ngIf="selectedExperiment == experiment; else elseBlock" - nbButton - status="primary" - disabled - > - {{ experiment.name }} - </button> - <ng-template #elseBlock> - <button - nbButton - status="primary" - (click)="onExperiment(experiment)" - > - {{ experiment.name }} - </button> - </ng-template> - </nb-accordion-item-header> - <nb-accordion-item-body> - <strong>Goal:</strong> {{ experiment.goal }} <br /><strong - >Data:</strong - > - {{ experiment.data }} <br /><strong>Orange Interactions:</strong> - {{ experiment.orangeInteractions }} - </nb-accordion-item-body> - </nb-accordion-item> - </nb-accordion> - </div> - <div class="mb-2"> - <a href="assets/temp/experiment2.ows"> - <button - nbButton - status="primary" - nbTooltip="Select an Experiment first." - (click)="onVisualization()" - [disabled]="visualizationBtnDisabled" - > - visualization (Orange) (WIP) - </button> - </a> - </div> - <div class="mb-2"> - <a href="assets/temp/data.csv"> - <button nbButton>Sample CSV</button> - </a> - </div> - <div class="mb-2"> - <button - nbButton - status="primary" - nbTooltip="Select an Experiment first." - (click)="onMl()" - [disabled]="mlBtnDisabled" - > - ML (Orange) (WIP) - </button> - </div> - <div class="mb-2"> - <button - nbButton - status="primary" - nbTooltip="Select an Experiment first." - (click)="onRecommendation()" - [disabled]="recommendationBtnDisabled" - > - Recommendation (WIP) - </button> - </div> - </nb-card-body> -</nb-card> diff --git a/src/app/pages/simulation-wizard-copied/ml-module/ml-module.component.scss b/src/app/pages/simulation-wizard-copied/ml-module/ml-module.component.scss deleted file mode 100644 index 119bac56c891fe19015a45efc4905c964bbc0465..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/ml-module/ml-module.component.scss +++ /dev/null @@ -1,30 +0,0 @@ -@import "../../../@theme/styles/themes.scss"; -@include nb-install-component() { - ::ng-deep { - margin-bottom: 0.5rem; - button, - nb-select { - min-width: 240px; - } - .experiments { - margin-top: 30px; - margin-bottom: 30px; - } - .my-accordion { - margin-top: 5px; - margin-bottom: 5px; - button { - min-width: 150px; - } - p.text-description { - color: gray; - } - &.selected { - box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.4), - 0 1px 1px 0 rgba(0, 0, 0, 0.28), 0 1px 3px 0 rgba(0, 0, 0, 0.24); - border-color: #000; - background: #a6f0a64f; - } - } - } -} diff --git a/src/app/pages/simulation-wizard-copied/ml-module/ml-module.component.spec.ts b/src/app/pages/simulation-wizard-copied/ml-module/ml-module.component.spec.ts deleted file mode 100644 index a332c54e7697e2829eb4ff57e20b7152d829e248..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/ml-module/ml-module.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { MlModuleComponent } from './ml-module.component'; - -describe('MlModuleComponent', () => { - let component: MlModuleComponent; - let fixture: ComponentFixture<MlModuleComponent>; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ MlModuleComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(MlModuleComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/pages/simulation-wizard-copied/ml-module/ml-module.component.ts b/src/app/pages/simulation-wizard-copied/ml-module/ml-module.component.ts deleted file mode 100644 index 4458bdc1eee70ac391978fabd6ff721058f0b673..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/ml-module/ml-module.component.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { Component } from "@angular/core"; -import { environment } from "../../../../environments/environment"; - -@Component({ - selector: "ngx-ml-module", - templateUrl: "./ml-module.component.html", - styleUrls: ["./ml-module.component.scss"], -}) -export class MlModuleComponent { - constructor() {} - - storage_url = `${environment.storageAPIUrl}`; - file_url = this.storage_url + "/ml-experiments"; - visualizationBtnDisabled: boolean = true; - mlBtnDisabled: boolean = true; - recommendationBtnDisabled: boolean = true; - selectedExperiment: any = undefined; - experiments = [ - { - name: "Experiment 1", - goal: "The goal of this experiment is to analyze the impact on CO2 emissions when closing the Moyua square in conjunction with increased number of cyclists /decreased number of cars. By doing so, different scenarios can be compared and the best one can be implemented.", - data: "Each row in the data represents one simulation run. Each of the 14 simulation runs is a variation of the number of cyclists when the Moyua square is closed. The number of cyclists varies from 1500 to 19000 while changing the number of inhabitants from 2.000 to 20.000, respectively. The input features are related to: surface of closed area, capacity of closed road, number of lanes of closed road, number of incoming roads, type of district, number of bus stops nearby closed area, number of cars, pt, bicycles, avg travel time, number of cars/pt/bicycles nearby closed road, CO2 nearby closed area while the target variable represents the amount of CO2 in the closed area.", - orangeInteractions: - "• Load data • Visualize data • Apply ML algorithms • Analyze ML results", - }, - { - name: "Experiment 2", - goal: "The goal of this experiment is to help decision-makers in proposing a mobility policy based on previously defined city-objectives. The decision-makers input the required city changes, while the system outputs a mobility policy that satisfies that specification. The mobility policies are related to closing of the Moyua square in the city center in specific time and for different duration, while the city changes are related to air pollution and usage of different means of transport.", - data: "40 variations of closing the Moyua square in different time (from 8am to 17 pm) and duration (1,2,3, or 4 hours) of the day were simulated. The input features are represented by some KPIs and other simulation results such as: air pollutants (CO2, NOx, PM), usage of different modes of transport (car, bicycle, pt, walk), bike safety and bikeability. The target variables that represents the mobility policy are related to the starting time and duration of closure. These variables are discretized into 30 mins and 15 mins respectively.", - orangeInteractions: "• Load data • Visualize data", - }, - { - name: "Experiment 3", - goal: "The goal of this experiment is to improve experiment 2 by adding additional target variables related to closing of different areas around the Moyua square. This allows the decision-makers to consider more factors in order to satisfy the city goals.", - data: "192 simulations were executed that differ in start, duration and area of closure. Overall 33 combinations of 10 different areas were simulated, where the start hour of closure is from 7am to 5pm with duration of 1, 2, 3 or 4 hours. The input features are related to the simulation results and predefined KPIs as well. The same set of KPIs are calculated for 3 different geographical levels: local (in Moyua square), local-extended (Moyua + surrounding areas), city-wide. The target variables include start and duration of closure, area that is closed and length of streets included in the closed area.", - orangeInteractions: "• Load data • Visualize data", - }, - ]; - - onExperiment(experiment) { - this.selectedExperiment = experiment; - this.visualizationBtnDisabled = false; - this.mlBtnDisabled = false; - this.recommendationBtnDisabled = false; - } - - onVisualization() {} - - onMl() {} - - onRecommendation() {} -} diff --git a/src/app/pages/simulation-wizard-copied/network-creation/network-creation.component.html b/src/app/pages/simulation-wizard-copied/network-creation/network-creation.component.html deleted file mode 100644 index 1c85db1cd41efcb110c822aae63d44f63cbbee94..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/network-creation/network-creation.component.html +++ /dev/null @@ -1,77 +0,0 @@ -<nb-accordion> - <nb-accordion-item *ngFor="let network of networks; index as i; first as isFirst" - (collapsedChange)="viewAccordionOpen($event, viewMapContainer, i)"> - {{ isFirst ? initMap(viewMapContainer) : ''}} - <nb-accordion-item-header> - {{network.name}} - <nb-icon - [icon]="network.conversionError ? 'close-outline' : (network.doneMATSimProcessing ? 'checkmark-circle-2-outline' : 'loader-outline')" - [status]="network.conversionError ? 'danger' : (network.doneMATSimProcessing ? 'success' : '')" - [ngClass]="{'icon-spin': !network.doneMATSimProcessing && !network.conversionError}" class="icon"></nb-icon> - <span class="subtitle-2 text-hint" [@socketStatusAnimation]="network.animationState" - (@socketStatusAnimation.done)="onAnimationEventDone($event, i)" - (@socketStatusAnimation.start)="onAnimationEventStart($event, i)"></span> - </nb-accordion-item-header> - <nb-accordion-item-body> - <div class="networkItem"> - <ng-container viewContainer #viewMapContainer="viewContainer"></ng-container> - <div class="networkItemRightPane"> - <h1>{{network.name}}</h1> - <h2>{{network.description ? network.description : 'No description'}}</h2> - <div class="networkBounds"> - <p>W:</p> - <p>{{network.westBoundary | number : '1.2-2'}}</p> - <p>S:</p> - <p>{{network.southBoundary | number : '1.2-2'}}</p> - <p>E:</p> - <p>{{network.eastBoundary | number : '1.2-2'}}</p> - <p>N:</p> - <p>{{network.northBoundary | number : '1.2-2'}}</p> - </div> - <button nbButton fullWidth status="primary" class="mt-8" (click)="runClick()">RUN</button> - </div> - </div> - </nb-accordion-item-body> - </nb-accordion-item> - - <nb-accordion-item #createNetworkAccordionItem> - <nb-accordion-item-header> - Add network - </nb-accordion-item-header> - <nb-accordion-item-body> - <form [formGroup]="networkForm" (ngSubmit)="onSubmit()" class="networkItem"> - <div leaflet [leafletOptions]="mapOptionsForm" (leafletMapReady)="onMapReadyForm($event)"></div> - <div class="networkItemRightPane"> - <input type="text" nbInput formControlName="name" placeholder="Network name" name="netowrkName" - [status]="checkValid(name) ? 'danger' : 'basic'" nbTooltip="Name is required" - [nbTooltipTrigger]="$any(checkValid(name) ? 'hint' : 'noop')"> - <input type="text" nbInput formControlName="description" placeholder="Network description" - name="networkDescription"> - <nb-select placeholder="GTFS data placeholder"></nb-select> - <div *ngIf="!bounds.value; else elseBounds" class="createNetworkFormBoundsTip">Use ctrl and drag to - choose area - </div> - <ng-template #elseBounds> - <div class="networkBounds"> - <p>W:</p> - <p>{{bounds.value[0] | number : '1.2-2'}}</p> - <p>S:</p> - <p>{{bounds.value[1] | number : '1.2-2'}}</p> - <p>E:</p> - <p>{{bounds.value[2] | number : '1.2-2'}}</p> - <p>N:</p> - <p>{{bounds.value[3] | number : '1.2-2'}}</p> - </div> - </ng-template> - <!--<span style="overflow-wrap: anywhere;">{{networkForm.value | json}}</span>--> - <button type="submit" [disabled]="!networkForm.valid" nbButton status="success" - style="margin-top: auto;">Submit</button> - </div> - </form> - </nb-accordion-item-body> - </nb-accordion-item> -</nb-accordion> - -<ng-template #viewMapTemplate> - <div leaflet [leafletOptions]="mapOptionsView" (leafletMapReady)="onMapReadyView($event)"></div> -</ng-template> \ No newline at end of file diff --git a/src/app/pages/simulation-wizard-copied/network-creation/network-creation.component.scss b/src/app/pages/simulation-wizard-copied/network-creation/network-creation.component.scss deleted file mode 100644 index 9415da90405577d8b4aadc55957f0362cc643621..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/network-creation/network-creation.component.scss +++ /dev/null @@ -1,74 +0,0 @@ -.networkItem { - display: flex; - height: 35em; - - [leaflet] { - flex-basis: 80%; - } - - .networkItemRightPane { - flex-basis: 20%; - display: flex; - flex-direction: column; - padding: 1em; - gap: 1em; - } - - .networkItemRightPane > h1 { - margin: 0; - font-size: 2em; - line-height: 1em; - } - - .networkItemRightPane > h2 { - margin: 0; - font-size: 1.5em; - font-weight: 400; - line-height: 1em; - } - - .createNetworkFormBoundsTip { - font-size: 1.5em; - text-align: center; - } - - .networkBounds { - display: grid; - row-gap: 0.2em; - column-gap: 0.5em; - grid-template-columns: 4ch auto 4ch auto; - } - - .networkBounds > p { - margin: 0; - font-size: 1.5em; - } - - .networkBounds > p:nth-child(even) { - align-self: end; - } -} - -.icon-spin { - animation-name: spin; - animation-duration: 2000ms; - animation-iteration-count: infinite; - animation-timing-function: linear; -} - -.icon { - margin-left: 0.5em; - margin-right: 0.3em; - $size: 1.2em; - height: $size; - width: $size; -} - -@keyframes spin { - from { - transform:rotate(0deg); - } - to { - transform:rotate(360deg); - } -} diff --git a/src/app/pages/simulation-wizard-copied/network-creation/network-creation.component.ts b/src/app/pages/simulation-wizard-copied/network-creation/network-creation.component.ts deleted file mode 100644 index 957ae5238cbba074994829cf17fa181ff9516ccb..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/network-creation/network-creation.component.ts +++ /dev/null @@ -1,183 +0,0 @@ -import {AnimationEvent} from '@angular/animations'; -import {Component, OnInit, TemplateRef, ViewChild, ViewRef} from '@angular/core'; -import {AbstractControl, FormBuilder, Validators} from '@angular/forms'; -import {NbAccordionItemComponent} from '@nebular/theme'; -import {RxStompService} from '@stomp/ng2-stompjs'; -import * as L from 'leaflet'; -import {BoundsTuple, LeafletAreaSelectedEvent} from '../typings'; -import {socketStatusAnimation} from '../utils/animations/socket-status.animation'; -import {City} from '../utils/data/city'; -import {Network} from '../utils/data/network'; -import {ViewContainerDirective} from '../utils/directives/view-container.directive'; -import {CityService} from '../utils/services/city.service'; -import {NetworkService} from '../utils/services/network.service'; - -@Component({ - selector: 'ngx-network-creation', - templateUrl: './network-creation.component.html', - styleUrls: ['./network-creation.component.scss'], - animations: [socketStatusAnimation], -}) -export class NetworkCreationComponent implements OnInit { - networks: Network[]; - formMap: L.Map; - viewMap: L.Map; - formMapRectangle: L.Rectangle; - viewMapRectangle: L.Rectangle; - city: City; - - @ViewChild("createNetworkAccordionItem", {static: true}) createNetworkAccordionItem: NbAccordionItemComponent; - @ViewChild("viewMapTemplate", {static: true}) viewMapTemplate: TemplateRef<any>; - viewMapView: ViewRef; - - networkForm = this.fb.group({ - name: ['', Validators.required], - description: [''], - bounds: [null, Validators.required] - }) - - mapOptionsForm = { - layers: [ - L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18, attribution: '...'}), - ], - zoom: 14, - center: new L.LatLng(0, 0), - }; - - mapOptionsView = { - layers: [ - L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18, attribution: '...'}), - ], - zoom: 14, - center: new L.LatLng(52.5086, 13.3704), - }; - - constructor(private networkService: NetworkService, - private cityService: CityService, - private fb: FormBuilder, - private rxStompService: RxStompService) { - } - - ngOnInit(): void { - this.viewMapView = this.viewMapTemplate.createEmbeddedView(null); - - this.cityService.getSelectedCity().subscribe(city => { - this.city = city; - this.formMap?.setView(new L.LatLng(this.city.coordinates.lat, this.city.coordinates.lon), 15); - this.cityService.getCityNetworks(city.cityId).subscribe(networks => this.networks = networks); - console.log(this.networks) - }) - - this.rxStompService.watch("/topic/networkProcessingStatus").subscribe(updatedNetworkFrame => { - let updatedNetwork = JSON.parse(updatedNetworkFrame.body); - let index = this.networks.findIndex(network => network.id == updatedNetwork.id); - if (index == -1) { - this.networks.push(Network.deserialize(updatedNetwork)); - } else { - this.networks[index] = Network.deserialize(updatedNetwork); - this.networks[index].conversionWSMessage = updatedNetworkFrame.headers.conversionWSMessage; - this.networks[index].animationState = this.networks[index].animationState == "hidden" ? "show" : "replaceHide"; - } - }); - } - - onMapReadyForm(map: L.Map) { - this.formMap = map; - this.formMap?.setView(new L.LatLng(this.city.coordinates.lat, this.city.coordinates.lon), 14); - (map as any).selectArea.enable() - map.on("areaselected", (bounds: LeafletAreaSelectedEvent) => { - console.log() - this.bounds.setValue(bounds.bounds.toBBoxString().split(",").map(value => +value) as BoundsTuple) - this.formMapRectangle?.remove() - this.formMapRectangle = L.rectangle(bounds.bounds, { - fill: true, - fillColor: "#ffffff", - fillOpacity: 0.5, - color: "#38f", - weight: 2 - }).addTo(this.formMap); - }) - } - - onMapReadyView(map: L.Map) { - console.log("View map ready"); - this.viewMap = map; - } - - /*changeMapCentre(value: string) { - this.formMap?.setView(this.mapCords[value], 14); - this.bounds.reset(); - this.formMapRectangle?.remove(); - }*/ - - onSubmit() { - let network = Network.deserialize(this.networkForm.value); - network.cityId = this.city.cityId; - this.networkForm.reset(); - this.formMapRectangle?.remove(); - this.createNetworkAccordionItem.close(); - this.networkService.createNetwork(network).subscribe(value => { - this.networks.push(value) - }, err => console.log(err)); // TODO add proper error handling - } - - runClick() { - // this.simulationService.runSimulation(simulation).subscribe(simulation => { - // let index = this.simulations.findIndex(simulationOld => simulationOld.id == simulation.id); - // this.simulations[index] = simulation; - // }) - } - - viewAccordionOpen(open: boolean, viewMapContainer: ViewContainerDirective, i: number) { - if (!open) { - viewMapContainer.container.insert(this.viewMapView); - this.viewMap.setView(new L.LatLng(this.city.coordinates.lat, this.city.coordinates.lon), 14); - this.viewMapRectangle?.remove(); - this.viewMapRectangle = L.rectangle(this.networks[i].leafletBounds).addTo(this.viewMap); - } - } - - // HACK Makes sure leaflet gets initialized. There must be better way to do this. - initMap(viewMapContainer: ViewContainerDirective) { - if (!this.viewMap) { - viewMapContainer.container.insert(this.viewMapView); - } - } - - onAnimationEventDone(event: AnimationEvent, index: number) { - if (event.toState == "show" && this.networks[index].animationState == "show") - this.networks[index].animationState = "shown"; - else if (event.toState == "shown" && this.networks[index].animationState == "shown") - this.networks[index].animationState = "hide"; - else if (event.toState == "hide" && this.networks[index].animationState == "hide") - this.networks[index].animationState = "hidden"; - else if (event.toState == "replaceHide" && this.networks[index].animationState == "replaceHide") - this.networks[index].animationState = "replaceShow"; - else if (event.toState == "replaceShow" && this.networks[index].animationState == "replaceShow") - this.networks[index].animationState = "shown"; - } - - onAnimationEventStart(event: AnimationEvent, index: number) { - if (event.toState == "show" || event.toState == "replaceShow") { - (event.element as HTMLElement).innerHTML = this.networks[index].conversionWSMessage - } - } - - // Boilerplate code for easier form elements access - get name() { - return this.networkForm.get("name") - } - - get description() { - return this.networkForm.get("description") - } - - get bounds() { - return this.networkForm.get("bounds") - } - - checkValid(control: AbstractControl) { - return control.invalid && (control.dirty || control.touched) - } - -} diff --git a/src/app/pages/simulation-wizard-copied/our-spider-chart/our-spider-chart.component.html b/src/app/pages/simulation-wizard-copied/our-spider-chart/our-spider-chart.component.html deleted file mode 100644 index 97d9a214cac32dff125623152b26ebf666d0304d..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/our-spider-chart/our-spider-chart.component.html +++ /dev/null @@ -1,30 +0,0 @@ -<div class="row justify-content-center align-items-center"> - <nb-card size="giant" style="width: 100%"> - <nb-card-header>Radar chart</nb-card-header> - <nb-card-body> - <chart - type="radar" - [data]="chartjsData" - [options]="chartjsOptions" - ></chart> - </nb-card-body> - </nb-card> - <nb-card *ngIf="chartjsData"> - <form [formGroup]="form"> - <div - formArrayName="checkboxes" - *ngFor="let c of checkboxesFormArray.controls; let i = index" - style="display: inline-block; width: 33%" - > - <nb-checkbox - id="checkboxNOx-{{ i }}" - [formControlName]="i" - (change)="onCheckboxChange($event)" - [checked]="checked[i]" - > - {{ checkboxItems[i] }} - </nb-checkbox> - </div> - </form> - </nb-card> -</div> diff --git a/src/app/pages/simulation-wizard-copied/our-spider-chart/our-spider-chart.component.scss b/src/app/pages/simulation-wizard-copied/our-spider-chart/our-spider-chart.component.scss deleted file mode 100644 index dc858d2f2cbee4a1be02ec13c093fff48e6f3e4e..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/our-spider-chart/our-spider-chart.component.scss +++ /dev/null @@ -1,19 +0,0 @@ -@import "../../../@theme/styles/themes"; - -@include nb-install-component() { - ::ng-deep chart { - display: block; - height: 100%; - width: 100%; - min-width: 768px; - } - ::ng-deep { - button { - margin-top: 20px; - width: 100%; - } - form { - padding: 20px; - } - } -} diff --git a/src/app/pages/simulation-wizard-copied/our-spider-chart/our-spider-chart.component.spec.ts b/src/app/pages/simulation-wizard-copied/our-spider-chart/our-spider-chart.component.spec.ts deleted file mode 100644 index 414892e6bae132ae1c9b14c859022af7b8746ac2..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/our-spider-chart/our-spider-chart.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { OurSpiderChartComponent } from './our-spider-chart.component'; - -describe('OurSpiderChartComponent', () => { - let component: OurSpiderChartComponent; - let fixture: ComponentFixture<OurSpiderChartComponent>; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ OurSpiderChartComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(OurSpiderChartComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/pages/simulation-wizard-copied/our-spider-chart/our-spider-chart.component.ts b/src/app/pages/simulation-wizard-copied/our-spider-chart/our-spider-chart.component.ts deleted file mode 100644 index 700a02bd4ecddf332ac906aa356f20e9d8ecb951..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/our-spider-chart/our-spider-chart.component.ts +++ /dev/null @@ -1,184 +0,0 @@ -import { Component, OnInit, OnDestroy } from "@angular/core"; -import { Observable } from "rxjs"; -import { FormBuilder, FormGroup, FormArray, FormControl } from "@angular/forms"; -import { SimulationService } from "../utils/services/simulation.service"; - -@Component({ - selector: "ngx-our-spider-chart", - templateUrl: "./our-spider-chart.component.html", - styleUrls: ["./our-spider-chart.component.scss"], -}) -export class OurSpiderChartComponent implements OnInit, OnDestroy { - chartjsOptions: any; - chartjsData: {}; - responseFromApi = {}; - respondedKeys = []; - themeSubscription: any; - form: FormGroup; - checkboxItems = []; - checked: boolean[] = []; - colors: any = ["#FF0000", "#228822", "#3333FF", "#007700"]; - get checkboxesFormArray() { - return this.form.controls.checkboxes as FormArray; - } - - constructor( - private simulationService: SimulationService, - private formBuilder: FormBuilder - ) { - this.chartjsOptions = { - responsive: true, - maintainAspectRatio: false, - scaleFontColor: "white", - legend: { - labels: { - fontColor: "black", - }, - }, - scale: { - pointLabels: { - fontSize: 14, - fontColor: "#262626", - }, - gridLines: { - color: "#888", - }, - angleLines: { - color: "#888", - }, - ticks: { - beginAtZero: true, - max: 4, - min: 0, - stepSize: 1, - }, - }, - }; - this.form = this.formBuilder.group({ - checkboxes: new FormArray([]), - }); - this.addCheckboxesToForm(); - } - ngOnInit(): void {} - async ngAfterViewInit() { - await this.loadDataFromApi().toPromise(); - } - ngOnDestroy(): void {} - loadDataFromApi(): Observable<any> { - this.simulationService.postEvaluated([1, 2]).subscribe({ - next: (data) => { - this.responseFromApi = data; - this.removeAllCheckboxesFromForm(); - let tmpDatasets = []; - let tmpLabels = []; - let tmpData = []; - const myKeys = Object.keys(Object.entries(data)[0][1]["sentArray"]); - - for (let j = 0; j < myKeys.length; j++) { - if (tmpLabels.indexOf(myKeys[j]) === -1) tmpLabels.push(myKeys[j]); - - this.respondedKeys.push({ - id: j, - name: myKeys[j], - value: Object.entries(data)[0][1]["sentArray"][myKeys[j]], - }); - - tmpData.push(Object.entries(data)[0][1]["sentArray"][myKeys[j]]); - } - - tmpDatasets.push({ - data: tmpData, - label: Object.keys(Object.entries(data)[0][1]["sentArray"]), - borderColor: this.colors[1] + "80", - backgroundColor: this.colors[1] + "22", - }); - - this.addCheckboxesToForm(); - - this.chartjsData = { - labels: tmpLabels, - datasets: tmpDatasets, - }; - }, - error: (error) => { - console.log("🚀☢ ~ Error", error); - const el = document.querySelectorAll( - ".chartjs-size-monitor" - )[0] as HTMLElement; - el.insertAdjacentHTML( - "afterend", - `<div style='margin: -1rem -1.5rem; background: #eee; padding: 15px; position: absolute; width: 100%; height: 100%;'><div style='position: relative; text-align: center; left: 50%; top: 50%; transform: translate(-50%, -50%);'><h4>⚠️ No data to be shown available.</h4><p>${error.error}</p><p>${error.message}</p></div></div>` - ); - }, - }); - return new Observable(); - } - onCheckboxChange(e) { - const selectedCheckboxNames = this.form.value.checkboxes - .map((checked, i) => (checked ? this.checkboxItems[i] : null)) - .filter((v) => v !== null); - const selectedCheckboxIds = this.form.value.checkboxes - .map((checked, i) => (checked ? i : null)) - .filter((v) => v !== null); - let tmpLabels = []; - let tmpDatasets = []; - - for (let i = 0; i < selectedCheckboxIds.length; i++) { - tmpLabels.push(this.respondedKeys[selectedCheckboxIds[i]].name); - } - - for (let i = 0; i < Object.keys(this.responseFromApi).length; i++) { - let tmpData = []; - const myKeys = this.getKeys( - this.responseFromApi[Object.keys(this.responseFromApi)[i]] - ); - - for (let j = 0; j < myKeys.length; j++) { - if (selectedCheckboxNames.includes(myKeys[j])) { - tmpData.push( - this.responseFromApi[Object.keys(this.responseFromApi)[i]][ - myKeys[j] - ] - ); - } - } - - tmpDatasets.push({ - data: tmpData, - label: Object.keys(this.responseFromApi)[i], - borderColor: this.colors[i] + "80", - backgroundColor: this.colors[i] + "22", - }); - } - - this.chartjsData = { - labels: tmpLabels, - datasets: tmpDatasets, - }; - } - private addCheckboxesToForm() { - this.checkboxItems.forEach(() => - this.checkboxesFormArray.push(new FormControl(true)) - ); - } - private removeAllCheckboxesFromForm() { - let count = 1000; - while (this.checkboxItems.length > 0) { - this.checkboxItems.splice(this.checkboxItems.length - 1, 1); - count--; - if (count < 1) { - break; - } - } - this.checkboxesFormArray.clear(); - } - getKeys(obj) { - return Object.keys(obj).reduce((r, k) => { - r.push(k); - - if (Object(obj[k]) === obj[k]) r.push(...this.getKeys(obj[k])); - - return r; - }, []); - } -} diff --git a/src/app/pages/simulation-wizard-copied/recommender-page/recommender-page.component.html b/src/app/pages/simulation-wizard-copied/recommender-page/recommender-page.component.html deleted file mode 100644 index 86cfc1a94d92f9299415aa574d9315e31beae1f8..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/recommender-page/recommender-page.component.html +++ /dev/null @@ -1,125 +0,0 @@ -<div class="row"> - <div class="col"> - <nb-card> - <nb-card-header> - <h3>Recommender Engine</h3> - </nb-card-header> - - <nb-card-body> - <p>Select two KPIs and choose to minimize or maximize them.</p> - <form [formGroup]="myFormGroup" (ngSubmit)="myFormSubmit()"> - <div class="row"> - <nb-select - appearance="filled" - placeholder="Select KPI 1" - formControlName="kpi_1_name" - class="select select-wide" - > - <nb-option *ngFor="let kpi_name of kpisArr" [value]="kpi_name">{{ - kpi_name - }}</nb-option> - </nb-select> - - <nb-select - appearance="filled" - placeholder="Optimize KPI" - formControlName="kpi_1_min_or_max" - class="select select-narrow" - > - <nb-option value="min">Minimize</nb-option> - <nb-option value="max">Maximize</nb-option> - </nb-select> - </div> - <div class="row"> - <nb-select - appearance="filled" - placeholder="Select KPI 2" - formControlName="kpi_2_name" - class="select select-wide" - > - <nb-option *ngFor="let kpi_name of kpisArr" [value]="kpi_name">{{ - kpi_name - }}</nb-option> - </nb-select> - - <nb-select - appearance="filled" - placeholder="Optimize KPI" - formControlName="kpi_2_min_or_max" - class="select select-narrow" - > - <nb-option value="min">Minimize</nb-option> - <nb-option value="max">Maximize</nb-option> - </nb-select> - </div> - <div class="row mt-2"> - <div class="col text-right"> - <button - nbButton - type="submit" - status="primary" - nbTooltip="Choose all four selections to use this button." - > - Optimize - </button> - </div> - </div> - <!-- <div class="mt-2"> - <nb-progress-bar [value]="80" status="danger" - >progress (WIP)</nb-progress-bar - > - </div> --> - </form> - </nb-card-body> - </nb-card> - </div> -</div> -<div class="row"> - <div class="col"> - <nb-card> - <nb-card-header> - <h3>Recommendations</h3> - </nb-card-header> - <nb-card-body> - <p>Select one recommendation</p> - <div id="recommendations"> - <div *ngFor="let s of solutions"> - <button - nbButton - fullWidth - status="success" - *ngIf="selectedRecommendation == s; else elseBlock" - (click)="onClick(s)" - > - <strong>{{ s["label_first"] }} </strong> - {{ s["label_second"] }} - </button> - <ng-template #elseBlock> - <button nbButton fullWidth (click)="onClick(s)"> - <strong>{{ s["label_first"] }} </strong> - {{ s["label_second"] }} - </button> - </ng-template> - </div> - </div> - <div class="row mt-2"> - <div - id="map" - leaflet - #map - [leafletOptions]="options" - (leafletMapReady)="onMapReady($event)" - [leafletLayersControl]="checkboxlayersControl" - ></div> - <div id="pareto"> - <chart - type="scatter" - [data]="chartjsData" - [options]="chartjsOptions" - ></chart> - </div> - </div> - </nb-card-body> - </nb-card> - </div> -</div> diff --git a/src/app/pages/simulation-wizard-copied/recommender-page/recommender-page.component.scss b/src/app/pages/simulation-wizard-copied/recommender-page/recommender-page.component.scss deleted file mode 100644 index 91626224185d5e909d7e4c1060ef59c7ea3f9b56..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/recommender-page/recommender-page.component.scss +++ /dev/null @@ -1,37 +0,0 @@ -.select { - margin-right: 4px; - margin-bottom: 4px; - &.select-narrow { - width: 180px; - } - &.select-wide { - width: 20rem; - } -} - -#recommendations > div { - button { - font-weight: normal; - white-space: normal; - text-transform: none; - margin-bottom: 4px; - } -} - -#pareto { - position: relative; - height: auto; - width: 100%; - max-width: 40rem; - margin-left: auto; - margin-right: auto; -} - -::ng-deep .leaflet-container { - height: 350px; - min-width: 350px; - width: 100%; -} -::ng-deep .leaflet-control-layers.leaflet-control.hidden { - visibility: hidden; -} \ No newline at end of file diff --git a/src/app/pages/simulation-wizard-copied/recommender-page/recommender-page.component.spec.ts b/src/app/pages/simulation-wizard-copied/recommender-page/recommender-page.component.spec.ts deleted file mode 100644 index 7f59d685471905115b9692f7f7bfa7fbeb49f2b1..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/recommender-page/recommender-page.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { RecommenderPageComponent } from './recommender-page.component'; - -describe('RecommenderPageComponent', () => { - let component: RecommenderPageComponent; - let fixture: ComponentFixture<RecommenderPageComponent>; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ RecommenderPageComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(RecommenderPageComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/pages/simulation-wizard-copied/recommender-page/recommender-page.component.ts b/src/app/pages/simulation-wizard-copied/recommender-page/recommender-page.component.ts deleted file mode 100644 index 9a65cd5aefb39eb68d0b2833a9a07b91a7b6a14a..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/recommender-page/recommender-page.component.ts +++ /dev/null @@ -1,467 +0,0 @@ -import { AfterViewInit, Component, OnChanges, OnInit } from "@angular/core"; -import { FormBuilder } from "@angular/forms"; -import { City } from "../utils/data/city"; -import { CityService } from "../utils/services/city.service"; -import * as L from "leaflet"; - -@Component({ - selector: "ngx-recommender-page", - templateUrl: "./recommender-page.component.html", - styleUrls: ["./recommender-page.component.scss"], -}) -export class RecommenderPageComponent - implements OnInit, AfterViewInit, OnChanges -{ - city: City; - kpis: object[] = []; - radioButtonLayersControl: any; - checkboxlayersControl: any = undefined; - currentGeojson: any = undefined; - city_kpi_ids = { - amsterdam: { - 1: "bikeIntensity", - 2: "bikeCongestion", - 3: "bikeSafety", - 4: "bikeability", - }, - bilbao: { - 1: "entryCapacityToCenter", - 2: "NOx", - 3: "PM10", - 4: "CO2", - }, - helsinki: { - 1: "harbourAreaTrafficFlow", - 2: "acousticPollution", - 3: "NOx", - 4: "PM10", - 5: "CO2", - }, - messina: { - 1: "publicTransportUse", - 2: "averageSpeedOfPublicTransport", - 3: "numberOfBikeTrips", - 4: "shareOfPublicTransport", - 5: "shareOfCars", - 6: "shareOfBicycles", - }, - }; - kpisArr: object[] = []; - myFormGroup = this.formBuilder.group({ - kpi_1_name: { - value: undefined, - disabled: false, - }, - kpi_1_min_or_max: { - value: undefined, - disabled: false, - }, - kpi_2_name: { - value: undefined, - disabled: false, - }, - kpi_2_min_or_max: { - value: undefined, - disabled: false, - }, - }); - - solutions: object[] = [ - { - name: "LTZ Area 1", - kpis: { - kpi_1: 205, - kpi_2: 0.46, - }, - geometry: { - type: "FeatureCollection", - features: [ - { - type: "Feature", - properties: { - area: 1, - closureDuration: 4, - closureTime: 16, - }, - geometry: { - type: "Polygon", - coordinates: [ - [ - [-2.935624122619629, 43.25057933422427], - [-2.9346370697021484, 43.255549152422574], - [-2.9357528686523438, 43.256736847669046], - [-2.948455810546875, 43.25745570459084], - [-2.9490137100219727, 43.25826831523997], - [-2.946138381958008, 43.265143817392435], - [-2.947211265563965, 43.265706324114475], - [-2.946782112121582, 43.266487574827686], - [-2.9465675354003906, 43.26705006913269], - [-2.9454517364501953, 43.26720631662829], - [-2.9444217681884766, 43.2657375743355], - [-2.935967445373535, 43.26370627659918], - [-2.934937477111816, 43.26395628613214], - [-2.9338645935058594, 43.26376877907867], - [-2.933821678161621, 43.26342501464733], - [-2.9296159744262695, 43.26229995384551], - [-2.928028106689453, 43.26536257062419], - [-2.931675910949707, 43.268800018174396], - [-2.933521270751953, 43.26895626117804], - [-2.9402589797973633, 43.26914375225299], - [-2.9485416412353516, 43.26658132423948], - [-2.9508590698242188, 43.265487572118], - [-2.9551076889038086, 43.26486256208225], - [-2.955622673034668, 43.26273747996124], - [-2.9566526412963867, 43.260237288376366], - [-2.953519821166992, 43.25895590039574], - [-2.951288223266601, 43.255955471824315], - [-2.949700355529785, 43.255705429436404], - [-2.948155403137207, 43.25411138507785], - [-2.9477691650390625, 43.253173692434395], - [-2.946352958679199, 43.25248604198639], - [-2.945108413696289, 43.251985927692836], - [-2.944035530090332, 43.250610592209846], - [-2.935624122619629, 43.25057933422427], - ], - ], - }, - }, - ], - }, - }, - { - name: "LTZ Area 2", - kpis: { - kpi_1: 225, - kpi_2: 0.37, - }, - geometry: { - type: "FeatureCollection", - features: [ - { - type: "Feature", - properties: { - area: 1, - closureDuration: 11, - closureTime: 9, - }, - geometry: { - type: "Polygon", - coordinates: [ - [ - [-2.9346799850463867, 43.259674731120306], - [-2.9354095458984375, 43.25790889263654], - [-2.93459415435791, 43.25748695904712], - [-2.934207916259765, 43.25759634951771], - [-2.933800220489502, 43.257502586269226], - [-2.9272985458374023, 43.26119049852819], - [-2.929401397705078, 43.26173741564794], - [-2.92985200881958, 43.26119049852819], - [-2.9303884506225586, 43.26064357649541], - [-2.9310965538024902, 43.26020603533182], - [-2.9315686225891113, 43.26003414330016], - [-2.932147979736328, 43.259768491023934], - [-2.933070659637451, 43.25959659775697], - [-2.9338645935058594, 43.259612224437674], - [-2.9346799850463867, 43.259674731120306], - ], - ], - }, - }, - ], - }, - }, - { - name: "LTZ Area 1", - kpis: { - kpi_1: 215, - kpi_2: 0.55, - }, - geometry: { - type: "FeatureCollection", - features: [ - { - type: "Feature", - properties: { - area: 1, - closureDuration: 18, - closureTime: 22, - }, - geometry: { - type: "Polygon", - coordinates: [ - [ - [-2.9351949691772456, 43.2504543021216], - [-2.9281997680664062, 43.25164209673373], - [-2.9294443130493164, 43.25217347103417], - [-2.9294872283935547, 43.25342374521771], - [-2.9281997680664062, 43.25404887268414], - [-2.9237794876098633, 43.253830078800796], - [-2.9234790802001953, 43.254517714072875], - [-2.9253244400024414, 43.25529910836627], - [-2.92635440826416, 43.25533036392946], - [-2.931332588195801, 43.257268177516366], - [-2.934207916259765, 43.25739319563019], - [-2.936825752258301, 43.258737124142954], - [-2.9364395141601562, 43.259487210879875], - [-2.9358386993408203, 43.25979974429305], - [-2.9350662231445312, 43.259518464293386], - [-2.933521270751953, 43.259549717690845], - [-2.9316329956054688, 43.25979974429305], - [-2.9305601119995113, 43.26054981793934], - [-2.9294872283935547, 43.26120612479979], - [-2.9294443130493164, 43.261956181120176], - [-2.9340362548828125, 43.2630187450895], - [-2.934465408325195, 43.26358127144766], - [-2.9351091384887695, 43.26367502533537], - [-2.9358816146850586, 43.26342501464733], - [-2.9445934295654297, 43.26542507140318], - [-2.9449367523193355, 43.26617507574559], - [-2.945280075073242, 43.266768822629906], - [-2.9462242126464844, 43.26664382376714], - [-2.9466533660888667, 43.265706324114475], - [-2.9457521438598633, 43.265206318396025], - [-2.9484987258911133, 43.25836207730933], - [-2.9483699798583984, 43.25776824843158], - [-2.9351949691772456, 43.257143159145855], - [-2.93459415435791, 43.256955631108845], - [-2.933735847473144, 43.2558304507587], - [-2.9351949691772456, 43.2504543021216], - ], - ], - }, - }, - ], - }, - }, - ]; - selectedRecommendation: object = {}; - map: L.Map; - options = { - layers: [ - L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { - maxZoom: 18, - attribution: "...", - }), - ], - zoom: 15, - }; - colors: any = ["#FF0000", "#228822", "#3333FF", "#007700"]; - respondedKeys = []; - chartjsData: object = {}; - - chartjsOptions = { - scales: { - xAxes: [ - { - ticks: { - userCallback: function (label, index, labels) { - return `${"Kpi_X"}: ${label.toString().padStart(4, " ")}`; - }, - }, - }, - ], - yAxes: [ - { - ticks: { - userCallback: function (label, index, labels) { - return `${"Kpi_Y"}: ${label.toString().padStart(4, " ")}`; - }, - }, - }, - ], - }, - }; - leafletControlHamburger: HTMLElement = null; - - constructor( - private cityService: CityService, - private formBuilder: FormBuilder - ) {} - - ngOnChanges(): void {} - - ngOnInit(): void { - this.cityService.getSelectedCityNotBehavior().subscribe((city) => { - this.city = city; - this.kpis = this.city_kpi_ids[this.city.cityId]; - for (let l = 0; l < Object.entries(this.kpis).length; l++) { - this.kpisArr.push(Object.entries(this.kpis)[l][1]); - } - }); - this.extractDataForChart(); - this.populateStringForButtons(); - - this.myFormGroup.controls["kpi_1_name"].setValue( - this.city_kpi_ids.bilbao["1"] - ); - this.myFormGroup.controls["kpi_1_min_or_max"].setValue("max"); - this.myFormGroup.controls["kpi_2_name"].setValue( - this.city_kpi_ids.bilbao["4"] - ); - this.myFormGroup.controls["kpi_2_min_or_max"].setValue("min"); - } - - ngAfterViewInit(): void { - this.leafletControlHamburger = <HTMLElement>( - document.querySelectorAll(".leaflet-control-layers.leaflet-control")[0] - ); - this.leafletControlHamburger.classList.add("hidden"); - } - - onMapReady(map: L.Map) { - this.map = map; - this.map.setView(new L.LatLng(43.25974033178419, -2.947339117090451), 13); - } - - myFormSubmit(): void { - console.log( - "🚀☢ ~ his.myFormGroup", - this.myFormGroup.get("kpi_1_name").value - ); - console.log( - "🚀☢ ~ his.myFormGroup", - this.myFormGroup.get("kpi_1_min_or_max").value - ); - console.log( - "🚀☢ ~ his.myFormGroup", - this.myFormGroup.get("kpi_2_name").value - ); - console.log( - "🚀☢ ~ his.myFormGroup", - this.myFormGroup.get("kpi_2_min_or_max").value - ); - } - - onClick(recommendation: object): void { - this.selectedRecommendation = recommendation; - const recommendationGeometry = recommendation["geometry"]; - - if (this.radioButtonLayersControl) - this.radioButtonLayersControl.remove(this.map); - - if (this.currentGeojson != undefined) - this.map.removeLayer(this.currentGeojson); - - this.leafletControlHamburger.classList.remove("hidden"); - - this.currentGeojson = L.geoJSON(<any>recommendationGeometry, { - style: (feature) => ({ - // weight: 1, - // color: "#3388ff", - // opacity: 0.7, - // fillOpacity: 0.12, - // fillColor: "#46064a", - }), - onEachFeature: (feature, layer) => - layer.on({ - mouseover: (e) => this.highlightFeature(e, feature), - mouseout: (e) => this.resetFeature(e, feature), - }), - }); - - this.checkboxlayersControl = { - overlays: { - "our checkbox 1": this.currentGeojson, - }, - }; - - this.radioButtonLayersControl = new L.Control.Layers( - { - "our radiobutton 1": this.currentGeojson, - }, - null, - { collapsed: false } - ); - this.map.addControl(this.radioButtonLayersControl); - } - - extractDataForChart(): void { - this.chartjsData = { - datasets: [ - { - label: "Solution 1", - data: [ - { - x: 50, - y: 24.7, - }, - ], - backgroundColor: "rgb(255, 99, 132)", - pointRadius: 7, - }, - { - label: "Solution 2", - data: [ - { - x: 100, - y: 22, - }, - ], - backgroundColor: "dodgerblue", - pointRadius: 7, - }, - { - label: "Solution 3", - data: [ - { - x: 75, - y: 20, - }, - ], - backgroundColor: "sienna", - pointRadius: 7, - }, - ], - }; - } - - populateStringForButtons(): void { - this.solutions.forEach((solution) => { - const duration = - solution["geometry"]["features"][0]["properties"]["closureDuration"] / - 2; - const hour = Math.floor( - solution["geometry"]["features"][0]["properties"]["closureTime"] / 4 - ); - let minute = ( - (solution["geometry"]["features"][0]["properties"]["closureTime"] % 4) * - 15 - ).toString(); - if (minute.length == 1) { - minute = "0" + minute; - } - solution["label_first"] = `${solution["name"]}: `; - solution[ - "label_second" - ] = `duration: ${duration} hours; start time: ${hour}:${minute}.`; - }); - } - - private highlightFeature(e, feature) { - const layer = e.target; - let text = ""; - - Object.entries(feature["properties"]).forEach((key, value) => { - text += `${key}: ${value} <br>`; - }); - - layer.bindPopup(text); - layer.openPopup(); - layer.setStyle({ - weight: 2, - opacity: 1.0, - color: "#3388ff", - }); - } - - private resetFeature(e, feature) { - const layer = e.target; - layer.closePopup(); - - layer.setStyle({ - weight: 1, - opacity: 0.7, - color: "#3388ff", - }); - } -} diff --git a/src/app/pages/simulation-wizard-copied/results-map/map-colors-local.ts b/src/app/pages/simulation-wizard-copied/results-map/map-colors-local.ts deleted file mode 100644 index 352ad03f4b141419401de6bc427fd50c23c37d12..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/results-map/map-colors-local.ts +++ /dev/null @@ -1,120 +0,0 @@ -// sunset N11 scheme: 35b499; 4a7ab7; 6da5cc; 98cae0; c2e3ee; eaebcc; fed98b; fdb366; f57d4a; dc3d2d; a50026 -// cold-warm color scheme: 4575b5; 91bfdb; dff2f7; ffffbf; ffe291; fc8c58; d62f27; -const color_0 = "#a50026"; -const color_1 = "#f57d4a"; -const color_2 = "#fed98b"; -const color_3 = "#c2e3ee"; -const color_4 = "#6da5cc"; -const color_5 = "#35b499"; -const color_capacity_equal_9999 = "#ffffff00"; - -export function getColor( - properties: any, - pro: any, - max: number, - ratiosBetweenGrades: number[], - isCapacityEqual9999: boolean -): string { - if (isCapacityEqual9999 == true) { - return color_capacity_equal_9999; - } - let value = undefined; - - if (pro == "pedestrianTravelTime") { - value = properties; - } else { - for (let key in properties) { - if (key == pro) { - value = properties[key]; - } - } - } - - if (value == undefined) return "#9efcff33"; - - if ( - pro == "PM" || - pro == "NOx" || - pro == "NO2" || - pro == "HC" || - pro == "CO2_TOTAL" || - pro == "CO2_rep" || - pro == "CO2" || - pro == "CO" || - pro == "pedestrianTravelTime" - ) { - return value > max / ratiosBetweenGrades[4] - ? color_0 - : value > max / ratiosBetweenGrades[3] - ? color_1 - : value > max / ratiosBetweenGrades[2] - ? color_2 - : value > max / ratiosBetweenGrades[1] - ? color_3 - : value > max / ratiosBetweenGrades[0] - ? color_4 - : color_5; - } else { - return "black"; - } -} - -export function getColorHighToLow( - properties: any, - pro: any, - max: number, - ratiosBetweenGrades: number[], - isCapacityEqual9999: boolean -): string { - if (isCapacityEqual9999 == true) { - return color_capacity_equal_9999; - } - let value = undefined; - - if (pro == "dailyInternalBikeTravels") { - value = properties; - } else if (pro == "capacity") { - value = properties; - } else { - for (let key in properties) { - if (key == pro) { - value = properties[key]; - } - } - } - - if (value == undefined) return "#9efcff33"; - - if (pro == "dailyInternalBikeTravels" || pro == "capacity") { - return value > max / ratiosBetweenGrades[4] - ? color_5 - : value > max / ratiosBetweenGrades[3] - ? color_4 - : value > max / ratiosBetweenGrades[2] - ? color_3 - : value > max / ratiosBetweenGrades[1] - ? color_2 - : value > max / ratiosBetweenGrades[0] - ? color_1 - : color_0; - } else { - return "black"; - } -} - -export function getColorForLegend( - d: number, - current_brink_values: object -): string { - return current_brink_values[d] > current_brink_values[4] - ? color_0 - : current_brink_values[d] > current_brink_values[3] - ? color_1 - : current_brink_values[d] > current_brink_values[2] - ? color_2 - : current_brink_values[d] > current_brink_values[1] - ? color_3 - : current_brink_values[d] > current_brink_values[0] - ? color_4 - : color_5; -} diff --git a/src/app/pages/simulation-wizard-copied/results-map/results-map.component.html b/src/app/pages/simulation-wizard-copied/results-map/results-map.component.html deleted file mode 100644 index 8a69dadd4326fa3452f1e29c5587f8eca9987ffd..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/results-map/results-map.component.html +++ /dev/null @@ -1,43 +0,0 @@ -<nb-card - [nbSpinner]="geojsonLoading" - nbSpinnerSize="giant" - nbSpinnerStatus="basic" -> - <nb-card-body> - <div - leaflet - id="map" - #map - [leafletOptions]="options" - (leafletMapReady)="onMapReady($event)" - > - <div - style=" - z-index: 1003; - position: absolute; - top: 10px; - left: 57px; - background-color: #fffd; - border-radius: 0.25rem; - " - > - <button - nbButton - status="primary" - (click)="onLoad()" - nbTooltip="Select a simulation in order to use this button. GET http://localhost:8083/dss/geojson/2" - [disabled]="selectedSimulationId == undefined" - > - load geojson - </button> - </div> - </div> - <div id="grayscaleInput"> - <input - type="range" - [(ngModel)]="grayscale" - (change)="grayscaleChange()" - /> - </div> - </nb-card-body> -</nb-card> diff --git a/src/app/pages/simulation-wizard-copied/results-map/results-map.component.scss b/src/app/pages/simulation-wizard-copied/results-map/results-map.component.scss deleted file mode 100644 index 85b498233ac8eafef6dcceb5800427d396c7c688..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/results-map/results-map.component.scss +++ /dev/null @@ -1,29 +0,0 @@ -@import "../../../@theme/styles/themes"; - -@include nb-install-component() { - nb-card-body { - padding: 0; - } - - ::ng-deep .leaflet-top, - ::ng-deep .leaflet-bottom { - z-index: 997; - } - - ::ng-deep .leaflet-container { - width: 100%; - height: nb-theme(card-height-large); - } - #grayscaleInput { - background: #fffd; - display: inline-block; - position: absolute; - bottom: 53px; - right: 10px; - z-index: 1002; - padding: 4px 3px 0 3px; - } -} -nb-radio { - display: inline; -} diff --git a/src/app/pages/simulation-wizard-copied/results-map/results-map.component.spec.ts b/src/app/pages/simulation-wizard-copied/results-map/results-map.component.spec.ts deleted file mode 100644 index e21027dd508f6a412021df4f81131a4b39ca60be..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/results-map/results-map.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ResultsMapComponent } from './results-map.component'; - -describe('ResultsMapComponent', () => { - let component: ResultsMapComponent; - let fixture: ComponentFixture<ResultsMapComponent>; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ ResultsMapComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(ResultsMapComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/pages/simulation-wizard-copied/results-map/results-map.component.ts b/src/app/pages/simulation-wizard-copied/results-map/results-map.component.ts deleted file mode 100644 index 351dc5e4cce892db30886bc4cf018c066b66f375..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/results-map/results-map.component.ts +++ /dev/null @@ -1,480 +0,0 @@ -import { Component, Input } 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"; - -@Component({ - selector: "ngx-results-map", - templateUrl: "./results-map.component.html", - styleUrls: ["./results-map.component.scss"], -}) -export class ResultsMapComponent { - public map: L.Map; - options = { - layers: [ - L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { - maxZoom: 18, - attribution: "...", - }), - ], - zoom: 11, - center: L.latLng({ lat: 43.263, lng: -2.935 }), - }; - mapLegend = new L.Control({ position: "bottomright" }); - radioButtonLayersControl: any; - 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() selectedSimulationId: string; - - constructor( - private simulationService: SimulationService, - private toastrService: NbToastrService - ) {} - onMapReady(map: L.Map) { - this.map = map; - this.grayscaleChange(); - setTimeout(() => { - this.map.invalidateSize(); - }, 50); - // this.onLoad(); - } - - onLoad() { - if (this.radioButtonLayersControl) - this.radioButtonLayersControl.remove(this.map); - - this.toastrService.show("This might take a while", "Info", { - status: "info", - }); - this.geojsonLoading = true; - this.simulationService.getGeojson(this.selectedSimulationId).subscribe( - (res) => { - // console.log(res); - if (res["message"] == "Please prepare visualizations first.") { - this.toastrService.show( - "The visualization is not prepared yet, try again in a few minutes.", - "Warning", - { - status: "warning", - } - ); - return; - } - 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(); - }, - (error) => { - this.toastrService.show(error["message"], "Error", { - status: "Error", - }); - }, - () => { - this.geojsonLoading = false; - } - ); - } - - // LEGEND - setLegend(legendType) { - this.mapLegend.onAdd = (map) => { - let direction: string; - if ( - legendType == "PM" || - legendType == "CO2_rep" || - legendType == "CO" || - legendType == "CO2_TOTAL" || - legendType == "HC" || - legendType == "NOx" || - legendType == "pedestrianTravelTime" - ) { - direction = "lowToHigh"; - } else { - direction = "highToLow"; - } - - var div = L.DomUtil.create("div"); - const grades = [ - 0, - this.limitMyDigits( - this.maxKeyValues["maxValue_" + legendType] / - this.ratiosBetweenGrades[0] - ), - this.limitMyDigits( - this.maxKeyValues["maxValue_" + legendType] / - this.ratiosBetweenGrades[1] - ), - this.limitMyDigits( - this.maxKeyValues["maxValue_" + legendType] / - this.ratiosBetweenGrades[2] - ), - this.limitMyDigits( - this.maxKeyValues["maxValue_" + legendType] / - this.ratiosBetweenGrades[3] - ), - this.limitMyDigits( - this.maxKeyValues["maxValue_" + legendType] / - this.ratiosBetweenGrades[4] - ), - ]; - - if (direction == "lowToHigh") { - div.innerHTML += - "<p style='background:white; display: inline; font-size:17px'> <span style='color:" + - MapColors.getColorForLegend(0, grades) + - "'>■</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:" + - MapColors.getColorForLegend(i, grades) + - "'>■</span> " + - grades[i] + - (grades[i + 1] ? "–" + grades[i + 1] + "</p>" : "+</p>"); - } - } else { - for (let i = 5; i > 0; i--) { - div.innerHTML += - "<p style='background:white; display: inline; font-size:17px'> <span style='color:" + - MapColors.getColorForLegend(5 - i, grades) + - "'>■</span> " + - grades[i] + - (grades[i + 1] ? "–" + grades[i + 1] + "</p>" : "+</p>"); - } - div.innerHTML += - "<p style='background:white; display: inline; font-size:17px'> <span style='color:" + - MapColors.getColorForLegend(5, grades) + - "'>■</span> <" + - grades[1] + - "</p>"; - } - - return div; - }; - this.mapLegend.addTo(this.map); - } - - private highlightFeature(e, feature) { - const layer = e.target; - let text = ""; - if (feature["capacity"]) { - if (feature["capacity"] == "9999.0" || feature["capacity"] == "9999") { - text += `<span style='display: inline-block; margin-bottom: 7px; font-weight: bold;'>Oops! Looks like you clicked on an transparent bus line with capacity of 9999!</span><br>`; - } - const tmp = this.limitMyDigits(feature["capacity"]); - if ("capacity" == this.checkedRadioButton) { - text += `<u><strong>capacity:</strong> ${tmp}</u><br>`; - } else { - text += `<strong>capacity:</strong> ${tmp}<br>`; - } - text += `<span style='display: inline-block; margin-bottom: 7px; color: #666'>(unrounded) ${feature["capacity"]}</span><br>`; - } - - for (let p in feature["cityWide"]["pollution"]) { - const tmp = this.limitMyDigits(feature["cityWide"]["pollution"][p]); - if (p == this.checkedRadioButton) { - text += `<u><strong>${p}:</strong> ${tmp}</u><br>`; - } else { - text += `<strong>${p}:</strong> ${tmp}<br>`; - } - text += `<span style='display: inline-block; margin-bottom: 7px; color: #666'>(unrounded) ${feature["cityWide"]["pollution"][p]}</span><br>`; - } - for (let p in feature["cityWide"]["traffic"]) { - const tmp = this.limitMyDigits(feature["cityWide"]["traffic"][p]); - if (p == this.checkedRadioButton) { - text += `<u><strong>${p}:</strong> ${tmp}</u><br>`; - } else { - text += `<strong>${p}:</strong> ${tmp}<br>`; - } - text += `<span style='display: inline-block; margin-bottom: 7px; color: #666'>(unrounded) ${feature["cityWide"]["traffic"][p]}</span><br>`; - } - - if (!text.length) - text = "<span style='color: lightslategray';>No data available.</span>"; - layer.bindPopup(text); - layer.setStyle({ - weight: 10, - opacity: 1.0, - }); - } - - private resetFeature(e, feature) { - const layer = e.target; - - layer.setStyle({ - weight: this.geoJsonStyleWeight, - opacity: this.geoJsonStyleOpacity, - }); - } - - public extractKeys(jsonFile) { - let allKeys = []; - for (let f = 0; f < jsonFile["features"].length && f < 3498; f++) { - let iterator; - if (jsonFile["features"][f]["properties"]["capacity"]) { - if (!allKeys.includes("capacity")) { - allKeys.push("capacity"); - } - } - - if (jsonFile["features"][f]["properties"]["cityWide"]["pollution"]) { - iterator = Object.keys( - jsonFile["features"][f]["properties"]["cityWide"]["pollution"] - ); - for (let g = 0; g < iterator.length; g++) { - if (!allKeys.includes(iterator[g])) { - allKeys.push(iterator[g]); - } - } - } - if (jsonFile["features"][f]["properties"]["cityWide"]["traffic"]) { - iterator = Object.keys( - jsonFile["features"][f]["properties"]["cityWide"]["traffic"] - ); - for (let g = 0; g < iterator.length; g++) { - if (!allKeys.includes(iterator[g])) { - allKeys.push(iterator[g]); - } - } - } - } - return allKeys; - } - - public populatePropertyGeojsons(jsonFile, keys) { - let res = []; - - this.populateMaxKeyValues(jsonFile, keys); - - for (let f = 0; f < keys.length; f++) { - let tmp: Object = {}; - - if (keys[f] == "capacity") { - tmp = L.geoJSON(<any>jsonFile, { - style: (feature) => ({ - weight: this.geoJsonStyleWeight, - color: MapColors.getColorHighToLow( - feature.properties.capacity, - keys[f], - this.maxKeyValues[`maxValue_${keys[f]}`], - this.ratiosBetweenGrades, - parseInt(feature.properties.capacity) == 9999 ? true : false - ), - opacity: this.geoJsonStyleOpacity, - }), - onEachFeature: (feature, layer) => - layer.on({ - mouseover: (e) => this.highlightFeature(e, feature.properties), - mouseout: (e) => this.resetFeature(e, feature.properties), - }), - }); - } else if (keys[f] == "dailyInternalBikeTravels") { - tmp = L.geoJSON(<any>jsonFile, { - style: (feature) => ({ - weight: this.geoJsonStyleWeight, - color: MapColors.getColorHighToLow( - feature.properties.cityWide.traffic.dailyInternalBikeTravels, - keys[f], - this.maxKeyValues[`maxValue_${keys[f]}`], - this.ratiosBetweenGrades, - parseInt(feature.properties.capacity) == 9999 ? true : false - ), - opacity: this.geoJsonStyleOpacity, - }), - onEachFeature: (feature, layer) => - layer.on({ - mouseover: (e) => this.highlightFeature(e, feature.properties), - mouseout: (e) => this.resetFeature(e, feature.properties), - }), - }); - } else if (keys[f] == "pedestrianTravelTime") { - tmp = L.geoJSON(<any>jsonFile, { - style: (feature) => ({ - weight: this.geoJsonStyleWeight, - color: MapColors.getColor( - feature.properties.cityWide.traffic.pedestrianTravelTime, - keys[f], - this.maxKeyValues[`maxValue_${keys[f]}`], - this.ratiosBetweenGrades, - parseInt(feature.properties.capacity) == 9999 ? true : false - ), - opacity: this.geoJsonStyleOpacity, - }), - onEachFeature: (feature, layer) => - layer.on({ - mouseover: (e) => this.highlightFeature(e, feature.properties), - mouseout: (e) => this.resetFeature(e, feature.properties), - }), - }); - } else { - tmp = L.geoJSON(<any>jsonFile, { - style: (feature) => ({ - weight: this.geoJsonStyleWeight, - color: MapColors.getColor( - feature.properties.cityWide.pollution, - keys[f], - this.maxKeyValues[`maxValue_${keys[f]}`], - this.ratiosBetweenGrades, - parseInt(feature.properties.capacity) == 9999 ? true : false - ), - opacity: this.geoJsonStyleOpacity, - }), - onEachFeature: (feature, layer) => - layer.on({ - mouseover: (e) => this.highlightFeature(e, feature.properties), - mouseout: (e) => this.resetFeature(e, feature.properties), - }), - }); - } - - tmp["myKey"] = keys[f]; - res.push(tmp); - } - return res; - } - - public addListenerToRadioButtonLayersControl() { - this.map.on("baselayerchange", (e) => { - if (e["name"] == "CO") { - this.setLegend("CO"); - this.checkedRadioButton = "CO"; - } else if (e["name"] == "CO2_TOTAL") { - this.setLegend("CO2_TOTAL"); - this.checkedRadioButton = "CO2_TOTAL"; - } else if (e["name"] == "HC") { - this.setLegend("HC"); - this.checkedRadioButton = "HC"; - } else if (e["name"] == "NOx") { - this.setLegend("NOx"); - this.checkedRadioButton = "NOx"; - } else if (e["name"] == "PM") { - this.setLegend("PM"); - this.checkedRadioButton = "PM"; - } else if (e["name"] == "CO2_rep") { - this.setLegend("CO2_rep"); - this.checkedRadioButton = "CO2_rep"; - } else if (e["name"] == "dailyInternalBikeTravels") { - this.setLegend("dailyInternalBikeTravels"); - this.checkedRadioButton = "dailyInternalBikeTravels"; - } else if (e["name"] == "pedestrianTravelTime") { - this.setLegend("pedestrianTravelTime"); - this.checkedRadioButton = "pedestrianTravelTime"; - } else if (e["name"] == "capacity") { - this.setLegend("capacity"); - this.checkedRadioButton = "capacity"; - } else { - this.setLegend(undefined); - this.checkedRadioButton = undefined; - } - }); - } - - public populateMaxKeyValues(jsonFile: Object, keys: Object[]) { - for (let g = 0; g < jsonFile["features"].length; g++) { - for (let f = 0; f < keys.length; f++) { - if (jsonFile["features"][g]["properties"]["cityWide"]["pollution"]) { - if (this.maxKeyValues[`maxValue_${keys[f]}`] == undefined) { - this.maxKeyValues[`maxValue_${keys[f]}`] = - jsonFile["features"][g]["properties"]["cityWide"]["pollution"][ - keys[f] - ]; - } - if ( - jsonFile["features"][g]["properties"]["cityWide"]["pollution"][ - keys[f] - ] > this.maxKeyValues[`maxValue_${keys[f]}`] - ) { - this.maxKeyValues[`maxValue_${keys[f]}`] = - jsonFile["features"][g]["properties"]["cityWide"]["pollution"][ - keys[f] - ]; - } - } - if (jsonFile["features"][g]["properties"]["cityWide"]["traffic"]) { - if (this.maxKeyValues[`maxValue_${keys[f]}`] == undefined) { - this.maxKeyValues[`maxValue_${keys[f]}`] = - jsonFile["features"][g]["properties"]["cityWide"]["traffic"][ - keys[f] - ]; - } - if ( - jsonFile["features"][g]["properties"]["cityWide"]["traffic"][ - keys[f] - ] > this.maxKeyValues[`maxValue_${keys[f]}`] - ) { - this.maxKeyValues[`maxValue_${keys[f]}`] = - jsonFile["features"][g]["properties"]["cityWide"]["traffic"][ - keys[f] - ]; - } - } - if (jsonFile["features"][g]["properties"]["capacity"]) { - const parsed = parseInt( - jsonFile["features"][g]["properties"]["capacity"] - ); - if (parsed != 9999) { - if (this.maxKeyValues[`maxValue_capacity`] == undefined) { - this.maxKeyValues[`maxValue_capacity`] = parsed; - } - if (parsed > this.maxKeyValues[`maxValue_capacity`]) { - this.maxKeyValues[`maxValue_capacity`] = parsed; - } - } - } - } - } - } - - public limitMyDigits(n: number): number { - if (n > 1000) { - return Math.round(n); - } else if (n > 100) { - return Math.round(n); - } else if (n > 10) { - return Math.floor(Math.round(n * 10)) / 10; - } else if (n > 1) { - return Math.floor(Math.round(n * 100)) / 100; - } else if (n > 0.1) { - return Math.floor(Math.round(n * 1000)) / 1000; - } else if (n > 0.01) { - return Math.floor(Math.round(n * 10000)) / 10000; - } else if (n > 0.001) { - return Math.floor(Math.round(n * 100000)) / 100000; - } else if (n > 0.0001) { - return Math.floor(Math.round(n * 1000000)) / 1000000; - } else if (n > 0.00001) { - return Math.floor(Math.round(n * 10000000)) / 10000000; - } else { - return n; - } - } - - grayscaleChange() { - const el = <HTMLElement>( - document.querySelectorAll(".leaflet-pane.leaflet-tile-pane")[0] - ); - el.style.filter = "grayscale(" + (100 - this.grayscale) + "%)"; - } -} diff --git a/src/app/pages/simulation-wizard-copied/results/results.component.html b/src/app/pages/simulation-wizard-copied/results/results.component.html deleted file mode 100644 index 8643ff3e08f3d56301dab10ecf9f0db10c68a68a..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/results/results.component.html +++ /dev/null @@ -1,10 +0,0 @@ -<section style="position: relative"> - <ngx-existing-simulations - (selectedSimulationToEmit)="setSelectedSimulation($event)" - > - </ngx-existing-simulations> - <ngx-results-map - [selectedSimulationId]="selectedSimulationId" - ></ngx-results-map> - <ngx-our-spider-chart> </ngx-our-spider-chart> -</section> diff --git a/src/app/pages/simulation-wizard-copied/results/results.component.scss b/src/app/pages/simulation-wizard-copied/results/results.component.scss deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git a/src/app/pages/simulation-wizard-copied/results/results.component.spec.ts b/src/app/pages/simulation-wizard-copied/results/results.component.spec.ts deleted file mode 100644 index 96e192db54a176597a0caa61dc04b1545a1528f5..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/results/results.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ResultsComponent } from './results.component'; - -describe('ResultsComponent', () => { - let component: ResultsComponent; - let fixture: ComponentFixture<ResultsComponent>; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ ResultsComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(ResultsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/pages/simulation-wizard-copied/results/results.component.ts b/src/app/pages/simulation-wizard-copied/results/results.component.ts deleted file mode 100644 index 22269b1a584512fb31b3296d5793aabc627619df..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/results/results.component.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { Component, OnInit } from "@angular/core"; -import { ComService } from "../utils/services/com.service"; -import { Scenario } from "../utils/data/scenario"; - -@Component({ - selector: "ngx-results", - templateUrl: "./results.component.html", - styleUrls: ["./results.component.scss"], -}) -export class ResultsComponent implements OnInit { - scenarios: Scenario[]; - selectedScenarioId?: number; - selectedScenario?: Scenario; - selectedSimulationId: string; - constructor(private comService: ComService) {} - - ngOnInit(): void {} - getSelectedScenario(): Scenario { - return this.selectedScenario; - } - selectScenario(scenarioId: number) { - this.selectedScenarioId = scenarioId; - let found = false; - for (let f of this.scenarios) { - if (this.selectedScenarioId == f.id) { - this.selectedScenario = f; - this.comService.getSimulations(f.id).subscribe((next) => { - // TODO: generify to support more than 2 simulations - // this.simulations = next; - // this.baselineSimulation = this.getBaselineSimulation(); - // this.proposalSimulation = this.getProposalSimulation(); - }); - console.log("found selected scenario:", this.selectedScenario); - found = true; - } - } - if (!found) - console.error("could not find selected scenario with ID ", scenarioId); - } - setSelectedSimulation(e: string) { - this.selectedSimulationId = e - } -} diff --git a/src/app/pages/simulation-wizard-copied/scenarios/scenarios.component.html b/src/app/pages/simulation-wizard-copied/scenarios/scenarios.component.html deleted file mode 100644 index d598d4ac5ab3434955ee82bea4fa61952c9ce02f..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/scenarios/scenarios.component.html +++ /dev/null @@ -1,118 +0,0 @@ -<div class="selected-scenario-box"> - <div - class="header" - *ngIf="scenarios" - (click)=" - selectScenarioBoxState = - selectScenarioBoxState == 'collapsed' ? 'expanded' : 'collapsed' - " - > - <h4>{{ selectedScenario.name }}</h4> - <p>{{ selectedScenario.description }}</p> - <nb-icon - icon="chevron-down-outline" - [@expansionIndicator]="selectScenarioBoxState" - ></nb-icon> - </div> - <div class="body" [@accordionItemBody]="selectScenarioBoxState"> - <nb-list> - <nb-list-item - *ngFor="let scenario of scenarios; index as i" - (click)="handleSelectScenarioClick(i)" - > - <p>{{ scenario.name }}</p> - <nb-icon - *ngIf="i == selectedScenarioIndex" - icon="checkmark-outline" - ></nb-icon> - </nb-list-item> - </nb-list> - </div> -</div> - -<h4>Simulations</h4> - -<nb-accordion> - <nb-accordion-item *ngFor="let simulation of simulations; index as i"> - <nb-accordion-item-header> - {{ simulation.name }} - <nb-icon - [icon]=" - simulation.status == 'running' - ? 'loader-outline' - : simulation.status == 'error' - ? 'close-outline' - : simulation.status == 'created' - ? '' - : 'checkmark-circle-2-outline' - " - [status]=" - simulation.status == 'error' - ? 'danger' - : simulation.status == 'running' - ? '' - : 'success' - " - [ngClass]="{ 'icon-spin': simulation.status == 'running' }" - class="icon" - > - </nb-icon> - <span - class="subtitle-2 text-hint" - [@socketStatusAnimation]="simulation.animationState" - (@socketStatusAnimation.done)="onAnimationEventDone($event, i)" - (@socketStatusAnimation.start)="onAnimationEventStart($event, i)" - ></span> - </nb-accordion-item-header> - <nb-accordion-item-body> - <button nbButton (click)="runSimulationClickHandler(simulation)"> - Run - </button> - <nb-icon - *ngIf="simulation.status == 'running'" - icon="checkmark-outline" - ></nb-icon> - </nb-accordion-item-body> - </nb-accordion-item> - <nb-accordion-item class="create-scenario-form"> - <nb-accordion-item-header>Create new simulation</nb-accordion-item-header> - <nb-accordion-item-body> - <form [formGroup]="scenarioForm" (ngSubmit)="onSubmit()"> - <div class="create-scenario-inputs"> - <input - type="text" - nbInput - formControlName="name" - placeholder="Simulation name" - [status]="checkValid(name) ? 'danger' : 'basic'" - nbTooltip="Name is required" - [nbTooltipTrigger]="$any(checkValid(name) ? 'hint' : 'noop')" - /> - <input - type="text" - nbInput - formControlName="description" - placeholder="Scenario description" - /> - <nb-select - formControlName="networkId" - placeholder="Network" - appearance="filled" - > - <nb-option *ngFor="let network of networks" [value]="network.id">{{ - network.name - }}</nb-option> - </nb-select> - <button - type="submit" - [disabled]="!scenarioForm.valid" - nbButton - status="success" - > - Submit - </button> - </div> - </form> - </nb-accordion-item-body> - </nb-accordion-item> -</nb-accordion> diff --git a/src/app/pages/simulation-wizard-copied/scenarios/scenarios.component.scss b/src/app/pages/simulation-wizard-copied/scenarios/scenarios.component.scss deleted file mode 100644 index d9521352f52545216c91e8343b4cf35ff12fb60d..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/scenarios/scenarios.component.scss +++ /dev/null @@ -1,99 +0,0 @@ -@import "../../../@theme/styles/themes.scss"; -@include nb-install-component() { - /* .selected-scenario-box { - nb-accordion-item-header { - padding: nb-theme(card-padding); - } - div { - display: flex; - align-items: center; - gap: 1rem; - } - div p { - margin: 0; - } - //Need updating - div nb-icon { - font-size: 1.875rem; - } - } */ - - .selected-scenario-box { - box-shadow: nb-theme(accordion-shadow); - border-radius: nb-theme(accordion-border-radius); - background-color: nb-theme(accordion-item-background-color); - margin-bottom: nb-theme(card-margin-bottom); - cursor: pointer; - @include nb-headings(); - - .header { - padding: nb-theme(accordion-padding); - display: flex; - align-items: center; - gap: 1rem; - - p { - margin: 0; - } - - nb-icon { - margin-left: auto; - } - } - - .body { - nb-list-item { - padding: nb-theme(list-item-padding) nb-theme(accordion-padding); //Might not be the best idea - display: flex; - justify-content: space-between; - - p { - color: nb-theme(accordion-item-text-color); - font-family: nb-theme(accordion-header-text-font-family); - font-size: nb-theme(accordion-header-text-font-size); - font-weight: nb-theme(accordion-header-text-font-weight); - line-height: nb-theme(accordion-header-text-line-height); - margin: 0; - } - } - } - - .body-collapsed { - display: none; - } - } - - .create-scenario-form { - .create-scenario-inputs { - display: flex; - flex-direction: column; - padding: 1em; - gap: 1em; - max-width: 20rem; - } - } - - .icon { - margin-left: 0.5em; - margin-right: 0.3em; - $size: 1.2em; - height: $size; - width: $size; - } - - .icon-spin { - animation-name: spin; - animation-duration: 2000ms; - animation-iteration-count: infinite; - animation-timing-function: linear; - } - @keyframes spin { - from { - transform:rotate(0deg); - } - to { - transform:rotate(360deg); - } - } - -} diff --git a/src/app/pages/simulation-wizard-copied/scenarios/scenarios.component.ts b/src/app/pages/simulation-wizard-copied/scenarios/scenarios.component.ts deleted file mode 100644 index f1c302dd8a21e95772abf1c0a33f60267597c598..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/scenarios/scenarios.component.ts +++ /dev/null @@ -1,201 +0,0 @@ -import { - animate, - state, - style, - transition, - trigger, - AnimationEvent, -} from "@angular/animations"; -import { Component, OnInit } from "@angular/core"; -import { AbstractControl, FormBuilder, Validators } from "@angular/forms"; -import { RxStompService } from "@stomp/ng2-stompjs"; -import { socketStatusAnimation } from "../utils/animations/socket-status.animation"; -import { Network } from "../utils/data/network"; -import { Scenario } from "../utils/data/scenario"; -import { Simulation } from "../utils/data/simulation"; -import { CityService } from "../utils/services/city.service"; -import { ScenarioService } from "../utils/services/scenario.service"; -import { SimulationService } from "../utils/services/simulation.service"; - -@Component({ - selector: "ngx-scenarios", - templateUrl: "./scenarios.component.html", - styleUrls: ["./scenarios.component.scss"], - animations: [ - trigger("expansionIndicator", [ - state( - "expanded", - style({ - transform: "rotate(180deg)", - }) - ), - transition("collapsed => expanded", animate("100ms ease-in")), - transition("expanded => collapsed", animate("100ms ease-out")), - ]), - trigger("accordionItemBody", [ - state( - "collapsed", - style({ - overflow: "hidden", - visibility: "hidden", - height: 0, - }) - ), - state( - "expanded", - style({ - overflow: "hidden", - visibility: "visible", - }) - ), - transition("collapsed => expanded", animate("100ms ease-in")), - transition("expanded => collapsed", animate("100ms ease-out")), - ]), - socketStatusAnimation, - ], -}) -export class ScenariosComponent implements OnInit { - scenarioForm = this.fb.group({ - name: ["", Validators.required], - description: [""], - networkId: ["", Validators.required], - }); - - scenarios: Scenario[]; - simulations: Simulation[]; - networks: Network[]; - - selectedScenarioIndex = 0; - - constructor( - private cityService: CityService, - private scenarioService: ScenarioService, - private simulationService: SimulationService, - private fb: FormBuilder, - private rxStompService: RxStompService - ) {} - - ngOnInit() { - this.cityService.getSelectedCity().subscribe((city) => { - this.cityService.getCityScenarios(city.cityId).subscribe((scenarios) => { - this.scenarios = scenarios; - console.log( - "%c scenarios : ", - "background: cornflowerblue; font-weight: bold; color: black;", - this.scenarios - ); - if (this.scenarios.length > 0) this.getSimulations(); - }); - - this.cityService - .getCityNetworks(city.cityId) - .subscribe((networks) => (this.networks = networks)); - }); - - this.rxStompService - .watch("/topic/simulationRunStatus") - .subscribe((updatedSimulationFrame) => { - let updatedSimulation = JSON.parse(updatedSimulationFrame.body); - let index = this.simulations.findIndex( - (simulation) => simulation.id == updatedSimulation.id - ); - if (index == -1) { - this.simulations.push(Simulation.deserialize(updatedSimulation)); - } else { - this.simulations[index] = Simulation.deserialize(updatedSimulation); - this.simulations[index].statusWSMessage = - updatedSimulationFrame.headers.statusWSMessage; - this.simulations[index].animationState = - this.simulations[index].animationState == "hidden" - ? "show" - : "replaceHide"; - } - }); - } - - getSimulations() { - this.scenarioService - .getScenarioSimulations(this.selectedScenario.id) - .subscribe((simulations) => (this.simulations = simulations)); - } - - handleSelectScenarioClick(i: number) { - this.selectedScenarioIndex = i; - this.getSimulations(); - } - - onSubmit() { - let simulationNew = Simulation.deserialize(this.scenarioForm.value); - simulationNew.scenarioId = this.selectedScenario.id; - this.simulationService - .createSimulation(simulationNew) - .subscribe((simulation) => this.simulations.push(simulation)); - } - - runSimulationClickHandler(simulation: Simulation) { - this.simulationService.runSimulation(simulation).subscribe((simulation) => { - let index = this.simulations.findIndex( - (simulationOld) => simulationOld.id == simulation.id - ); - this.simulations[index] = simulation; - }); - } - - onAnimationEventDone(event: AnimationEvent, index: number) { - if ( - event.toState == "show" && - this.simulations[index].animationState == "show" - ) - this.simulations[index].animationState = "shown"; - else if ( - event.toState == "shown" && - this.simulations[index].animationState == "shown" - ) - this.simulations[index].animationState = "hide"; - else if ( - event.toState == "hide" && - this.simulations[index].animationState == "hide" - ) - this.simulations[index].animationState = "hidden"; - else if ( - event.toState == "replaceHide" && - this.simulations[index].animationState == "replaceHide" - ) - this.simulations[index].animationState = "replaceShow"; - else if ( - event.toState == "replaceShow" && - this.simulations[index].animationState == "replaceShow" - ) - this.simulations[index].animationState = "shown"; - } - - onAnimationEventStart(event: AnimationEvent, index: number) { - if (event.toState == "show" || event.toState == "replaceShow") { - (event.element as HTMLElement).innerHTML = - this.simulations[index].statusWSMessage; - } - } - - get selectedScenario() { - return this.scenarios[this.selectedScenarioIndex]; - } - - get name() { - return this.scenarioForm.get("name"); - } - - get description() { - return this.scenarioForm.get("description"); - } - - get networkId() { - return this.scenarioForm.get("networkId"); - } - - checkValid(control: AbstractControl) { - return control.invalid && (control.dirty || control.touched); - } - - // Might move to separate component - selectScenarioBoxState = "collapsed"; -} diff --git a/src/app/pages/simulation-wizard-copied/simulation-creation/simulation-creation.component.html b/src/app/pages/simulation-wizard-copied/simulation-creation/simulation-creation.component.html deleted file mode 100644 index 53bff9ac7b71ca3dba10adf8351b427032766e58..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/simulation-creation/simulation-creation.component.html +++ /dev/null @@ -1,53 +0,0 @@ -<section id="simulation-creation-container"> - <nb-card> - <nb-card-header> Add New Simulation </nb-card-header> - <nb-card-body> - <form [formGroup]="addSimulationForm" (ngSubmit)="addSimulationSubmit()"> - <input - type="text" - nbInput - formControlName="name" - placeholder="Simulation name" - name="simulationName" - [status]="checkValid(name) ? 'danger' : 'basic'" - nbTooltip="Name is required" - [nbTooltipTrigger]="$any(checkValid(name) ? 'hint' : 'noop')" - /> - <input - type="text" - nbInput - formControlName="description" - placeholder="Simulation description" - name="simulationDescription" - /> - <nb-select - formControlName="selectedScenario" - (ngModelChange)="onSelectScenarioChange($event)" - [(selected)]="selectedScenario" - > - <nb-option *ngFor="let scenario of scenarios" [value]="scenario">{{ - scenario.name - }}</nb-option> - </nb-select> - <nb-select - formControlName="selectedNetwork" - [(selected)]="selectedNetwork" - > - <nb-option *ngFor="let network of networks" [value]="network">{{ - network.name - }}</nb-option> - </nb-select> - <button - nbButton - type="submit" - [disabled]="!addSimulationForm.get('name').value" - status="primary" - style="margin-top: auto" - > - confirm - </button> - <button nbButton status="danger" (click)="onDiscard()">discard</button> - </form> - </nb-card-body> - </nb-card> -</section> diff --git a/src/app/pages/simulation-wizard-copied/simulation-creation/simulation-creation.component.scss b/src/app/pages/simulation-wizard-copied/simulation-creation/simulation-creation.component.scss deleted file mode 100644 index 8e52339fb277873f62d4f6b19f13e7141d1a287a..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/simulation-creation/simulation-creation.component.scss +++ /dev/null @@ -1,13 +0,0 @@ -#simulation-creation-container { - padding: 1.25rem 2rem; - form { - display: flex; - height: 28em; - justify-content: center; - flex-basis: 40%; - display: flex; - flex-direction: column; - padding: 1em; - gap: 1em; - } -} diff --git a/src/app/pages/simulation-wizard-copied/simulation-creation/simulation-creation.component.spec.ts b/src/app/pages/simulation-wizard-copied/simulation-creation/simulation-creation.component.spec.ts deleted file mode 100644 index 8543138ef5b2d52e704cc92fbad2830bcbcdd03e..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/simulation-creation/simulation-creation.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { SimulationCreationComponent } from './simulation-creation.component'; - -describe('SimulationCreationComponent', () => { - let component: SimulationCreationComponent; - let fixture: ComponentFixture<SimulationCreationComponent>; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ SimulationCreationComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(SimulationCreationComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/pages/simulation-wizard-copied/simulation-creation/simulation-creation.component.ts b/src/app/pages/simulation-wizard-copied/simulation-creation/simulation-creation.component.ts deleted file mode 100644 index 610534e83a220064e9d09cbab54381b1595e0aa6..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/simulation-creation/simulation-creation.component.ts +++ /dev/null @@ -1,212 +0,0 @@ -import { AnimationEvent } from "@angular/animations"; -import { Component, OnInit } from "@angular/core"; -import { AbstractControl, FormBuilder, Validators } from "@angular/forms"; -import { RxStompService } from "@stomp/ng2-stompjs"; -import { socketStatusAnimation } from "../utils/animations/socket-status.animation"; -import { City } from "../utils/data/city"; -import { Network } from "../utils/data/network"; -import { CityService } from "../utils/services/city.service"; -import { NetworkService } from "../utils/services/network.service"; -import { ScenarioService } from "../utils/services/scenario.service"; -import { SimulationService } from "../utils/services/simulation.service"; -import { Scenario } from "../utils/data/scenario"; -import { Simulation } from "../utils/data/simulation"; -import { NbToastrService, NbDialogRef } from "@nebular/theme"; - -@Component({ - selector: "ngx-simulation-creation", - templateUrl: "./simulation-creation.component.html", - styleUrls: ["./simulation-creation.component.scss"], - animations: [socketStatusAnimation], -}) -export class SimulationCreationComponent implements OnInit { - networks: Network[] = []; - city: City; - scenarios: Scenario[] = []; - simulations: Simulation[] = []; - addSimulationForm = this.fb.group({ - name: ["Sample name", Validators.required], - description: [""], - selectedScenario: { - value: undefined, - disabled: false, - }, - selectedNetwork: { - value: undefined, - disabled: false, - }, - }); - selectedScenario; - selectedNetwork; - - constructor( - private networkService: NetworkService, - private cityService: CityService, - private fb: FormBuilder, - private scenarioService: ScenarioService, - private simulationService: SimulationService, - private rxStompService: RxStompService, - private toastrService: NbToastrService, - protected dialogRef: NbDialogRef<any> - ) {} - - ngOnInit(): void { - this.cityService.getSelectedCity().subscribe((city) => { - this.city = city; - }); - - this.rxStompService - .watch("/topic/networkProcessingStatus") - .subscribe((updatedNetworkFrame) => { - let updatedNetwork = JSON.parse(updatedNetworkFrame.body); - let index = this.networks.findIndex( - (network) => network.id == updatedNetwork.id - ); - if (index == -1) { - this.networks.push(Network.deserialize(updatedNetwork)); - } else { - this.networks[index] = Network.deserialize(updatedNetwork); - this.networks[index].conversionWSMessage = - updatedNetworkFrame.headers.conversionWSMessage; - this.networks[index].animationState = - this.networks[index].animationState == "hidden" - ? "show" - : "replaceHide"; - } - }); - - this.scenarioService.getScenarios().subscribe( - (data) => { - this.scenarios = data; - this.selectedScenario = data[0]; - }, - (error) => { - this.toastrService.show( - `${error["message"]}`, - `${error["error"]["error"]}`, - { - status: "danger", - } - ); - } - ); - - this.networkService.getNetworks().subscribe( - (data) => { - this.networks = data; - this.selectedNetwork = data[0]; - }, - (error) => { - console.log( - "🚀 ~ file: simulation-creation.component.ts ~ line 105 ~ SimulationCreationComponent ~ this.networkService.getNetworks ~ error", - error - ); - this.toastrService.show( - `${error["message"]}`, - `${error["error"]["error"]}`, - { - status: "danger", - } - ); - } - ); - } - - addSimulationSubmit() { - let sim = new Simulation(); - sim.name = this.addSimulationForm.controls.name.value; - sim.description = this.addSimulationForm.controls.description.value; - sim.networkId = this.selectedScenario.id; - sim.scenarioId = this.selectedNetwork.id; - this.simulationService.createSimulation(sim).subscribe( - (res) => { - this.toastrService.show(`${res["message"]}`, "Success", { - status: "success", - }); - }, - (error: object) => { - this.toastrService.show( - `${error["message"]}`, - `${error["error"]["error"]}`, - { - status: "danger", - } - ); - } - ); - } - - onSelectNetwork(id: number) { - this.networkService.getNetwork(id).subscribe((res) => { - console.log( - "🚀 ~ file: simulation-creation.component.ts ~ line 155 ~ SimulationCreationComponent ~ this.networkService.getNetwork ~ res", - res.name, - res.id, - res.description, - res.doneOsmProcessing, - res.doneMATSimProcessing, - res.conversionError - ); - }); - } - - onSelectScenarioChange(evt) { - this.addSimulationForm.controls.selectedNetwork.enable(); - } - - onAnimationEventDone(event: AnimationEvent, index: number) { - if ( - event.toState == "show" && - this.networks[index].animationState == "show" - ) - this.networks[index].animationState = "shown"; - else if ( - event.toState == "shown" && - this.networks[index].animationState == "shown" - ) - this.networks[index].animationState = "hide"; - else if ( - event.toState == "hide" && - this.networks[index].animationState == "hide" - ) - this.networks[index].animationState = "hidden"; - else if ( - event.toState == "replaceHide" && - this.networks[index].animationState == "replaceHide" - ) - this.networks[index].animationState = "replaceShow"; - else if ( - event.toState == "replaceShow" && - this.networks[index].animationState == "replaceShow" - ) - this.networks[index].animationState = "shown"; - } - - onAnimationEventStart(event: AnimationEvent, index: number) { - if (event.toState == "show" || event.toState == "replaceShow") { - (event.element as HTMLElement).innerHTML = - this.networks[index].conversionWSMessage; - } - } - - // Boilerplate code for easier form elements access - get name() { - return this.addSimulationForm.get("name"); - } - - get description() { - return this.addSimulationForm.get("description"); - } - - get bounds() { - return this.addSimulationForm.get("bounds"); - } - - checkValid(control: AbstractControl) { - return control.invalid && (control.dirty || control.touched); - } - - onDiscard() { - this.dialogRef.close(); - } -} diff --git a/src/app/pages/simulation-wizard-copied/simulation-wizard-routing.module.ts b/src/app/pages/simulation-wizard-copied/simulation-wizard-routing.module.ts deleted file mode 100644 index 77630ce741b6d872d3084c83af2f73425713cd4d..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/simulation-wizard-routing.module.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { NgModule } from "@angular/core"; -import { RouterModule, Routes } from "@angular/router"; -import { NetworkCreationComponent } from "./network-creation/network-creation.component"; -import { ResultsComponent } from "./results/results.component"; -import { ScenariosComponent } from "./scenarios/scenarios.component"; -import { OurSpiderChartComponent } from "./our-spider-chart/our-spider-chart.component"; -import { MlModuleComponent } from "./ml-module/ml-module.component"; -import { RecommenderPageComponent } from "./recommender-page/recommender-page.component"; -import { EditNetworkMapComponent } from "./edit-network-map/edit-network-map.component"; - -const routes: Routes = [ - { - path: "edit-network-map", - component: EditNetworkMapComponent, - }, - { - path: "ml-module", - component: MlModuleComponent, - }, - { - path: "networks", - component: NetworkCreationComponent, - }, - { - path: "scenarios", - component: ScenariosComponent, - }, - { - path: "simulations", - component: ResultsComponent, - }, - { - path: "spider", - component: OurSpiderChartComponent, - }, - { - path: "recommender", - component: RecommenderPageComponent, - }, -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule], -}) -export class SimulationWizardRoutingModule {} diff --git a/src/app/pages/simulation-wizard-copied/simulation-wizard.module.ts b/src/app/pages/simulation-wizard-copied/simulation-wizard.module.ts deleted file mode 100644 index 360e4344a7642dd9dc3f83b04066658b49a173a2..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/simulation-wizard.module.ts +++ /dev/null @@ -1,115 +0,0 @@ -import { HttpClientModule } from "@angular/common/http"; -import { NgModule } from "@angular/core"; -import { FormsModule, ReactiveFormsModule } from "@angular/forms"; -import { LeafletModule } from "@asymmetrik/ngx-leaflet"; -import { - NbAccordionModule, - NbActionsModule, - NbButtonGroupModule, - NbButtonModule, - NbCardModule, - NbCheckboxModule, - NbIconModule, - NbInputModule, - NbListModule, - NbRadioModule, - NbSelectModule, - NbTableModule, - NbTabsetModule, - NbTooltipModule, - NbToggleModule, - NbToastrModule, - NbDatepickerModule, - NbProgressBarModule, - NbDialogModule, - NbSpinnerComponent, - NbSpinnerModule, -} from "@nebular/theme"; -import { - InjectableRxStompConfig, - RxStompService, - rxStompServiceFactory, -} from "@stomp/ng2-stompjs"; -import { ChartModule } from "angular2-chartjs"; -import { NgxEchartsModule } from "ngx-echarts"; -import { environment } from "../../../environments/environment"; -import { ThemeModule } from "../../@theme/theme.module"; -import { ChartsModule } from "../charts/charts.module"; -import { NetworkCreationComponent } from "./network-creation/network-creation.component"; -import { ScenariosComponent } from "./scenarios/scenarios.component"; -import { SimulationWizardRoutingModule } from "./simulation-wizard-routing.module"; -import { ViewContainerDirective } from "./utils/directives/view-container.directive"; -import SelectArea from "leaflet-area-select"; -import { ResultsComponent } from "./results/results.component"; -import { ResultsMapComponent } from "./results-map/results-map.component"; -SelectArea; // Dirty trick to load leaflet area select -import { OurSpiderChartComponent } from "./our-spider-chart/our-spider-chart.component"; -import { SimulationCreationComponent } from "./simulation-creation/simulation-creation.component"; -import { ExistingSimulationsComponent } from "./existing-simulations/existing-simulations.component"; -import { MlModuleComponent } from "./ml-module/ml-module.component"; -import { RecommenderPageComponent } from "./recommender-page/recommender-page.component"; -import { EditNetworkMapComponent } from "./edit-network-map/edit-network-map.component"; - -const rxStompConfig: InjectableRxStompConfig = { - brokerURL: environment.baseStompURL, - debug: (msg) => environment.showWebSocketDebug && console.debug(msg), -}; - -@NgModule({ - imports: [ - HttpClientModule, - ThemeModule, - NbCardModule, - NbActionsModule, - NbAccordionModule, - NbListModule, - NbTabsetModule, - NbTableModule, - ChartsModule, - LeafletModule, - NbButtonGroupModule, - NbButtonModule, - FormsModule, - NbInputModule, - ReactiveFormsModule, - NbCheckboxModule, - NbRadioModule, - ChartModule, - NgxEchartsModule, - NbSelectModule, - NbTooltipModule, - NbIconModule, - SimulationWizardRoutingModule, - NbToggleModule, - NbToastrModule, - NbDatepickerModule, - NbProgressBarModule, - NbDialogModule.forRoot(), - NbSpinnerModule, - ], - declarations: [ - NetworkCreationComponent, - ViewContainerDirective, - ScenariosComponent, - ResultsComponent, - ResultsMapComponent, - OurSpiderChartComponent, - SimulationCreationComponent, - ExistingSimulationsComponent, - MlModuleComponent, - RecommenderPageComponent, - EditNetworkMapComponent, - ], - providers: [ - { - provide: InjectableRxStompConfig, - useValue: rxStompConfig, - }, - { - provide: RxStompService, - useFactory: rxStompServiceFactory, - deps: [InjectableRxStompConfig], - }, - ], -}) -export class SimulationWizardModule {} diff --git a/src/app/pages/simulation-wizard-copied/typings.d.ts b/src/app/pages/simulation-wizard-copied/typings.d.ts deleted file mode 100644 index e5fad61de8a39a5092d383b35e6dfb5af2191b9f..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/typings.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Network } from "./utils/data/network"; - -export interface NetworkForm extends Network { - bounds: BoundsTuple; -} -export type cityId = "bilbao" | "amsterdam" | "helsinki" | "messina"; -export type BoundsTuple = [west: number, south: number, east: number, north: number]; - -interface LeafletAreaSelectedEvent extends L.LeafletEvent { - bounds: L.LatLngBounds; -} diff --git a/src/app/pages/simulation-wizard-copied/utils/animations/socket-status.animation.ts b/src/app/pages/simulation-wizard-copied/utils/animations/socket-status.animation.ts deleted file mode 100644 index 784eca3a45ea2251ad16063a8209a7952dc78c33..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/utils/animations/socket-status.animation.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { trigger, state, style, transition, animate } from "@angular/animations"; - -export let socketStatusAnimation = trigger('socketStatusAnimation', [ - state("hidden", style({ opacity: 0 })), - state("shown", style({ opacity: 1 })), - state("hide", style({ opacity: 0 })), - state("show", style({ opacity: 1 })), - state("replaceShow", style({ opacity: 1 })), - state("replaceHide", style({ opacity: 0 })), - transition("hidden => show", animate("0.5s")), - transition("* => shown", animate("2s")), - transition("shown => hide", animate("0.5s")), - transition("* => replaceHide", animate("0.2s")), - transition("* => replaceShow", animate("0.2s")), - ]) \ No newline at end of file diff --git a/src/app/pages/simulation-wizard-copied/utils/data/city.ts b/src/app/pages/simulation-wizard-copied/utils/data/city.ts deleted file mode 100644 index 0563e48dea047918be84aa6abffbb3e6d647a6bc..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/utils/data/city.ts +++ /dev/null @@ -1,11 +0,0 @@ -export class City { - cityId: string; - displayName: string; - coordinates: {lat: number, lon: number}; - - static deserialize(input: any): City { - let city = new City() - Object.assign(city, input); - return city; - } -} diff --git a/src/app/pages/simulation-wizard-copied/utils/data/map-colors.ts b/src/app/pages/simulation-wizard-copied/utils/data/map-colors.ts deleted file mode 100644 index ee403d237afb019a38e7a8c2b509bc8bfd6b253e..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/utils/data/map-colors.ts +++ /dev/null @@ -1,100 +0,0 @@ -import { brink_values } from "../../results-map/brink_values"; -// sunset N11 scheme: 35b499; 4a7ab7; 6da5cc; 98cae0; c2e3ee; eaebcc; fed98b; fdb366; f57d4a; dc3d2d; a50026 -const color_0 = "#a50026"; -const color_1 = "#f57d4a"; -const color_2 = "#fed98b"; -const color_3 = "#c2e3ee"; -const color_4 = "#6da5cc"; -const color_5 = "#35b499"; - -export function getColor(properties: any, pro: any): string { - let value = undefined; - for (let key in properties) { - if (key == pro) { - value = properties[key]; - } - } - if (value == undefined) return "cyan"; - - if (pro == "carCount" || pro == "vehicleCount") { - return value > brink_values["brink_carCount"][4] - ? color_0 - : value > brink_values["brink_carCount"][3] - ? color_1 - : value > brink_values["brink_carCount"][2] - ? color_2 - : value > brink_values["brink_carCount"][1] - ? color_3 - : color_4; - } else if ( - pro == "PM" || - pro == "NOx" || - pro == "NO2" || - pro == "HC" || - pro == "CO2_TOTAL" || - pro == "CO2_rep" || - pro == "CO2" || - pro == "CO" || - pro == "dailyInternalBikeTravels" || - pro == "pedestrianTravelTime" - ) { - return value > brink_values["brink_" + pro][5] - ? color_0 - : value > brink_values["brink_" + pro][4] - ? color_1 - : value > brink_values["brink_" + pro][3] - ? color_2 - : value > brink_values["brink_" + pro][2] - ? color_3 - : value > brink_values["brink_" + pro][1] - ? color_4 - : color_5; - } else if ( - pro == "link_id" || - pro == "modes" || - pro == "internal_travel_by_mode" - ) { - return "cyan"; - } else { - return value > 256 - ? color_0 - : value > 64 - ? color_1 - : value > 16 - ? color_2 - : value > 4 - ? color_3 - : color_4; - } -} - -export function getColorCapacity(value: number): string { - return value > brink_values["brink_capacity"][5] - ? color_5 - : value > brink_values["brink_capacity"][4] - ? color_4 - : value > brink_values["brink_capacity"][3] - ? color_3 - : value > brink_values["brink_capacity"][2] - ? color_2 - : value > brink_values["brink_capacity"][1] - ? color_1 - : color_0; -} - -export function getColorUniversal( - d: number, - current_brink_values: object -): string { - return current_brink_values[d] > current_brink_values[4] - ? color_0 - : current_brink_values[d] > current_brink_values[3] - ? color_1 - : current_brink_values[d] > current_brink_values[2] - ? color_2 - : current_brink_values[d] > current_brink_values[1] - ? color_3 - : current_brink_values[d] > current_brink_values[0] - ? color_4 - : color_5; -} diff --git a/src/app/pages/simulation-wizard-copied/utils/data/network.ts b/src/app/pages/simulation-wizard-copied/utils/data/network.ts deleted file mode 100644 index 80a9a4e529d6253ff39f945141c1623e023ba4fa..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/utils/data/network.ts +++ /dev/null @@ -1,44 +0,0 @@ -import * as L from 'leaflet'; -import { BoundsTuple, NetworkForm } from '../typings/typings'; - -export class Network { - id: number; - name: string; - description: string; - cityId: string; - bounds: BoundsTuple = [0, 0, 0, 0]; - - //Conversion status - doneOsmProcessing: boolean; - doneMATSimProcessing: boolean; - osmosisLog: string; - conversionError: string; - - //Websocket information - conversionWSMessage: string; - animationState: "hidden" | "shown" | "hide" | "show" | "replaceShow" | "replaceHide" = "hidden"; - - fromForm(formValue: NetworkForm) { - this.name = formValue.name; - this.description = formValue.description; - this.cityId = formValue.cityId; - this.bounds = formValue.bounds - return this; - } - - static deserialize(input: any): Network { - let network = new Network() - Object.assign(network, input); - return network; -} - - get westBoundary() { return this.bounds[0] } - get southBoundary() { return this.bounds[1] } - get eastBoundary() { return this.bounds[2] } - get northBoundary() { return this.bounds[3] } - - get leafletBounds() { - return L.latLngBounds(L.latLng(this.southBoundary, this.westBoundary), L.latLng(this.northBoundary, this.eastBoundary)); - } - -} \ No newline at end of file diff --git a/src/app/pages/simulation-wizard-copied/utils/data/scenario.ts b/src/app/pages/simulation-wizard-copied/utils/data/scenario.ts deleted file mode 100644 index 3a50e26f4ea63e2b29423dd59852f42e8d40b056..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/utils/data/scenario.ts +++ /dev/null @@ -1,11 +0,0 @@ -export class Scenario { - id: number; - name: string; - description: string; - - static deserialize(input: any): Scenario { - let scenario = new Scenario() - Object.assign(scenario, input); - return scenario; - } -} \ No newline at end of file diff --git a/src/app/pages/simulation-wizard-copied/utils/data/simulation.ts b/src/app/pages/simulation-wizard-copied/utils/data/simulation.ts deleted file mode 100644 index 5d05f099ba000bc84ac24d3555d7d2533bc9d7cb..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/utils/data/simulation.ts +++ /dev/null @@ -1,17 +0,0 @@ -export class Simulation { - id: number; - name: string; - description: string; - scenarioId: number; - networkId: number; - status: string; - - animationState: string; - statusWSMessage: string; - - static deserialize(input: any): Simulation { - let simulation = new Simulation() - Object.assign(simulation, input); - return simulation; - } -} \ No newline at end of file diff --git a/src/app/pages/simulation-wizard-copied/utils/directives/view-container.directive.ts b/src/app/pages/simulation-wizard-copied/utils/directives/view-container.directive.ts deleted file mode 100644 index d52ebb9b6bf85110ec812e9ef6e3c045756af07a..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/utils/directives/view-container.directive.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Directive, ViewContainerRef } from '@angular/core'; - -//Allows access to ViewContainerRef from the component -@Directive({ - selector: '[viewContainer]', - exportAs: 'viewContainer' -}) -export class ViewContainerDirective { - - constructor(public container: ViewContainerRef) { } - -} diff --git a/src/app/pages/simulation-wizard-copied/utils/services/city.service.ts b/src/app/pages/simulation-wizard-copied/utils/services/city.service.ts deleted file mode 100644 index 34ee24359e8c8945b00d4e9bdfbbfe6c27a99687..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/utils/services/city.service.ts +++ /dev/null @@ -1,80 +0,0 @@ -import { HttpClient } from "@angular/common/http"; -import { Injectable } from "@angular/core"; -import { BehaviorSubject, Observable, of } from "rxjs"; -import { map, tap } from "rxjs/operators"; -import { environment } from "../../../../../environments/environment"; -import { City } from "../data/city"; -import { Network } from "../data/network"; -import { Scenario } from "../data/scenario"; -import { tapDebugApi } from "./tap-debug"; - -@Injectable({ providedIn: "root" }) -export class CityService { - private url = `${environment.baseAPIUrl}/traffic-simulation/city`; - private selectedCityIndex: number; - private selectedCity$ = new BehaviorSubject<City | null>(null); - cities: City[]; - - constructor(private httpClient: HttpClient) {} - - public setSelectedCity(cityId: string) { - this.selectedCityIndex = this.cities.findIndex( - (city) => city.cityId == cityId - ); - if (this.selectedCityIndex != -1) { - localStorage.setItem( - "selectedCityId", - this.cities[this.selectedCityIndex].cityId - ); - this.selectedCity$.next(this.cities[this.selectedCityIndex]); - } else { - this.selectedCity$.next(null); - } - } - - getSelectedCity(): Observable<City> { - return this.selectedCity$.asObservable(); - } - - getSelectedCityNotBehavior(): Observable<City> { - return this.httpClient.get<City>(`${this.url}/selected`).pipe( - tapDebugApi - ); - } - - getCities(): Observable<City[]> { - return this.httpClient.get<City[]>(this.url).pipe( - map<any[], City[]>((cities) => - cities.map((city) => City.deserialize(city)) - ), - tapDebugApi - ); - } - - getCityScenarios(cityId: String): Observable<Scenario[]> { - return this.httpClient - .get<Scenario[]>(`${this.url}/${cityId}/scenarios`) - .pipe( - map<any[], Scenario[]>((scenarios) => - scenarios.map((scenario) => Scenario.deserialize(scenario)) - ), - tapDebugApi - ); - } - - getCityNetworks(cityId: String): Observable<Network[]> { - return this.httpClient - .get<Network[]>(`${this.url}/${cityId}/networks`) - .pipe( - map<any, Network[]>((networks) => - networks.map((network) => Network.deserialize(network)) - ), - tapDebugApi - ); - } - - public async initialize() { - localStorage.clear(); - this.cities = await this.getCities().toPromise(); - } -} diff --git a/src/app/pages/simulation-wizard-copied/utils/services/com.service.ts b/src/app/pages/simulation-wizard-copied/utils/services/com.service.ts deleted file mode 100644 index eb731979a73c9fe605bf3adda92ad59bd003f349..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/utils/services/com.service.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { Injectable } from "@angular/core"; -import { HttpClient } from "@angular/common/http"; -import { Observable } from "rxjs"; -import { tap } from "rxjs/operators"; -import { Simulation } from "../data/simulation"; -import { environment } from "../../../../../environments/environment"; - -@Injectable({ - providedIn: "root", -}) -export class ComService { - private traffic_sim_server = `${environment.baseAPIUrl}/traffic-simulation/network`; - - constructor(private http: HttpClient) {} - - sendGetResultsVis(simId: number): Observable<any> { - const url: string = `${this.traffic_sim_server}/simulation/${simId}/results/vis-trips`; - return this.http.get(url).pipe(tap(console.debug)); - } - - // Simulation - getSimulations(scenarioId: number): Observable<Simulation[]> { - const url: string = `${this.traffic_sim_server}/scenario/simulations/${scenarioId}`; - return this.http.get<Simulation[]>(url).pipe(tap(console.debug)); - } - - runSimulation(id: number): Observable<any> { - const url: string = `${this.traffic_sim_server}/simulation/${id}/run`; - console.debug(url); - return this.http.get(url).pipe(tap(console.debug)); - } - // Subpopulation - createSubpopulation(formData: any) { - console.log(formData); - // TODO on backend - } - - getVehicles() { - const url: string = `${this.traffic_sim_server}/vehicle`; - return this.http.get(url); - } - - getHbefaCategories() { - const url: string = `${this.traffic_sim_server}/vehicle/hbefaCategories`; - return this.http.get(url); - } - - getHbefaFuels(hbefaCategory: string) { - const url: string = `${this.traffic_sim_server}/vehicle/hbefaFuels/${hbefaCategory}`; - return this.http.get(url); - } - - getHbefaSizes(hbefaCategory: string) { - const url: string = `${this.traffic_sim_server}/vehicle/hbefaSizes/${hbefaCategory}`; - return this.http.get(url); - } - - getHbefaEmissionConcepts(hbefaCategory: string) { - const url: string = `${this.traffic_sim_server}/vehicle/hbefaEmissionConcepts/${hbefaCategory}`; - return this.http.get(url); - } -} - -export class Population { - id: number; - name: string; - description?: string; -} diff --git a/src/app/pages/simulation-wizard-copied/utils/services/network.service.ts b/src/app/pages/simulation-wizard-copied/utils/services/network.service.ts deleted file mode 100644 index 7111797283dbd344efe1a005091c8b14fb03ac07..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/utils/services/network.service.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { - HttpClient, - HttpErrorResponse, -} from "@angular/common/http"; -import { Injectable } from "@angular/core"; -import { Observable, throwError } from "rxjs"; -import { map, catchError } from "rxjs/operators"; -import { environment } from "../../../../../environments/environment"; -import { Network } from "../data/network"; -import { tapDebugApi } from "./tap-debug"; - -@Injectable({ - providedIn: "root", -}) -export class NetworkService { - private baseAPIUrl = `${environment.baseAPIUrl}/traffic-simulation/network`; - - constructor(private httpClient: HttpClient) {} - - handleError(error: HttpErrorResponse) { - let errorMessage = "Some sort of error."; - if (error.error instanceof ErrorEvent) { - errorMessage = `Error: ${error.error.message}`; - } else { - errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`; - } - return throwError(errorMessage); - } - - createNetwork(network: Network) { - return this.httpClient.post(this.baseAPIUrl, network).pipe( - map((network) => Network.deserialize(network)), - tapDebugApi - ); - } - - getNetworks(): Observable<Network[]> { - return this.httpClient.get<Network[]>(this.baseAPIUrl).pipe( - map<any[], Network[]>((networks) => - networks.map((network) => Network.deserialize(network)) - ), - tapDebugApi, - catchError(this.handleError) - ); - } - - getNetwork(id: number): Observable<Network> { - return this.httpClient.get<Network>(`${this.baseAPIUrl}/${id}`).pipe( - tapDebugApi, - catchError(this.handleError) - ) - } -} diff --git a/src/app/pages/simulation-wizard-copied/utils/services/scenario.service.ts b/src/app/pages/simulation-wizard-copied/utils/services/scenario.service.ts deleted file mode 100644 index fe5c0ec419a5f6cbfb70cc481c4bcec80a90a0ed..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/utils/services/scenario.service.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { HttpClient, HttpHeaders } from "@angular/common/http"; -import { Injectable } from "@angular/core"; -import { Observable } from "rxjs"; -import { map, tap } from "rxjs/operators"; -import { environment } from "../../../../../environments/environment"; -import { Scenario } from "../data/scenario"; -import { Simulation } from "../data/simulation"; -import { tapDebugApi } from "./tap-debug"; - -@Injectable({ - providedIn: 'root', -}) -export class ScenarioService { - private baseApiUrl = `${environment.baseAPIUrl}/traffic-simulation/scenario`; - - constructor(private httpClient: HttpClient) { } - - createScenario(scenario: Scenario) { - return this.httpClient.post(this.baseApiUrl, scenario).pipe( - map(scenario => Scenario.deserialize(scenario)), - tapDebugApi - ); - } - - getScenarios(): Observable<Scenario[]> { - return this.httpClient.get<Scenario[]>(this.baseApiUrl).pipe( - map<any[], Scenario[]>(scenarios => scenarios.map(scenario => Scenario.deserialize(scenario))), - tapDebugApi - ); - } - - getScenarioSimulations(id: number): Observable<Simulation[]> { - return this.httpClient.get<Simulation[]>(`${this.baseApiUrl}/${id}/simulations`).pipe( - map<any[], Simulation[]>(simulations => simulations.map(simulation => Simulation.deserialize(simulation))), - tapDebugApi - ); - } -} \ No newline at end of file diff --git a/src/app/pages/simulation-wizard-copied/utils/services/simulation.service.ts b/src/app/pages/simulation-wizard-copied/utils/services/simulation.service.ts deleted file mode 100644 index 73e76a5e9c5a8c89717c643ea918ebd1a26c32c8..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/utils/services/simulation.service.ts +++ /dev/null @@ -1,302 +0,0 @@ -import { HttpClient } from "@angular/common/http"; -import { Injectable } from "@angular/core"; -import { Observable, throwError } from "rxjs"; -import { map, tap, catchError } from "rxjs/operators"; -import { environment } from "../../../../../environments/environment"; -import { Simulation } from "../data/simulation"; -import { tapDebugApi } from "./tap-debug"; - -@Injectable({ - providedIn: "root", -}) -export class SimulationService { - private ts_simulation_url = `${environment.baseAPIUrl}/traffic-simulation/simulation`; - private ts_url = `${environment.baseAPIUrl}/traffic-simulation`; - private storage_url = `${environment.storageAPIUrl}`; - private dssUrl = `${environment.dssUrl}`; - - constructor(private httpClient: HttpClient) {} - - createSimulation(simulation: Simulation): Observable<Simulation> { - return this.httpClient.post(this.ts_simulation_url, simulation).pipe( - map((simulation) => Simulation.deserialize(simulation)), - tapDebugApi - ); - } - - runSimulation(simulation: Simulation): Observable<Simulation> { - return this.httpClient - .get(`${this.ts_simulation_url}/${simulation.id}/run`, {}) - .pipe( - map((simulation) => Simulation.deserialize(simulation)), - tapDebugApi - ); - } - - getSimulations(city_id: string): Observable<string> { - return this.httpClient - .get(`${this.ts_url}/city/${city_id}/simulations`, {}) - .pipe( - map((simulation) => Simulation.deserialize(simulation)), - tapDebugApi - ); - } - - getSimulationsAll(): Observable<string> { - return this.httpClient.get(`${this.ts_simulation_url}`, {}).pipe( - map((simulation) => Simulation.deserialize(simulation)), - tapDebugApi - ); - } - - /* requests evaluated kpis for multiple simulations - * arrayToBeSent: array of simulation ids, e.g. [1,2] - */ - postEvaluated(arrayToBeSent: any): Observable<any> { - let formData = new FormData(); - arrayToBeSent.map((m) => { - formData.append("ids[]", m.toString()); - }); - - return this.httpClient - .post(`${this.storage_url}/storage/dss/evaluated`, formData) - .pipe(tap((res) => console.log("postEvaluated ", res))); - } - - getPreprocessData(city_id: string): Observable<any> { - return this.httpClient - .get(`${this.ts_url}/scripts/city/${city_id}/preprocess_data`, {}) - .pipe( - map((res) => { - return res; - }), - catchError((error) => { - return throwError(error); - }), - tapDebugApi - ); - } - - getGeneratePopulation(city_id: string): Observable<any> { - return this.httpClient - .get(`${this.ts_url}/scripts/city/${city_id}/generate_population`, {}) - .pipe( - map((res) => { - return res; - }), - catchError((error) => { - return throwError(error); - }), - tapDebugApi - ); - } - - postTravelDemand( - city_id: string, - name: string, - networkId: string, - simulationId: number - ): Observable<any> { - return this.httpClient - .post(`${this.ts_url}/scripts/city/${city_id}/travel_demand`, { - name: name, - networkId: networkId, - simulationId: simulationId, - }) - .pipe( - map((res) => { - return res; - }) - ); - } - - getCalculateKPIs(cityId: string, id: number): Observable<any> { - return this.httpClient - .get(`${this.dssUrl}/dss/kpis/${cityId}/${id}`, {}) - .pipe( - map((res) => { - return res; - }), - catchError((error) => { - return throwError(error); - }), - tapDebugApi - ); - } - - postRunDss( - [baselineId, compareId]: [number, number], - cityId: string - ): Observable<any> { - return this.httpClient - .post(`${this.dssUrl}/dss/kpi_eval/${cityId}`, { - baseline: baselineId, - compare: compareId, - }) - .pipe( - map((res) => { - return res; - }), - catchError((error) => { - return throwError(error); - }), - tapDebugApi - ); - } - - postCalibrationPreprocess( - dateFrom: Date, - dateTo: Date, - networkId: number - ): Observable<any> { - let formData = new FormData(); - formData.append("date_from", this.formatDateToOurSpec(dateFrom).toString()); - formData.append("date_to", this.formatDateToOurSpec(dateTo).toString()); - formData.append("network_id", networkId.toString()); - - return this.httpClient - .post(`${this.dssUrl}/dss/calibration_preprocess`, formData) - .pipe( - map((res) => { - return res; - }), - catchError((error) => { - return throwError(error); - }), - tapDebugApi - ); - } - - getNetworkFromSimulation(id: number): Observable<any> { - return this.httpClient - .get(`${this.ts_simulation_url}/${id}/network`, {}) - .pipe( - map((res) => { - return res; - }), - catchError((error) => { - return throwError(error); - }), - tapDebugApi - ); - } - - formatDateToOurSpec(date: Date): String { - return ( - date.getFullYear() + - "-" + - String(date.getMonth() + 1).padStart(2, "0") + - "-" + - String(date.getDate()).padStart(2, "0") - ); - } - - dobiVzorcek_0(): Observable<JSON> { - return this.httpClient.get(`${this.storage_url}/vzorcek-geojson-0`).pipe( - map((res) => { - return res; - }), - tapDebugApi - ); - } - - dobiVzorcek_1(): Observable<JSON> { - return this.httpClient.get(`${this.storage_url}/vzorcek-geojson-1`).pipe( - map((res) => { - return res; - }), - tapDebugApi - ); - } - - dobi_amsterdam_baseline_vehicleCount(): Observable<JSON> { - return this.httpClient - .get(`${this.storage_url}/amsterdam-baseline-vehicleCount`) - .pipe( - map((res) => { - return res; - }), - tapDebugApi - ); - } - - dobi_amsterdam22districts(): Observable<JSON> { - return this.httpClient.get(`${this.storage_url}/amsterdam22districts`).pipe( - map((res) => { - return res; - }), - tapDebugApi - ); - } - - dobi_bilbao_baseline_emission_sample(): Observable<JSON> { - return this.httpClient - .get(`${this.storage_url}/bilbao-baseline-emission-sample`) - .pipe( - map((res) => { - return res; - }), - tapDebugApi - ); - } - dobi_bilbao_scenario_emission_sample(): Observable<JSON> { - return this.httpClient - .get(`${this.storage_url}/bilbao-scenario-emission-sample`) - .pipe( - map((res) => { - return res; - }), - tapDebugApi - ); - } - dobi_helsinki_baseline_vehicleCount_sample(): Observable<JSON> { - return this.httpClient - .get(`${this.storage_url}/helsinki-baseline-vehicleCount-sample`) - .pipe( - map((res) => { - return res; - }), - tapDebugApi - ); - } - dobi_helsinki_scenario_vehicleCount_sample(): Observable<JSON> { - return this.httpClient - .get(`${this.storage_url}/helsinki-scenario-vehicleCount-sample`) - .pipe( - map((res) => { - return res; - }), - tapDebugApi - ); - } - dobi_santostefanodibriga_bus(): Observable<JSON> { - return this.httpClient - .get(`${this.storage_url}/santostefanodibriga-bus`) - .pipe( - map((res) => { - return res; - }), - tapDebugApi - ); - } - - getTravelDemandModel(networkId: string): Observable<any> { - return this.httpClient - .get(`${this.storage_url}/storage/plans/${networkId}`) - .pipe( - map((res) => { - return res; - }), - tapDebugApi - ); - } - - getGeojson(id: string): Observable<JSON> { - return this.httpClient.get(`${this.dssUrl}/dss/geojson/${id}`).pipe( - map((res) => { - return res; - }), - tapDebugApi - ); - } -} diff --git a/src/app/pages/simulation-wizard-copied/utils/services/tap-debug.ts b/src/app/pages/simulation-wizard-copied/utils/services/tap-debug.ts deleted file mode 100644 index 3ea8a76806e08dc49318cdda439c899127ad2010..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/utils/services/tap-debug.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { tap } from "rxjs/operators"; -import { environment } from "../../../../../environments/environment"; - -export const tapDebugApi = tap<any>(val => environment.showAPIDebug && console.debug(val)); -export const tapDebugWebSocket = tap<any>(val => environment.showWebSocketDebug && console.debug(val)); diff --git a/src/app/pages/simulation-wizard-copied/utils/typings/typings.d.ts b/src/app/pages/simulation-wizard-copied/utils/typings/typings.d.ts deleted file mode 100644 index 69a22fe4474dff8e56d6da04b99b700b7599ecad..0000000000000000000000000000000000000000 --- a/src/app/pages/simulation-wizard-copied/utils/typings/typings.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Network } from "../data/network"; - -export interface NetworkForm extends Network { - bounds: BoundsTuple; -} -export type cityId = "bilbao" | "amsterdam" | "helsinki" | "messina"; -export type BoundsTuple = [west: number, south: number, east: number, north: number]; - -interface LeafletAreaSelectedEvent extends L.LeafletEvent { - bounds: L.LatLngBounds; -} \ No newline at end of file