Refactor App component, apply configured page title

src/App.vue

@@ -4,75 +4,60 @@
 </template>
 
 <script lang="ts">
-import {defineComponent, computed, ref} from 'vue';
+import {defineComponent, computed, ref, onMounted, onBeforeUnmount, watch} from 'vue';
 import Map from './components/Map.vue';
 import Sidebar from './components/Sidebar.vue';
 import {useStore} from "./store";
 import {ActionTypes} from "@/store/action-types";
 
 export default defineComponent({
-	name: 'WorldList',
+	name: 'App',
 	components: {
 		Map,
 		Sidebar,
 	},
 
 	setup() {
-		let store = useStore(),
+		const store = useStore(),
 			updateInterval = computed(() => store.state.configuration.updateInterval),
+			title = computed(() => store.state.configuration.title),
 			updatesEnabled = ref(false),
-			updateTimeout = ref(0);
+			updateTimeout = ref(0),
 
-		return {
+			loadConfiguration = () => {
-			store,
+				store.dispatch(ActionTypes.LOAD_CONFIGURATION, undefined).then(() => {
-			updateInterval,
+					startUpdates();
-			updatesEnabled,
-			updateTimeout
-		}
-	},
-
-	mounted() {
-		this.loadConfiguration();
-	},
-
-	beforeUnmount() {
-		this.stopUpdates();
-	},
-
-	methods: {
-		loadConfiguration() {
-			useStore().dispatch(ActionTypes.LOAD_CONFIGURATION, undefined).then(() => {
-				this.startUpdates();
 					window.hideSplash();
 				});
 			},
 
-		startUpdates() {
+			startUpdates = () => {
-			this.updatesEnabled = true;
+				updatesEnabled.value = true;
-			this.update();
+				update();
 			},
 
-		update() {
+			update = () => {
-			useStore().dispatch(ActionTypes.GET_UPDATE, undefined).then(() => {
+				store.dispatch(ActionTypes.GET_UPDATE, undefined).then(() => {
-				if(this.updatesEnabled) {
+					if(updatesEnabled.value) {
-					this.updateTimeout = setTimeout(() => this.update(), this.updateInterval);
+						updateTimeout.value = setTimeout(() => update(), updateInterval.value);
 					}
 				});
 			},
 
-		stopUpdates() {
+			stopUpdates = () => {
-			this.updatesEnabled = false;
+				updatesEnabled.value = false;
 
-			if (this.updateTimeout) {
+				if (updateTimeout.value) {
-				clearTimeout(this.updateTimeout);
+					clearTimeout(updateTimeout.value);
 				}
 
-			this.updateTimeout = 0;
+				updateTimeout.value = 0;
-		}
+			};
-	}
+
+		watch(title, (title) => document.title = title);
+
+		onMounted(() => loadConfiguration());
+		onBeforeUnmount(() => stopUpdates());
+	},
 });
 </script>
-
-<style lang="scss">
-
-</style>

src/store/actions.ts

@@ -9,7 +9,7 @@ import {
 	DynmapConfigurationResponse, DynmapLineUpdate,
 	DynmapMarkerSet,
 	DynmapMarkerUpdate,
-	DynmapPlayer, DynmapTileUpdate,
+	DynmapPlayer, DynmapServerConfig, DynmapTileUpdate,
 	DynmapUpdateResponse
 } from "@/dynmap";
 
@@ -57,7 +57,7 @@ export interface Actions {
 }
 
 export const actions: ActionTree<State, State> & Actions = {
-	[ActionTypes.LOAD_CONFIGURATION]({commit}) {
+	[ActionTypes.LOAD_CONFIGURATION]({commit}): Promise<DynmapConfigurationResponse> {
 		return API.getConfiguration().then(config => {
 			commit(MutationTypes.SET_CONFIGURATION, config.config);
 			commit(MutationTypes.SET_MESSAGES, config.messages);