Merge branch 'master' of https://home.git.sebastienandre.com/sandre/SkydiveLogs

Back/skydiveLogs-api.Business/JumpService.cs

@@ -39,7 +39,7 @@ namespace skydiveLogs_api.Business
             jump.JumpType = selectedJumpType;
             jump.DropZone = selectedDropZone;
             jump.Gear = selectedGear;
-            jump.UserId = connectedUser.Id;
+            jump.User = connectedUser;
 
             _jumpRepository.Add(jump);
         }
@@ -51,7 +51,7 @@ namespace skydiveLogs_api.Business
 
         public IEnumerable<Jump> GetAllJumps(User connectedUser)
         {
-            return _jumpRepository.GetAll(connectedUser.Id);
+            return _jumpRepository.GetAll(connectedUser);
         }
 
         public Jump GetJumpById(int id)

Back/skydiveLogs-api.Data/ImageRepository.cs

@@ -19,7 +19,15 @@ namespace skydiveLogs_api.Data
 
         public IEnumerable<Image> GetAll()
         {
-            return _col.FindAll().ToList();
+            throw new System.NotImplementedException();
+        }
+
+        public IEnumerable<Image> GetAll(User user)
+        {
+            return _col.Include(x => x.User)
+                       .Query()
+                       .Where(j => j.User == user)
+                       .ToList();
         }
 
         public Image GetById(int id)

Back/skydiveLogs-api.Data/Interface/IImageRepository.cs

@@ -1,9 +1,11 @@
-using skydiveLogs_api.Model;
+using System.Collections.Generic;
+using skydiveLogs_api.Model;
 
 
 namespace skydiveLogs_api.Data.Interface
 {
     public interface IImageRepository : IRepository<Image>
     {
+        IEnumerable<Image> GetAll(User user);
     }
 }

Back/skydiveLogs-api.Data/Interface/IJumpRepository.cs

@@ -5,7 +5,7 @@ namespace skydiveLogs_api.Data.Interface
 {
     public interface IJumpRepository : IRepository<Jump>
     {
-        IEnumerable<Jump> GetAll(int userId);
+        IEnumerable<Jump> GetAll(User user);
 
     }
 }

Back/skydiveLogs-api.Data/JumpRepository.cs

@@ -1,5 +1,4 @@
 using System.Collections.Generic;
-using System.Linq;
 
 using LiteDB;
 
@@ -17,14 +16,15 @@ namespace skydiveLogs_api.Data
             _col = _dataProvider.CollOfJump;
         }
 
-        public IEnumerable<Jump> GetAll(int userId)
+        public IEnumerable<Jump> GetAll(User user)
         {
             return _col.Include(x => x.Aircraft)
                        .Include(x => x.DropZone)
                        .Include(x => x.Gear)
                        .Include(x => x.JumpType)
-                       .FindAll()
+                       .Include(x => x.User)
-                       .Where(j => j.UserId == userId)
+                       .Query()
+                       .Where(j => j.User == user)
                        .ToList();
         }
 

Back/skydiveLogs-api.Data/LiteDbProvider.cs

@@ -14,6 +14,7 @@ namespace skydiveLogs_api.Data
             BsonMapper.Global.Entity<Jump>().DbRef(x => x.Aircraft, "Aircraft");
             BsonMapper.Global.Entity<Jump>().DbRef(x => x.DropZone, "DropZone");
             BsonMapper.Global.Entity<Jump>().DbRef(x => x.Gear, "Gear");
+            BsonMapper.Global.Entity<Jump>().DbRef(x => x.User, "User");
 
             BsonMapper.Global.Entity<Image>().DbRef(x => x.User, "User");
         }

Back/skydiveLogs-api.Model/Aircraft.cs

@@ -5,5 +5,7 @@
         public int Id { get; set; }
 
         public string Name { get; set; }
+
+        public string ImageData { get; set; }
     }
 }

Back/skydiveLogs-api.Model/Jump.cs

@@ -14,7 +14,7 @@ namespace skydiveLogs_api.Model
 
         public Gear Gear { get; set; }
 
-        public int UserId { get; set; }
+        public User User { get; set; }
 
         public int ExitAltitude { get; set; }
 

Back/skydiveLogs-api/DataContract/AircraftReq.cs

