kaiarn/geomon.viewer
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Wiki Activity

- legen-entry.component: any action via buttons

Browse source 
- Moment.Pipe insider core/time module
- dataset.service.ts: init initial timespan with current week timestamps
This commit is contained in:
Arno Kaimbacher 2021-10-25 16:30:50 +02:00
parent d6abaa0d6d
commit 799d08bd0b
11 changed files with 97 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/app.module.ts
View file

@ -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

34
src/app/components/legend-entry/legend-entry.component.html
View file

@ -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">
<!-- <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">
<!-- <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>
<span>Erster Wert bei </span>
<span>{{ firstValue.timestamp }}</span>
<span class="hidden-medium">({{ firstValue.value }} {{uom}})</span>
<a href="#" class="button is-small is-light" (click)="$event.preventDefault();jumpToFirstTimeStamp(); $event.stopPropagation();">
<fa-icon [icon]="faChevronRight"></fa-icon>
<span>Erster Wert bei </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"
(click)="jumpToLastTimeStamp(); $event.stopPropagation();">
<fa-icon [icon]="faChevronRight"></fa-icon>
<span>Letzter Wert bei</span>
<span>{{lastValue.timestamp }}</span>
<span class="hidden-medium">({{lastValue.value}} {{uom}})</span>
<div class="firstLastEntry additionalLegendEntry" *ngIf="lastValue">
<a href="#" class="button is-small is-light" (click)="$event.preventDefault();jumpToLastTimeStamp(); $event.stopPropagation();">
<fa-icon [icon]="faChevronRight"></fa-icon>
<span>Letzter Wert bei </span>
<span>{{lastValue.timestamp | dateFormat: 'DD.MM.YYYY h:mm' }}</span>
<span class="hidden-medium">({{lastValue.value}} {{uom}})</span>
</a>
</div>
</div>
</div>

2
src/app/components/legend-entry/legend-entry.component.scss
View file

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

4
src/app/components/legend-entry/legend-entry.component.ts
View file

@ -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

8
src/app/services/dataset.service.ts
View file

@ -98,8 +98,12 @@ export class DatasetService<T extends DatasetOptions> {
private initTimespan() {
if (!this._timespan) {
this._timespan = new Timespan(1323239694000, 1323844494000);
//this.timeService.createByDurationWithEnd(moment.duration(1, 'days'), new Date(2011, 9), 'day');
// this._timespan = new Timespan(1323239694000, 1323844494000);
// //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);
}
}

13
src/app/views/diagram-view/diagram-view.component.ts
View file

@ -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);
}
}
}

4
src/common/core/core.module.ts
View file

@ -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: [
]

15
src/common/core/time/moment-pipe.ts Normal file
View file

@ -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);
}
}

34
src/common/graphjs/geomon-timeseries-chart/geomon-timeseries-chart.component.ts
View file

@ -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: {
pan: {
enabled: true
},
// zoom: {
// wheel: {
// enabled: true,
// },
// pinch: {
// enabled: true
// },
// mode: 'xy',
// }
},
// zoom: {
// pan: {
// enabled: true
// },
// // zoom: {
// // wheel: {
// // enabled: true,
// // },
// // pinch: {
// // enabled: true
// // },
// // mode: 'xy',
// // }
// },
legend: {
display: false
}

12
src/shared/models/timespan.ts
View file

@ -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 {

12
src/styles.scss
View file

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