Upstream
/
BlueMap
mirror of https://github.com/BlueMap-Minecraft/BlueMap.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add loading message and improve webapp-error if a map could not be loaded

This commit is contained in:
Lukas Rieger (Blue) 2023-02-08 17:35:47 +01:00
parent fdb846a435
commit 141d46a513
No known key found for this signature in database
GPG Key ID: 2D09EC5ED2687FF2
6 changed files with 50 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
BlueMapCommon/webapp/public/lang/de.conf
View File

@ -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"

5
BlueMapCommon/webapp/public/lang/en.conf
View File

@ -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"

16
BlueMapCommon/webapp/src/App.vue
View File

@ -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>

20
BlueMapCommon/webapp/src/components/ControlBar/ControlBar.vue
View File

@ -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;

11
BlueMapCommon/webapp/src/js/BlueMapApp.js
View File

@ -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");

8
BlueMapCommon/webapp/src/js/MapViewer.js
View File

@ -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();