@@ -5,5 +5,7 @@
         public int Id { get; set; }
 
         public string Name { get; set; }
+
+        public string ImageData { get; set; }
     }
 }

Back/skydiveLogs-api/DataContract/AircraftResp.cs

@@ -5,5 +5,7 @@
         public int Id { get; set; }
 
         public string Name { get; set; }
+
+        public string ImageData { get; set; }
     }
 }

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

@@ -1,21 +1,21 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
+import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator } from "@angular/material/paginator";
+import { MatPaginator } from '@angular/material/paginator';
-import { MatTableDataSource } from "@angular/material/table";
+import { MatTableDataSource } from '@angular/material/table';
-import { MatDialog } from "@angular/material/dialog";
+import { MatDialog } from '@angular/material/dialog';
 
-import { AircraftResp } from "../../models/aircraft";
+import { AircraftResp } from '../../models/aircraft';
-import { AircraftService } from "../../services/aircraft.service";
+import { AircraftService } from '../../services/aircraft.service';
-import { ServiceComm } from "../../services/service-comm.service";
+import { ServiceComm } from '../../services/service-comm.service';
-import { NewAircraftComponent } from "../new-aircraft/new-aircraft.component";
+import { NewAircraftComponent } from '../new-aircraft/new-aircraft.component';
-import { AddAction } from "../../models/add-action.enum";
+import { AddAction } from '../../models/add-action.enum';
 
 @Component({
-  selector: "app-list-of-aircrafts",
+  selector: 'app-list-of-aircrafts',
-  templateUrl: "./list-of-aircrafts.component.html",
+  templateUrl: './list-of-aircrafts.component.html',
-  styleUrls: ["./list-of-aircrafts.component.css"]
+  styleUrls: ['./list-of-aircrafts.component.css']
 })
 export class ListOfAircraftsComponent implements OnInit {
-  public displayedColumns: Array<string> = ["id", "name"];
+  public displayedColumns: Array<string> = ['id', 'name'];
   public dataSourceTable: MatTableDataSource<AircraftResp>;
   public resultsLength = 0;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@@ -33,7 +33,7 @@ export class ListOfAircraftsComponent implements OnInit {
         this.getListOfAircrafts();
       }
     });
-    this.serviceComm.UpdatedComponentTitle("List of aircrafts");
+    this.serviceComm.UpdatedComponentTitle('List of aircrafts');
     this.getListOfAircrafts();
   }
 

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

@@ -4,12 +4,12 @@
 
     <table mat-table [dataSource]="dataSourceTable">
       <ng-container matColumnDef="isfavorite">
-        <th mat-header-cell *matHeaderCellDef></th>
+        <th mat-header-cell *matHeaderCellDef style="min-width: 144px;"></th>
-        <td mat-cell *matCellDef="let element" style="text-align: center;">
+        <td mat-cell *matCellDef="let element" style="text-align: left;">
-          <mat-icon aria-hidden="false" aria-label="Favorit" *ngIf="element.isFavorite === true"
+          <mat-icon aria-hidden="false" aria-label="Favorite" *ngIf="element.isFavorite === true"
-            (click)="removeToFavorite(element)">favorite</mat-icon>
+            (click)="removeToFavorite(element)" color="primary" style="cursor: pointer;">favorite</mat-icon>
           <mat-icon aria-hidden="false" aria-label="Not favorite" *ngIf="element.isFavorite === false"
-            (click)="setToFavorite(element)">favorite_border</mat-icon>
+            (click)="setToFavorite(element)" style="cursor: pointer;">favorite_border</mat-icon>
 
           <a href='http://{{element.website}}' target="_blank">
             <mat-icon aria-hidden="false" aria-label="URL to the DZ website">link</mat-icon>
@@ -18,6 +18,9 @@
             target="_blank">
             <mat-icon aria-hidden="false" aria-label="Location of the DZ">map</mat-icon>
           </a>
+          <a href="mailto:{{element.email}}" *ngIf="element.email">
+            <mat-icon aria-hidden="false" aria-label="Contact mail of the DZ">mail_outline</mat-icon>
+          </a>
         </td>
       </ng-container>
 
@@ -39,10 +42,7 @@
           <span class="spanWithBreakWord" [innerHTML]="element.address"></span>
         </td>
       </ng-container>
