Fix css

Fix the page view

Back/skydiveLogs-api.Ioc/skydiveLogs-api.Ioc.csproj

@@ -6,6 +6,7 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Http.Abstractions" Version="2.2.0" />
     <PackageReference Include="Microsoft.Extensions.Configuration.Abstractions" Version="7.0.0" />
     <PackageReference Include="Microsoft.Extensions.DependencyInjection.Abstractions" Version="7.0.0" />
   </ItemGroup>

Front/skydivelogs-app/angular.json

@@ -23,8 +23,9 @@
             ],
             "styles": [
               "src/assets/css/styles-app-loading.scss",
-              "@angular/material/prebuilt-themes/pink-bluegrey.css",
+              "src/assets/css/styles.css",
-              "src/assets/css/styles.css"
+              "src/assets/css/new-theme.scss",
+              "@angular/material/prebuilt-themes/pink-bluegrey.css"
             ],
             "scripts": [],
             "vendorChunk": true,

Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html

@@ -11,7 +11,7 @@
       </mat-form-field>
     </p>
 
-    <button mat-button color="warn" type="submit">
+    <button mat-icon-button color="warn" type="submit">
       <mat-icon>file_upload</mat-icon>
       Upload image
     </button>

Front/skydivelogs-app/src/app/new-jump/new-jump.component.html

@@ -13,7 +13,7 @@
           {{jumpType.name}}
         </mat-option>
       </mat-autocomplete>
-      <button mat-button *ngIf="selectedJumpType" matSuffix mat-icon-button aria-label="Clear"
+      <button *ngIf="selectedJumpType" matSuffix mat-icon-button aria-label="Clear"
         (click)="selectedJumpType=undefined">
         <mat-icon>close</mat-icon>
       </button>
@@ -28,7 +28,7 @@
           {{aircraft.name}}
         </mat-option>
       </mat-autocomplete>
-      <button mat-button *ngIf="selectedAircraft" matSuffix mat-icon-button aria-label="Clear"
+      <button *ngIf="selectedAircraft" matSuffix mat-icon-button aria-label="Clear"
         (click)="selectedAircraft=undefined">
         <mat-icon>close</mat-icon>
       </button>
@@ -45,7 +45,7 @@
             favorite</mat-icon>
         </mat-option>
       </mat-autocomplete>
-      <button mat-button *ngIf="selectedDz" matSuffix mat-icon-button aria-label="Clear" (click)="resetDz()">
+      <button *ngIf="selectedDz" matSuffix mat-icon-button aria-label="Clear" (click)="resetDz()">
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
@@ -58,7 +58,7 @@
           {{gear.name}} ({{gear.mainCanopy}})
         </mat-option>
       </mat-autocomplete>
-      <button mat-button *ngIf="selectedGear" matSuffix mat-icon-button aria-label="Clear"
+      <button *ngIf="selectedGear" matSuffix mat-icon-button aria-label="Clear"
         (click)="selectedGear=undefined">
         <mat-icon>close</mat-icon>
       </button>
@@ -82,14 +82,14 @@
 
     <mat-form-field>
       <input matInput placeholder="{{ 'NewJump_ExitAlt' | translate }}" [(ngModel)]="exitAltitude" name="exitAltitude" type="number">
-      <button mat-button *ngIf="exitAltitude" matSuffix mat-icon-button aria-label="Clear"
+      <button *ngIf="exitAltitude" matSuffix mat-icon-button aria-label="Clear"
         (click)="exitAltitude=undefined">
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
     <mat-form-field>
       <input matInput placeholder="{{ 'NewJump_DeployAlt' | translate }}" [(ngModel)]="deployAltitude" name="deployAltitude" type="number">
-      <button mat-button *ngIf="deployAltitude" matSuffix mat-icon-button aria-label="Clear"
+      <button *ngIf="deployAltitude" matSuffix mat-icon-button aria-label="Clear"
         (click)="deployAltitude=undefined">
         <mat-icon>close</mat-icon>
       </button>
@@ -97,7 +97,7 @@
 
     <mat-form-field>
       <input matInput placeholder="{{ 'NewJump_Count' | translate }}" [(ngModel)]="countOfJumps" name="countOfJumps" type="number">
-      <button mat-button *ngIf="countOfJumps" matSuffix mat-icon-button aria-label="Clear"
+      <button *ngIf="countOfJumps" matSuffix mat-icon-button aria-label="Clear"
         (click)="countOfJumps=undefined">
         <mat-icon>close</mat-icon>
       </button>
@@ -105,7 +105,7 @@
 
     <mat-form-field>
       <textarea matInput placeholder="{{ 'NewJump_Comments' | translate }}" [(ngModel)]="comments" name="comments" type="text"></textarea>
-      <button mat-button *ngIf="comments" matSuffix mat-icon-button aria-label="Clear"
+      <button *ngIf="comments" matSuffix mat-icon-button aria-label="Clear"
         (click)="comments=undefined">
         <mat-icon>close</mat-icon>
       </button>

Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.html

