libs/selector/src/lib/dataset-by-station-selector/dataset-by-station-selector.component.ts
selector | n52-dataset-by-station-selector |
styleUrls | ./dataset-by-station-selector.component.scss |
templateUrl | ./dataset-by-station-selector.component.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
constructor(servicesConnector: HelgolandServicesConnector, translateSrvc: TranslateService)
|
|||||||||
Parameters :
|
defaultSelected | |
Default value : false
|
|
phenomenonId | |
Type : string
|
|
station | |
Type : HelgolandPlatform
|
|
url | |
Type : string
|
|
onSelectionChanged | |
Type : EventEmitter<HelgolandDataset[]>
|
|
Public ngOnInit |
ngOnInit()
|
Returns :
void
|
Protected prepareResult | |||||||||
prepareResult(result: SelectableDataset, selection: boolean)
|
|||||||||
Parameters :
Returns :
void
|
Public toggle | ||||||
toggle(timeseries: SelectableDataset)
|
||||||
Parameters :
Returns :
void
|
Private updateSelection |
updateSelection()
|
Returns :
void
|
Public counter |
Type : number
|
Public timeseriesList |
Type : SelectableDataset[]
|
Default value : []
|
Public translateSrvc |
Type : TranslateService
|
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import {
DatasetType,
HelgolandDataset,
HelgolandPlatform,
HelgolandServicesConnector,
HelgolandTimeseries,
} from '@helgoland/core';
import { TranslateService } from '@ngx-translate/core';
export class SelectableDataset extends HelgolandTimeseries {
public selected: boolean;
}
@Component({
selector: 'n52-dataset-by-station-selector',
templateUrl: './dataset-by-station-selector.component.html',
styleUrls: ['./dataset-by-station-selector.component.scss']
})
export class DatasetByStationSelectorComponent implements OnInit {
@Input()
public station: HelgolandPlatform;
@Input()
public url: string;
@Input()
public defaultSelected = false;
@Input()
public phenomenonId: string;
@Output()
public onSelectionChanged: EventEmitter<HelgolandDataset[]> = new EventEmitter<HelgolandDataset[]>();
public timeseriesList: SelectableDataset[] = [];
public counter: number;
constructor(
protected servicesConnector: HelgolandServicesConnector,
public translateSrvc: TranslateService
) { }
public ngOnInit() {
if (this.station) {
this.servicesConnector.getPlatform(this.station.id, this.url)
.subscribe((station) => {
this.station = station;
this.counter = 0;
this.station.datasetIds.forEach(id => {
this.counter++;
this.servicesConnector.getDataset({ id: id, url: this.url }, { type: DatasetType.Timeseries })
.subscribe((result) => {
this.prepareResult(result as SelectableDataset, this.defaultSelected);
this.counter--;
}, (error) => {
this.counter--;
});
});
});
}
}
public toggle(timeseries: SelectableDataset) {
timeseries.selected = !timeseries.selected;
this.updateSelection();
}
protected prepareResult(result: SelectableDataset, selection: boolean) {
result.selected = selection;
this.timeseriesList.push(result);
this.updateSelection();
}
private updateSelection() {
const selection = this.timeseriesList.filter((entry) => entry.selected);
this.onSelectionChanged.emit(selection);
}
}
<div class="item" *ngFor="let timeseries of timeseriesList" (click)="toggle(timeseries)">
<div *ngIf="counter">
{{counter}} timeseries are loading...
</div>
<div [ngClass]="{'selected': timeseries.selected}">
<div>
<n52-label-mapper [label]="timeseries.parameters.phenomenon.label"></n52-label-mapper>
</div>
<n52-label-mapper [label]="timeseries.parameters.procedure.label"></n52-label-mapper>
<span
*ngIf="timeseries.parameters.category.label && timeseries.parameters.category.label != timeseries.parameters.phenomenon.label">({{timeseries.parameters.category.label}})</span>
<div class="additionalInfo" *ngIf="timeseries.lastValue">
<span>{{timeseries.lastValue.value}}</span>
<span>{{timeseries.uom}}</span>
<span> ({{timeseries.lastValue.timestamp| tzDate: 'L LT z' : null : translateSrvc.currentLang}})</span>
</div>
</div>
</div>
./dataset-by-station-selector.component.scss
:host {
.item {
&+.item {
padding-top: 10px;
}
&.error {
display: none;
}
label {
margin-bottom: 0;
}
}
}