sandre/SkydiveLogs
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix sur le CSS pour la taille du graphique

Browse Source
This commit is contained in:
sandre
2026-01-12 15:24:41 +01:00
parent 1aae7c46be
commit 82d06117da
2 changed files with 145 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.css
View File

@@ -1,18 +1,24 @@
.formListTunnelFlight { .formListTunnelFlight {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 150px; min-width: 150px;
max-width: 500px; max-width: 500px;
width: 100%; width: 100%;
} }
.content { .content {
min-height: 90vh; min-height: 90vh;
display: flex; display: flex;
justify-content: left; justify-content: left;
flex-direction: column; flex-direction: column;
align-items: initial; align-items: initial;
padding-top: 25px; padding-top: 25px;
} }
.chart-container {
position: relative;
margin: auto;
height: 80vh;
width: 80vw;
}

195
Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.html
View File

@@ -1,89 +1,136 @@
<div class="content"> <div class="content">
<div> <div>
<button mat-raised-button color="accent" [routerLink]="['/newTunnelFlight']" [routerLinkActive]="['active']" <button
skipLocationChange>{{ 'ListTunnelFlight_Add' | translate }}</button> mat-raised-button
</div> color="accent"
[routerLink]="['/newTunnelFlight']"
[routerLinkActive]="['active']"
skipLocationChange
>
{{ "ListTunnelFlight_Add" | translate }}
</button>
</div>
<mat-progress-bar [mode]="'indeterminate'" *ngIf="isLoading"></mat-progress-bar> <mat-progress-bar
[mode]="'indeterminate'"
*ngIf="isLoading"
></mat-progress-bar>
<mat-radio-group [(ngModel)]="selectedPeriod" (ngModelChange)="onPeriodChange()"> <mat-radio-group
<mat-radio-button value="currentYear">{{ 'ListTunnelFlight_CurrentYear' | translate }}</mat-radio-button> [(ngModel)]="selectedPeriod"
<mat-radio-button value="12Months">{{ 'ListTunnelFlight_12Months' | translate }}</mat-radio-button> (ngModelChange)="onPeriodChange()"
<mat-radio-button value="all">{{ 'ListTunnelFlight_AllFlights' | translate }}</mat-radio-button> >
</mat-radio-group> <mat-radio-button value="currentYear">{{
"ListTunnelFlight_CurrentYear" | translate
}}</mat-radio-button>
<mat-radio-button value="12Months">{{
"ListTunnelFlight_12Months" | translate
}}</mat-radio-button>
<mat-radio-button value="all">{{
"ListTunnelFlight_AllFlights" | translate
}}</mat-radio-button>
</mat-radio-group>
<mat-nav-list> <mat-nav-list>
<mat-list-item matListItemLine *ngFor="let stat of stats"> <mat-list-item matListItemLine *ngFor="let stat of stats">
<label>{{stat.id}} : {{stat.values}}</label> <label>{{ stat.id }} : {{ stat.values }}</label>
</mat-list-item> </mat-list-item>
</mat-nav-list> </mat-nav-list>
<div style="display: inline-block; position: relative; width: 100%;"> <div class="chart-container">
<canvas baseChart <canvas
[data]="barChartData" baseChart
[options]="barChartOptions" [data]="barChartData"
[plugins]="barChartPlugins" [options]="barChartOptions"
[legend]="barChartLegend" [plugins]="barChartPlugins"
[type]="barChartType"> [legend]="barChartLegend"
</canvas> [type]="barChartType"
</div> >
</canvas>
</div>
<div> <div>
<button mat-raised-button color="accent" (click)="onLoadTable()" >{{ 'ListTunnelFlight_LoadTable' | translate }}</button> <button mat-raised-button color="accent" (click)="onLoadTable()">
{{ "ListTunnelFlight_LoadTable" | translate }}
</button>
<table mat-table [dataSource]="dataSourceTable" *ngIf="dataSourceTable?.data.length"> <table
<ng-container matColumnDef="id"> mat-table
<th mat-header-cell *matHeaderCellDef>ID</th> [dataSource]="dataSourceTable"
<td mat-cell *matCellDef="let element"> *ngIf="dataSourceTable?.data.length"
<span class="smallSpanWithBreakWord" [innerHTML]="element.id"></span> >
</td> <ng-container matColumnDef="id">
</ng-container> <th mat-header-cell *matHeaderCellDef>ID</th>
<td mat-cell *matCellDef="let element">
<span class="smallSpanWithBreakWord" [innerHTML]="element.id"></span>
</td>
</ng-container>
<ng-container matColumnDef="tunnel"> <ng-container matColumnDef="tunnel">
<th mat-header-cell *matHeaderCellDef>Tunnel</th> <th mat-header-cell *matHeaderCellDef>Tunnel</th>
<td mat-cell *matCellDef="let element"> <td mat-cell *matCellDef="let element">
<span class="smallSpanWithBreakWord" [innerHTML]="element.tunnel.name"></span> <span
</td> class="smallSpanWithBreakWord"
</ng-container> [innerHTML]="element.tunnel.name"
></span>
</td>
</ng-container>
<ng-container matColumnDef="jumpType"> <ng-container matColumnDef="jumpType">
<th mat-header-cell *matHeaderCellDef>Jump Type</th> <th mat-header-cell *matHeaderCellDef>Jump Type</th>
<td mat-cell *matCellDef="let element"> <td mat-cell *matCellDef="let element">
<span class="smallSpanWithBreakWord" [innerHTML]="element.jumpType.name"></span> <span
</td> class="smallSpanWithBreakWord"
</ng-container> [innerHTML]="element.jumpType.name"
></span>
</td>
</ng-container>
<ng-container matColumnDef="nbMinutes"> <ng-container matColumnDef="nbMinutes">
<th mat-header-cell *matHeaderCellDef>Minutes</th> <th mat-header-cell *matHeaderCellDef>Minutes</th>
<td mat-cell *matCellDef="let element"> <td mat-cell *matCellDef="let element">
<span class="smallSpanWithBreakWord" [innerHTML]="element.nbMinutes"></span> <span
</td> class="smallSpanWithBreakWord"
</ng-container> [innerHTML]="element.nbMinutes"
></span>
</td>
</ng-container>
<ng-container matColumnDef="notes"> <ng-container matColumnDef="notes">
<th mat-header-cell *matHeaderCellDef>Notes</th> <th mat-header-cell *matHeaderCellDef>Notes</th>
<td mat-cell *matCellDef="let element"> <td mat-cell *matCellDef="let element">
<span class="smallSpanWithBreakWord" [innerHTML]="element.notes"></span> <span
</td> class="smallSpanWithBreakWord"
</ng-container> [innerHTML]="element.notes"
></span>
</td>
</ng-container>
<ng-container matColumnDef="flightDate"> <ng-container matColumnDef="flightDate">
<th mat-header-cell *matHeaderCellDef>Date</th> <th mat-header-cell *matHeaderCellDef>Date</th>
<td mat-cell *matCellDef="let element"> <td mat-cell *matCellDef="let element">
<span class="smallSpanWithBreakWord" [innerHTML]="element.flightDate | date: 'yyyy-MM-dd'"></span> <span
</td> class="smallSpanWithBreakWord"
</ng-container> [innerHTML]="element.flightDate | date : 'yyyy-MM-dd'"
></span>
</td>
</ng-container>
<ng-container matColumnDef="actions"> <ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef style="min-width: 80px;"></th> <th mat-header-cell *matHeaderCellDef style="min-width: 80px"></th>
<td mat-cell *matCellDef="let element" style="text-align: left;"> <td mat-cell *matCellDef="let element" style="text-align: left">
<mat-icon aria-hidden="false" aria-label="Delete this jump" style="cursor: pointer;" <mat-icon
(click)='delete(element)'>delete</mat-icon> aria-hidden="false"
</td> aria-label="Delete this jump"
</ng-container> style="cursor: pointer"
(click)="delete(element)"
>delete</mat-icon
>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table> </table>
</div> </div>
</div> </div>