From 3eb35703708ef76fd81e8dd4f5ff7cef1c536c25 Mon Sep 17 00:00:00 2001
From: tim-herbst <herbst.tim@icloud.com>
Date: Sun, 20 Dec 2020 17:24:43 +0100
Subject: [PATCH] dynamically load all markers from backend

* make correct api-call (remove dummy url)
* make correct method-invocation in mapcomponent
* remove dummy-data
* add domain-object for bikestation
---
 .../frontend/src/app/map/map.component.ts     |  2 +-
 .../src/app/service/domain/bike-station.ts    | 14 +++--
 .../frontend/src/app/service/map.service.ts   | 55 ++++++-------------
 .../frontend/src/environments/environment.ts  |  2 +-
 4 files changed, 27 insertions(+), 46 deletions(-)

diff --git a/projects/project-3/frontend/src/app/map/map.component.ts b/projects/project-3/frontend/src/app/map/map.component.ts
index 3cee918..852ea4c 100644
--- a/projects/project-3/frontend/src/app/map/map.component.ts
+++ b/projects/project-3/frontend/src/app/map/map.component.ts
@@ -14,7 +14,7 @@ export class MapComponent implements AfterViewInit {
 
   ngAfterViewInit(): void {
     this.service.initMap();
-    this.service.makeStationsWithDummyData();
+    this.service.makeStationMarkers();
   }
 
 
diff --git a/projects/project-3/frontend/src/app/service/domain/bike-station.ts b/projects/project-3/frontend/src/app/service/domain/bike-station.ts
index e0d600f..aeab428 100644
--- a/projects/project-3/frontend/src/app/service/domain/bike-station.ts
+++ b/projects/project-3/frontend/src/app/service/domain/bike-station.ts
@@ -1,20 +1,24 @@
 export interface IBikeStation {
   id?: string;
-  url?: string;
   commonName?: string;
-  placeType?: string;
   lat?: number;
   lon?: number;
+  status?: BikePointStatus;
 }
 
 export class BikeStation implements IBikeStation {
   constructor(
     public id?: string,
-    public url?: string,
     public commonName?: string,
-    public placeType?: string,
     public lat?: number,
-    public lon?: number
+    public lon?: number,
+    public status?: BikePointStatus
   ) {
   }
 }
+
+export class BikePointStatus {
+  NbBikes?: number;
+  NbEmptyDocks?: number;
+  NbDocks?: number;
+}
diff --git a/projects/project-3/frontend/src/app/service/map.service.ts b/projects/project-3/frontend/src/app/service/map.service.ts
index be18a4e..7bc423d 100644
--- a/projects/project-3/frontend/src/app/service/map.service.ts
+++ b/projects/project-3/frontend/src/app/service/map.service.ts
@@ -3,26 +3,8 @@ import * as L from 'leaflet';
 import 'leaflet.markercluster';
 import {HttpClient} from '@angular/common/http';
 import {environment} from '../../environments/environment';
-import {PopupComponent} from '../map/popup/popup.component';
+import {PopUpService} from './pop-up.service';
 
-const dummyData = [
-  {
-    id: 'BikePoints_1',
-    url: '/Place/BikePoints_1',
-    commonName: 'River Street , Clerkenwell',
-    placeType: 'BikePoint',
-    lat: 51.529163,
-    lon: -0.10997
-  },
-  {
-    id: 'BikePoints_2',
-    url: '/Place/BikePoints_2',
-    commonName: 'Phillimore Gardens, Kensington',
-    placeType: 'BikePoint',
-    lat: 51.499606,
-    lon: -0.197574
-  }
-];
 
 const createIcon = L.icon({
   iconUrl: '../../assets/bike-point.png',
@@ -37,11 +19,14 @@ const createIcon = L.icon({
 export class MapService {
   private map;
 
-  constructor(private client: HttpClient) {
+  constructor(
+    private client: HttpClient,
+    private popUpService: PopUpService
+  ) {
   }
 
   public initMap(): void {
-    this.map = L.map('map').setView([51.509865, -0.118092], 13);
+    this.map = L.map('map').setView([51.509865, -0.118092], 14);
     this.map.addLayer(new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
       attribution: 'Map data <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
       minZoom: 0,
@@ -49,32 +34,24 @@ export class MapService {
     }));
   }
 
-  public makeStationsWithDummyData(): void {
-    const markerClusters = L.markerClusterGroup({
-      spiderflyOnMaxZoom: true,
-      showCoverageOnHover: true,
-      zoomToBoundsOnClick: true
-    });
-    for (const station of dummyData) {
-      const marker = L.marker([station.lat, station.lon], {icon: createIcon}).bindPopup(new PopupComponent().bindStation(station));
-      markerClusters.addLayer(marker);
-    }
-    this.map.addLayer(markerClusters);
-  }
-
   public makeStationMarkers(): void {
     this.fetchStationGeoData().then((data) => {
-      for (const station of data.features) {
-        const lat = station.geometry.coordinates[0];
-        const lon = station.geometry.coordinates[1];
-        L.marker([lon, lat]).addTo(this.map);
+      const markerClusters = L.markerClusterGroup({
+        spiderflyOnMaxZoom: true,
+        showCoverageOnHover: true,
+        zoomToBoundsOnClick: true
+      });
+      for (const station of data) {
+        const marker = L.marker([station.lat, station.lon], {icon: createIcon}).bindPopup(this.popUpService.makeAvailabilityPopUp(station));
+        markerClusters.addLayer(marker);
       }
+      this.map.addLayer(markerClusters);
     }).catch((error) => {
       console.log('something went wrong: ' + JSON.stringify(error));
     });
   }
 
   private async fetchStationGeoData(): Promise<any> {
-    return await this.client.get(environment.apiUrl).toPromise();
+    return await this.client.get(environment.apiUrl + 'latest/bikepoints/').toPromise();
   }
 }
diff --git a/projects/project-3/frontend/src/environments/environment.ts b/projects/project-3/frontend/src/environments/environment.ts
index 161da85..8b0a1c5 100644
--- a/projects/project-3/frontend/src/environments/environment.ts
+++ b/projects/project-3/frontend/src/environments/environment.ts
@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  apiUrl: 'http://dummyUrl:1111'
+  apiUrl: 'http://localhost:8080/api/'
 };
 
 /*