Converted more stuff to support TS

api/src/routes/applications.js

@@ -1,8 +1,7 @@
 const express = require('express');
 const router = express.Router();
 
-// DB pool (same as used in api/index.js)
+import pool from '../db';
-const pool = require('../db');
 
 // POST /application
 router.post('/', async (req, res) => {

api/src/routes/auth.js

@@ -6,7 +6,7 @@ dotenv.config();
 const express = require('express');
 const { param } = require('./applications');
 const router = express.Router();
-const pool = require('../db')
+import pool from '../db';
 const querystring = require('querystring');
 
 

api/src/routes/calendar.js

@@ -1,33 +0,0 @@
-const express = require('express');
-const r = express.Router();
-const ur = express.Router();
-const pool = require('../db');
-
-//insert a new latest rank for a user
-ur.post('/', async (req, res) => {3
-    try {
-        const change = req.body?.change;
-        console.log(change);
-        await insertMemberRank(change);
-
-        res.sendStatus(201);
-    } catch (err) {
-        console.error('Insert failed:', err);
-        res.status(500).json({ error: 'Failed to update ranks' });
-    }
-});
-
-//get all ranks
-r.get('/', async (req, res) => {
-    try {
-        const ranks = await getAllRanks();
-        console.log(ranks);
-        res.json(ranks);
-    } catch (err) {
-        console.error(err);
-        res.status(500).json({ error: 'Internal server error' });
-    }
-});
-
-module.exports.ranks = r;
-module.exports.memberRanks = ur;

api/src/routes/calendar.ts

@@ -0,0 +1,50 @@
+import { getEventAttendance, getEventDetails, getShortEventsInRange } from "../services/calendarService";
+
+const express = require('express');
+const r = express.Router();
+
+function addMonths(date: Date, months: number): Date {
+    const d = new Date(date)
+    d.setMonth(d.getMonth() + months)
+    return d
+}
+
+//get calendar events paged
+r.get('/', async (req, res) => {
+    const viewDate: Date = req.body.date;
+    //generate date range
+    const backDate: Date = addMonths(viewDate, -1);
+    const frontDate: Date = addMonths(viewDate, 2);
+
+    const events = getShortEventsInRange(backDate, frontDate);
+
+    res.status(200).json(events);
+});
+
+r.get('/upcoming', async (req, res) => {
+    res.sendStatus(501);
+})
+
+//get event details
+r.get('/:id', async (req, res) => {
+    try {
+        const eventID: number = req.params.id;
+
+        let details = getEventDetails(eventID);
+        let attendance = await getEventAttendance(eventID);
+
+        let out = { ...details, attendance }
+        console.log(out);
+        res.status(200).json(out);
+    } catch (err) {
+        console.error('Insert failed:', err);
+        res.status(500).json(err);
+    }
+})
+
+//post a new calendar event
+r.post('/', async (req, res) => {
+
+})
+
+module.exports.calendar = r;

api/src/routes/loa.js

@@ -1,8 +1,7 @@
 const express = require('express');
 const router = express.Router();
 
-// DB pool (same as used in api/index.js)
+import pool from '../db';
-const pool = require('../db');
 
 //post a new LOA
 router.post("/", async (req, res) => {

api/src/routes/members.js

@@ -1,8 +1,7 @@
 const express = require('express');
 const router = express.Router();
 
-// DB pool (same as used in api/index.js)
+import pool from '../db';
-const pool = require('../db');
 
 //create a new user?
 router.post('/', async (req, res) => {

api/src/routes/ranks.js

@@ -2,7 +2,6 @@ const express = require('express');
 const r = express.Router();
 const ur = express.Router();
 const { getAllRanks, insertMemberRank } = require('../services/rankService')
-const pool = require('../db');
 
 //insert a new latest rank for a user
 ur.post('/', async (req, res) => {3

api/src/routes/roles.js

@@ -2,7 +2,7 @@ const express = require('express');
 const r = express.Router();
 const ur = express.Router();
 
-const pool = require('../db');
+import pool from '../db';
 
 //assign a member to a role
 ur.post('/', async (req, res) => {

api/src/routes/statuses.js

@@ -2,7 +2,7 @@ const express = require('express');
 const status = express.Router();
 const memberStatus = express.Router();
 
-const pool = require('../db');
+import pool from '../db';
 
 //insert a new latest rank for a user
 memberStatus.post('/', async (req, res) => {

api/src/services/calendarService.ts

@@ -79,7 +79,7 @@ export async function cancelEvent(eventID: number) {
 }
 
 
-export async function getEventsInRange(startDate: Date, endDate: Date) {
+export async function getShortEventsInRange(startDate: Date, endDate: Date) {
     const sql = `
         SELECT id, name, start, end, color
         FROM calendar_events
@@ -89,6 +89,29 @@ export async function getEventsInRange(startDate: Date, endDate: Date) {
     return await pool.query(sql, [startDate, endDate]);
 }
 
+export async function getEventDetails(eventID: number) {
+    const sql = `
+        SELECT 
+            e.id,
+            e.name,
+            e.start,
+            e.end,
+            e.location,
+            e.color,
+            e.description,
+            e.cancelled,
+            e.created_at,
+            e.updated_at,
+            m.id AS creator_id,
+            m.name AS creator_name
+        FROM calendar_events e
+        LEFT JOIN members m ON e.creator = m.id
+        WHERE e.id = ?
+    `;
+
+    return await pool.query(sql, [eventID])
+}
+
 export async function getUpcomingEvents(date: Date, limit: number) {
     const sql = `
         SELECT id, name, start, end, color
@@ -111,4 +134,18 @@ export async function setAttendanceStatus(memberID: number, eventID: number, sta
     await pool.query(sql, [memberID, eventID, status]);
 
     return { success: true }
+}
+
+export async function getEventAttendance(eventID: number) {
+    const sql = `
+        SELECT 
+            s.member_id,
+            s.status,
+            m.name AS member_name
+        FROM calendar_events_signups s
+        LEFT JOIN members m ON s.member_id = m.id
+        WHERE s.event_id = ?
+    `;
+
+    return await pool.query(sql, [eventID]);
 }

api/src/services/rankService.js

@@ -1,4 +1,4 @@
-const pool = require('../db');
+import pool from "../db";
 
 async function getAllRanks() {
     const rows = await pool.query(

ui/src/pages/Calendar.vue

@@ -26,6 +26,21 @@ function onDatesSet() {
     selectedYear.value = d.getFullYear()
 }
 
+function buildFullDate(month: number, year: number): Date {
+    return new Date(year, month, 1); //default to first of month
+}
+
+
+watch([selectedMonth, selectedYear], () => {
+    console.log('Selected date changed:', selectedMonth.value, selectedYear.value)
+
+    
+})
+
+onMounted(() => {
+    // fetchEventsFor(selectedMonth.value, selectedYear.value)
+})
+
 
 function goPrev() { api()?.prev() }
 function goNext() { api()?.next() }
@@ -141,6 +156,7 @@ watch(panelOpen, async () => {
 })
 
 
+
 const startFmt = new Intl.DateTimeFormat(undefined, {
     weekday: 'short', year: 'numeric', month: 'short', day: 'numeric',
     hour: 'numeric', minute: '2-digit'
@@ -213,7 +229,8 @@ const ext = computed(() => activeEvent.value?.extendedProps ?? {})
                             aria-label="Next month" @click="goNext">
                             <ChevronRight class="h-4 w-4" />
                         </button>
-                        <button class="cursor-pointer ml-1 rounded-md border px-3 py-1.5 text-sm hover:bg-muted/40" @click="goToday">
+                        <button class="cursor-pointer ml-1 rounded-md border px-3 py-1.5 text-sm hover:bg-muted/40"
+                            @click="goToday">
                             Today
                         </button>
                         <button