File
Description
Component to select an item out of a list of provider with a given filter combination.
Implements
Metadata
selector |
n52-service-selector |
styleUrls |
./service-selector.component.scss |
templateUrl |
./service-selector.component.html |
Index
Properties
|
|
Methods
|
|
Inputs
|
|
Outputs
|
|
providerBlacklist
|
Type : BlacklistedService[]
|
|
showUnresolvableServices
|
Type : boolean
|
|
Outputs
onServiceSelected
|
Type : EventEmitter<HelgolandService>
|
|
Methods
Public
ngOnInit
|
ngOnInit()
|
|
|
Public
loadingCount
|
Type : number
|
Default value : 0
|
|
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { BlacklistedService, DatasetApi, HelgolandParameterFilter, HelgolandService } from '@helgoland/core';
import { ServiceSelectorService } from './service-selector.service';
/**
* Component to select an item out of a list of provider with a given filter combination.
*/
@Component({
selector: 'n52-service-selector',
templateUrl: './service-selector.component.html',
styleUrls: ['./service-selector.component.scss']
})
export class ServiceSelectorComponent implements OnInit {
@Input()
public datasetApiList: DatasetApi[];
@Input()
public providerBlacklist: BlacklistedService[];
@Input()
public supportStations: boolean;
@Input()
public selectedService: HelgolandService;
@Input()
public filter: HelgolandParameterFilter;
@Input()
public showUnresolvableServices: boolean;
@Output()
public onServiceSelected: EventEmitter<HelgolandService> = new EventEmitter<HelgolandService>();
public services: HelgolandService[];
public unResolvableServices: DatasetApi[];
public loadingCount = 0;
constructor(
protected serviceSelectorService: ServiceSelectorService
) { }
public ngOnInit() {
if (!this.filter) { this.filter = {}; }
if (!this.providerBlacklist) { this.providerBlacklist = []; }
if (this.datasetApiList) {
this.loadingCount = this.datasetApiList.length;
this.services = [];
this.unResolvableServices = [];
this.datasetApiList.forEach((api) => {
this.serviceSelectorService.fetchServicesOfAPI(api.url, this.providerBlacklist, this.filter)
.subscribe(
(res) => {
this.loadingCount--;
if (res && res instanceof Array) {
res.forEach((entry) => {
if (entry.quantities.datasets) {
this.services.push(entry);
}
});
}
this.services.sort((a, b) => {
if (a.label < b.label) { return -1; }
if (a.label > b.label) { return 1; }
return 0;
});
},
(error) => {
if (this.showUnresolvableServices) { this.unResolvableServices.push(api); }
this.loadingCount--;
});
});
}
}
public isSelected(service: HelgolandService) {
if (!this.selectedService) { return false; }
return this.selectedService.id === service.id && this.selectedService.apiUrl === service.apiUrl;
}
public selectService(service: HelgolandService) {
this.onServiceSelected.emit(service);
}
}
<div *ngIf="loadingCount > 0">
<span>Requesting {{loadingCount}} providers...</span>
</div>
<div class="service-list">
<div class="service-item" *ngFor="let service of services" (click)="selectService(service)"
[ngClass]="{'selected': isSelected(service)}">
<div>{{service.label}}</div>
<div class="small">{{service.type}}, {{service.version}}
</div>
<div class="small" *ngIf="service.apiUrl">{{'service-selector.service-url' | translate}}: {{service.apiUrl}}</div>
<div class="small">
<span *ngIf="service.quantities.stations !== undefined">{{'service-selector.stations' | translate}}:
{{service.quantities.stations}}</span>
<span *ngIf="service.quantities.platforms !== undefined">{{'service-selector.platforms' | translate}}:
{{service.quantities.platforms}}</span>
<span *ngIf="service.quantities.datasets !== undefined">{{'service-selector.datasets' | translate}}:
{{service.quantities.datasets}}</span>
<span>{{'service-selector.phenomena' | translate}}: {{service.quantities.phenomena}}</span>
</div>
</div>
<div *ngFor="let item of unResolvableServices">
<div style="color: red;">{{item.name}} is currently not reachable</div>
</div>
</div>
:host {
.service-list {
.service-item {
padding: 5px;
&+.add-service,
&+.service-item {
margin-top: 10px;
}
&:hover {
cursor: pointer;
}
}
}
}
Legend
Html element with directive