- add dashboard and angular routing files

- npm updates
- changes in webpack.common.js

index.html

@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <title>A Basic HTML5 Template</title>
+  <base href="/">
   <meta name="description" content="A simple HTML5 Template for new projects.">
   <meta name="author" content="Arno Kaimbacher">
 

notes.txt

@@ -12,6 +12,7 @@ npm install --save-dev @babel/plugin-proposal-decorators
 
 
  npm install --save @angular/core @angular/platform-browser-dynamic @angular/platform-browser
+ npm install --save @angular/router
 
  npm install --save leaflet@latest 
  
@@ -43,7 +44,7 @@ npx @angular/cli generate service marker --skip-tests
 
 npx @angular/cli generate component map --skip-tests
 
-npx @angular/cli generate module map --skip-tests
+// npx @angular/cli generate module map --skip-tests
 
 
 npx @angular/cli generate service dataset-api --skip-tests
@@ -52,6 +53,10 @@ CREATE src/app/dataset-api.service.ts (139 bytes)
 
 npx @angular/cli generate service http --skip-tests
 
+
+npx @angular/cli generate component dashboard --skip-tests
+
+
 ========================================= ExtractTextPlugin ==================================================
 
 npm install --save-dev mini-css-extract-plugin

package-lock.json

@@ -12,6 +12,7 @@
         "@angular/forms": "^12.1.4",
         "@angular/platform-browser": "^12.1.4",
         "@angular/platform-browser-dynamic": "^12.1.4",
+        "@angular/router": "^12.2.3",
         "@helgoland/core": "^12.0.0-beta.1",
         "@helgoland/depiction": "^12.0.0-beta.1",
         "@helgoland/map": "^12.0.0-beta.1",
@@ -286,6 +287,23 @@
         "@angular/platform-browser": "12.2.3"
       }
     },
+    "node_modules/@angular/router": {
+      "version": "12.2.3",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-12.2.3.tgz",
+      "integrity": "sha512-6qKQzS7WVx1J0ue3rqNlr2h/F0Kar6JNVrbDc+hFXyeHhdtk3Wg8Xfk4LxWBqgs6d+6HlOPIzMM4QzydVbEyRQ==",
+      "dependencies": {
+        "tslib": "^2.2.0"
+      },
+      "engines": {
+        "node": "^12.14.1 || >=14.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "12.2.3",
+        "@angular/core": "12.2.3",
+        "@angular/platform-browser": "12.2.3",
+        "rxjs": "^6.5.3 || ^7.0.0"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.14.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
@@ -13017,6 +13035,14 @@
         "tslib": "^2.2.0"
       }
     },
