69 lines
1.8 KiB
Vue
69 lines
1.8 KiB
Vue
<template>
|
|
<div id="app">
|
|
<NavBar v-model="activeType"></NavBar>
|
|
<section class="section">
|
|
<TimeWindows :windows="windows" v-model="activeWindow"></TimeWindows>
|
|
<Chart :active-window="activeWindow" :active-type="activeType"></Chart>
|
|
</section>
|
|
<router-view></router-view>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, watch } from 'vue'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import NavBar from '@/components/NavBar.vue'
|
|
import TimeWindows from '@/components/TimeWindows.vue'
|
|
import Chart from '@/components/Chart.vue'
|
|
import { windows } from '@/utils/helpers'
|
|
import type { Window, NavTypes } from '@/utils/types'
|
|
import { navTypes } from '@/utils/types'
|
|
|
|
const defaultWindow = windows[1]
|
|
const defaultType = navTypes[0]
|
|
|
|
const activeType = ref<NavTypes>()
|
|
const activeWindow = ref<Window>(defaultWindow)
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
const urlEncodeWindow = (label: string) => label.replace(' ', '-')
|
|
|
|
if (route.params.type)
|
|
// activeType.value = (navTypes.includes(route.params.type.toString()) ? route.params.type : navTypes[0]) as NavTypes
|
|
activeType.value = (navTypes.find((t) => t === route.params.type) || defaultType) as NavTypes
|
|
if (route.params.window) {
|
|
activeWindow.value = windows.find((w) => urlEncodeWindow(w.label) === route.params.window) || defaultWindow
|
|
}
|
|
|
|
const updateRoute = () => {
|
|
if (activeType.value) {
|
|
const route = {
|
|
name: 'view',
|
|
params: {
|
|
type: activeType.value,
|
|
window: urlEncodeWindow(activeWindow.value?.label)
|
|
}
|
|
}
|
|
router.push(route)
|
|
}
|
|
}
|
|
|
|
watch([activeWindow, activeType], () => updateRoute())
|
|
</script>
|
|
<style scoped>
|
|
#app {
|
|
height: 100%;
|
|
}
|
|
#app,
|
|
.section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
}
|
|
.section {
|
|
padding-bottom: 0;
|
|
padding-top: 0;
|
|
}
|
|
</style>
|