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

20-calendar-system #37

Merged
Ajdj100 merged 25 commits from 20-calendar-system into main 2025-11-28 00:06:10 -06:00
Conversation 0 Commits 25 Files Changed 23 +106 -22
6 changed files with 106 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0ba42e6f78 - Show all commits

25
api/src/routes/calendar.ts
View File

@@ -1,5 +1,5 @@
import { Request, Response } from "express";
import { createEvent, getEventAttendance, getEventDetails, getShortEventsInRange, setAttendanceStatus } from "../services/calendarService";
import { createEvent, getEventAttendance, getEventDetails, getShortEventsInRange, setAttendanceStatus, setEventCancelled } from "../services/calendarService";
import { CalendarAttendance, CalendarEvent } from "@app/shared/types/calendar";
const express = require('express');
@@ -35,6 +35,28 @@ r.get('/upcoming', async (req, res) => {
res.sendStatus(501);
})
r.post('/:id/cancel', async (req: Request, res: Response) => {
try {
const eventID = Number(req.params.id);
setEventCancelled(eventID, true);
res.sendStatus(200);
} catch (error) {
console.error('Error setting cancel status:', error);
res.status(500).send('Error setting cancel status');
}
})
r.post('/:id/uncancel', async (req: Request, res: Response) => {
try {
const eventID = Number(req.params.id);
setEventCancelled(eventID, false);
res.sendStatus(200);
} catch (error) {
console.error('Error setting cancel status:', error);
res.status(500).send('Error setting cancel status');
}
})
r.post('/:id/attendance', async (req: Request, res: Response) => {
try {
let member = req.user.id;
@@ -78,4 +100,5 @@ r.post('/', async (req: Request, res: Response) => {
}
})
module.exports.calendarRouter = r;

8
api/src/services/calendarService.ts
View File

@@ -52,13 +52,15 @@ export async function updateEvent(eventObject: CalendarEvent) {
return { success: true };
}
export async function cancelEvent(eventID: number) {
export async function setEventCancelled(eventID: number, cancelled: boolean) {
const input = cancelled ? 1 : 0;
console.log(cancelled, input);
const sql = `
UPDATE calendar_events
SET cancelled = 1
SET cancelled = ?
WHERE id = ?
`;
await pool.query(sql, [eventID]);
await pool.query(sql, [input, eventID]);
return { success: true };
}

16
ui/src/api/calendar.ts
View File

@@ -86,12 +86,20 @@ export async function editCalendarEvent(eventData: CalendarEvent) {
}
export async function cancelCalendarEvent(eventID: number) {
export async function setCancelCalendarEvent(eventID: number, cancel: boolean) {
let route = cancel ? "cancel" : "uncancel";
}
export async function adminCancelCalendarEvent(eventID: number) {
console.log(route);
let res = await fetch(`${addr}/calendar/${eventID}/${route}`, {
method: "POST",
credentials: "include"
});
if (res.ok) {
return;
} else {
throw new Error(`Failed to set attendance: ${res.status} ${res.statusText}`);
}
}
export async function setCalendarEventAttendance(eventID: number, state: CalendarAttendance) {

17
ui/src/components/calendar/CreateCalendarEvent.vue
View File

@@ -49,12 +49,23 @@ import { createCalendarEvent } from "@/api/calendar"
const formSchema = toTypedSchema(calendarEventSchema)
// ---------- dialog state & defaults ----------
const clickedDate = ref<string | null>(null);
const dialogOpen = ref(false)
function openDialog() { dialogOpen.value = true }
function openDialog(dateStr?: string) {
clickedDate.value=dateStr ?? null;
dialogOpen.value = true
initialValues.value = makeInitialValues()
}
defineExpose({ openDialog })
function makeInitialValues() {
const start = roundToNextHour()
let start: Date;
if (clickedDate.value) {
const local = new Date(clickedDate.value + "T00:00:00");
start = roundToNextHour(local);
} else {
start = roundToNextHour();
}
const end = new Date(start.getTime() + 60 * 60 * 1000)
return {
name: "",
@@ -68,7 +79,7 @@ function makeInitialValues() {
id: null as number | null,
}
}
const initialValues = ref(makeInitialValues())
const initialValues = ref(null)
const formKey = ref(0)

56
ui/src/components/calendar/ViewCalendarEvent.vue
View File

@@ -1,12 +1,16 @@
<script setup lang="ts">
import type { CalendarEvent, CalendarSignup } from '@shared/types/calendar'
import { CircleAlert, Clock, MapPin, User, X } from 'lucide-vue-next';
import { CircleAlert, Clock, EllipsisVertical, MapPin, User, X } from 'lucide-vue-next';
import { computed, onMounted, ref, watch } from 'vue';
import ButtonGroup from '../ui/button-group/ButtonGroup.vue';
import Button from '../ui/button/Button.vue';
import { CalendarAttendance, getCalendarEvent, setCalendarEventAttendance } from '@/api/calendar';
import { CalendarAttendance, getCalendarEvent, setCalendarEventAttendance, setCancelCalendarEvent } from '@/api/calendar';
import { useUserStore } from '@/stores/user';
import { useRoute } from 'vue-router';
import DropdownMenu from '../ui/dropdown-menu/DropdownMenu.vue';
import DropdownMenuTrigger from '../ui/dropdown-menu/DropdownMenuTrigger.vue';
import DropdownMenuContent from '../ui/dropdown-menu/DropdownMenuContent.vue';
import DropdownMenuItem from '../ui/dropdown-menu/DropdownMenuItem.vue';
const route = useRoute();
// const eventID = computed(() => {
@@ -37,6 +41,7 @@ watch(
const emit = defineEmits<{
(e: 'close'): void
(e: 'reload'): void
}>()
// const activeEvent = computed(() => props.event)
@@ -75,6 +80,17 @@ async function setAttendance(state: CalendarAttendance) {
//refresh event data
activeEvent.value = await getCalendarEvent(activeEvent.value.id);
}
const canEditEvent = computed(() => {
if (user.user.id == activeEvent.value.creator_id)
return true;
});
async function setCancel(isCancelled: boolean) {
await setCancelCalendarEvent(activeEvent.value.id, isCancelled);
emit("reload");
activeEvent.value = await getCalendarEvent(activeEvent.value.id);
}
</script>
<template>
@@ -84,16 +100,40 @@ async function setAttendance(state: CalendarAttendance) {
<h2 class="text-lg font-semibold break-all">
{{ activeEvent?.name || 'Event' }}
</h2>
<button
class="inline-flex flex-none size-8 items-center justify-center rounded-md border hover:bg-muted/40 transition"
aria-label="Close" @click="emit('close')">
<X class="size-4" />
</button>
<div class="flex gap-4">
<DropdownMenu v-if="canEditEvent">
<DropdownMenuTrigger>
<button
class="inline-flex flex-none size-8 items-center justify-center cursor-pointer rounded-md hover:bg-muted/40 transition">
<EllipsisVertical class="size-6" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
Edit
</DropdownMenuItem>
<DropdownMenuItem v-if="activeEvent.cancelled"
@click="setCancel(false)">
Un-Cancel
</DropdownMenuItem>
<DropdownMenuItem v-else @click="setCancel(true)">
Cancel
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<button
class="inline-flex flex-none size-8 items-center justify-center rounded-md border hover:bg-muted/40 transition cursor-pointer"
aria-label="Close" @click="emit('close')">
<X class="size-4" />
</button>
</div>
</div>
<!-- Body -->
<div class="flex-1 flex flex-col items-center min-h-0 overflow-y-auto px-4 py-4 space-y-6 w-full">
<section v-if="activeEvent.cancelled == true" class="w-full">
<div class="flex p-2 rounded-md w-full bg-destructive gap-3"><CircleAlert></CircleAlert> This event has been cancelled</div>
<div class="flex p-2 rounded-md w-full bg-destructive gap-3">
<CircleAlert></CircleAlert> This event has been cancelled
</div>
</section>
<section class="w-full">
<ButtonGroup class="flex w-full">

6
ui/src/pages/Calendar.vue
View File

@@ -30,7 +30,7 @@ function buildFullDate(month: number, year: number): Date {
}
const { selectedMonth, selectedYear, years, goPrev, goNext, goToday, onDatesSet, goToSelectedDate } = useCalendarNavigation(api)
const { events } = useCalendarEvents(selectedMonth, selectedYear);
const { events, loadEvents} = useCalendarEvents(selectedMonth, selectedYear);
const panelOpen = ref(false)
const activeEvent = ref<CalendarEvent | null>(null)
@@ -48,7 +48,7 @@ const dialogRef = ref<any>(null)
// NEW: handle day/time slot clicks to start creating an event
function onDateClick(arg: { dateStr: string }) {
dialogRef.value?.openDialog();
dialogRef.value?.openDialog(arg.dateStr);
// For now, just open the panel with a draft payload.
// activeEvent.value = {
// id: '__draft__',
@@ -215,7 +215,7 @@ onMounted(() => {
<aside v-if="panelOpen"
class="3xl:w-lg 2xl:w-md border-l bg-card text-foreground flex flex-col overflow-auto scrollbar-themed"
:style="{ height: 'calc(100vh - 61px)', position: 'sticky', top: '64px' }">
<ViewCalendarEvent @close="() => { router.push('/calendar'); }">
<ViewCalendarEvent @close="() => { router.push('/calendar'); }" @reload="loadEvents()">
</ViewCalendarEvent>
</aside>
</div>