HospitalQ

A web-based hospital/clinic queue management system built as a single-page application. It can run directly from HTML files and synchronizes queue status across browser tabs on the same machine using localStorage and BroadcastChannel.

File Structure

• index.html – Main control panel for staff
• kiosk.html – Self-service ticket issuing page for patients
• display.html – Queue display screen
• assets/index.css and assets/index.js – Styles and logic for the main control panel
• assets/kiosk.css and assets/kiosk.js – Styles and logic for the Kiosk page
• assets/display.css and assets/display.js – Styles and logic for the Display screen
• index.html.bak – Backup file from the original project

Usage

Open index.html in a web browser to access the main control panel.

From there, use the system buttons to open the Kiosk and Display screens, or open the corresponding HTML files directly in the same browser or on the same machine.

When running directly from HTML files, the system stores and synchronizes queue data using the browser's local storage. If the application is started through the backend using npm start, all devices accessing the same URL will share and synchronize queue data through the server.

Running with Backend

The project includes a basic backend in server.js.

Start the server with:

npm start

Then open:

http://localhost:3000

System status page:

http://localhost:3000/status.html

Configure Promotional Images and Scrolling Messages

1. Open index.html
2. Go to Settings
3. Open the Promotional Images / TV Display Scrolling Message section
4. Save your changes

The display.html screen will automatically update through state synchronization.

Main API Endpoints

Get Queue State

GET /api/state

Returns the complete queue state.

Health Check

GET /api/health

Checks server status, storage status, and queue statistics.

Metrics

GET /api/metrics

Returns summarized queue metrics.

Backup Queue Data

GET /api/backup

Downloads the current queue state as a JSON file.

Create a New Ticket

POST /api/tickets

Example request:

{
  "deptId": "OPD",
  "priority": "normal"
}

Call Next Queue

POST /api/departments/OPD/call-next

Calls the next waiting queue in the specified department.

Complete a Queue

POST /api/tickets/A001/complete

Marks the specified queue ticket as completed.

Data Storage

Backend data is stored in:

data/queue-state.json

The frontend synchronizes queue data through:

PUT /api/state
GET /api/state

Validation After Modifications

Check JavaScript syntax with:

node --check assets/index.js
node --check assets/kiosk.js
node --check assets/display.js

Or run:

npm run check

HospitalQ

ระบบจัดการคิวโรงพยาบาล/คลินิกแบบเว็บหน้าเดียว ใช้งานได้จากไฟล์ HTML โดยเก็บสถานะและซิงก์หน้าจอบนเครื่องเดียวกันผ่าน localStorage และ BroadcastChannel

โครงสร้างไฟล์

• index.html หน้าควบคุมหลักสำหรับเจ้าหน้าที่
• kiosk.html หน้ารับบัตรคิวสำหรับผู้รับบริการ
• display.html หน้าจอแสดงผลคิว
• assets/index.css และ assets/index.js สไตล์และ logic ของหน้าควบคุมหลัก
• assets/kiosk.css และ assets/kiosk.js สไตล์และ logic ของหน้า Kiosk
• assets/display.css และ assets/display.js สไตล์และ logic ของหน้าจอแสดงผล
• index.html.bak ไฟล์สำรองจากโปรเจกต์เดิม

วิธีใช้งาน

เปิด index.html ในเบราว์เซอร์เพื่อเข้าใช้งานหน้าควบคุมหลัก จากนั้นใช้ปุ่มในระบบเพื่อเปิดหน้าจอ Kiosk และ Display หรือเปิดไฟล์เหล่านี้โดยตรงในเบราว์เซอร์เดียวกัน/เครื่องเดียวกัน

หากเปิดไฟล์ HTML โดยตรง ระบบยังใช้ browser storage ของเครื่องนั้นเป็นหลัก แต่ถ้ารันผ่าน backend ด้วย npm start ทุกเครื่องที่เปิด URL เดียวกันจะ sync สถานะคิวผ่าน server ได้

รันแบบมี Backend

ระบบมี backend เบื้องต้นใน server.js แล้ว รันได้ด้วย:

npm start

จากนั้นเปิด http://localhost:3000

หน้าตรวจระบบ: http://localhost:3000/status.html

ตั้งค่าภาพโปรโมต/ข้อความวิ่ง: เข้า index.html → เมนู ตั้งค่า → การ์ด ภาพโปรโมต / ข้อความวิ่งหน้าจอทีวี แล้วกดบันทึก จากนั้น display.html จะอัปเดตผ่าน state sync

API หลัก:

• GET /api/state ดูสถานะคิวทั้งหมด
• GET /api/health ตรวจ server, storage และคิวรวม
• GET /api/metrics ดูตัวเลขคิวแบบสั้น
• GET /api/backup ดาวน์โหลดข้อมูล state เป็นไฟล์ JSON
• POST /api/tickets สร้างคิวใหม่ เช่น { "deptId": "OPD", "priority": "normal" }
• POST /api/departments/OPD/call-next เรียกคิวถัดไป
• POST /api/tickets/A001/complete ปิดงานคิว

ข้อมูล backend จะถูกบันทึกที่ data/queue-state.json และ frontend จะ push/poll state ผ่าน PUT /api/state กับ GET /api/state

ตรวจสอบหลังแก้ไข

ใช้คำสั่งต่อไปนี้เพื่อตรวจ syntax ของ JavaScript:

node --check assets/index.js
node --check assets/kiosk.js
node --check assets/display.js

หรือใช้:

npm run check