File

libs/depiction/src/lib/datasetlist/profile-entry/profile-entry.component.ts

Extends

ListEntryComponent

Metadata

selector n52-profile-entry
styleUrls ./profile-entry.component.scss
templateUrl ./profile-entry.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

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

Inputs

datasetOptions
Type : TimedDatasetOptions[]
datasetId
Type : string
Inherited from ListEntryComponent
selected
Type : boolean
Inherited from ListEntryComponent

Outputs

onDeleteDatasetOptions
Type : EventEmitter<TimedDatasetOptions>
onEditOptions
Type : EventEmitter<TimedDatasetOptions>
onOpenInCombiView
Type : EventEmitter<TimedDatasetOptions>
onShowGeometry
Type : EventEmitter<GeoJSON.GeoJsonObject>
onUpdateOptions
Type : EventEmitter<TimedDatasetOptions[]>
onDeleteDataset
Type : EventEmitter<boolean>
Inherited from ListEntryComponent
onSelectDataset
Type : EventEmitter<boolean>
Inherited from ListEntryComponent

Methods

Public editDatasetOptions
editDatasetOptions(options: TimedDatasetOptions)
Parameters :
Name Type Optional
options TimedDatasetOptions No
Returns : void
Protected loadDataset
loadDataset(lang?: string)
Parameters :
Name Type Optional
lang string Yes
Returns : void
Public openInCombiView
openInCombiView(option: TimedDatasetOptions)
Parameters :
Name Type Optional
option TimedDatasetOptions No
Returns : void
Public removeDatasetOptions
removeDatasetOptions(options: TimedDatasetOptions)
Parameters :
Name Type Optional
options TimedDatasetOptions No
Returns : void
Public showGeometry
showGeometry(option: TimedDatasetOptions)
Parameters :
Name Type Optional
option TimedDatasetOptions No
Returns : void
Public toggleVisibility
toggleVisibility(options: TimedDatasetOptions)
Parameters :
Name Type Optional
options TimedDatasetOptions No
Returns : void
Protected Abstract loadDataset
loadDataset(lang?: string)
Inherited from ListEntryComponent
Parameters :
Name Type Optional
lang string Yes
Returns : void
Public ngOnDestroy
ngOnDestroy()
Inherited from ListEntryComponent
Returns : void
Public ngOnInit
ngOnInit()
Inherited from ListEntryComponent
Returns : void
Protected onLanguageChanged
onLanguageChanged(langChangeEvent: LangChangeEvent)
Inherited from ListEntryComponent
Parameters :
Name Type Optional
langChangeEvent LangChangeEvent No
Returns : void
Public removeDataset
removeDataset()
Inherited from ListEntryComponent
Returns : void
Public toggleSelection
toggleSelection()
Inherited from ListEntryComponent
Returns : void

Properties

Public dataset
Type : HelgolandProfile
Public editableOptions
Type : TimedDatasetOptions
Public tempColor
Type : string
Protected internalId
Type : InternalDatasetId
Inherited from ListEntryComponent
Private langChangeSubscription
Type : Subscription
Inherited from ListEntryComponent
Public loading
Type : boolean
Inherited from ListEntryComponent
import { Component, EventEmitter, Input, Output } from '@angular/core';
import {
    DatasetType,
    HelgolandLocatedProfileData,
    HelgolandParameterFilter,
    HelgolandProfile,
    HelgolandServicesConnector,
    InternalIdHandler,
    TimedDatasetOptions,
    Timespan,
} from '@helgoland/core';
import { TranslateService } from '@ngx-translate/core';

import { ListEntryComponent } from '../list-entry.component';

@Component({
    selector: 'n52-profile-entry',
    templateUrl: './profile-entry.component.html',
    styleUrls: ['./profile-entry.component.scss']
})
export class ProfileEntryComponent extends ListEntryComponent {

    @Input()
    public datasetOptions: TimedDatasetOptions[];

    @Output()
    public onUpdateOptions: EventEmitter<TimedDatasetOptions[]> = new EventEmitter();

    @Output()
    public onDeleteDatasetOptions: EventEmitter<TimedDatasetOptions> = new EventEmitter();

    @Output()
    public onEditOptions: EventEmitter<TimedDatasetOptions> = new EventEmitter();

    @Output()
    public onOpenInCombiView: EventEmitter<TimedDatasetOptions> = new EventEmitter();

    @Output()
    public onShowGeometry: EventEmitter<GeoJSON.GeoJsonObject> = new EventEmitter();

    public dataset: HelgolandProfile;

    public editableOptions: TimedDatasetOptions;
    public tempColor: string;

