Update app.py

app.py

@@ -1,7 +1,7 @@
 import gradio as gr
-from datetime import datetime
+from datetime import datetime, timedelta
 
-# --- 設定主題配色 (修正參數名稱錯誤) ---
+# --- 設定主題配色 (維持之前的黑金高級感) ---
 theme = gr.themes.Soft(
     primary_hue="amber",
     neutral_hue="zinc",
@@ -12,7 +12,7 @@ theme = gr.themes.Soft(
     block_border_width="0px",              
     input_background_fill="#333333",       
     input_border_color="#444444",          
-    body_text_color="#E0E0E0",             # ⚠️ 修正：這裡改成 body_text_color
+    body_text_color="#E0E0E0",             
     block_title_text_color="#d4af37",      
     button_primary_background_fill="#d4af37", 
     button_primary_text_color="#000000",      
@@ -24,17 +24,37 @@ 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; }
+/* 強制讓下拉選單的選項背景也是深色 (避免展開時變白) */
+.wrap { background-color: #262626 !important; }
 """
 
+# --- 核心邏輯：產生未來 30 天的日期選項 ---
+def get_date_options():
+    options = []
+    today = datetime.now()
+    weekdays = ["(一)", "(二)", "(三)", "(四)", "(五)", "(六)", "(日)"]
+    
+    for i in range(30): # 開放未來 30 天
+        current_date = today + timedelta(days=i)
+        # 格式：2026-01-16 (五)
+        date_str = f"{current_date.strftime('%Y-%m-%d')} {weekdays[current_date.weekday()]}"
+        options.append(date_str)
+    return options
+
 # --- 核心邏輯：動態計算時段 ---
-def update_time_slots(date_obj):
-    if date_obj is None:
+def update_time_slots(date_str):
+    if not date_str:
         return gr.update(choices=[]), "請先選擇日期"
     
-    # 取得星期幾 (0=週一, 1=週二 ... 4=週五, 5=週六, 6=週日)
-    weekday = date_obj.weekday()
-    
+    # 解析日期字串，例如 "2026-01-16 (五)" -> 找出星期幾
+    # 我們可以直接看括號裡的字，或是重新 parse 日期，這裡用 parse 比較穩
+    try:
+        clean_date_str = date_str.split(" ")[0] # 拿掉後面的 (五)
+        date_obj = datetime.strptime(clean_date_str, "%Y-%m-%d")
+        weekday = date_obj.weekday() # 0=週一, ... 4=週五, 5=週六
+    except:
+        return gr.update(choices=[]), "日期格式錯誤"
+
     # 基礎時段 (每天都有)
     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", 
@@ -43,35 +63,30 @@ def update_time_slots(date_obj):
     # 判斷營業時間
     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)"
+        status_msg = f"📅 選擇了 {date_str} (週末時段 營業至 03:00)"
     else:
         # --- 週日 到 週四 ---
-        # 營業到 02:00，最後訂位開放到 01:00 或 01:30
         slots.extend(["01:30"])
-        status_msg = f"📅 選擇了 {date_obj.strftime('%m/%d')} (平日時段 營業至 02:00)"
+        status_msg = f"📅 選擇了 {date_str} (平日時段 營業至 02:00)"
         
-    return gr.update(choices=slots, value=slots[0]), status_msg
+    return gr.update(choices=slots, value=slots[0] if slots else None), status_msg
 
 # --- 模擬寫入資料 ---
-def handle_booking(name, tel, date, time, pax):
-    if not name or not tel or not date or not time:
-        return "⚠️ 請完整填寫所有欄位 (姓名、電話、日期、時間)"
-    
-    # 這裡格式化一下顯示的日期
-    date_str = date.strftime("%Y-%m-%d")
+def handle_booking(name, tel, date_str, time, pax):
+    if not name or not tel or not date_str or not time:
+        return "⚠️ 請完整填寫所有欄位"
     
     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>，我們已收到您的資訊。</p>
-        <ul style='color: #ccc;'>
+        <ul style='color: #ccc; list-style: none; padding: 0;'>
             <li>日期：{date_str}</li>
             <li>時間：{time}</li>
             <li>人數：{pax} 位</li>
+            <li>貴賓：{name} ({tel})</li>
         </ul>
-        <p>系統將發送確認信至您的信箱，請留意查收。</p>
+        <p style='font-size: 0.9em; color: #888;'>系統將發送確認信至您的信箱，請留意查收。</p>
     </div>
     """
 
@@ -88,8 +103,15 @@ with gr.Blocks(theme=theme, css=custom_css, title="Cié Ci�� Taipei") as demo:
     with gr.Row():
         with gr.Column(scale=1):
             gr.Markdown("### 📅 預約資訊")
-            # ⚠️ 重點：這裡設定 type="datetime"，讓 Python 直接拿到 datetime 物件，方便判斷星期幾
-            booking_date = gr.DateTime(label="日期與時間", include_time=False, type="datetime") 
+            
+            # 🌟 修正重點：改用 Dropdown，並預先填入未來 30 天的選項
+            date_options = get_date_options()
+            booking_date = gr.Dropdown(
+                choices=date_options, 
+                label="選擇日期 (未來 30 天)", 
+                value=date_options[0] if date_options else None,
+                interactive=True
+            )
             
             pax_count = gr.Slider(minimum=1, maximum=10, value=2, step=1, label="用餐人數", 
                                   info="超過 10 人請直接來電")
@@ -109,13 +131,16 @@ with gr.Blocks(theme=theme, css=custom_css, title="Cié Cié Taipei") as demo:
     output_msg = gr.HTML(label="系統訊息")
 
     # --- 互動邏輯 ---
-    # 當日期改變時，呼叫 update_time_slots 函式
+    # 當「日期選單」改變時，觸發更新
     booking_date.change(
         fn=update_time_slots,
         inputs=booking_date,
         outputs=[time_slot, status_box]
     )
     
+    # 頁面載入時，自動觸發一次 (讓時段選單有預設值)
+    demo.load(fn=update_time_slots, inputs=booking_date, outputs=[time_slot, status_box])
+
     submit_btn.click(
         handle_booking,
         inputs=[cust_name, cust_tel, booking_date, time_slot, pax_count],