From 44978f8b539ba0259e606e5be9f9907ef721727a Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Tue, 14 Mar 2023 22:31:58 +0100
Subject: [PATCH] Add dark theme to map and make it switch when theme switches
 #587 #68 #140

---
 src/common/config/private/PrivateConfig.ts    |  2 +
 src/common/config/public/ClientConfig.ts      |  8 ++
 .../app/ui/frame/frame.component.html         |  6 +-
 src/frontend/app/ui/frame/frame.component.ts  |  6 +-
 .../info-panel.lightbox.gallery.component.ts  | 16 +++-
 .../lightbox.map.gallery.component.ts         | 51 ++++++++----
 .../ui/gallery/map/map.gallery.component.ts   | 79 ++++++++++++-------
 .../app/ui/gallery/map/map.service.ts         | 38 ++++++---
 .../settings/template/template.component.ts   |  7 +-
 9 files changed, 144 insertions(+), 69 deletions(-)

diff --git a/src/common/config/private/PrivateConfig.ts b/src/common/config/private/PrivateConfig.ts
index 065afcd8..8f11ae5c 100644
--- a/src/common/config/private/PrivateConfig.ts
+++ b/src/common/config/private/PrivateConfig.ts
@@ -181,6 +181,8 @@ export class UserConfig {
   role: UserRoles = UserRoles.User;
 
   @ConfigProperty<string, ServerConfig, TAGS>({
+    type: 'string',
+    constraint: {assert: (val: string, config) => !!val, assertReason: 'Password cant be empty'},
     tags:
       {
         name: $localize`Password`,
diff --git a/src/common/config/public/ClientConfig.ts b/src/common/config/public/ClientConfig.ts
index d9dc95db..14580f59 100644
--- a/src/common/config/public/ClientConfig.ts
+++ b/src/common/config/public/ClientConfig.ts
@@ -237,6 +237,14 @@ export class MapLayers {
     description: $localize`Url of a map layer.`,
   })
   url: string = '';
+  @ConfigProperty({
+    tags:
+      {
+        priority: ConfigPriority.advanced,
+      },
+    description: $localize`Sets if the layer is dark (used as default in the dark mode).`,
+  })
+  darkLayer: boolean = false;
 }
 
 @SubConfigClass({tags: {client: true}, softReadonly: true})
diff --git a/src/frontend/app/ui/frame/frame.component.html b/src/frontend/app/ui/frame/frame.component.html
index 899d50b7..84a06640 100644
--- a/src/frontend/app/ui/frame/frame.component.html
+++ b/src/frontend/app/ui/frame/frame.component.html
@@ -91,15 +91,15 @@
                     <div class="dropdown-item bg-transparent">
                       <button class="btn w-100 btn-secondary" (click)="themeService.toggleMode()">
                         <ng-container [ngSwitch]="themeService.mode">
-                          <ng-container *ngSwitchCase="ThemeMode.light">
+                          <ng-container *ngSwitchCase="ThemeModes.light">
                             <span class="oi oi-sun"></span>
                             <ng-container i18n>Light</ng-container>
                           </ng-container>
-                          <ng-container *ngSwitchCase="ThemeMode.dark">
+                          <ng-container *ngSwitchCase="ThemeModes.dark">
                             <span class="oi oi-moon"></span>
                             <ng-container i18n>Dark</ng-container>
                           </ng-container>
-                          <ng-container *ngSwitchCase="ThemeMode.auto">
+                          <ng-container *ngSwitchCase="ThemeModes.auto">
                             <span class="oi oi-moon"></span>
                             <span class="oi oi-sun" style="margin-left: -0.8rem"></span>
                             <ng-container i18n>Auto</ng-container>
diff --git a/src/frontend/app/ui/frame/frame.component.ts b/src/frontend/app/ui/frame/frame.component.ts
index 29989938..b51366dd 100644
--- a/src/frontend/app/ui/frame/frame.component.ts
+++ b/src/frontend/app/ui/frame/frame.component.ts
@@ -6,13 +6,13 @@ import {Config} from '../../../../common/config/public/Config';
 import {BehaviorSubject} from 'rxjs';
 import {NotificationService} from '../../model/notification.service';
 import {QueryService} from '../../model/query.service';
-import {NavigationLinkTypes} from '../../../../common/config/public/ClientConfig';
+import {NavigationLinkTypes, ThemeModes} from '../../../../common/config/public/ClientConfig';
 import {SearchQueryDTO} from '../../../../common/entities/SearchQueryDTO';
 import {Utils} from '../../../../common/Utils';
 import {PageHelper} from '../../model/page.helper';
 import {BsDropdownDirective} from 'ngx-bootstrap/dropdown';
 import {LanguageComponent} from '../language/language.component';
-import {ThemeMode, ThemeService} from '../../model/theme.service';
+import {ThemeService} from '../../model/theme.service';
 
 @Component({
   selector: 'app-frame',
@@ -46,7 +46,7 @@ export class FrameComponent {
   @ViewChild('dropdown', {static: true}) dropdown: BsDropdownDirective;
   @ViewChild('languageSelector', {static: true}) languageSelector: LanguageComponent;
 
-  ThemeMode = ThemeMode;
+  ThemeModes = ThemeModes;
 
   constructor(
     private authService: AuthenticationService,
diff --git a/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.ts b/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.ts
index a5621191..a7a44d07 100644
--- a/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.ts
+++ b/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.ts
@@ -10,6 +10,7 @@ import {SearchQueryTypes, TextSearch, TextSearchQueryMatchTypes,} from '../../..
 import {AuthenticationService} from '../../../../model/network/authentication.service';
 import {LatLngLiteral, marker, Marker, TileLayer, tileLayer} from 'leaflet';
 import {ContentService} from '../../content.service';
+import {ThemeService} from '../../../../model/theme.service';
 
 @Component({
   selector: 'app-info-panel',
@@ -32,13 +33,20 @@ export class InfoPanelLightboxComponent implements OnInit, OnChanges {
     public queryService: QueryService,
     public galleryService: ContentService,
     public mapService: MapService,
-    private authService: AuthenticationService
+    private authService: AuthenticationService,
+    private themeService: ThemeService
   ) {
     this.mapEnabled = Config.Map.enabled;
     this.searchEnabled = this.authService.canSearch();
-    this.baseLayer = tileLayer(mapService.MapLayer, {
-      attribution: mapService.ShortAttributions,
-    });
+    if (this.themeService.darkMode.value) {
+      this.baseLayer = tileLayer(mapService.DarkMapLayer.url, {
+        attribution: mapService.ShortAttributions,
+      });
+    } else {
+      this.baseLayer = tileLayer(mapService.MapLayer.url, {
+        attribution: mapService.ShortAttributions,
+      });
+    }
   }
 
   get FullPath(): string {
diff --git a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts
index 450afeb5..e6a2b046 100644
--- a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts
+++ b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts
@@ -1,20 +1,8 @@
-import {
-  Component,
-  ElementRef,
-  HostListener,
-  Input,
-  OnChanges,
-  ViewChild,
-} from '@angular/core';
+import {Component, ElementRef, HostListener, Input, OnChanges, ViewChild,} from '@angular/core';
 import {PhotoDTO} from '../../../../../../common/entities/PhotoDTO';
 import {Dimension} from '../../../../model/IRenderable';
 import {FullScreenService} from '../../fullscreen.service';
-import {
-  IconThumbnail,
-  Thumbnail,
-  ThumbnailBase,
-  ThumbnailManagerService,
-} from '../../thumbnailManager.service';
+import {IconThumbnail, Thumbnail, ThumbnailBase, ThumbnailManagerService,} from '../../thumbnailManager.service';
 import {MediaIcon} from '../../MediaIcon';
 import {Media} from '../../Media';
 import {PageHelper} from '../../../../model/page.helper';
@@ -40,8 +28,10 @@ import {
   Point,
   polyline,
   tileLayer,
+  TileLayer
 } from 'leaflet';
 import {LeafletControlLayersConfig} from '@asymmetrik/ngx-leaflet';
+import {ThemeService} from '../../../../model/theme.service';
 
 @Component({
   selector: 'app-gallery-map-lightbox',
@@ -73,6 +63,8 @@ export class GalleryMapLightboxComponent implements OnChanges {
     maxZoom: 2,
     center: latLng(0, 0),
   };
+  defLayer: TileLayer;
+  darkLayer: TileLayer;
   private smallIconSize = new Point(
     Config.Media.Thumbnail.iconSize * 0.75,
     Config.Media.Thumbnail.iconSize * 0.75
@@ -122,7 +114,8 @@ export class GalleryMapLightboxComponent implements OnChanges {
   constructor(
     public fullScreenService: FullScreenService,
     private thumbnailService: ThumbnailManagerService,
-    public mapService: MapService
+    public mapService: MapService,
+    private themeService: ThemeService
   ) {
     this.mapOptions.layers = [
       this.mapLayersControlOption.overlays.Photos,
@@ -131,19 +124,43 @@ export class GalleryMapLightboxComponent implements OnChanges {
     for (let i = 0; i < mapService.Layers.length; ++i) {
       const l = mapService.Layers[i];
       const tl = tileLayer(l.url, {attribution: mapService.Attributions});
-      if (i === 0) {
-        this.mapOptions.layers.push(tl);
+      if (l.url === mapService.MapLayer.url) {
+        this.defLayer = tl;
+      }
+      if (l.url === mapService.DarkMapLayer.url) {
+        this.darkLayer = tl;
       }
       this.mapLayersControlOption.baseLayers[l.name] = tl;
     }
+    if (!this.defLayer || !this.darkLayer) {
+      throw new Error('Cant find default or dark layer');
+    }
+    this.mapOptions.layers.push(this.themeService.darkMode.value ? this.darkLayer : this.defLayer);
 
     this.mapLayerControl = control.layers(
       this.mapLayersControlOption.baseLayers,
       this.mapLayersControlOption.overlays,
       {position: 'bottomright'}
     );
+
+    // update map theme on dark theme
+    this.themeService.darkMode.subscribe(this.selectBaseLayer);
   }
 
+  private selectBaseLayer = () => {
+    if (!this.leafletMap) {
+      return;
+    }
+    if (this.leafletMap.hasLayer(this.defLayer) && this.themeService.darkMode.value) {
+      this.leafletMap.removeLayer(this.defLayer);
+      this.leafletMap.addLayer(this.darkLayer);
+    }
+    if (this.leafletMap.hasLayer(this.darkLayer) && !this.themeService.darkMode.value) {
+      this.leafletMap.removeLayer(this.darkLayer);
+      this.leafletMap.addLayer(this.defLayer);
+    }
+  };
+
   private static getScreenWidth(): number {
     return window.innerWidth;
   }
diff --git a/src/frontend/app/ui/gallery/map/map.gallery.component.ts b/src/frontend/app/ui/gallery/map/map.gallery.component.ts
index fd9a0db3..6a3c84a3 100644
--- a/src/frontend/app/ui/gallery/map/map.gallery.component.ts
+++ b/src/frontend/app/ui/gallery/map/map.gallery.component.ts
@@ -1,24 +1,12 @@
-import {
-  Component,
-  ElementRef,
-  Input,
-  OnChanges,
-  ViewChild,
-} from '@angular/core';
-import { PhotoDTO } from '../../../../../common/entities/PhotoDTO';
-import { Dimension, IRenderable } from '../../../model/IRenderable';
-import { GalleryMapLightboxComponent } from './lightbox/lightbox.map.gallery.component';
-import { FileDTO } from '../../../../../common/entities/FileDTO';
-import { MapService } from './map.service';
-import { Config } from '../../../../../common/config/public/Config';
-import {
-  LatLngLiteral,
-  Map,
-  MapOptions,
-  Marker,
-  marker,
-  tileLayer,
-} from 'leaflet';
+import {Component, ElementRef, Input, OnChanges, ViewChild,} from '@angular/core';
+import {PhotoDTO} from '../../../../../common/entities/PhotoDTO';
+import {Dimension, IRenderable} from '../../../model/IRenderable';
+import {GalleryMapLightboxComponent} from './lightbox/lightbox.map.gallery.component';
+import {FileDTO} from '../../../../../common/entities/FileDTO';
+import {MapService} from './map.service';
+import {Config} from '../../../../../common/config/public/Config';
+import {LatLngLiteral, Map, MapOptions, Marker, marker, tileLayer, TileLayer} from 'leaflet';
+import {ThemeService} from '../../../model/theme.service';
 
 @Component({
   selector: 'app-gallery-map',
@@ -28,11 +16,12 @@ import {
 export class GalleryMapComponent implements OnChanges, IRenderable {
   @Input() photos: PhotoDTO[];
   @Input() gpxFiles: FileDTO[];
-  @ViewChild(GalleryMapLightboxComponent, { static: false })
+  @ViewChild(GalleryMapLightboxComponent, {static: false})
   mapLightbox: GalleryMapLightboxComponent;
-  @ViewChild('map', { static: false }) mapElement: ElementRef;
+  @ViewChild('map', {static: false}) mapElement: ElementRef;
 
   leafletMap: Map;
+  layers: { light: TileLayer, dark: TileLayer };
 
   options: MapOptions = {
     zoomControl: false,
@@ -46,12 +35,46 @@ export class GalleryMapComponent implements OnChanges, IRenderable {
   };
   markerLayer: Marker[] = [];
 
-  constructor(public mapService: MapService) {
-    this.options.layers = [
-      tileLayer(mapService.MapLayer, {
-        attribution: mapService.ShortAttributions,
+  constructor(public mapService: MapService,
+              private themeService: ThemeService) {
+    this.initThemeModes();
+  }
+
+  initThemeModes() {
+    this.layers = {
+      'light': tileLayer(this.mapService.MapLayer.url, {
+        attribution: this.mapService.ShortAttributions,
       }),
-    ];
+      'dark':
+        tileLayer(this.mapService.DarkMapLayer.url, {
+          attribution: this.mapService.ShortAttributions,
+        })
+    };
+    if (this.themeService.darkMode.value) {
+      this.options.layers = [this.layers.dark];
+    } else {
+      this.options.layers = [this.layers.light];
+    }
+    // update map theme on dark theme
+    this.themeService.darkMode.subscribe((isDark) => {
+      if (!this.leafletMap) {
+        return;
+      }
+
+      if (isDark) {
+        if (this.leafletMap.hasLayer(this.layers.dark)) {
+          return;
+        }
+        this.leafletMap.removeLayer(this.layers.light);
+        this.leafletMap.addLayer(this.layers.dark);
+      } else {
+        if (this.leafletMap.hasLayer(this.layers.light)) {
+          return;
+        }
+        this.leafletMap.removeLayer(this.layers.dark);
+        this.leafletMap.addLayer(this.layers.light);
+      }
+    });
   }
 
   onMapReady(map: Map): void {
diff --git a/src/frontend/app/ui/gallery/map/map.service.ts b/src/frontend/app/ui/gallery/map/map.service.ts
index 6d8f8395..c4e50871 100644
--- a/src/frontend/app/ui/gallery/map/map.service.ts
+++ b/src/frontend/app/ui/gallery/map/map.service.ts
@@ -3,18 +3,16 @@ import {NetworkService} from '../../../model/network/network.service';
 import {FileDTO} from '../../../../../common/entities/FileDTO';
 import {Utils} from '../../../../../common/Utils';
 import {Config} from '../../../../../common/config/public/Config';
-import {
-  MapLayers,
-  MapProviders,
-} from '../../../../../common/config/public/ClientConfig';
+import {MapLayers, MapProviders,} from '../../../../../common/config/public/ClientConfig';
 import {LatLngLiteral} from 'leaflet';
 
 @Injectable()
 export class MapService {
-  private static readonly OSMLAYERS = [
+  private static readonly OSMLAYERS: MapLayers[] = [
     {
       name: 'street',
       url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+      darkLayer: false
     },
   ];
   private static MAPBOXLAYERS: MapLayers[] = [];
@@ -22,22 +20,32 @@ export class MapService {
   constructor(private networkService: NetworkService) {
     MapService.MAPBOXLAYERS = [
       {
-        name: 'street',
+        name: $localize`street`,
         url:
-          'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}?access_token=' +
+          'https://api.mapbox.com/styles/v1/mapbox/streets-v12/tiles/256/{z}/{x}/{y}?access_token=' +
           Config.Map.mapboxAccessToken,
+        darkLayer: false
       },
       {
-        name: 'satellite',
+        name: $localize`satellite`,
         url:
           'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/256/{z}/{x}/{y}?access_token=' +
           Config.Map.mapboxAccessToken,
+        darkLayer: false
       },
       {
-        name: 'hybrid',
+        name: $localize`hybrid`,
         url:
-          'https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v11/tiles/256/{z}/{x}/{y}?access_token=' +
+          'https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v12/tiles/256/{z}/{x}/{y}?access_token=' +
           Config.Map.mapboxAccessToken,
+        darkLayer: false
+      },
+      {
+        name: $localize`dark`,
+        url:
+          'https://api.mapbox.com/styles/v1/mapbox/navigation-night-v1/tiles/256/{z}/{x}/{y}?access_token=' +
+          Config.Map.mapboxAccessToken,
+        darkLayer: true
       },
     ];
   }
@@ -71,11 +79,15 @@ export class MapService {
     return '';
   }
 
-  public get MapLayer(): string {
-    return this.Layers[0].url;
+  public get MapLayer(): MapLayers {
+    return (this.Layers.find(ml => !ml.darkLayer) || this.Layers[0]);
   }
 
-  public get Layers(): { name: string; url: string }[] {
+  public get DarkMapLayer(): MapLayers {
+    return (this.Layers.find(ml => ml.darkLayer) || this.MapLayer);
+  }
+
+  public get Layers(): MapLayers[] {
     switch (Config.Map.mapProvider) {
       case MapProviders.Custom:
         return Config.Map.customLayers;
diff --git a/src/frontend/app/ui/settings/template/template.component.ts b/src/frontend/app/ui/settings/template/template.component.ts
index 775f9620..e393d12e 100644
--- a/src/frontend/app/ui/settings/template/template.component.ts
+++ b/src/frontend/app/ui/settings/template/template.component.ts
@@ -203,7 +203,7 @@ export class TemplateComponent implements OnInit, OnChanges, OnDestroy, ISetting
           }
 
 
-          return ( !forcedVisibility  &&
+          return (!forcedVisibility &&
             Utils.equalsFilter(state.value, state.default,
               ['__propPath', '__created', '__prototype', '__rootConfig']) &&
             Utils.equalsFilter(state.original, state.default,
@@ -316,6 +316,11 @@ export class TemplateComponent implements OnInit, OnChanges, OnDestroy, ISetting
         return s[a].tags?.priority - s[b].tags?.priority;
       }
 
+      if (a === 'enabled' && b !== 'enabled') {
+        return -1;
+      } else if (b === 'enabled') {
+        return 1;
+      }
       return (s[a].tags?.name as string || a).localeCompare(s[b].tags?.name || b);
 
     });