- legen-entry.component: any action via buttons

- Moment.Pipe insider core/time module
- dataset.service.ts: init initial timespan with current week timestamps

src/app/app.module.ts

@@ -23,6 +23,7 @@ import { MessageService } from "./services/message.service";
 import { DatasetService } from "./services/dataset.service";
 import { MapService } from '../common/components/services/map.service';
 import { DiagramViewComponent } from './views/diagram-view/diagram-view.component';
+// import { MomentPipe } from "../common/core/time/MomentPipe";
 // import { LocateService } from '@helgoland/map';
 // import { MapCache } from '@helgoland/map';
 
@@ -37,6 +38,7 @@ import {MatBadgeModule} from '@angular/material/badge';
 import { TimeService } from '../common/core/time/time.service';
 import { InternalIdHandler } from '../common/components/services/internal-id-handler.service';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { CoreModule } from "../common/core/core.module";
 
 @NgModule({
   // declarations: The components, directives, and pipes that belong to this NgModule.
@@ -47,7 +49,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
   // imports: Other modules whose exported classes are needed by component templates declared in this NgModule.
   imports: [
     BrowserModule, HttpClientModule, AppRoutingModule, ComponentsModule, GraphjsModule, BrowserAnimationsModule, MatDialogModule, MatListModule, MatBadgeModule,
-    FontAwesomeModule],
+    FontAwesomeModule, CoreModule],
   providers: [
     MarkerService, PopupService, HttpService, DatasetApiService, StationService, MessageService, MapService,DatasetService, InternalIdHandler, TimeService
  

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

@@ -32,41 +32,43 @@
             <div class="small-label">
                 <label>Sensor: {{procedureLabel}}</label>
             </div>
-            <div class="small-label" *ngIf="categoryLabel != phenomenonLabel">
+            <!-- <div class="small-label" *ngIf="categoryLabel != phenomenonLabel">
                 <label>{{categoryLabel}}</label>
-            </div>
+            </div> -->
-            <div class="legendicons">
+            <div class="legendicons">              
-                <!-- <span class="fa" [ngClass]="{'fa-eye-slash': datasetOption?.visible, 'fa-eye': !datasetOption?.visible}" (click)="toggleVisibility(); $event.stopPropagation();"></span> -->
-                <!-- <fa-icon [icon]="datasetOption?.visible ? faEye : faEyeSlash"
-                    (click)="toggleVisibility(); $event.stopPropagation();"></fa-icon> -->
 
                 <label class="is-checkbox is-small is-info" (click)="$event.stopPropagation();">
                     <input type="checkbox" [checked]="datasetOption.visible" (change)="toggleVisibility(); $event.stopPropagation();">
                     <span>Visibility</span> 
                  
-                    <span class="icon checkmark">
+                    <span class="icon checkmark">                        
-                        <!-- <fa-icon [icon]="faCheck"></fa-icon> -->
                         <fa-icon [icon]="datasetOption?.visible ? faCheck : faTimes"></fa-icon>
                       </span>
                     </label> 
             </div>
 
             <div class="collapseLegendEntry small-label">
+
                 <div class="firstLastEntry additionalLegendEntry" *ngIf="firstValue"
                     (click)="jumpToFirstTimeStamp(); $event.stopPropagation();">
-                    <fa-icon [icon]="faChevronRight"></fa-icon>
+                    <a href="#" class="button is-small is-light"  (click)="$event.preventDefault();jumpToFirstTimeStamp(); $event.stopPropagation();">
-                    <span>Erster Wert bei </span>
+                        <fa-icon [icon]="faChevronRight"></fa-icon>
-                    <span>{{ firstValue.timestamp }}</span>
+                        <span>Erster Wert bei </span>                   
-                    <span class="hidden-medium">({{ firstValue.value }} {{uom}})</span>
+                        <span>{{ firstValue.timestamp | dateFormat: 'DD.MM.YYYY h:mm' }}</span>
+                        <span class="hidden-medium">({{ firstValue.value }} {{uom}})</span>
+                    </a>
                 </div>
 
-                <div class="firstLastEntry additionalLegendEntry" *ngIf="lastValue"
+                <div class="firstLastEntry additionalLegendEntry" *ngIf="lastValue">                   
-                    (click)="jumpToLastTimeStamp(); $event.stopPropagation();">
+                    <a href="#" class="button is-small is-light"  (click)="$event.preventDefault();jumpToLastTimeStamp(); $event.stopPropagation();">
-                    <fa-icon [icon]="faChevronRight"></fa-icon>
+                        <fa-icon [icon]="faChevronRight"></fa-icon>
-                    <span>Letzter Wert bei</span>
+                        <span>Letzter Wert bei </span>
-                    <span>{{lastValue.timestamp }}</span>
+                        <span>{{lastValue.timestamp | dateFormat: 'DD.MM.YYYY h:mm' }}</span>
-                    <span class="hidden-medium">({{lastValue.value}} {{uom}})</span>
+                        <span class="hidden-medium">({{lastValue.value}} {{uom}})</span> 
+                    </a>
+                    
                 </div>
+
             </div>
 
         </div>

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

@@ -39,6 +39,8 @@
         }
     }
     .additionalLegendEntry {
+        margin-top: 10px;
+        width: 100%;
         &:hover {
             cursor: pointer;
         }

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

@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 
 
-import { GeomonTimeseries, DatasetFilter, DatasetType } from '../../../shared/models/dataset';
+import { GeomonTimeseries, DatasetFilter } 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';
@@ -144,7 +144,7 @@ export class LegendEntryComponent {
 
     // private checkDataInTimespan() {
     //     if (this.timeInterval && this.dataset && this.dataset.firstValue && this.dataset.lastValue) {
-    //         this.hasData = this.timeSrvc.overlaps(
+    //         this.hasData = this.timeService.overlaps(
     //             this.timeInterval,
     //             this.dataset.firstValue.timestamp,
     //             this.dataset.lastValue.timestamp

src/app/services/dataset.service.ts

@@ -98,8 +98,12 @@ export class DatasetService<T extends DatasetOptions> {
 
     private initTimespan() {
         if (!this._timespan) {
-          this._timespan =  new Timespan(1323239694000, 1323844494000);    
+        //   this._timespan =  new Timespan(1323239694000, 1323844494000);    
-        //this.timeService.createByDurationWithEnd(moment.duration(1, 'days'), new Date(2011, 9), 'day');
+        // //this.timeService.createByDurationWithEnd(moment.duration(1, 'days'), new Date(2011, 9), 'day');
+        const today = moment();
+        const from_date = today.startOf('isoWeek').toDate();
+        const to_date = today.endOf('isoWeek').toDate();
+        this._timespan = new Timespan(from_date, to_date);
         }
       }
     

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

@@ -19,7 +19,7 @@ export class DiagramViewComponent implements OnInit {
     public selectedIds: string[] = [];
 
     public datasetOptions: Map<string, DatasetOptions> = new Map();
-     public datasetArray: Array <DatasetOptions>;
+    public datasetArray: Array<DatasetOptions>;
 
     public diagramLoading: boolean;
     public overviewLoading: boolean;
@@ -37,9 +37,6 @@ export class DiagramViewComponent implements OnInit {
         private timeService: TimeService) { }
 
     ngOnInit(): void {
-        // this.createSvg();
-        // this.drawBars(this.data);     
-
         this.setDatasets();
     }
 
@@ -59,15 +56,15 @@ export class DiagramViewComponent implements OnInit {
 
     public onSelectDataset(selected: boolean, internalId: string) {
         if (selected) {
-          this.selectedIds.push(internalId);
+            this.selectedIds.push(internalId);
         } else {
-          this.selectedIds.splice(this.selectedIds.findIndex(entry => entry === internalId), 1);
+            this.selectedIds.splice(this.selectedIds.findIndex(entry => entry === internalId), 1);
         }
     }
 
     public clearSelection() {
         this.selectedIds = [];
-      }
+    }
 
     public onUpdateOptions(datasetOption: DatasetOptions, internalId: string) {
         // this.datasetService.updateDatasetOptions(datasetOption, internalId);
@@ -81,7 +78,7 @@ export class DiagramViewComponent implements OnInit {
 
     public jumpToDate(date: Date) {
         this.datasetService.timespan = this.timeService.centerTimespan(this.datasetService.timespan, date);
-      }
+    }
-    
+
 
 }

src/common/core/core.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-
+import { MomentPipe } from './time/moment-pipe';
 import { DatasetApiService } from '../../app/services/dataset-api.service';
 
 
@@ -10,8 +10,10 @@ import { DatasetApiService } from '../../app/services/dataset-api.service';
     CommonModule
   ],
   declarations: [
+    MomentPipe
   ],  
   exports: [ 
+    MomentPipe
   ],
   providers: [      
   ]

src/common/core/time/moment-pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import * as moment from 'moment';
+
+@Pipe({ name: 'dateFormat' })
+export class MomentPipe implements PipeTransform {
+    
+    transform(date: Date | moment.Moment | number | string, dateFormat: string): any {
+        if (typeof (date) === 'number') { date = moment(date); }
+        if (typeof (date) === 'string') { date = moment(date); }
+        if (date instanceof Date) { date = moment(date); }
+
+        if (!dateFormat) { dateFormat = 'L LT z'; }
+        return moment(date).format(dateFormat);
+    }
+}

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

@@ -16,9 +16,9 @@ import * as moment from 'moment';
 import { TimeValueTuple, Data } from '../../../shared/models/dataset';
 import 'chartjs-adapter-moment';
 
-import zoomPlugin from 'chartjs-plugin-zoom';
+// import zoomPlugin from 'chartjs-plugin-zoom';
+// Chart.register(zoomPlugin);
 
-Chart.register(zoomPlugin);
 import { InternalIdHandler, InternalDatasetId } from '../../../common/components/services/internal-id-handler.service';
 
 import { DataEntry, InternalDataEntry } from '../../../shared/models/chart';
@@ -97,7 +97,7 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
     // siehe https://www.concretepage.com/angular/angular-keyvaluediffers
     empDifferMap = new Map<string, any>();
     empMap = new Map<string, DatasetOptions>();
-    private arrayDiffer: any;
+    // private arrayDiffer: any;
     changeLogs: string[] = [];
 
     constructor(
@@ -586,20 +586,20 @@ export class GeomonTimeseriesChartComponent implements AfterViewInit, DoCheck {
                 responsive: true,
                 maintainAspectRatio: false,
                 plugins: {
-                    zoom: {
+                    // zoom: {
-                        pan: {
+                    //     pan: {
-                            enabled: true
+                    //         enabled: true
-                        },
+                    //     },
-                        // zoom: {
+                    //     // zoom: {
-                        //     wheel: {
+                    //     //     wheel: {
-                        //         enabled: true,
+                    //     //         enabled: true,
-                        //     },
+                    //     //     },
-                        //     pinch: {
+                    //     //     pinch: {
-                        //         enabled: true
+                    //     //         enabled: true
-                        //     },
+                    //     //     },
-                        //     mode: 'xy',
+                    //     //     mode: 'xy',
-                        // }
+                    //     // }
-                    },
+                    // },
                     legend: {
                         display: false
                     }

src/shared/models/timespan.ts

@@ -1,8 +1,10 @@
+import * as moment from "moment";
+
 export abstract class TimeInterval {
 
 }
 
-export class Timespan extends TimeInterval{
+export class Timespan extends TimeInterval {
 
     public from: number;
 
@@ -13,6 +15,14 @@ export class Timespan extends TimeInterval{
         this.from = from instanceof Date ? from.valueOf() : from;
         this.to = to ? (to instanceof Date ? to.valueOf() : to) : this.from;
     }
+
+    get fromDate(): string {
+        return moment(this.from).format('DD.MM.YYYY h:mm');
+    }
+
+    get toDate(): string {
+        return moment(this.to).format('DD.MM.YYYY h:mm');
+    }
 }
 
 export class BufferedTime extends TimeInterval {

src/styles.scss

@@ -140,6 +140,18 @@ ul {
     left: 30px;
     right: 30px;
 }
+@media only screen and (max-width:768px) {
+	.mapDesktop {      
+        bottom: 0px;
+        top: 0px;
+        left: 0px;
+        right: 0px;       
+    }
+    .canvas-area.column {
+        padding: 0%;
+    }
+}
+
 
 .locate-control button{
     position: absolute;