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

- add bulma style

Browse source 
- add components: messages, locate-button
- move index.html into src folder
- move to angular build tools
- styles.css -> styles.scss
This commit is contained in:
Arno Kaimbacher 2021-09-07 08:36:17 +02:00
parent 220944b115
commit df3561235d
37 changed files with 12724 additions and 645 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/app/app.component.css
View file

@ -2,7 +2,7 @@
h1 {
margin-bottom: 0;
}
nav a {
/* nav a {
padding: 1rem;
text-decoration: none;
margin-top: 10px;
@ -19,4 +19,4 @@ h1 {
nav a.active {
background-color: black;
}
*/

109
src/app/app.component.html
View file

@ -1,18 +1,93 @@
<app-map [mapId]="'map'" [mapOptions]="mapOptions" [serviceUrl]="providerUrl" [baseMaps]="baseMaps"
(onSelected)="onStationSelected($event)" (onMapInitializedEvent)="onMapInitialized($event)"></app-map>
<!-- <span>{{ name }} app is running!</span> -->
<!-- <div>
<n52-station-map-selector [mapId]="'timeseries'" [serviceUrl]="providerUrl"
[mapOptions]="mapOptions"></n52-station-map-selector>
</div>
<div>Is loading: {{loadingStations}}</div> -->
<!-- <h1>{{ name }}</h1>
<nav>
<a routerLink="/dashboard">Dashboard</a>
<a routerLink="/map">Map</a>
<!-- <nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item">
<img src="https://bulma.io/images/bulma-logo.png">
</a>
</div>
</nav> -->
<nav class="navbar has-shadow" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="" href="http://geomon.geologie.ac.at/" target="_blank">
<img src="assets/Tethys-icon.png">
</a>
<a role="button" id="menu-icon" class="navbar-burger" aria-label="menu" aria-expanded="false"
data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<span id='map-title' class="navbar-item">
</span>
<a class="navbar-item">
Documentation
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
<router-outlet></router-outlet> -->
<section id="app" class="hero">
<div class="main columns">
<div class="canvas-area is-8 column">
<div id="div-map">
<app-map [mapId]="'map'" [mapOptions]="mapOptions" [serviceUrl]="providerUrl" [baseMaps]="baseMaps"
(onSelected)="onStationSelected($event)" (onMapInitializedEvent)="onMapInitialized($event)">
</app-map>
<!-- <router-outlet></router-outlet> -->
</div>
</div>
<div class="input-area is-4 column">
<div class="columns">
<app-messages></app-messages>
</div>
</div>
</div>
<!-- <app-dashboard></app-dashboard> -->
<!-- <span>{{ name }} app is running!</span> -->
<!-- <div>
<n52-station-map-selector [mapId]="'timeseries'" [serviceUrl]="providerUrl"
[mapOptions]="mapOptions"></n52-station-map-selector>
</div>
<div>Is loading: {{loadingStations}}</div> -->
<!-- <h1>{{ name }}</h1>
<nav>
<a routerLink="/dashboard">Dashboard</a>
<a routerLink="/map">Map</a>
</nav>-->
<!-- <router-outlet></router-outlet> -->
<!-- <app-messages></app-messages> -->
</section>
<!-- footer -->
<!-- <footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
Made with <3 by
</p>
</div>
</div>
</footer> -->

14
src/app/app.component.ts
View file

@ -1,5 +1,5 @@
import { Component, VERSION } from "@angular/core";
import '../styles.css';
import '../styles.scss';
// import '../../node_modules/leaflet/dist/leaflet.css';
import { ParameterFilter, Phenomenon, Station } from '@helgoland/core';
@ -23,12 +23,6 @@ Marker.prototype.options.icon = icon({
selector: "app-component",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
// template: `
// <div>
// <h1>{{name}}</h1>
// <div>The number: {{x}}</div>
// </div>
// `,
})
export class AppComponent {
@ -54,11 +48,11 @@ export class AppComponent {
public statusIntervals = false;
public mapOptions: MapOptions = { dragging: true, zoomControl: false };
private onStationSelected(station: Station) {
public onStationSelected(station: Station) {
console.log('Clicked station: ' + station.properties.label);
}
private onMapInitialized(newItem: string) {
// alert(newItem);
public onMapInitialized(newItem: string) {
console.log(newItem);
}
}

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

@ -7,12 +7,19 @@ import { AppComponent } from './app.component';
import { MapComponent } from './map/map.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ComponentsModule } from '../../src/common/components/components.module';
import { HttpClientModule, HttpClient } from '@angular/common/http'; //for http requests
import { MarkerService } from './services/marker.service';
import { PopupService } from './services/popup.service';
import { DatasetApiService } from "./services/dataset-api.service";
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 { HelgolandMapModule } from '@helgoland/map';
// import { LocateService } 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
@ -26,11 +33,11 @@ import { StationService } from "./services/station.service";
@NgModule({
// declarations: The components, directives, and pipes that belong to this NgModule.
declarations: [AppComponent, MapComponent, DashboardComponent],
declarations: [AppComponent, MapComponent, DashboardComponent, MessagesComponent],
// imports: Other modules whose exported classes are needed by component templates declared in this NgModule.
imports: [BrowserModule, HttpClientModule, AppRoutingModule],
imports: [BrowserModule, HttpClientModule, AppRoutingModule, ComponentsModule],
providers: [
MarkerService, PopupService, HttpService, DatasetApiService, StationService
MarkerService, PopupService, HttpService, DatasetApiService, StationService, MessageService
// {
// provide: DatasetApiInterface,
// useClass: SplittedDataDatasetApiInterface,

4
src/app/dashboard/dashboard.component.css
View file

@ -4,7 +4,7 @@ h2 {
text-align: center;
}
.heroes-menu {
.stations-menu {
padding: 0;
margin: auto;
max-width: 1000px;
@ -18,7 +18,7 @@ h2 {
align-items: flex-start;
}
a {
a.station {
background-color: #3f525c;
border-radius: 2px;
padding: 1rem;

8
src/app/dashboard/dashboard.component.html
View file

@ -1,7 +1,7 @@
<h2>Top Heroes</h2>
<div class="heroes-menu">
<a *ngFor="let station of stations"
<h2>Stations</h2>
<div class="stations-menu">
<a class="station" *ngFor="let station of stations"
routerLink="/detail/{{station.id}}">
{{ station.label }}
{{ station.properties.label }}
</a>
</div>

13
src/app/dashboard/dashboard.component.ts
View file

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { StationService } from '../services/station.service';
// import { StationService } from '../services/station.service';
import { DatasetApiService } from '../services/dataset-api.service';
import { Station } from '../../shared/models/station';
@Component({
@ -11,15 +12,19 @@ export class DashboardComponent implements OnInit {
public stations: Station[] = [];
constructor(private stationService: StationService) { }
constructor(private datasetApiService: DatasetApiService) { }
ngOnInit() {
this.getStations();
}
getStations(): void {
this.stationService.getStations()
.subscribe(stations => this.stations = stations);
// this.stationService.getStations()
// .subscribe(stations => this.stations = stations);
this.datasetApiService.getStations('https://geomon.geologie.ac.at/52n-sos-webapp/api/')
.subscribe((stations) => {
this.stations = stations
});
}
}

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

@ -1,5 +1,5 @@
import { Directive, OnChanges, SimpleChanges, EventEmitter, Input, Output, OnInit } from '@angular/core';
import { Map, Control, MapOptions, LatLngBoundsExpression, tileLayer } from 'leaflet';
import { Map, Control, MapOptions, LatLngBoundsExpression, tileLayer, TileLayer } from 'leaflet';
// import { MarkerService } from '../services/marker.service';
import { LayerOptions, LayerMap } from './map-options';
@ -114,15 +114,20 @@ export abstract class BaseMapComponent implements OnChanges, OnInit {
layerOptions = {
label: DEFAULT_BASE_LAYER_NAME,
visible: true,
layer: tileLayer(DEFAULT_BASE_LAYER_URL, {
attribution: DEFAULT_BASE_LAYER_ATTRIBUTION
layer: tileLayer.wms('https://ows.terrestris.de/osm-gray/service', {
format: 'image/png',
attribution: DEFAULT_BASE_LAYER_ATTRIBUTION,
layers: 'OSM-WMS'
})
// layer: new TileLayer(DEFAULT_BASE_LAYER_URL, {
// attribution: DEFAULT_BASE_LAYER_ATTRIBUTION
// })
};
}
if (!this.oldBaseLayer.hasOwnProperty[layerOptions.label]) {
// if (!this.oldBaseLayer.hasOwnProperty[layerOptions.label]) {
this.oldBaseLayer[layerOptions.label] = layerOptions.layer;
if (layerOptions.visible) { layerOptions.layer.addTo(this.map); }
}
// }
}
}

4
src/app/map/map-options.ts
View file

@ -1,11 +1,11 @@
import * as L from 'leaflet';
import { Layer } from "leaflet";
// https://github.com/52North/helgoland-toolbox/blob/develop/libs/map/src/lib/base/map-options.ts
export interface LayerOptions {
label: string;
visible: boolean;
layer: L.Layer;
layer: Layer;
}
// export type LayerMap = Map<string, LayerOptions>;

5
src/app/map/map.component.css
View file

@ -1,4 +1,4 @@
.map-container {
/* .map-container {
position: absolute;
top: 0;
left: 0;
@ -14,4 +14,5 @@
#map {
height: 100%;
}
} */

4
src/app/map/map.component.html
View file

@ -1,5 +1,7 @@
<div class="map-container">
<!-- <div class="map-container mapDesktop">
<div class="map-frame">
<div [attr.id]="mapId" class="map-viewer"></div>
</div>
</div> -->
<div [attr.id]="mapId" class="map-container mapDesktop">
</div>

18
src/app/map/map.component.ts
View file

@ -1,6 +1,6 @@
// https://github.com/52North/helgoland-toolbox/blob/c2c2eda20353c469a7aa4a6a118a810723af6622/libs/map/src/lib/selector/station-map-selector/station-map-selector.component.ts
import { Component, AfterViewInit, OnChanges, SimpleChanges, EventEmitter, Input, Output } from '@angular/core';
import { Map, Control, FeatureGroup, geoJSON, circleMarker, FitBoundsOptions, LatLngBoundsExpression } from 'leaflet';
import { Control, FeatureGroup, geoJSON, circleMarker, FitBoundsOptions, LatLngBoundsExpression } from 'leaflet';
import { MarkerService } from '../services/marker.service';
import { DatasetApiService } from '../services/dataset-api.service';
import { BaseMapComponent } from './base-map.component';
@ -21,8 +21,8 @@ export class MapComponent
/**
* @input The serviceUrl, where the selection should be loaded.
*/
@Input()
public serviceUrl: string;
// @Input()
// public serviceUrl: string;
@Output()
public onSelected: EventEmitter<any> = new EventEmitter<any>();
@ -37,8 +37,8 @@ export class MapComponent
public fitBoundsMarkerOptions: FitBoundsOptions;
protected oldBaseLayer: Control.LayersObject = {};
protected map: Map;
protected zoomControl: Control.Zoom;
// protected map: Map;
// protected zoomControl: Control.Zoom;
protected markerFeatureGroup: FeatureGroup;
// constructor() { }
@ -46,7 +46,9 @@ export class MapComponent
protected markerService: MarkerService,
private popupService: PopupService,
protected datasetApiService: DatasetApiService) {
super();
super();
this.markerFeatureGroup = new FeatureGroup();
}
ngAfterViewInit(): void {
@ -55,7 +57,7 @@ export class MapComponent
// this.markerService.makeCapitalCircleMarkers(this.map);
this.datasetApiService.getStations('https://geomon.geologie.ac.at/52n-sos-webapp/api/')
.subscribe((res) => {
this.markerFeatureGroup = new FeatureGroup();
// this.markerFeatureGroup = new FeatureGroup();
if (res instanceof Array && res.length > 0) {
res.forEach((station) => {
//const marker = this.createDefaultGeometry(entry);
@ -85,7 +87,7 @@ export class MapComponent
});
// this.createStationGeometries();
}
public ngOnChanges(changes: SimpleChanges) {
super.ngOnChanges(changes);
if (this.map && changes.statusIntervals) { this.drawGeometries(); }

19
src/app/messages/messages.component.css Normal file
View file

@ -0,0 +1,19 @@
/* MessagesComponent's private CSS styles */
h2 {
color: #A80000;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
.clear {
color: #333;
background-color: #eee;
margin-bottom: 12px;
padding: 1rem;
border-radius: 4px;
font-size: 1rem;
}
.clear:hover {
color: #fff;
background-color: #42545C;
}

9
src/app/messages/messages.component.html Normal file
View file

@ -0,0 +1,9 @@
<!-- <p>messages works!</p> -->
<div *ngIf="messageService.messages.length">
<h2>Messages</h2>
<button class="clear"
(click)="messageService.clear()">Clear messages</button>
<div *ngFor="let message of messageService.messages"> {{message}} </div>
</div>

20
src/app/messages/messages.component.ts Normal file
View file

@ -0,0 +1,20 @@
import { Component, OnInit } from '@angular/core';
import { MessageService } from '../services/message.service';
@Component({
selector: 'app-messages',
templateUrl: './messages.component.html',
styleUrls: ['./messages.component.css']
})
export class MessagesComponent implements OnInit {
public messageService;
constructor(messageService: MessageService) {
this.messageService = messageService;
}
ngOnInit(): void {
}
}

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

@ -2,7 +2,7 @@
// https://github.com/52North/helgoland-toolbox/blob/495f75cadcc3e7232206db1cd5dd8bbf3a172c4b/libs/core/src/lib/abstract-services/api-interface.ts#L6
// https://github.com/52North/helgoland-toolbox/blob/495f75cadcc3e7232206db1cd5dd8bbf3a172c4b/libs/core/src/lib/api-communication/connectors/dataset-api-v3-connector/api-v3-interface.ts#L321
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Phenomenon } from '../../shared/models/phenomenon';
import { Station } from '../../shared/models/station';
@ -10,6 +10,7 @@ import { Station } from '../../shared/models/station';
import { HttpService } from './http.service';
import { HttpRequestOptions } from '../../shared/models/http-requests';
import { HttpParams } from '@angular/common/http';
import { MessageService } from './message.service';
// @Injectable({
@ -22,17 +23,20 @@ export class DatasetApiService {
// constructor() { }
constructor(
private httpClient: HttpClient,
protected httpService: HttpService,) {
protected httpService: HttpService,
private messageService: MessageService) {
}
public getPhenomena(apiUrl: string, params?, options?) {
const url = this.createRequestUrl(apiUrl, 'phenomena');
public getPhenomena(apiUrl: string, params?: any, options?: any) {
const url = this.createRequestUrl(apiUrl, 'phenomena');
return this.requestApi<Phenomenon[]>(url, params, options);
}
public getStations(apiUrl: string, params?, options?: HttpRequestOptions): Observable<Station[]> {
public getStations(apiUrl: string, params?: any, options?: HttpRequestOptions): Observable<Station[]> {
const url = this.createRequestUrl(apiUrl, 'features');
return this.requestApi<Station[]>(url, params, options);
let stations = this.requestApi<Station[]>(url, params, options);
this.messageService.add('StationService: fetched stations');
return stations;
}
@ -43,13 +47,12 @@ export class DatasetApiService {
return requestUrl;
}
protected requestApi<T>(
url: string, params: HttpParams = new HttpParams(), options: HttpRequestOptions = {}
protected requestApi<T>(url: string, params: HttpParams = new HttpParams(), options: HttpRequestOptions = {}
): Observable<T> {
return this.httpService.client(options).get<T>(url,
{
params,
headers: this.createBasicAuthHeader(options.basicAuthToken)
headers: this.createBasicAuthHeader(options.basicAuthToken as string)
}
);
}

2
src/app/services/marker.service.ts
View file

@ -36,7 +36,7 @@ export class MarkerService {
makeCapitalCircleMarkers(map: Map): void {
this.http.get(this.capitalsUrl).subscribe((res: any) => {
let maxPop = Math.max(...res.features.map(x => x.properties.population), 0);
let maxPop = Math.max(...res.features.map((x: any) => x.properties.population), 0);
for (const c of res.features) {
const lon = c.geometry.coordinates[0];

19
src/app/services/message.service.ts Normal file
View file

@ -0,0 +1,19 @@
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class MessageService {
constructor() { }
messages: string[] = [];
add(message: string) {
this.messages.push(message);
}
clear() {
this.messages = [];
}
}

141
src/app/services/mock-stations.ts
View file

@ -1,72 +1,73 @@
import { Station } from '../../shared/models/station';
export const STATIONS: Station[] = [
{
id: '11',
label: 'Dr Nice',
geometry: {
"type": "Point",
"coordinates": [125.6, 10.1]
}
},
{
id: '12', label: 'Narco', geometry: {
"type": "Point",
"coordinates": [125.6, 10.1]
}
},
{
id: '13', label: 'Bombasto', geometry: {
"type": "Point",
"coordinates": [125.6, 10.1]
}
},
{
id: '14', label: 'Celeritas', geometry: {
"type": "Point",
"coordinates": [125.6, 10.1]
}
},
{
id: '15', label: 'Magneta', geometry: {
"type": "Point",
"coordinates": [125.6, 10.1]
}
},
{
id: '16', label: 'RubberMan', geometry: {
"type": "Point",
"coordinates": [125.6, 10.1]
},
},
{
id: '16', label: 'RubberMan', geometry: {
"type": "Point",
"coordinates": [125.6, 10.1]
},
},
{
id: '17', label: 'Dynama', geometry: {
"type": "Point",
"coordinates": [125.6, 10.1]
},
},
{
id: '18', label: 'Dr IQ', geometry: {
"type": "Point",
"coordinates": [125.6, 10.1]
},
},
{
id: '19', label: 'Magma', geometry: {
"type": "Point",
"coordinates": [125.6, 10.1]
},
},
{
id: '20', label: 'Tornado', geometry: {
"type": "Point",
"coordinates": [125.6, 10.1]
},
}
];
export const STATIONS: Station[] = [];
// export const STATIONS: Station[] = [
// {
// id: '11',
// label: 'Dr Nice',
// geometry: {
// "type": "Point",
// "coordinates": [125.6, 10.1]
// }
// },
// {
// id: '12', label: 'Narco', geometry: {
// "type": "Point",
// "coordinates": [125.6, 10.1]
// }
// },
// {
// id: '13', label: 'Bombasto', geometry: {
// "type": "Point",
// "coordinates": [125.6, 10.1]
// }
// },
// {
// id: '14', label: 'Celeritas', geometry: {
// "type": "Point",
// "coordinates": [125.6, 10.1]
// }
// },
// {
// id: '15', label: 'Magneta', geometry: {
// "type": "Point",
// "coordinates": [125.6, 10.1]
// }
// },
// {
// id: '16', label: 'RubberMan', geometry: {
// "type": "Point",
// "coordinates": [125.6, 10.1]
// },
// },
// {
// id: '16', label: 'RubberMan', geometry: {
// "type": "Point",
// "coordinates": [125.6, 10.1]
// },
// },
// {
// id: '17', label: 'Dynama', geometry: {
// "type": "Point",
// "coordinates": [125.6, 10.1]
// },
// },
// {
// id: '18', label: 'Dr IQ', geometry: {
// "type": "Point",
// "coordinates": [125.6, 10.1]
// },
// },
// {
// id: '19', label: 'Magma', geometry: {
// "type": "Point",
// "coordinates": [125.6, 10.1]
// },
// },
// {
// id: '20', label: 'Tornado', geometry: {
// "type": "Point",
// "coordinates": [125.6, 10.1]
// },
// }
// ];

12
src/app/services/station.service.ts
View file

@ -1,18 +1,22 @@
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { Station } from 'shared/models/station';
import { Station } from '../../shared/models/station';
import { MessageService } from './message.service';
import { STATIONS } from './mock-stations';
@Injectable({
providedIn: 'root'
})
export class StationService {
private messageService;
constructor() { }
constructor(messageService: MessageService) {
this.messageService = messageService;
}
getStations(): Observable<Station[]> {
const stations = of(STATIONS);
// this.messageService.add('HeroService: fetched heroes');
this.messageService.add('StationService: fetched stations');
return stations;
}
@ -20,7 +24,7 @@ export class StationService {
// For now, assume that a hero with the specified `id` always exists.
// Error handling will be added in the next step of the tutorial.
const station = STATIONS.find(h => h.id === id)!;
// this.messageService.add(`HeroService: fetched hero id=${id}`);
this.messageService.add(`StationService: fetched station id=${id}`);
return of(station);
}
}