Update app.py

app.py

@@ -29,12 +29,12 @@ def get_bookings():
     except:
         return pd.DataFrame()
 
-# 🔥🔥🔥 5.0 修正版：邏輯統一，不再分流，保證發送 🔥🔥🔥
+# 🔥🔥🔥 後端發送邏輯 (暴力發送) 🔥🔥🔥
 def send_confirmation_hybrid(booking_id):
-    if not booking_id: return "❌ 錯誤：未讀取到 ID"
+    print(f"收到後端請求，ID: {booking_id}") # Server log
+    if not booking_id: return "❌ 錯誤：未讀取到 ID (Backend received None)"
     
     try:
-        # 1. 撈資料
         res = supabase.table("bookings").select("*").eq("id", booking_id).execute()
         if not res.data: return "❌ 找不到訂單"
         booking = res.data[0]
@@ -49,16 +49,13 @@ def send_confirmation_hybrid(booking_id):
         
         log_msg = f"🆔 {booking_id}: "
 
-        # 2. 準備內容 (不管發送有沒有成功，內容先準備好)
-        # 如果狀態包含「確認」，就準備「提醒信」的內容
-        # 否則，準備「確認信」的內容
+        # 判斷內容
         is_reminder = "確認" in current_status
 
         if is_reminder:
-            # --- 🅰️ 提醒信內容 (Reminder) ---
+            # 提醒信
             action_label = "提醒"
             mail_subject = f"🔔 訂位提醒: {booking['date']} - Cié Cié Taipei"
-            
             line_text = (
                 f"🔔 訂位提醒\n\n"
                 f"{booking['name']} 您好，期待今晚與您相見！\n\n"
@@ -67,29 +64,26 @@ def send_confirmation_hybrid(booking_id):
                 f"👥 人數：{booking['pax']} 位\n\n"
                 f"座位已為您準備好，若需變更請聯繫我們。"
             )
-            
             mail_html = f"""
-            <div style="background:#1a1a1a; color:#d4af37; padding:20px; border-radius:8px; font-family:sans-serif; border:1px solid #333;">
-                <h2 style="text-align:center; border-bottom:1px solid #444; padding-bottom:15px;">Cié Cié Taipei</h2>
-                <p style="color:#eee; font-size:16px;"><strong>{booking['name']}</strong> 您好，期待您的光臨！</p>
-                <div style="background:#2a2a2a; padding:15px; border-radius:8px; margin:20px 0; border-left:4px solid #f1c40f;">
-                    <ul style="color:#ddd; padding-left:20px; line-height:1.8;">
-                        <li>📅 日期：<strong style="color:#fff;">{booking['date']}</strong></li>
-                        <li>⏰ 時間：<strong style="color:#fff;">{booking['time']}</strong></li>
-                        <li>👥 人數：<strong style="color:#fff;">{booking['pax']} 位</strong></li>
+            <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>
+                <div style="background:#2a2a2a; padding:15px; margin:20px 0; border-left:4px solid #f1c40f;">
+                    <ul style="color:#ddd;">
+                        <li>📅 日期：{booking['date']}</li>
+                        <li>⏰ 時間：{booking['time']}</li>
+                        <li>👥 人數：{booking['pax']} 位</li>
                     </ul>
                 </div>
                 <div style="text-align:center; margin-top:30px;">
-                    <span style="color:#888; font-size:14px;">這是一封行前提醒。</span><br><br>
-                    <a href="{cancel_link}" style="display:inline-block; border:1px solid #555; color:#aaa; padding:10px 20px; text-decoration:none; border-radius:50px; font-size:12px;">若無法前來，請點此取消</a>
+                    <a href="{cancel_link}" style="color:#aaa;">若無法前來，請點此取消</a>
                 </div>
             </div>
             """
         else:
-            # --- 🅱️ 確認信內容 (Confirmation) ---
+            # 確認信
             action_label = "確認"
             mail_subject = f"訂位確認: {booking['date']} - Cié Cié Taipei"
-            
             line_text = (
                 f"✅ 訂位確認\n\n"
                 f"{booking['name']} 您好，已收到您的預約。\n\n"
@@ -98,28 +92,25 @@ def send_confirmation_hybrid(booking_id):
                 f"👥 人數：{booking['pax']} 位\n\n"
                 f"請務必查收 Email 並點擊「確認出席」，謝謝！"
             )
