mirror of
https://github.com/BlueMap-Minecraft/BlueMap.git
synced 2025-01-20 23:31:21 +01:00
Add loading message and improve webapp-error if a map could not be loaded
This commit is contained in:
Lukas Rieger (Blue)
parent
fdb846a435
commit
141d46a513
@ -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"
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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");
|
||||
|
||||
@ -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();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user