Update index.html

index.html

@@ -29,7 +29,15 @@
     h1 {
       text-align: center;
       color: #2c3e50;
+      margin-bottom: 10px;
+    }
+
+    .status-indicator {
+      text-align: center;
+      font-size: 0.9rem;
+      color: #666;
       margin-bottom: 20px;
+      height: 20px;
     }
 
     /* 頂部交集結果區塊 */
@@ -168,7 +176,6 @@
       box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
     }
 
-    /* 響應式微調 */
     @media (max-width: 768px) {
       .members-grid {
         grid-template-columns: repeat(2, 1fr);
@@ -176,7 +183,7 @@
     }
   </style>
 
-  <!-- Firebase 9 SDK (Compat 模式，方便單一檔案整合) -->
+  <!-- Firebase SDK -->
   <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
   <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-database-compat.js"></script>
 </head>
@@ -184,12 +191,13 @@
 
   <div class="container">
     <h1>📅 7人空檔時間協調行事曆 (8/14 - 9/2)</h1>
+    <div id="sync-status" class="status-indicator">📡 連線中...</div>
 
     <!-- 共同有空交集區塊 -->
     <div class="intersection-card">
       <h2>🎉 全員皆有空的日期（交集）：</h2>
       <div id="intersection-results" class="available-tags">
-        <span class="no-match">計算中或目前尚無所有人都有空的日期...</span>
+        <span class="no-match">讀取中...</span>
       </div>
     </div>
 
@@ -206,12 +214,11 @@
     const db = firebase.database();
     const scheduleRef = db.ref("schedule_2026");
 
-    // 2. 設定參數
     const members = ["桑", "吳", "張", "趙", "謝", "黃", "康"];
     const startDate = new Date("2026-08-14");
     const endDate = new Date("2026-09-02");
 
-    // 生成日期陣列 YYYY-MM-DD
+    // 生成日期列表
     const dateList = [];
     let curr = new Date(startDate);
     while (curr <= endDate) {
@@ -227,8 +234,9 @@
       curr.setDate(curr.getDate() + 1);
     }
 
-    // 3. 渲染 HTML 結構
+    // 2. 渲染 DOM
     const calendarContainer = document.getElementById("calendar");
+    const syncStatus = document.getElementById("sync-status");
 
     dateList.forEach(({ dateStr, displayStr }) => {
       const dateCard = document.createElement("div");
@@ -242,11 +250,11 @@
             <div class="member-name-row">
               <span>${name}</span>
               <label>
-                <input type="checkbox" id="chk-${dateStr}-${name}" onchange="updateData('${dateStr}', '${name}')">
+                <input type="checkbox" id="chk-${dateStr}-${name}" onchange="saveData('${dateStr}', '${name}')">
                 有空
               </label>
             </div>
-            <input type="text" id="txt-${dateStr}-${name}" placeholder="標註時間/備註..." onchange="updateData('${dateStr}', '${name}')" onkeydown="if(event.key==='Enter') this.blur()">
+            <input type="text" id="txt-${dateStr}-${name}" placeholder="輸入時間..." oninput="saveData('${dateStr}', '${name}')">
           </div>
         `;
       });
@@ -254,7 +262,7 @@
       dateCard.innerHTML = `
         <div class="date-header">
           <span>${displayStr}</span>
-          <span class="status-badge" id="badge-${dateStr}">填寫中</span>
+          <span class="status-badge" id="badge-${dateStr}">計算中...</span>
         </div>
         <div class="members-grid">
           ${membersHTML}
@@ -264,19 +272,40 @@
       calendarContainer.appendChild(dateCard);
     });
 
-    // 4. 更新 Firebase 資料
-    function updateData(dateStr, memberName) {
-      const isAvailable = document.getElementById(`chk-${dateStr}-${memberName}`).checked;
-      const textNote = document.getElementById(`txt-${dateStr}-${memberName}`).value;
-
-      scheduleRef.child(dateStr).child(memberName).set({
-        available: isAvailable,
-        note: textNote
-      });
+    // 3. 儲存資料機制（防抖動）
+    const debounceTimers = {};
+    function saveData(dateStr, memberName) {
+      syncStatus.innerText = "⏳ 儲存中...";
+      syncStatus.style.color = "#e67e22";
+
+      const key = `${dateStr}-${memberName}`;
+      clearTimeout(debounceTimers[key]);
+
+      debounceTimers[key] = setTimeout(() => {
+        const isAvailable = document.getElementById(`chk-${dateStr}-${memberName}`).checked;
+        const textNote = document.getElementById(`txt-${dateStr}-${memberName}`).value;
+
+        scheduleRef.child(dateStr).child(memberName).set({
+          available: isAvailable,
+          note: textNote
+        }, (error) => {
+          if (error) {
+            syncStatus.innerText = "❌ 儲存失敗！請檢查 Firebase 規則";
+            syncStatus.style.color = "#e74c3c";
+            console.error("Firebase 保存失敗:", error);
+          } else {
+            syncStatus.innerText = "✅ 所有變更已即時同步保存";
+            syncStatus.style.color = "#27ae60";
+          }
+        });
+      }, 300);
     }
 
-    // 5. 監聽 Firebase 資料庫變更並更新 UI
+    // 4. 即時監聽與畫面更新
     scheduleRef.on("value", (snapshot) => {
+      syncStatus.innerText = "✅ 資料庫已連線，即時同步中";
+      syncStatus.style.color = "#27ae60";
+
       const data = snapshot.val() || {};
       const fullAvailableDates = [];
 
@@ -290,7 +319,7 @@
           const chkEl = document.getElementById(`chk-${dateStr}-${name}`);
           const txtEl = document.getElementById(`txt-${dateStr}-${name}`);
 
-          // 避免覆蓋正在輸入中的 input content
+          // 若使用者當前正在輸入該格，不打斷輸入
           if (document.activeElement !== txtEl) {
             txtEl.value = memberData.note || "";
           }
@@ -304,10 +333,9 @@
         const cardEl = document.getElementById(`card-${dateStr}`);
         const badgeEl = document.getElementById(`badge-${dateStr}`);
 
-        // 比對交集：7 個人都勾選有空
         if (availableCount === members.length) {
           cardEl.classList.add("all-available");
-          badgeEl.innerText = "全員皆有空！";
+          badgeEl.innerText = "🎉 全員皆有空！";
           fullAvailableDates.push(displayStr);
         } else {
           cardEl.classList.remove("all-available");
@@ -315,15 +343,19 @@
         }
       });
 
-      // 更新頂部交集結果
+      // 更新頂部交集
       const resultsContainer = document.getElementById("intersection-results");
       if (fullAvailableDates.length > 0) {
         resultsContainer.innerHTML = fullAvailableDates
           .map(d => `<span class="tag">${d}</span>`)
           .join("");
       } else {
-        resultsContainer.innerHTML = `<span class="no-match">目前尚無所有人都有空的日期，大家快來勾選！</span>`;
+        resultsContainer.innerHTML = `<span class="no-match">目前尚無所有人都有空的日期</span>`;
       }
+    }, (error) => {
+      syncStatus.innerText = "❌ 無法讀取資料，請至 Firebase 設定 Rules 權限！";
+      syncStatus.style.color = "#e74c3c";
+      console.error("Firebase 讀取失敗:", error);
     });
   </script>
 </body>