File

libs/selector/src/lib/dataset-by-station-selector/dataset-by-station-selector.component.ts

Implements

OnInit

Metadata

selector n52-dataset-by-station-selector
styleUrls ./dataset-by-station-selector.component.scss
templateUrl ./dataset-by-station-selector.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(servicesConnector: HelgolandServicesConnector, translateSrvc: TranslateService)
Parameters :
Name Type Optional
servicesConnector HelgolandServicesConnector No
translateSrvc TranslateService No

Inputs

defaultSelected
Default value : false
phenomenonId
Type : string
station
Type : HelgolandPlatform
url
Type : string

Outputs

onSelectionChanged
Type : EventEmitter<HelgolandDataset[]>

Methods

Public ngOnInit
ngOnInit()
Returns : void
Protected prepareResult
prepareResult(result: SelectableDataset, selection: boolean)
Parameters :
Name Type Optional
result SelectableDataset No
selection boolean No
Returns : void
Public toggle
toggle(timeseries: SelectableDataset)
Parameters :
Name Type Optional
timeseries SelectableDataset No
Returns : void
Private updateSelection
updateSelection()
Returns : void

Properties

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;
        }
    }
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""