52 lines
2.0 KiB
Vue
52 lines
2.0 KiB
Vue
<script setup>
|
|
import { RouterView } from 'vue-router';
|
|
import Button from './components/ui/button/Button.vue';
|
|
import { useUserStore } from './stores/user';
|
|
import Alert from './components/ui/alert/Alert.vue';
|
|
import AlertDescription from './components/ui/alert/AlertDescription.vue';
|
|
import Navbar from './components/Navigation/Navbar.vue';
|
|
import { cancelLOA } from './api/loa';
|
|
|
|
const userStore = useUserStore();
|
|
|
|
function formatDate(dateStr) {
|
|
if (!dateStr) return "";
|
|
return new Date(dateStr).toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "short",
|
|
day: "numeric",
|
|
});
|
|
}
|
|
|
|
const environment = import.meta.env.VITE_ENVIRONMENT;
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col min-h-screen" style="background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('/bg.jpg');
|
|
background-size: contain;
|
|
background-attachment: fixed;
|
|
background-position: center;">
|
|
<div class="sticky top-0 bg-background z-50">
|
|
<Navbar class="flex"></Navbar>
|
|
<Alert v-if="environment == 'dev'" class="m-2 mx-auto w-5xl" variant="info">
|
|
<AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
|
|
<p>This is a development build of the application. Some features will be unavailable or unstable.</p>
|
|
</AlertDescription>
|
|
</Alert>
|
|
<Alert v-if="userStore.user?.LOAs?.[0]" class="m-2 mx-auto w-5xl" variant="info">
|
|
<AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
|
|
<p>You are on LOA until <strong>{{ formatDate(userStore.user?.LOAs?.[0].extended_till ||
|
|
userStore.user?.LOAs?.[0].end_date) }}</strong></p>
|
|
<Button variant="secondary"
|
|
@click="async () => { await cancelLOA(userStore.user.LOAs?.[0].id); userStore.loadUser(); }">End
|
|
LOA</Button>
|
|
</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
|
|
<RouterView class="flex-1 min-h-0"></RouterView>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|