From 81f2840a95b822e4d5434672dbb62c983393c16e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 31 Jan 2023 15:50:27 +0100
Subject: [PATCH] Implement alert message on map page if 'MAPBOX_TOKEN' is
 empty in .env

---
 webapp/locales/de.json | 1 +
 webapp/locales/en.json | 1 +
 webapp/pages/map.vue   | 7 ++++++-
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 252af0aee..5d8bfbc96 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -526,6 +526,7 @@
     "title": "{APPLICATION_NAME} befindet sich in der Wartung"
   },
   "map": {
+    "alertMessage": "Es kann nicht auf die Karte zugegriffen werden: Der Mapbox-Token ist auf dem Server nicht gesetzt!",
     "button": {
       "tooltip": "Landkarte anzeigen"
     },
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 79c52945a..1e8640a07 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -526,6 +526,7 @@
     "title": "{APPLICATION_NAME} is under maintenance"
   },
   "map": {
+    "alertMessage": "The map cannot be accessed: The Mapbox token is not set on the server!",
     "button": {
       "tooltip": "Show map"
     },
diff --git a/webapp/pages/map.vue b/webapp/pages/map.vue
index d41d8fcf4..8f6dca457 100644
--- a/webapp/pages/map.vue
+++ b/webapp/pages/map.vue
@@ -5,7 +5,7 @@
       <ds-heading tag="h1">{{ $t('map.pageTitle') }}</ds-heading>
     </ds-space>
     <ds-space margin="large" />
-    <client-only>
+    <client-only v-if="!isEmpty($env.MAPBOX_TOKEN)">
       <map-styles-buttons
         v-if="isMobile"
         :styles="styles"
@@ -39,10 +39,12 @@
         <MglScaleControl />
       </mgl-map>
     </client-only>
+    <empty v-else icon="alert" :message="$t('map.alertMessage')" />
   </div>
 </template>
 
 <script>
+import isEmpty from 'lodash/isEmpty'
 import mapboxgl from 'mapbox-gl'
 import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'
 import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'
@@ -51,6 +53,7 @@ import { objectValuesToArray } from '~/utils/utils'
 import { profileUserQuery, mapUserQuery } from '~/graphql/User'
 import { groupQuery } from '~/graphql/groups'
 import mobile from '~/mixins/mobile'
+import Empty from '~/components/Empty/Empty'
 import MapStylesButtons from '~/components/Map/MapStylesButtons'
 
 const maxMobileWidth = 639 // on this width and smaller the mapbox 'MapboxGeocoder' search gets bigger
@@ -59,6 +62,7 @@ export default {
   name: 'Map',
   mixins: [mobile(maxMobileWidth)],
   components: {
+    Empty,
     MapStylesButtons,
   },
   head() {
@@ -69,6 +73,7 @@ export default {
   data() {
     mapboxgl.accessToken = this.$env.MAPBOX_TOKEN
     return {
+      isEmpty,
       mapboxgl,
       activeStyle: null,
       defaultCenter: [10.452764, 51.165707], // center of Germany: https://www.gpskoordinaten.de/karte/land/DE