Update app.py

app.py

@@ -1,76 +1,83 @@
 import gradio as gr
+from datetime import datetime
 
-# --- 設定主題配色 (使用 Gradio 原生 Theme Builder) ---
-# 我們選用 "Zinc" (冷灰) 作為基底，"Gold" (金) 作為強調色
+# --- 設定主題配色 (修正參數名稱錯誤) ---
 theme = gr.themes.Soft(
-    primary_hue="amber",  # 按鈕、強調色用琥珀金
-    neutral_hue="zinc",   # 背景、邊框用鋅灰色 (比純黑更有質感)
+    primary_hue="amber",
+    neutral_hue="zinc",
     font=[gr.themes.GoogleFont("Playfair Display"), "ui-sans-serif", "system-ui", "sans-serif"],
 ).set(
-    # 這裡微調細節，讓它看起來更像 "暗色模式"
-    body_background_fill="#1c1c1c",        # 整體背景：深炭灰 (非純黑)
-    block_background_fill="#262626",       # 區塊背景：稍亮一點的灰
-    block_border_width="0px",              # 去掉生硬的邊框
-    input_background_fill="#333333",       # 輸入框背景：深灰
-    input_border_color="#444444",          # 輸入框邊框
-    text_color="#E0E0E0",                  # 一般文字：灰白 (不刺眼)
-    block_title_text_color="#d4af37",      # 標題文字：香檳金
-    button_primary_background_fill="#d4af37", # 主按鈕背景：香檳金
-    button_primary_text_color="#000000",      # 主按鈕文字：黑色
+    body_background_fill="#1c1c1c",        
+    block_background_fill="#262626",       
+    block_border_width="0px",              
+    input_background_fill="#333333",       
+    input_border_color="#444444",          
+    body_text_color="#E0E0E0",             # ⚠️ 修正：這裡改成 body_text_color
+    block_title_text_color="#d4af37",      
+    button_primary_background_fill="#d4af37", 
+    button_primary_text_color="#000000",      
 )
 
-# --- 自定義 CSS (只處理 Logo 和特殊排版) ---
+# --- 自定義 CSS ---
 custom_css = """
-/* 隱藏 Gradio 預設的 footer */
 footer {visibility: hidden}
-
-/* 標題區域美化 */
-.header-box {
-    text-align: center;
-    padding: 30px 0;
-    margin-bottom: 20px;
-    border-bottom: 1px solid #d4af37;
-}
-.header-title {
-    font-family: 'Playfair Display', serif;
-    font-size: 42px;
-    color: #d4af37; /* 香檳金 */
-    letter-spacing: 3px;
-    margin: 0;
-}
-.header-subtitle {
-    font-family: sans-serif;
-    color: #888;
-    font-size: 14px;
-    margin-top: 10px;
-    letter-spacing: 1px;
-}
-/* 讓日曆選單不要太亮 */
-input[type="datetime-local"] {
-    color-scheme: dark;
-}
+.header-box { text-align: center; padding: 30px 0; margin-bottom: 20px; border-bottom: 1px solid #d4af37; }
+.header-title { font-family: 'Playfair Display', serif; font-size: 42px; color: #d4af37; letter-spacing: 3px; margin: 0; }
+.header-subtitle { font-family: sans-serif; color: #888; font-size: 14px; margin-top: 10px; letter-spacing: 1px; }
+input[type="datetime-local"] { color-scheme: dark; }
 """
 
-# --- 模擬資料與邏輯 ---
-def get_available_slots(date_str):
-    # 這裡未來接 Supabase
-    return ["18:00 (剩 4 位)", "19:30 (剩 2 位)", "21:00 (已客滿)"]
+# --- 核心邏輯：動態計算時段 ---
+def update_time_slots(date_obj):
+    if date_obj is None:
+        return gr.update(choices=[]), "請先選擇日期"
+    
+    # 取得星期幾 (0=週一, 1=週二 ... 4=週五, 5=週六, 6=週日)
+    weekday = date_obj.weekday()
+    
+    # 基礎時段 (每天都有)
+    slots = ["18:00", "18:30", "19:00", "19:30", "20:00", "20:30", 
+             "21:00", "21:30", "22:00", "22:30", "23:00", "23:30", 
+             "00:00", "00:30", "01:00"]
+    
+    # 判斷營業時間
+    if weekday == 4 or weekday == 5: 
+        # --- 週五 (4) 與 週六 (5) ---
+        # 營業到 03:00，最後訂位開放到 02:00 或 02:30
+        slots.extend(["01:30", "02:00", "02:30"])
+        status_msg = f"📅 選擇了 {date_obj.strftime('%m/%d')} (週末時段 營業至 03:00)"
+    else:
+        # --- 週日 到 週四 ---
+        # 營業到 02:00，最後訂位開放到 01:00 或 01:30
+        slots.extend(["01:30"])
+        status_msg = f"📅 選擇了 {date_obj.strftime('%m/%d')} (平日時段 營業至 02:00)"
+        
+    return gr.update(choices=slots, value=slots[0]), status_msg
 
