Changement général pour avoir une bonne

hauteur et largeur sur toutes les pages
This commit is contained in:
Sébastien André
2020-04-29 16:47:24 +02:00
parent e60ad1d3fa
commit 5f89b51db1
33 changed files with 629 additions and 521 deletions

View File

@@ -1,6 +1,5 @@
.hamburger__icon { .hamburger__icon {
position: relative; position: relative;
/* z-index: 101; */
height: 1rem; height: 1rem;
margin-right: 1rem; margin-right: 1rem;
cursor: pointer; cursor: pointer;
@@ -18,9 +17,7 @@
.navigation { .navigation {
position: absolute; position: absolute;
width: 200px; width: 200px;
/* height: 650px; /* height: 100%; */
overflow: hidden; */
height: 100%;
z-index: 101; z-index: 101;
background-color: grey; background-color: grey;
padding: 5px; padding: 5px;

View File

@@ -0,0 +1,7 @@
.content {
height: 90vh;
display: flex;
justify-content: left;
flex-direction: column;
align-items: initial;
}

View File

@@ -1,10 +1,12 @@
<p> <div class="content">
<a routerLink="/summary" routerLinkActive="active" skipLocationChange> <p>
<img src="../../assets/img/summary.png" alt="Summary of jumps"> <a routerLink="/summary" routerLinkActive="active" skipLocationChange>
</a> <img src="../../assets/img/summary.png" alt="Summary of jumps">
</p> </a>
<p> </p>
<a routerLink="/newjump" routerLinkActive="active" skipLocationChange> <p>
<img src="../../assets/img/addJump.png" alt="Add new jumps"> <a routerLink="/newjump" routerLinkActive="active" skipLocationChange>
</a> <img src="../../assets/img/addJump.png" alt="Add new jumps">
</p> </a>
</p>
</div>

View File

@@ -11,3 +11,11 @@ table {
min-width: 200px; min-width: 200px;
word-wrap: break-word; word-wrap: break-word;
} }
.content {
height: 90vh;
display: flex;
justify-content: left;
flex-direction: column;
align-items: initial;
}

View File

@@ -1,4 +1,4 @@
<div *ngIf="dataSourceTable != null else loading" class="table-container"> <div *ngIf="dataSourceTable != null else loading">
<button mat-raised-button color="accent" (click)="openDialogToAdd()">Add a aircraft</button> <button mat-raised-button color="accent" (click)="openDialogToAdd()">Add a aircraft</button>
<table mat-table [dataSource]="dataSourceTable"> <table mat-table [dataSource]="dataSourceTable">

View File

@@ -11,3 +11,11 @@ table {
min-width: 200px; min-width: 200px;
word-wrap: break-word; word-wrap: break-word;
} }
.content {
height: 90vh;
display: flex;
justify-content: left;
flex-direction: column;
align-items: initial;
}

View File

@@ -1,60 +1,62 @@
<div *ngIf="dataSourceTable != null else loading" class="table-container"> <div class="content">
<button mat-raised-button color="accent" (click)="openDialogToAdd()">Add a drop zone</button> <div *ngIf="dataSourceTable != null else loading">
<button mat-raised-button color="accent" (click)="openDialogToAdd()">Add a drop zone</button>
<table mat-table [dataSource]="dataSourceTable"> <table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="isfavorite"> <ng-container matColumnDef="isfavorite">
<th mat-header-cell *matHeaderCellDef></th> <th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element" style="text-align: center;"> <td mat-cell *matCellDef="let element" style="text-align: center;">
<mat-icon aria-hidden="false" aria-label="Favorit" *ngIf="element.isFavorite === true" <mat-icon aria-hidden="false" aria-label="Favorit" *ngIf="element.isFavorite === true"
(click)="removeToFavorite(element)">favorite</mat-icon> (click)="removeToFavorite(element)">favorite</mat-icon>
<mat-icon aria-hidden="false" aria-label="Not favorite" *ngIf="element.isFavorite === false" <mat-icon aria-hidden="false" aria-label="Not favorite" *ngIf="element.isFavorite === false"
(click)="setToFavorite(element)">favorite_border</mat-icon> (click)="setToFavorite(element)">favorite_border</mat-icon>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="id"> <ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>ID</th> <th mat-header-cell *matHeaderCellDef>ID</th>
<td mat-cell *matCellDef="let element">{{element.id}}</td> <td mat-cell *matCellDef="let element">{{element.id}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th> <th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element"> <td mat-cell *matCellDef="let element">
<span class="spanWithBreakWord" [innerHTML]="element.name"></span> <span class="spanWithBreakWord" [innerHTML]="element.name"></span>
<a href='http://{{element.website}}'>ici</a> <a href='http://{{element.website}}'>ici</a>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="latitude"> <ng-container matColumnDef="latitude">
<th mat-header-cell *matHeaderCellDef>Latitude</th> <th mat-header-cell *matHeaderCellDef>Latitude</th>
<td mat-cell *matCellDef="let element">{{element.latitude}}</td> <td mat-cell *matCellDef="let element">{{element.latitude}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="longitude"> <ng-container matColumnDef="longitude">
<th mat-header-cell *matHeaderCellDef>Longitude</th> <th mat-header-cell *matHeaderCellDef>Longitude</th>
<td mat-cell *matCellDef="let element">{{element.longitude}}</td> <td mat-cell *matCellDef="let element">{{element.longitude}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="address"> <ng-container matColumnDef="address">
<th mat-header-cell *matHeaderCellDef>Address</th> <th mat-header-cell *matHeaderCellDef>Address</th>
<td mat-cell *matCellDef="let element"> <td mat-cell *matCellDef="let element">
<span class="spanWithBreakWord" [innerHTML]="element.address"></span> <span class="spanWithBreakWord" [innerHTML]="element.address"></span>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="email"> <ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef>E-mail</th> <th mat-header-cell *matHeaderCellDef>E-mail</th>
<td mat-cell *matCellDef="let element">{{element.email}}</td> <td mat-cell *matCellDef="let element">{{element.email}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="type"> <ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef>Type</th> <th mat-header-cell *matHeaderCellDef>Type</th>
<td mat-cell *matCellDef="let element">{{element.type}}</td> <td mat-cell *matCellDef="let element">{{element.type}}</td>
</ng-container> </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>
<mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
<ng-template #loading>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>
</div> </div>
<mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
<ng-template #loading>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>

View File

@@ -11,3 +11,11 @@ table {
min-width: 200px; min-width: 200px;
word-wrap: break-word; word-wrap: break-word;
} }
.content {
height: 90vh;
display: flex;
justify-content: left;
flex-direction: column;
align-items: initial;
}

View File

@@ -1,48 +1,50 @@
<div *ngIf="dataSourceTable != null else loading" class="table-container"> <div class="content">
<button mat-raised-button color="accent" (click)="openDialogToAdd()">Add a gear</button> <div *ngIf="dataSourceTable != null else loading">
<button mat-raised-button color="accent" (click)="openDialogToAdd()">Add a gear</button>
<table mat-table [dataSource]="dataSourceTable"> <table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="id"> <ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>ID</th> <th mat-header-cell *matHeaderCellDef>ID</th>
<td mat-cell *matCellDef="let element">{{element.id}}</td> <td mat-cell *matCellDef="let element">{{element.id}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th> <th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element">{{element.name}} <a href='http://{{element.website}}'>ici</a></td> <td mat-cell *matCellDef="let element">{{element.name}} <a href='http://{{element.website}}'>ici</a></td>
</ng-container> </ng-container>
<ng-container matColumnDef="manufacturer"> <ng-container matColumnDef="manufacturer">
<th mat-header-cell *matHeaderCellDef>Manufacturer</th> <th mat-header-cell *matHeaderCellDef>Manufacturer</th>
<td mat-cell *matCellDef="let element">{{element.manufacturer}}</td> <td mat-cell *matCellDef="let element">{{element.manufacturer}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="maxSize"> <ng-container matColumnDef="maxSize">
<th mat-header-cell *matHeaderCellDef>Canopy size</th> <th mat-header-cell *matHeaderCellDef>Canopy size</th>
<td mat-cell *matCellDef="let element">{{element.maxSize}} - {{element.minSize}}</td> <td mat-cell *matCellDef="let element">{{element.maxSize}} - {{element.minSize}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="aad"> <ng-container matColumnDef="aad">
<th mat-header-cell *matHeaderCellDef>AAD system</th> <th mat-header-cell *matHeaderCellDef>AAD system</th>
<td mat-cell *matCellDef="let element">{{element.aad}}</td> <td mat-cell *matCellDef="let element">{{element.aad}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="mainCanopy"> <ng-container matColumnDef="mainCanopy">
<th mat-header-cell *matHeaderCellDef>Main canopy</th> <th mat-header-cell *matHeaderCellDef>Main canopy</th>
<td mat-cell *matCellDef="let element">{{element.mainCanopy}}</td> <td mat-cell *matCellDef="let element">{{element.mainCanopy}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="reserveCanopy"> <ng-container matColumnDef="reserveCanopy">
<th mat-header-cell *matHeaderCellDef>Reserve canopy</th> <th mat-header-cell *matHeaderCellDef>Reserve canopy</th>
<td mat-cell *matCellDef="let element">{{element.reserveCanopy}}</td> <td mat-cell *matCellDef="let element">{{element.reserveCanopy}}</td>
</ng-container> </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>
<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
<ng-template #loading>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>
</div> </div>
<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
<ng-template #loading>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>

View File

@@ -11,3 +11,11 @@ table {
min-width: 200px; min-width: 200px;
word-wrap: break-word; word-wrap: break-word;
} }
.content {
height: 90vh;
display: flex;
justify-content: left;
flex-direction: column;
align-items: initial;
}

View File

@@ -1,4 +1,4 @@
<div *ngIf="dataSourceTable != null else loading" class="table-container"> <div *ngIf="dataSourceTable != null else loading">
<button mat-raised-button color="accent" (click)="openDialogToAdd()">Add a jump type</button> <button mat-raised-button color="accent" (click)="openDialogToAdd()">Add a jump type</button>
<table mat-table [dataSource]="dataSourceTable"> <table mat-table [dataSource]="dataSourceTable">

View File

@@ -17,3 +17,11 @@ table {
min-width: 50px; min-width: 50px;
word-wrap: break-word; word-wrap: break-word;
} }
.content {
height: 90vh;
display: flex;
justify-content: left;
flex-direction: column;
align-items: initial;
}

View File

@@ -1,49 +1,51 @@
<div *ngIf="dataSourceTable != null else loading" class="table-container"> <div class="content">
<table mat-table [dataSource]="dataSourceTable"> <div *ngIf="dataSourceTable != null else loading">
<ng-container matColumnDef="id"> <table mat-table [dataSource]="dataSourceTable">
<th mat-header-cell *matHeaderCellDef>ID</th> <ng-container matColumnDef="id">
<td mat-cell *matCellDef="let element">{{element.id}}</td> <th mat-header-cell *matHeaderCellDef>ID</th>
</ng-container> <td mat-cell *matCellDef="let element">{{element.id}}</td>
</ng-container>
<ng-container matColumnDef="jumpDate"> <ng-container matColumnDef="jumpDate">
<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.jumpDate | date: 'yyyy-MM-dd'"></span> <span class="smallSpanWithBreakWord" [innerHTML]="element.jumpDate | date: 'yyyy-MM-dd'"></span>
</td> </td>
</ng-container> </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 class="smallSpanWithBreakWord" [innerHTML]="element.jumpType.name"></span>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="aircraft"> <ng-container matColumnDef="aircraft">
<th mat-header-cell *matHeaderCellDef>Aircraft</th> <th mat-header-cell *matHeaderCellDef>Aircraft</th>
<td mat-cell *matCellDef="let element"> <td mat-cell *matCellDef="let element">
<span class="smallSpanWithBreakWord" [innerHTML]="element.aircraft.name"></span> <span class="smallSpanWithBreakWord" [innerHTML]="element.aircraft.name"></span>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="dropZone"> <ng-container matColumnDef="dropZone">
<th mat-header-cell *matHeaderCellDef>Drop Zone</th> <th mat-header-cell *matHeaderCellDef>Drop Zone</th>
<td mat-cell *matCellDef="let element"> <td mat-cell *matCellDef="let element">
<span class="spanWithBreakWord" [innerHTML]="element.dropZone.name"></span> <span class="spanWithBreakWord" [innerHTML]="element.dropZone.name"></span>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="gear"> <ng-container matColumnDef="gear">
<th mat-header-cell *matHeaderCellDef>Gear</th> <th mat-header-cell *matHeaderCellDef>Gear</th>
<td mat-cell *matCellDef="let element">{{element.gear.name}}</td> <td mat-cell *matCellDef="let element">{{element.gear.name}}</td>
</ng-container> </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>
<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
<ng-template #loading>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>
</div> </div>
<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
<ng-template #loading>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>

View File

@@ -1,5 +1,5 @@
.main-div { .content {
height: 100vh; height: 90vh;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

View File

@@ -1,4 +1,4 @@
<div class="main-div"> <div class="content">
<mat-card style="max-width: 500px;" flex="50"> <mat-card style="max-width: 500px;" flex="50">
<mat-card-header style="padding:10px; background-color: rgba(0,0,0,.03);"> <mat-card-header style="padding:10px; background-color: rgba(0,0,0,.03);">
<mat-card-title>Login to the Skydive log</mat-card-title> <mat-card-title>Login to the Skydive log</mat-card-title>

View File

@@ -1 +1,7 @@
.content {
height: 90vh;
display: flex;
justify-content: left;
flex-direction: column;
align-items: initial;
}

View File

@@ -1,10 +1,12 @@
<form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)"> <div class="content">
<p> <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
<mat-form-field> <p>
<mat-label>Aircraft name</mat-label> <mat-form-field>
<input matInput type="text" formControlName="aircraftName"> <mat-label>Aircraft name</mat-label>
</mat-form-field> <input matInput type="text" formControlName="aircraftName">
</p> </mat-form-field>
</p>
<button type="submit" mat-raised-button color="accent">Add</button> <button type="submit" mat-raised-button color="accent">Add</button>
</form> </form>
</div>

View File

@@ -1 +1,7 @@
.content {
height: 90vh;
display: flex;
justify-content: left;
flex-direction: column;
align-items: initial;
}

View File

@@ -1,40 +1,42 @@
<form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)"> <div class="content">
<p> <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
<mat-form-field> <p>
<mat-label>Dropzone name</mat-label> <mat-form-field>
<input matInput type="text" formControlName="dzName" /> <mat-label>Dropzone name</mat-label>
</mat-form-field> <input matInput type="text" formControlName="dzName" />
</p> </mat-form-field>
<p> </p>
<mat-form-field> <p>
<mat-label>GPS</mat-label> <mat-form-field>
<input matInput type="text" formControlName="gps" /> <mat-label>GPS</mat-label>
</mat-form-field> <input matInput type="text" formControlName="gps" />
</p> </mat-form-field>
<p> </p>
<mat-form-field> <p>
<mat-label>Address of the DZ</mat-label> <mat-form-field>
<textarea matInput formControlName="address"></textarea> <mat-label>Address of the DZ</mat-label>
</mat-form-field> <textarea matInput formControlName="address"></textarea>
</p> </mat-form-field>
<p> </p>
<mat-form-field> <p>
<mat-label>Web site</mat-label> <mat-form-field>
<input matInput type="text" formControlName="website" /> <mat-label>Web site</mat-label>
</mat-form-field> <input matInput type="text" formControlName="website" />
</p> </mat-form-field>
<p> </p>
<mat-form-field> <p>
<mat-label>Mail of contact</mat-label> <mat-form-field>
<input matInput type="text" formControlName="contactMail" /> <mat-label>Mail of contact</mat-label>
</mat-form-field> <input matInput type="text" formControlName="contactMail" />
</p> </mat-form-field>
<p> </p>
<mat-checkbox formControlName="isDz">Is a dropzone</mat-checkbox> <p>
</p> <mat-checkbox formControlName="isDz">Is a dropzone</mat-checkbox>
<p> </p>
<mat-checkbox formControlName="isTunnel">Is a tunnel</mat-checkbox> <p>
</p> <mat-checkbox formControlName="isTunnel">Is a tunnel</mat-checkbox>
</p>
<button type="submit" mat-raised-button color="accent">Add</button> <button type="submit" mat-raised-button color="accent">Add</button>
</form> </form>
</div>

View File

@@ -1 +1,7 @@
.content {
height: 90vh;
display: flex;
justify-content: left;
flex-direction: column;
align-items: initial;
}

View File

@@ -1,46 +1,48 @@
<form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)"> <div class="content">
<p> <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
<mat-form-field> <p>
<mat-label>Name of gear</mat-label> <mat-form-field>
<input matInput type="text" formControlName="name"> <mat-label>Name of gear</mat-label>
</mat-form-field> <input matInput type="text" formControlName="name">
</p> </mat-form-field>
<p> </p>
<mat-form-field> <p>
<mat-label>Manufacturer</mat-label> <mat-form-field>
<input matInput type="text" formControlName="manufacturer"> <mat-label>Manufacturer</mat-label>
</mat-form-field> <input matInput type="text" formControlName="manufacturer">
</p> </mat-form-field>
<p> </p>
<mat-form-field> <p>
<mat-label>Min size of canopy</mat-label> <mat-form-field>
<input matInput type="text" formControlName="minSize"> <mat-label>Min size of canopy</mat-label>
</mat-form-field> <input matInput type="text" formControlName="minSize">
</p> </mat-form-field>
<p> </p>
<mat-form-field> <p>
<mat-label>Max size of canopy</mat-label> <mat-form-field>
<input matInput type="text" formControlName="maxSize"> <mat-label>Max size of canopy</mat-label>
</mat-form-field> <input matInput type="text" formControlName="maxSize">
</p> </mat-form-field>
<p> </p>
<mat-form-field> <p>
<mat-label>AAD system</mat-label> <mat-form-field>
<input matInput type="text" formControlName="aad"> <mat-label>AAD system</mat-label>
</mat-form-field> <input matInput type="text" formControlName="aad">
</p> </mat-form-field>
<p> </p>
<mat-form-field> <p>
<mat-label>Main Canopy</mat-label> <mat-form-field>
<input matInput type="text" formControlName="mainCanopy"> <mat-label>Main Canopy</mat-label>
</mat-form-field> <input matInput type="text" formControlName="mainCanopy">
</p> </mat-form-field>
<p> </p>
<mat-form-field> <p>
<mat-label>Reserve canopy</mat-label> <mat-form-field>
<input matInput type="text" formControlName="reserveCanopy"> <mat-label>Reserve canopy</mat-label>
</mat-form-field> <input matInput type="text" formControlName="reserveCanopy">
</p> </mat-form-field>
</p>
<button mat-raised-button color="accent" type="submit">Add</button> <button mat-raised-button color="accent" type="submit">Add</button>
</form> </form>
</div>

View File

@@ -1 +1,7 @@
.content {
height: 90vh;
display: flex;
justify-content: left;
flex-direction: column;
align-items: initial;
}

View File

@@ -1,10 +1,12 @@
<form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)"> <div class="content">
<p> <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
<mat-form-field> <p>
<mat-label>Jump type name</mat-label> <mat-form-field>
<input matInput type="text" formControlName="jumptypeName"> <mat-label>Jump type name</mat-label>
</mat-form-field> <input matInput type="text" formControlName="jumptypeName">
</p> </mat-form-field>
</p>
<button type="submit" mat-raised-button color="accent">Add</button> <button type="submit" mat-raised-button color="accent">Add</button>
</form> </form>
</div>

View File

@@ -12,3 +12,11 @@
.formNewJumps>* { .formNewJumps>* {
width: 100%; width: 100%;
} }
.content {
height: 90vh;
display: flex;
justify-content: left;
flex-direction: column;
align-items: initial;
}

View File

@@ -1,103 +1,107 @@
<form class="formNewJumps" (ngSubmit)="onFormSubmit()" *ngIf="allDatasLoaded() else loading"> <div class="content">
<mat-form-field> <form class="formNewJumps" (ngSubmit)="onFormSubmit()" *ngIf="allDatasLoaded() else loading">
<mat-label>Choose the jump type</mat-label> <mat-form-field>
<input type="text" matInput [matAutocomplete]="autoJumpType" [(ngModel)]="selectedJumpType" name="selectedJumpType"> <mat-label>Choose the jump type</mat-label>
<mat-autocomplete #autoJumpType="matAutocomplete" [displayWith]="displayFn"> <input type="text" matInput [matAutocomplete]="autoJumpType" [(ngModel)]="selectedJumpType"
<mat-option *ngFor="let jumpType of listOfJumpType" [value]="jumpType"> name="selectedJumpType">
{{jumpType.name}} <mat-autocomplete #autoJumpType="matAutocomplete" [displayWith]="displayFn">
</mat-option> <mat-option *ngFor="let jumpType of listOfJumpType" [value]="jumpType">
</mat-autocomplete> {{jumpType.name}}
<button mat-button *ngIf="selectedJumpType" matSuffix mat-icon-button aria-label="Clear" </mat-option>
(click)="selectedJumpType=undefined"> </mat-autocomplete>
<mat-icon>close</mat-icon> <button mat-button *ngIf="selectedJumpType" matSuffix mat-icon-button aria-label="Clear"
</button> (click)="selectedJumpType=undefined">
</mat-form-field> <mat-icon>close</mat-icon>
</button>
</mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label>Choose the aircraft</mat-label> <mat-label>Choose the aircraft</mat-label>
<input type="text" matInput [matAutocomplete]="autoAircraft" [(ngModel)]="selectedAircraft" name="selectedAircraft"> <input type="text" matInput [matAutocomplete]="autoAircraft" [(ngModel)]="selectedAircraft"
<mat-autocomplete #autoAircraft="matAutocomplete" [displayWith]="displayFn"> name="selectedAircraft">
<mat-option *ngFor="let aircraft of listOfAircraft" [value]="aircraft"> <mat-autocomplete #autoAircraft="matAutocomplete" [displayWith]="displayFn">
{{aircraft.name}} <mat-option *ngFor="let aircraft of listOfAircraft" [value]="aircraft">
</mat-option> {{aircraft.name}}
</mat-autocomplete> </mat-option>
<button mat-button *ngIf="selectedAircraft" matSuffix mat-icon-button aria-label="Clear" </mat-autocomplete>
(click)="selectedAircraft=undefined"> <button mat-button *ngIf="selectedAircraft" matSuffix mat-icon-button aria-label="Clear"
<mat-icon>close</mat-icon> (click)="selectedAircraft=undefined">
</button> <mat-icon>close</mat-icon>
</mat-form-field> </button>
</mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label>Choose the DZ</mat-label> <mat-label>Choose the DZ</mat-label>
<input type="text" matInput [matAutocomplete]="autoDropZone" [(ngModel)]="selectedDz" <input type="text" matInput [matAutocomplete]="autoDropZone" [(ngModel)]="selectedDz"
(ngModelChange)="onChangeDz($event)" name="selectedDz"> (ngModelChange)="onChangeDz($event)" name="selectedDz">
<mat-autocomplete #autoDropZone="matAutocomplete" [displayWith]="displayFn"> <mat-autocomplete #autoDropZone="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let dropZone of listOfFilteredDropZone" [value]="dropZone"> <mat-option *ngFor="let dropZone of listOfFilteredDropZone" [value]="dropZone">
{{dropZone.name}} {{dropZone.name}}
<img src="../../assets/img/favorite.png" alt="favorite DZ" *ngIf="dropZone.isFavorite === true" <img src="../../assets/img/favorite.png" alt="favorite DZ" *ngIf="dropZone.isFavorite === true"
style="width: 16px;"> style="width: 16px;">
</mat-option> </mat-option>
</mat-autocomplete> </mat-autocomplete>
<button mat-button *ngIf="selectedDz" matSuffix mat-icon-button aria-label="Clear" (click)="selectedDz=undefined"> <button mat-button *ngIf="selectedDz" matSuffix mat-icon-button aria-label="Clear" (click)="selectedDz=undefined">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label>Choose the used gear</mat-label> <mat-label>Choose the used gear</mat-label>
<input type="text" matInput [matAutocomplete]="autoGear" [(ngModel)]="selectedGear" name="selectedGear"> <input type="text" matInput [matAutocomplete]="autoGear" [(ngModel)]="selectedGear" name="selectedGear">
<mat-autocomplete #autoGear="matAutocomplete" [displayWith]="displayFn"> <mat-autocomplete #autoGear="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let gear of listOfGear" [value]="gear"> <mat-option *ngFor="let gear of listOfGear" [value]="gear">
{{gear.name}} {{gear.name}}
</mat-option> </mat-option>
</mat-autocomplete> </mat-autocomplete>
<button mat-button *ngIf="selectedGear" matSuffix mat-icon-button aria-label="Clear" <button mat-button *ngIf="selectedGear" matSuffix mat-icon-button aria-label="Clear"
(click)="selectedGear=undefined"> (click)="selectedGear=undefined">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
<mat-checkbox [(ngModel)]="withCutaway" name="withCutaway">With a cutaway ?</mat-checkbox> <mat-checkbox [(ngModel)]="withCutaway" name="withCutaway">With a cutaway ?</mat-checkbox>
<mat-form-field> <mat-form-field>
<input matInput [matDatepicker]="beginDateDp" [(ngModel)]="beginDate" name="beginDate" disabled> <input matInput [matDatepicker]="beginDateDp" [(ngModel)]="beginDate" name="beginDate" disabled>
<mat-datepicker-toggle matSuffix [for]="beginDateDp"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="beginDateDp"></mat-datepicker-toggle>
<mat-datepicker #beginDateDp disabled="false"></mat-datepicker> <mat-datepicker #beginDateDp disabled="false"></mat-datepicker>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput [matDatepicker]="endDateDp" [(ngModel)]="endDate" name="endDate" disabled> <input matInput [matDatepicker]="endDateDp" [(ngModel)]="endDate" name="endDate" disabled>
<mat-datepicker-toggle matSuffix [for]="endDateDp"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="endDateDp"></mat-datepicker-toggle>
<mat-datepicker #endDateDp disabled="false"></mat-datepicker> <mat-datepicker #endDateDp disabled="false"></mat-datepicker>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput placeholder="Exit altitude" [(ngModel)]="exitAltitude" name="exitAltitude" type="number"> <input matInput placeholder="Exit altitude" [(ngModel)]="exitAltitude" name="exitAltitude" type="number">
<button mat-button *ngIf="exitAltitude" matSuffix mat-icon-button aria-label="Clear" <button mat-button *ngIf="exitAltitude" matSuffix mat-icon-button aria-label="Clear"
(click)="exitAltitude=undefined"> (click)="exitAltitude=undefined">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput placeholder="Deploy altitude" [(ngModel)]="deployAltitude" name="deployAltitude" type="number"> <input matInput placeholder="Deploy altitude" [(ngModel)]="deployAltitude" name="deployAltitude" type="number">
<button mat-button *ngIf="deployAltitude" matSuffix mat-icon-button aria-label="Clear" <button mat-button *ngIf="deployAltitude" matSuffix mat-icon-button aria-label="Clear"
(click)="deployAltitude=undefined"> (click)="deployAltitude=undefined">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput placeholder="Count of jumps" [(ngModel)]="countOfJumps" name="countOfJumps" type="number"> <input matInput placeholder="Count of jumps" [(ngModel)]="countOfJumps" name="countOfJumps" type="number">
<button mat-button *ngIf="countOfJumps" matSuffix mat-icon-button aria-label="Clear" <button mat-button *ngIf="countOfJumps" matSuffix mat-icon-button aria-label="Clear"
(click)="countOfJumps=undefined"> (click)="countOfJumps=undefined">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
<br /> <br />
<button mat-button *ngIf="isValidatedForm()">Submit</button> <button mat-button *ngIf="isValidatedForm()">Submit</button>
</form> </form>
<ng-template #loading> <ng-template #loading>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner> <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template> </ng-template>
</div>

View File

@@ -13,3 +13,11 @@
.labelTab.selected { .labelTab.selected {
background-color: gray !important; background-color: gray !important;
} }
.content {
height: 90vh;
display: flex;
justify-content: left;
flex-direction: column;
align-items: initial;
}

View File

@@ -1,118 +1,120 @@
<div> <div class="content">
<label style="float: left; width: 130px;">Total jumps</label> <div>
<span>: {{ totalJumps }}</span> <label style="float: left; width: 130px;">Total jumps</label>
<span>: {{ totalJumps }}</span>
</div>
<div>
<label style="clear: both; float: left; width: 130px;">Total cutaways</label>
<span>: {{ totalCutaways }}</span>
</div>
<div>
<label style="clear: both; float: left; width: 130px;">Last jump</label>
<span>: {{ lastJump }}</span>
</div>
<mat-tab-group mat-align-tabs="left" animationDuration="0ms">
<mat-tab label="Jumps in the last month">
<table mat-table [dataSource]="dsJumpForLastMonthByDz">
<ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container>
<ng-container matColumnDef="nb">
<td mat-cell *matCellDef="let element">{{element.nb}}</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<table mat-table [dataSource]="dsJumpForLastMonthByJumpType">
<ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container>
<ng-container matColumnDef="nb">
<td mat-cell *matCellDef="let element">{{element.nb}}</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</mat-tab>
<mat-tab label="Jumps in the last year">
<table mat-table [dataSource]="dsJumpForLastYearByDz">
<ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container>
<ng-container matColumnDef="nb">
<td mat-cell *matCellDef="let element">{{element.nb}}</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<table mat-table [dataSource]="dsJumpForLastYearByJumpType">
<ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container>
<ng-container matColumnDef="nb">
<td mat-cell *matCellDef="let element">{{element.nb}}</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</mat-tab>
<mat-tab label="By DZ">
<table mat-table [dataSource]="dsNbJumpByDz">
<ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container>
<ng-container matColumnDef="nb">
<td mat-cell *matCellDef="let element">{{element.nb}}</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</mat-tab>
<mat-tab label="By aircraft">
<table mat-table [dataSource]="dsNbJumpByAircraft">
<ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container>
<ng-container matColumnDef="nb">
<td mat-cell *matCellDef="let element">{{element.nb}}</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</mat-tab>
<mat-tab label="By gear">
<table mat-table [dataSource]="dsNbJumpByGear">
<ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container>
<ng-container matColumnDef="nb">
<td mat-cell *matCellDef="let element">{{element.nb}}</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</mat-tab>
<mat-tab label="By jump type">
<table mat-table [dataSource]="dsNbJumpByType">
<ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container>
<ng-container matColumnDef="nb">
<td mat-cell *matCellDef="let element">{{element.nb}}</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</mat-tab>
<mat-tab label="By year">
<table mat-table [dataSource]="dsNbJumpByYear">
<ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container>
<ng-container matColumnDef="nb">
<td mat-cell *matCellDef="let element">{{element.nb}}</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</mat-tab>
</mat-tab-group>
</div> </div>
<div>
<label style="clear: both; float: left; width: 130px;">Total cutaways</label>
<span>: {{ totalCutaways }}</span>
</div>
<div>
<label style="clear: both; float: left; width: 130px;">Last jump</label>
<span>: {{ lastJump }}</span>
</div>
<mat-tab-group mat-align-tabs="left" animationDuration="0ms">
<mat-tab label="Jumps in the last month">
<table mat-table [dataSource]="dsJumpForLastMonthByDz">
<ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container>
<ng-container matColumnDef="nb">
<td mat-cell *matCellDef="let element">{{element.nb}}</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<table mat-table [dataSource]="dsJumpForLastMonthByJumpType">
<ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container>
<ng-container matColumnDef="nb">
<td mat-cell *matCellDef="let element">{{element.nb}}</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</mat-tab>
<mat-tab label="Jumps in the last year">
<table mat-table [dataSource]="dsJumpForLastYearByDz">
<ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container>
<ng-container matColumnDef="nb">
<td mat-cell *matCellDef="let element">{{element.nb}}</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<table mat-table [dataSource]="dsJumpForLastYearByJumpType">
<ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container>
<ng-container matColumnDef="nb">
<td mat-cell *matCellDef="let element">{{element.nb}}</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</mat-tab>
<mat-tab label="By DZ">
<table mat-table [dataSource]="dsNbJumpByDz">
<ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container>
<ng-container matColumnDef="nb">
<td mat-cell *matCellDef="let element">{{element.nb}}</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</mat-tab>
<mat-tab label="By aircraft">
<table mat-table [dataSource]="dsNbJumpByAircraft">
<ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container>
<ng-container matColumnDef="nb">
<td mat-cell *matCellDef="let element">{{element.nb}}</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</mat-tab>
<mat-tab label="By gear">
<table mat-table [dataSource]="dsNbJumpByGear">
<ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container>
<ng-container matColumnDef="nb">
<td mat-cell *matCellDef="let element">{{element.nb}}</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</mat-tab>
<mat-tab label="By jump type">
<table mat-table [dataSource]="dsNbJumpByType">
<ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container>
<ng-container matColumnDef="nb">
<td mat-cell *matCellDef="let element">{{element.nb}}</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</mat-tab>
<mat-tab label="By year">
<table mat-table [dataSource]="dsNbJumpByYear">
<ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container>
<ng-container matColumnDef="nb">
<td mat-cell *matCellDef="let element">{{element.nb}}</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</mat-tab>
</mat-tab-group>

View File

@@ -0,0 +1,7 @@
.content {
height: 90vh;
display: flex;
justify-content: left;
flex-direction: column;
align-items: initial;
}

View File

@@ -1,41 +1,43 @@
<form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm.value)"> <div class="content">
<p> <form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm.value)">
<mat-form-field> <p>
<mat-label>Login</mat-label> <mat-form-field>
<input matInput type="text" formControlName="login" readonly /> <mat-label>Login</mat-label>
</mat-form-field> <input matInput type="text" formControlName="login" readonly />
</p> </mat-form-field>
<p> </p>
<mat-form-field> <p>
<mat-label>Firstname</mat-label> <mat-form-field>
<input matInput type="text" formControlName="firstName" /> <mat-label>Firstname</mat-label>
</mat-form-field> <input matInput type="text" formControlName="firstName" />
</p> </mat-form-field>
<p> </p>
<mat-form-field> <p>
<mat-label>Lastname</mat-label> <mat-form-field>
<input matInput type="text" formControlName="lastName" /> <mat-label>Lastname</mat-label>
</mat-form-field> <input matInput type="text" formControlName="lastName" />
</p> </mat-form-field>
<p> </p>
<mat-form-field> <p>
<mat-label>E-mail</mat-label> <mat-form-field>
<input matInput type="text" formControlName="email" /> <mat-label>E-mail</mat-label>
</mat-form-field> <input matInput type="text" formControlName="email" />
</p> </mat-form-field>
</p>
<p> <p>
<mat-form-field> <mat-form-field>
<mat-label>Current password</mat-label> <mat-label>Current password</mat-label>
<input matInput type="text" formControlName="currentPassword" /> <input matInput type="text" formControlName="currentPassword" />
</mat-form-field> </mat-form-field>
</p> </p>
<p> <p>
<mat-form-field> <mat-form-field>
<mat-label>New password</mat-label> <mat-label>New password</mat-label>
<input matInput type="text" formControlName="newPassword" /> <input matInput type="text" formControlName="newPassword" />
</mat-form-field> </mat-form-field>
</p> </p>
<button type="submit" mat-raised-button color="accent">Update my profile</button> <button type="submit" mat-raised-button color="accent">Update my profile</button>
</form> </form>
</div>

File diff suppressed because one or more lines are too long

View File

@@ -2,15 +2,15 @@
html, html,
body { body {
height: 100%; /* height: 100%; */
height: 100vh;
width: 100vw;
box-sizing: border-box;
} }
body { body {
font-family: Roboto, "Helvetica Neue", sans-serif; font-family: Roboto, "Helvetica Neue", sans-serif;
color: #424242; color: #424242;
/* min-height: 665px;
margin: 10px;
overflow: auto; */
margin: 0; margin: 0;
padding: 10px; padding: 10px;
} }

View File

@@ -2,5 +2,5 @@ export const environment = {
production: true, production: true,
apiUrl: "https://divelog.sebastienandre.com", apiUrl: "https://divelog.sebastienandre.com",
debugMode: false, debugMode: false,
version: "0.5.0" version: "0.6.0",
}; };

View File

@@ -7,5 +7,5 @@ export const environment = {
production: false, production: false,
apiUrl: "http://localhost:5000", apiUrl: "http://localhost:5000",
debugMode: false, debugMode: false,
version: "0.5.0" version: "0.6.0",
}; };