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 {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
min-width: 150px;
max-width: 500px;
width: 100%;
}
min-width: 150px;
max-width: 500px;
width: 100%;
}
.content {
min-height: 90vh;
display: flex;
justify-content: left;
flex-direction: column;
align-items: initial;
padding-top: 25px;
}
.content {
min-height: 90vh;
display: flex;
justify-content: left;
flex-direction: column;
align-items: initial;
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>
<button mat-raised-button color="accent" [routerLink]="['/newTunnelFlight']" [routerLinkActive]="['active']"
skipLocationChange>{{ 'ListTunnelFlight_Add' | translate }}</button>
</div>
<div>
<button
mat-raised-button
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-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-radio-group
[(ngModel)]="selectedPeriod"
(ngModelChange)="onPeriodChange()"
>
<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-list-item matListItemLine *ngFor="let stat of stats">
<label>{{stat.id}} : {{stat.values}}</label>
</mat-list-item>
</mat-nav-list>
<mat-nav-list>
<mat-list-item matListItemLine *ngFor="let stat of stats">
<label>{{ stat.id }} : {{ stat.values }}</label>
</mat-list-item>
</mat-nav-list>
<div style="display: inline-block; position: relative; width: 100%;">
<canvas baseChart
[data]="barChartData"
[options]="barChartOptions"
[plugins]="barChartPlugins"
[legend]="barChartLegend"
[type]="barChartType">
</canvas>
</div>
<div class="chart-container">
<canvas
baseChart
[data]="barChartData"
[options]="barChartOptions"
[plugins]="barChartPlugins"
[legend]="barChartLegend"
[type]="barChartType"
>
</canvas>
</div>
<div>
<button mat-raised-button color="accent" (click)="onLoadTable()" >{{ 'ListTunnelFlight_LoadTable' | translate }}</button>
<div>
<button mat-raised-button color="accent" (click)="onLoadTable()">
{{ "ListTunnelFlight_LoadTable" | translate }}
</button>
<table mat-table [dataSource]="dataSourceTable" *ngIf="dataSourceTable?.data.length">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>ID</th>
<td mat-cell *matCellDef="let element">
<span class="smallSpanWithBreakWord" [innerHTML]="element.id"></span>
</td>
</ng-container>
<table
mat-table
[dataSource]="dataSourceTable"
*ngIf="dataSourceTable?.data.length"
>
<ng-container matColumnDef="id">
<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">
<th mat-header-cell *matHeaderCellDef>Tunnel</th>
<td mat-cell *matCellDef="let element">
<span class="smallSpanWithBreakWord" [innerHTML]="element.tunnel.name"></span>
</td>
</ng-container>
<ng-container matColumnDef="tunnel">
<th mat-header-cell *matHeaderCellDef>Tunnel</th>
<td mat-cell *matCellDef="let element">
<span
class="smallSpanWithBreakWord"
[innerHTML]="element.tunnel.name"
></span>
</td>
</ng-container>
<ng-container matColumnDef="jumpType">
<th mat-header-cell *matHeaderCellDef>Jump Type</th>
<td mat-cell *matCellDef="let element">
<span class="smallSpanWithBreakWord" [innerHTML]="element.jumpType.name"></span>
</td>
</ng-container>
<ng-container matColumnDef="jumpType">
<th mat-header-cell *matHeaderCellDef>Jump Type</th>
<td mat-cell *matCellDef="let element">
<span
class="smallSpanWithBreakWord"
[innerHTML]="element.jumpType.name"
></span>
</td>
</ng-container>
<ng-container matColumnDef="nbMinutes">
<th mat-header-cell *matHeaderCellDef>Minutes</th>
<td mat-cell *matCellDef="let element">
<span class="smallSpanWithBreakWord" [innerHTML]="element.nbMinutes"></span>
</td>
</ng-container>
<ng-container matColumnDef="nbMinutes">
<th mat-header-cell *matHeaderCellDef>Minutes</th>
<td mat-cell *matCellDef="let element">
<span
class="smallSpanWithBreakWord"
[innerHTML]="element.nbMinutes"
></span>
</td>
</ng-container>
<ng-container matColumnDef="notes">
<th mat-header-cell *matHeaderCellDef>Notes</th>
<td mat-cell *matCellDef="let element">
<span class="smallSpanWithBreakWord" [innerHTML]="element.notes"></span>
</td>
</ng-container>
<ng-container matColumnDef="notes">
<th mat-header-cell *matHeaderCellDef>Notes</th>
<td mat-cell *matCellDef="let element">
<span
class="smallSpanWithBreakWord"
[innerHTML]="element.notes"
></span>
</td>
</ng-container>
<ng-container matColumnDef="flightDate">
<th mat-header-cell *matHeaderCellDef>Date</th>
<td mat-cell *matCellDef="let element">
<span class="smallSpanWithBreakWord" [innerHTML]="element.flightDate | date: 'yyyy-MM-dd'"></span>
</td>
</ng-container>
<ng-container matColumnDef="flightDate">
<th mat-header-cell *matHeaderCellDef>Date</th>
<td mat-cell *matCellDef="let element">
<span
class="smallSpanWithBreakWord"
[innerHTML]="element.flightDate | date : 'yyyy-MM-dd'"
></span>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef style="min-width: 80px;"></th>
<td mat-cell *matCellDef="let element" style="text-align: left;">
<mat-icon aria-hidden="false" aria-label="Delete this jump" style="cursor: pointer;"
(click)='delete(element)'>delete</mat-icon>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef style="min-width: 80px"></th>
<td mat-cell *matCellDef="let element" style="text-align: left">
<mat-icon
aria-hidden="false"
aria-label="Delete this jump"
style="cursor: pointer"
(click)="delete(element)"
>delete</mat-icon
>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>
</div>