    constructor(
        protected servicesConnector: HelgolandServicesConnector,
        protected internalIdHandler: InternalIdHandler,
        protected translateSrvc: TranslateService
    ) {
        super(internalIdHandler, translateSrvc);
    }

    public removeDatasetOptions(options: TimedDatasetOptions) {
        this.onDeleteDatasetOptions.emit(options);
    }

    public editDatasetOptions(options: TimedDatasetOptions) {
        this.onEditOptions.emit(options);
    }

    public toggleVisibility(options: TimedDatasetOptions) {
        options.visible = !options.visible;
        this.onUpdateOptions.emit(this.datasetOptions);
    }

    public openInCombiView(option: TimedDatasetOptions) {
        this.onOpenInCombiView.emit(option);
    }

    public showGeometry(option: TimedDatasetOptions) {
        const internalId = this.internalIdHandler.resolveInternalId(this.datasetId);
        if (this.dataset.isMobile) {
            const timespan = new Timespan(option.timestamp);
            this.servicesConnector.getDatasetData(this.dataset, timespan).subscribe(
                result => {
                    if (result.values.length === 1 && result instanceof HelgolandLocatedProfileData) {
                        this.onShowGeometry.emit(result.values[0].geometry);
                    }
                }
            );
        } else {
            this.servicesConnector.getPlatform(this.dataset.parameters.platform.id, internalId.url)
                .subscribe((station) => this.onShowGeometry.emit(station.geometry));
        }
    }

    protected loadDataset(lang?: string) {
        const params: HelgolandParameterFilter = {};
        if (lang) { params.lang = lang; }
        this.loading = true;
        this.servicesConnector.getDataset(this.internalId, { ...params, type: DatasetType.Profile }).subscribe(
            dataset => this.dataset = dataset,
            error => console.error(error),
            () => this.loading = false
        );
    }

}
<div class="legendItem" style="position: relative;" [ngClass]="{'selected': selected}" (click)="toggleSelection()">
  <div class="legendItemheader">
    <div class="legendItemLabel">
      <n52-label-mapper label="{{dataset?.parameters.platform.label}}"></n52-label-mapper>
    </div>
    <div class="small">
      <n52-label-mapper label="{{dataset?.parameters.phenomenon.label}}"></n52-label-mapper>
      <span *ngIf="dataset?.uom">[
        <n52-label-mapper label="{{dataset.uom}}"></n52-label-mapper>]</span>
    </div>
    <div class="small">
      <n52-label-mapper label="{{dataset?.parameters.procedure.label}}"></n52-label-mapper>
    </div>
    <div class="small" *ngIf="dataset?.parameters.category.label != dataset?.parameters.phenomenon.label">
      <n52-label-mapper label="{{dataset?.parameters.category.label}}"></n52-label-mapper>
    </div>
  </div>
  <div *ngFor="let item of datasetOptions">
    <div>
      <span [ngStyle]="{'color': item.color}">{{item.timestamp | tzDate: 'L LT z'}}</span>
      <span class="fa" [ngClass]="{'fa-eye-slash': item.visible, 'fa-eye': !item.visible}"
        (click)="toggleVisibility(item); $event.stopPropagation();"
        title="{{'profiles.legend.visibility' | translate}}"></span>
      <span class="fa fa-pencil" (click)="editDatasetOptions(item); $event.stopPropagation();"
        [ngStyle]="{color: item.color}" title="{{'profiles.legend.edit-style' | translate}}"></span>
      <span class="fa fa-map-marker" (click)="showGeometry(item); $event.stopPropagation();"
        title="{{'profiles.legend.show-geometry' | translate}}"></span>
      <span class="fa fa-times" (click)="removeDatasetOptions(item); $event.stopPropagation();"
        title="{{'profiles.legend.delete-subentry' | translate}}"></span>
    </div>
    <div (click)="openInCombiView(item); $event.stopPropagation();" *ngIf="dataset?.isMobile" class="toCombiView">
      <span class="fa fa-arrow-right"></span>
      <span>{{'profiles.legend.go-to-combi-view' | translate}}</span>
    </div>
  </div>
</div>

./profile-entry.component.scss

:host {
    .legendItem {
        background-color: white;
        padding: 5px;
        border-radius: 5px;
        margin-bottom: 5px;
        .small {
            font-size: 90%;
            word-break: break-all;
        }
        &.selected {
            padding: 0px;
            border-width: 5px;
            border-style: solid;
        }
        .legendItemheader {
            cursor: pointer;
        }
        .toCombiView {
            cursor: pointer;
        }
        .fa {
            cursor: pointer;
        }
    }
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""