@@ -1,12 +1,48 @@
 <div class="content">
 
-    <form class="formNewJumps" (ngSubmit)="onFormSubmit()" *ngIf="notLoadingToDisplay() else loading">
+  <form class="formNewJumps" (ngSubmit)="onFormSubmit()" *ngIf="notLoadingToDisplay() else loading">
+    <mat-form-field>
+      <mat-label>{{ 'NewTunnelFlight_ChooseTunnel' | translate }}</mat-label>
+      <input type="text" matInput [matAutocomplete]="autoDropZone" [(ngModel)]="selectedTunnel"
+        (ngModelChange)="onChangeTunnel($event)" name="selectedTunnel">
+      <mat-autocomplete #autoDropZone="matAutocomplete" [displayWith]="displayNameFn">
+        <mat-option *ngFor="let tunnel of listOfFilteredTunnel" [value]="tunnel">
+          {{tunnel.name}}
+        </mat-option>
+      </mat-autocomplete>
+      <button *ngIf="selectedTunnel" matSuffix mat-icon-button aria-label="Clear" (click)="resetTunnel()">
+        <mat-icon>close</mat-icon>
+      </button>
+    </mat-form-field>
 
-        <br />
+    <mat-form-field>
-        <button mat-raised-button color="accent" *ngIf="isValidatedForm()">{{ 'NewJump_Submit' | translate }}</button>
+      <input matInput [matDatepicker]="flightDateDp" [(ngModel)]="flightDate" name="flightDate" disabled>
-    </form>
+      <mat-datepicker-toggle matSuffix [for]="flightDateDp"></mat-datepicker-toggle>
-    
+      <mat-datepicker #flightDateDp disabled="false"></mat-datepicker>
-    <ng-template #loading>
+    </mat-form-field>
-        <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
+
-    </ng-template>
+    <mat-form-field>
+      <input matInput placeholder="{{ 'NewTunnelFlight_Minutes' | translate }}" [(ngModel)]="minutesOfFlight"
+        name="minutesOfFlight" type="number">
+      <button *ngIf="minutesOfFlight" matSuffix mat-icon-button aria-label="Clear" (click)="minutesOfFlight=undefined">
+        <mat-icon>close</mat-icon>
+      </button>
+    </mat-form-field>
+
+    <mat-form-field>
+      <textarea matInput placeholder="{{ 'NewTunnelFlight_Comments' | translate }}" [(ngModel)]="comments"
+        name="comments" type="text"></textarea>
+      <button *ngIf="comments" matSuffix mat-icon-button aria-label="Clear" (click)="comments=undefined">
+        <mat-icon>close</mat-icon>
+      </button>
+    </mat-form-field>
+
+    <br />
+    <button mat-raised-button color="accent" *ngIf="isValidatedForm()">{{ 'NewTunnelFlight_Submit' | translate
+      }}</button>
+  </form>
+
+  <ng-template #loading>
+    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
+  </ng-template>
 </div>

Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.ts

