LiveAtlas/src/App.vue

100 lines
2.6 KiB
Vue
Raw Normal View History

2020-12-16 16:54:41 +00:00
<!--
- Copyright 2020 James Lyne
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-->
2020-11-20 18:43:30 +00:00
<template>
2020-12-01 23:20:38 +00:00
<Map></Map>
2020-11-23 12:13:28 +00:00
<Sidebar></Sidebar>
2020-11-20 18:43:30 +00:00
</template>
2020-11-20 21:47:56 +00:00
<script lang="ts">
import {defineComponent, computed, ref, onMounted, onBeforeUnmount, watch} from 'vue';
2020-12-01 23:20:38 +00:00
import Map from './components/Map.vue';
2020-11-23 12:13:28 +00:00
import Sidebar from './components/Sidebar.vue';
2020-11-23 16:16:26 +00:00
import {useStore} from "./store";
import {ActionTypes} from "@/store/action-types";
import Util from '@/util';
import {MutationTypes} from "@/store/mutation-types";
2020-11-23 12:13:28 +00:00
export default defineComponent({
name: 'App',
2020-11-23 12:13:28 +00:00
components: {
2020-12-01 23:20:38 +00:00
Map,
2020-11-23 12:13:28 +00:00
Sidebar,
},
setup() {
const initialUrl = window.location.hash.replace('#', ''),
store = useStore(),
2020-11-23 12:13:28 +00:00
updateInterval = computed(() => store.state.configuration.updateInterval),
title = computed(() => store.state.configuration.title),
currentUrl = computed(() => store.getters.url),
2020-11-23 12:13:28 +00:00
updatesEnabled = ref(false),
updateTimeout = ref(0),
loadConfiguration = () => {
store.dispatch(ActionTypes.LOAD_CONFIGURATION, undefined).then(() => {
startUpdates();
window.hideSplash();
});
},
startUpdates = () => {
updatesEnabled.value = true;
update();
},
update = () => {
store.dispatch(ActionTypes.GET_UPDATE, undefined).then(() => {
if(updatesEnabled.value) {
updateTimeout.value = setTimeout(() => update(), updateInterval.value);
}
});
},
stopUpdates = () => {
updatesEnabled.value = false;
if (updateTimeout.value) {
clearTimeout(updateTimeout.value);
2020-11-23 12:13:28 +00:00
}
updateTimeout.value = 0;
},
parseUrl = () => {
if(!initialUrl) {
return;
}
try {
const result = Util.parseMapHash(initialUrl);
store.commit(MutationTypes.SET_PARSED_URL, result);
} catch(e) {
console.warn('Ignoring invalid url ' + e);
}
};
2020-11-23 12:13:28 +00:00
watch(title, (title) => document.title = title);
watch(currentUrl, (url) => window.history.replaceState({}, '', url));
2020-11-23 12:13:28 +00:00
onMounted(() => loadConfiguration());
onBeforeUnmount(() => stopUpdates());
parseUrl();
},
2020-11-23 12:13:28 +00:00
});
2020-11-20 18:43:30 +00:00
</script>