Skip to content
Snippets Groups Projects
Commit ec63f74f authored by Benguria Elguezabal, Gorka's avatar Benguria Elguezabal, Gorka
Browse files

first try to update wp4 ui module

parent 67a93fca
No related branches found
No related tags found
No related merge requests found
Showing
with 1686 additions and 671 deletions
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MapSetupComponent } from './map-setup.component';
import { ResultsMapComponent } from './results-map.component';
describe('MapSetupComponent', () => {
let component: MapSetupComponent;
let fixture: ComponentFixture<MapSetupComponent>;
describe('ResultsMapComponent', () => {
let component: ResultsMapComponent;
let fixture: ComponentFixture<ResultsMapComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ MapSetupComponent ],
declarations: [ ResultsMapComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(MapSetupComponent);
fixture = TestBed.createComponent(ResultsMapComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
......
This diff is collapsed.
<p>results works!</p>
<section style="position: relative">
<span>City: &nbsp;&nbsp;</span>
<nb-select
placeholder="Select City"
style="margin-bottom: 16px; min-width: 240px"
appearance="filled"
[(selected)]="selectedCity">
<nb-option value="amsterdam">Amsterdam</nb-option>
<nb-option value="bilbao">Bilbao</nb-option>
<nb-option value="helsinki">Helsinki</nb-option>
<nb-option value="messina">Messina</nb-option>
</nb-select>
<ngx-existing-simulations [selectedCity]="selectedCity">
</ngx-existing-simulations>
<ngx-results-map
[selectedScenario]="selectedScenario"
[cityName]="'selectedCity'">
</ngx-results-map>
<ngx-our-spider-chart>
</ngx-our-spider-chart>
</section>
......@@ -8,7 +8,7 @@ describe('ResultsComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ResultsComponent ],
declarations: [ ResultsComponent ]
})
.compileComponents();
});
......
import { Component, OnInit } from '@angular/core';
import { Component, OnInit } from "@angular/core";
import { ComService } from "../utils/services/com.service";
import { Scenario } from "../utils/data/scenario";
import { SimulationService } from "../utils/services/simulation.service";
@Component({
selector: 'ngx-results',
templateUrl: './results.component.html',
styleUrls: ['./results.component.scss'],
selector: "ngx-results",
templateUrl: "./results.component.html",
styleUrls: ["./results.component.scss"],
})
export class ResultsComponent implements OnInit {
scenarios: Scenario[];
selectedScenarioId?: number;
selectedScenario?: Scenario;
selectedCity: string = "bilbao";
constructor(
private comService: ComService,
private simulationService: SimulationService
) {}
constructor() { }
ngOnInit(): void {
console.log('init results!');
ngOnInit(): void {}
getSelectedScenario(): Scenario {
console.log("selected scenario:", this.selectedScenarioId);
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);
}
}
<div class="row">
<div class="col-md-12">
<nb-list *ngFor="let scenario of scenarios">
<nb-list-item>
<button nbButton
id="scenario-{{scenario.id}}"
(click)="selectScenario($event)"
[ngClass]="{'bg-success': selectedScenarioId === scenario.id}">
Select
</button>
<div class="col-md-4">
<h3>{{ scenario.name }}</h3>
</div>
<div class="col-md-6">
<p>{{ scenario.description }}</p>
<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 class="col-md-4">
<ng-form >
<label for="name">Name</label>
<br/>
<input nbInput id="name"
type='text'
required
placeholder='scenario name'
[(ngModel)]="scenarioFormData.name"
name="name">
<br/>
<label for="description">Description</label>
<br/>
<input nbInput id="description"
type='text'
placeholder="description of the scenario"
[(ngModel)]="scenarioFormData.description"
name="description">
<br/>
<input hidden id="id" type="number" [(ngModel)]="scenarioFormData.id" name="id">
<button nbButton (click)="newScenario()">New scenario</button>
</ng-form>
</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>
@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);
}
}
}
<nb-card>
<nb-card-header> Add simulation </nb-card-header>
<nb-card-body>
<form [formGroup]="addSimulationForm" (ngSubmit)="addSimulationSubmit()">
<div class="inner">
<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')"
(ngModelChange)="onInputNameChange($event)"
/>
<input
type="text"
nbInput
formControlName="description"
placeholder="Simulation description"
name="simulationDescription"
/>
<nb-select
placeholder="Select Scenario"
formControlName="selectedScenario"
(ngModelChange)="onSelectScenarioChange($event)"
>
<nb-option *ngFor="let scenario of scenarios" [value]="scenario.id">{{
scenario.name
}}</nb-option>
</nb-select>
<nb-select
placeholder="Select Network"
formControlName="selectedNetwork"
(ngModelChange)="onSelectNetworkChange($event)"
>
<nb-option *ngFor="let network of networks" [value]="network.id">{{
network.name
}}</nb-option>
</nb-select>
<nb-select
placeholder="Select Plan"
formControlName="selectedPlan"
(ngModelChange)="onSelectPlanChange($event)"
>
<nb-option *ngFor="let plan of plans" [value]="plan">{{
plan
}}</nb-option>
</nb-select>
<button
nbButton
type="submit"
[disabled]="addSimulationBtnDisabled"
status="primary"
style="margin-top: auto"
>
add simulation
</button>
</div>
</form>
</nb-card-body>
</nb-card>
form {
display: flex;
height: 30em;
justify-content: center;
.inner {
flex-basis: 40%;
display: flex;
flex-direction: column;
padding: 1em;
gap: 1em;
}
}
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();
});
});
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
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 { SimulationCreationComponent } from "./simulation-creation/simulation-creation.component";
import { VisualizationsComponent } from "./visualizations/visualizations.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";
import {SimulationWizardComponent} from './simulation-wizard.component';
import {ResultsComponent} from './results/results.component';
import {SimulationsComponent} from './simulations/simulations.component';
// import {NetworkWizardComponent} from './network-wizard/network-wizard.component';
import {ScenariosComponent} from './scenarios/scenarios.component';
const routes: Routes = [{
path: '',
component: SimulationWizardComponent,
children: [{
path: 'results',
component: ResultsComponent,
const routes: Routes = [
{
path: "edit-network-map",
component: EditNetworkMapComponent,
},
{
path: 'scenarios',
path: "ml-module",
component: MlModuleComponent,
},
{
path: "networks",
component: NetworkCreationComponent,
},
{
path: "scenarios",
component: ScenariosComponent,
},
]}];
{
path: "simulations",
component: ResultsComponent,
},
{
path: "spider",
component: OurSpiderChartComponent,
},
{
path: "simulation-creation",
component: SimulationCreationComponent,
},
{
path: "visualizations",
component: VisualizationsComponent,
},
{
path: "recommender",
component: RecommenderPageComponent,
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class SimulationWizardRoutingModule {}
export const routedComponents = [
ResultsComponent,
SimulationsComponent,
];
This diff is collapsed.
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment