Staff Attendance Tracker

\n {currentTime.toLocaleString()}\n

\n {error &&

{error}

}\n

\n setStaffName(e.target.value)}\n placeholder=\"Enter staff name\"\n />\n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n {records.map((record) => (\n \n \n \n \n \n \n \n \n ))}\n \n

Staff Name	Date	Check-In Time	Check-Out Time	Duration	Actions
{record.staffName}	{record.date}	{new Date(record.checkInTimestamp).toLocaleString()}	\n {record.checkOutTimestamp \n ? new Date(record.checkOutTimestamp).toLocaleString() \n : 'Not checked out'}\n	{formatDuration(record.duration)}	\n {!record.checkOutTimestamp && (\n \n )}\n

\n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"Attendance_Register\";\n const SCHEMA_VERSION = 3; // Increment schema version for new timestamp columns\n\n // Create table with timestamp columns\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_attendance_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n staffName TEXT NOT NULL,\n checkInTimestamp TEXT NOT NULL,\n checkOutTimestamp TEXT,\n date TEXT NOT NULL,\n duration INTEGER\n )\n `);\n\n // Handle check-in route\n if (request.method === 'POST' && new URL(request.url).pathname === '/checkin') {\n const { staffName } = await request.json();\n const currentDate = new Date().toISOString().split('T')[0];\n const checkInTimestamp = new Date().toISOString();\n\n // Check if staff has already checked in today without checking out\n const existingRecord = await sqlite.execute(`\n SELECT * FROM ${KEY}_attendance_${SCHEMA_VERSION} \n WHERE staffName = ? AND date = ? AND checkOutTimestamp IS NULL\n `, [staffName, currentDate]);\n\n if (existingRecord.rows.length > 0) {\n return Response.json({ success: false, message: 'Already checked in' }, { status: 400 });\n }\n\n await sqlite.execute(`\n INSERT INTO ${KEY}_attendance_${SCHEMA_VERSION} \n (staffName, checkInTimestamp, date) \n VALUES (?, ?, ?)\n `, [staffName, checkInTimestamp, currentDate]);\n\n return Response.json({ success: true });\n }\n\n // Handle check-out route\n if (request.method === 'POST' && new URL(request.url).pathname === '/checkout') {\n const { recordId } = await request.json();\n const checkOutTimestamp = new Date().toISOString();\n\n // Retrieve check-in timestamp to calculate duration\n const record = await sqlite.execute(`\n SELECT checkInTimestamp \n FROM ${KEY}_attendance_${SCHEMA_VERSION} \n WHERE id = ?\n `, [recordId]);\n\n if (record.rows.length > 0) {\n const checkInTime = new Date(record.rows[0].checkInTimestamp);\n const checkOutTime = new Date(checkOutTimestamp);\n const duration = checkOutTime.getTime() - checkInTime.getTime();\n\n await sqlite.execute(`\n UPDATE ${KEY}_attendance_${SCHEMA_VERSION} \n SET checkOutTimestamp = ?, duration = ?\n WHERE id = ? AND checkOutTimestamp IS NULL\n `, [checkOutTimestamp, duration, recordId]);\n }\n\n return Response.json({ success: true });\n }\n\n // Fetch records route\n if (request.method === 'GET' && new URL(request.url).pathname === '/records') {\n const result = await sqlite.execute(`\n SELECT * FROM ${KEY}_attendance_${SCHEMA_VERSION} \n ORDER BY id DESC \n LIMIT 50\n `);\n return Response.json(result.rows);\n }\n\n // Serve HTML\n return new Response(`\n \n \n Staff Attendance Tracker\n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f4f4f4;\n}\n\n.attendance-container {\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.current-time {\n text-align: center;\n font-size: 1.2em;\n margin-bottom: 20px;\n color: #666;\n}\n\nh1 {\n text-align: center;\n color: #333;\n}\n\n.check-in-section {\n display: flex;\n margin-bottom: 20px;\n}\n\ninput {\n flex-grow: 1;\n padding: 10px;\n margin-right: 10px;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\n\nbutton {\n padding: 10px 20px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\n.checkout-btn {\n background-color: #f44336;\n}\n\nbutton:hover {\n opacity: 0.9;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n}\n\ntable, th, td {\n border: 1px solid #ddd;\n}\n\nth, td {\n padding: 12px;\n text-align: left;\n}\n\nth {\n background-color: #f2f2f2;\n}\n\n.error {\n color: red;\n margin-bottom: 10px;\n text-align: center;\n}\n\n.source-link {\n display: block;\n text-align: center;\n margin-top: 20px;\n color: #666;\n text-decoration: none;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/HMDCreator/Attendance_Register/code/main.tsx","extension","actionData","errors"]