【開源解析】基于HTML5的智能會議室預約系統開發全攻略：從零構建企業級管理平臺

🚀 【開源解析】基于HTML5的智能會議室預約系統開發全攻略：從零構建企業級管理平臺

在這里插入圖片描述
請添加圖片描述

🌈 個人主頁：創客白澤 - CSDN博客
💡 熱愛不止于代碼，熱情源自每一個靈感閃現的夜晚。愿以開源之火，點亮前行之路。
🐋 希望大家多多支持，我們一起進步！
👍 🎉如果文章對你有幫助的話，歡迎點贊 👍🏻 評論 💬 收藏 ?? 加關注+💗分享給更多人哦

請添加圖片描述
在這里插入圖片描述

📌 概述：現代辦公場景的會議管理痛點與解決方案

在當今快節奏的企業環境中，會議室資源的高效管理已成為提升組織效能的關鍵環節。傳統紙質登記或簡單電子表格的預約方式存在諸多弊端：

資源沖突頻發 - 約40%的企業每周都會出現會議室雙重預訂
利用率低下 - 平均會議室使用率不足60%，存在大量閑置時段
管理成本高 - 行政人員需花費15%工作時間處理預約協調

本文介紹的智能會議室預約系統采用純前端技術棧（HTML5+CSS3+JavaScript），具備以下突破性優勢：

? 可視化時間選擇 - 直觀展示可用時段，避免沖突
? 實時狀態監控 - 大屏展示當前會議進度和下一會議信息
? 多維度管理 - 支持會議室管理、預約審核、數據導出
? 響應式設計 - 完美適配PC、平板和移動設備

系統架構圖如下：

🛠? 核心功能詳解

1. 智能預約系統

三維度沖突檢測（會議室/時間/人員）
拖拽式時間選擇（支持半小時粒度）
7天預約日歷（色塊化顯示繁忙度）
自動郵件提醒（會議前15分鐘觸發）

2. 狀態展示大屏

在這里插入圖片描述

3. 管理后臺

多條件篩選（日期/會議室/狀態）
批量操作（導出/刪除/修改）
數據可視化（使用率統計圖表

3.1 會議室管理界面

在這里插入圖片描述

3.2 預約管理頁面

在這里插入圖片描述

🎨 界面展示與交互邏輯

動態時間選擇器