+# --- 模擬寫入資料 ---
 def handle_booking(name, tel, date, time, pax):
-    if not name or not tel:
-        return "⚠️ 請完整填寫資料"
+    if not name or not tel or not date or not time:
+        return "⚠️ 請完整填寫所有欄位 (姓名、電話、日期、時間)"
+    
+    # 這裡格式化一下顯示的日期
+    date_str = date.strftime("%Y-%m-%d")
+    
     return f"""
     <div style='background: #2a2a2a; padding: 20px; border-left: 3px solid #d4af37; color: #fff;'>
         <h3 style='color: #d4af37; margin:0;'>🥂 預約申請已提交</h3>
-        <p>親愛的 <b>{name}</b>，我們已收到您的資訊。<br>
-        系統將發送確認信至您的信箱，請留意查收。</p>
+        <p>親愛的 <b>{name}</b>，我們已收到您的資訊。</p>
+        <ul style='color: #ccc;'>
+            <li>日期：{date_str}</li>
+            <li>時間：{time}</li>
+            <li>人數：{pax} 位</li>
+        </ul>
+        <p>系統將發送確認信至您的信箱，請留意查收。</p>
     </div>
     """
 
 # --- 介面佈局 ---
 with gr.Blocks(theme=theme, css=custom_css, title="Cié Cié Taipei") as demo:
     
-    # 1. 頂部 Logo 區
     gr.HTML("""
         <div class="header-box">
             <h1 class="header-title">Cié Cié Taipei</h1>
@@ -78,41 +85,33 @@ with gr.Blocks(theme=theme, css=custom_css, title="Cié Cié Taipei") as demo:
         </div>
     """)
 
-    # 2. 主要操作區 (分左右兩欄)
     with gr.Row():
-        # 左側：選擇時間與人數
         with gr.Column(scale=1):
             gr.Markdown("### 📅 預約資訊")
-            # 日期改用 Textbox + type='date' 比較穩定，或者用 Dropdown
-            # 這裡暫用 Calendar，但在暗色模式下有些瀏覽器會顯示白色，這是瀏覽器限制
-            # 建議實務上也可以用 Dropdown 選「今天/明天/後天」
-            booking_date = gr.DateTime(label="日期與時間", include_time=False) 
+            # ⚠️ 重點：這裡設定 type="datetime"，讓 Python 直接拿到 datetime 物件，方便判斷星期幾
+            booking_date = gr.DateTime(label="日期與時間", include_time=False, type="datetime") 
             
             pax_count = gr.Slider(minimum=1, maximum=10, value=2, step=1, label="用餐人數", 
                                   info="超過 10 人請直接來電")
 
-        # 右側：時段與狀態
         with gr.Column(scale=1):
              gr.Markdown("### 🕰️ 選擇時段")
-             # 這裡用一個明顯的狀態顯示區
-             status_box = gr.Markdown("請選擇日期以查看剩餘座位", visible=True)
+             status_box = gr.Markdown("請選擇日期以查看剩餘座位")
              time_slot = gr.Dropdown(choices=[], label="可用時段", interactive=True)
 
-    # 3. 個人資料區
     gr.Markdown("### 👤 聯絡人資料")
     with gr.Group():
         with gr.Row():
             cust_name = gr.Textbox(label="訂位姓名", placeholder="ex. 王小明")
             cust_tel = gr.Textbox(label="手機號碼", placeholder="ex. 0912-345-678")
 
-    # 4. 送出按鈕與結果
     submit_btn = gr.Button("確認預約 Request Booking", size="lg", variant="primary")
     output_msg = gr.HTML(label="系統訊息")
 
     # --- 互動邏輯 ---
-    # 當日期改變，去查時段
+    # 當日期改變時，呼叫 update_time_slots 函式
     booking_date.change(
-        fn=lambda d: (gr.update(choices=["18:00","18:30", "19:00","19:30", "20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00", "23:30", "00:00", "00:30", "01:00", "01:30", "02:00",]), "✅ 已更新時段"),
+        fn=update_time_slots,
         inputs=booking_date,
         outputs=[time_slot, status_box]
     )