- 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/dashboard/dashboard.component.css

@@ -4,7 +4,7 @@ h2 {
     text-align: center;
   }
   
-  .heroes-menu {
+  .stations-menu {
     padding: 0;
     margin: auto;
     max-width: 1000px;
@@ -18,7 +18,7 @@ h2 {
     align-items: flex-start;
   }
   
-  a {
+  a.station {
     background-color: #3f525c;
     border-radius: 2px;
     padding: 1rem;

src/app/dashboard/dashboard.component.html

@@ -1,7 +1,7 @@
-<h2>Top Heroes</h2>
-<div class="heroes-menu">
-  <a *ngFor="let station of stations"
+<h2>Stations</h2>
+<div class="stations-menu">
+  <a class="station" *ngFor="let station of stations"
     routerLink="/detail/{{station.id}}">
-    {{ station.label }}
+    {{ station.properties.label }}
   </a>
 </div>

src/app/dashboard/dashboard.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { StationService } from '../services/station.service';
+// import { StationService } from '../services/station.service';
+import { DatasetApiService } from '../services/dataset-api.service';
 import { Station } from '../../shared/models/station';
 
 @Component({
@@ -11,15 +12,19 @@ export class DashboardComponent implements OnInit {
 
 	public stations: Station[] = [];
 
-	constructor(private stationService: StationService) { }
+	constructor(private datasetApiService: DatasetApiService) { }
 
 	ngOnInit() {
 		this.getStations();
 	}
 
 	getStations(): void {
-		this.stationService.getStations()
-			.subscribe(stations => this.stations = stations);
+		// this.stationService.getStations()
+		// 	.subscribe(stations => this.stations = stations);
+		this.datasetApiService.getStations('https://geomon.geologie.ac.at/52n-sos-webapp/api/')
+		.subscribe((stations) => {
+			this.stations = stations
+		});
 	}
 
 }