- add bulma style

- add components: messages, locate-button
- move index.html into src folder
- move to angular build tools
- styles.css -> styles.scss

src/app/services/dataset-api.service.ts

@@ -2,7 +2,7 @@
 // https://github.com/52North/helgoland-toolbox/blob/495f75cadcc3e7232206db1cd5dd8bbf3a172c4b/libs/core/src/lib/abstract-services/api-interface.ts#L6
 // https://github.com/52North/helgoland-toolbox/blob/495f75cadcc3e7232206db1cd5dd8bbf3a172c4b/libs/core/src/lib/api-communication/connectors/dataset-api-v3-connector/api-v3-interface.ts#L321
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders  } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Phenomenon } from '../../shared/models/phenomenon';
 import { Station } from '../../shared/models/station';
@@ -10,6 +10,7 @@ import { Station } from '../../shared/models/station';
 import { HttpService } from './http.service';
 import { HttpRequestOptions } from '../../shared/models/http-requests';
 import { HttpParams } from '@angular/common/http';
+import { MessageService } from './message.service';
 
 
 // @Injectable({
@@ -22,17 +23,20 @@ export class DatasetApiService {
     // constructor() { }
     constructor(
         private httpClient: HttpClient,
-        protected httpService: HttpService,) {
+        protected httpService: HttpService,
+        private messageService: MessageService) {
     }
 
-    public getPhenomena(apiUrl: string, params?, options?) {
-        const url = this.createRequestUrl(apiUrl, 'phenomena');        
+    public getPhenomena(apiUrl: string, params?: any, options?: any) {
+        const url = this.createRequestUrl(apiUrl, 'phenomena');
         return this.requestApi<Phenomenon[]>(url, params, options);
     }
 
-    public getStations(apiUrl: string, params?, options?: HttpRequestOptions): Observable<Station[]> {
+    public getStations(apiUrl: string, params?: any, options?: HttpRequestOptions): Observable<Station[]> {
         const url = this.createRequestUrl(apiUrl, 'features');
-        return this.requestApi<Station[]>(url, params, options);
+        let stations = this.requestApi<Station[]>(url, params, options);
+        this.messageService.add('StationService: fetched stations');
+        return stations;
     }
 
 
@@ -43,13 +47,12 @@ export class DatasetApiService {
         return requestUrl;
     }
 
-    protected requestApi<T>(
-        url: string, params: HttpParams = new HttpParams(), options: HttpRequestOptions = {}
+    protected requestApi<T>(url: string, params: HttpParams = new HttpParams(), options: HttpRequestOptions = {}
     ): Observable<T> {
         return this.httpService.client(options).get<T>(url,
             {
                 params,
-                headers: this.createBasicAuthHeader(options.basicAuthToken)
+                headers: this.createBasicAuthHeader(options.basicAuthToken as string)
             }
         );
     }

src/app/services/marker.service.ts

@@ -36,7 +36,7 @@ export class MarkerService {
   makeCapitalCircleMarkers(map: Map): void {
     this.http.get(this.capitalsUrl).subscribe((res: any) => {
 
-      let maxPop = Math.max(...res.features.map(x => x.properties.population), 0);
+      let maxPop = Math.max(...res.features.map((x: any) => x.properties.population), 0);
 
       for (const c of res.features) {
         const lon = c.geometry.coordinates[0];

src/app/services/message.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MessageService {
+
+  constructor() { }
+
+  messages: string[] = [];
+
+  add(message: string) {
+    this.messages.push(message);
+  }
+
+  clear() {
+    this.messages = [];
+  }
+}

src/app/services/mock-stations.ts

@@ -1,72 +1,73 @@
 import { Station } from '../../shared/models/station';
 
-export const STATIONS: Station[] = [
-    {
-        id: '11',
-        label: 'Dr Nice',
-        geometry: {
-            "type": "Point",
-            "coordinates": [125.6, 10.1]
-        }
-    },
-    {
-        id: '12', label: 'Narco', geometry: {
-            "type": "Point",
-            "coordinates": [125.6, 10.1]
-        }
-    },
-    {
-        id: '13', label: 'Bombasto', geometry: {
-            "type": "Point",
-            "coordinates": [125.6, 10.1]
-        }
-    },
-    {
-        id: '14', label: 'Celeritas', geometry: {
-            "type": "Point",
-            "coordinates": [125.6, 10.1]
-        }
-    },
-    {
-        id: '15', label: 'Magneta', geometry: {
-            "type": "Point",
-            "coordinates": [125.6, 10.1]
-        }
-    },
-    {
-        id: '16', label: 'RubberMan', geometry: {
-            "type": "Point",
-            "coordinates": [125.6, 10.1]
-        },
-    },
-    {
-        id: '16', label: 'RubberMan', geometry: {
-            "type": "Point",
-            "coordinates": [125.6, 10.1]
-        },
-    },
-    {
-        id: '17', label: 'Dynama', geometry: {
-            "type": "Point",
-            "coordinates": [125.6, 10.1]
-        },
-    },
-    {
-        id: '18', label: 'Dr IQ', geometry: {
-            "type": "Point",
-            "coordinates": [125.6, 10.1]
-        },
-    },
-    {
-        id: '19', label: 'Magma', geometry: {
-            "type": "Point",
-            "coordinates": [125.6, 10.1]
-        },
-    },
-    {
-        id: '20', label: 'Tornado', geometry: {
-            "type": "Point",
-            "coordinates": [125.6, 10.1]
-        },
-    }
-];
+export const STATIONS: Station[] = [];
+// export const STATIONS: Station[] = [
+//     {
+//         id: '11',
+//         label: 'Dr Nice',
+//         geometry: {
+//             "type": "Point",
+//             "coordinates": [125.6, 10.1]
+//         }
+//     },
+//     {
+//         id: '12', label: 'Narco', geometry: {
+//             "type": "Point",
+//             "coordinates": [125.6, 10.1]
+//         }
+//     },
+//     {
+//         id: '13', label: 'Bombasto', geometry: {
+//             "type": "Point",
+//             "coordinates": [125.6, 10.1]
+//         }
+//     },
+//     {
+//         id: '14', label: 'Celeritas', geometry: {
+//             "type": "Point",
+//             "coordinates": [125.6, 10.1]
+//         }
+//     },
+//     {
+//         id: '15', label: 'Magneta', geometry: {
+//             "type": "Point",
+//             "coordinates": [125.6, 10.1]
+//         }
+//     },
+//     {
+//         id: '16', label: 'RubberMan', geometry: {
+//             "type": "Point",
+//             "coordinates": [125.6, 10.1]
+//         },
+//     },
+//     {
+//         id: '16', label: 'RubberMan', geometry: {
+//             "type": "Point",
+//             "coordinates": [125.6, 10.1]
+//         },
+//     },
+//     {
+//         id: '17', label: 'Dynama', geometry: {
+//             "type": "Point",
+//             "coordinates": [125.6, 10.1]
+//         },
+//     },
+//     {
+//         id: '18', label: 'Dr IQ', geometry: {
+//             "type": "Point",
+//             "coordinates": [125.6, 10.1]
+//         },
+//     },
+//     {
+//         id: '19', label: 'Magma', geometry: {
+//             "type": "Point",
+//             "coordinates": [125.6, 10.1]
+//         },
+//     },
+//     {
+//         id: '20', label: 'Tornado', geometry: {
+//             "type": "Point",
+//             "coordinates": [125.6, 10.1]
+//         },
+//     }
+// ];

src/app/services/station.service.ts

@@ -1,18 +1,22 @@
 import { Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
-import { Station } from 'shared/models/station';
+import { Station } from '../../shared/models/station';
+import { MessageService } from './message.service';
 import { STATIONS } from './mock-stations';
 
 @Injectable({
 	providedIn: 'root'
 })
 export class StationService {
+private messageService;
 
-	constructor() { }
+	constructor(messageService: MessageService) {
+		this.messageService = messageService;
+	}
 
 	getStations(): Observable<Station[]> {
 		const stations = of(STATIONS);
-		// this.messageService.add('HeroService: fetched heroes');
+		this.messageService.add('StationService: fetched stations');
 		return stations;
 	}
 
@@ -20,7 +24,7 @@ export class StationService {
 		// For now, assume that a hero with the specified `id` always exists.
 		// Error handling will be added in the next step of the tutorial.
 		const station = STATIONS.find(h => h.id === id)!;
-		// this.messageService.add(`HeroService: fetched hero id=${id}`);
+		this.messageService.add(`StationService: fetched station id=${id}`);
 		return of(station);
 	}
 }