115 lines
5.1 KiB
HTML
115 lines
5.1 KiB
HTML
<div @flyInOut>
|
|
<div class="d-flex">
|
|
<div class="flex-fill">
|
|
<h1 class="mb-1">{{title}}</h1>
|
|
</div>
|
|
<span class="flex-spacer"></span>
|
|
<div class="align-self-center me-2 text-end">
|
|
<span class="fs-5 text-primary">{{ now | date: 'dd/MM/yyyy' }}</span>
|
|
</div>
|
|
</div>
|
|
<mat-divider class="my-3"></mat-divider>
|
|
<app-list-errors [errors]="errors"></app-list-errors>
|
|
<div class="d-flex">
|
|
<p class="fs-3">{{description}}</p>
|
|
</div>
|
|
<mat-divider class="mt-2 mb-3"></mat-divider>
|
|
<mat-card class="my-3">
|
|
<mat-card-header class="d-flex rounded-top bg-navy-light text-bg-navy-light py-2 px-3">
|
|
<div class="flex-fill">
|
|
<mat-card-title>
|
|
{{ title }}
|
|
</mat-card-title>
|
|
</div>
|
|
<span class="flex-spacer"></span>
|
|
<div class="align-self-center text-end">
|
|
<span class="fs-5 font-light">{{ subtitle }}</span>
|
|
</div>
|
|
</mat-card-header>
|
|
<mat-card-content class="table-responsive p-0">
|
|
<mat-stepper headerPosition="top" #stepper>
|
|
<mat-step state="timeline">
|
|
<ng-template matStepLabel>Stage 1</ng-template>
|
|
<div class="d-flex mt-3">
|
|
<div class="flex-fill">
|
|
<h2 class="mb-1">Stage 1</h2>
|
|
</div>
|
|
<span class="flex-spacer"></span>
|
|
<div class="align-self-center me-2 text-end">
|
|
<h4 class="mb-1">Power limit: 320k</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-top border-light pt-2">
|
|
<button mat-button matStepperPrevious>Back</button>
|
|
<button mat-button matStepperNext>Next</button>
|
|
</div>
|
|
</mat-step>
|
|
<mat-step state="timeline">
|
|
<ng-template matStepLabel>Stage 2</ng-template>
|
|
<div class="d-flex mt-3">
|
|
<div class="flex-fill">
|
|
<h2 class="mb-1">Stage 2</h2>
|
|
</div>
|
|
<span class="flex-spacer"></span>
|
|
<div class="align-self-center me-2 text-end">
|
|
<h4 class="mb-1">Power limit: 500k</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-top border-light pt-2">
|
|
<button mat-button matStepperPrevious>Back</button>
|
|
<button mat-button matStepperNext>Next</button>
|
|
</div>
|
|
</mat-step>
|
|
<mat-step state="timeline">
|
|
<ng-template matStepLabel>Stage 3</ng-template>
|
|
<div class="d-flex mt-3">
|
|
<div class="flex-fill">
|
|
<h2 class="mb-1">Stage 3</h2>
|
|
</div>
|
|
<span class="flex-spacer"></span>
|
|
<div class="align-self-center me-2 text-end">
|
|
<h4 class="mb-1">No power limit</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-top border-light pt-2">
|
|
<button mat-button matStepperPrevious>Back</button>
|
|
<button mat-button matStepperNext>Next</button>
|
|
</div>
|
|
</mat-step>
|
|
<mat-step state="search">
|
|
<ng-template matStepLabel>Statistics</ng-template>
|
|
<div class="d-flex mt-3">
|
|
<div class="flex-fill">
|
|
<h2 class="mb-1">Statistics</h2>
|
|
</div>
|
|
<span class="flex-spacer"></span>
|
|
<div class="align-self-center me-2 text-end">
|
|
<h4 class="mb-1">variation ≥ {{ minVarPct }}%</h4>
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Variation</mat-label>
|
|
<input matInput [(ngModel)]="minVarPct" type="number" min="{{ minValue }}">
|
|
<mat-icon matSuffix>percent</mat-icon>
|
|
<mat-hint>excess power in %</mat-hint>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-top border-light pt-2">
|
|
<button mat-button matStepperPrevious>Back</button>
|
|
<button mat-button (click)="stepper.reset()">Reset</button>
|
|
</div>
|
|
</mat-step>
|
|
<ng-template matStepperIcon="timeline">
|
|
<mat-icon>timeline</mat-icon>
|
|
</ng-template>
|
|
<ng-template matStepperIcon="search">
|
|
<mat-icon>manage_search</mat-icon>
|
|
</ng-template>
|
|
</mat-stepper>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|