From 141d46a513c92f9670529bbbd495d2edaf42138d Mon Sep 17 00:00:00 2001
From: "Lukas Rieger (Blue)" <TBlueF@users.noreply.github.com>
Date: Wed, 8 Feb 2023 17:35:47 +0100
Subject: [PATCH] Add loading message and improve webapp-error if a map could
 not be loaded

---
 BlueMapCommon/webapp/public/lang/de.conf      |  5 +++++
 BlueMapCommon/webapp/public/lang/en.conf      |  5 +++++
 BlueMapCommon/webapp/src/App.vue              | 16 +++++++++++++--
 .../src/components/ControlBar/ControlBar.vue  | 20 +++++++++++--------
 BlueMapCommon/webapp/src/js/BlueMapApp.js     | 11 ++++++----
 BlueMapCommon/webapp/src/js/MapViewer.js      |  8 +++++++-
 6 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/BlueMapCommon/webapp/public/lang/de.conf b/BlueMapCommon/webapp/public/lang/de.conf
index c1cea628..7aab5d3c 100644
--- a/BlueMapCommon/webapp/public/lang/de.conf
+++ b/BlueMapCommon/webapp/public/lang/de.conf
@@ -4,6 +4,11 @@
     title: "Menü"
     tooltip: "Menü"
   }
+  map: {
+    unloaded: "Keine Karte geladen."
+    loading: "Lade Karte..."
+    errored: "Beim laden der Karte ist ein Fehler aufgetreten!"
+  }
   maps: {
     title: "Karten"
     button: "Karten"
diff --git a/BlueMapCommon/webapp/public/lang/en.conf b/BlueMapCommon/webapp/public/lang/en.conf
index bbde4758..31107a95 100644
--- a/BlueMapCommon/webapp/public/lang/en.conf
+++ b/BlueMapCommon/webapp/public/lang/en.conf
@@ -4,6 +4,11 @@
     title: "Menu"
     tooltip: "Menu"
   }
+  map: {
+    unloaded: "No map loaded."
+    loading: "Loading map..."
+    errored: "There was an error trying to load this map!"
+  }
   maps: {
     title: "Maps"
     button: "Maps"
diff --git a/BlueMapCommon/webapp/src/App.vue b/BlueMapCommon/webapp/src/App.vue
index 7c567973..12680544 100644
--- a/BlueMapCommon/webapp/src/App.vue
+++ b/BlueMapCommon/webapp/src/App.vue
@@ -1,8 +1,9 @@
 <template>
   <div id="app" :class="{'theme-light': appState.theme === 'light', 'theme-dark': appState.theme === 'dark', 'theme-contrast': appState.theme === 'contrast'}">
-    <FreeFlightMobileControls v-if="appState.controls.state === 'free'" />
-    <ZoomButtons v-if="appState.controls.showZoomButtons && appState.controls.state !== 'free'" />
+    <FreeFlightMobileControls v-if="mapViewer.mapLoaded && appState.controls.state === 'free'" />
+    <ZoomButtons v-if="mapViewer.mapLoaded && appState.controls.showZoomButtons && appState.controls.state !== 'free'" />
     <ControlBar />
+    <div v-if="mapViewer.mapState !== 'loaded'" class="map-state-message">{{ $t("map." + mapViewer.mapState) }}</div>
     <MainMenu :menu="appState.menu" />
   </div>
 </template>
@@ -24,6 +25,7 @@ export default {
   data() {
     return {
       appState: this.$bluemap.appState,
+      mapViewer: this.$bluemap.mapViewer.data
     }
   }
 }
@@ -51,5 +53,15 @@ export default {
     @media (max-width: $mobile-break) {
       font-size: 1.5rem;
     }
+
+    .map-state-message {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      color: var(--theme-fg-light);
+      line-height: 1em;
+      text-align: center;
+    }
   }
 </style>
diff --git a/BlueMapCommon/webapp/src/components/ControlBar/ControlBar.vue b/BlueMapCommon/webapp/src/components/ControlBar/ControlBar.vue
index cded75a2..c1fda508 100644
--- a/BlueMapCommon/webapp/src/components/ControlBar/ControlBar.vue
+++ b/BlueMapCommon/webapp/src/components/ControlBar/ControlBar.vue
@@ -8,7 +8,7 @@
         <polygon points="26.708,22.841 19.049,25.186 11.311,20.718 3.292,22.841 7.725,5.96 13.475,4.814 19.314,7.409 25.018,6.037 "/>
       </svg>
     </SvgButton>
-    <SvgButton v-if="markers.markerSets.length > 0 || markers.markers.length > 0" class="thin-hide" :title="$t('markers.tooltip')"
+    <SvgButton v-if="showMapMenu && (markers.markerSets.length > 0 || markers.markers.length > 0)" class="thin-hide" :title="$t('markers.tooltip')"
                @action="appState.menu.openPage('markers', $t('markers.title'), {markerSet: markers})">
       <svg viewBox="0 0 30 30">
         <path d="M15,3.563c-4.459,0-8.073,3.615-8.073,8.073c0,6.483,8.196,14.802,8.196,14.802s7.951-8.013,7.951-14.802
@@ -16,7 +16,7 @@
 			c2.263,0,4.098,1.835,4.098,4.098C19.098,13.899,17.263,15.734,15,15.734z"/>
       </svg>
     </SvgButton>
-    <SvgButton v-if="!playerMarkerSet.fake" class="thin-hide" :title="$t('players.tooltip')" @action="openPlayerList">
+    <SvgButton v-if="showMapMenu && !playerMarkerSet.fake" class="thin-hide" :title="$t('players.tooltip')" @action="openPlayerList">
       <svg viewBox="0 0 30 30">
         <g>
           <path d="M8.95,14.477c0.409-0.77,1.298-1.307,2.164-1.309h0.026c-0.053-0.234-0.087-0.488-0.087-0.755
@@ -43,11 +43,11 @@
       </svg>
     </SvgButton>
     <div class="space thin-hide greedy"></div>
-    <DayNightSwitch class="thin-hide" :title="$t('lighting.dayNightSwitch.tooltip')" />
+    <DayNightSwitch v-if="showMapMenu" class="thin-hide" :title="$t('lighting.dayNightSwitch.tooltip')" />
     <div class="space thin-hide"></div>
-    <ControlsSwitch class="thin-hide"></ControlsSwitch>
+    <ControlsSwitch v-if="showMapMenu" class="thin-hide"></ControlsSwitch>
     <div class="space thin-hide"></div>
-    <SvgButton class="thin-hide" :title="$t('resetCamera.tooltip')" @action="$bluemap.resetCamera()">
+    <SvgButton v-if="showMapMenu" class="thin-hide" :title="$t('resetCamera.tooltip')" @action="$bluemap.resetCamera()">
       <svg viewBox="0 0 30 30">
         <rect x="7.085" y="4.341" transform="matrix(0.9774 0.2116 -0.2116 0.9774 3.2046 -1.394)" width="2.063" height="19.875"/>
         <path d="M12.528,5.088c0,0,3.416-0.382,4.479-0.031c1.005,0.332,2.375,2.219,3.382,2.545c1.096,0.354,4.607-0.089,4.607-0.089
@@ -55,8 +55,8 @@
       L12.528,5.088z"/>
       </svg>
     </SvgButton>
-    <PositionInput class="pos-input" />
-    <Compass :title="$t('compass.tooltip')" />
+    <PositionInput v-if="showMapMenu" class="pos-input" />
+    <Compass v-if="showMapMenu" :title="$t('compass.tooltip')" />
   </div>
 </template>
 
@@ -82,6 +82,7 @@
       return {
         appState: this.$bluemap.appState,
         markers: this.$bluemap.mapViewer.markers.data,
+        mapViewer: this.$bluemap.mapViewer.data
       }
     },
     computed: {
@@ -97,6 +98,9 @@
           markers: [],
           fake: true,
         }
