kaiarn/geomon.viewer
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Wiki Activity

- add themes.css

Browse source 
- add  DatasetService.ts and InternalIdHandler
This commit is contained in:
Arno Kaimbacher 2021-09-21 16:13:58 +02:00
parent 427b7b9c91
commit 92d0e94582
11 changed files with 327 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/app/app.module.ts
View file

@ -18,30 +18,30 @@ import { HttpService } from "./services/http.service";
import { StationService } from "./services/station.service";
import { MessagesComponent } from './messages/messages.component';
import { MessageService } from "./services/message.service";
import { DatasetService } from "./services/dataset.service";
import { MapService } from '../common/components/services/map.service';
import { BarComponent } from './components/bar/bar.component';
// import { LocateService } from '@helgoland/map';
// import { MapCache } from '@helgoland/map';
// siehe https://52north.github.io/helgoland-toolbox/additional-documentation/how-tos/integrate-a-map-component.html
// https://52north.github.io/helgoland-toolbox/components/LocateControlComponent.html#source
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material/dialog';
import { DatasetByStationSelectorComponent } from './components/dataset-by-station-selector/dataset-by-station-selector.component';
// import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material';
import { MatListModule } from '@angular/material/list';
import { InternalIdHandler } from '../common/components/services/internal-id-handler.service';
@NgModule({
// declarations: The components, directives, and pipes that belong to this NgModule.
declarations: [AppComponent, MapComponent, DashboardComponent, MessagesComponent, MapViewComponent, BarComponent, DatasetByStationSelectorComponent],
entryComponents: [
DatasetByStationSelectorComponent
],
// entryComponents: [
// DatasetByStationSelectorComponent
// ],
// imports: Other modules whose exported classes are needed by component templates declared in this NgModule.
imports: [BrowserModule, HttpClientModule, AppRoutingModule, ComponentsModule, BrowserAnimationsModule, MatDialogModule],
imports: [BrowserModule, HttpClientModule, AppRoutingModule, ComponentsModule, BrowserAnimationsModule, MatDialogModule, MatListModule],
providers: [
MarkerService, PopupService, HttpService, DatasetApiService, StationService, MessageService, MapService,
MarkerService, PopupService, HttpService, DatasetApiService, StationService, MessageService, MapService,DatasetService, InternalIdHandler
// {
// provide: DatasetApiInterface,

56
src/app/components/dataset-by-station-selector/dataset-by-station-selector.component.html
View file

@ -27,22 +27,58 @@
<h2 mat-dialog-title>{{platform?.label}}</h2>
<h2 mat-dialog-title>{{platform?.label}}</h2>
<mat-dialog-content >
<input matInput
<mat-dialog-content>
<!-- <input matInput
placeholder="Course Description"
formControlName="description">
-->
<div *ngIf="counter">
{{counter}} timeseries are loading...
</div>
<!-- <div class="item" *ngFor="let timeseries of phenomenonMatchedList" (click)="toggle(timeseries)">
<div [ngClass]="{'selected': timeseries.selected}">
{{ timeseries.parameters.phenomenon.label }}
<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>
</div>
</div>
</div> -->
<mat-selection-list>
<mat-list-option *ngFor="let timeseries of phenomenonMatchedList" color="primary" [value]="timeseries" [selected]="timeseries.selected">
<div mat-line>
{{ timeseries.parameters.phenomenon.label }}
</div>
<div mat-line>
Sensor: {{ timeseries.parameters.procedure.label }}
{{ timeseries.internalId }}
<span
*ngIf="timeseries.parameters.category.label && timeseries.parameters.category.label != timeseries.parameters.phenomenon.label">({{timeseries.parameters.category.label}})</span>
</div>
<div mat-line *ngIf="timeseries.lastValue">
<span>{{timeseries.lastValue.value}}</span>
<span>{{timeseries.uom}}</span>
</div>
</mat-list-option>
</mat-selection-list>
</mat-dialog-content>
<mat-dialog-actions>
<button class="mat-raised-button"
(click)="close()">
<button class="mat-raised-button" (click)="close()">
Close
</button>
<button class="mat-raised-button mat-primary">Save</button>
<div style="flex: 1"></div>
<button class="mat-raised-button mat-primary">Diagram</button>
</mat-dialog-actions>

25
src/app/components/dataset-by-station-selector/dataset-by-station-selector.component.ts
View file

@ -7,6 +7,8 @@ import { Station } from './../../../shared/models/station';
import { MatDialogRef } from '@angular/material/dialog';
import { DatasetService } from '../../services/dataset.service';
// https://material.angular.io/components/dialog/overview
// https://blog.angular-university.io/angular-material-dialog/
// https://github.com/angular-university/angular-material-course/blob/3-dialog-finished/src/app/course-dialog/course-dialog.component.html
@ -47,6 +49,7 @@ export class DatasetByStationSelectorComponent implements OnInit {
constructor(
protected datasetApiService: DatasetApiService,
private dialogRef: MatDialogRef<DatasetByStationSelectorComponent>,
public datasetService : DatasetService<GeomonTimeseries>
) { }
public ngOnInit() {
@ -72,20 +75,24 @@ export class DatasetByStationSelectorComponent implements OnInit {
public toggle(timeseriesDataset: SelectableDataset) {
timeseriesDataset.selected = !timeseriesDataset.selected;
this.updateSelection();
this.updateSelection();
}
protected prepareResult(result: SelectableDataset, selection: boolean) {
if (this.datasetService.hasDataset(result.internalId)) {
selection = true;
}
result.selected = selection;
if (this.phenomenonId) {
if (result.parameters.phenomenon.id === this.phenomenonId) {
this.phenomenonMatchedList.push(result);
} else {
this.othersList.push(result);
}
} else {
// if (this.phenomenonId) {
// if (result.parameters.phenomenon.id === this.phenomenonId) {
// this.phenomenonMatchedList.push(result);
// } else {
// this.othersList.push(result);
// }
// }
// else {
this.phenomenonMatchedList.push(result);
}
// }
this.updateSelection();
}

1
src/app/map/base-map.component.ts
View file

@ -89,6 +89,7 @@ export abstract class BaseMapComponent implements OnChanges, OnInit {
this.map = new Map(this.mapId, this.mapOptions);
this.mapService.setMap(this.mapId, this.map);
this.onMapInitializedEvent.emit(this.mapId);
if (this.baseMaps && this.baseMaps.size > 0) {
this.baseMaps.forEach((layerOptions, key) => this.addBaseMap(layerOptions));
} else {

25
src/app/services/dataset-api.service.ts
View file

@ -14,8 +14,9 @@ import { MessageService } from './message.service';
import { GeomonPlatform } from '../../shared/models/platform';
import { Dataset, GeomonTimeseries } from '../../shared/models/dataset';
import { deserialize } from 'class-transformer';
import { map } from 'rxjs/operators';
import { InternalIdHandler } from '../../common/components/services/internal-id-handler.service';
// @Injectable({
// providedIn: 'root'
// })
@ -27,7 +28,8 @@ export class DatasetApiService {
constructor(
private httpClient: HttpClient,
protected httpService: HttpService,
private messageService: MessageService) {
private messageService: MessageService,
protected internalDatasetId: InternalIdHandler,) {
}
public getPhenomena(apiUrl: string, params?: any, options?: any) {
@ -73,13 +75,24 @@ export class DatasetApiService {
public getDataset(id: string, apiUrl: string, params?: any, options?: HttpRequestOptions): Observable<GeomonTimeseries> {
const url = this.createRequestUrl(apiUrl, 'datasets', id);
return this.requestApi<GeomonTimeseries>(url, params, options);
//.pipe(
// map((res) => this.prepareDataset(res, apiUrl))
// );
return this.requestApi<GeomonTimeseries>(url, params, options)
.pipe(
map((res) => this.prepareDataset(res, apiUrl))
);
}
//#region Helper method
private prepareDataset(datasetObj:GeomonTimeseries, apiUrl: string) {
let dataset = deserialize<GeomonTimeseries>(GeomonTimeseries, JSON.stringify(datasetObj));
dataset.url = apiUrl;
this.internalDatasetId.generateInternalId(dataset);
// if (dataset.seriesParameters) {
// dataset.parameters = dataset.seriesParameters;
// delete dataset.seriesParameters;
// }
return dataset;
}
protected createGeomonPlatform(feature: Station): GeomonPlatform {
const datasetIds = [];

70
src/app/services/dataset.service.ts Normal file
View file

@ -0,0 +1,70 @@
import { Injectable } from '@angular/core';
import { EventEmitter } from '@angular/core';
@Injectable()
export class DatasetService<T> {
public datasetIds: string[] = [];
public datasetService: Map<string, T> = new Map();
public datasetIdsChanged: EventEmitter<string[]> = new EventEmitter();
/**
* Adds the dataset to the selection
*
* @param internalId
* @param [options]
* @returns Successfull added the dataset.
*/
public addDataset(internalId: string, options?: T): boolean {
if (this.datasetIds.indexOf(internalId) < 0) {
this.datasetIds.push(internalId);
// if (options) {
// this.datasetOptions.set(internalId, options);
// } else {
// this.datasetOptions.set(internalId, this.createStyles(internalId));
// }
// this.saveState();
}
// else if (options instanceof Array) {
// const temp = (this.datasetOptions.get(internalId) as DatasetOptions[]);
// options.forEach((e) => temp.push(e));
// // this.saveState();
// }
this.datasetService.set(internalId, options);
this.datasetIdsChanged.emit(this.datasetIds);
return true;
}
public removeAllDatasets() {
this.datasetIds.length = 0;
this.datasetService.clear();
this.datasetIdsChanged.emit(this.datasetIds);
// this.saveState();
}
public removeDataset(internalId: string) {
const datasetIdx = this.datasetIds.indexOf(internalId);
if (datasetIdx > -1) {
this.datasetIds.splice(datasetIdx, 1);
this.datasetService.delete(internalId);
}
this.datasetIdsChanged.emit(this.datasetIds);
// this.saveState();
}
public hasDatasets(): boolean {
return this.datasetIds.length > 0;
}
public hasDataset(id: string): boolean {
// return this.datasetIds.indexOf(id) >= 0;
return this.datasetService.has(id);
}
public updateDatasetOptions(options: T, internalId: string) {
this.datasetService.set(internalId, options);
// this.saveState();
}
}