@@ -36,11 +36,11 @@ class PickDateAdapter extends NativeDateAdapter {
   ]
 })
 export class NewTunnelFlightComponent implements OnInit {
-  public beginDate: Date;
+  public flightDate: Date;
-  public endDate: Date;
   public minutesOfFlight: number;
   public selectedTunnel: TunnelResp;
   public listOfTunnel: Array<TunnelResp>;
+  public listOfFilteredTunnel: Array<TunnelResp>;
   public resetForm: boolean;
   public comments: string;
   private countDatasLoaded: number;
@@ -49,7 +49,6 @@ export class NewTunnelFlightComponent implements OnInit {
   constructor(private serviceComm: ServiceComm,
     private serviceTunnel: TunnelService,
     private serviceTunnelFlight: TunnelFlightService,
-    private dateService: DateService,
     private translateService: TranslateService,
     private statsService: StatsService) { }
 
@@ -70,7 +69,7 @@ export class NewTunnelFlightComponent implements OnInit {
     this.pendingAddRequest = true;
 
     this.serviceTunnelFlight.addFlight(this.selectedTunnel.id,
-                                       this.beginDate,
+                                       this.flightDate,
                                        this.minutesOfFlight,
                                        this.comments)
                             .subscribe(() => {
@@ -95,12 +94,14 @@ export class NewTunnelFlightComponent implements OnInit {
     this.serviceTunnel.getListOfTunnels().subscribe((data) => {
       data.sort((a, b) => a.name.localeCompare(b.name));
       this.listOfTunnel = data;
+      this.listOfFilteredTunnel = data;
       this.countDatasLoaded++;
     });
   }
 
   public notLoadingToDisplay(): boolean {
-    return !(this.pendingAddRequest || this.countDatasLoaded !== 1);
+    // return !(this.pendingAddRequest || this.countDatasLoaded > 1);
+    return true;
   }
 
   private updateTitle() {
@@ -110,12 +111,29 @@ export class NewTunnelFlightComponent implements OnInit {
   }
 
   private initForm() {
-    this.endDate = new Date();
+    this.flightDate = new Date();
-    this.endDate.setHours(0, 0, 0, 0);
+    this.flightDate.setHours(0, 0, 0, 0);
-    this.beginDate = this.dateService.AddDays(this.endDate, -1);
 
     this.minutesOfFlight = 1;
     this.selectedTunnel = undefined;
     this.comments = undefined;
   }
+
+  public resetTunnel() {
+    this.selectedTunnel = undefined;
+    this.onChangeTunnel('');
+  }
+
+  public onChangeTunnel(event: any) {
+    let filterValue: string;
+
+    if (event.id === undefined) {
+      filterValue = event.toLowerCase();
+
+      this.listOfFilteredTunnel = this.listOfTunnel;
+      this.listOfFilteredTunnel = this.listOfFilteredTunnel.filter((option) =>
+        option.name.toLowerCase().includes(filterValue)
+      );
+    }
+  }
 }

Front/skydivelogs-app/src/assets/css/Material-Icons.css

@@ -6,7 +6,7 @@
   src: url(../font/Material-Icons-Fallback.woff2) format('woff2');
 }
 
-.material-icons {
+/* .material-icons {
   font-family: 'Material Icons';
   font-weight: normal;
   font-style: normal;
@@ -20,4 +20,29 @@
   direction: ltr;
   -moz-font-feature-settings: 'liga';
   -moz-osx-font-smoothing: grayscale;
+} */
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
 }

Front/skydivelogs-app/src/assets/css/new-theme.scss

@@ -1,10 +1,11 @@
 // https://theme-builder-1623190217839.web.app/
 
-  @use '@angular/material' as mat;
+  // @use '@angular/material' as mat;
 
   @import "Material-Icons";
   @import "Roboto";
 
+  /*
   // Be sure that you only ever include this mixin once!
   @include mat.core();
 
@@ -113,4 +114,5 @@
 
   .dark-theme {
     @include mat.all-component-colors($mat-dark-theme);
-  }
+  }
+  */

Front/skydivelogs-app/src/assets/i18n/en.json

@@ -36,7 +36,7 @@
     "ListJumpTypes_Title" : "List of jump types",
     "ListGears_Title" : "List of gears",
     "ListAircrafts_Title" : "List of aircrafts",
-    "NewTunnelFlight_Title" : "Nouveaux tunnel flights",
+    "NewTunnelFlight_Title" : "New tunnel flights",
 
     "App_Footer" : "Web software to log your skydive jumps - v",
     "App_Nav_Summary" : "Summary",
@@ -111,5 +111,10 @@
     "NewJump_DeployAlt" : "Deploy altitude",
     "NewJump_Count" : "Count of jumps",
     "NewJump_Comments" : "Comments",
-    "NewJump_Submit" : "Submit"
+    "NewJump_Submit" : "Submit",
+
+    "NewTunnelFlight_ChooseTunnel": "Choose the tunnel",
+    "NewTunnelFlight_Minutes": "Minutes of the flight",
+    "NewTunnelFlight_Comments": "Comments",
+    "NewTunnelFlight_Submit": "Submit"
 }

Front/skydivelogs-app/src/assets/i18n/fr.json

@@ -101,15 +101,20 @@
 
     "NewJump_GoToJump" : "Voir les sauts",
     "NewJump_ResetForm" : "Reset du formulaire après l'ajout",
-    "NewJump_ChooseJumpType" : "Choisir un type de saut",
+    "NewJump_ChooseJumpType" : "Choisir le type de saut",
-    "NewJump_ChooseAircraft" : "Choisir un avion largueur",
+    "NewJump_ChooseAircraft" : "Choisir l'avion largueur",
-    "NewJump_ChooseDz" : "Choisir un centre",
+    "NewJump_ChooseDz" : "Choisir le centre",
-    "NewJump_ChooseGear" : "Choisir un piège",
+    "NewJump_ChooseGear" : "Choisir le piège",
     "NewJump_Cutaway" : "Libération ?",
     "NewJump_Special" : "Saut spécial ?",
     "NewJump_ExitAlt" : "Altitude de sortie",
     "NewJump_DeployAlt" : "Altitude d'ouverture",
     "NewJump_Count" : "Nombre de sauts",
     "NewJump_Comments" : "Commentaires",
-    "NewJump_Submit" : "Ajouter"
+    "NewJump_Submit" : "Ajouter",
+
+    "NewTunnelFlight_ChooseTunnel": "Choisir le tunnel",
+    "NewTunnelFlight_Minutes": "Temps de vol(minutes)",
+    "NewTunnelFlight_Comments": "Commentaires",
+    "NewTunnelFlight_Submit": "Ajouter"
 }

Front/skydivelogs-app/src/services/tunnel-flight.service.ts

@@ -8,9 +8,8 @@ import { BaseService } from "./base.service";
 
 @Injectable()
 export class TunnelFlightService extends BaseService {
-  private datePipe: DatePipe;
+  constructor(private http: HttpClient,
-
+             private datePipe: DatePipe) {
-  constructor(private http: HttpClient) {
     super();
   }