+    "@angular/router": {
+      "version": "12.2.3",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-12.2.3.tgz",
+      "integrity": "sha512-6qKQzS7WVx1J0ue3rqNlr2h/F0Kar6JNVrbDc+hFXyeHhdtk3Wg8Xfk4LxWBqgs6d+6HlOPIzMM4QzydVbEyRQ==",
+      "requires": {
+        "tslib": "^2.2.0"
+      }
+    },
     "@babel/code-frame": {
       "version": "7.14.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",

package.json

@@ -46,6 +46,7 @@
     "@angular/forms": "^12.1.4",
     "@angular/platform-browser": "^12.1.4",
     "@angular/platform-browser-dynamic": "^12.1.4",
+    "@angular/router": "^12.2.3",
     "@helgoland/core": "^12.0.0-beta.1",
     "@helgoland/depiction": "^12.0.0-beta.1",
     "@helgoland/map": "^12.0.0-beta.1",

src/app/app-routing.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+//neu
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { MapComponent } from './map/map.component';
+// import { HeroDetailComponent } from './hero-detail/hero-detail.component';
+
+// const routes: Routes = [];
+
+const routes: Routes = [
+  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
+  { path: 'dashboard', component: DashboardComponent },
+//   { path: 'detail/:id', component: HeroDetailComponent },
+  { path: 'map', component: MapComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.css

@@ -0,0 +1,22 @@
+/* AppComponent's private CSS styles */
+h1 {
+    margin-bottom: 0;
+  }
+  nav a {
+    padding: 1rem;
+    text-decoration: none;
+    margin-top: 10px;
+    display: inline-block;
+    background-color: #e8e8e8;
+    color: #3d3d3d;
+    border-radius: 4px;
+  }
+  
+  nav a:hover {
+    color: white;
+    background-color: #42545C;
+  }
+  nav a.active {
+    background-color: black;
+  }
+  

src/app/app.component.html

@@ -1,5 +1,6 @@
 <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>
@@ -7,3 +8,11 @@
     [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> -->

src/app/app.component.ts

@@ -3,7 +3,7 @@ import '../styles.css';
 // import '../../node_modules/leaflet/dist/leaflet.css';
 
 import { ParameterFilter, Phenomenon, Station } from '@helgoland/core';
-import { GeoSearchOptions, LayerOptions } from '@helgoland/map';
+import { LayerOptions } from '@helgoland/map';
 import { Marker, MapOptions, Control, icon, LatLngBoundsExpression } from 'leaflet';
 // optional, to adapt leaflet markers
 

src/app/app.module.ts

@@ -1,14 +1,18 @@
 import { NgModule } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
 
+
+import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { MapComponent } from './map/map.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
 
 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";
 
 // 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
@@ -22,11 +26,11 @@ import { HttpService } from "./services/http.service";
 
 @NgModule({
   // declarations: The components, directives, and pipes that belong to this NgModule.
-  declarations: [AppComponent, MapComponent],
+  declarations: [AppComponent, MapComponent, DashboardComponent],
   // imports: Other modules whose exported classes are needed by component templates declared in this NgModule.
-  imports: [BrowserModule, HttpClientModule],
+  imports: [BrowserModule, HttpClientModule, AppRoutingModule],
   providers: [
-    MarkerService, PopupService, HttpService, DatasetApiService,
+    MarkerService, PopupService, HttpService, DatasetApiService, StationService
     // {
     //   provide: DatasetApiInterface,
     //   useClass: SplittedDataDatasetApiInterface,

src/app/dashboard/dashboard.component.css

@@ -0,0 +1,51 @@
+/* DashboardComponent's private CSS styles */
+
+h2 {
+    text-align: center;
+  }
+  
+  .heroes-menu {
+    padding: 0;
+    margin: auto;
+    max-width: 1000px;
+  
+    /* flexbox */
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-content: flex-start;
+    align-items: flex-start;
+  }
+  
+  a {
+    background-color: #3f525c;
+    border-radius: 2px;
+    padding: 1rem;
+    font-size: 1.2rem;
+    text-decoration: none;
+    display: inline-block;
+    color: #fff;
+    text-align: center;
+    width: 100%;
+    min-width: 70px;
+    margin: .5rem auto;
+    box-sizing: border-box;
+  
+    /* flexbox */
+    order: 0;
+    flex: 0 1 auto;
+    align-self: auto;
+  }
+  
+  @media (min-width: 600px) {
+    a {
+      width: 18%;
+      box-sizing: content-box;
+    }
+  }
+  
+  a:hover {
+    background-color: #000;
+  }
+  

src/app/dashboard/dashboard.component.html

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

src/app/dashboard/dashboard.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { StationService } from '../services/station.service';
+import { Station } from '../../shared/models/station';
+
+@Component({
+	selector: 'app-dashboard',
+	templateUrl: './dashboard.component.html',
+	styleUrls: ['./dashboard.component.css']
+})
+export class DashboardComponent implements OnInit {
+
+	public stations: Station[] = [];
+
+	constructor(private stationService: StationService) { }
+
+	ngOnInit() {
+		this.getStations();
+	}
+
+	getStations(): void {
+		this.stationService.getStations()
+			.subscribe(stations => this.stations = stations);
+	}
+
+}

src/app/services/mock-stations.ts

@@ -0,0 +1,72 @@
+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]
+        },
+    }
+];

src/app/services/station.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { Station } from 'shared/models/station';
+import { STATIONS } from './mock-stations';
+
+@Injectable({
+	providedIn: 'root'
+})
+export class StationService {
+
+	constructor() { }
+
+	getStations(): Observable<Station[]> {
+		const stations = of(STATIONS);
+		// this.messageService.add('HeroService: fetched heroes');
+		return stations;
+	}
+
+	getStation(id: string): Observable<Station> {
+		// 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}`);
+		return of(station);
+	}
+}

src/index.tmp.html

@@ -8,6 +8,7 @@
 
    
     <title><%= htmlWebpackPlugin.options.title || 'Webpack App'%></title>
+    <base href="/">
     <meta name="description" content="geomonitoring viewer of the Geological Survey of Austria">
     <meta name="author" content="Arno Kaimbacher">
 

src/shared/models/station.ts

@@ -4,7 +4,7 @@ export class Station {
     public id: string;
     public label: string;
     public geometry: GeoJSON.GeometryObject;
-    public properties: StationProperties;
+    public properties?: StationProperties;
 }
 
 export interface StationProperties {

webpack.common.js

@@ -8,12 +8,12 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 /**
  * flag Used to check if the environment is production or not
  */
- const isProduction = (process.env.NODE_ENV === 'production');
+const isProduction = (process.env.NODE_ENV === 'production');
 //  const devMode = (process.env.NODE_ENV !== 'production');
 
- /**
- * Include hash to filenames for cache busting - only at production
- */
+/**
+* Include hash to filenames for cache busting - only at production
+*/
 const fileNamePrefix = isProduction ? '[chunkhash].' : '';
 
 module.exports = {
@@ -65,8 +65,8 @@ module.exports = {
 				use: [{
 					loader: 'file-loader',
 					options: {
-						name:'[name].[ext]',
-						outputPath:'./assets/'
+						name: '[name].[ext]',
+						outputPath: './assets/'
 					}
 				}]
 			},