- add platform-detail.component

- remove helgoland modules depiction and selector and angular/forms

notes.txt

@@ -233,4 +233,19 @@ import 'chartjs-adapter-moment';
 npm install chartjs-plugin-zoom
 import zoomPlugin from 'chartjs-plugin-zoom';
 
-Chart.register(zoomPlugin);
+Chart.register(zoomPlugin);
+
+
+
+
+npm install --save @helgoland/core
+npm install --save @helgoland/map
+
+
+
+
+
+npm uninstall --save @helgoland/selector
+npm uninstall --save @helgoland/depiction
+npm uninstall --save @angular/forms
+

package.json

@@ -47,7 +47,6 @@
   "dependencies": {
     "@angular/cdk": "^12.2.5",
     "@angular/core": "^12.1.4",
-    "@angular/forms": "^12.1.4",
     "@angular/material": "^12.2.5",
     "@angular/platform-browser": "^12.1.4",
     "@angular/platform-browser-dynamic": "^12.1.4",
@@ -56,9 +55,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@helgoland/core": "^12.0.0-beta.1",
-    "@helgoland/depiction": "^12.0.0-beta.1",
+    "@helgoland/map": "^12.0.1",
-    "@helgoland/map": "^12.0.0-beta.1",
-    "@helgoland/selector": "^12.0.0-beta.1",
     "@ngx-translate/http-loader": "^6.0.0",
     "babel-plugin-transform-typescript-metadata": "^0.3.2",
     "bulma": "^0.9.3",

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';

src/common/graphjs/geomon-timeseries-chart/geomon-timeseries-chart.component.scss

@@ -14,7 +14,7 @@
      height: 80%;
   }
   
-  #line-chart {
+  // #line-chart {
   
-    // border: 1px solid black;
+  //   // border: 1px solid black;
-  }
+  // }

src/common/graphjs/geomon-timeseries-chart/geomon-timeseries-chart.component.ts

@@ -2,7 +2,7 @@ import {
     Input, Component, AfterViewInit, ViewChild, ElementRef, SimpleChanges, DoCheck, IterableDiffer,  IterableDiffers
 } from '@angular/core';
 // import * as d3 from 'd3';
-import { Chart, registerables } from 'chart.js';
+import { Chart, ChartDataset, registerables } from 'chart.js';
 
 import { GeomonTimeseries, DataConst, GeomonTimeseriesData } from '../../../shared/models/dataset';
 import { DatasetApiService } from '../../../app/services/dataset-api.service';
@@ -87,7 +87,7 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
         left: 10
     };
 
-    // private datasetIdsDiffer: IterableDiffer<string>;
+    private datasetIdsDiffer: IterableDiffer<string>;
     private selectedDatasetIdsDiffer: IterableDiffer<string>;
 
     constructor(
@@ -97,10 +97,12 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
         protected timeService: TimeService,
         public datasetService: DatasetService<DatasetOptions>,
     ) { 
+        this.datasetIdsDiffer = this.iterableDiffers.find([]).create();
         this.selectedDatasetIdsDiffer = this.iterableDiffers.find([]).create();
     }
 
     public ngDoCheck(): void {
+
         const selectedDatasetIdsChanges = this.selectedDatasetIdsDiffer.diff(this.selectedDatasetIds);
         if (selectedDatasetIdsChanges) {
             selectedDatasetIdsChanges.forEachAddedItem((addedItem) => {
@@ -110,6 +112,10 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
                 this.removeSelectedId(removedItem.item);
             });
         }
+
+        if(this.datasetOptions){
+            let test = this.datasetOptions;
+        }
     }
 
     protected setSelectedId(internalId: string): void {
@@ -325,10 +331,10 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
             axisOptions: {
                 uom: dataset.uom,
                 label: dataset.label,
-                zeroBased: datasetOptions.zeroBasedYAxis,
+                // zeroBased: datasetOptions.zeroBasedYAxis,
                 // yAxisRange: options.yAxisRange,
-                autoRangeSelection: datasetOptions.autoRangeSelection,
+                // autoRangeSelection: datasetOptions.autoRangeSelection,
-                separateYAxis: datasetOptions.separateYAxis,
+                // separateYAxis: datasetOptions.separateYAxis,
                 parameters: {
                     feature: dataset.parameters.feature,
                     phenomenon: dataset.parameters.phenomenon,
@@ -381,7 +387,7 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
 
     private processData(dataEntry: InternalDataEntry, datasetIndex?: number): void {
 
-        let dataset;
+        let dataset: ChartDataset;
 
         if (datasetIndex != null) {
             dataset = this.lineChart.data.datasets[datasetIndex];

src/shared/models/chart.ts

@@ -21,10 +21,10 @@ export interface InternalDataEntry {
     axisOptions: {
         uom: string;
         label?: string;
-        zeroBased?: boolean;
+        // zeroBased?: boolean;
-        // yAxisRange?: MinMaxRange;
+        // // yAxisRange?: MinMaxRange;
-        autoRangeSelection?: boolean;
+        // autoRangeSelection?: boolean;
-        separateYAxis?: boolean;
+        // separateYAxis?: boolean;
         parameters?: {
             feature?: { id: string, label: string };
             phenomenon?: { id: string, label: string };

src/shared/models/options.ts

@@ -21,26 +21,7 @@ export class DatasetOptions {
      */
     public visible: boolean = true;
 
-    /**
+     
-     * separate y axis of datasets with same unit
-     */
-    public separateYAxis?: boolean = false;
-
-    /**
-     * align graph that zero y axis is visible
-     */
-    public zeroBasedYAxis?: boolean = false;
-
-    /**
-     * auto zoom when range selection
-     */
-    public autoRangeSelection?: boolean = false;
-
-    /**
-     * marker to request dataset data generalized
-     */
-    public generalize?: boolean = false;
-
     /**
      * list of visible reference values
      */