Merge remote-tracking branch 'Origin/main' into promotions
This commit is contained in:
BIN
ui/public/bg.jpg
Normal file
BIN
ui/public/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 543 KiB |
@@ -22,7 +22,10 @@ const environment = import.meta.env.VITE_ENVIRONMENT;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col min-h-screen">
|
||||
<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">
|
||||
@@ -30,10 +33,12 @@ const environment = import.meta.env.VITE_ENVIRONMENT;
|
||||
<p>This is a development build of the application. Some features will be unavailable or unstable.</p>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
<Alert v-if="userStore.user?.LOAData?.[0]" class="m-2 mx-auto w-5xl" variant="info">
|
||||
<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?.LOAData?.[0].end_date) }}</strong></p>
|
||||
<Button variant="secondary" @click="async () => { await cancelLOA(userStore.user?.LOAData?.[0].id); userStore.loadUser(); }">End
|
||||
<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>
|
||||
|
||||
18
ui/src/api/docs.ts
Normal file
18
ui/src/api/docs.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
// @ts-ignore
|
||||
const addr = import.meta.env.VITE_APIHOST;
|
||||
|
||||
export async function getWelcomeMessage(): Promise<string> {
|
||||
const res = await fetch(`${addr}/docs/welcome`, {
|
||||
method: "GET",
|
||||
credentials: 'include',
|
||||
});
|
||||
if (res.ok) {
|
||||
const out = res.json();
|
||||
if (!out) {
|
||||
return null;
|
||||
}
|
||||
return out;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@@ -31,9 +31,9 @@ export async function adminSubmitLOA(request: LOARequest): Promise<{ id?: number
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
return res.json();
|
||||
return
|
||||
} else {
|
||||
return { error: "Failed to submit LOA" };
|
||||
throw new Error("Failed to submit LOA");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -85,8 +85,18 @@ export async function getAllLOAs(page?: number, pageSize?: number): Promise<Page
|
||||
});
|
||||
}
|
||||
|
||||
export function getMyLOAs(): Promise<LOARequest[]> {
|
||||
return fetch(`${addr}/loa/history`, {
|
||||
export function getMyLOAs(page?: number, pageSize?: number): Promise<PagedData<LOARequest>> {
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (page !== undefined) {
|
||||
params.set("page", page.toString());
|
||||
}
|
||||
|
||||
if (pageSize !== undefined) {
|
||||
params.set("pageSize", pageSize.toString());
|
||||
}
|
||||
|
||||
return fetch(`${addr}/loa/history?${params}`, {
|
||||
method: "GET",
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
|
||||
@@ -10,7 +10,9 @@ export type Role = {
|
||||
const addr = import.meta.env.VITE_APIHOST;
|
||||
|
||||
export async function getRoles(): Promise<Role[]> {
|
||||
const res = await fetch(`${addr}/roles`)
|
||||
const res = await fetch(`${addr}/roles`, {
|
||||
credentials: 'include',
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
return res.json() as Promise<Role[]>;
|
||||
@@ -26,11 +28,12 @@ export async function createRole(name: string, color: string, description: strin
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({
|
||||
name,
|
||||
color,
|
||||
description
|
||||
})
|
||||
}),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
@@ -47,6 +50,7 @@ export async function addMemberToRole(member_id: number, role_id: number): Promi
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({
|
||||
member_id,
|
||||
role_id
|
||||
@@ -64,6 +68,7 @@ export async function addMemberToRole(member_id: number, role_id: number): Promi
|
||||
export async function removeMemberFromRole(member_id: number, role_id: number): Promise<boolean> {
|
||||
const res = await fetch(`${addr}/memberRoles`, {
|
||||
method: "DELETE",
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
@@ -83,7 +88,8 @@ export async function removeMemberFromRole(member_id: number, role_id: number):
|
||||
|
||||
export async function deleteRole(role_id: number): Promise<boolean> {
|
||||
const res = await fetch(`${addr}/roles/${role_id}`, {
|
||||
method: "DELETE"
|
||||
method: "DELETE",
|
||||
credentials: 'include',
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
:root {
|
||||
--background: oklch(0.2046 0 0);
|
||||
--background: oklch(19.125% 0.00002 271.152);
|
||||
--foreground: oklch(0.9219 0 0);
|
||||
--card: oklch(23.075% 0.00003 271.152);
|
||||
--card-foreground: oklch(0.9219 0 0);
|
||||
|
||||
@@ -107,13 +107,13 @@ function blurAfter() {
|
||||
<NavigationMenuContent
|
||||
class="grid gap-1 p-2 text-left [&_a]:w-full [&_a]:block [&_a]:whitespace-nowrap *:bg-transparent">
|
||||
|
||||
<NavigationMenuLink
|
||||
<!-- <NavigationMenuLink
|
||||
v-if="auth.hasAnyRole(['17th Administrator', '17th HQ', '17th Command'])"
|
||||
as-child :class="navigationMenuTriggerStyle()">
|
||||
<RouterLink to="/administration/rankChange" @click="blurAfter">
|
||||
Promotions
|
||||
</RouterLink>
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuLink> -->
|
||||
|
||||
<NavigationMenuLink
|
||||
v-if="auth.hasAnyRole(['17th Administrator', '17th HQ', '17th Command'])"
|
||||
@@ -147,11 +147,11 @@ function blurAfter() {
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
|
||||
<NavigationMenuItem as-child :class="navigationMenuTriggerStyle()">
|
||||
<!-- <NavigationMenuItem as-child :class="navigationMenuTriggerStyle()">
|
||||
<RouterLink to="/members" @click="blurAfter">
|
||||
Members (debug)
|
||||
</RouterLink>
|
||||
</NavigationMenuItem>
|
||||
</NavigationMenuItem> -->
|
||||
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
|
||||
@@ -80,6 +80,7 @@ async function setAttendance(state: CalendarAttendance) {
|
||||
|
||||
const canEditEvent = computed(() => {
|
||||
if (!userStore.isLoggedIn) return false;
|
||||
if (userStore.state !== 'member') return false;
|
||||
if (userStore.user.member.member_id == activeEvent.value.creator_id)
|
||||
return true;
|
||||
});
|
||||
@@ -196,7 +197,7 @@ defineExpose({ forceReload })
|
||||
<DropdownMenuItem v-if="activeEvent.cancelled" @click="setCancel(false)">
|
||||
Un-Cancel
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem v-else @click="setCancel(true)">
|
||||
<DropdownMenuItem v-else @click="setCancel(true)" class="text-destructive">
|
||||
Cancel
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
@@ -215,7 +216,7 @@ defineExpose({ forceReload })
|
||||
<CircleAlert></CircleAlert> This event has been cancelled
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="isPast && userStore.isLoggedIn" class="w-full">
|
||||
<section v-if="isPast && userStore.state === 'member'" class="w-full">
|
||||
<ButtonGroup class="flex w-full">
|
||||
<Button variant="outline"
|
||||
:class="myAttendance?.status === CalendarAttendance.Attending ? 'border-2 border-primary text-primary' : ''"
|
||||
|
||||
@@ -74,7 +74,6 @@ const { handleSubmit, values, resetForm } = useForm({
|
||||
const formSubmitted = ref(false);
|
||||
|
||||
const onSubmit = handleSubmit(async (values) => {
|
||||
console.log(values);
|
||||
const out: LOARequest = {
|
||||
member_id: values.member_id,
|
||||
start_date: values.start_date,
|
||||
@@ -122,7 +121,7 @@ const minEndDate = computed(() => {
|
||||
if (values.start_date) {
|
||||
return new CalendarDate(values.start_date.getFullYear(), values.start_date.getMonth() + 1, values.start_date.getDate())
|
||||
} else {
|
||||
return null;
|
||||
return today(getLocalTimeZone());
|
||||
}
|
||||
})
|
||||
|
||||
@@ -134,6 +133,33 @@ const maxEndDate = computed(() => {
|
||||
return null;
|
||||
}
|
||||
})
|
||||
|
||||
const minStartDate = computed(() => {
|
||||
if (values.type && values.end_date) {
|
||||
let endDateObj = new Date(values.end_date.getTime() - values.type.max_length_days * 24 * 60 * 60 * 1000);
|
||||
let td = today(getLocalTimeZone());
|
||||
let start = new CalendarDate(endDateObj.getFullYear(), endDateObj.getMonth() + 1, endDateObj.getDate())
|
||||
return td.compare(start) > 0 ? td : start;
|
||||
} else {
|
||||
return today(getLocalTimeZone());
|
||||
}
|
||||
})
|
||||
|
||||
const memberFilter = ref('');
|
||||
|
||||
const filteredMembers = computed(() => {
|
||||
const q = memberFilter?.value?.toLowerCase() ?? ""
|
||||
const results: Member[] = []
|
||||
|
||||
for (const m of members.value ?? []) {
|
||||
if (!q || (m.displayName || m.member_name).toLowerCase().includes(q)) {
|
||||
results.push(m)
|
||||
if (results.length >= 50) break
|
||||
}
|
||||
}
|
||||
|
||||
return results
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -157,22 +183,24 @@ const maxEndDate = computed(() => {
|
||||
<ComboboxInput placeholder="Search members..." class="w-full pl-3"
|
||||
:display-value="(id) => {
|
||||
const m = members.find(mem => mem.member_id === id)
|
||||
return m ? m.displayName || m.member_name : ''
|
||||
}" />
|
||||
return m ? m.displayName || m.member_name : ''
|
||||
}" @input="memberFilter = $event.target.value" />
|
||||
</ComboboxAnchor>
|
||||
<ComboboxList class="*:w-64">
|
||||
<ComboboxEmpty class="text-muted-foreground w-full">No results</ComboboxEmpty>
|
||||
<ComboboxGroup>
|
||||
<template v-for="member in members" :key="member.member_id">
|
||||
<ComboboxItem :value="member.member_id"
|
||||
class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5 w-full">
|
||||
{{ member.displayName || member.member_name }}
|
||||
<ComboboxItemIndicator
|
||||
class="absolute left-2 inline-flex items-center">
|
||||
<Check class="h-4 w-4" />
|
||||
</ComboboxItemIndicator>
|
||||
</ComboboxItem>
|
||||
</template>
|
||||
<div class="max-h-80 overflow-y-scroll scrollbar-themed min-w-3xs">
|
||||
<template v-for="member in filteredMembers" :key="member.member_id">
|
||||
<ComboboxItem :value="member.member_id"
|
||||
class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5 w-full">
|
||||
{{ member.displayName || member.member_name }}
|
||||
<ComboboxItemIndicator
|
||||
class="absolute left-2 inline-flex items-center">
|
||||
<Check class="h-4 w-4" />
|
||||
</ComboboxItemIndicator>
|
||||
</ComboboxItem>
|
||||
</template>
|
||||
</div>
|
||||
</ComboboxGroup>
|
||||
</ComboboxList>
|
||||
</Combobox>
|
||||
@@ -209,21 +237,31 @@ const maxEndDate = computed(() => {
|
||||
<FieldContent>
|
||||
<FieldLabel>Start Date</FieldLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<Button variant="outline" :class="cn(
|
||||
'w-full justify-start text-left font-normal',
|
||||
!field.value && 'text-muted-foreground',
|
||||
)">
|
||||
<CalendarIcon class="mr-2 h-4 w-4" />
|
||||
{{ field.value ? df.format(field.value) : "Pick a date" }}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<div class="relative inline-flex items-center group">
|
||||
<PopoverTrigger as-child>
|
||||
<Button :disabled="!values.type" variant="outline" :class="cn(
|
||||
'w-full justify-start text-left font-normal',
|
||||
!field.value && 'text-muted-foreground',
|
||||
)">
|
||||
<CalendarIcon class="mr-2 h-4 w-4" />
|
||||
{{ field.value ? df.format(field.value) : "Pick a date" }}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<!-- Tooltip bubble -->
|
||||
<div v-if="!values?.type" class="pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2
|
||||
whitespace-nowrap rounded-md bg-popover px-2 py-1 text-xs
|
||||
text-popover-foreground shadow-md border border-border
|
||||
opacity-0 translate-y-1
|
||||
group-hover:opacity-100 group-hover:translate-y-0
|
||||
transition-opacity transition-transform duration-150">
|
||||
Select an LOA type first
|
||||
</div>
|
||||
</div>
|
||||
<PopoverContent class="w-auto p-0">
|
||||
<Calendar
|
||||
:model-value="field.value
|
||||
? new CalendarDate(field.value.getFullYear(), field.value.getMonth() + 1, field.value.getDate()) : null"
|
||||
@update:model-value="(val: CalendarDate) => field.onChange(val.toDate(getLocalTimeZone()))"
|
||||
layout="month-and-year" :min-value="today(getLocalTimeZone())" />
|
||||
layout="month-and-year"
|
||||
:min-value="minStartDate || today(getLocalTimeZone())" />
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<div class="h-4">
|
||||
@@ -237,18 +275,28 @@ const maxEndDate = computed(() => {
|
||||
<FieldContent>
|
||||
<FieldLabel>End Date</FieldLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<Button variant="outline" :class="cn(
|
||||
'w-full justify-start text-left font-normal',
|
||||
!field.value && 'text-muted-foreground',
|
||||
)">
|
||||
<CalendarIcon class="mr-2 h-4 w-4" />
|
||||
{{ field.value ? df.format(field.value) : "Pick a date" }}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<div class="relative inline-flex items-center group">
|
||||
<PopoverTrigger as-child>
|
||||
<Button :disabled="!values.type" variant="outline" :class="cn(
|
||||
'w-full justify-start text-left font-normal',
|
||||
!field.value && 'text-muted-foreground',
|
||||
)">
|
||||
<CalendarIcon class="mr-2 h-4 w-4" />
|
||||
{{ field.value ? df.format(field.value) : "Pick a date" }}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<!-- Tooltip bubble -->
|
||||
<div v-if="!values?.type" class="pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2
|
||||
whitespace-nowrap rounded-md bg-popover px-2 py-1 text-xs
|
||||
text-popover-foreground shadow-md border border-border
|
||||
opacity-0 translate-y-1
|
||||
group-hover:opacity-100 group-hover:translate-y-0
|
||||
transition-opacity transition-transform duration-150">
|
||||
Select an LOA type first
|
||||
</div>
|
||||
</div>
|
||||
<PopoverContent class="w-auto p-0">
|
||||
<Calendar
|
||||
:model-value="field.value ? new CalendarDate(field.value.getFullYear(), field.value.getMonth() + 1, field.value.getDate()) : null"
|
||||
@update:model-value="(val: CalendarDate) => field.onChange(val.toDate(getLocalTimeZone()))"
|
||||
:default-placeholder="defaultPlaceholder" :min-value="minEndDate"
|
||||
:max-value="maxEndDate" layout="month-and-year">
|
||||
@@ -286,8 +334,10 @@ const maxEndDate = computed(() => {
|
||||
</h2>
|
||||
|
||||
<p class="max-w-md text-muted-foreground">
|
||||
Your Leave of Absence request has been submitted successfully.
|
||||
It will take effect on your selected start date.
|
||||
{{ adminMode ? 'You have successfully submitted a Leave of Absence on behalf of another member.' :
|
||||
`Your Leave
|
||||
of Absence request has been submitted successfully.
|
||||
It will take effect on your selected start date.` }}
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
@@ -59,7 +59,9 @@ async function loadLOAs() {
|
||||
LOAList.value = result.data;
|
||||
pageData.value = result.pagination;
|
||||
} else {
|
||||
LOAList.value = await getMyLOAs();
|
||||
let result = await getMyLOAs(pageNum.value, pageSize.value);
|
||||
LOAList.value = result.data;
|
||||
pageData.value = result.pagination;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ export const buttonVariants = cva(
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
||||
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/70",
|
||||
destructive:
|
||||
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
|
||||
@@ -49,15 +49,8 @@ const dialogRef = ref<any>(null)
|
||||
// NEW: handle day/time slot clicks to start creating an event
|
||||
function onDateClick(arg: { dateStr: string }) {
|
||||
if (!userStore.isLoggedIn) return;
|
||||
if (userStore.state !== 'member') return;
|
||||
dialogRef.value?.openDialog(arg.dateStr);
|
||||
// For now, just open the panel with a draft payload.
|
||||
// activeEvent.value = {
|
||||
// id: '__draft__',
|
||||
// title: 'New event',
|
||||
// start: arg.dateStr,
|
||||
// extendedProps: { draft: true }
|
||||
// }
|
||||
// panelOpen.value = true
|
||||
}
|
||||
|
||||
const calendarOptions = ref({
|
||||
@@ -203,7 +196,7 @@ onMounted(() => {
|
||||
@click="goToday">
|
||||
Today
|
||||
</button>
|
||||
<button v-if="userStore.isLoggedIn"
|
||||
<button v-if="userStore.isLoggedIn && userStore.state === 'member'"
|
||||
class="cursor-pointer ml-1 inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground hover:opacity-90"
|
||||
@click="onCreateEvent">
|
||||
<Plus class="h-4 w-4" />
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { getWelcomeMessage } from '@/api/docs';
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
@@ -8,23 +10,126 @@ const router = useRouter()
|
||||
const user = useUserStore();
|
||||
|
||||
function goToApplication() {
|
||||
router.push('/apply') // change to your form route
|
||||
router.push('/join') // change to your form route
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (user.state == 'member') {
|
||||
let policy = await getWelcomeMessage() as any;
|
||||
welcomeRef.value.innerHTML = policy;
|
||||
}
|
||||
})
|
||||
|
||||
const welcomeRef = ref<HTMLElement>(null);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<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>
|
||||
<p class="text-neutral-400 mb-8 max-w-md">
|
||||
To join our unit, please fill out an application to continue.
|
||||
</p>
|
||||
<Button @click="goToApplication" class="px-6 py-3 text-lg">
|
||||
Begin Application
|
||||
</Button>
|
||||
<div v-if="user.state == 'member'" class="mt-10">
|
||||
<div ref="welcomeRef" class="bookstack-container">
|
||||
<!-- bookstack -->
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
HOMEPAGEEEEEEEEEEEEEEEEEEE
|
||||
<div v-else class="text-foreground px-6 py-12 selection:bg-primary/10">
|
||||
<div class="max-w-5xl mx-auto space-y-8">
|
||||
|
||||
<header class="space-y-4">
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-4xl font-semibold tracking-tight">17th Ranger Battalion</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-px bg-border w-full"></div>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
|
||||
|
||||
<div class="lg:col-span-7 space-y-6">
|
||||
<div class="space-y-2">
|
||||
<h2 class="text-sm font-medium uppercase tracking-wider text-primary">Unit Philosophy</h2>
|
||||
<p class="text-lg leading-relaxed font-normal">
|
||||
The 17th RBN emphasizes high-skill gameplay through real-world tactics, stripped of
|
||||
traditional military formalities. We prioritize effective coordination over enforced
|
||||
etiquette.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Our "Real Life First" mindset ensures participation remains a hobby, not a second job. With
|
||||
a consistent roster of 40–50 members for Saturday operations, we focus on effective
|
||||
coordination and mission success without the requirement of "Yes sir, no sir" protocols.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-6 pt-4">
|
||||
<Button size="lg" @click="goToApplication" class="font-medium">
|
||||
Begin Application
|
||||
</Button>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs uppercase tracking-tighter text-muted-foreground">Age
|
||||
Requirement</span>
|
||||
<span class="text-sm font-medium">18+</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-5 space-y-8">
|
||||
<section class="space-y-3">
|
||||
<h3 class="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
|
||||
Operational Schedule</h3>
|
||||
<div class="rounded-lg border bg-card p-4 shadow-sm">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm font-medium">Main Operation</span>
|
||||
<span class="text-sm font-mono text-primary">Sat 19:00 CST</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="space-y-4">
|
||||
<h3 class="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
|
||||
Force Structure
|
||||
</h3>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-start gap-4">
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0"></span>
|
||||
<div class="space-y-1">
|
||||
<p class="text-sm font-medium leading-none">Alpha Company</p>
|
||||
<p class="text-[13px] text-muted-foreground leading-relaxed">
|
||||
Rifleman, Medic, CLS, Anti-Tank, RTO, Leadership
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="flex items-start gap-4">
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0"></span>
|
||||
<div class="space-y-1">
|
||||
<p class="text-sm font-medium leading-none">Echo Company</p>
|
||||
<p class="text-[13px] text-muted-foreground leading-relaxed">
|
||||
Logistics, CAS Pilot, Armor, Artillery, JTAC, Forward Observer
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p class="text-[12px] text-muted-foreground/70 border-t pt-2 border-border">
|
||||
Roles are fluid; specialization or weekly rotation is supported.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="space-y-4">
|
||||
<div class="relative rounded-xl border bg-card shadow-sm overflow-hidden">
|
||||
<div class="aspect-video">
|
||||
<iframe class="w-full h-full"
|
||||
src="https://www.youtube.com/embed/61L397HwmrU?si=oY9qf6vFv6hXo6Fk&controls=1&mute=1&start=102&end=152"
|
||||
title="YouTube video player" frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen>
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -34,7 +34,8 @@ import { Plus, X } from 'lucide-vue-next';
|
||||
import Separator from '@/components/ui/separator/Separator.vue';
|
||||
import Input from '@/components/ui/input/Input.vue';
|
||||
import Label from '@/components/ui/label/Label.vue';
|
||||
import { getMembers, Member } from '@/api/member';
|
||||
import { getMembers } from '@/api/member';
|
||||
import { Member } from '@shared/types/member';
|
||||
|
||||
const roles = ref<Role[]>([])
|
||||
const activeRole = ref<Role | null>(null)
|
||||
@@ -116,16 +117,18 @@ async function handleCreateGroup() {
|
||||
}
|
||||
}
|
||||
|
||||
function handleAddMember() {
|
||||
async function handleAddMember() {
|
||||
//guard
|
||||
if (memberToAdd.value == null)
|
||||
return;
|
||||
|
||||
addMemberToRole(memberToAdd.value.member_id, activeRole.value.id);
|
||||
await addMemberToRole(memberToAdd.value.member_id, activeRole.value.id);
|
||||
roles.value = await getRoles();
|
||||
}
|
||||
|
||||
function handleRemoveMember(memberId: number) {
|
||||
async function handleRemoveMember(memberId: number) {
|
||||
removeMemberFromRole(memberId, activeRole.value.id);
|
||||
roles.value = await getRoles();
|
||||
}
|
||||
|
||||
async function handleDeleteRole() {
|
||||
@@ -193,7 +196,7 @@ onMounted(async () => {
|
||||
</ul>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button @click="handleDeleteRole">Delete Group</Button>
|
||||
<!-- <Button @click="handleDeleteRole">Delete Group</Button> -->
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
@@ -232,7 +235,7 @@ onMounted(async () => {
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="flex items-center justify-between my-4">
|
||||
<p>Groups</p>
|
||||
<Button @click="showCreateGroupDialog = true">+ Add New Group</Button>
|
||||
<!-- <Button @click="showCreateGroupDialog = true">+ Add New Group</Button> -->
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-5">
|
||||
<Card v-for="value in roles" :key="value.id" @click="activeRole = value; showDialog = true"
|
||||
|
||||
@@ -11,6 +11,7 @@ import { useMemberDirectory } from "@/stores/memberDirectory";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
|
||||
const saving = ref(false);
|
||||
const saveSuccess = ref(false);
|
||||
const loading = ref(true);
|
||||
const showLoading = ref(false);
|
||||
const form = ref<memberSettings>();
|
||||
@@ -20,13 +21,14 @@ const userStore = useUserStore()
|
||||
|
||||
function saveSettings() {
|
||||
saving.value = true;
|
||||
saveSuccess.value = false;
|
||||
|
||||
setTimeout(async () => {
|
||||
// Replace with your API save call
|
||||
setMemberSettings(form.value);
|
||||
saving.value = false;
|
||||
console.log(userStore.user.id)
|
||||
memberDictionary.invalidateMember(userStore.user.id)
|
||||
memberDictionary.invalidateMember(userStore.user.member.member_id)
|
||||
saveSuccess.value = true;
|
||||
}, 800);
|
||||
}
|
||||
|
||||
@@ -75,7 +77,8 @@ onMounted(async () => {
|
||||
</CardContent>
|
||||
</Transition>
|
||||
|
||||
<CardFooter class="flex justify-end">
|
||||
<CardFooter class="flex justify-end gap-5 items-center">
|
||||
<p v-if="saveSuccess" class="text-green-500">Profile saved</p>
|
||||
<Button @click="saveSettings" :disabled="saving">
|
||||
{{ saving ? "Saving..." : "Save Changes" }}
|
||||
</Button>
|
||||
|
||||
@@ -16,7 +16,7 @@ const router = createRouter({
|
||||
{ path: '/members', component: () => import('@/pages/memberList.vue'), meta: { requiresAuth: true, memberOnly: true } },
|
||||
{ path: '/loa', component: () => import('@/pages/SubmitLOA.vue'), meta: { requiresAuth: true, memberOnly: true } },
|
||||
{ path: '/transfer', component: () => import('@/pages/Transfer.vue'), meta: { requiresAuth: true, memberOnly: true } },
|
||||
{ path: '/profile', component: () => import('@/pages/MyProfile.vue'), meta: { requiresAuth: true, memberOnly: true } },
|
||||
{ path: '/profile', component: () => import('@/pages/MyProfile.vue'), meta: { requiresAuth: true } },
|
||||
|
||||
|
||||
{ path: '/calendar', component: () => import('@/pages/Calendar.vue') },
|
||||
|
||||
Reference in New Issue
Block a user