From a4511563ac484b4e13465c0626d5a29aed9dd9a2 Mon Sep 17 00:00:00 2001
From: Jonas <grann.alsen@gmail.com>
Date: Mon, 26 Oct 2020 14:26:59 +0100
Subject: [PATCH 1/3] feat: Show zones given from backend API

Co-Authored-By: Magnus T Boisen <23081828+boisenme@users.noreply.github.com>
Co-Authored-By: Alechj <Alechj@users.noreply.github.com>
---
 .../pages/dashboard/dashboard.component.html  |   2 +-
 src/app/services/api-base.interface.ts        |   2 +-
 src/app/services/api-base.service.ts          |   4 +-
 src/app/services/drone.service.ts             | 109 ++----------------
 src/app/services/map.service.ts               |  15 +--
 src/app/services/zone.service.spec.ts         |  16 +++
 src/app/services/zone.service.ts              |  20 ++++
 7 files changed, 57 insertions(+), 111 deletions(-)
 create mode 100644 src/app/services/zone.service.spec.ts
 create mode 100644 src/app/services/zone.service.ts

diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html
index b142882..e9abdc3 100644
--- a/src/app/pages/dashboard/dashboard.component.html
+++ b/src/app/pages/dashboard/dashboard.component.html
@@ -44,7 +44,7 @@
         </button>
 
         <button class="button is-rounded is-icon-left has-text-white drone-status-active-icon"
-          style="margin-left: 15px !important;" (click)=mapService.saveSearchArea()
+          style="margin-left: 15px !important;" (click)=droneService.updateZones()
           [attr.disabled]="mapService.polygonExists? null: ''">
           <span class="icon">
             <fa-icon [icon]="faEdit"></fa-icon>
diff --git a/src/app/services/api-base.interface.ts b/src/app/services/api-base.interface.ts
index cc0894c..d39556d 100644
--- a/src/app/services/api-base.interface.ts
+++ b/src/app/services/api-base.interface.ts
@@ -3,7 +3,7 @@ import { Observable } from 'rxjs';
 export interface ApiBaseInterface<T, ID> {
   getAll(): Observable<T[]>;
   get(id: ID): Observable<T>;
-  post(t: T): Observable<T>;
+  post(t: T): Observable<T[]>;
   put(id: ID, t: T): Observable<T>;
   delete(id: ID): Observable<any>;
 }
diff --git a/src/app/services/api-base.service.ts b/src/app/services/api-base.service.ts
index aa260cb..3ffeddd 100644
--- a/src/app/services/api-base.service.ts
+++ b/src/app/services/api-base.service.ts
@@ -29,8 +29,8 @@ export abstract class ApiBaseService<T, ID> implements ApiBaseInterface<T, ID> {
     );
   }
 