function generateTimeOptions() {const times = ['08:00','08:30','09:00'...];times.forEach(time => {const isBooked = checkBookingConflict(time);// 生成帶狀態的DOM元素});
}

實時沖突檢測算法

function checkConflict(newStart, newEnd, existing) {return existing.some(item => newStart < item.end && newEnd > item.start);
}

狀態大屏動效實現

CSS3動畫：會議進度條使用漸變背景+寬度過渡
實時時鐘：利用Canvas繪制動態表盤
數據更新：WebSocket實現秒級同步

🔧 部署與使用指南

開發環境搭建

安裝VS Code及相關插件

Extensions:
- Live Server
- Prettier
- ESLint

項目目錄結構

/meeting-room-booking
├── index.html        # 主界面
├── style.css         # 樣式文件
├── script.js         # 業務邏輯
└── assets/           # 靜態資源

關鍵配置項

配置項	路徑	說明
工作時間	script.js L120	修改times數組調整
管理員密碼	script.js L980	建議生產環境修改
數據存儲	localStorage	可替換為IndexedDB

🧠 深度代碼解析

1. 數據持久化方案

// 使用localStorage存儲預約數據
function saveReservations() {localStorage.setItem('meetingReservations', JSON.stringify(reservations));
}// 支持導出為Excel
function exportToExcel() {const ws = XLSX.utils.json_to_sheet(reservations);XLSX.writeFile(ws, "預約記錄.xlsx");
}

2. 響應式布局實現

/* 移動端適配 */
@media (max-width: 768px) {.reservation-item {grid-template-columns: 1fr;}.reservation-item > div::before {content: attr(data-label);font-weight: bold;}
}

3. 狀態管理機制

在這里插入圖片描述

💾 源碼下載與二次開發

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>會議室預約系統</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><style>:root {--primary: #1a2a6c;--secondary: #b21f1f;--accent: #38a169;--light: #f8f9fa;--dark: #2c3e50;--gray: #6c757d;--light-gray: #e9ecef;}* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}body {background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);color: #333;min-height: 100vh;padding: 20px;}.container {max-width: 1200px;margin: 0 auto;}header {text-align: center;padding: 20px 0;color: white;margin-bottom: 30px;}header h1 {font-size: 2.5rem;margin-bottom: 10px;text-shadow: 0 2px 4px rgba(0,0,0,0.3);}header p {font-size: 1.2rem;opacity: 0.9;}.app-container {display: grid;grid-template-columns: 1fr 1fr;gap: 25px;}@media (max-width: 900px) {.app-container {grid-template-columns: 1fr;}}.card {background: rgba(255, 255, 255, 0.92);border-radius: 15px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);padding: 25px;transition: transform 0.3s ease;}.card:hover {transform: translateY(-5px);}.card-title {display: flex;align-items: center;margin-bottom: 20px;padding-bottom: 15px;border-bottom: 2px solid #e0e0e0;color: var(--dark);}.card-title i {margin-right: 12px;font-size: 1.8rem;color: var(--primary);}.form-group {margin-bottom: 20px;}label {display: block;margin-bottom: 8px;font-weight: 600;color: var(--dark);}input, select {width: 100%;padding: 14px;border: 2px solid #ddd;border-radius: 8px;font-size: 1rem;transition: border-color 0.3s;}input:focus, select:focus {border-color: var(--primary);outline: none;box-shadow: 0 0 0 3px rgba(26, 42, 108, 0.2);}.time-container {display: grid;grid-template-columns: 1fr 1fr;gap: 15px;margin-top: 10px;}.time-input-group {position: relative;}.time-input-group i {position: absolute;right: 15px;top: 50%;transform: translateY(-50%);color: var(--gray);}.btn {display: block;width: 100%;padding: 15px;background: var(--primary);color: white;border: none;border-radius: 8px;font-size: 1.1rem;font-weight: 600;cursor: pointer;transition: background 0.3s;margin-top: 20px;}.btn:hover {background: #142255;}.btn:active {transform: scale(0.98);}.display-screen {background: var(--primary);color: white;border-radius: 15px;padding: 30px;min-height: 500px;display: flex;flex-direction: column;}.current-room {font-size: 2.2rem;font-weight: bold;text-align: center;margin-bottom: 30px;text-shadow: 0 2px 4px rgba(0,0,0,0.3);}.current-time {font-size: 5rem;text-align: center;font-weight: 700;margin: 20px 0;letter-spacing: 2px;text-shadow: 0 4px 6px rgba(0,0,0,0.3);}.current-date {font-size: 1.5rem;text-align: center;margin-bottom: 40px;opacity: 0.9;}.current-event {background: rgba(255, 255, 255, 0.15);border-radius: 12px;padding: 25px;margin-bottom: 25px;}.next-event {background: rgba(255, 255, 255, 0.1);border-radius: 12px;padding: 20px;}.event-title {font-size: 1.8rem;margin-bottom: 15px;display: flex;align-items: center;}.event-title i {margin-right: 10px;}.event-details {display: flex;justify-content: space-between;font-size: 1.2rem;flex-wrap: wrap;}.event-time {width: 100%;margin-bottom: 10px;font-weight: 500;}.no-event {text-align: center;font-size: 1.3rem;opacity: 0.8;padding: 20px;}.reservations-list {margin-top: 30px;background: rgba(255, 255, 255, 0.92);border-radius: 15px;padding: 25px;}.reservations-list h3 {margin-bottom: 20px;color: var(--dark);padding-bottom: 15px;border-bottom: 2px solid #e0e0e0;display: flex;align-items: center;}.reservations-list h3 i {margin-right: 10px;color: var(--primary);}.reservation-item {padding: 15px;border-bottom: 1px solid #eee;display: grid;grid-template-columns: 1.5fr 3fr 1.5fr 1.5fr;align-items: center;}.reservation-item:last-child {border-bottom: none;}.reservation-item:hover {background: #f9f9f9;}.reservation-time {font-weight: bold;color: var(--primary);}.reservation-title {font-weight: 500;}.reservation-booker {text-align: right;font-style: italic;color: #666;}.status-indicator {height: 12px;width: 12px;border-radius: 50%;display: inline-block;margin-right: 8px;}.status-upcoming {background: var(--accent);}.status-current {background: #3182ce;}.status-past {background: #a0aec0;}.confirmation {background: var(--accent);color: white;padding: 20px;border-radius: 10px;margin-top: 20px;text-align: center;display: none;}.room-availability {background: #f8f9fa;border-radius: 8px;padding: 15px;margin-top: 15px;border-left: 4px solid var(--accent);}.availability-title {font-weight: 600;margin-bottom: 8px;color: var(--dark);}.availability-list {display: flex;flex-wrap: wrap;gap: 10px;}.availability-badge {background: #e2f0ea;color: var(--accent);padding: 5px 10px;border-radius: 20px;font-size: 0.9rem;display: flex;align-items: center;}.availability-badge i {margin-right: 5px;}footer {text-align: center;color: white;margin-top: 40px;padding: 20px;font-size: 0.9rem;opacity: 0.8;}.time-error {color: #e53e3e;font-size: 0.9rem;margin-top: 5px;display: none;}.room-info {display: flex;align-items: center;margin-top: 5px;font-size: 0.9rem;color: var(--gray);}.room-info i {margin-right: 5px;}.time-selector {display: flex;flex-direction: column;gap: 10px;max-height: 300px;overflow-y: auto;padding: 10px;border: 1px solid #ddd;border-radius: 8px;margin-top: 10px;}.time-option {padding: 10px;background: #f0f4f8;border-radius: 6px;text-align: center;cursor: pointer;transition: all 0.2s;border: 1px solid #cbd5e0;position: relative;}.time-option:hover {background: #e2e8f0;}.time-option.selected {background: var(--primary);color: white;border-color: var(--primary);}.time-option.booked {background: #e53e3e;color: white;border-color: #c53030;cursor: not-allowed;}.time-option.booked::after {content: "已預約";position: absolute;top: 0;right: 0;background: rgba(0,0,0,0.3);font-size: 0.7rem;padding: 2px 5px;border-radius: 0 6px 0 6px;}.time-picker-container {display: grid;grid-template-columns: 1fr 1fr;gap: 15px;}.time-picker {border: 1px solid #ddd;border-radius: 8px;padding: 10px;}.time-picker-title {text-align: center;font-weight: 600;margin-bottom: 10px;color: var(--dark);}.time-input-group {margin-bottom: 15px;}.conflict-error {background: #fee2e2;color: #b91c1c;padding: 15px;border-radius: 8px;margin-top: 15px;display: none;}.in-session {color: #38a169;font-size: 0.9rem;margin-left: 8px;font-weight: bold;display: inline-block;padding: 2px 8px;background: rgba(56, 161, 105, 0.15);border-radius: 4px;}.view-display {display: flex;justify-content: center;margin-top: 20px;}.view-display-btn {padding: 12px 25px;background: var(--accent);color: white;border: none;border-radius: 50px;font-weight: 600;cursor: pointer;transition: all 0.3s;display: flex;align-items: center;}.view-display-btn i {margin-right: 8px;}.view-display-btn:hover {background: #2d8555;transform: translateY(-2px);box-shadow: 0 5px 15px rgba(0,0,0,0.2);}/* 狀態顯示屏樣式 */.status-display {width: 100%;max-width: 800px;background: rgba(0, 15, 46, 0.8);border-radius: 20px;box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);padding: 30px;margin: 50px auto;color: white;position: relative;overflow: hidden;display: none;}.status-display .header {text-align: center;margin-bottom: 30px;position: relative;}.status-display .header h1 {font-size: 2.8rem;margin-bottom: 10px;text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);letter-spacing: 2px;}.status-display .room-name {display: inline-block;background: rgba(255, 255, 255, 0.15);padding: 10px 25px;border-radius: 50px;margin-top: 15px;font-weight: 600;font-size: 1.4rem;backdrop-filter: blur(5px);border: 1px solid rgba(255, 255, 255, 0.1);}.status-display .time-display {text-align: center;margin: 30px 0;}.status-display .current-time {font-size: 5.5rem;font-weight: 800;letter-spacing: 3px;text-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);margin-bottom: 10px;font-variant-numeric: tabular-nums;}.status-display .current-date {font-size: 1.8rem;opacity: 0.9;margin-bottom: 40px;}.status-display .status-section {background: rgba(255, 255, 255, 0.1);border-radius: 15px;padding: 25px;margin-bottom: 25px;backdrop-filter: blur(5px);border: 1px solid rgba(255, 255, 255, 0.1);position: relative;overflow: hidden;}.status-display .status-section::before {content: "";position: absolute;top: 0;left: 0;width: 8px;height: 100%;background: linear-gradient(to bottom, #38a169, #1a2a6c);}.status-display .status-header {display: flex;align-items: center;margin-bottom: 20px;}.status-display .status-header i {font-size: 2rem;margin-right: 15px;width: 50px;height: 50px;background: rgba(56, 161, 105, 0.2);display: flex;align-items: center;justify-content: center;border-radius: 50%;}.status-display .status-title {font-size: 2rem;font-weight: 600;}.status-display .in-session {background: rgba(56, 161, 105, 0.3);color: #a0f0c0;padding: 5px 15px;border-radius: 20px;font-size: 1.2rem;margin-left: 15px;display: inline-flex;align-items: center;}.status-display .in-session i {font-size: 0.9rem;margin-right: 5px;}.status-display .event-details {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;margin-top: 20px;}.status-display .detail-card {background: rgba(255, 255, 255, 0.08);border-radius: 12px;padding: 20px;}.status-display .detail-label {font-size: 1.1rem;opacity: 0.8;margin-bottom: 8px;display: flex;align-items: center;}.status-display .detail-label i {margin-right: 8px;font-size: 1.1rem;}.status-display .detail-value {font-size: 1.7rem;font-weight: 600;}.status-display .time-range {font-size: 2.2rem;font-weight: 700;text-align: center;margin: 15px 0;letter-spacing: 1px;font-variant-numeric: tabular-nums;}.status-display .progress-container {height: 8px;background: rgba(255, 255, 255, 0.1);border-radius: 10px;overflow: hidden;margin: 20px 0;}.status-display .progress-bar {height: 100%;background: linear-gradient(to right, #38a169, #2c7a4d);border-radius: 10px;}.status-display .next-event {background: rgba(255, 255, 255, 0.08);border-radius: 15px;padding: 25px;backdrop-filter: blur(5px);border: 1px solid rgba(255, 255, 255, 0.1);}.status-display .next-header {display: flex;align-items: center;margin-bottom: 20px;}.status-display .next-header i {font-size: 1.8rem;margin-right: 15px;width: 45px;height: 45px;background: rgba(26, 92, 169, 0.2);display: flex;align-items: center;justify-content: center;border-radius: 50%;}.status-display .next-title {font-size: 1.8rem;font-weight: 600;}.status-display .no-events {text-align: center;padding: 40px 20px;}.status-display .no-events i {font-size: 4rem;opacity: 0.3;margin-bottom: 20px;}.status-display .no-events p {font-size: 1.8rem;opacity: 0.7;}.status-display .footer {text-align: center;margin-top: 40px;padding-top: 20px;border-top: 1px solid rgba(255, 255, 255, 0.1);font-size: 1.1rem;opacity: 0.7;}/* 動畫效果 */@keyframes pulse {0% { opacity: 0.7; }50% { opacity: 1; }100% { opacity: 0.7; }}.status-display .in-session {animation: pulse 2s infinite;}/* 響應式設計 */@media (max-width: 768px) {.status-display .header h1 {font-size: 2.2rem;}.status-display .current-time {font-size: 4rem;}.status-display .current-date {font-size: 1.5rem;}.status-display .event-details {grid-template-columns: 1fr;}.status-display .time-range {font-size: 1.8rem;}.status-display .status-title, .next-title {font-size: 1.6rem;}}@media (max-width: 480px) {.status-display {padding: 20px;}.status-display .header h1 {font-size: 1.8rem;}.status-display .current-time {font-size: 3rem;}.status-display .room-name {font-size: 1.2rem;padding: 8px 20px;}}.switch-container {display: flex;justify-content: center;gap: 15px;margin-bottom: 30px;flex-wrap: wrap;}.switch-btn {padding: 12px 20px;background: rgba(255, 255, 255, 0.1);color: white;border: 2px solid rgba(255, 255, 255, 0.2);border-radius: 25px;cursor: pointer;transition: all 0.3s ease;font-size: 1rem;font-weight: 600;backdrop-filter: blur(10px);}.switch-btn:hover {background: rgba(255, 255, 255, 0.2);border-color: rgba(255, 255, 255, 0.4);transform: translateY(-2px);}.switch-btn i {margin-right: 8px;}/* 預約管理頁面樣式 */.reservation-management {display: none;background: rgba(255, 255, 255, 0.92);border-radius: 15px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);padding: 25px;margin-bottom: 30px;}.reservation-management-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px;flex-wrap: wrap;gap: 15px;}.reservation-management-title {display: flex;align-items: center;color: var(--dark);}.reservation-management-title i {margin-right: 12px;font-size: 1.8rem;color: var(--primary);}.reservation-management-title h2 {font-size: 1.8rem;margin: 0;}.reservation-filters {display: flex;gap: 15px;align-items: center;flex-wrap: wrap;}.filter-select, .search-input {padding: 10px 15px;border: 2px solid #ddd;border-radius: 8px;font-size: 0.9rem;background: white;transition: border-color 0.3s;}.filter-select:focus, .search-input:focus {border-color: var(--primary);outline: none;box-shadow: 0 0 0 3px rgba(26, 42, 108, 0.1);}.search-input {min-width: 200px;}.reservation-stats {display: grid;grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));gap: 20px;margin-bottom: 25px;}.stat-card {background: linear-gradient(135deg, var(--primary), var(--secondary));color: white;padding: 20px;border-radius: 12px;text-align: center;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);}.stat-number {font-size: 2rem;font-weight: bold;margin-bottom: 5px;}.stat-label {font-size: 0.9rem;opacity: 0.9;}.reservation-list {background: white;border-radius: 12px;overflow: hidden;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}.reservation-item {display: grid;grid-template-columns: 1fr 1fr 1fr 2fr 1fr 1fr 1fr;gap: 15px;padding: 15px 20px;align-items: center;border-bottom: 1px solid #eee;transition: background-color 0.3s;}.reservation-item:hover {background-color: #f8f9fa;}.reservation-item-header {background: var(--primary);color: white;font-weight: 600;border-bottom: none;}.reservation-item-header:hover {background: var(--primary);}.reservation-item:last-child {border-bottom: none;}.reservation-status {padding: 4px 12px;border-radius: 20px;font-size: 0.8rem;font-weight: 600;text-align: center;}.status-upcoming {background: #e3f2fd;color: #1976d2;}.status-current {background: #e8f5e8;color: #388e3c;}.status-past {background: #f5f5f5;color: #757575;}.reservation-actions {display: flex;gap: 8px;}.action-btn {padding: 6px 12px;border: none;border-radius: 6px;cursor: pointer;font-size: 0.8rem;font-weight: 600;transition: all 0.3s;}.btn-edit {background: #2196f3;color: white;}.btn-edit:hover {background: #1976d2;}.btn-delete {background: #f44336;color: white;}.btn-delete:hover {background: #d32f2f;}.no-reservations {text-align: center;padding: 60px 20px;color: var(--gray);}.no-reservations i {font-size: 3rem;margin-bottom: 15px;opacity: 0.5;}.no-reservations p {font-size: 1.1rem;}@media (max-width: 768px) {.reservation-item {grid-template-columns: 1fr;gap: 8px;padding: 15px;}.reservation-item-header {display: none;}.reservation-item > div {display: flex;justify-content: space-between;align-items: center;}.reservation-item > div::before {content: attr(data-label);font-weight: 600;color: var(--gray);}.reservation-filters {flex-direction: column;align-items: stretch;}.filter-select, .search-input {width: 100%;}}/* 會議室管理頁面樣式 */.room-management {background: rgba(255, 255, 255, 0.92);border-radius: 15px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);padding: 25px;display: none;margin-top: 25px;}.room-management-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px;padding-bottom: 15px;border-bottom: 2px solid #e0e0e0;}.room-management-title {display: flex;align-items: center;color: var(--dark);}.room-management-title i {margin-right: 12px;font-size: 1.8rem;color: var(--primary);}.room-list {margin-bottom: 30px;max-height: 500px;overflow-y: auto;}.room-item {display: grid;grid-template-columns: 1fr 80px 1fr 80px 120px;padding: 15px;border-bottom: 1px solid #eee;align-items: center;}.room-item-header {font-weight: 700;background: var(--light-gray);border-radius: 8px;}.room-item:hover {background: #f9f9f9;}.room-actions {display: flex;gap: 10px;}.room-action-btn {display: inline-flex;align-items: center;gap: 6px;padding: 6px 16px;border-radius: 8px;cursor: pointer;font-weight: 500;font-size: 1rem;border: none;white-space: nowrap;transition: background 0.2s, box-shadow 0.2s;box-shadow: 0 2px 6px rgba(0,0,0,0.04);}.edit-room-btn {background: #2196f3;color: #fff;}.edit-room-btn:hover {background: #1769aa;}.delete-room-btn {background: #f44336;color: #fff;}.delete-room-btn:hover {background: #b71c1c;}.room-action-btn:hover {opacity: 0.9;transform: translateY(-2px);}.room-form-container {background: rgba(240, 244, 248, 0.8);border-radius: 12px;padding: 25px;border-left: 4px solid var(--accent);}.form-title {margin-bottom: 20px;display: flex;align-items: center;color: var(--dark);}.form-title i {margin-right: 10px;color: var(--primary);}.form-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 20px;}.form-actions {display: flex;gap: 15px;margin-top: 20px;}.btn-secondary {background: var(--gray);}.btn-secondary:hover {background: #5a6268;}.no-rooms {text-align: center;padding: 40px 20px;color: var(--gray);font-size: 1.1rem;}.no-rooms i {font-size: 3rem;margin-bottom: 15px;opacity: 0.5;}.equipment-list {display: flex;flex-wrap: wrap;gap: 8px;margin-top: 8px;}.equipment-tag {background: #e2f0ea;color: var(--accent);padding: 4px 10px;border-radius: 20px;font-size: 0.85rem;display: inline-flex;align-items: center;}.equipment-tag i {margin-right: 5px;font-size: 0.8rem;}#addRoomBtn {min-width: 120px;width: auto;padding-left: 24px;padding-right: 24px;display: inline-block;margin-left: auto;margin-right: 0;}@media (max-width: 768px) {.room-item {grid-template-columns: 1fr;gap: 8px;padding: 15px;}.room-item-header {display: none;}.room-item > div {display: flex;justify-content: space-between;align-items: center;}.room-item > div::before {content: attr(data-label);font-weight: 600;color: var(--gray);}.room-management-header {flex-direction: column;align-items: stretch;gap: 15px;}#addRoomBtn {margin-left: 0;width: 100%;}}#reservationsContainer {margin-top: 10px;}.today-reservation-row {display: grid;grid-template-columns: 140px 2fr 120px 100px;align-items: center;padding: 10px 0;border-bottom: 1px solid #f0f0f0;background: transparent;font-size: 1.05rem;}.today-reservation-row:last-child {border-bottom: none;}.today-reservation-time {display: flex;align-items: center;font-weight: bold;color: #222;gap: 8px;justify-content: center;}.dot {display: inline-block;width: 12px;height: 12px;border-radius: 50%;margin-right: 6px;}.status-ongoing {background: #38a169; /* 綠色 */}.status-upcoming {background: #e53e3e; /* 紅色 */}.status-ended {background: #bdbdbd; /* 灰色 */}.today-reservation-title {color: #222;text-align: center;}.today-reservation-room,.today-reservation-booker {text-align: center;/* 可選：讓內容稍微離左邊遠一點 */padding-left: 8px;}/* 7天預約狀態日歷樣式 */.calendar-container {background: rgba(255, 255, 255, 0.1);border-radius: 12px;padding: 20px;margin-bottom: 25px;}.calendar-title {font-size: 1.3rem;font-weight: 600;text-align: center;margin-bottom: 15px;color: #f6c343;}.calendar-grid {display: grid;grid-template-columns: repeat(7, 1fr);gap: 8px;}.calendar-day {text-align: center;padding: 8px 4px;border-radius: 8px;background: rgba(255, 255, 255, 0.05);position: relative;}.calendar-date {font-size: 0.9rem;font-weight: 600;margin-bottom: 4px;}.calendar-weekday {font-size: 0.75rem;opacity: 0.8;margin-bottom: 6px;}.calendar-status {width: 12px;height: 12px;border-radius: 50%;margin: 0 auto;position: relative;}.status-available {background: #38a169;}.status-partial {background: #f6c343;}.status-booked {background: #e53e3e;}.status-today {background: #3182ce;}.calendar-day.today {background: rgba(49, 130, 206, 0.2);border: 1px solid rgba(49, 130, 206, 0.4);}.calendar-day:hover {background: rgba(255, 255, 255, 0.1);transform: translateY(-1px);transition: all 0.2s ease;}</style><script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js" defer></script>
</head>
<body><div class="container"><div style="position: absolute; top: 20px; right: 30px; z-index: 999;"><input type="file" id="bgUpload" accept="image/*" style="display:none;"><button id="bgUploadBtn" class="btn btn-secondary" style="padding:4px 12px;font-size:0.95rem;">上傳背景</button><button id="bgResetBtn" class="btn btn-secondary" style="padding:4px 12px;font-size:0.95rem;">恢復默認</button></div><div class="switch-container"><button id="showBookingBtn" class="switch-btn"><i class="fas fa-calendar-plus"></i> 預約系統</button><button id="showDisplayBtn" class="switch-btn"><i class="fas fa-tv"></i> 狀態顯示屏</button><button id="showManagementBtn" class="switch-btn"><i class="fas fa-cog"></i> 會議室管理</button><button id="showReservationManagementBtn" class="switch-btn"><i class="fas fa-list-alt"></i> 預約管理</button></div><div id="bookingSystem"><header><h1><i class="fas fa-calendar-alt"></i> 會議室預約系統</h1><p>輕松預約 · 高效協作 · 智能管理</p></header><div class="app-container"><div class="card"><div class="card-title"><i class="fas fa-book"></i><h2>會議室預約</h2></div><form id="bookingForm"><div class="form-group"><label for="meetingRoom">選擇會議室</label><select id="meetingRoom" required><option value="">-- 請選擇會議室 --</option><option value="room1">會議室 1 (創新廳, 8人)</option><option value="room2">會議室 2 (協作廳, 12人)</option><option value="room3">會議室 3 (決策廳, 6人)</option><option value="room4">會議室 4 (創意空間, 10人)</option></select></div><div class="form-group"><label for="bookingDate">選擇日期</label><input type="date" id="bookingDate" required></div><div class="form-group"><label>選擇時間段 (整點/半點)</label><div class="time-picker-container"><div class="time-picker"><div class="time-picker-title">開始時間</div><div class="time-selector" id="startTimeSelector"><!-- 開始時間選項將在這里生成 --></div></div><div class="time-picker"><div class="time-picker-title">結束時間</div><div class="time-selector" id="endTimeSelector"><!-- 結束時間選項將在這里生成 --></div></div></div><div class="time-input-group"><div class="time-error" id="timeError"><i class="fas fa-exclamation-circle"></i> 結束時間必須晚于開始時間</div><div id="selectedTimeDisplay">已選擇: <span id="startTimeDisplay">--:--</span> 至 <span id="endTimeDisplay">--:--</span></div></div></div><div class="form-group"><label for="userName">預約人</label><input type="text" id="userName" placeholder="請輸入您的姓名" required></div><div class="form-group"><label for="meetingTitle">會議主題</label><input type="text" id="meetingTitle" placeholder="請輸入會議主題" required></div><div class="conflict-error" id="conflictError"><i class="fas fa-exclamation-triangle"></i> <span id="conflictMessage">該時間段與已有預約沖突，請選擇其他時間</span></div><div class="room-availability"><div class="availability-title"><i class="fas fa-info-circle"></i> 會議室可用時間段</div><div class="availability-list" id="availabilityList"><!-- 可用時間段將動態生成 --></div></div><button type="submit" class="btn">提交預約</button><div class="confirmation" id="confirmation"><i class="fas fa-check-circle"></i> 預約成功！您的會議已安排。</div></form></div><div class="display-screen"><div class="current-room">會議室使用情況</div><div class="current-time" id="currentTime">10:30:45</div><div class="current-date" id="currentDate">2023年6月15日 星期四</div><!-- 新增7天預約狀態日歷 --><div class="calendar-container"><div class="calendar-title">未來7天預約狀態</div><div class="calendar-grid" id="calendarGrid"><!-- 日歷內容將動態生成 --></div></div><div class="current-event" id="currentEvent"><div class="event-title"><i class="fas fa-microphone-alt"></i> <span id="currentEventTitle">產品需求評審會議</span></div><div class="event-details"><div class="event-time" id="currentEventTime">10:00 - 11:30</div><div id="currentEventBooker">預約人: 張經理</div><div id="currentEventRoom">會議室: 創新廳</div></div></div><div class="next-event" id="nextEvent"><div class="event-title"><i class="fas fa-clock"></i> <span>下一個會議</span></div><div class="event-details"><div class="event-time" id="nextEventTime">11:30 - 12:30</div><div id="nextEventTitle">團隊周例會</div><div id="nextEventBooker">預約人: 王總監</div></div></div></div></div><div class="reservations-list"><h3><i class="fas fa-list"></i> 今日會議安排</h3><div id="reservationsContainer"><!-- 預約列表將動態生成 --></div></div><div class="view-display"><button id="viewDisplayBtn" class="view-display-btn"><i class="fas fa-external-link-alt"></i> 查看會議室狀態顯示屏</button></div></div><div id="statusDisplay" class="status-display"><div class="header"><h1><i class="fas fa-calendar-alt"></i> 會議室狀態顯示屏</h1><p>實時會議狀態 · 專業會議管理</p></div><div class="time-display"><div class="current-time" id="displayCurrentTime">14:25:38</div><div class="current-date" id="displayCurrentDate">2023年6月20日 星期二</div></div><div id="allRoomsStatus"></div><div class="footer"><p>會議室預約系統 &copy; 2025 | 狀態實時更新</p></div></div><!-- 新增會議室管理頁面 --><div id="roomManagement" class="room-management"><div class="room-management-header"><div class="room-management-title"><i class="fas fa-door-open"></i><h2>會議室管理</h2></div><button id="addRoomBtn" class="btn"><i class="fas fa-plus-circle"></i> 添加會議室</button></div><div class="room-list"><div class="room-item room-item-header"><div>會議室名稱</div><div>容量</div><div>設備</div><div>狀態</div><div>操作</div></div><div id="roomsContainer"><!-- 會議室列表將動態生成 --></div></div><div id="roomFormContainer" class="room-form-container" style="display: none;"><div class="form-title"><i class="fas fa-edit"></i><h3 id="formHeader">添加會議室</h3></div><form id="roomForm"><input type="hidden" id="roomId"><div class="form-grid"><div class="form-group"><label for="roomName">會議室名稱 *</label><input type="text" id="roomName" placeholder="例如：創新廳" required></div><div class="form-group"><label for="roomCapacity">最大容量 *</label><input type="number" id="roomCapacity" min="1" placeholder="例如：10" required></div><div class="form-group"><label for="roomDescription">描述</label><input type="text" id="roomDescription" placeholder="會議室簡要描述"></div><div class="form-group"><label for="roomEquipment">設備（用逗號分隔）</label><input type="text" id="roomEquipment" placeholder="例如：投影儀, 白板, 電話"></div><div class="form-group"><label for="roomStatus">狀態</label><select id="roomStatus"><option value="available">可用</option><option value="maintenance">維護中</option><option value="unavailable">不可用</option></select></div></div><div class="form-actions"><button type="submit" class="btn">保存會議室</button><button type="button" id="cancelRoomForm" class="btn btn-secondary">取消</button></div></form></div></div><!-- 新增預約管理頁面 --><div id="reservationManagement" class="reservation-management"><div class="reservation-management-header"><div class="reservation-management-title"><i class="fas fa-list-alt"></i><h2>預約管理</h2></div><div class="reservation-filters"><select id="filterRoom" class="filter-select"><option value="">所有會議室</option></select><select id="filterDate" class="filter-select"><option value="">所有日期</option><option value="today">今天</option><option value="tomorrow">明天</option><option value="week">本周</option></select><input type="text" id="searchBooker" class="search-input" placeholder="搜索預約人..."></div><button id="exportReservationsBtn" class="btn btn-secondary" style="height:32px;align-self:center;margin-left:10px;padding:4px 16px;font-size:0.95rem;line-height:1.2;min-width:unset;width:auto;"><i class="fas fa-file-export"></i> 導出表格</button></div><div class="reservation-stats"><div class="stat-card"><div class="stat-number" id="totalReservations">0</div><div class="stat-label">總預約數</div></div><div class="stat-card"><div class="stat-number" id="todayReservations">0</div><div class="stat-label">今日預約</div></div><div class="stat-card"><div class="stat-number" id="upcomingReservations">0</div><div class="stat-label">即將到來</div></div></div><div class="reservation-list"><div class="reservation-item reservation-item-header"><div>會議室</div><div>日期</div><div>時間</div><div>會議主題</div><div>預約人</div><div>狀態</div><div>操作</div></div><div id="reservationsManagementContainer"><!-- 預約列表將動態生成 --></div></div><div class="no-reservations" id="noReservations" style="display: none;"><i class="fas fa-calendar-times"></i><p>暫無預約記錄</p></div></div><footer><p>會議室預約系統 &copy; 2025 | 技術支持: 創客白澤 | 版本: 5.0.0</p></footer></div><script>// 全局存儲預約數據let reservations = JSON.parse(localStorage.getItem('meetingReservations')) || [];// 新增：限制預約日期只能為7天內(function setBookingDateRange() {const today = new Date();const dateInput = document.getElementById('bookingDate');dateInput.valueAsDate = today;dateInput.min = today.toISOString().split('T')[0];const maxDate = new Date();maxDate.setDate(today.getDate() + 7);dateInput.max = maxDate.toISOString().split('T')[0];})();// 會議室數據結構let meetingRooms = JSON.parse(localStorage.getItem('meetingRooms')) || [{id: 'room1',name: '創新廳',capacity: 8,description: '適合小型創意會議',equipment: '投影儀, 白板',status: 'available'},{id: 'room2',name: '協作廳',capacity: 12,description: '適合團隊協作會議',equipment: '電視, 視頻會議設備',status: 'available'},{id: 'room3',name: '決策廳',capacity: 6,description: '適合高層決策會議',equipment: '視頻會議系統, 智能白板',status: 'available'},{id: 'room4',name: '創意空間',capacity: 10,description: '靈活多變的創意空間',equipment: '投影儀, 移動白板',status: 'available'}];// 保存預約數據到localStoragefunction saveReservations() {localStorage.setItem('meetingReservations', JSON.stringify(reservations));}// 保存會議室數據function saveRooms() {localStorage.setItem('meetingRooms', JSON.stringify(meetingRooms));generateRoomOptions();displayRooms();}// 生成會議室下拉選項function generateRoomOptions() {const roomSelect = document.getElementById('meetingRoom');roomSelect.innerHTML = '<option value="">-- 請選擇會議室 --</option>';meetingRooms.forEach(room => {if (room.status === 'available') {const option = document.createElement('option');option.value = room.id;option.textContent = `${room.name} (${room.capacity}人)`;roomSelect.appendChild(option);}});}// 顯示會議室列表function displayRooms() {const container = document.getElementById('roomsContainer');container.innerHTML = '';if (meetingRooms.length === 0) {container.innerHTML = `<div class="no-rooms"><i class="fas fa-door-closed"></i><p>暫無會議室信息，請添加會議室</p></div>`;return;}meetingRooms.forEach(room => {const roomElement = document.createElement('div');roomElement.className = 'room-item';// 狀態標簽let statusText = '';let statusClass = '';switch(room.status) {case 'available':statusText = '可用';statusClass = 'status-upcoming';break;case 'maintenance':statusText = '維護中';statusClass = 'status-past';break;case 'unavailable':statusText = '不可用';statusClass = 'status-current';break;}// 設備標簽let equipmentTags = '';if (room.equipment) {const equipmentList = room.equipment.split(',').map(e => e.trim());equipmentTags = equipmentList.map(eq => `<div class="equipment-tag"><i class="fas fa-check"></i>${eq}</div>`).join('');}roomElement.innerHTML = `<div><strong>${room.name}</strong>${room.description ? `<div class="room-info">${room.description}</div>` : ''}</div><div>${room.capacity}人</div><div class="equipment-list">${equipmentTags || '無'}</div><div><span class="status-indicator ${statusClass}"></span>${statusText}</div><div class="room-actions"><button class="room-action-btn edit-room-btn" data-id="${room.id}"><i class="fas fa-edit"></i> 編輯</button><button class="room-action-btn delete-room-btn" data-id="${room.id}"><i class="fas fa-trash"></i> 刪除</button></div>`;container.appendChild(roomElement);});// 添加編輯事件監聽document.querySelectorAll('.edit-room-btn').forEach(btn => {btn.addEventListener('click', function() {const roomId = this.dataset.id;editRoom(roomId);});});// 添加刪除事件監聽document.querySelectorAll('.delete-room-btn').forEach(btn => {btn.addEventListener('click', function() {const roomId = this.dataset.id;deleteRoom(roomId);});});}// 編輯會議室function editRoom(roomId) {const room = meetingRooms.find(r => r.id === roomId);if (!room) return;document.getElementById('roomId').value = room.id;document.getElementById('roomName').value = room.name;document.getElementById('roomCapacity').value = room.capacity;document.getElementById('roomDescription').value = room.description || '';document.getElementById('roomEquipment').value = room.equipment || '';document.getElementById('roomStatus').value = room.status;document.getElementById('formHeader').textContent = '編輯會議室';document.getElementById('roomFormContainer').style.display = 'block';document.getElementById('addRoomBtn').style.display = 'none';// 滾動到表單document.getElementById('roomFormContainer').scrollIntoView({ behavior: 'smooth' });}// 刪除會議室function deleteRoom(roomId) {if (confirm('確定要刪除這個會議室嗎？此操作不可恢復。')) {// 檢查該會議室是否有預約const hasReservations = reservations.some(r => r.room === roomId);if (hasReservations) {alert('無法刪除該會議室，因為存在相關的預約記錄。請先刪除相關預約后再試。');return;}meetingRooms = meetingRooms.filter(room => room.id !== roomId);saveRooms();alert('會議室已成功刪除');}}// 獲取當前會議室和日期下的預約function getReservationsForCurrentRoomAndDate() {const room = document.getElementById('meetingRoom').value;const date = document.getElementById('bookingDate').value;if (!room || !date) return [];return reservations.filter(res => res.room === room && res.date === date);}// 檢查時間段是否沖突function checkTimeConflict(start, end, currentReservations) {for (const res of currentReservations) {// 時間沖突的條件：新會議開始時間 < 已有會議結束時間 且 新會議結束時間 > 已有會議開始時間if (start < res.end && end > res.start) {return res;}}return null;}// 生成整點/半點時間選項function generateTimeOptions() {const startContainer = document.getElementById('startTimeSelector');const endContainer = document.getElementById('endTimeSelector');startContainer.innerHTML = '';endContainer.innerHTML = '';const times = ['08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30','12:00', '12:30', '13:00', '13:30','14:00', '14:30', '15:00', '15:30','16:00', '16:30', '17:00', '17:30','18:00'];const currentReservations = getReservationsForCurrentRoomAndDate();// 新增：判斷是否為今天，過濾掉已過時間const bookingDate = document.getElementById('bookingDate').value;const todayStr = new Date().toISOString().split('T')[0];let nowMinutes = 0;if (bookingDate === todayStr) {const now = new Date();nowMinutes = now.getHours() * 60 + now.getMinutes();}// 生成開始時間選項times.forEach(time => {// 新增：如果為今天且時間已過，則不顯示if (bookingDate === todayStr) {const [h, m] = time.split(':').map(Number);const tMinutes = h * 60 + m;if (tMinutes <= nowMinutes) return;}const option = document.createElement('div');option.className = 'time-option';option.textContent = time;option.dataset.time = time;// 檢查該時間點是否已被預約const isBooked = currentReservations.some(res => {return time >= res.start && time < res.end;});if (isBooked) {option.classList.add('booked');option.title = '該時間段已被預訂';}option.addEventListener('click', function() {if (!this.classList.contains('booked')) {document.querySelectorAll('#startTimeSelector .time-option').forEach(opt => {opt.classList.remove('selected');});this.classList.add('selected');document.getElementById('startTimeDisplay').textContent = this.dataset.time;validateTimeSelection();updateEndTimeOptions(this.dataset.time);updateAvailability();}});startContainer.appendChild(option);});// 生成結束時間選項（初始為空）document.getElementById('endTimeDisplay').textContent = '--:--';document.getElementById('conflictError').style.display = 'none';}// 更新結束時間選項function updateEndTimeOptions(startTime) {const endContainer = document.getElementById('endTimeSelector');endContainer.innerHTML = '';const times = ['08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30','12:00', '12:30', '13:00', '13:30','14:00', '14:30', '15:00', '15:30','16:00', '16:30', '17:00', '17:30','18:00'];// 找到開始時間在數組中的位置const startIndex = times.indexOf(startTime);const currentReservations = getReservationsForCurrentRoomAndDate();// 新增：判斷是否為今天，過濾掉已過時間const bookingDate = document.getElementById('bookingDate').value;const todayStr = new Date().toISOString().split('T')[0];let nowMinutes = 0;if (bookingDate === todayStr) {const now = new Date();nowMinutes = now.getHours() * 60 + now.getMinutes();}if (startIndex !== -1) {// 只顯示在開始時間之后的選項const availableTimes = times.slice(startIndex + 1);availableTimes.forEach(time => {// 新增：如果為今天且時間已過，則不顯示if (bookingDate === todayStr) {const [h, m] = time.split(':').map(Number);const tMinutes = h * 60 + m;if (tMinutes <= nowMinutes) return;}const option = document.createElement('div');option.className = 'time-option';option.textContent = time;option.dataset.time = time;// 檢查時間段是否沖突const conflict = checkTimeConflict(startTime, time, currentReservations);if (conflict) {option.classList.add('booked');option.title = `該時間段與 "${conflict.title}" 會議沖突`;}option.addEventListener('click', function() {if (!this.classList.contains('booked')) {document.querySelectorAll('#endTimeSelector .time-option').forEach(opt => {opt.classList.remove('selected');});this.classList.add('selected');document.getElementById('endTimeDisplay').textContent = this.dataset.time;validateTimeSelection();document.getElementById('conflictError').style.display = 'none';}});endContainer.appendChild(option);});}}// 驗證時間選擇function validateTimeSelection() {const startTime = document.querySelector('#startTimeSelector .time-option.selected');const endTime = document.querySelector('#endTimeSelector .time-option.selected');const timeError = document.getElementById('timeError');if (startTime && endTime) {const startValue = startTime.dataset.time;const endValue = endTime.dataset.time;if (startValue >= endValue) {timeError.style.display = 'block';return false;} else {timeError.style.display = 'none';return true;}}return false;}// 更新可用時間段顯示function updateAvailability() {const container = document.getElementById('availabilityList');container.innerHTML = '';const currentReservations = getReservationsForCurrentRoomAndDate();// 如果沒有預約，顯示全天可用if (currentReservations.length === 0) {const badge = document.createElement('div');badge.className = 'availability-badge';badge.innerHTML = '<i class="fas fa-check"></i> 全天可用';container.appendChild(badge);return;}// 計算可用時間段const times = ['08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30','12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30','16:00', '16:30', '17:00', '17:30', '18:00'];let availableSlots = [];let currentStart = null;for (let i = 0; i < times.length; i++) {const time = times[i];const isBooked = currentReservations.some(res => time >= res.start && time < res.end);if (!isBooked) {if (currentStart === null) {currentStart = time;}// 如果是最后一個時間段或是下一個時間段已被預約if (i === times.length - 1 || currentReservations.some(res => times[i+1] >= res.start && times[i+1] < res.end)) {if (currentStart) {availableSlots.push(`${currentStart}-${times[i]}`);currentStart = null;}}} else {currentStart = null;}}// 顯示可用時間段availableSlots.forEach(slot => {const badge = document.createElement('div');badge.className = 'availability-badge';badge.innerHTML = `<i class="fas fa-check"></i> ${slot}`;container.appendChild(badge);});}// 更新當前時間function updateCurrentTime() {const now = new Date();const timeElement = document.getElementById('currentTime');const dateElement = document.getElementById('currentDate');const displayTimeElement = document.getElementById('displayCurrentTime');const displayDateElement = document.getElementById('displayCurrentDate');const timeString = now.toLocaleTimeString('zh-CN', {hour: '2-digit', minute: '2-digit', second: '2-digit',hour12: false});const dateString = now.toLocaleDateString('zh-CN', {year: 'numeric',month: 'long',day: 'numeric',weekday: 'long'});timeElement.textContent = timeString;dateElement.textContent = dateString;// 更新狀態顯示屏的時間if (displayTimeElement) {displayTimeElement.textContent = timeString;}if (displayDateElement) {displayDateElement.textContent = dateString;}}function getMeetingStatus(start, end, date) {const now = new Date();const startTime = new Date(date + 'T' + start);const endTime = new Date(date + 'T' + end);if (now < startTime) return 'upcoming';if (now >= startTime && now <= endTime) return 'ongoing';return 'ended';}function displayReservations() {const container = document.getElementById('reservationsContainer');container.innerHTML = '';const today = new Date().toISOString().split('T')[0];const todayReservations = reservations.filter(res => res.date === today);todayReservations.sort((a, b) => a.start.localeCompare(b.start));// 添加標題行const headerRow = document.createElement('div');headerRow.className = 'today-reservation-row';headerRow.style.fontWeight = 'bold';headerRow.style.backgroundColor = '#f8f9fa';headerRow.style.borderBottom = '2px solid #dee2e6';headerRow.innerHTML = `<div class="today-reservation-time" style="justify-content: center;">時間</div><div class="today-reservation-title" style="text-align: center;">主題</div><div class="today-reservation-room" style="text-align: center;">會議室</div><div class="today-reservation-booker">預約人</div>`;container.appendChild(headerRow);todayReservations.forEach(res => {const status = getMeetingStatus(res.start, res.end, res.date);const statusClass = status === 'ongoing' ? 'status-ongoing' :status === 'upcoming' ? 'status-upcoming' : 'status-ended';const row = document.createElement('div');row.className = 'today-reservation-row';row.innerHTML = `<div class="today-reservation-time"><span class="dot ${statusClass}"></span><span class="time-text">${res.start} - ${res.end}</span></div><div class="today-reservation-title" style="text-align: center;">${res.title}</div><div class="today-reservation-room" style="text-align: center;">${getRoomName(res.room)}</div><div class="today-reservation-booker">${res.booker}</div>`;container.appendChild(row);});}// 處理表單提交document.getElementById('bookingForm').addEventListener('submit', function(e) {e.preventDefault();const room = document.getElementById('meetingRoom').value;const date = document.getElementById('bookingDate').value;const startOption = document.querySelector('#startTimeSelector .time-option.selected');const endOption = document.querySelector('#endTimeSelector .time-option.selected');const userName = document.getElementById('userName').value;const meetingTitle = document.getElementById('meetingTitle').value;if (!room) {alert('請選擇會議室');return;}if (!startOption || !endOption) {alert('請選擇開始時間和結束時間');return;}const startTime = startOption.dataset.time;const endTime = endOption.dataset.time;if (startTime >= endTime) {document.getElementById('timeError').style.display = 'block';return;}// 檢查時間沖突const currentReservations = getReservationsForCurrentRoomAndDate();const conflict = checkTimeConflict(startTime, endTime, currentReservations);if (conflict) {document.getElementById('conflictMessage').textContent = `該時間段與 "${conflict.title}" 會議沖突 (${conflict.start}-${conflict.end})`;document.getElementById('conflictError').style.display = 'block';return;}// 創建新預約const newReservation = {id: Date.now(),room: room,date: date,start: startTime,end: endTime,title: meetingTitle,booker: userName};// 添加到數據reservations.push(newReservation);saveReservations();// 顯示成功消息const confirmation = document.getElementById('confirmation');confirmation.style.display = 'block';// 更新顯示displayReservations();updateRoomDisplay();updateAvailability();updateStatusDisplay();// 重置表單setTimeout(() => {document.getElementById('userName').value = '';document.getElementById('meetingTitle').value = '';confirmation.style.display = 'none';generateTimeOptions();}, 3000);});// 更新會議室顯示信息function updateRoomDisplay() {const now = new Date();const currentHours = now.getHours();const currentMinutes = now.getMinutes();const today = new Date().toISOString().split('T')[0];// 獲取當前選擇的會議室const room = document.getElementById('meetingRoom').value;// 獲取今天該會議室的所有預約const todayReservations = reservations.filter(res => res.date === today && res.room === room);let currentEvent = null;let nextEvent = null;// 查找當前會議和下一個會議todayReservations.forEach(res => {const [startHour, startMinute] = res.start.split(':').map(Number);const [endHour, endMinute] = res.end.split(':').map(Number);// 檢查是否當前會議if ((currentHours > startHour || (currentHours === startHour && currentMinutes >= startMinute)) &&(currentHours < endHour || (currentHours === endHour && currentMinutes < endMinute))) {currentEvent = res;}// 檢查是否是將來的會議if (currentHours < startHour || (currentHours === startHour && currentMinutes < startMinute)) {if (!nextEvent || res.start < nextEvent.start) {nextEvent = res;}}});// 更新當前會議顯示const currentEventElement = document.getElementById('currentEvent');if (currentEvent) {// 添加"開會中"標記const titleWithStatus = `${currentEvent.title} <span class="in-session">會議中</span>`;document.getElementById('currentEventTitle').innerHTML = titleWithStatus;document.getElementById('currentEventTime').textContent = `${currentEvent.start} - ${currentEvent.end}`;document.getElementById('currentEventBooker').textContent = `預約人: ${currentEvent.booker}`;document.getElementById('currentEventRoom').textContent = `會議室: ${getRoomName(currentEvent.room)}`;currentEventElement.style.display = 'block';} else {// 統計會議室信息const totalRooms = meetingRooms.length;const availableRooms = meetingRooms.filter(r => r.status === 'available').length;currentEventElement.style.display = 'block';currentEventElement.innerHTML = `<div class="no-event" style="display: flex; align-items: center; justify-content: center; gap: 18px; flex-direction: column;"><div style="display: flex; align-items: center; gap: 18px;"><i class="fas fa-door-open" style="font-size: 2.2rem; color: #f6c343;"></i><div style="text-align: left;"><div style="color:#38a169; font-size:1.5rem;">會議室總數：<b>${totalRooms}</b></div><div style="color:#f6c343; font-size:1.5rem;">可用會議室：<b>${availableRooms}</b></div></div></div><div id="roomInfoList" style="width:100%;margin-top:18px;"></div></div>`;// 渲染會議室詳細信息到roomInfoListsetTimeout(() => {const roomInfoList = document.getElementById('roomInfoList');if (roomInfoList) {let html = '<div style="display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: flex-start;">';meetingRooms.forEach(room => {let statusColor = room.status === 'available' ? '#38a169' : (room.status === 'maintenance' ? '#f6c343' : '#e53e3e');let statusText = room.status === 'available' ? '可用' : (room.status === 'maintenance' ? '維護中' : '不可用');html += `<div style=\"background:rgba(255,255,255,0.10);border-radius:12px;padding:18px 24px;min-width:180px;max-width:220px;box-shadow:0 2px 8px rgba(0,0,0,0.04);margin:8px 0;\"><div style=\"font-size:1.2rem;font-weight:bold;margin-bottom:6px;color:#f6c343;\">${room.name}</div><div style=\"font-size:0.98rem;margin-bottom:4px;color:#f6c343;\">容量：${room.capacity}人</div><div style=\"font-size:0.98rem;margin-bottom:4px;color:#f6c343;\">設備：${room.equipment || '無'}</div><div style=\"font-size:0.98rem;color:${statusColor};font-weight:bold;\">狀態：${statusText}</div></div>`;});html += '</div>';roomInfoList.innerHTML = html;}}, 0);}// 更新下一個會議顯示const nextEventElement = document.getElementById('nextEvent');if (nextEvent) {document.getElementById('nextEventTitle').textContent = nextEvent.title;document.getElementById('nextEventTime').textContent = `${nextEvent.start} - ${nextEvent.end}`;document.getElementById('nextEventBooker').textContent = `預約人: ${nextEvent.booker}`;nextEventElement.style.display = 'block';} else {// 沒有下一個會議時直接隱藏該區域nextEventElement.style.display = 'none';}// 更新7天預約狀態日歷updateCalendar();}// 更新7天預約狀態日歷function updateCalendar() {const calendarGrid = document.getElementById('calendarGrid');if (!calendarGrid) return;const room = document.getElementById('meetingRoom').value;if (!room) return;calendarGrid.innerHTML = '';const weekdays = ['日', '一', '二', '三', '四', '五', '六'];const today = new Date();for (let i = 0; i < 7; i++) {const date = new Date(today);date.setDate(today.getDate() + i);const dateStr = date.toISOString().split('T')[0];const dayOfWeek = weekdays[date.getDay()];const dayOfMonth = date.getDate();// 獲取該日期的預約const dayReservations = reservations.filter(res => res.room === room && res.date === dateStr);// 判斷狀態let statusClass = 'status-available';let statusText = '可用';if (dayReservations.length > 0) {// 檢查是否全天被預約（假設工作時間8:00-18:00，共20個半小時時段）const timeSlots = ['08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30','12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30','16:00', '16:30', '17:00', '17:30', '18:00'];let bookedSlots = 0;timeSlots.forEach(time => {const isBooked = dayReservations.some(res => time >= res.start && time < res.end);if (isBooked) bookedSlots++;});if (bookedSlots >= timeSlots.length * 0.8) {statusClass = 'status-booked';statusText = '已滿';} else {statusClass = 'status-partial';statusText = '部分';}}// 如果是今天const isToday = i === 0;if (isToday) {statusClass = 'status-today';statusText = '今天';}const dayElement = document.createElement('div');dayElement.className = `calendar-day${isToday ? ' today' : ''}`;dayElement.innerHTML = `<div class="calendar-date">${dayOfMonth}</div><div class="calendar-weekday">周${dayOfWeek}</div><div class="calendar-status ${statusClass}" title="${statusText}"></div>`;calendarGrid.appendChild(dayElement);}}// 更新狀態顯示屏function updateStatusDisplay() {const now = new Date();const currentHours = now.getHours();const currentMinutes = now.getMinutes();const today = new Date().toISOString().split('T')[0];const container = document.getElementById('allRoomsStatus');if (!container) return;container.innerHTML = '';meetingRooms.forEach(room => {// 獲取該會議室今天的預約const todayReservations = reservations.filter(res => res.date === today && res.room === room.id);let currentEvent = null;let nextEvent = null;todayReservations.forEach(res => {const [startHour, startMinute] = res.start.split(':').map(Number);const [endHour, endMinute] = res.end.split(':').map(Number);if ((currentHours > startHour || (currentHours === startHour && currentMinutes >= startMinute)) &&(currentHours < endHour || (currentHours === endHour && currentMinutes < endMinute))) {currentEvent = res;}if (currentHours < startHour || (currentHours === startHour && currentMinutes < startMinute)) {if (!nextEvent || res.start < nextEvent.start) {nextEvent = res;}}});// 構建卡片let card = `<div class="status-section" style="margin-bottom:32px;"><div class="status-header"><i class="fas fa-door-open"></i><div><div class="status-title">${room.name} (${room.capacity}人)</div><span class="in-session" style="background:${room.status==='available'?'rgba(56,161,105,0.3)':'#f6c343'};color:${room.status==='available'?'#38a169':'#b21f1f'};"><i class="fas fa-circle"></i> ${room.status==='available'?'可用':(room.status==='maintenance'?'維護中':'不可用')}</span></div></div>`;if (currentEvent) {card += `<div class="time-range">${currentEvent.start} - ${currentEvent.end}</div><div class="progress-container"><div class="progress-bar" style="width:${getProgress(currentEvent.start, currentEvent.end)}%"></div></div><div class="event-details"><div class="detail-card"><div class="detail-label"><i class="fas fa-heading"></i> 會議主題</div><div class="detail-value">${currentEvent.title}</div></div><div class="detail-card"><div class="detail-label"><i class="fas fa-user"></i> 預約人</div><div class="detail-value">${currentEvent.booker}</div></div></div>`;} else {card += `<div class="no-events" style="padding:32px 0 0 0;"><i class="fas fa-door-open"></i><p>當前無會議</p></div>`;}if (nextEvent) {card += `<div class="next-event" style="margin-top:18px;"><div class="next-header"><i class="fas fa-clock"></i><div class="next-title">下一個會議</div></div><div class="time-range">${nextEvent.start} - ${nextEvent.end}</div><div class="event-details"><div class="detail-card"><div class="detail-label"><i class="fas fa-heading"></i> 會議主題</div><div class="detail-value">${nextEvent.title}</div></div><div class="detail-card"><div class="detail-label"><i class="fas fa-user"></i> 預約人</div><div class="detail-value">${nextEvent.booker}</div></div></div></div>`;}card += `</div>`;container.innerHTML += card;});}// 輔助函數：計算進度條百分比function getProgress(startTime, endTime) {const now = new Date();const [startHour, startMinute] = startTime.split(':').map(Number);const [endHour, endMinute] = endTime.split(':').map(Number);const startDate = new Date();startDate.setHours(startHour, startMinute, 0, 0);const endDate = new Date();endDate.setHours(endHour, endMinute, 0, 0);const totalDuration = endDate - startDate;const elapsedTime = now - startDate;let progress = (elapsedTime / totalDuration) * 100;progress = Math.max(0, Math.min(100, progress));return progress;}// 獲取會議室名稱function getRoomName(roomId) {const room = meetingRooms.find(r => r.id === roomId);return room ? room.name : '未知會議室';}// 顯示添加會議室表單document.getElementById('addRoomBtn').addEventListener('click', function() {document.getElementById('roomForm').reset();document.getElementById('roomId').value = '';document.getElementById('formHeader').textContent = '添加會議室';document.getElementById('roomFormContainer').style.display = 'block';this.style.display = 'none';// 滾動到表單document.getElementById('roomFormContainer').scrollIntoView({ behavior: 'smooth' });});// 取消表單document.getElementById('cancelRoomForm').addEventListener('click', function() {document.getElementById('roomFormContainer').style.display = 'none';document.getElementById('addRoomBtn').style.display = 'block';});// 處理會議室表單提交document.getElementById('roomForm').addEventListener('submit', function(e) {e.preventDefault();const roomId = document.getElementById('roomId').value;const name = document.getElementById('roomName').value;const capacity = parseInt(document.getElementById('roomCapacity').value);const description = document.getElementById('roomDescription').value;const equipment = document.getElementById('roomEquipment').value;const status = document.getElementById('roomStatus').value;if (!name || !capacity) {alert('請填寫必填字段（會議室名稱和容量）');return;}if (roomId) {// 編輯現有會議室const index = meetingRooms.findIndex(room => room.id === roomId);if (index !== -1) {meetingRooms[index] = {...meetingRooms[index],name,capacity,description,equipment,status};}} else {// 添加新會議室const newId = 'room' + (meetingRooms.length + 1);meetingRooms.push({id: newId,name,capacity,description,equipment,status});}saveRooms();document.getElementById('roomFormContainer').style.display = 'none';document.getElementById('addRoomBtn').style.display = 'block';alert(`會議室${roomId ? '已更新' : '已添加'}！`);});// 初始化頁面saveRooms(); // 初始化會議室數據generateRoomOptions();generateTimeOptions();updateCurrentTime();displayReservations();displayRooms();updateRoomDisplay();updateAvailability();updateStatusDisplay();updateCalendar(); // 初始化日歷顯示// 每秒更新時間setInterval(updateCurrentTime, 1000);// 每分鐘刷新預訂狀態setInterval(() => {displayReservations();updateRoomDisplay();updateStatusDisplay();}, 60000);// 新增：每5分鐘自動刷新會議室狀態顯示屏頁面setInterval(() => {// 僅在狀態顯示屏可見時刷新頁面const statusDisplay = document.getElementById('statusDisplay');if (statusDisplay && statusDisplay.style.display !== 'none') {window.location.reload();}}, 300000); // 300000ms = 5分鐘// 當日期或會議室改變時重新生成時間選項document.getElementById('bookingDate').addEventListener('change', function() {generateTimeOptions();updateAvailability();updateStatusDisplay();});// 記住會議室選擇document.getElementById('meetingRoom').addEventListener('change', function() {localStorage.setItem('lastRoom', this.value);generateTimeOptions();updateAvailability();updateStatusDisplay();updateCalendar(); // 新增，會議室切換時刷新日歷});// 頁面加載時恢復會議室選擇window.addEventListener('DOMContentLoaded', function() {const lastRoom = localStorage.getItem('lastRoom');const meetingRoomSelect = document.getElementById('meetingRoom');if (lastRoom && meetingRoomSelect) {meetingRoomSelect.value = lastRoom;}// 自動選中第一個可用會議室if (meetingRoomSelect && !meetingRoomSelect.value) {for (let i = 0; i < meetingRoomSelect.options.length; i++) {if (meetingRoomSelect.options[i].value) {meetingRoomSelect.value = meetingRoomSelect.options[i].value;break;}}}// 觸發一次相關更新（如果有會議室選中）generateTimeOptions();updateAvailability();updateStatusDisplay();updateCalendar(); // 確保日歷刷新});// 顯示狀態顯示屏document.getElementById('viewDisplayBtn').addEventListener('click', function() {document.getElementById('bookingSystem').style.display = 'none';document.getElementById('statusDisplay').style.display = 'block';document.getElementById('roomManagement').style.display = 'none';document.getElementById('reservationManagement').style.display = 'none';localStorage.setItem('lastView', 'status'); // 記錄當前頁面});// 顯示預約系統document.getElementById('showBookingBtn').addEventListener('click', function() {document.getElementById('bookingSystem').style.display = 'block';document.getElementById('statusDisplay').style.display = 'none';document.getElementById('roomManagement').style.display = 'none';document.getElementById('reservationManagement').style.display = 'none';localStorage.setItem('lastView', 'booking'); // 記錄當前頁面});// 顯示狀態顯示屏document.getElementById('showDisplayBtn').addEventListener('click', function() {document.getElementById('bookingSystem').style.display = 'none';document.getElementById('statusDisplay').style.display = 'block';document.getElementById('roomManagement').style.display = 'none';document.getElementById('reservationManagement').style.display = 'none';localStorage.setItem('lastView', 'status'); // 記錄當前頁面});// 顯示會議室管理頁面document.getElementById('showManagementBtn').addEventListener('click', function() {const password = prompt('請輸入管理員密碼：');if (password === 'baize') {document.getElementById('bookingSystem').style.display = 'none';document.getElementById('statusDisplay').style.display = 'none';document.getElementById('roomManagement').style.display = 'block';document.getElementById('reservationManagement').style.display = 'none';localStorage.setItem('lastView', 'management');} else if (password !== null) {alert('密碼錯誤，無法訪問會議室管理頁面！');}});// 顯示預約管理頁面document.getElementById('showReservationManagementBtn').addEventListener('click', function() {const password = prompt('請輸入管理員密碼：');if (password === 'baize') {document.getElementById('bookingSystem').style.display = 'none';document.getElementById('statusDisplay').style.display = 'none';document.getElementById('roomManagement').style.display = 'none';document.getElementById('reservationManagement').style.display = 'block';localStorage.setItem('lastView', 'reservationManagement');displayReservationsManagement();} else if (password !== null) {alert('密碼錯誤，無法訪問預約管理頁面！');}});// 頁面加載時根據localStorage顯示上次頁面window.addEventListener('DOMContentLoaded', function() {const lastView = localStorage.getItem('lastView');if (lastView === 'status') {document.getElementById('bookingSystem').style.display = 'none';document.getElementById('statusDisplay').style.display = 'block';document.getElementById('roomManagement').style.display = 'none';document.getElementById('reservationManagement').style.display = 'none';} else if (lastView === 'management') {document.getElementById('bookingSystem').style.display = 'none';document.getElementById('statusDisplay').style.display = 'none';document.getElementById('roomManagement').style.display = 'block';document.getElementById('reservationManagement').style.display = 'none';} else if (lastView === 'reservationManagement') {document.getElementById('bookingSystem').style.display = 'none';document.getElementById('statusDisplay').style.display = 'none';document.getElementById('roomManagement').style.display = 'none';document.getElementById('reservationManagement').style.display = 'block';displayReservationsManagement();} else {document.getElementById('bookingSystem').style.display = 'block';document.getElementById('statusDisplay').style.display = 'none';document.getElementById('roomManagement').style.display = 'none';document.getElementById('reservationManagement').style.display = 'none';}});// 狀態顯示屏懸停顯示頂部按鈕（修正版）const switchContainer = document.querySelector('.switch-container');const statusDisplay = document.getElementById('statusDisplay');let hoverTimer = null;function showSwitchContainer() {if (statusDisplay.style.display !== 'none') {switchContainer.style.display = 'flex';}}function hideSwitchContainer() {hoverTimer = setTimeout(() => {if (statusDisplay.style.display !== 'none') {switchContainer.style.display = 'none';}}, 120);}function cancelHide() {if (hoverTimer) clearTimeout(hoverTimer);}function enableHoverEvents() {statusDisplay.addEventListener('mouseenter', showSwitchContainer);statusDisplay.addEventListener('mouseleave', hideSwitchContainer);switchContainer.addEventListener('mouseenter', function() {cancelHide();showSwitchContainer();});switchContainer.addEventListener('mouseleave', hideSwitchContainer);}function disableHoverEvents() {statusDisplay.removeEventListener('mouseenter', showSwitchContainer);statusDisplay.removeEventListener('mouseleave', hideSwitchContainer);switchContainer.removeEventListener('mouseenter', showSwitchContainer);switchContainer.removeEventListener('mouseleave', hideSwitchContainer);}// 頁面切換時同步按鈕顯示狀態function updateSwitchContainerVisibility() {if (statusDisplay.style.display !== 'none') {switchContainer.style.display = 'none';enableHoverEvents();} else {switchContainer.style.display = 'flex';disableHoverEvents();}}// 在切換頁面時調用document.getElementById('showBookingBtn').addEventListener('click', updateSwitchContainerVisibility);document.getElementById('showDisplayBtn').addEventListener('click', updateSwitchContainerVisibility);document.getElementById('showManagementBtn').addEventListener('click', updateSwitchContainerVisibility);document.getElementById('viewDisplayBtn').addEventListener('click', updateSwitchContainerVisibility);// 頁面加載時初始化window.addEventListener('DOMContentLoaded', updateSwitchContainerVisibility);// 預約管理相關函數function displayReservationsManagement() {updateReservationStats();populateFilterOptions();displayFilteredReservations();}function updateReservationStats() {const today = new Date().toISOString().split('T')[0];const now = new Date();const totalCount = reservations.length;const todayCount = reservations.filter(res => res.date === today).length;const upcomingCount = reservations.filter(res => {const reservationDate = new Date(res.date);const reservationTime = new Date(res.date + 'T' + res.start);return reservationDate >= now || (reservationDate.toISOString().split('T')[0] === today && reservationTime > now);}).length;document.getElementById('totalReservations').textContent = totalCount;document.getElementById('todayReservations').textContent = todayCount;document.getElementById('upcomingReservations').textContent = upcomingCount;}function populateFilterOptions() {const roomFilter = document.getElementById('filterRoom');const dateFilter = document.getElementById('filterDate');// 清空現有選項roomFilter.innerHTML = '<option value="">所有會議室</option>';dateFilter.innerHTML = '<option value="">所有日期</option><option value="today">今天</option><option value="tomorrow">明天</option><option value="week">本周</option>';// 添加會議室選項meetingRooms.forEach(room => {const option = document.createElement('option');option.value = room.id;option.textContent = room.name;roomFilter.appendChild(option);});}function displayFilteredReservations() {const roomFilter = document.getElementById('filterRoom').value;const dateFilter = document.getElementById('filterDate').value;const searchTerm = document.getElementById('searchBooker').value.toLowerCase();let filteredReservations = [...reservations];// 按會議室篩選if (roomFilter) {filteredReservations = filteredReservations.filter(res => res.room === roomFilter);}// 按日期篩選if (dateFilter) {const today = new Date().toISOString().split('T')[0];const tomorrow = new Date();tomorrow.setDate(tomorrow.getDate() + 1);const tomorrowStr = tomorrow.toISOString().split('T')[0];switch(dateFilter) {case 'today':filteredReservations = filteredReservations.filter(res => res.date === today);break;case 'tomorrow':filteredReservations = filteredReservations.filter(res => res.date === tomorrowStr);break;case 'week':const weekStart = new Date();weekStart.setDate(weekStart.getDate() - weekStart.getDay());const weekEnd = new Date(weekStart);weekEnd.setDate(weekEnd.getDate() + 6);filteredReservations = filteredReservations.filter(res => {const resDate = new Date(res.date);return resDate >= weekStart && resDate <= weekEnd;});break;}}// 按預約人搜索if (searchTerm) {filteredReservations = filteredReservations.filter(res => res.booker.toLowerCase().includes(searchTerm));}// 按日期和時間排序filteredReservations.sort((a, b) => {if (a.date !== b.date) {return new Date(a.date) - new Date(b.date);}return a.start.localeCompare(b.start);});const container = document.getElementById('reservationsManagementContainer');const noReservations = document.getElementById('noReservations');if (filteredReservations.length === 0) {container.innerHTML = '';noReservations.style.display = 'block';return;}noReservations.style.display = 'none';container.innerHTML = '';filteredReservations.forEach(reservation => {const reservationElement = createReservationElement(reservation);container.appendChild(reservationElement);});}function createReservationElement(reservation) {const element = document.createElement('div');element.className = 'reservation-item';const roomName = getRoomName(reservation.room);const status = getReservationStatus(reservation);const statusClass = getStatusClass(status);element.innerHTML = `<div data-label="會議室">${roomName}</div><div data-label="日期">${formatDate(reservation.date)}</div><div data-label="時間">${reservation.start} - ${reservation.end}</div><div data-label="會議主題">${reservation.title}</div><div data-label="預約人">${reservation.booker}</div><div data-label="狀態"><span class="reservation-status ${statusClass}">${status}</span></div><div data-label="操作" class="reservation-actions"><button class="action-btn btn-edit" onclick="editReservation(${reservation.id})"><i class="fas fa-edit"></i> 編輯</button><button class="action-btn btn-delete" onclick="deleteReservation(${reservation.id})"><i class="fas fa-trash"></i> 刪除</button></div>`;return element;}function getReservationStatus(reservation) {const now = new Date();const today = new Date().toISOString().split('T')[0];const reservationDate = new Date(reservation.date);const reservationStart = new Date(reservation.date + 'T' + reservation.start);const reservationEnd = new Date(reservation.date + 'T' + reservation.end);if (reservation.date < today) {return '已結束';} else if (reservation.date === today) {if (now >= reservationStart && now <= reservationEnd) {return '進行中';} else if (now < reservationStart) {return '即將開始';} else {return '已結束';}} else {return '即將到來';}}function getStatusClass(status) {switch(status) {case '進行中':return 'status-current';case '即將開始':case '即將到來':return 'status-upcoming';case '已結束':return 'status-past';default:return 'status-upcoming';}}function formatDate(dateStr) {const date = new Date(dateStr);const today = new Date();const tomorrow = new Date();tomorrow.setDate(tomorrow.getDate() + 1);if (date.toDateString() === today.toDateString()) {return '今天';} else if (date.toDateString() === tomorrow.toDateString()) {return '明天';} else {return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' });}}function deleteReservation(id) {if (confirm('確定要刪除這個預約嗎？此操作不可撤銷。')) {reservations = reservations.filter(res => res.id !== id);saveReservations();displayReservationsManagement();displayReservations();updateRoomDisplay();updateStatusDisplay();alert('預約已刪除');}}function editReservation(id) {const reservation = reservations.find(res => res.id === id);if (!reservation) return;// 切換到預約系統頁面document.getElementById('showBookingBtn').click();// 填充表單document.getElementById('meetingRoom').value = reservation.room;document.getElementById('bookingDate').value = reservation.date;document.getElementById('userName').value = reservation.booker;document.getElementById('meetingTitle').value = reservation.title;// 生成時間選項并設置時間generateTimeOptions();// 等待時間選項生成完成后設置時間setTimeout(() => {const startOptions = document.querySelectorAll('#startTimeSelector .time-option');const endOptions = document.querySelectorAll('#endTimeSelector .time-option');startOptions.forEach(option => {if (option.dataset.time === reservation.start) {option.classList.add('selected');}});endOptions.forEach(option => {if (option.dataset.time === reservation.end) {option.classList.add('selected');}});// 更新顯示document.getElementById('startTimeDisplay').textContent = reservation.start;document.getElementById('endTimeDisplay').textContent = reservation.end;// 刪除原預約reservations = reservations.filter(res => res.id !== id);saveReservations();alert('預約信息已加載到表單中，請修改后重新提交');}, 100);}// 添加篩選器事件監聽器document.addEventListener('DOMContentLoaded', function() {const filterRoom = document.getElementById('filterRoom');const filterDate = document.getElementById('filterDate');const searchBooker = document.getElementById('searchBooker');if (filterRoom) {filterRoom.addEventListener('change', displayFilteredReservations);}if (filterDate) {filterDate.addEventListener('change', displayFilteredReservations);}if (searchBooker) {searchBooker.addEventListener('input', displayFilteredReservations);}});// 頁面加載時根據localStorage顯示上次頁面window.addEventListener('DOMContentLoaded', function() {const lastView = localStorage.getItem('lastView');if (lastView === 'status') {document.getElementById('bookingSystem').style.display = 'none';document.getElementById('statusDisplay').style.display = 'block';document.getElementById('roomManagement').style.display = 'none';document.getElementById('reservationManagement').style.display = 'none';} else if (lastView === 'management') {document.getElementById('bookingSystem').style.display = 'none';document.getElementById('statusDisplay').style.display = 'none';document.getElementById('roomManagement').style.display = 'block';document.getElementById('reservationManagement').style.display = 'none';} else if (lastView === 'reservationManagement') {document.getElementById('bookingSystem').style.display = 'none';document.getElementById('statusDisplay').style.display = 'none';document.getElementById('roomManagement').style.display = 'none';document.getElementById('reservationManagement').style.display = 'block';displayReservationsManagement();} else {document.getElementById('bookingSystem').style.display = 'block';document.getElementById('statusDisplay').style.display = 'none';document.getElementById('roomManagement').style.display = 'none';document.getElementById('reservationManagement').style.display = 'none';}});// 更新頁面切換函數function updateSwitchContainerVisibility() {const statusDisplay = document.getElementById('statusDisplay');if (statusDisplay && statusDisplay.style.display !== 'none') {switchContainer.style.display = 'none';enableHoverEvents();} else {switchContainer.style.display = 'flex';disableHoverEvents();}}// 在切換頁面時調用document.getElementById('showBookingBtn').addEventListener('click', updateSwitchContainerVisibility);document.getElementById('showDisplayBtn').addEventListener('click', updateSwitchContainerVisibility);document.getElementById('showManagementBtn').addEventListener('click', updateSwitchContainerVisibility);document.getElementById('showReservationManagementBtn').addEventListener('click', updateSwitchContainerVisibility);document.getElementById('viewDisplayBtn').addEventListener('click', updateSwitchContainerVisibility);// 背景上傳與恢復document.getElementById('bgUploadBtn').addEventListener('click', function() {document.getElementById('bgUpload').click();});document.getElementById('bgUpload').addEventListener('change', function(e) {const file = e.target.files[0];if (!file) return;const reader = new FileReader();reader.onload = function(evt) {document.body.style.backgroundImage = `url('${evt.target.result}')`;document.body.style.backgroundSize = 'cover';document.body.style.backgroundRepeat = 'no-repeat';document.body.style.backgroundAttachment = 'fixed';localStorage.setItem('customBg', evt.target.result);};reader.readAsDataURL(file);});document.getElementById('bgResetBtn').addEventListener('click', function() {localStorage.removeItem('customBg');location.reload();});// 頁面加載時恢復背景(function() {const bg = localStorage.getItem('customBg');if (bg) {document.body.style.backgroundImage = `url('${bg}')`;document.body.style.backgroundSize = 'cover';document.body.style.backgroundRepeat = 'no-repeat';document.body.style.backgroundAttachment = 'fixed';}})();document.addEventListener('DOMContentLoaded', function() {var exportBtn = document.getElementById('exportReservationsBtn');if (exportBtn) {exportBtn.addEventListener('click', function() {// 獲取當前顯示的預約數據const container = document.getElementById('reservationsManagementContainer');const rows = Array.from(container.querySelectorAll('.reservation-item'));if (rows.length === 0) {alert('沒有可導出的預約記錄');return;}// 表頭const header = ['會議室', '日期', '時間', '會議主題', '預約人', '狀態'];// 數據const data = [header];rows.forEach(row => {const cells = row.querySelectorAll('div');// 只取前6列const rowData = [];for (let i = 0; i < 6; i++) {rowData.push(cells[i].innerText.trim());}data.push(rowData);});// 生成工作表const ws = XLSX.utils.aoa_to_sheet(data);const wb = XLSX.utils.book_new();XLSX.utils.book_append_sheet(wb, ws, "預約記錄");// 文件名const today = new Date();const filename = `預約記錄_${today.getFullYear()}${(today.getMonth()+1).toString().padStart(2,'0')}${today.getDate().toString().padStart(2,'0')}.xlsx`;XLSX.writeFile(wb, filename);});}});</script>
</body>
</html>