Mise à jours et ajout de fonctionnalités

src/app/components/calculator/calculator.component.html

@@ -1,3 +1,110 @@
+<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">

src/app/components/calculator/calculator.component.scss

@@ -1,26 +1,41 @@
-section {
-    display: table;
-}
-.demo-label {
-    display: table-cell;
-    font-size: 14px;
-    margin-left: 8px;
-    min-width: 120px;
-}
-.demo-button-row {
-    display: table-cell;
-    max-width: 900px;
-}
-.demo-button-row .mat-mdc-button-base {
-    margin: 8px 8px 8px 0;
-}
-.demo-flex-container {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-}
-.demo-button-container {
-    display: flex;
-    justify-content: center;
-    width: 120px;
+.calculator-page {
+    section {
+        display: table;
+    }
+    .demo-label {
+        display: table-cell;
+        font-size: 14px;
+        margin-left: 8px;
+        min-width: 120px;
+    }
+    .demo-button-row {
+        display: table-cell;
+        max-width: 900px;
+    }
+    .demo-button-row .mat-mdc-button-base {
+        margin: 8px 8px 8px 0;
+    }
+    .demo-flex-container {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+    .demo-button-container {
+        display: flex;
+        justify-content: center;
+        width: 120px;
+    }
+    /* Chrome, Safari, Edge, Opera */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        appearance: none;
+        -webkit-appearance: none;
+        margin: 0;
+    }
+    
+    /* Firefox */
+    input[type=number] {
+        appearance: textfield;
+        -moz-appearance: textfield;
+    }
 }

src/app/components/calculator/calculator.component.ts

@@ -1,28 +1,111 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, Input, OnInit, OnDestroy, ViewChild } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
 import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+
+import { CalcResult, InputParams, Range, WeightSize, weightSizes } from 'src/app/core/models';
 
 @Component({
     standalone: true,
     imports: [
-        MatButtonModule, MatDividerModule, MatIconModule
+        FormsModule,
+        MatButtonModule, MatCardModule, MatDividerModule,
+        MatFormFieldModule, MatInputModule, MatIconModule, MatMenuModule,
+        MatPaginatorModule, MatSortModule, MatTableModule
     ],
     selector: 'huapp-calculator',
-    templateUrl: './calculator.component.html',
-    styleUrls: ['./calculator.component.scss']
+    styleUrls: ['./calculator.component.scss'],
+    templateUrl: './calculator.component.html'
 })
 export class CalculatorComponent implements OnInit, OnDestroy {
-    title = 'Taille de voile - DT48';
+    title = 'Calcul de taille de voile';
+    subtitle = 'DT48 - 13 mars 2020';
+    displayedColumns: string[] = [
+        "weight",
+        "range_1", "range_2", "range_3",
+        "range_4", "range_5", "range_6",
+        "range_7", "range_8", "range_9"
+    ];
+    tableHeader: {name: string, active: string}[] = [
+        {name: "Poids nu", active: ''},
+        {name: "0 à 99", active: ''},
+        {name: "100 à 249", active: ''},
+        {name: "250 à 399", active: ''},
+        {name: "400 à 599", active: ''},
+        {name: "600 à 799", active: ''},
+        {name: "800 à 999", active: ''},
+        {name: "1000 à 1399", active: ''},
+        {name: "1400 à 1799", active: ''},
+        {name: "1800 à 2000", active: ''},
+    ];;
 
+    @Input() canopy_size_table!: MatTableDataSource<WeightSize>;
+    @Input() inputs: InputParams = {
+        jumps: 0,
+        weight: 60,
+        gear: 10,
+        current: 175
+    } as InputParams;
+
+    @ViewChild(MatSort) sort!: MatSort;
+    @ViewChild(MatPaginator) paginator!: MatPaginator;
+    
     constructor() { }
 
     ngOnInit() {
-        //
+        return this.loadData();
     }
 
     ngOnDestroy() {
         //this._scavenger.unsubscribe();
     }
 
+    loadData():void {
+        this.refreshActive();
+        this.canopy_size_table = new MatTableDataSource<WeightSize>(weightSizes);
+    }
+
+    refreshActive():void {
+        weightSizes.forEach(element => {
+            element.active = '';
+            element.ranges.forEach(range => {
+                range.active = '';
+            });
+        });
+        this.tableHeader.forEach(element => {
+            element.active = '';
+        });
+        if (this.inputs.weight >= 60 && this.inputs.weight <= 110) {
+            weightSizes[(this.inputs.weight - 60)].active = 'active';
+        }
+        if (this.inputs.jumps >= 0) {
+            var num = this.getRangeNum();
+            this.tableHeader[num].active = 'active';
+            weightSizes.forEach(element => {
+                element.ranges[(num-1)].active = 'active';
+            });
+        }
+    }
+    
+    private getRangeNum(): number {
+        var data: Range[] = weightSizes[0].ranges;
+        var num: number = 1;
+        data.some((range: Range) => {
+            if (range.start <= this.inputs.jumps && range.end >= this.inputs.jumps) {
+                num = range.num;
+                return true;
+            }
+            return false;
+        });
+        return num;
+    }
+
 }