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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
angular.json
View file

@ -58,7 +58,7 @@
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
"maximumError": "2mb"
},
{
"type": "anyComponentStyle",

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();
}
}

34
src/common/components/services/internal-id-handler.service.ts Normal file
View file

@ -0,0 +1,34 @@
import { Injectable } from '@angular/core';
import { IDataset } from '../../../shared/models/dataset';
const INTERNAL_ID_SEPERATOR = '_';
// export interface InternalDatasetId {
// id: string;
// url: string;
// }
/**
* Service to generate or resolve internal dataset IDs
*/
@Injectable()
export class InternalIdHandler {
/**
* Generates and set an internal id for the given dataset.
* @param dataset The dataset for which the internal id will be generated and saved.
*/
public generateInternalId(dataset: IDataset) {
dataset.internalId = dataset.url + INTERNAL_ID_SEPERATOR + dataset.id;
}
/**
* Creates an internal id out of the parameters
* @param url - service url
* @param id - service specific id
* @returns - the internal id
*/
public createInternalId(url: string, id: string): string {
return url + INTERNAL_ID_SEPERATOR + id;
}
}

106
src/general/themes.scss Normal file
View file

@ -0,0 +1,106 @@
// Include non-theme styles for core.
/* You can add global styles to this file, and also import other style files */
// @import "~@angular/material/_theming.scss";
@import '../../node_modules/@angular/material/theming';
// @import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "~@angular/material/prebuilt-themes/purple-green.css";
body,
html {
margin: 0 auto;
height: 100% !important;
}
$dark-text: #000000;
$dark-primary-text: rgba($dark-text, 0.87);
// Dark Theme text
$light-text: #ffffff;
$light-primary-text: $light-text;
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
.app-theme1-theme {
// $my-app-primary: mat-palette($mat-grey, 100);
$mat-primary: (
main: #66c5e4,
lighter: #d1eef7,
darker: #49b0d9,
200: #66c5e4,
// For slide toggle,
contrast:
(
main: $dark-primary-text,
lighter: $dark-primary-text,
darker: $dark-primary-text,
),
);
$theme-primary: mat-palette($mat-primary, main, lighter, darker);
body {
--accent-color: #626250;
--accent-lighter-color: #d0d0cb;
--accent-darker-color: #464637;
--text-accent-color: #{$light-primary-text};
--text-accent-lighter-color: #{$dark-primary-text};
--text-accent-darker-color: #{$light-primary-text};
}
// $my-app-accent: mat-palette($mat-grey, 500);
$mat-accent: (
main: #626250,
lighter: #d0d0cb,
darker: #464637,
200: #626250,
// For slide toggle,
contrast:
(
main: $light-primary-text,
lighter: $dark-primary-text,
darker: $light-primary-text,
),
);
$theme-accent: mat-palette($mat-accent, main, lighter, darker);
// $my-app-warn: mat-palette($mat-grey, 900);
body {
--warn-color: #ff0000;
--warn-lighter-color: #ffb3b3;
--warn-darker-color: #ff0000;
--text-warn-color: #{$light-primary-text};
--text-warn-lighter-color: #{$dark-primary-text};
--text-warn-darker-color: #{$light-primary-text};
}
$mat-warn: (
main: #ff0000,
lighter: #ffb3b3,
darker: #ff0000,
200: #ff0000,
// For slide toggle,
contrast:
(
main: $light-primary-text,
lighter: $dark-primary-text,
darker: $light-primary-text,
),
);
$theme-warn: mat-palette($mat-warn, main, lighter, darker);
// Create the theme object (a Sass map containing all of the palettes).
$my-app-theme: mat-light-theme($mat-primary, $theme-accent, $theme-warn);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($my-app-theme);
}
.app-theme2-theme {
$alternate-primary: mat-palette($mat-indigo, 100);
$alternate-accent: mat-palette($mat-indigo, 500);
$alternate-warn: mat-palette($mat-indigo, 900);
$alternate-theme: mat-light-theme($alternate-primary, $alternate-accent, $alternate-warn);
@include angular-material-theme($alternate-theme);
}

18
src/shared/models/dataset.ts
View file

@ -1,5 +1,7 @@
import { GeomonPlatform } from "./platform";
const INTERNAL_ID_SEPERATOR = '_';
export class Dataset {
public id: string;
public label: string;
@ -16,6 +18,17 @@ export class Dataset {
public parameters: any;
}
export interface IDataset extends Parameter {
url: string;
uom: string;
internalId: string;
firstValue: FirstLastValue;
lastValue: FirstLastValue;
referenceValues: ReferenceValue[];
parameters: ParameterConstellation;
renderingHints: RenderingHints;
}
export class GeomonDataset {
public internalId: string;
@ -26,6 +39,9 @@ export class GeomonDataset {
) {
// this.internalId = new InternalIdHandler().createInternalId(url, id);
}
// public get internalId(): string {
// return this.url + INTERNAL_ID_SEPERATOR + this.id;
// }
}
export class GeomonTimeseries extends GeomonDataset {
@ -43,7 +59,7 @@ export class GeomonTimeseries extends GeomonDataset {
public parameters: ParameterConstellation,
) {
super(id, url, label);
}
}
}
export class ParameterConstellation {

11
src/styles.scss
View file

@ -11,7 +11,11 @@
@import '~leaflet/dist/leaflet.css';
// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
// @import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
// @import './general/themes.scss';
// @import "~bulma/css/bulma.css";
// 1. Import the initial variables
@ -34,7 +38,7 @@ $select-green: #03a678;
// Update Bulma's global variables
// Update the sans-serif font family
$family-sans-serif: "Nunito", sans-serif;
$family-sans-serif: "Roboto", sans-serif;
// 3. Set the derived variables
$grey-dark: $brown;
@ -78,7 +82,8 @@ body {
width: 100%;
line-height: 1.6;
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
// font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: Roboto, "Helvetica Neue", sans-serif;
color: #222;
}