ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement alert message on map page if 'MAPBOX_TOKEN' is empty in .env

Browse Source
This commit is contained in:
Wolfgang Huß 2023-01-31 15:50:27 +01:00
parent 8061b1d0fe
commit 81f2840a95
3 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
webapp/locales/de.json
View File

@ -526,6 +526,7 @@
"title": "{APPLICATION_NAME} befindet sich in der Wartung" "title": "{APPLICATION_NAME} befindet sich in der Wartung"
}, },
"map": { "map": {
"alertMessage": "Es kann nicht auf die Karte zugegriffen werden: Der Mapbox-Token ist auf dem Server nicht gesetzt!",
"button": { "button": {
"tooltip": "Landkarte anzeigen" "tooltip": "Landkarte anzeigen"
}, },

1
webapp/locales/en.json
View File

@ -526,6 +526,7 @@
"title": "{APPLICATION_NAME} is under maintenance" "title": "{APPLICATION_NAME} is under maintenance"
}, },
"map": { "map": {
"alertMessage": "The map cannot be accessed: The Mapbox token is not set on the server!",
"button": { "button": {
"tooltip": "Show map" "tooltip": "Show map"
}, },

7
webapp/pages/map.vue
View File

@ -5,7 +5,7 @@
<ds-heading tag="h1">{{ $t('map.pageTitle') }}</ds-heading> <ds-heading tag="h1">{{ $t('map.pageTitle') }}</ds-heading>
</ds-space> </ds-space>
<ds-space margin="large" /> <ds-space margin="large" />
<client-only> <client-only v-if="!isEmpty($env.MAPBOX_TOKEN)">
<map-styles-buttons <map-styles-buttons
v-if="isMobile" v-if="isMobile"
:styles="styles" :styles="styles"
@ -39,10 +39,12 @@
<MglScaleControl /> <MglScaleControl />
</mgl-map> </mgl-map>
</client-only> </client-only>
<empty v-else icon="alert" :message="$t('map.alertMessage')" />
</div> </div>
</template> </template>
<script> <script>
import isEmpty from 'lodash/isEmpty'
import mapboxgl from 'mapbox-gl' import mapboxgl from 'mapbox-gl'
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder' import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css' 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 { profileUserQuery, mapUserQuery } from '~/graphql/User'
import { groupQuery } from '~/graphql/groups' import { groupQuery } from '~/graphql/groups'
import mobile from '~/mixins/mobile' import mobile from '~/mixins/mobile'
import Empty from '~/components/Empty/Empty'
import MapStylesButtons from '~/components/Map/MapStylesButtons' import MapStylesButtons from '~/components/Map/MapStylesButtons'
const maxMobileWidth = 639 // on this width and smaller the mapbox 'MapboxGeocoder' search gets bigger const maxMobileWidth = 639 // on this width and smaller the mapbox 'MapboxGeocoder' search gets bigger
@ -59,6 +62,7 @@ export default {
name: 'Map', name: 'Map',
mixins: [mobile(maxMobileWidth)], mixins: [mobile(maxMobileWidth)],
components: { components: {
Empty,
MapStylesButtons, MapStylesButtons,
}, },
head() { head() {
@ -69,6 +73,7 @@ export default {
data() { data() {
mapboxgl.accessToken = this.$env.MAPBOX_TOKEN mapboxgl.accessToken = this.$env.MAPBOX_TOKEN
return { return {
isEmpty,
mapboxgl, mapboxgl,
activeStyle: null, activeStyle: null,
defaultCenter: [10.452764, 51.165707], // center of Germany: https://www.gpskoordinaten.de/karte/land/DE defaultCenter: [10.452764, 51.165707], // center of Germany: https://www.gpskoordinaten.de/karte/land/DE