CA Revalidation B10 - Static Offline App

แอปพลิเคชันแบบ Static Web App สำหรับจัดการการสุ่มตัวอย่าง CA (Compressed Air) ในอาคาร B.10 แบบทำงานแบบ Offline เต็มรูปแบบ

✨ คุณสมบัติ

🎯 ฟีเจอร์หลัก

• 📱 Responsive Design: ออกแบบให้ใช้งานได้ทั้งบนมือถือและคอมพิวเตอร์
• 🔄 Offline First: ทำงานได้โดยไม่ต้องเชื่อมต่ออินเทอร์เน็ต
• 💾 Local Storage: บันทึกข้อมูลในเครื่องอัตโนมัติ
• 📊 Real-time Updates: อัปเดตข้อมูลแบบเรียลไทม์
• 🎨 Modern UI: อินเทอร์เฟซที่สวยงามและใช้งานง่าย

🏷️ การจัดการข้อมูล

• Tab แยกสถานะ: แยกเป็น "ยังไม่สุ่ม" และ "สุ่มแล้ว"
• ตัวกรองขั้นสูง: กรองตามชั้น (Floor) และสถานะการใช้งาน
• เรียงลำดับอัตโนมัติ: เรียงตามหมายเลขห้อง
• Circle Checkbox: สลับสถานะการสุ่มตัวอย่างได้ง่าย
• การแจ้งเตือน: แสดงข้อความเมื่ออัปเดตสำเร็จ

🚀 วิธีการใช้งาน

1. เปิดแอป

# เปิดไฟล์ index.html ในเบราว์เซอร์
# หรือรัน local server
python -m http.server 8000
# แล้วเปิด http://localhost:8000

2. การใช้งานเบื้องต้น

1. เลือก Tab: เลือกดูข้อมูลที่ "ยังไม่สุ่ม" หรือ "สุ่มแล้ว"
2. กรองข้อมูล: ใช้ตัวกรองตามชั้นและสถานะการใช้งาน
3. สลับสถานะ: กดที่ Circle Checkbox เพื่อเปลี่ยนสถานะการสุ่ม
4. ติดตั้งแอป: บนมือถือ สามารถติดตั้งเป็น PWA ได้

3. การติดตั้งเป็น PWA (บนมือถือ)

1. เปิดใน Chrome/Safari บนมือถือ
2. กดเมนู (⋮) > "เพิ่มไปยังหน้าจอหลัก"
3. แอปจะติดตั้งและทำงานเหมือนแอปจริง

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

static-app/
├── index.html          # หน้าเว็บหลัก
├── styles.css          # สไตล์ CSS
├── app.js             # JavaScript หลัก
├── data.js            # ข้อมูลจาก CSV
├── manifest.json      # PWA Manifest
├── service-worker.js  # Service Worker สำหรับ Offline
└── README.md          # ไฟล์นี้

🛠️ เทคโนโลยีที่ใช้

• HTML5: โครงสร้างเว็บ
• CSS3: สไตล์และ Responsive Design
• Vanilla JavaScript: ฟังก์ชันการทำงาน
• Local Storage: เก็บข้อมูลในเครื่อง
• Service Worker: Offline Capability
• PWA: Progressive Web App

📊 ข้อมูลที่แสดง

แต่ละการ์ดห้องจะแสดง:

• หมายเลขห้อง (Room No.)
• แท็กฟิลเตอร์ปลอดเชื้อ (Sterile Filter Tag)
• ชื่อห้อง/อุปกรณ์
• ชั้น (Floor)
• สถานะการใช้งาน (มีการใช้งาน/ไม่มีการใช้งาน)
• วันที่สุ่มตัวอย่าง

🔧 การปรับแต่ง

เพิ่มข้อมูลใหม่

แก้ไขไฟล์ data.js และเพิ่ม object ใหม่ใน array caRevalidationData

ปรับแต่งสไตล์

แก้ไขไฟล์ styles.css เพื่อเปลี่ยนสีหรือเลย์เอาต์

เพิ่มฟีเจอร์ใหม่

แก้ไขไฟล์ app.js เพื่อเพิ่มฟังก์ชันใหม่

🌐 การ Deploy

วิธีที่ 1: GitHub Pages

1. Upload โฟลเดอร์ static-app ขึ้น GitHub
2. เปิด Settings > Pages
3. เลือก Branch และโฟลเดอร์เป็น /
4. แชร์ลิงก์ที่ได้

วิธีที่ 2: Netlify/Vercel

1. Upload โฟลเดอร์ขึ้น Git
2. เชื่อมต่อกับ Netlify หรือ Vercel
3. Deploy อัตโนมัติ

วิธีที่ 3: Local Server

# ใช้ Python
python -m http.server 8000

# ใช้ Node.js
npx serve .

📱 การใช้งานบนมือถือ

Android

• เปิด Chrome > ไปที่ URL
• กด ⋮ > "เพิ่มไปยังหน้าจอหลัก"
• แอปจะติดตั้งและแสดงไอคอน

iOS

• เปิด Safari > ไปที่ URL
• กด Share > "เพิ่มไปยังหน้าจอหลัก"
• แอปจะติดตั้งและแสดงไอคอน

🔒 ความปลอดภัย

• ข้อมูลทั้งหมดเก็บในเครื่อง (Local Storage)
• ไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์
• ทำงานได้แบบ Offline 100%
• ไม่ต้องการอินเทอร์เน็ตในการใช้งาน

🐛 การแก้ปัญหา

แอปไม่โหลดข้อมูล

• ล้าง Cache ของเบราว์เซอร์
• ล้าง Local Storage
• รีโหลดหน้าเว็บ

PWA ไม่ติดตั้งได้

• ตรวจสอบ HTTPS (จำเป็นสำหรับ PWA)
• ตรวจสอบ Service Worker ทำงานปกติ
• ลองใช้เบราว์เซอร์อื่น

📞 การสนับสนุน

หากพบปัญหาหรือต้องการปรับแต่งเพิ่มเติม สามารถ:

1. ตรวจสอบ Console ใน Developer Tools
2. ดู Error ใน Network Tab
3. แก้ไขโค้ดตามความเหมาะสม

---

พัฒนาโดย: CA Revalidation Team เวอร์ชัน: 1.0.0 วันที่: September 2025