Dark mode map and some other stuff

where-web/.editorconfig

+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

where-web/angular.json

@@ -24,9 +24,8 @@
               "src/assets"
             ],
             "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "./node_modules/leaflet/dist/leaflet.css",
-              "src/styles.scss"
+              "src/sass/app-styles.scss"
             ],
             "scripts": []
           },
@@ -90,7 +89,6 @@
               "src/assets"
             ],
             "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "src/styles.css"
             ],
             "scripts": []

where-web/src/app/app.component.html

 <mat-toolbar>
-    <span>Where</span>
+    <button mat-icon-button (click)="sidenav.toggle()">
+        <mat-icon>menu</mat-icon>
+    </button>
+
+    <h1>Where</h1>
 </mat-toolbar>
 
-<mat-drawer-container>
-    <mat-drawer [mode]="'side'" [opened]="true">
-        Drawyer Content
-    </mat-drawer>
+<mat-sidenav-container>
+    <mat-sidenav #sidenav [mode]="isMobile ? 'over' : 'side'" [fixedInViewport]="isMobile" [fixedTopGap]="56">
+        <app-search></app-search>
+    </mat-sidenav>
 
-    <mat-drawer-content>
+    <mat-sidenav-content>
         <app-map></app-map>
-    </mat-drawer-content>
-</mat-drawer-container>
\ No newline at end of file
+    </mat-sidenav-content>
+</mat-sidenav-container>
\ No newline at end of file

where-web/src/app/app.component.ts

-import { Component, OnInit, ChangeDetectorRef, ChangeDetectionStrategy, Input, OnChanges } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { MediaMatcher } from '@angular/cdk/layout';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
+export class AppComponent implements OnDestroy {
+    private mobileQuery: MediaQueryList;
+    private mobileQueryListener;
 
+    constructor(cd: ChangeDetectorRef, media: MediaMatcher) {
+        this.mobileQuery = media.matchMedia('(max-width: 600px)');
+
+        this.mobileQueryListener = () => cd.detectChanges();
+
+        this.mobileQuery.addListener(this.mobileQueryListener);
+    }
+
+    get isMobile(): boolean {
+        return this.mobileQuery.matches;
+    }
+
+    ngOnDestroy() {
+        this.mobileQuery.removeListener(this.mobileQueryListener);
+    }
 }

where-web/src/app/app.module.ts

@@ -2,6 +2,11 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatInputModule } from '@angular/material/input';
 import { LeafletModule } from '@asymmetrik/ngx-leaflet';
 import { StoreModule } from '@ngrx/store';
 
@@ -9,21 +14,37 @@ import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MapComponent } from './map/map.component';
 import { reducers } from './store/app.reducer';
+import { SearchComponent } from './search/search.component';
+import { ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    MapComponent
-  ],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    MatToolbarModule,
-    MatSidenavModule,
-    LeafletModule.forRoot(),
-    StoreModule.forRoot(reducers),
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+    declarations: [
+        AppComponent,
+        MapComponent,
+        SearchComponent
+    ],
+    imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+        ReactiveFormsModule,
+        MatToolbarModule,
+        MatSidenavModule,
+        MatIconModule,
+        MatButtonModule,
+        MatFormFieldModule,
+        MatAutocompleteModule,
+        MatInputModule,
+        LeafletModule.forRoot(),
+        StoreModule.forRoot(reducers),
+    ],
+    providers: [
+        {
+            provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+            useValue: {
+                appearance: 'outline'
+            }
+        }
+    ],
+    bootstrap: [AppComponent]
 })
 export class AppModule { }

where-web/src/app/map/map.component.html

-<div class="map-root" leaflet [leafletOptions]="options">
+<div class="map-root" leaflet [leafletOptions]="mapOptions" [leafletLayers]="mapLayers">
 
 </div>
\ No newline at end of file

where-web/src/app/map/map.component.scss

 .map-root {
-    height: 650px;
+    // TODO: Don't hardcode appbar height
+    height: calc(100vh - 64px);
+    
+    @media (max-width: 599px) {
+        height: calc(100vh - 56px);
+    }
 }
\ No newline at end of file

where-web/src/app/map/map.component.ts

