- npm updates

- add legend-entry-component files
- add DatasetOptions class

src/app/app.module.ts

@@ -29,6 +29,7 @@ import { DiagramViewComponent } from './views/diagram-view/diagram-view.componen
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatDialogModule } from '@angular/material/dialog';
 import { DatasetByStationSelectorComponent } from './components/dataset-by-station-selector/dataset-by-station-selector.component';
+import { LegendEntryComponent } from './components/legend-entry/legend-entry.component';
 // import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material';
 import { MatListModule } from '@angular/material/list';
 import {MatBadgeModule} from '@angular/material/badge';
@@ -38,7 +39,7 @@ import { InternalIdHandler } from '../common/components/services/internal-id-han
 
 @NgModule({
   // declarations: The components, directives, and pipes that belong to this NgModule.
-  declarations: [AppComponent, MapComponent, DashboardComponent, MessagesComponent, MapViewComponent, DiagramViewComponent, DatasetByStationSelectorComponent],
+  declarations: [AppComponent, MapComponent, DashboardComponent, MessagesComponent, MapViewComponent, DiagramViewComponent, DatasetByStationSelectorComponent, LegendEntryComponent],
   // entryComponents: [
   //   DatasetByStationSelectorComponent
   // ],

src/app/components/dataset-by-station-selector/dataset-by-station-selector.component.ts

@@ -10,6 +10,7 @@ import { MatSelectionListChange } from '@angular/material/list';
 
 import { DatasetService } from '../../services/dataset.service';
 import { AppRouterService } from './../../services/app-router.service';
+import { DatasetOptions } from './../../../shared/models/options';
 
 // https://material.angular.io/components/dialog/overview
 // https://blog.angular-university.io/angular-material-dialog/
@@ -51,7 +52,7 @@ export class DatasetByStationSelectorComponent implements OnInit {
     constructor(
         protected datasetApiService: DatasetApiService,
         private dialogRef: MatDialogRef<DatasetByStationSelectorComponent>,
-        public datasetService : DatasetService<GeomonTimeseries>,
+        public datasetService : DatasetService<DatasetOptions>,
         public appRouter: AppRouterService,
     ) { }
 
@@ -112,7 +113,7 @@ export class DatasetByStationSelectorComponent implements OnInit {
        
         const id = (change.option.value as SelectableDataset).internalId;
         if (change.option.selected) {
-          this.datasetService.addDataset(id, change.option.value as GeomonTimeseries);
+          this.datasetService.addDataset(id, change.option.value as DatasetOptions);
         } else {
           this.datasetService.removeDataset(id);
         }

src/app/components/legend-entry/legend-entry.component.html

@@ -0,0 +1,42 @@
+
+<div id="geomon-legend-entry" class="legendItem" style="position: relative;" [ngStyle]="{'border-color': datasetOption?.color}"
+    [ngClass]="{'selected': selected}" (click)="toggleVisibility(); $event.stopPropagation();">
+    <!-- <div class="loading-overlay" *ngIf="loading" [ngStyle]="{'background-color': datasetOption?.color}">
+        <div class="fa fa-refresh fa-spin fa-3x fa-fw"></div>
+    </div> -->
+
+    <div>
+        <div class="legendItemheader" [ngClass]="{'highlight': highlight}">
+            
+            <div class="legendItemLabel" [ngStyle]="{'color': datasetOption?.color}">
+                <label>Plattform: {{platformLabel}} </label>
+            </div>
+
+            <div class="noDataWarning firstLastEntry" *ngIf="!hasData">
+                <div>
+                    <span class="fa fa-exclamation-triangle red"></span>
+                    <span class="small-label">Keine Daten verfügbar</span>
+                </div>
+                <div class="additionalLegendEntry">
+                    <span class="fa fa-chevron-right"></span>
+                    <span class="small-label">Springe zur letzten Messung</span>
+                </div>
+            </div>
+            <div class="small-label">
+                <label> {{phenomenonLabel}} </label>
+                <span *ngIf="uom">
+                    <span>[</span>
+                    <label>{{uom}}</label>
+                    <span>]</span>
+                </span>
+            </div>
+            <div class="small-label">
+                <label>Sensor: {{procedureLabel}}</label>
+            </div>
+            <div class="small-label" *ngIf="categoryLabel != phenomenonLabel">
+                <label>{{categoryLabel}}</label>
+            </div>
+        </div>
+    </div>
+
+</div>

src/app/components/legend-entry/legend-entry.component.scss

@@ -0,0 +1,74 @@
+#geomon-legend-entry.legendItem {
+    background-color: white;
+    padding: 5px;
+    border-radius: 5px;
+    margin-bottom: 5px;
+    .small-label {
+        font-size: 90%;
+        word-break: break-all;
+    }
+    &.selected {
+        padding: 0px;
+        border-width: 5px;
+        border-style: solid;
+    }
+    .legendItemheader {
+        cursor: pointer;
+        &.highlight {
+            font-weight: bold;
+        }
+    }
+    .legendicons {
+        span {
+            margin: 0 4%;
+            font-size: 150%;
+            &:hover {
+                cursor: pointer;
+            }
+        }
+        .delete {
+            z-index: 5;
+        }
+    }
+    .noDataWarning {
+        border: red solid 2px;
+        border-radius: 5px;
+        padding: 3px;
+        .red {
+            color: red;
+        }
+    }
+    .additionalLegendEntry {
+        &:hover {
+            cursor: pointer;
+        }
+        &.selected {
+            font-weight: bolder;
+        }
+    }
+    .refEntry.selected {
+        border-style: solid;
+        border-width: 2px;
+        border-radius: 2px;
+        margin: 2px 0;
+    }
+    .loading-overlay {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        opacity: 0.5;
+        z-index: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .fa-spin {
+            $icon-size: 25px;
+            color: white;
+            font-size: $icon-size;
+            width: $icon-size;
+            height: $icon-size;
+        }
+    }
+}

src/app/components/legend-entry/legend-entry.component.ts

@@ -0,0 +1,141 @@
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+
+
+import { GeomonTimeseries, DatasetFilter, DatasetType } from '../../../shared/models/dataset';
+import { TimeInterval } from '../../../shared/models/timespan';
+import { DatasetApiService } from '../../services/dataset-api.service';
+import { InternalIdHandler, InternalDatasetId } from '../../../common/components/services/internal-id-handler.service';
+import { DatasetOptions } from '../../../shared/models/options';
+@Component({
+    selector: 'geomon-legend-entry',
+    templateUrl: './legend-entry.component.html',
+    styleUrls: ['./legend-entry.component.scss']
+})
+export class LegendEntryComponent {
+    @Input()
+    public timeInterval: TimeInterval;
+
+    @Output()
+    public onSelectDate: EventEmitter<Date> = new EventEmitter();
+
+    // public firstValue: FirstLastValue;
+    // public lastValue: FirstLastValue;
+    public hasData = true;
+
+    public informationVisible = false;
+    // public referenceValues: ReferenceValue[];
+
+
+    @Input()
+    public datasetOption: DatasetOptions;
+
+    @Input()
+    public highlight: boolean;
+
+    @Output()
+    public onUpdateOptions: EventEmitter<DatasetOptions> = new EventEmitter();
+
+    // @Output()
+    // public onEditOptions: EventEmitter<DatasetOptions> = new EventEmitter();
+
+    @Output()
+    public onShowGeometry: EventEmitter<GeoJSON.GeoJsonObject> = new EventEmitter();
+
+    public dataset: GeomonTimeseries;
+    public platformLabel: string;
+    public phenomenonLabel: string;
+    public procedureLabel: string;
+    public categoryLabel: string;
+    public uom: string;
+    public error: any;
+
+
+
+    @Input()
+    public datasetId: string;
+
+    @Input()
+    public selected: boolean;
+
+    @Output()
+    public onDeleteDataset: EventEmitter<boolean> = new EventEmitter();
+
+    @Output()
+    public onSelectDataset: EventEmitter<boolean> = new EventEmitter();
+
+    public loading: boolean;
+    protected internalId: InternalDatasetId;
+    // private langChangeSubscription: Subscription;
+
+    constructor(
+        private internalIdHandler: InternalIdHandler,
+        private datasetApiService: DatasetApiService) { }
+
+    public ngOnInit(): void {
+        if (this.datasetId) {
+            this.internalId = this.internalIdHandler.resolveInternalId(this.datasetId);
+            this.loadDataset();
+        }
+
+    }
+
+
+    protected loadDataset(locale?: string): void {
+        const params: DatasetFilter = {};
+        if (locale) { params.locale = locale; }
+        this.loading = true;
+        // this.servicesConnector.getDataset(this.internalId, { ...params, type: DatasetType.Timeseries })
+        //   .subscribe(
+        //     dataset => this.setDataset(dataset),
+        //     error => this.handleError(error)
+        //   );
+        this.datasetApiService.getDataset(this.internalId.id, this.internalId.url, { type: 'timeseries' }).subscribe({
+            next: (res: GeomonTimeseries) => this.setDataset(res),
+            error: (err: any) => this.handleError(err),
+            complete: () => console.log('HTTP request completed.')
+            // error => this.errorHandler.handleDatasetLoadError(error)
+        });
+    }
+
+    protected handleError(error: any) {
+        this.loading = false;
+        this.error = error;
+    }
+
+    public removeDataset() {
+        this.onDeleteDataset.emit(true);
+    }
+    
+    protected setDataset(timeseries: GeomonTimeseries) {
+        this.dataset = timeseries;
+        this.setParameters();
+        this.loading = false;
+    }
+
+    private setParameters() {
+        this.platformLabel = this.dataset.parameters.platform.label;
+        this.phenomenonLabel = this.dataset.parameters.phenomenon.label;
+        this.procedureLabel = this.dataset.parameters.procedure.label;
+        this.categoryLabel = this.dataset.parameters.category.label;
+        this.uom = this.dataset.uom;
+      }
+
+      public toggleSelection() {
+        this.selected = !this.selected;
+        this.onSelectDataset.emit(this.selected);
+    }
+
+      public toggleVisibility() {
+        this.datasetOption.visible = !this.datasetOption.visible;
+        this.onUpdateOptions.emit(this.datasetOption);
+      }
+    
+      public editDatasetOptions() {
+        // this.onEditOptions.emit(this.datasetOptions);
+      }
+    
+      public showGeometry() {
+        this.onShowGeometry.emit(this.dataset.platform.geometry);
+    }
+
+}

src/app/services/dataset.service.ts

@@ -9,12 +9,13 @@ const TIME_CACHE_PARAM = 'timeseriesTime';
 // https://github.com/52North/helgoland-toolbox/blob/fe6af1b9df0e5d78eeec236e4690aeb7dc92119b/apps/helgoland/src/app/services/timeseries-service.service.ts#L22
 
 import { TimeService } from '../../common/core/time/time.service';
+import { DatasetOptions } from '../../shared/models/options';
 
 @Injectable()
-export class DatasetService<T> {
+export class DatasetService<T extends DatasetOptions> {
 
     public datasetIds: string[] = [];
-    public datasetService: Map<string, T> = new Map();
+    public datasetOptions: Map<string, T> = new Map();
 
     private _timespan: Timespan;
     
@@ -57,7 +58,7 @@ export class DatasetService<T> {
         //     options.forEach((e) => temp.push(e));
         //     // this.saveState();
         // }
-        this.datasetService.set(internalId, options);
+        this.datasetOptions.set(internalId, options);
 
         this.datasetIdsChanged.emit(this.datasetIds);
         return true;
@@ -65,7 +66,7 @@ export class DatasetService<T> {
 
     public removeAllDatasets() {
         this.datasetIds.length = 0;
-        this.datasetService.clear();
+        this.datasetOptions.clear();
         this.datasetIdsChanged.emit(this.datasetIds);
         // this.saveState();
     }
@@ -74,7 +75,7 @@ export class DatasetService<T> {
         const datasetIdx = this.datasetIds.indexOf(internalId);
         if (datasetIdx > -1) {
             this.datasetIds.splice(datasetIdx, 1);
-            this.datasetService.delete(internalId);
+            this.datasetOptions.delete(internalId);
         }
         this.datasetIdsChanged.emit(this.datasetIds);
         // this.saveState();
@@ -86,11 +87,11 @@ export class DatasetService<T> {
 
     public hasDataset(id: string): boolean {
         // return this.datasetIds.indexOf(id) >= 0;
-        return this.datasetService.has(id);
+        return this.datasetOptions.has(id);
     }
 
     public updateDatasetOptions(options: T, internalId: string) {
-        this.datasetService.set(internalId, options);
+        this.datasetOptions.set(internalId, options);
         // this.saveState();
     }
 

src/app/views/diagram-view/diagram-view.component.html

@@ -1,16 +1,18 @@
-
- <div class="main columns">
+<div class="main columns">
 
     <div class="canvas-area is-8 column">
-    <!-- <h2>Bar Chart</h2>
+        <!-- <h2>Bar Chart</h2>
     <canvas id="line-chart" width="800" height="450"></canvas> -->
-    <geomon-timeseries-chart [datasetOptions]="datasetOptions" 
-    [datasetIds]="datasetIds" [timeInterval]="datasetService.timespan"></geomon-timeseries-chart>
+        <geomon-timeseries-chart [datasetOptions]="datasetOptions" [datasetIds]="datasetIds"
+            [timeInterval]="datasetService.timespan" [selectedDatasetIds]="selectedIds"></geomon-timeseries-chart>
 
     </div>
 
     <div class="input-area is-4 column">
-    Test
+        <div *ngFor="let id of datasetIds">
+            <geomon-legend-entry [datasetId]="id" [datasetOption]="datasetOptions.get(id)" (onSelectDataset)="onSelectDataset($event, id)" (onUpdateOptions)="onUpdateOptions($event, id)">
+            </geomon-legend-entry>
+        </div>
     </div>
 
-</div>
+</div>

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

@@ -3,7 +3,8 @@ import { Component, OnInit } from '@angular/core';
 
 import { DatasetService } from '../../services/dataset.service';
 import { AppRouterService } from '../../services/app-router.service';
-import { GeomonTimeseries, GeomonDataset } from '../../../shared/models/dataset';
+// import { GeomonTimeseries, GeomonDataset } from '../../../shared/models/dataset';
+import { DatasetOptions } from '../../../shared/models/options';
 
 @Component({
     selector: 'app-bar',
@@ -16,7 +17,7 @@ export class DiagramViewComponent implements OnInit {
 
     public selectedIds: string[] = [];
 
-    public datasetOptions: Map<string, GeomonTimeseries> = new Map();
+    public datasetOptions: Map<string, DatasetOptions> = new Map();
 
     public diagramLoading: boolean;
     public overviewLoading: boolean;
@@ -29,7 +30,7 @@ export class DiagramViewComponent implements OnInit {
     // };
 
     constructor(
-        public datasetService: DatasetService<GeomonTimeseries>,
+        public datasetService: DatasetService<DatasetOptions>,
         public appRouter: AppRouterService,) { }
 
     ngOnInit(): void {
@@ -41,11 +42,7 @@ export class DiagramViewComponent implements OnInit {
 
     private setDatasets() {
         this.datasetIds = this.datasetService.datasetIds;
-        this.datasetOptions = this.datasetService.datasetService;
-    }
-
-    public clearSelection() {
-        this.selectedIds = [];
+        this.datasetOptions = this.datasetService.datasetOptions;
     }
 
     public removeAllTimeseries() {
@@ -56,6 +53,21 @@ export class DiagramViewComponent implements OnInit {
         this.datasetService.removeDataset(internalId);
     }
 
+    public onSelectDataset(selected: boolean, internalId: string) {
+        if (selected) {
+          this.selectedIds.push(internalId);
+        } else {
+          this.selectedIds.splice(this.selectedIds.findIndex(entry => entry === internalId), 1);
+        }
+    }
+
+    public clearSelection() {
+        this.selectedIds = [];
+      }
+
+    public onUpdateOptions(options: DatasetOptions, internalId: string) {
+        this.datasetService.updateDatasetOptions(options, internalId);
+    }
     
 
 }