Mise à jour des packages NPM

+ style dans le profile utilisateur

Front/skydivelogs-app/package.json

@@ -12,39 +12,44 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^9.1.3",
+    "@angular/animations": "^9.1.10",
-    "@angular/cdk": "^9.2.1",
+    "@angular/cdk": "^9.2.4",
-    "@angular/common": "^9.1.3",
+    "@angular/common": "^9.1.10",
-    "@angular/compiler": "^9.1.3",
+    "@angular/compiler": "^9.1.10",
-    "@angular/core": "^9.1.3",
+    "@angular/core": "^9.1.10",
-    "@angular/forms": "^9.1.3",
+    "@angular/forms": "^9.1.10",
-    "@angular/material": "^9.2.1",
+    "@angular/material": "^9.2.4",
-    "@angular/platform-browser": "^9.1.3",
+    "@angular/platform-browser": "^9.1.10",
-    "@angular/platform-browser-dynamic": "^9.1.3",
+    "@angular/platform-browser-dynamic": "^9.1.10",
-    "@angular/router": "^9.1.3",
+    "@angular/router": "^9.1.10",
+    "bufferutil": "^4.0.1",
     "core-js": "^2.6.11",
+    "fibers": "^5.0.0",
+    "html-webpack-plugin": "^4.3.0",
+    "node-sass": "^4.14.1",
     "rxjs": "^6.5.5",
     "rxjs-compat": "^6.5.5",
-    "tslib": "^1.11.1",
+    "tslib": "^1.13.0",
+    "utf-8-validate": "^5.0.2",
     "zone.js": "^0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.900.7",
+    "@angular-devkit/build-angular": "^0.901.7",
-    "@angular/cli": "^9.1.3",
+    "@angular/cli": "^9.1.7",
-    "@angular/compiler-cli": "^9.1.3",
+    "@angular/compiler-cli": "^9.1.10",
-    "@angular/language-service": "^9.1.3",
+    "@angular/language-service": "^9.1.10",
     "@types/jasmine": "~2.8.3",
     "@types/jasminewd2": "^2.0.8",
-    "@types/node": "^12.12.37",
+    "@types/node": "^12.12.47",
     "codelyzer": "^5.2.2",
     "jasmine-core": "~2.8.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "^5.0.2",
+    "karma": "^5.0.9",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "^6.0.0",
+    "protractor": "^7.0.0",
     "ts-node": "~4.1.0",
     "tslint": "~5.9.1",
     "typescript": "~3.7.5"

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

@@ -1,41 +1,40 @@
-<form [formGroup]="imgForm" (ngSubmit)="onSubmit(imgForm.value)" autocomplete="off" style="padding: 10px;">
+<div style="display: flex; flex-direction: row;">
-  <p>
+  <div style="width: 40%;">
-    <input type="file" #fileUpload id="fileUpload" name="fileUpload" accept="image/*" style="display: none;"
+    <form [formGroup]="imgForm" (ngSubmit)="onSubmit(imgForm.value)" autocomplete="off" style="padding: 10px;">
-      formControlName="image" (change)="onFileChanged($event)" />
+      <p>
-    <button (click)="fileUpload.click()">Select File</button>
+        <input type="file" #fileUpload id="fileUpload" name="fileUpload" accept="image/*" formControlName="image"
-  </p>
+          (change)="onFileChanged($event)" />
-  <p>
+      </p>
-    <mat-form-field>
+      <p>
-      <mat-label>Comment about the image</mat-label>
+        <mat-form-field>
-      <input matInput type="text" formControlName="comment" />
+          <mat-label>Comment about the image</mat-label>
-    </mat-form-field>
+          <input matInput type="text" formControlName="comment" />
-  </p>
+        </mat-form-field>
+      </p>
 
-  <button mat-button color="warn" type="submit">
+      <button mat-button color="warn" type="submit">
-    <mat-icon>file_upload</mat-icon>
+        <mat-icon>file_upload</mat-icon>
-    Upload image
+        Upload image
-  </button>
+      </button>
-  <label>{{ imageError }}</label>
+      <label>{{ imageError }}</label>
-</form>
+    </form>
+  </div>
+  <div style="width: 40%;">
+    <table mat-table [dataSource]="dataSourceTable">
+      <ng-container matColumnDef="comment">
+        <th mat-header-cell *matHeaderCellDef>Name</th>
+        <td mat-cell *matCellDef="let element">{{element.comment}}</td>
+      </ng-container>
 
-<table mat-table [dataSource]="dataSourceTable">
+      <ng-container matColumnDef="data">
-  <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef>Image</th>
-    <th mat-header-cell *matHeaderCellDef>ID</th>
+        <td mat-cell *matCellDef="let element"><img src="{{element.data}}" alt="toto"></td>
-    <td mat-cell *matCellDef="let element">{{element.id}}</td>
+      </ng-container>
-  </ng-container>
 
-  <ng-container matColumnDef="comment">
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-    <th mat-header-cell *matHeaderCellDef>Name</th>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-    <td mat-cell *matCellDef="let element">{{element.comment}}</td>
+    </table>
-  </ng-container>
 
-  <ng-container matColumnDef="data">
+    <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
-    <th mat-header-cell *matHeaderCellDef>Manufacturer</th>
+  </div>
-    <td mat-cell *matCellDef="let element"><img src="{{element.data}}" alt="toto"></td>
+</div>
-  </ng-container>
-
-  <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-</table>
-
-<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>

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

@@ -14,7 +14,7 @@ import { AddAction } from "../../models/add-action.enum";
   styleUrls: ["./list-of-images.component.css"],
 })
 export class ListOfImagesComponent implements OnInit {
-  public displayedColumns: Array<string> = ["id", "comment", "data"];
+  public displayedColumns: Array<string> = ["comment", "data"];
   public imgForm: FormGroup;
   public imageError: string;
   public dataSourceTable: MatTableDataSource<ImageResp>;