+      },
+      showMapMenu() {
+        return this.mapViewer.mapState === "loading" || this.mapViewer.mapState === "loaded";
       }
     },
     methods: {
@@ -150,7 +154,7 @@
       margin: 0;
       width: 100%;
 
-      background-color: var(--theme-bg-light);
+      background-color: var(--theme-bg);
 
       .pos-input {
         max-width: unset;
diff --git a/BlueMapCommon/webapp/src/js/BlueMapApp.js b/BlueMapCommon/webapp/src/js/BlueMapApp.js
index 0075e0f3..ff9d673a 100644
--- a/BlueMapCommon/webapp/src/js/BlueMapApp.js
+++ b/BlueMapCommon/webapp/src/js/BlueMapApp.js
@@ -160,9 +160,13 @@ export class BlueMapApp {
         }
 
         // switch to map
-        if (!await this.loadPageAddress()) {
-            if (this.maps.length > 0) await this.switchMap(this.maps[0].data.id);
-            this.resetCamera();
+        try {
+            if (!await this.loadPageAddress()) {
+                if (this.maps.length > 0) await this.switchMap(this.maps[0].data.id);
+                this.resetCamera();
+            }
+        } catch (e) {
+            console.error("Failed to load map!", e);
         }
 
         // map position address
@@ -180,7 +184,6 @@ export class BlueMapApp {
         // save user settings
         this.saveUserSettings();
 
-
         // load settings-scripts
         if (this.settings.scripts) for (let scriptUrl of this.settings.scripts) {
             let scriptElement = document.createElement("script");
diff --git a/BlueMapCommon/webapp/src/js/MapViewer.js b/BlueMapCommon/webapp/src/js/MapViewer.js
index faa310aa..bab735fc 100644
--- a/BlueMapCommon/webapp/src/js/MapViewer.js
+++ b/BlueMapCommon/webapp/src/js/MapViewer.js
@@ -52,6 +52,7 @@ export class MapViewer {
 
 		this.data = reactive({
 			map: null,
+			mapState: "unloaded",
 			camera: null,
 			controlsManager: null,
 			uniforms: {
@@ -366,6 +367,7 @@ export class MapViewer {
 	 */
 	switchMap(map = null) {
 		if (this.map && this.map.isMap) this.map.unload();
+		this.data.mapState = "loading";
 
 		this.map = map;
 
@@ -385,12 +387,16 @@ export class MapViewer {
 
 					setTimeout(this.updateLoadedMapArea);
 
+					this.data.mapState = "loaded";
+
 					dispatchEvent(this.events, "bluemapMapChanged", {
 						map: map
 					});
 				})
 				.catch(error => {
-					alert(this.events, error, "error");
+					this.data.mapState = "errored";
+					this.map = null;
+					throw error;
 				});
 		} else {
 			return Promise.resolve();