diff --git a/package-lock.json b/package-lock.json index 905256a..047cf68 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 02545ef..03eea80 100644 --- a/package.json +++ b/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", diff --git a/src/app/404/404.component.html b/src/app/404/404.component.html new file mode 100644 index 0000000..ffa6f66 --- /dev/null +++ b/src/app/404/404.component.html @@ -0,0 +1 @@ +

404

diff --git a/src/app/404/404.component.ts b/src/app/404/404.component.ts new file mode 100644 index 0000000..f7e6dd3 --- /dev/null +++ b/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 { + +} diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts deleted file mode 100644 index d425c6f..0000000 --- a/src/app/app-routing.module.ts +++ /dev/null @@ -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 { } diff --git a/src/app/app.component.html b/src/app/app.component.html new file mode 100644 index 0000000..4919839 --- /dev/null +++ b/src/app/app.component.html @@ -0,0 +1,4 @@ + + Map Alliance + + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 89f3187..69f85bc 100644 --- a/src/app/app.component.ts +++ b/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: ` - -
-

- Welcome to {{title}}! -

- -
-

Here are some links to help you start:

- - - `, - styles: [] + templateUrl: 'app.component.html' }) export class AppComponent { - title = 'MapAlliance'; + constructor(private geolocation: GeolocationService) { + geolocation.location.subscribe(pos => console.log(pos)); + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 13c1dd8..afc93db 100644 --- a/src/app/app.module.ts +++ b/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] diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts new file mode 100644 index 0000000..9c71c44 --- /dev/null +++ b/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 { } diff --git a/src/app/geolocation/geolocation.service.ts b/src/app/geolocation/geolocation.service.ts index 39bac3c..424f520 100644 --- a/src/app/geolocation/geolocation.service.ts +++ b/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 { - location = new BehaviorSubject(null); +export class GeolocationService implements OnDestroy { + readonly watchRegistrationID; - constructor(private snackBar: MatSnackBar) { + location = new BehaviorSubject(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) { - this.location.next(position); - } - - 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; - } + ngOnDestroy() { + if(this.watchRegistrationID) navigator.geolocation.clearWatch(this.watchRegistrationID); } } diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html new file mode 100644 index 0000000..f95bef3 --- /dev/null +++ b/src/app/home/home.component.html @@ -0,0 +1 @@ +

Home

diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts new file mode 100644 index 0000000..98b9def --- /dev/null +++ b/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 { + +} diff --git a/src/app/map/map.component.html b/src/app/map/map.component.html new file mode 100644 index 0000000..15e01ac --- /dev/null +++ b/src/app/map/map.component.html @@ -0,0 +1 @@ +

Map

diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts new file mode 100644 index 0000000..60a52af --- /dev/null +++ b/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 { + +} diff --git a/src/styles.scss b/src/styles.scss index 7e7239a..86ff49e 100644 --- a/src/styles.scss +++ b/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; }