82 lines
2.5 KiB
Vue
82 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, watch } from 'vue';
|
|
import { useMeta } from 'quasar';
|
|
import { useLeafletStore } from 'stores/leaflet';
|
|
import { useSimulationStore } from 'stores/simulation';
|
|
import { useSocketStore } from 'stores/socket';
|
|
import { useIcloudStore } from 'stores/icloud';
|
|
import { useFavoriteStore } from 'stores/favorite';
|
|
|
|
import type { LeafletMouseEvent } from 'leaflet';
|
|
|
|
import LocationDrawer from 'components/leaflet/LocationDrawer.vue';
|
|
|
|
useMeta({
|
|
meta: {
|
|
viewport: {
|
|
name: 'viewport',
|
|
content:
|
|
'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover',
|
|
},
|
|
},
|
|
});
|
|
|
|
function layoutClickHandler(event: LeafletMouseEvent) {
|
|
// if (!leafletStore.locationDrawerSettings.opened && !leafletStore.controlDrawerSettings.opened && !leafletStore.statusBarSettings.opened) {
|
|
if (!leafletStore.locationDrawerSettings.opened && !leafletStore.fabs.statusBar) {
|
|
return;
|
|
}
|
|
if (
|
|
!event.target.closest('#location-drawer') &&
|
|
!leafletStore.locationDrawerSettings.pinned &&
|
|
leafletStore.locationDrawerSettings.opened
|
|
) {
|
|
leafletStore.locationsOpenedHandler(false);
|
|
}
|
|
if (!event.target.closest('#status-bar') && leafletStore.fabs.statusBar) {
|
|
leafletStore.fabs.statusBar.opened = false;
|
|
}
|
|
/*
|
|
if (!event.target.closest('#control-drawer') && !leafletStore.controlDrawerSettings.pinned) {
|
|
leafletStore.locationsOpenedHandler(false);
|
|
}
|
|
if(!event.target.closest('#status-bar') || !event.target.closest('#status-bar-button')) {
|
|
leafletStore.statusBarOpenedHandler(false);
|
|
}
|
|
*/
|
|
}
|
|
|
|
const leafletStore = useLeafletStore();
|
|
const simulationStore = useSimulationStore();
|
|
const socketStore = useSocketStore();
|
|
const icloudStore = useIcloudStore();
|
|
const favoriteStore = useFavoriteStore();
|
|
|
|
onMounted(() => {
|
|
socketStore.bindEvents();
|
|
simulationStore.bindEvents();
|
|
icloudStore.bindEvents();
|
|
socketStore.connect();
|
|
favoriteStore.initialize();
|
|
watch([favoriteStore.categories, favoriteStore.favorites], () => {
|
|
favoriteStore.mapCategoriesAndFavorites();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<q-layout ref="layout" view="hHh LpR lFf" @click.stop="layoutClickHandler">
|
|
<LocationDrawer persistent :breakpoint="576" side="left" class="location-drawer" />
|
|
<q-page-container>
|
|
<router-view />
|
|
</q-page-container>
|
|
</q-layout>
|
|
</template>
|
|
|
|
<style scoped lang="sass">
|
|
.transparent-footer
|
|
background-color: rgba(0, 0, 0, 0.5)
|
|
box-shadow: none
|
|
backdrop-filter: blur(5px)
|
|
</style>
|