Julien Gautier
385 lines
21 KiB
HTML
385 lines
21 KiB
HTML
<div class="calculator-page content">
|
|
<mat-card class="calculator">
|
|
<mat-card-header class="bg-warn rounded-top py-3 px-4">
|
|
<mat-card-title>Calcul de taille de voile</mat-card-title>
|
|
<mat-card-subtitle>DT48 - 13 mars 2020</mat-card-subtitle>
|
|
<span class="flex-spacer"></span>
|
|
<button mat-icon-button [matMenuTriggerFor]="menuCalculator" aria-label="Menu Calculator">
|
|
<mat-icon>more_vert</mat-icon>
|
|
</button>
|
|
<mat-menu #menuCalculator="matMenu">
|
|
<button mat-menu-item>
|
|
<mat-icon>search</mat-icon>
|
|
<span>Recherche avancée</span>
|
|
</button>
|
|
<button mat-menu-item>
|
|
<mat-icon>person_search</mat-icon>
|
|
<span>Recherche par participant</span>
|
|
</button>
|
|
<button mat-menu-item>
|
|
<mat-icon>display_settings</mat-icon>
|
|
<span>Paramètre d'affichage</span>
|
|
</button>
|
|
<button mat-menu-item disabled>
|
|
<mat-icon>upload_file</mat-icon>
|
|
<span>Import CSV</span>
|
|
</button>
|
|
</mat-menu>
|
|
</mat-card-header>
|
|
<mat-card-content class="my-4 mx-2">
|
|
<form #searchFormData="ngForm" class="inputs-form">
|
|
<mat-form-field class="bg-crystal me-3">
|
|
<mat-label>Nombre de sauts</mat-label>
|
|
<input matInput [(ngModel)]="inputs.jumps" (change)="refreshActive()" type="number" min="0" name="jumps">
|
|
</mat-form-field>
|
|
<mat-form-field class="bg-crystal me-3">
|
|
<mat-label>Poids nu</mat-label>
|
|
<input matInput [(ngModel)]="inputs.weight" (change)="refreshActive()" type="number" min="60" max="110" name="weight">
|
|
</mat-form-field>
|
|
<mat-form-field class="bg-crystal me-3">
|
|
<mat-label>Poids équipement</mat-label>
|
|
<input matInput [(ngModel)]="inputs.gear" type="number" min="0" name="gear">
|
|
</mat-form-field>
|
|
<mat-form-field class="bg-crystal me-3">
|
|
<mat-label>Taille actuelle</mat-label>
|
|
<input matInput [(ngModel)]="inputs.current" type="number" min="0" name="current" id="current" placeholder="Taille actuelle" >
|
|
</mat-form-field>
|
|
</form>
|
|
<table mat-table [dataSource]="canopy_size_table" matSort class="table table-striped table-dark table-hover mat-elevation-z2">
|
|
<!-- Numero Column -->
|
|
<ng-container matColumnDef="weight">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header class="{{tableHeader[0].active}}"> {{tableHeader[0].name}} </th>
|
|
<th mat-cell *matCellDef="let element;" class="text-right pl-3 pr-3">{{element.weight}}</th>
|
|
</ng-container>
|
|
<!-- range_ Column -->
|
|
<ng-container matColumnDef="range_1">
|
|
<th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[1].active}}"> {{tableHeader[1].name}} </th>
|
|
<td mat-cell *matCellDef="let element;" class="pl-3 text-nowrap {{element.ranges[0].active}}">{{element.ranges[0].value}}</td>
|
|
</ng-container>
|
|
<!-- range_ Column -->
|
|
<ng-container matColumnDef="range_2">
|
|
<th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[2].active}}"> {{tableHeader[2].name}} </th>
|
|
<td mat-cell *matCellDef="let element;" class="pl-3 text-nowrap {{element.ranges[1].active}}">{{element.ranges[1].value}}</td>
|
|
</ng-container>
|
|
<!-- range_ Column -->
|
|
<ng-container matColumnDef="range_3">
|
|
<th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[3].active}}"> {{tableHeader[3].name}} </th>
|
|
<td mat-cell *matCellDef="let element;" class="pl-3 text-nowrap {{element.ranges[2].active}}">{{element.ranges[2].value}}</td>
|
|
</ng-container>
|
|
<!-- range_ Column -->
|
|
<ng-container matColumnDef="range_4">
|
|
<th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[4].active}}"> {{tableHeader[4].name}} </th>
|
|
<td mat-cell *matCellDef="let element;" class="pl-3 text-nowrap {{element.ranges[3].active}}">{{element.ranges[3].value}}</td>
|
|
</ng-container>
|
|
<!-- range_ Column -->
|
|
<ng-container matColumnDef="range_5">
|
|
<th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[5].active}}"> {{tableHeader[5].name}} </th>
|
|
<td mat-cell *matCellDef="let element;" class="pl-3 text-nowrap {{element.ranges[4].active}}">{{element.ranges[4].value}}</td>
|
|
</ng-container>
|
|
<!-- range_ Column -->
|
|
<ng-container matColumnDef="range_6">
|
|
<th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[6].active}}"> {{tableHeader[6].name}} </th>
|
|
<td mat-cell *matCellDef="let element;" class="pl-3 text-nowrap {{element.ranges[5].active}}">{{element.ranges[5].value}}</td>
|
|
</ng-container>
|
|
<!-- range_ Column -->
|
|
<ng-container matColumnDef="range_7">
|
|
<th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[7].active}}"> {{tableHeader[7].name}} </th>
|
|
<td mat-cell *matCellDef="let element;" class="pl-3 text-nowrap {{element.ranges[6].active}}">{{element.ranges[6].value}}</td>
|
|
</ng-container>
|
|
<!-- range_ Column -->
|
|
<ng-container matColumnDef="range_8">
|
|
<th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[8].active}}"> {{tableHeader[8].name}} </th>
|
|
<td mat-cell *matCellDef="let element;" class="pl-3 text-nowrap {{element.ranges[7].active}}">{{element.ranges[7].value}}</td>
|
|
</ng-container>
|
|
<!-- range_ Column -->
|
|
<ng-container matColumnDef="range_9">
|
|
<th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[9].active}}"> {{tableHeader[9].name}} </th>
|
|
<td mat-cell *matCellDef="let element;" class="pl-3 text-nowrap {{element.ranges[8].active}}">{{element.ranges[8].value}}</td>
|
|
</ng-container>
|
|
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="warn"></tr>
|
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="text-middle warn {{row.active}}" id="weight_{{row.weight}}"></tr>
|
|
</table>
|
|
<div class="clearfix">
|
|
<mat-paginator [pageSize]="50" [pageSizeOptions]="[5, 10, 15, 25, 50]" showFirstLastButtons class="pull-right mb-1 mt-2"></mat-paginator>
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|
|
<div class="content">
|
|
<h1>{{title}}</h1>
|
|
<div class="col-xs-12">
|
|
<div class="demo-buttons my-2">
|
|
<!-- primary buttons -->
|
|
<button mat-button color="primary" class="me-2">Texte</button>
|
|
<button mat-stroked-button color="primary" class="me-2">Texte Stroked</button>
|
|
<button mat-flat-button color="primary" class="me-2">Texte Flat</button>
|
|
<button mat-raised-button color="primary" class="me-2">Texte Raised</button>
|
|
<button mat-icon-button color="primary" class="me-2">
|
|
<mat-icon>check_circle</mat-icon>
|
|
</button>
|
|
<button mat-fab color="primary" class="me-2">
|
|
<mat-icon>check_circle</mat-icon>
|
|
</button>
|
|
<button mat-mini-fab color="primary" class="me-2">
|
|
<mat-icon>check_circle</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="demo-buttons my-2">
|
|
<!-- accent buttons -->
|
|
<button mat-button color="accent" class="me-2">Texte</button>
|
|
<button mat-stroked-button color="accent" class="me-2">Texte Stroked</button>
|
|
<button mat-flat-button color="accent" class="me-2">Texte Flat</button>
|
|
<button mat-raised-button color="accent" class="me-2">Texte Raised</button>
|
|
<button mat-icon-button color="accent" class="me-2">
|
|
<mat-icon>check_circle</mat-icon>
|
|
</button>
|
|
<button mat-fab color="accent" class="me-2">
|
|
<mat-icon>check_circle</mat-icon>
|
|
</button>
|
|
<button mat-mini-fab color="accent" class="me-2">
|
|
<mat-icon>check_circle</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="demo-buttons my-2">
|
|
<!-- warn buttons -->
|
|
<button mat-button color="warn" class="me-2">Texte</button>
|
|
<button mat-stroked-button color="warn" class="me-2">Texte Stroked</button>
|
|
<button mat-flat-button color="warn" class="me-2">Texte Flat</button>
|
|
<button mat-raised-button color="warn" class="me-2">Texte Raised</button>
|
|
<button mat-icon-button color="warn" class="me-2">
|
|
<mat-icon>check_circle</mat-icon>
|
|
</button>
|
|
<button mat-fab color="warn" class="me-2">
|
|
<mat-icon>check_circle</mat-icon>
|
|
</button>
|
|
<button mat-mini-fab color="warn" class="me-2">
|
|
<mat-icon>check_circle</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="demo-buttons my-2">
|
|
<!-- danger buttons -->
|
|
<button mat-button color="danger" class="me-2">Texte</button>
|
|
<button mat-stroked-button color="danger" class="me-2">Texte Stroked</button>
|
|
<button mat-flat-button color="danger" class="me-2">Texte Flat</button>
|
|
<button mat-raised-button color="danger" class="me-2">Texte Raised</button>
|
|
<button mat-icon-button color="danger" class="me-2">
|
|
<mat-icon>check_circle</mat-icon>
|
|
</button>
|
|
<button mat-fab color="danger" class="me-2">
|
|
<mat-icon>check_circle</mat-icon>
|
|
</button>
|
|
<button mat-mini-fab color="danger" class="me-2">
|
|
<mat-icon>check_circle</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="demo-buttons my-2">
|
|
<!-- info buttons -->
|
|
<button mat-button color="info" class="me-2">Texte</button>
|
|
<button mat-stroked-button color="info" class="me-2">Texte Stroked</button>
|
|
<button mat-flat-button color="info" class="me-2">Texte Flat</button>
|
|
<button mat-raised-button color="info" class="me-2">Texte Raised</button>
|
|
<button mat-icon-button color="info" class="me-2">
|
|
<mat-icon>info</mat-icon>
|
|
</button>
|
|
<button mat-fab color="info" class="me-2">
|
|
<mat-icon>info</mat-icon>
|
|
</button>
|
|
<button mat-mini-fab color="info" class="me-2">
|
|
<mat-icon>info</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="demo-buttons my-2">
|
|
<!-- success buttons -->
|
|
<button mat-button color="success" class="me-2">Texte</button>
|
|
<button mat-stroked-button color="success" class="me-2">Texte Stroked</button>
|
|
<button mat-flat-button color="success" class="me-2">Texte Flat</button>
|
|
<button mat-raised-button color="success" class="me-2">Texte Raised</button>
|
|
<button mat-icon-button color="success" class="me-2">
|
|
<mat-icon>check_circle</mat-icon>
|
|
</button>
|
|
<button mat-fab color="success" class="me-2">
|
|
<mat-icon>check_circle</mat-icon>
|
|
</button>
|
|
<button mat-mini-fab color="success" class="me-2">
|
|
<mat-icon>check_circle</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<section>
|
|
<div class="demo-label">Basic</div>
|
|
<div class="demo-button-row">
|
|
<button mat-button>Basic</button>
|
|
<button mat-button color="primary">Primary</button>
|
|
<button mat-button color="accent">Accent</button>
|
|
<button mat-button color="warn">Warn</button>
|
|
<button mat-button color="danger">Danger</button>
|
|
<button mat-button color="info">Info</button>
|
|
<button mat-button color="success">Success</button>
|
|
<button mat-button disabled>Disabled</button>
|
|
<a mat-button href="https://www.google.com/" target="_blank">Link</a>
|
|
</div>
|
|
</section>
|
|
<mat-divider></mat-divider>
|
|
<section>
|
|
<div class="demo-label">Raised</div>
|
|
<div class="demo-button-row">
|
|
<button mat-raised-button>Basic</button>
|
|
<button mat-raised-button color="primary">Primary</button>
|
|
<button mat-raised-button color="accent">Accent</button>
|
|
<button mat-raised-button color="warn">Warn</button>
|
|
<button mat-raised-button color="danger">Danger</button>
|
|
<button mat-raised-button color="info">Info</button>
|
|
<button mat-raised-button color="success">Success</button>
|
|
<button mat-raised-button disabled>Disabled</button>
|
|
<a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
|
|
</div>
|
|
</section>
|
|
<mat-divider></mat-divider>
|
|
<section>
|
|
<div class="demo-label">Stroked</div>
|
|
<div class="demo-button-row">
|
|
<button mat-stroked-button>Basic</button>
|
|
<button mat-stroked-button color="primary">Primary</button>
|
|
<button mat-stroked-button color="accent">Accent</button>
|
|
<button mat-stroked-button color="warn">Warn</button>
|
|
<button mat-stroked-button color="danger">Danger</button>
|
|
<button mat-stroked-button color="info">Info</button>
|
|
<button mat-stroked-button color="success">Success</button>
|
|
<button mat-stroked-button disabled>Disabled</button>
|
|
<a mat-stroked-button href="https://www.google.com/" target="_blank">Link</a>
|
|
</div>
|
|
</section>
|
|
<mat-divider></mat-divider>
|
|
<section>
|
|
<div class="demo-label">Flat</div>
|
|
<div class="demo-button-row">
|
|
<button mat-flat-button>Basic</button>
|
|
<button mat-flat-button color="primary">Primary</button>
|
|
<button mat-flat-button color="accent">Accent</button>
|
|
<button mat-flat-button color="warn">Warn</button>
|
|
<button mat-flat-button color="danger">Danger</button>
|
|
<button mat-flat-button color="info">Info</button>
|
|
<button mat-flat-button color="success">Success</button>
|
|
<button mat-flat-button disabled>Disabled</button>
|
|
<a mat-flat-button href="https://www.google.com/" target="_blank">Link</a>
|
|
</div>
|
|
</section>
|
|
<mat-divider></mat-divider>
|
|
<section>
|
|
<div class="demo-label">Icon</div>
|
|
<div class="demo-button-row">
|
|
<div class="demo-flex-container">
|
|
<button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
|
|
<mat-icon>more_vert</mat-icon>
|
|
</button>
|
|
<button mat-icon-button color="primary" aria-label="Example icon button with a home icon">
|
|
<mat-icon>home</mat-icon>
|
|
</button>
|
|
<button mat-icon-button color="accent" aria-label="Example icon button with a menu icon">
|
|
<mat-icon>menu</mat-icon>
|
|
</button>
|
|
<button mat-icon-button color="warn" aria-label="Example icon button with a heart icon">
|
|
<mat-icon>favorite</mat-icon>
|
|
</button>
|
|
<button mat-icon-button color="danger" aria-label="Example icon button with a heart icon">
|
|
<mat-icon>favorite</mat-icon>
|
|
</button>
|
|
<button mat-icon-button color="info" aria-label="Example icon button with a heart icon">
|
|
<mat-icon>favorite</mat-icon>
|
|
</button>
|
|
<button mat-icon-button color="success" aria-label="Example icon button with a heart icon">
|
|
<mat-icon>favorite</mat-icon>
|
|
</button>
|
|
<button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon">
|
|
<mat-icon>open_in_new</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<mat-divider></mat-divider>
|
|
<section>
|
|
<div class="demo-label">FAB</div>
|
|
<div class="demo-button-row">
|
|
<div class="demo-flex-container">
|
|
<div class="demo-button-container">
|
|
<button mat-fab color="primary" aria-label="Example icon button with a delete icon">
|
|
<mat-icon>delete</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="demo-button-container">
|
|
<button mat-fab color="accent" aria-label="Example icon button with a bookmark icon">
|
|
<mat-icon>bookmark</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="demo-button-container">
|
|
<button mat-fab color="warn" aria-label="Example icon button with a home icon">
|
|
<mat-icon>home</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="demo-button-container">
|
|
<button mat-fab color="danger" aria-label="Example icon button with a heart icon">
|
|
<mat-icon>favorite</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="demo-button-container">
|
|
<button mat-fab color="info" aria-label="Example icon button with a heart icon">
|
|
<mat-icon>favorite</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="demo-button-container">
|
|
<button mat-fab color="success" aria-label="Example icon button with a heart icon">
|
|
<mat-icon>favorite</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="demo-button-container">
|
|
<button mat-fab disabled aria-label="Example icon button with a heart icon">
|
|
<mat-icon>favorite</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<mat-divider></mat-divider>
|
|
<section>
|
|
<div class="demo-label">Mini FAB</div>
|
|
<div class="demo-button-row">
|
|
<div class="demo-flex-container">
|
|
<div class="demo-button-container">
|
|
<button mat-mini-fab color="primary" aria-label="Example icon button with a menu icon">
|
|
<mat-icon>menu</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="demo-button-container">
|
|
<button mat-mini-fab color="accent" aria-label="Example icon button with a plus one icon">
|
|
<mat-icon>plus_one</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="demo-button-container">
|
|
<button mat-mini-fab color="warn" aria-label="Example icon button with a filter list icon">
|
|
<mat-icon>filter_list</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="demo-button-container">
|
|
<button mat-mini-fab color="danger" aria-label="Example icon button with a heart icon">
|
|
<mat-icon>favorite</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="demo-button-container">
|
|
<button mat-mini-fab color="info" aria-label="Example icon button with a heart icon">
|
|
<mat-icon>favorite</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="demo-button-container">
|
|
<button mat-mini-fab color="success" aria-label="Example icon button with a heart icon">
|
|
<mat-icon>favorite</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="demo-button-container">
|
|
<button mat-mini-fab disabled aria-label="Example icon button with a home icon">
|
|
<mat-icon>home</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div> |