Update app.py

app.py

@@ -29,9 +29,9 @@ def get_bookings():
     except:
         return pd.DataFrame()
 
-# 🔥🔥🔥 後端發送邏輯 (暴力發送) 🔥🔥🔥
+# 🔥🔥🔥 發送邏輯 (暴力發送) 🔥🔥🔥
 def send_confirmation_hybrid(booking_id):
-    print(f"收到後端請求，ID: {booking_id}") # Server log
+    print(f"收到後端請求，ID: {booking_id}")
     if not booking_id: return "❌ 錯誤：未讀取到 ID (Backend received None)"
     
     try:
@@ -49,11 +49,10 @@ def send_confirmation_hybrid(booking_id):
         
         log_msg = f"🆔 {booking_id}: "
 
-        # 判斷內容
+        # 判斷是提醒還是確認
         is_reminder = "確認" in current_status
 
         if is_reminder:
-            # 提醒信
             action_label = "提醒"
             mail_subject = f"🔔 訂位提醒: {booking['date']} - Cié Cié Taipei"
             line_text = (
@@ -67,7 +66,7 @@ def send_confirmation_hybrid(booking_id):
             mail_html = f"""
             <div style="background:#1a1a1a; color:#d4af37; padding:20px; border-radius:8px;">
                 <h2 style="text-align:center; border-bottom:1px solid #444;">Cié Cié Taipei</h2>
-                <p style="color:#eee;"><strong>{booking['name']}</strong> 您好，期待您的光臨！這是一封行前提醒。</p>
+                <p style="color:#eee;"><strong>{booking['name']}</strong> 您好，行前提醒：</p>
                 <div style="background:#2a2a2a; padding:15px; margin:20px 0; border-left:4px solid #f1c40f;">
                     <ul style="color:#ddd;">
                         <li>📅 日期：{booking['date']}</li>
@@ -81,7 +80,6 @@ def send_confirmation_hybrid(booking_id):
             </div>
             """
         else:
-            # 確認信
             action_label = "確認"
             mail_subject = f"訂位確認: {booking['date']} - Cié Cié Taipei"
             line_text = (
@@ -136,7 +134,7 @@ def send_confirmation_hybrid(booking_id):
 
     except Exception as e: return f"🔥 嚴重錯誤: {str(e)}"
 
-# --- 卡片渲染 ---
+# 🔥🔥🔥 卡片渲染 (修正：不使用 onclick，改用 data-id) 🔥🔥🔥
 def render_booking_cards():
     df = get_bookings()
     count_html = f"<div style='color:#bbb; margin-bottom:20px; text-align:right; font-size:16px; padding: 0 10px;'>📊 共找到 <span style='color:#fff; font-weight:bold;'>{len(df)}</span> 筆資料</div>"
@@ -147,7 +145,6 @@ def render_booking_cards():
     for index, row in df.iterrows():
         status = row.get('status', '待處理')
         
-        # 狀態與顏色
         status_color = "#ccc"; border_color = "#444"
         if '確認' in status: status_color = "#2ecc71"; border_color = "#2ecc71"
         elif '取消' in status: status_color = "#e74c3c"; border_color = "#e74c3c"
@@ -156,10 +153,10 @@ def render_booking_cards():
         is_canceled = '取消' in status
         is_confirmed = '確認' in status
         
-        # JS 綁定
-        btn_onclick = "" if is_canceled else f"cardAction({row['id']})"
+        # 🟢 修正：移除 onclick，改用 class 和 data-id 屬性
+        # 這樣就不會依賴全域函式是否存在，而是靠下方的監聽器
+        btn_attrs = f"class='op-btn' data-id='{row['id']}'" if not is_canceled else "disabled"
         
-        # 按鈕外觀
         if is_canceled:
             btn_style = "background: #333; color: #666; cursor: not-allowed;"
             btn_text = "🚫 已取消"
@@ -224,7 +221,10 @@ def render_booking_cards():
                 <div style="font-size: 1.1em; color: #000; font-weight: 900; background: #e0e0e0; padding: 8px 12px; border-radius: 6px; font-family: monospace;">
                     ID: {row['id']}
                 </div>
-                <button onclick="{btn_onclick}" style="border: none; padding: 14px 30px; border-radius: 8px; font-size: 1.1em; transition: all 0.2s; min-width: 150px; cursor: pointer; {btn_style}">
+                
+                <button {btn_attrs} style="
+                    border: none; padding: 14px 30px; border-radius: 8px; font-size: 1.1em; 
+                    transition: all 0.2s; min-width: 150px; cursor: pointer; {btn_style}">
                     {btn_text}
                 </button>
             </div>
@@ -245,15 +245,62 @@ def check_login(user, password):
         }
     else: return {error_msg: "<span style='color: red'>❌ 帳號或密碼錯誤</span>"}
 
+# 🔥🔥🔥 絕對有效的事件監聽器 (Event Delegation) 🔥🔥🔥
+# 這次不是定義函式，而是直接監聽整個文件的點擊事件。
+# 只要點擊了 class="op-btn" 的元素，就執行。這不依賴作用域，一定有效。
+GLOBAL_JS = """
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    console.log("🟢 訂位系統監聽器已啟動");
+});
+
+// 全域監聽點擊 (Event Delegation)
+document.addEventListener('click', function(e) {
+    // 檢查點擊的目標是否是我們的操作按鈕
+    if (e.target && e.target.classList.contains('op-btn')) {
+        const id = e.target.getAttribute('data-id');
+        console.log("👉 偵測到按鈕點擊，ID:", id);
+        
+        if (!id) return;
+
+        // 1. 找輸入框
+        const idInput = document.querySelector('#hidden_id_input input');
+        
+        if (idInput) {
+            console.log("✅ 寫入 ID 到 Gradio...");
+            idInput.value = id;
+            idInput.dispatchEvent(new Event('input', { bubbles: true }));
+            
+            // 2. 觸發發送按鈕
+            setTimeout(() => {
+                const sendBtn = document.querySelector('#hidden_send_btn');
+                if (sendBtn) {
+                    console.log("🚀 觸發 Python 發送邏輯...");
+                    sendBtn.click();
+                } else {
+                    console.error("❌ 找不到 hidden_send_btn");
+                }
+            }, 100);
+        } else {
+            console.error("❌ 找不到 hidden_id_input");
+            alert("系統錯誤：找不到對應的輸入框，請重新整理頁面。");
+        }
+    }
+});
+</script>
+"""
 
-# --- CSS ---
+# --- CSS (確保按鈕可按) ---
 custom_css = """
 body, .gradio-container { background-color: #0F0F0F; color: #fff; }
 #booking_display { height: auto !important; max-height: none !important; overflow: visible !important; margin-bottom: 50px; }
 button:active { transform: scale(0.96); }
 #header-panel { background: #1a1a1a; padding: 15px; margin-bottom: 20px; border-radius: 10px; }
 
-/* 🔥 隱藏操作區：用 CSS 把元件移出畫面，確保 JS 仍然可以存取 */
+/* 讓操作按鈕有點擊指標 */
+.op-btn { pointer-events: auto !important; }
+
+/* 隱藏操作區：移出畫面外 */
 #hidden_ops {
     position: absolute !important;
     left: -9999px !important;
@@ -264,50 +311,10 @@ button:active { transform: scale(0.96); }
 }
 """
 
-# 🔥🔥🔥 暴力注入 JS：直接寫在 HTML 裡，確保 cardAction 絕對全域可用 🔥🔥🔥
-# 這段代碼會被直接渲染到網頁頂部，解決 ReferenceError
-GLOBAL_JS = """
-<script>
-console.log("✨ 訂位系統腳本已載入 (v5.1)");
-
-// 直接定義在 window 物件上，保證全域可見
-window.cardAction = function(id) {
-    console.log("👉 按下 ID:", id);
-    
-    // 1. 找輸入框 (相容 input 和 textarea)
-    let idInput = document.querySelector('#hidden_id_input input');
-    
-    if (idInput) {
-        console.log("✅ 找到隱藏輸入框，寫入 ID...");
-        // 強制寫入值
-        idInput.value = id;
-        // 觸發 React/Gradio 的更新事件
-        let event = new Event('input', { bubbles: true });
-        idInput.dispatchEvent(event);
-        
-        // 2. 觸發按鈕
-        setTimeout(() => {
-            let sendBtn = document.querySelector('#hidden_send_btn');
-            if (sendBtn) {
-                console.log("🚀 觸發發送按鈕...");
-                sendBtn.click();
-            } else {
-                console.error("❌ 找不到發送按鈕 (#hidden_send_btn)");
-                alert("系統錯誤：找不到發送按鈕，請重新整理頁面");
-            }
-        }, 200); // 延遲 200ms 確保數值已更新
-    } else {
-        console.error("❌ 找不到隱藏輸入框 (#hidden_id_input)");
-        alert("系統錯誤：找不到輸入框，請重新整理頁面");
-    }
-}
-</script>
-"""
-
 # --- 介面 ---
 with gr.Blocks(title="Admin") as demo:
     
-    # 注入 JS 腳本 (直接放在最上面)
+    # 注入 JS (直接執行，不包在 function 裡)
     gr.HTML(GLOBAL_JS)
     
     with gr.Group(visible=True) as login_row:
@@ -325,7 +332,7 @@ with gr.Blocks(title="Admin") as demo:
         
         booking_display = gr.HTML(elem_id="booking_display")
         
-        # 🔥 隱藏操作區：visible=True 但被 CSS 移出畫面
+        # 隱藏操作區
         with gr.Column(visible=True, elem_id="hidden_ops"):
             hidden_id_input = gr.Number(elem_id="hidden_id_input", precision=0)
             hidden_send_btn = gr.Button("Send", elem_id="hidden_send_btn")