-      <ng-container matColumnDef="email">
+
-        <th mat-header-cell *matHeaderCellDef>E-mail</th>
-        <td mat-cell *matCellDef="let element">{{element.email}}</td>
-      </ng-container>
       <ng-container matColumnDef="type">
         <th mat-header-cell *matHeaderCellDef>Type</th>
         <td mat-cell *matCellDef="let element">{{element.type}}</td>

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

@@ -1,27 +1,26 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
+import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator } from "@angular/material/paginator";
+import { MatPaginator } from '@angular/material/paginator';
-import { MatTableDataSource } from "@angular/material/table";
+import { MatTableDataSource } from '@angular/material/table';
-import { MatDialog } from "@angular/material/dialog";
+import { MatDialog } from '@angular/material/dialog';
 
-import { AddAction } from "../../models/add-action.enum";
+import { AddAction } from '../../models/add-action.enum';
-import { DropZoneResp } from "../../models/dropzone";
+import { DropZoneResp } from '../../models/dropzone';
-import { DropzoneService } from "../../services/dropzone.service";
+import { DropzoneService } from '../../services/dropzone.service';
-import { ServiceComm } from "../../services/service-comm.service";
+import { ServiceComm } from '../../services/service-comm.service';
-import { NewDropZoneComponent } from "../new-drop-zone/new-drop-zone.component";
+import { NewDropZoneComponent } from '../new-drop-zone/new-drop-zone.component';
 
 @Component({
-  selector: "app-list-of-dzs",
+  selector: 'app-list-of-dzs',
-  templateUrl: "./list-of-dzs.component.html",
+  templateUrl: './list-of-dzs.component.html',
-  styleUrls: ["./list-of-dzs.component.css"],
+  styleUrls: ['./list-of-dzs.component.css'],
 })
 export class ListOfDzsComponent implements OnInit {
   public displayedColumns: Array<string> = [
-    "isfavorite",
+    'isfavorite',
-    "id",
+    'id',
-    "name",
+    'name',
-    "address",
+    'address',
-    "email",
+    'type',
-    "type",
   ];
   public dataSourceTable: MatTableDataSource<DropZoneResp>;
   public resultsLength = 0;
@@ -40,7 +39,7 @@ export class ListOfDzsComponent implements OnInit {
         this.getListOfDropZones();
       }
     });
-    this.serviceComm.UpdatedComponentTitle("List of DZs");
+    this.serviceComm.UpdatedComponentTitle('List of DZs');
     this.getListOfDropZones();
   }
 
@@ -73,8 +72,8 @@ export class ListOfDzsComponent implements OnInit {
 
   openDialogToAdd() {
     this.dialog.open(NewDropZoneComponent, {
-      height: "400px",
+      height: '400px',
-      width: "600px",
+      width: '600px',
     });
   }
 }

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

@@ -1,25 +1,25 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
+import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormGroup, FormControl, Validators } from "@angular/forms";
+import { FormGroup, FormControl, Validators } from '@angular/forms';
-import { MatTableDataSource } from "@angular/material/table";
+import { MatTableDataSource } from '@angular/material/table';
-import { MatPaginator } from "@angular/material/paginator";
+import { MatPaginator } from '@angular/material/paginator';
 
