File

libs/selector/src/lib/service-selector/service-selector.component.ts

Description

Component to select an item out of a list of provider with a given filter combination.

Implements

OnInit

Metadata

selector n52-service-selector
styleUrls ./service-selector.component.scss
templateUrl ./service-selector.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(serviceSelectorService: ServiceSelectorService)
Parameters :
Name Type Optional
serviceSelectorService ServiceSelectorService No

Inputs

datasetApiList
Type : DatasetApi[]
filter
Type : HelgolandParameterFilter
providerBlacklist
Type : BlacklistedService[]
selectedService
Type : HelgolandService
showUnresolvableServices
Type : boolean
supportStations
Type : boolean

Outputs

onServiceSelected
Type : EventEmitter<HelgolandService>

Methods

Public isSelected
isSelected(service: HelgolandService)
Parameters :
Name Type Optional
service HelgolandService No
Returns : boolean
Public ngOnInit
ngOnInit()
Returns : void
Public selectService
selectService(service: HelgolandService)
Parameters :
Name Type Optional
service HelgolandService No
Returns : void

Properties

Public loadingCount
Type : number
Default value : 0
Public services
Type : HelgolandService[]
Public unResolvableServices
Type : DatasetApi[]
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>

./service-selector.component.scss

:host {
    .service-list {
        .service-item {
            padding: 5px;
            &+.add-service,
            &+.service-item {
                margin-top: 10px;
            }
            &:hover {
                cursor: pointer;
            }
        }
    }
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""