17th-Ranger-Battalion-ORG/milsim-site-v4
8
1
Fork 0
Code Issues 22 Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

Split navbar from main app

Browse Source
This commit is contained in:
ajdj100
2025-11-30 18:55:41 -05:00
parent b193785f88
commit 5a31d86969
4 changed files with 124 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
ui/src/App.vue
View File

@@ -1,41 +1,13 @@
<script setup> <script setup>
import { RouterLink, RouterView } from 'vue-router'; import { RouterView } from 'vue-router';
import Separator from './components/ui/separator/Separator.vue';
import Button from './components/ui/button/Button.vue'; import Button from './components/ui/button/Button.vue';
import { Popover, PopoverContent, PopoverTrigger } from './components/ui/popover';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from './components/ui/dropdown-menu';
import { onMounted } from 'vue';
import { useUserStore } from './stores/user'; import { useUserStore } from './stores/user';
import Alert from './components/ui/alert/Alert.vue'; import Alert from './components/ui/alert/Alert.vue';
import AlertDescription from './components/ui/alert/AlertDescription.vue'; import AlertDescription from './components/ui/alert/AlertDescription.vue';
import Navbar from './components/Navigation/Navbar.vue';
const userStore = useUserStore(); const userStore = useUserStore();
// onMounted(async () => {
// const res = await fetch(`${import.meta.env.VITE_APIHOST}/members/me`, {
// credentials: 'include',
// });
// const data = await res.json();
// console.log(data);
// userStore.user = data;
// });
const APIHOST = import.meta.env.VITE_APIHOST;
async function logout() {
// await fetch(`${APIHOST}/logout`, {
// method: 'GET',
// credentials: 'include',
// });
userStore.user = null;
window.location.href = APIHOST + "/logout";
}
function formatDate(dateStr) { function formatDate(dateStr) {
if (!dateStr) return ""; if (!dateStr) return "";
return new Date(dateStr).toLocaleDateString("en-US", { return new Date(dateStr).toLocaleDateString("en-US", {
@@ -49,77 +21,8 @@ const environment = import.meta.env.VITE_ENVIRONMENT;
</script> </script>
<template> <template>
<div> <div class="flex flex-col min-h-screen">
<div class="flex items-center justify-between px-10"> <Navbar class="flex"></Navbar>
<div></div>
<div class="h-15 flex items-center justify-center gap-20">
<RouterLink to="/">
<Button variant="link">Home</Button>
</RouterLink>
<RouterLink to="/calendar">
<Button variant="link">Calendar</Button>
</RouterLink>
<RouterLink to="/members">
<Button variant="link">Members</Button>
</RouterLink>
<Popover>
<PopoverTrigger as-child>
<Button variant="link">Forms</Button>
</PopoverTrigger>
<PopoverContent class="flex flex-col gap-4 items-center w-min">
<RouterLink to="/transfer">
<Button variant="link">Transfer Request</Button>
</RouterLink>
<RouterLink to="/trainingReport">
<Button variant="link">Training Report</Button>
</RouterLink>
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger as-child>
<Button variant="link">Administration</Button>
</PopoverTrigger>
<PopoverContent class="flex flex-col gap-4 items-center w-min">
<RouterLink to="/administration/rankChange">
<Button variant="link">Promotions</Button>
</RouterLink>
<RouterLink to="/administration/loa">
<Button variant="link">Leave of Absence</Button>
</RouterLink>
<RouterLink to="/administration/transfer">
<Button variant="link">Transfer Requests</Button>
</RouterLink>
<RouterLink to="/administration/applications">
<Button variant="link">Recruitment</Button>
</RouterLink>
<RouterLink to="/administration/roles">
<Button variant="link">Role Management</Button>
</RouterLink>
</PopoverContent>
</Popover>
</div>
<div>
<DropdownMenu v-if="userStore.isLoggedIn">
<DropdownMenuTrigger class="cursor-pointer">
<p>{{ userStore.user.name }}</p>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>My Profile</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuItem>
<RouterLink to="/loa">
Submit LOA
</RouterLink>
</DropdownMenuItem>
<DropdownMenuItem :variant="'destructive'" @click="logout()">Logout</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<a v-else :href="APIHOST + '/login'">Login</a>
</div>
</div>
<Separator></Separator>
<Alert v-if="environment == 'dev'" class="m-2 mx-auto w-5xl" variant="info"> <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"> <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> <p>This is a development build of the application. Some features will be unavailable or unstable.</p>
@@ -132,7 +35,7 @@ const environment = import.meta.env.VITE_ENVIRONMENT;
</AlertDescription> </AlertDescription>
</Alert> </Alert>
<RouterView class=""></RouterView> <RouterView class="flex-1 min-h-0"></RouterView>
</div> </div>
</template> </template>

98
ui/src/components/Navigation/Navbar.vue Normal file
View File

@@ -0,0 +1,98 @@
<script setup lang="ts">
import { RouterLink } from 'vue-router';
import Separator from '../ui/separator/Separator.vue';
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '../ui/dropdown-menu';
import { useUserStore } from '@/stores/user';
import Button from '../ui/button/Button.vue';
const userStore = useUserStore();
//@ts-ignore
const APIHOST = import.meta.env.VITE_APIHOST;
async function logout() {
userStore.user = null;
window.location.href = APIHOST + "/logout";
}
</script>
<template>
<div class="w-full border-b">
<div class="max-w-screen-xl mx-auto flex items-center justify-between px-10">
<div class="flex items-center">
<RouterLink to="/">
<Button variant="link">Home</Button>
</RouterLink>
<div class="h-15 flex items-center justify-center">
<RouterLink to="/calendar">
<Button variant="link">Calendar</Button>
</RouterLink>
<RouterLink to="/members">
<Button variant="link">Members</Button>
</RouterLink>
<Popover>
<PopoverTrigger as-child>
<Button variant="link">Forms</Button>
</PopoverTrigger>
<PopoverContent class="flex flex-col gap-4 items-center w-min">
<RouterLink to="/transfer">
<Button variant="link">Transfer Request</Button>
</RouterLink>
<RouterLink to="/trainingReport">
<Button variant="link">Training Report</Button>
</RouterLink>
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger as-child>
<Button variant="link">Administration</Button>
</PopoverTrigger>
<PopoverContent class="flex flex-col gap-4 items-center w-min">
<RouterLink to="/administration/rankChange">
<Button variant="link">Promotions</Button>
</RouterLink>
<RouterLink to="/administration/loa">
<Button variant="link">Leave of Absence</Button>
</RouterLink>
<RouterLink to="/administration/transfer">
<Button variant="link">Transfer Requests</Button>
</RouterLink>
<RouterLink to="/administration/applications">
<Button variant="link">Recruitment</Button>
</RouterLink>
<RouterLink to="/administration/roles">
<Button variant="link">Role Management</Button>
</RouterLink>
</PopoverContent>
</Popover>
</div>
</div>
<div>
<DropdownMenu v-if="userStore.isLoggedIn">
<DropdownMenuTrigger class="cursor-pointer">
<p>{{ userStore.user.name }}</p>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>My Profile</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuItem>
<RouterLink to="/loa">
Submit LOA
</RouterLink>
</DropdownMenuItem>
<DropdownMenuItem :variant="'destructive'" @click="logout()">Logout</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<a v-else :href="APIHOST + '/login'">Login</a>
</div>
</div>
<!-- <Separator></Separator> -->
</div>
</template>

5
ui/src/pages/Homepage.vue
View File

@@ -13,8 +13,8 @@ function goToApplication() {
</script> </script>
<template> <template>
<div v-if="user.state == 'guest'" <div>
class="min-h-screen flex flex-col items-center justify-center text-center bg-neutral-950 text-white px-4"> <div v-if="user.state == 'guest'" class="flex flex-col items-center justify-center">
<h1 class="text-4xl font-bold mb-4">Welcome to the 17th</h1> <h1 class="text-4xl font-bold mb-4">Welcome to the 17th</h1>
<p class="text-neutral-400 mb-8 max-w-md"> <p class="text-neutral-400 mb-8 max-w-md">
To join our unit, please fill out an application to continue. To join our unit, please fill out an application to continue.
@@ -26,4 +26,5 @@ function goToApplication() {
<div v-else> <div v-else>
HOMEPAGEEEEEEEEEEEEEEEEEEE HOMEPAGEEEEEEEEEEEEEEEEEEE
</div> </div>
</div>
</template> </template>

16
ui/src/router/index.js
View File

@@ -63,15 +63,15 @@ router.beforeEach(async (to) => {
} }
// // Must be a member // Must be a member
// if (to.meta.memberOnly && user.state !== 'member') { if (to.meta.memberOnly && user.state !== 'member') {
// return '/unauthorized' return '/unauthorized'
// } }
// // Must have specific role // Must have specific role
// if (to.meta.roles && !user.hasRole('Dev') && !user.hasAnyRole(to.meta.roles)) { if (to.meta.roles && !user.hasRole('Dev') && !user.hasAnyRole(to.meta.roles)) {
// return '/unauthorized' return '/unauthorized'
// } }
}) })
export default router; export default router;