-import { ImageService } from "../../services/image.service";
+import { ImageService } from '../../services/image.service';
-import { ServiceComm } from "../../services/service-comm.service";
+import { ServiceComm } from '../../services/service-comm.service';
-import { ImageResp } from "../../models/Image";
+import { ImageResp } from '../../models/Image';
-import { AddAction } from "../../models/add-action.enum";
+import { AddAction } from '../../models/add-action.enum';
 
 @Component({
-  selector: "app-list-of-images",
+  selector: 'app-list-of-images',
-  templateUrl: "./list-of-images.component.html",
+  templateUrl: './list-of-images.component.html',
-  styleUrls: ["./list-of-images.component.css"],
+  styleUrls: ['./list-of-images.component.css'],
 })
 export class ListOfImagesComponent implements OnInit {
-  public displayedColumns: Array<string> = ["comment", "data"];
+  public displayedColumns: Array<string> = ['comment', 'data'];
   public imgForm: FormGroup;
   public imageError: string;
+  private selectedFile: string;
   public dataSourceTable: MatTableDataSource<ImageResp>;
   public resultsLength = 0;
-  private selectedFile: string;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
   constructor(
@@ -36,8 +36,8 @@ export class ListOfImagesComponent implements OnInit {
     this.getListOfImages();
 
     this.imgForm = new FormGroup({
-      comment: new FormControl("", Validators.required),
+      comment: new FormControl('', Validators.required),
-      image: new FormControl("", Validators.required),
+      image: new FormControl('', Validators.required),
     });
   }
 
@@ -52,16 +52,16 @@ export class ListOfImagesComponent implements OnInit {
   }
 
   public onFileChanged(fileInput: any) {
-    var file = fileInput.dataTransfer
+    const file = fileInput.dataTransfer
       ? fileInput.dataTransfer.files[0]
       : fileInput.target.files[0];
-    const allowed_types = ["image/png", "image/jpeg"];
+    const allowed_types = ['image/png', 'image/jpeg'];
     const max_size = 20971520;
 
     if (!allowed_types.includes(file.type)) {
-      this.imageError = "Only Images are allowed ( JPG | PNG )";
+      this.imageError = 'Only Images are allowed ( JPG | PNG )';
     } else if (file.size > max_size) {
-      this.imageError = "Maximum size allowed is " + max_size / 1000 + "Mb";
+      this.imageError = 'Maximum size allowed is ' + max_size / 1000 + 'Mb';
     } else {
       const reader = new FileReader();
       reader.onload = this.checkAndExtractDataToBase64.bind(this);
@@ -76,16 +76,16 @@ export class ListOfImagesComponent implements OnInit {
     const image = new Image();
     image.src = e.target.result;
     image.onload = (rs) => {
-      const img_height = rs.currentTarget["height"];
+      const img_height = rs.currentTarget['height'];
-      const img_width = rs.currentTarget["width"];
+      const img_width = rs.currentTarget['width'];
 
       if (img_height > max_height && img_width > max_width) {
         this.imageError =
-          "Maximum dimentions allowed " + max_height + "*" + max_width + "px";
+          'Maximum dimentions allowed ' + max_height + '*' + max_width + 'px';
       } else {
         const imgBase64Path = e.target.result;
         this.selectedFile = imgBase64Path;
-        this.imageError = "OK";
+        this.imageError = 'OK';
       }
     };
   }

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

@@ -1,6 +1,13 @@
 <div class="content">
   <div *ngIf="dataSourceTable != null else loading">
     <table mat-table [dataSource]="dataSourceTable">
+      <ng-container matColumnDef="infos">
+        <th mat-header-cell *matHeaderCellDef></th>
+        <td mat-cell *matCellDef="let element" style="text-align: left; cursor: pointer;">
+          <mat-icon aria-hidden="false" aria-label="All informations of the jump">info</mat-icon>
+        </td>
+      </ng-container>
+
       <ng-container matColumnDef="id">
         <th mat-header-cell *matHeaderCellDef>ID</th>
         <td mat-cell *matCellDef="let element">{{element.id}}</td>

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

@@ -1,26 +1,26 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
+import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator } from "@angular/material/paginator";
+import { MatPaginator } from '@angular/material/paginator';
-import { MatTableDataSource } from "@angular/material/table";
+import { MatTableDataSource } from '@angular/material/table';
 
-import { Observable } from "rxjs";
+import { Observable } from 'rxjs';
-import { JumpResp } from "../../models/jump";
+import { JumpResp } from '../../models/jump';
-import { JumpService } from "../../services/jump.service";
+import { JumpService } from '../../services/jump.service';
-import { ServiceComm } from "../../services/service-comm.service";
+import { ServiceComm } from '../../services/service-comm.service';
 
 @Component({
-  selector: "app-list-of-jumps",
+  selector: 'app-list-of-jumps',
-  templateUrl: "./list-of-jumps.component.html",
+  templateUrl: './list-of-jumps.component.html',
-  styleUrls: ["./list-of-jumps.component.css"]
+  styleUrls: ['./list-of-jumps.component.css']
 })
 export class ListOfJumpsComponent implements OnInit {
   public listOfJumps: Observable<Array<JumpResp>>;
   public displayedColumns: Array<string> = [
-    "id",
+    'infos',
-    "jumpDate",
+    'id',
-    "jumpType",
+    'jumpDate',
-    "aircraft",
+    'jumpType',
-    "dropZone",
+    'aircraft',
-    "gear"
+    'dropZone'
   ];
   public dataSourceTable;
   public resultsLength = 0;
@@ -32,7 +32,7 @@ export class ListOfJumpsComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.serviceComm.UpdatedComponentTitle("List of jumps");
+    this.serviceComm.UpdatedComponentTitle('List of jumps');
     this.getListOfJumps();
   }
 

Front/skydivelogs-app/src/app/login-user/login-user.component.html

@@ -2,8 +2,8 @@
   <p>
     <mat-form-field>
       <mat-label>Username</mat-label>
-      <input matInput formControlName="username" [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }"
+      <input matInput #username="matInput" formControlName="username"
-        tabindex="0">
+        [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }">
       <mat-error *ngIf="formCtrls.username.hasError('required')">
         Username is required
       </mat-error>
@@ -16,7 +16,7 @@
     <mat-form-field>
       <mat-label>Password</mat-label>
       <input type="password" matInput formControlName="password"
-        [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }" tabindex="1">
+        [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }">
       <mat-error *ngIf="formCtrls.password.hasError('required')">
         Password is required
       </mat-error>

Front/skydivelogs-app/src/app/login-user/login-user.component.ts

@@ -1,22 +1,24 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
-import { Router, ActivatedRoute } from "@angular/router";
+import { Router, ActivatedRoute } from '@angular/router';
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatInput } from '@angular/material/input';
 
-import { first } from "rxjs/operators";
+import { first } from 'rxjs/operators';
 
-import { AuthenticationService } from "../../services/authentication.service";
+import { AuthenticationService } from '../../services/authentication.service';
 
 @Component({
-  selector: "app-login-user",
+  selector: 'app-login-user',
-  templateUrl: "./login-user.component.html",
+  templateUrl: './login-user.component.html',
-  styleUrls: ["./login-user.component.css"]
+  styleUrls: ['./login-user.component.css']
 })
-export class LoginUserComponent implements OnInit {
+export class LoginUserComponent implements OnInit, AfterViewInit {
   loginForm: FormGroup;
   loading = false;
   submitted = false;
   returnUrl: string;
-  error = "";
+  error = '';
+  @ViewChild('username') userNameInput: MatInput;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -26,26 +28,31 @@ export class LoginUserComponent implements OnInit {
   ) {
     // redirect to home if already logged in
     if (this.authenticationService.currentUserValue) {
-      this.router.navigate(["/"]);
+      this.router.navigate(['/']);
     }
   }
 
+  ngAfterViewInit() {
+    this.userNameInput.focus();
+  }
+
   ngOnInit() {
     this.loginForm = this.formBuilder.group(
       {
-        username: ["", [Validators.required, Validators.minLength(3)]],
+        username: ['', [Validators.required, Validators.minLength(3)]],
         password: [
-          "",
+          '',
           [
             Validators.required /*, Validators.pattern("^[A-Za-z0-9_-]{8,15}$")*/
           ]
         ]
       },
-      { updateOn: "blur" }
+      { updateOn: 'blur' }
     );
 
     // get return url from route parameters or default to '/'
-    this.returnUrl = this.route.snapshot.queryParams["returnUrl"] || "/";
+    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
+
   }
 
   get formCtrls() {

Front/skydivelogs-app/src/app/login/login.component.html

@@ -5,10 +5,10 @@
     </mat-card-header>
     <mat-card-content>
       <mat-tab-group mat-align-tabs="center" animationDuration="0ms">
-        <mat-tab label="Login with a user">
+        <mat-tab label="Login with a user" tabIndex="-1">
           <app-login-user></app-login-user>
         </mat-tab>
-        <mat-tab label="Create and login a user">
+        <mat-tab label="Create and login a user" tabIndex="-1">
           <app-create-user></app-create-user>
         </mat-tab>
       </mat-tab-group>

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

@@ -6,6 +6,10 @@
         <input matInput type="text" formControlName="aircraftName">
       </mat-form-field>
     </p>
+    <p>
+      <input type="file" #fileUpload id="fileUpload" name="fileUpload" accept="image/*" formControlName="image"
+        (change)="onFileChanged($event)" />
+    </p>
 
     <button type="submit" mat-raised-button color="accent">Add</button>
   </form>

Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.ts

@@ -1,16 +1,18 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup, Validators } from "@angular/forms";
+import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { AircraftService } from "../../services/aircraft.service";
+import { AircraftService } from '../../services/aircraft.service';
-import { ServiceComm } from "../../services/service-comm.service";
+import { ServiceComm } from '../../services/service-comm.service';
-import { AddAction } from "../../models/add-action.enum";
+import { AddAction } from '../../models/add-action.enum';
 
 @Component({
-  selector: "app-new-aircraft",
+  selector: 'app-new-aircraft',
-  templateUrl: "./new-aircraft.component.html",
+  templateUrl: './new-aircraft.component.html',
-  styleUrls: ["./new-aircraft.component.css"]
+  styleUrls: ['./new-aircraft.component.css']
 })
 export class NewAircraftComponent implements OnInit {
   public addForm: FormGroup;
+  public imageError: string;
+  private selectedFile: string;
 
   constructor(
     private serviceComm: ServiceComm,
@@ -18,16 +20,59 @@ export class NewAircraftComponent implements OnInit {
   ) {
     this.addForm = new FormGroup(
       {
-        aircraftName: new FormControl("", Validators.required)
+        aircraftName: new FormControl('', Validators.required)
       },
-      { updateOn: "blur" }
+      { updateOn: 'blur' }
     );
   }
 
   ngOnInit() { }
 
   onSubmit(formData) {
-    this.serviceApi.AddAircraft(formData.aircraftName);
+    if (formData.invalid) {
+      return;
+    }
+
+    this.serviceApi.AddAircraft(formData.aircraftName, this.selectedFile);
     this.serviceComm.RefreshData(AddAction.Aircraft);
   }
+
+  public onFileChanged(fileInput: any) {
+    const file = fileInput.dataTransfer
+      ? fileInput.dataTransfer.files[0]
+      : fileInput.target.files[0];
+    const allowed_types = ['image/png', 'image/jpeg'];
+    const max_size = 20971520;
+
+    if (!allowed_types.includes(file.type)) {
+      this.imageError = 'Only Images are allowed ( JPG | PNG )';
+    } else if (file.size > max_size) {
+      this.imageError = 'Maximum size allowed is ' + max_size / 1000 + 'Mb';
+    } else {
+      const reader = new FileReader();
+      reader.onload = this.checkAndExtractDataToBase64.bind(this);
+      reader.readAsDataURL(fileInput.target.files[0]);
+    }
+  }
+
+  private checkAndExtractDataToBase64(e: any) {
+    const max_height = 15200;
+    const max_width = 25600;
+
+    const image = new Image();
+    image.src = e.target.result;
+    image.onload = (rs) => {
+      const img_height = rs.currentTarget['height'];
+      const img_width = rs.currentTarget['width'];
+
+      if (img_height > max_height && img_width > max_width) {
+        this.imageError =
+          'Maximum dimentions allowed ' + max_height + '*' + max_width + 'px';
+      } else {
+        const imgBase64Path = e.target.result;
+        this.selectedFile = imgBase64Path;
+        this.imageError = 'OK';
+      }
+    };
+  }
 }

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

@@ -37,8 +37,8 @@
       <mat-autocomplete #autoDropZone="matAutocomplete" [displayWith]="displayFn">
         <mat-option *ngFor="let dropZone of listOfFilteredDropZone" [value]="dropZone">
           {{dropZone.name}}
-          <img src="../../assets/img/favorite.png" alt="favorite DZ" *ngIf="dropZone.isFavorite === true"
+          <mat-icon aria-hidden="false" aria-label="Favorite" *ngIf="dropZone.isFavorite === true" color="primary">
-            style="width: 16px;">
+            favorite</mat-icon>
         </mat-option>
       </mat-autocomplete>
       <button mat-button *ngIf="selectedDz" matSuffix mat-icon-button aria-label="Clear" (click)="selectedDz=undefined">

Front/skydivelogs-app/src/app/user-profile/user-profile.component.ts

@@ -1,12 +1,12 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormControl, Validators } from "@angular/forms";
+import { FormGroup, FormControl, Validators } from '@angular/forms';
-import { AuthenticationService } from "../../services/authentication.service";
+import { AuthenticationService } from '../../services/authentication.service';
-import { User } from "../../models/user";
+import { User } from '../../models/user';
 
 @Component({
-  selector: "app-user-profile",
+  selector: 'app-user-profile',
-  templateUrl: "./user-profile.component.html",
+  templateUrl: './user-profile.component.html',
-  styleUrls: ["./user-profile.component.css"],
+  styleUrls: ['./user-profile.component.css'],
 })
 export class UserProfileComponent implements OnInit {
   public userForm: FormGroup;
@@ -14,7 +14,7 @@ export class UserProfileComponent implements OnInit {
   constructor(private authenticationService: AuthenticationService) { }
 
   ngOnInit(): void {
-    let currentUser = this.authenticationService.currentUserValue;
+    const currentUser = this.authenticationService.currentUserValue;
 
     this.userForm = new FormGroup(
       {
@@ -32,15 +32,15 @@ export class UserProfileComponent implements OnInit {
           Validators.email,
         ]),
         currentPassword: new FormControl(
-          "",
+          '',
-          Validators.pattern("^[A-Za-z0-9_-]{8,15}$")
+          Validators.pattern('^[A-Za-z0-9_-]{8,15}$')
         ),
         newPassword: new FormControl(
-          "",
+          '',
-          Validators.pattern("^[A-Za-z0-9_-]{8,15}$")
+          Validators.pattern('^[A-Za-z0-9_-]{8,15}$')
         ),
       },
-      { updateOn: "blur" }
+      { updateOn: 'blur' }
     );
   }
 
@@ -49,7 +49,7 @@ export class UserProfileComponent implements OnInit {
       return;
     }
 
-    let updatedUser = new User();
+    const updatedUser = new User();
     updatedUser.login = formData.username;
     updatedUser.password = formData.password;
     updatedUser.firstName = formData.firstname;

Front/skydivelogs-app/src/assets/css/styles.css

@@ -1,9 +1,7 @@
-/* @import 'bootstrap-4.3.1.min.css'; */
-
 html,
 body {
   min-height: 100vh;
-  width: 100vw;
+  /*width: 100vw;*/
   box-sizing: border-box;
   overflow: auto;
 }

Front/skydivelogs-app/src/models/aircraft.ts

@@ -5,6 +5,7 @@ export class AircraftReq {
 
   public id: number;
   public name: string;
+  public imageData: string;
 }
 
 export class AircraftResp {
@@ -14,4 +15,5 @@ export class AircraftResp {
 
   public id: number;
   public name: string;
+  public imageData: string;
 }

Front/skydivelogs-app/src/services/aircraft.service.ts

@@ -1,10 +1,10 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
-import { HttpClient } from "@angular/common/http";
+import { HttpClient } from '@angular/common/http';
-import { Observable } from "rxjs";
+import { Observable } from 'rxjs';
 
-import { AircraftResp, AircraftReq } from "../models/aircraft";
+import { AircraftResp, AircraftReq } from '../models/aircraft';
 
-import { BaseService } from "./base.service";
+import { BaseService } from './base.service';
 
 @Injectable()
 export class AircraftService extends BaseService {
@@ -18,10 +18,11 @@ export class AircraftService extends BaseService {
     });
   }
 
-  public AddAircraft(aircraftName: string) {
+  public AddAircraft(aircraftName: string, dataImg: string) {
     const bodyNewAircraft: AircraftReq = {
       id: 0,
-      name: aircraftName
+      name: aircraftName,
+      imageData: dataImg
     };
 
     this.http

Front/skydivelogs-app/src/services/image.service.ts

@@ -1,10 +1,10 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
-import { HttpClient } from "@angular/common/http";
+import { HttpClient } from '@angular/common/http';
-import { Observable } from "rxjs";
+import { Observable } from 'rxjs';
 
-import { ImageResp, ImageReq } from "../models/Image";
+import { ImageResp, ImageReq } from '../models/Image';
 
-import { BaseService } from "./base.service";
+import { BaseService } from './base.service';
 
 @Injectable()
 export class ImageService extends BaseService {