Added pages

package-lock.json

@@ -4,6 +4,11 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@agm/core": {
+      "version": "1.0.0-beta.6",
+      "resolved": "https://registry.npmjs.org/@agm/core/-/core-1.0.0-beta.6.tgz",
+      "integrity": "sha512-Bf6azUVIZYwgUWUNISaENh38D17XJxgKU7m1TNTrP+sIgYjPrjEON8mxoGnYI8B7PBbdaWl6RPV/FcrEfSG9Ng=="
+    },
     "@angular-devkit/architect": {
       "version": "0.800.4",
       "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.800.4.tgz",
@@ -1310,6 +1315,11 @@
         "multicast-dns-service-types": "^1.1.0"
       }
     },
+    "bootstrap-scss": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-scss/-/bootstrap-scss-4.3.1.tgz",
+      "integrity": "sha512-9S2yVFoiCALs8nIBR9Tljdh9zDaBODZwVWajTgGuzONUxotDj44/SgW8s5Z3siJSyT4mye9PDbs0OPMmOfwoyg=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "private": true,
   "dependencies": {
+    "@agm/core": "^1.0.0-beta.6",
     "@angular/animations": "~8.0.1",
     "@angular/cdk": "~8.0.1",
     "@angular/common": "~8.0.1",
@@ -23,6 +24,7 @@
     "@angular/pwa": "^0.800.4",
     "@angular/router": "~8.0.1",
     "@angular/service-worker": "~8.0.1",
+    "bootstrap-scss": "^4.3.1",
     "hammerjs": "^2.0.8",
     "rxjs": "~6.4.0",
     "tslib": "^1.9.0",

src/app/404/404.component.html

@@ -0,0 +1 @@
+<h1>404</h1>

src/app/404/404.component.ts

@@ -0,0 +1,9 @@
+import {Component} from "@angular/core";
+
+@Component({
+    selector: 'not-found',
+    templateUrl: '404.component.html'
+})
+export class NotFoundComponent {
+
+}

src/app/app-routing.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-const routes: Routes = [];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }

src/app/app.component.html

@@ -0,0 +1,4 @@
+<mat-toolbar>
+    Map Alliance
+</mat-toolbar>
+<router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,31 +1,12 @@
 import { Component } from '@angular/core';
+import {GeolocationService} from "./geolocation/geolocation.service";
 
 @Component({
   selector: 'app-root',
-  template: `
+  templateUrl: 'app.component.html'
-    <!--The content below is only a placeholder and can be replaced.-->
-    <div style="text-align:center">
-      <h1>
-        Welcome to {{title}}!
-      </h1>
-      <img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-    </div>
-    <h2>Here are some links to help you start: </h2>
-    <ul>
-      <li>
-        <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-      </li>
-      <li>
-        <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-      </li>
-      <li>
-        <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-      </li>
-    </ul>
-    <router-outlet></router-outlet>
-  `,
-  styles: []
 })
 export class AppComponent {
-  title = 'MapAlliance';
+  constructor(private geolocation: GeolocationService) {
+    geolocation.location.subscribe(pos => console.log(pos));
+  }
 }

src/app/app.module.ts

@@ -1,25 +1,32 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 
-import {AppRoutingModule} from './app-routing.module';
+import {AppRouting} from './app.routing';
 import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {ServiceWorkerModule} from '@angular/service-worker';
 import {environment} from '../environments/environment';
 import {FormsModule} from "@angular/forms";
-import {MatSnackBarModule} from "@angular/material";
+import {MatSnackBarModule, MatToolbarModule} from "@angular/material";
+import {MapComponent} from "./map/map.component";
+import {NotFoundComponent} from "./404/404.component";
+import {HomeComponent} from "./home/home.component";
 
 @NgModule({
     declarations: [
-        AppComponent
+        AppComponent,
+        HomeComponent,
+        MapComponent,
+        NotFoundComponent,
     ],
     imports: [
         BrowserModule,
-        AppRoutingModule,
+        AppRouting,
         BrowserAnimationsModule,
         FormsModule,
         MatSnackBarModule,
-        ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production})
+        ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),
+        MatToolbarModule
     ],
     providers: [],
     bootstrap: [AppComponent]

