Add hamburger menu, settings accordion, and success confirmation

backend/.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+npm-debug.log
+Dockerfile
+.dockerignore
+.git
+.gitignore
+.env

backend/Dockerfile

@@ -0,0 +1,18 @@
+FROM node:24-alpine
+
+WORKDIR /app
+
+# Copy package.json and package-lock.json (or yarn.lock) to leverage Docker's layer caching
+COPY package*.json ./
+
+# Copy the rest of the application code
+COPY . .
+
+# Install dependencies
+RUN npm install && npx prisma generate && npm run build
+
+# Expose the port the app runs on
+EXPOSE 3000
+
+# Command to run the application when the container starts
+CMD ["npm", "start"]

backend/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "tsx watch --env-file=.env src/index.ts",
     "build": "tsc",
-    "start": "node dist/index.js",
+    "start": "node dist/src/index.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
@@ -16,9 +16,10 @@
   "dependencies": {
     "@fastify/autoload": "^6.3.1",
     "@fastify/cors": "^11.2.0",
+    "@fastify/sse": "^0.4.0",
     "@prisma/adapter-neon": "^7.2.0",
     "@prisma/client": "^7.2.0",
-    "fastify": "^5.6.2",
+    "fastify": "5.8.1",
     "fastify-type-provider-zod": "^6.1.0",
     "jose": "^6.1.3",
     "unique-names-generator": "^4.7.1",

backend/prisma/schema.prisma

@@ -8,24 +8,21 @@ datasource db {
 }
 
 model Admin {
-  id          Int    @id @default(autoincrement())
-  telegram_id String @unique
+  id          Int      @id @default(autoincrement())
+  telegram_id String   @unique
+  expiryDate  DateTime
 }
 
 model QueueConfig {
   id                 Int     @id @default(autoincrement())
   positionBeforePing Int
   isOpen             Boolean
+  eventName          String
+  venue              String
 }
 
 model Queue {
   name        String
   telegram_id String   @unique
   timeCreated DateTime
 }
-
-model AdminRequester {
-  id                Int    @id @default(autoincrement())
-  telegram_id       String @unique
-  telegram_username String
-}

backend/src/index.ts

@@ -8,9 +8,11 @@ import {
     serializerCompiler,
     type ZodTypeProvider
 } from 'fastify-type-provider-zod';
-import queueConfigPlugin from "./queueConfigPlugin.js";
 import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
+import fastifySSE from "@fastify/sse";
+import {queueHandlerPlugin} from "./queueHandlerPlugin.js";
+
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -28,10 +30,12 @@ fastify.setSerializerCompiler(serializerCompiler);
 await fastify.register(cors, {
     origin: true, // set this to frontend url for production
     methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'PATCH'],
-    allowedHeaders: ['Content-Type', 'Authorization', 'User-Id'],
+    allowedHeaders: ['Content-Type', 'Authorization', 'User-Id', 'last-event-id'],
     credentials: true,
 });
 
+await fastify.register(fastifySSE.default);
+
 const authHook = async (request: FastifyRequest, reply: FastifyReply) => {
 
     const secret = new TextEncoder().encode(
@@ -54,7 +58,7 @@ const authHook = async (request: FastifyRequest, reply: FastifyReply) => {
 // Init sql db connection
 fastify.register(prismaPlugin);
 // Register customs plugins
-fastify.register(queueConfigPlugin);
+fastify.register(queueHandlerPlugin);
 
 fastify.register((fastify) => {
 

backend/src/queueHandlerPlugin.ts

@@ -0,0 +1,115 @@
+import fp from 'fastify-plugin'
+import {type FastifyInstance, type FastifyPluginAsync} from 'fastify'
+import type {SSEReplyInterface} from "@fastify/sse";
+import type {QueueConfigModel} from "./generated/prisma/models/QueueConfig.js";
+import type {QueueModel} from "./generated/prisma/models/Queue.js";
+
+enum PayloadType {
+    CONFIG = "CFG",
+    LIST = "LST",
+}
+
+export class QueueHandler {
+
+    private users: SSEReplyInterface[]
+    private admins: SSEReplyInterface[]
+    private cacheConfig: QueueConfigModel | undefined;
+    private cacheEntries: QueueModel[] | undefined;
+    private fastify: FastifyInstance;
+
+    constructor(fastify: FastifyInstance) {
+        this.users = [];
+        this.admins = [];
+        this.fastify = fastify;
+        this.getQueueConfig();
+    }
+
+    public async updateQueue(transform: Promise<any>): Promise<QueueModel[]> {
+        return transform.then(async (_) => {
+            this.cacheEntries = await this.fastify.prisma.queue.findMany({
+                orderBy: {timeCreated: "asc"},
+            });
+            this.notify({type: PayloadType.LIST, data: null}, true);
+            this.notify({type: PayloadType.LIST, data: null}, false);
+            return this.cacheEntries;
+        });
+    }
+
+    public async getQueueEntries(): Promise<QueueModel[]> {
+        if (this.cacheEntries != null) {
+            return this.cacheEntries!;
+        }
+        try {
+            this.cacheEntries = await this.fastify.prisma.queue.findMany({
+                orderBy: {timeCreated: "asc"},
+            });
+        } catch (_) {
+            throw new Error("Failed to fetch queue entries");
+        }
+        return this.cacheEntries;
+    }
+
+    // QueueConfig should only be modified through this function to ensure synchronization
+    public async updateQueueConfig(config: QueueConfigModel): Promise<QueueConfigModel> {
+        return this.fastify.prisma.queueConfig.update({
+            where: {
+                id: config.id
+            },
+            data: config
+        }).then((result) => {
+            this.notify({type: PayloadType.CONFIG, data: result}, true);
+            this.notify({type: PayloadType.CONFIG, data: result}, false);
+            this.cacheConfig = result;
+            return result;
+        });
+    }
+
+    // QueueConfig should only be accessed through this function to reduce calls to DB
+    // force if true forces a db fetch
+    public async getQueueConfig(force?: boolean): Promise<QueueConfigModel> {
+        if (this.cacheConfig != null && !force) {
+            return this.cacheConfig!;
+        }
+        await this.fastify.prisma.queueConfig.findFirst().then((queueConfig) => {
+            if (queueConfig == null) {
+                throw new Error("No queue configured");
+            } else {
+                this.cacheConfig = queueConfig;
+            }
+        });
+        return this.cacheConfig!;
+    }
+
+    public addConnection(conn: SSEReplyInterface, isAdmin: boolean): void {
+        if (isAdmin) {
+            this.admins.push(conn);
+        } else {
+            this.users.push(conn);
+        }
+    }
+
+    private notify(payload: any, admin: boolean) : void {
+
+        this.users = this.users.filter((conn: SSEReplyInterface) => conn.isConnected);
+        this.admins = this.admins.filter((conn: SSEReplyInterface) => conn.isConnected);
+
+        (admin ? this.admins : this.users).forEach((conn: SSEReplyInterface) => {
+            conn.send({
+                id: "1",
+                event: 'update',
+                data: payload,
+            });
+        })
+
+    }
+
+}
+
+export const queueHandlerPlugin: FastifyPluginAsync = fp(async (fastify, _) => {
+
+    let queueHandler = new QueueHandler(fastify);
+
+    fastify.decorate('queueHandler', queueHandler);
+
+})
+