-import { Component } from '@angular/core';
-import { latLng, tileLayer } from 'leaflet';
+import { Component, ChangeDetectorRef, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
+import { latLng, tileLayer, MapOptions, TileLayer } from 'leaflet';
+import { MediaMatcher } from '@angular/cdk/layout';
+
+const createLayer = (map) => tileLayer(
+    map,
+    {
+        attribution:
+            '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+        subdomains: 'abcd',
+        maxZoom: 19
+    }
+);
+
+const LIGHT_MODE_LAYER = createLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}{r}.png');
+const DARK_MODE_LAYER = createLayer('https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png');
 
 @Component({
     selector: 'app-map',
     templateUrl: './map.component.html',
-    styleUrls: ['./map.component.scss']
+    styleUrls: ['./map.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class MapComponent {
-    options = {
-        layers: [
-            tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '...' })
-        ],
-        zoom: 17,
-        center: latLng(38.831493, -77.311485)
+export class MapComponent implements OnDestroy {
+
+    mapOptions: MapOptions = {
+            zoom: 17,
+            center: latLng(38.831493, -77.311485)
     };
+
+    private darkModeQuery: MediaQueryList;
+    private darkModeQueryListener;
+
+    constructor(private cd: ChangeDetectorRef, media: MediaMatcher)  {
+        this.darkModeQuery = media.matchMedia('(prefers-color-scheme: dark)');
+
+        this.darkModeQueryListener = () => cd.detectChanges();
+
+        this.darkModeQuery.addListener(this.darkModeQueryListener);
+    }
+
+    get isDarkMode(): boolean {
+        return this.darkModeQuery.matches;
+    }
+
+    get mapLayers(): TileLayer[] {
+        return this.isDarkMode ? [DARK_MODE_LAYER] : [LIGHT_MODE_LAYER];
+    }
+
+    ngOnDestroy() {
+        this.darkModeQuery.removeListener(this.darkModeQueryListener);
+    }
 }

where-web/src/app/models/point_of_interest.model.ts

@@ -6,4 +6,4 @@ export interface PointOfInterest {
     parent: number;
     lat: number;
     lon: number;
-};
+}

where-web/src/app/search/search.component.html

+<form [formGroup]="form" class="search-container">
+    <mat-form-field>
+        <mat-label>Search</mat-label>
+        <input type="text" matInput [formControlName]="'search'" [matAutocomplete]="search"/>
+    </mat-form-field>
+
+    <mat-autocomplete #search="matAutocomplete">
+        <mat-option *ngFor="let option of autocompleteOptions" [value]="option">{{option}}</mat-option>
+    </mat-autocomplete>
+</form>

where-web/src/app/search/search.component.scss

+.search-container {
+    margin: 15px;
+}
\ No newline at end of file

where-web/src/app/search/search.component.ts

+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+@Component({
+    selector: 'app-search',
+    templateUrl: './search.component.html',
+    styleUrls: ['./search.component.scss']
+})
+export class SearchComponent {
+    form: FormGroup;
+
+    // TODO: Make dynamic
+    autocompleteOptions: string[] = ['Water Fountain', 'Johnson Center'];
+
+    constructor(fb: FormBuilder) {
+        this.form = fb.group({
+            search: ''
+        });
+
+        // TODO: Actually do stuff when user searches
+    }
+}

where-web/src/app/store/poi.selectors.ts

 import { createFeatureSelector } from '@ngrx/store';
 import { PoiState } from './poi.reducer';
 
-const getPoiState = createFeatureSelector<PoiState>('poi');
-
-export const get
\ No newline at end of file
+const getPoiState = createFeatureSelector<PoiState>('poi');
\ No newline at end of file

where-web/src/sass/app-styles.scss

+@import "theming";
+
+html, body {
+    height: 100%;
+}
+
+body {
+    margin: 0;
+    font-family: Roboto, "Helvetica Neue", sans-serif;
+}

where-web/src/sass/theming.scss

+@import '~@angular/material/theming';
+
+@include mat-core();
+
+@import '~@angular/material/theming';
+
+$where-light-primary:   mat-palette($mat-indigo);
+$where-light-accent:    mat-palette($mat-amber, A200, A100, A400);
+$where-light-warn:      mat-palette($mat-red);
+
+$where-light-theme:     mat-light-theme($where-light-primary, $where-light-accent, $where-light-warn);
+
+
+$where-dark-primary:    mat-palette($mat-blue-grey);
+$where-dark-accent:     mat-palette($mat-amber, A200, A100, A400);
+$where-dark-warn:       mat-palette($mat-red);
+
+$where-dark-theme:      mat-dark-theme($where-dark-primary, $where-dark-accent, $where-dark-warn);
+
+
+@media (prefers-color-scheme: light) {
+    @include angular-material-theme($where-light-theme);
+}
+
+@media (prefers-color-scheme: dark) {
+    @include angular-material-theme($where-dark-theme);
+}
\ No newline at end of file

where-web/src/styles.scss

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

where-web/tslint.json

@@ -28,8 +28,7 @@
     "interface-name": false,
     "max-classes-per-file": false,
     "max-line-length": [
-      true,
-      140
+      false
     ],
     "member-access": false,
     "member-ordering": [