libs/depiction/src/lib/datasetlist/profile-entry/profile-entry.component.ts
| selector | n52-profile-entry |
| styleUrls | ./profile-entry.component.scss |
| templateUrl | ./profile-entry.component.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
constructor(servicesConnector: HelgolandServicesConnector, internalIdHandler: InternalIdHandler, translateSrvc: TranslateService)
|
||||||||||||
|
Parameters :
|
| datasetOptions | |
Type : TimedDatasetOptions[]
|
|
| datasetId | |
Type : string
|
|
|
Inherited from
ListEntryComponent
|
|
|
Defined in
ListEntryComponent:15
|
|
| selected | |
Type : boolean
|
|
|
Inherited from
ListEntryComponent
|
|
|
Defined in
ListEntryComponent:18
|
|
| 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
|
|
|
Defined in
ListEntryComponent:21
|
|
| onSelectDataset | |
Type : EventEmitter<boolean>
|
|
|
Inherited from
ListEntryComponent
|
|
|
Defined in
ListEntryComponent:24
|
|
| Public editDatasetOptions | ||||||
editDatasetOptions(options: TimedDatasetOptions)
|
||||||
|
Parameters :
Returns :
void
|
| Protected loadDataset | ||||||
loadDataset(lang?: string)
|
||||||
|
Parameters :
Returns :
void
|
| Public openInCombiView | ||||||
openInCombiView(option: TimedDatasetOptions)
|
||||||
|
Parameters :
Returns :
void
|
| Public removeDatasetOptions | ||||||
removeDatasetOptions(options: TimedDatasetOptions)
|
||||||
|
Parameters :
Returns :
void
|
| Public showGeometry | ||||||
showGeometry(option: TimedDatasetOptions)
|
||||||
|
Parameters :
Returns :
void
|
| Public toggleVisibility | ||||||
toggleVisibility(options: TimedDatasetOptions)
|
||||||
|
Parameters :
Returns :
void
|
| Protected Abstract loadDataset | ||||||
loadDataset(lang?: string)
|
||||||
|
Inherited from
ListEntryComponent
|
||||||
|
Defined in
ListEntryComponent:64
|
||||||
|
Parameters :
Returns :
void
|
| Public ngOnDestroy |
ngOnDestroy()
|
|
Inherited from
ListEntryComponent
|
|
Defined in
ListEntryComponent:45
|
|
Returns :
void
|
| Public ngOnInit |
ngOnInit()
|
|
Inherited from
ListEntryComponent
|
|
Defined in
ListEntryComponent:37
|
|
Returns :
void
|
| Protected onLanguageChanged | ||||||
onLanguageChanged(langChangeEvent: LangChangeEvent)
|
||||||
|
Inherited from
ListEntryComponent
|
||||||
|
Defined in
ListEntryComponent:58
|
||||||
|
Parameters :
Returns :
void
|
| Public removeDataset |
removeDataset()
|
|
Inherited from
ListEntryComponent
|
|
Defined in
ListEntryComponent:49
|
|
Returns :
void
|
| Public toggleSelection |
toggleSelection()
|
|
Inherited from
ListEntryComponent
|
|
Defined in
ListEntryComponent:53
|
|
Returns :
void
|
| Public dataset |
Type : HelgolandProfile
|
| Public editableOptions |
Type : TimedDatasetOptions
|
| Public tempColor |
Type : string
|
| Protected internalId |
Type : InternalDatasetId
|
|
Inherited from
ListEntryComponent
|
|
Defined in
ListEntryComponent:28
|
| Private langChangeSubscription |
Type : Subscription
|
|
Inherited from
ListEntryComponent
|
|
Defined in
ListEntryComponent:30
|
| Public loading |
Type : boolean
|
|
Inherited from
ListEntryComponent
|
|
Defined in
ListEntryComponent:26
|
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;
}
}
}