- add platform-detail.component

- remove helgoland modules depiction and selector and angular/forms

src/app/app-routing.module.ts

@@ -5,6 +5,7 @@ import { DiagramViewComponent } from './views/diagram-view/diagram-view.componen
 //neu
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { MapViewComponent } from './views/map-view/map-view.component';
+import { PlatformDetailComponent } from './components/platform-detail/platform-detail.component';
 // import { HeroDetailComponent } from './hero-detail/hero-detail.component';
 
 // const routes: Routes = [];
@@ -13,7 +14,7 @@ const routes: Routes = [
   { path: '', redirectTo: '/map', pathMatch: 'full' },
   
   { path: 'dashboard', component: DashboardComponent },
-//   { path: 'detail/:id', component: HeroDetailComponent },
+  { path: 'station/:id', component: PlatformDetailComponent },
   { path: 'map', component: MapViewComponent },
   { path: 'diagram', component: DiagramViewComponent }
 ];

src/app/components/platform-detail/platform-detail.component.html

@@ -0,0 +1,10 @@
+<div>
+    <h2>{{ platform.label }} Details</h2>
+    <div><span>id: </span>{{platform.id}}</div>
+    <div>
+      <label for="hero-name">Platform label: </label>
+      <!-- <input id="hero-name" [(ngModel)]="hero.name" placeholder="Hero name"/> -->
+      <!-- <input type="text" id="hero-name" [(ngModel)]="platform.label" placeholder="Platform label"/> -->
+    </div>
+    <button (click)="goBack()">go back</button>
+  </div>

src/app/components/platform-detail/platform-detail.component.scss

@@ -0,0 +1,24 @@
+/* StationDetailComponent's private CSS styles */
+label {
+    color: #435960;
+    font-weight: bold;
+  }
+  input {
+    font-size: 1em;
+    padding: .5rem;
+  }
+  button {
+    margin-top: 20px;
+    background-color: #eee;
+    padding: 1rem;
+    border-radius: 4px;
+    font-size: 1rem;
+  }
+  button:hover {
+    background-color: #cfd8dc;
+  }
+  button:disabled {
+    background-color: #eee;
+    color: #ccc;
+    cursor: auto;
+  }

src/app/components/platform-detail/platform-detail.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+import { GeomonPlatform } from '../../../shared/models/platform';
+import { DatasetApiService } from '../../services/dataset-api.service';
+
+// import { Hero } from '../hero';
+// import { HeroService } from '../hero.service';
+
+@Component({
+  selector: 'geomon-platform-detail',
+  templateUrl: './platform-detail.component.html',
+  styleUrls: ['./platform-detail.component.scss']
+})
+export class PlatformDetailComponent implements OnInit {
+
+  platform: GeomonPlatform;
+
+  constructor(
+    private route: ActivatedRoute,
+    private datasetService: DatasetApiService,
+    private location: Location
+  ) {}
+
+  ngOnInit(): void {
+    this.getHero();
+  }
+
+  getHero(): void {
+    const id = String(this.route.snapshot.paramMap.get('id'));
+    this.datasetService.getPlatform(id, 'https://geomon.geologie.ac.at/52n-sos-webapp/api/')
+		.subscribe((platform) => {
+			this.platform = platform;
+		});   
+    
+   
+  }
+
+  goBack(): void {
+    this.location.back();
+  }
+
+}

src/app/dashboard/dashboard.component.html

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

src/app/views/map-view/map-view.component.ts

@@ -2,7 +2,8 @@ import { Component, OnInit } from '@angular/core';
 
 import { ParameterFilter } from '@helgoland/core';
 import { GeomonPlatform } from './../../../shared/models/platform';
-import { LayerOptions } from '@helgoland/map';
+// import { LayerOptions } from '@helgoland/map';
+import { LayerOptions } from '../../map/map-options';
 import { Marker, MapOptions, Control, icon, LatLngBoundsExpression } from 'leaflet';
 
 import { Station } from '../../../shared/models/station';