diff --git a/index.html b/index.html index 9c02e5c..e598044 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ A Basic HTML5 Template + diff --git a/notes.txt b/notes.txt index eaf79d8..f68a46f 100644 --- a/notes.txt +++ b/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 diff --git a/package-lock.json b/package-lock.json index 310f4a3..6bb0bd4 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 2954ab7..6dfcce4 100644 --- a/package.json +++ b/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", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts new file mode 100644 index 0000000..643698e --- /dev/null +++ b/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 { } \ No newline at end of file diff --git a/src/app/app.component.css b/src/app/app.component.css index e69de29..f628fe0 100644 --- a/src/app/app.component.css +++ b/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; + } + \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index a72a6e9..a0f3b41 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,9 +1,18 @@ + \ No newline at end of file +
Is loading: {{loadingStations}}
--> + + + \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 73462b7..699b65e 100644 --- a/src/app/app.component.ts +++ b/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 diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 76a37b8..65a5cf7 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/dashboard/dashboard.component.css b/src/app/dashboard/dashboard.component.css new file mode 100644 index 0000000..6317e4a --- /dev/null +++ b/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; + } + \ No newline at end of file diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html new file mode 100644 index 0000000..d1cadf4 --- /dev/null +++ b/src/app/dashboard/dashboard.component.html @@ -0,0 +1,7 @@ +

Top Heroes

+
+ + {{ station.label }} + +
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts new file mode 100644 index 0000000..945c451 --- /dev/null +++ b/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); + } + +} diff --git a/src/app/services/mock-stations.ts b/src/app/services/mock-stations.ts new file mode 100644 index 0000000..f7fe038 --- /dev/null +++ b/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] + }, + } +]; \ No newline at end of file diff --git a/src/app/services/station.service.ts b/src/app/services/station.service.ts new file mode 100644 index 0000000..097ab4f --- /dev/null +++ b/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 { + const stations = of(STATIONS); + // this.messageService.add('HeroService: fetched heroes'); + return stations; + } + + getStation(id: string): Observable { + // 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); + } +} diff --git a/src/index.tmp.html b/src/index.tmp.html index fe8d8bd..2fe3702 100644 --- a/src/index.tmp.html +++ b/src/index.tmp.html @@ -8,6 +8,7 @@ <%= htmlWebpackPlugin.options.title || 'Webpack App'%> + diff --git a/src/shared/models/station.ts b/src/shared/models/station.ts index b779f80..4bbb38c 100644 --- a/src/shared/models/station.ts +++ b/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 { diff --git a/webpack.common.js b/webpack.common.js index 865adab..6db9a7b 100644 --- a/webpack.common.js +++ b/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', + // }), ] };