-  post(t: T): Observable<T> {
-    return this.httpClient.post<T>(this.apiUrl, t).pipe(
+  post(t: any): Observable<T[]> {
+    return this.httpClient.post<T[]>(this.apiUrl, t).pipe(
       catchError((error) => {
         this.handleServerError(error);
         return EMPTY;
diff --git a/src/app/services/drone.service.ts b/src/app/services/drone.service.ts
index c838952..d0ca766 100644
--- a/src/app/services/drone.service.ts
+++ b/src/app/services/drone.service.ts
@@ -8,6 +8,8 @@ import { ToastrService } from 'ngx-toastr';
 import { ApiBaseService } from './api-base.service';
 import { HttpClient } from '@angular/common/http';
 import { environment } from '../../environments/environment';
+import { ZoneService } from './zone.service';
+import { MapService } from './map.service';
 
 @Injectable({
   providedIn: 'root',
@@ -26,14 +28,15 @@ export class DroneService extends ApiBaseService<Drone, string> {
 
   constructor(
     protected toastService: ToastrService,
-    protected httpClient: HttpClient
+    protected httpClient: HttpClient,
+    protected zoneService: ZoneService,
+    protected mapService: MapService
   ) {
     // Setup base api.
     super(`${environment.api.baseUrl}/drones`, httpClient, toastService);
 
     // Run updateDrones at the given interval (source).
     this.subscription = this.source.subscribe((val) => this.updateDrones());
-    this.updateZones();
   }
 
   /**
@@ -72,102 +75,14 @@ export class DroneService extends ApiBaseService<Drone, string> {
   }
 
   public updateZones(): void {
-    this.droneZones.push({
-      droneUuid: 'test1',
-      zoneColor: this.getRandomZoneColor(),
-      area: [
-        {
-          lat: 57.0530047355616,
-          lng: 9.918189775054937
-        },
-        {
-          lat: 57.0560504891736,
-          lng: 9.92136551052857
-        },
-        {
-          lat: 57.05489523273066,
-          lng: 9.924541246002203
-        },
-        {
-          lat: 57.05549036932661,
-          lng: 9.925270806854254
-        },
-        {
-          lat: 57.05510528203023,
-          lng: 9.9271161666565
-        },
-        {
-          lat: 57.050962423680616,
-          lng: 9.923468362396246
-        },
-        {
-          lat: 57.0518610547464,
-          lng: 9.920807611053473
-        },
-      ],
-      path: [
-        {
-          lat: 57.054244204977,
-          lng: 9.920750783506284
-        },
-        {
-          lat: 57.05361403889979,
-          lng: 9.922553227964292
-        },
-        {
-          lat: 57.05308889233257,
-          lng: 9.924398587766538
-        }
-      ]
-    });
-    this.droneZones.push({
-      droneUuid: 'test2',
-      zoneColor: this.getRandomZoneColor(),
-      area: [
-        {
-          lat: 57.05504997175444,
-          lng: 9.927763159339168
-        },
-        {
-          lat: 57.05077872940066,
-          lng: 9.924115355078914
-        },
-        {
-          lat: 57.050136833578975,
-          lng: 9.926497156684139
-        },
-        {
-          lat: 57.04985673010699,
-          lng: 9.92623966461871
-        },
-        {
-          lat: 57.04912144844144,
-          lng: 9.929522688452938
-        },
-        {
-          lat: 57.05391802367947,
-          lng: 9.93370693451617
-        }
-      ],
-      path: [
-        {
-          lat: 57.05263375930009,
-          lng: 9.92684476238812
-        },
-        {
-          lat: 57.052225301829054,
-          lng: 9.928475545469174
-        },
-        {
-          lat: 57.05191020299586,
-          lng: 9.930149243894467
-        },
-        {
-          lat: 57.05180516945729,
-          lng: 9.93158690792645
-        },
-      ]
+    // Get polygon points.
+    const polygon = this.mapService.getPolygonPaths();
+
+    this.zoneService.post(polygon).subscribe((res) => {
+      this.droneZones = res;
     });
+    this.mapService.clearMap();
+    this.toastService.success('The search area has been successfully updated!', 'Success');
   }
 
   public launchSearch(): void {
diff --git a/src/app/services/map.service.ts b/src/app/services/map.service.ts
index 79b9fe5..0735596 100644
--- a/src/app/services/map.service.ts
+++ b/src/app/services/map.service.ts
@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { ToastrService } from 'ngx-toastr';
+import { DroneService } from './drone.service';
 
 @Injectable({
   providedIn: 'root'
@@ -26,7 +27,8 @@ export class MapService {
     drawingMode: 'polygon'
   };
 
-  constructor(private toastService: ToastrService) { }
+  constructor(
+    private toastService: ToastrService) { }
 
   /**
    * Centers the map from given parameters.
@@ -56,12 +58,12 @@ export class MapService {
     if (this.polygon) {
       const vertices = this.polygon.getPaths().getArray()[0];
       const paths = [];
-      vertices.getArray().forEach((xy: { lat: () => any; lng: () => any; }) => {
+      vertices.getArray().forEach((xy: { lat: () => number; lng: () => number; }) => {
           const latLng = {
             lat: xy.lat(),
             lng: xy.lng()
           };
-          paths.push(JSON.stringify(latLng));
+          paths.push(latLng);
         });
       return paths;
     }
@@ -69,11 +71,4 @@ export class MapService {
       return [];
     }
   }
-
-  public saveSearchArea(): void {
-    this.clearMap();
-    // TODO: Put request
-
-    this.toastService.success('The search area has been successfully updated!', 'Success');
-  }
 }
diff --git a/src/app/services/zone.service.spec.ts b/src/app/services/zone.service.spec.ts
new file mode 100644
index 0000000..7e9dc47
--- /dev/null
+++ b/src/app/services/zone.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ZoneService } from './zone.service';
+
+describe('ZoneService', () => {
+  let service: ZoneService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ZoneService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/services/zone.service.ts b/src/app/services/zone.service.ts
new file mode 100644
index 0000000..b432a20
--- /dev/null
+++ b/src/app/services/zone.service.ts
@@ -0,0 +1,20 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { environment } from 'src/environments/environment';
+import { DroneZone } from '../models/drone-zone.model';
+import { ApiBaseService } from './api-base.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ZoneService extends ApiBaseService<DroneZone, string> {
+
+  constructor(
+    protected toastService: ToastrService,
+    protected httpClient: HttpClient
+  ) {
+    // Setup base api.
+    super(`${environment.api.baseUrl}/search`, httpClient, toastService);
+   }
+}

From 4b9ced65c0b9c67376a23d58acff0c990b295a7e Mon Sep 17 00:00:00 2001
From: Jonas <grann.alsen@gmail.com>
Date: Tue, 27 Oct 2020 12:48:53 +0100
Subject: [PATCH 2/3] fix: Add colors to new DroneZones

---
 src/app/services/drone.service.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/app/services/drone.service.ts b/src/app/services/drone.service.ts
index d0ca766..4645328 100644
--- a/src/app/services/drone.service.ts
+++ b/src/app/services/drone.service.ts
@@ -66,6 +66,10 @@ export class DroneService extends ApiBaseService<Drone, string> {
   }
 
   private getRandomZoneColor(): string {
+    if (this.usedZoneColors.length === 6) {
+      this.usedZoneColors = [];
+    }
+
     for (const color in ZoneColors) {
       if (!this.usedZoneColors.includes(color)) {
         this.usedZoneColors.push(color);
@@ -80,6 +84,9 @@ export class DroneService extends ApiBaseService<Drone, string> {
 
     this.zoneService.post(polygon).subscribe((res) => {
       this.droneZones = res;
+      for (const zone of this.droneZones) {
+        zone.zoneColor = this.getRandomZoneColor();
+      }
     });
     this.mapService.clearMap();
     this.toastService.success('The search area has been successfully updated!', 'Success');

From 09596a0b99b96f6ff8bf11a39a282d6a09128c13 Mon Sep 17 00:00:00 2001
From: Jonas <grann.alsen@gmail.com>
Date: Tue, 8 Dec 2020 13:49:48 +0100
Subject: [PATCH 3/3] feat: the best unit tests

---
 src/app/services/drone.service.spec.ts | 33 ++++++++++++++++++++++++++
 src/app/services/zone.service.spec.ts  |  8 +++++--
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/app/services/drone.service.spec.ts b/src/app/services/drone.service.spec.ts
index fee818f..73c8dfd 100644
--- a/src/app/services/drone.service.spec.ts
+++ b/src/app/services/drone.service.spec.ts
@@ -17,4 +17,37 @@ describe('DroneService', () => {
   it('should be created', () => {
     expect(service).toBeTruthy();
   });
+
+  it('should return the correct color CSS class', () => {
+    expect(service.getDroneColor(0)).toBe('drone-status-idle');
+    expect(service.getDroneColor(1)).toBe('drone-status-idle');
+    expect(service.getDroneColor(2)).toBe('drone-status-active');
+    expect(service.getDroneColor(3)).toBe('drone-status-active');
+    expect(service.getDroneColor(4)).toBe('drone-status-active');
+    expect(service.getDroneColor(5)).toBe('drone-status-active');
+    expect(service.getDroneColor(6)).toBe('drone-status-active');
+    expect(service.getDroneColor(440)).toBe('drone-status-error');
+  });
+
+  it('should return the correct icon CSS class', () => {
+    expect(service.getDroneIconColor(0)).toBe('drone-status-idle-icon');
+    expect(service.getDroneIconColor(1)).toBe('drone-status-idle-icon');
+    expect(service.getDroneIconColor(2)).toBe('drone-status-active-icon');
+    expect(service.getDroneIconColor(3)).toBe('drone-status-active-icon');
+    expect(service.getDroneIconColor(4)).toBe('drone-status-active-icon');
+    expect(service.getDroneIconColor(5)).toBe('drone-status-active-icon');
+    expect(service.getDroneIconColor(6)).toBe('drone-status-active-icon');
+    expect(service.getDroneIconColor(440)).toBe('drone-status-error-icon');
+  });
+
+  it('should check if the livefeed is disabled', () => {
+    expect(service.isLivefeedDisabled(0)).toBeTrue();
+    expect(service.isLivefeedDisabled(1)).toBeTrue();
+    expect(service.isLivefeedDisabled(2)).toBeFalse();
+    expect(service.isLivefeedDisabled(3)).toBeFalse();
+    expect(service.isLivefeedDisabled(4)).toBeFalse();
+    expect(service.isLivefeedDisabled(5)).toBeFalse();
+    expect(service.isLivefeedDisabled(6)).toBeFalse();
+    expect(service.isLivefeedDisabled(440)).toBeTrue();
+  });
 });
diff --git a/src/app/services/zone.service.spec.ts b/src/app/services/zone.service.spec.ts
index 7e9dc47..1ec94f1 100644
--- a/src/app/services/zone.service.spec.ts
+++ b/src/app/services/zone.service.spec.ts
@@ -1,12 +1,16 @@
 import { TestBed } from '@angular/core/testing';
-
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ToastrModule, ToastrService } from 'ngx-toastr';
 import { ZoneService } from './zone.service';
 
 describe('ZoneService', () => {
   let service: ZoneService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      imports: [ToastrModule.forRoot(), HttpClientTestingModule],
+      providers: [ToastrService]
+    });
     service = TestBed.inject(ZoneService);
   });