src/app/app.routing.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import {NotFoundComponent} from "./404/404.component";
+import {MapComponent} from "./map/map.component";
+import {HomeComponent} from "./home/home.component";
+
+const routes: Routes = [
+    {path: '', pathMatch: 'full', component: HomeComponent},
+    {path: '404', component: NotFoundComponent},
+    {path: '**', component: MapComponent}
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRouting { }

src/app/geolocation/geolocation.service.ts

@@ -1,39 +1,38 @@
-import {Injectable} from '@angular/core';
+import {Injectable, OnDestroy} from '@angular/core';
 import {BehaviorSubject} from "rxjs";
 import {MatSnackBar} from "@angular/material";
 
 @Injectable({
     providedIn: 'root'
 })
-export class GeolocationService {
+export class GeolocationService implements OnDestroy {
-    location = new BehaviorSubject(null);
+    readonly watchRegistrationID;
 
-    constructor(private snackBar: MatSnackBar) {
+    location = new BehaviorSubject<Coordinates>(null);
+
+    constructor(snackBar: MatSnackBar) {
         if(navigator.geolocation) {
-            navigator.geolocation.getCurrentPosition(this.updatePosition, this.errorHandler);
+            this.watchRegistrationID = navigator.geolocation.watchPosition(pos => this.location.next(pos.coords), (error) => {
+                switch(error.code) {
+                    case error.PERMISSION_DENIED:
+                        snackBar.open('Geolocation permission denied', null, {horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
+                        break;
+                    case error.POSITION_UNAVAILABLE:
+                        snackBar.open('Geolocation unavailable', null, {horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
+                        break;
+                    case error.TIMEOUT:
+                        snackBar.open('Geolocation timeout', null, {horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
+                        break;
+                    default:
+                        snackBar.open('Geolocation experienced an unknown error', null, {horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
+                }
+            });
         } else {
-            snackBar.open('Geolocation is not supported', null, {horizontalPosition: 'right', panelClass: 'bg-warn'});
+            snackBar.open('Geolocation is not supported', null, {horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
         }
     }
 
-    updatePosition(position) {
+    ngOnDestroy() {
-        this.location.next(position);
+        if(this.watchRegistrationID) navigator.geolocation.clearWatch(this.watchRegistrationID);
-    }
-
-    errorHandler(error) {
-        switch(error.code) {
-            case error.PERMISSION_DENIED:
-                this.snackBar.open('Geolocation permission denied', null, {horizontalPosition: 'right', panelClass: 'bg-warn'});
-                break;
-            case error.POSITION_UNAVAILABLE:
-                this.snackBar.open('Geolocation unavailable', null, {horizontalPosition: 'right', panelClass: 'bg-warn'});
-                break;
-            case error.TIMEOUT:
-                this.snackBar.open('Geolocation timeout', null, {horizontalPosition: 'right', panelClass: 'bg-warn'});
-                break;
-            case error.UNKNOWN_ERROR:
-                this.snackBar.open('Geolocation experienced an unknown error', null, {horizontalPosition: 'right', panelClass: 'bg-warn'});
-                break;
-        }
     }
 }

src/app/home/home.component.html

@@ -0,0 +1 @@
+<h1>Home</h1>

src/app/home/home.component.ts

@@ -0,0 +1,9 @@
+import {Component} from "@angular/core";
+
+@Component({
+    selector: 'home',
+    templateUrl: 'home.component.html',
+})
+export class HomeComponent {
+
+}

src/app/map/map.component.html

@@ -0,0 +1 @@
+<h1>Map</h1>

src/app/map/map.component.ts

@@ -0,0 +1,9 @@
+import {Component} from "@angular/core";
+
+@Component({
+    selector: 'map',
+    templateUrl: 'map.component.html'
+})
+export class MapComponent {
+
+}

src/styles.scss

@@ -1,4 +1,4 @@
-/* You can add global styles to this file, and also import other style files */
+@import '~bootstrap-scss/bootstrap.scss';
 
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }