minie4
d22755d8c3
- Move view related functions out of the store - Restructure the store.js file - Improve error handling of `/check` - Show red loading spinner if data fetch failed - Prefetch current, next and previous day instead of only current - Refactor some other frontend file
84 lines
1.8 KiB
Vue
84 lines
1.8 KiB
Vue
<script setup>
|
|
import { RouterView, useRoute } from "vue-router";
|
|
import TitleBar from "./components/titlebar-element.vue";
|
|
import BottomNavbar from "./components/bottom-navbar.vue";
|
|
import DateSelector from "./components/date-selector.vue";
|
|
import LoadingElement from "./components/loading-element.vue";
|
|
import { loading, loadingProgress, loadingFailed, theme } from "./store";
|
|
import { computed, ref } from "vue";
|
|
|
|
const autoThemes = { true: "dark", false: "light" };
|
|
const autoTheme = ref("dark");
|
|
const colorSchemeMedia = window.matchMedia("(prefers-color-scheme: dark)");
|
|
autoTheme.value = autoThemes[colorSchemeMedia.matches];
|
|
colorSchemeMedia.addEventListener(
|
|
"change",
|
|
(e) => (autoTheme.value = autoThemes[e.matches])
|
|
);
|
|
|
|
const route = useRoute();
|
|
const routeName = computed(() => route.name);
|
|
const isDataView = computed(() => {
|
|
return (
|
|
routeName.value != "title.settings" && routeName.value != "title.login"
|
|
);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="app"
|
|
:class="theme == 'auto' ? `theme-${autoTheme}` : `theme-${theme}`"
|
|
>
|
|
<TitleBar />
|
|
<LoadingElement
|
|
:active="loading"
|
|
:progress="loadingProgress"
|
|
:error="loadingFailed"
|
|
/>
|
|
<div class="center">
|
|
<main>
|
|
<DateSelector v-show="isDataView" />
|
|
<RouterView />
|
|
</main>
|
|
<BottomNavbar v-show="$route.name != 'title.login'" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
@import "./assets/base.css";
|
|
@import "./assets/themes.css";
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
.app {
|
|
display: grid;
|
|
grid-template-rows: auto auto 1fr;
|
|
color: var(--text-color);
|
|
background-color: var(--bg-color);
|
|
font-family: var(--font-family);
|
|
}
|
|
|
|
.center {
|
|
display: flex;
|
|
justify-content: center;
|
|
overflow: auto;
|
|
}
|
|
|
|
main {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|