- 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,9 +1,18 @@
 <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> -->
+<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 = {
@@ -35,28 +35,28 @@ module.exports = {
 	},
 
 	// resolve: {
-    //     alias: {
-    //         "./images/layers.png$": path.resolve(
-    //             __dirname,
-    //             "./node_modules/leaflet/dist/images/layers.png"
-    //         ),
-    //         "./images/layers-2x.png$": path.resolve(
-    //             __dirname,
-    //             "./node_modules/leaflet/dist/images/layers-2x.png"
-    //         ),
-    //         "./images/marker-icon.png$": path.resolve(
-    //             __dirname,
-    //             "./node_modules/leaflet/dist/images/marker-icon.png"
-    //         ),
-    //         "./images/marker-icon-2x.png$": path.resolve(
-    //             __dirname,
-    //             "./node_modules/leaflet/dist/images/marker-icon-2x.png"
-    //         ),
-    //         "./images/marker-shadow.png$": path.resolve(
-    //             __dirname,
-    //             "./node_modules/leaflet/dist/images/marker-shadow.png"
-    //         )
-    //     }
+	//     alias: {
+	//         "./images/layers.png$": path.resolve(
+	//             __dirname,
+	//             "./node_modules/leaflet/dist/images/layers.png"
+	//         ),
+	//         "./images/layers-2x.png$": path.resolve(
+	//             __dirname,
+	//             "./node_modules/leaflet/dist/images/layers-2x.png"
+	//         ),
+	//         "./images/marker-icon.png$": path.resolve(
+	//             __dirname,
+	//             "./node_modules/leaflet/dist/images/marker-icon.png"
+	//         ),
+	//         "./images/marker-icon-2x.png$": path.resolve(
+	//             __dirname,
+	//             "./node_modules/leaflet/dist/images/marker-icon-2x.png"
+	//         ),
+	//         "./images/marker-shadow.png$": path.resolve(
+	//             __dirname,
+	//             "./node_modules/leaflet/dist/images/marker-shadow.png"
+	//         )
+	//     }
 	// },
 	module: {
 		rules: [
@@ -65,26 +65,26 @@ module.exports = {
 				use: [{
 					loader: 'file-loader',
 					options: {
-						name:'[name].[ext]',
-						outputPath:'./assets/'
+						name: '[name].[ext]',
+						outputPath: './assets/'
 					}
 				}]
 			},
-		
-			  {
-			    // test: /\.js$/,
-			    test: /\.(js|jsx|tsx|ts)$/,
-			    exclude: /(node_modules|bower_components)/,               
-			    use: 
-			        [
-			        {
-			            loader: 'babel-loader',
-			            // options: { configFileName: helpers.root('src', 'tsconfig.json') }
-			        }, 
-			        {
-			            loader: 'angular2-template-loader'
-			        }
-			        ]                                      
+
+			{
+				// test: /\.js$/,
+				test: /\.(js|jsx|tsx|ts)$/,
+				exclude: /(node_modules|bower_components)/,
+				use:
+					[
+						{
+							loader: 'babel-loader',
+							// options: { configFileName: helpers.root('src', 'tsconfig.json') }
+						},
+						{
+							loader: 'angular2-template-loader'
+						}
+					]
 
 			},
 			// {
@@ -111,14 +111,14 @@ module.exports = {
 			{
 				test: /\.html$/,
 				// exclude: [/node_modules/],
-				include:  path.resolve(__dirname, 'src/app'),
+				include: path.resolve(__dirname, 'src/app'),
 				use: {
 					loader: 'raw-loader',
 					options: {
 						esModule: false,
 					},
 				}
-			},		
+			},
 			{
 				test: /\.(css|scss)$/,
 				// include: helpers.root('src', 'app'),
@@ -129,78 +129,78 @@ module.exports = {
 						esModule: false,
 					},
 				}
-				
+
 				// use: ['style-loader', 'css-loader']
 			},
 			{
-                test: /\.(scss|css)$/,
+				test: /\.(scss|css)$/,
 				// exclude: helpers.root('src', 'app'),
 				exclude: path.resolve(__dirname, 'src/app'),
-                use: [
-                    {
-                        loader: (isProduction === true) ? MiniCssExtractPlugin.loader : 'style-loader',
-                        // loader: 'style-loader',                      
-                        // loader: MiniCssExtractPlugin.loader,
-                        // options: {
-                        //     hmr: process.env.NODE_ENV === 'development',
-                        // },
-                    },                  
-                     // Translates CSS into CommonJS
-                    {
-                        loader: "css-loader",
-                        options: {
-                            sourceMap: true
-                        }
-                    }
-                   
-                ]
-            },
-		
+				use: [
+					{
+						loader: (isProduction === true) ? MiniCssExtractPlugin.loader : 'style-loader',
+						// loader: 'style-loader',                      
+						// loader: MiniCssExtractPlugin.loader,
+						// options: {
+						//     hmr: process.env.NODE_ENV === 'development',
+						// },
+					},
+					// Translates CSS into CommonJS
+					{
+						loader: "css-loader",
+						options: {
+							sourceMap: true
+						}
+					}
+
+				]
+			},
+
 
 		]
 	},
 	resolve: {
-        extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
-      },
+		extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
+	},
 	// devtool: 'inline-source-map',
 	stats: {
 		colors: true
 	},
 
 	optimization: {
-        minimize: isProduction,
-        minimizer: [
-            new TerserPlugin({
-                // cache: true,
-                parallel: true,
-                // sourceMap: true, // Must be set to true if using source-maps in production
-                extractComments: true,
-                terserOptions: {
+		minimize: isProduction,
+		minimizer: [
+			new TerserPlugin({
+				// cache: true,
+				parallel: true,
+				// sourceMap: true, // Must be set to true if using source-maps in production
+				extractComments: true,
+				terserOptions: {
 
-                    compress: {
-                        directives: false,
-                            // drop_console: true,
-                            // drop_debugger: true,
-                            // keep_classnames: false,
-                            // keep_fnames: false,
-                    },
-                    mangle: true, // Note `mangle.properties` is `false` by default.
-                    keep_classnames: false,
-                    keep_fnames: false,
-                }
-            })
-        ],
-    },
+					compress: {
+						directives: false,
+						// drop_console: true,
+						// drop_debugger: true,
+						// keep_classnames: false,
+						// keep_fnames: false,
+					},
+					mangle: true, // Note `mangle.properties` is `false` by default.
+					keep_classnames: false,
+					keep_fnames: false,
+				}
+			})
+		],
+	},
 
 	plugins: [
 		// new MiniCssExtractPlugin({ // Make sure MiniCssExtractPlugin instance is included in array before the PurifyCSSPlugin
-        //     // Options similar to the same options in webpackOptions.output
-        //     // both options are optional
-        //     // filename: '[name].css',
-        //     // chunkFilename: '[id].css',
-        //     filename: '[name].css',
-        //     chunkFilename: '[chunkhash].css',
-        // }),
+		//     // Options similar to the same options in webpackOptions.output
+		//     // both options are optional
+		//     // filename: '[name].css',
+		//     // chunkFilename: '[id].css',
+		//     filename: '[name].css',
+		//     chunkFilename: '[chunkhash].css',
+		// }),
 	]
 };