-            
             mail_html = f"""
-            <div style="background:#1a1a1a; color:#d4af37; padding:20px; border-radius:8px; font-family:sans-serif; border:1px solid #333;">
-                <h2 style="text-align:center; border-bottom:1px solid #444; padding-bottom:15px;">Cié Cié Taipei</h2>
-                <p style="color:#eee; font-size:16px;"><strong>{booking['name']}</strong> 您好，請確認您的訂位：</p>
-                <div style="background:#2a2a2a; padding:15px; border-radius:8px; margin:20px 0; border-left:4px solid #2ecc71;">
-                    <ul style="color:#ddd; padding-left:20px; line-height:1.8;">
-                        <li>📅 日期：<strong style="color:#fff;">{booking['date']}</strong></li>
-                        <li>⏰ 時間：<strong style="color:#fff;">{booking['time']}</strong></li>
-                        <li>👥 人數：<strong style="color:#fff;">{booking['pax']} 位</strong></li>
+            <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>
+                <div style="background:#2a2a2a; padding:15px; margin:20px 0; border-left:4px solid #2ecc71;">
+                    <ul style="color:#ddd;">
+                        <li>📅 日期：{booking['date']}</li>
+                        <li>⏰ 時間：{booking['time']}</li>
+                        <li>👥 人數：{booking['pax']} 位</li>
                     </ul>
                 </div>
                 <div style="text-align:center; margin-top:30px;">
-                    <a href="{confirm_link}" style="display:inline-block; background:#d4af37; color:#000; padding:12px 30px; text-decoration:none; border-radius:50px; font-weight:bold; margin-right:10px;">✅ 確認出席 (Confirm)</a>
-                    <a href="{cancel_link}" style="display:inline-block; border:1px solid #555; color:#aaa; padding:11px 29px; text-decoration:none; border-radius:50px;">🚫 取消 (Cancel)</a>
+                    <a href="{confirm_link}" style="background:#d4af37; color:#000; padding:12px 30px; text-decoration:none; border-radius:50px; font-weight:bold;">✅ 確認出席</a>
+                    <a href="{cancel_link}" style="color:#aaa; margin-left:20px;">取消</a>
                 </div>
             </div>
             """
 
-        # 3. 🔥🔥🔥 關鍵：不管上面是走哪條路，這裡統一執行發送，絕對不跳過 🔥🔥🔥
-        
-        # 發送 Email
+        # 執行發送
         if email and "@" in email and GAS_MAIL_URL:
             try:
                 requests.post(GAS_MAIL_URL, json={"to": email, "subject": mail_subject, "htmlBody": mail_html, "name": "Cié Cié Taipei"})
@@ -128,7 +119,6 @@ def send_confirmation_hybrid(booking_id):
         else:
             log_msg += "⚠️ 無Email "
         
-        # 發送 LINE
         if user_id and len(str(user_id)) > 5 and LINE_ACCESS_TOKEN:
             try:
                 requests.post("https://api.line.me/v2/bot/message/push", 
@@ -139,16 +129,14 @@ def send_confirmation_hybrid(booking_id):
         else:
             log_msg += "⚠️ 無LINE ID "
 
-        # 4. 更新資料庫 (只有確認信才更新狀態，提醒信不更新)
         if not is_reminder:
             supabase.table("bookings").update({"status": "已發確認信"}).eq("id", booking_id).execute()
         
         return log_msg
 
-    except Exception as e: 
-        return f"🔥 嚴重錯誤: {str(e)}"
+    except Exception as e: return f"🔥 嚴重錯誤: {str(e)}"
 
-# --- 介面渲染 (保持您要的樣式) ---
+# --- 卡片渲染 ---
 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>"
@@ -257,31 +245,15 @@ def check_login(user, password):
         }
     else: return {error_msg: "<span style='color: red'>❌ 帳號或密碼錯誤</span>"}
 
-# --- JS 邏輯 ---
-js_logic = """
-function() {
-    window.cardAction = function(id) {
-        let idInput = document.querySelector('#hidden_id_input input');
-        if (idInput) {
-            idInput.value = id;
-            idInput.dispatchEvent(new Event('input', { bubbles: true }));
-        }
-        setTimeout(() => {
-            const sendBtn = document.querySelector('#hidden_send_btn');
-            if (sendBtn) sendBtn.click();
-        }, 150);
-    }
-}
-"""
 
-# --- 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; }
 
-/* 絕對定位移出畫面，確保 JS 抓得到 */
+/* 🔥 隱藏操作區：用 CSS 把元件移出畫面，確保 JS 仍然可以存取 */
 #hidden_ops {
     position: absolute !important;
     left: -9999px !important;
@@ -292,8 +264,52 @@ 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 腳本 (直接放在最上面)
+    gr.HTML(GLOBAL_JS)
+    
     with gr.Group(visible=True) as login_row:
         gr.Markdown("# 🔒 Login")
         with gr.Row():
@@ -309,7 +325,7 @@ with gr.Blocks(title="Admin") as demo:
         
         booking_display = gr.HTML(elem_id="booking_display")
         
-        # 🔥 確保 visible=True
+        # 🔥 隱藏操作區：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")
@@ -321,7 +337,6 @@ with gr.Blocks(title="Admin") as demo:
         )
         refresh_btn.click(render_booking_cards, outputs=booking_display)
         
-        # 發送事件
         hidden_send_btn.click(
             send_confirmation_hybrid, 
             inputs=hidden_id_input, 
@@ -331,7 +346,7 @@ with gr.Blocks(title="Admin") as demo:
             outputs=booking_display
         )
 
-    demo.launch(css=custom_css, js=js_logic)
+    demo.launch(css=custom_css)
 
 if __name__ == "__main__":
     demo.launch()