Spaces:

zenityx
/

RuamTalayKitchen

Running

App Files Files Community

zenityx commited on May 26, 2025

Commit

ba6038e

verified ·

1 Parent(s): ca25b44

Update index.html

Browse files

Files changed (1) hide show

index.html +112 -98

index.html CHANGED Viewed

@@ -2,118 +2,132 @@
 <html lang="my">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <title>အော်ဒါများ (မီးဖိုချောင်)</title>
   <link rel="stylesheet" href="style.css">
   <style>
-    body { background: #eef7fa; font-family: "Pyidaungsu", "Noto Sans Myanmar", "Tahoma", sans-serif;}
-    .kitchen-table { width:100%; border-collapse: collapse; margin-top: 1em; }
-    .kitchen-table th, .kitchen-table td { border: 1px solid #b3d2e5; padding: 6px 8px; text-align: left; }
-    .kitchen-table th { background: #cee6fa; }
-    .refresh-btn { background: #2177c2; color: #fff; border: none; border-radius: 8px; padding: 6px 18px; margin-bottom: 12px; cursor:pointer; }
-    .k-row { font-size: 1.15em; }
-    @media (max-width: 520px) {
-      .kitchen-table td, .kitchen-table th { padding: 3px 4px; font-size: 0.97em; }
     }
   </style>
 </head>
 <body>
   <div class="container">
-    <h2 style="text-align:center;">မီးဖိုချောင်အတွက် အော်ဒါစာရင်း</h2>
-    <button class="refresh-btn" onclick="fetchKitchenOrders()">စာရင်း အသစ်ရယူရန်</button>
-    <div id="kitchen-orders"></div>
   </div>
   <script>
-    const scriptURL = "https://api.sheetbest.com/sheets/67a68e64-dca9-4eea-99b7-0431c5786cf6";
-    // Dictionary: Thai menu -> Burmese menu
-    const menuDict = {
-      "ข้าวต้มปลา (ปลาช่อน)": "ငါးချဉ် ထမင်းပြုတ် (ငါးချဉ်)",
-      "ข้าวต้มปลา (ปลากระพง)": "ငါးချဉ် ထမင်းပြုတ် (ငါးကြင်း)",
-      "ข้าวต้มปลาแห้ง (ปลาช่อน)": "ခြောက်ငါးချဉ် ထမင်းပြုတ် (ငါးချဉ်)",
-      "ข้าวต้มปลาแห้ง (ปลากระพง)": "ခြောက်ငါးချဉ် ထမင်းပြုတ် (ငါးကြင်း)",
-      "ข้าวต้มกุ้ง": "ပုစွန်ထမင်းပြုတ်",
-      "ข้าวต้มปลาหมึก": "ဝက်ဥသမားထမင်းပြုတ်",
-      "ข้าวต้มทะเล": "ပင်လယ်စာထမင်းပြုတ်",
-      "ผัดฉ่าปลา (ปลาช่อน)": "ငါးချဉ် မီးပွားကြော်",
-      "ผัดฉ่าปลา (ปลากระพง)": "ငါးကြင်း မီးပွားကြော်",
-      "ผัดขี้เมาปลา (ปลาช่อน)": "ငါးချဉ် ငရုတ်သီးကြော်",
-      "ผัดขี้เมาปลา (ปลากระพง)": "ငါးကြင်း ငရုတ်သီးကြော်",
-      "ต้มยำเนื้อปลา (ปลาช่อน)": "ငါးချဉ် အရင်စပ်ချက်",
-      "ต้มยำเนื้อปลา (ปลากระพง)": "ငါးကြင်း အရင်စပ်ချက်",
-      "ต้มยำหัวปลา": "ငါးခေါင်း အရင်စပ်ချက်",
-      "ต้มยำทะเล": "ပင်လယ်စာ အရင်စပ်ချက်",
-      "ต้มยำกุ้ง": "ပုစွန် အရင်စပ်ချက်",
-      "เกาเหลาปลา (ปลาช่อน)": "ငါးချဉ် ဟင်းရည်ကြော်",
-      "เกาเหลาปลา (ปลากระพง)": "ငါးကြင်း ဟင်းရည်ကြော်",
-      "เกาเหลา��ะเล": "ပင်လယ်စာ ဟင်းရည်ကြော်",
-      "ลวกจิ้มปลา (ปลาช่อน)": "ငါးချဉ် ဖျော်ပြုတ်",
-      "ลวกจิ้มปลา (ปลากระพง)": "ငါးကြင်း ဖျော်ပြုတ်",
-      "รวมทะเลลวกจิ้ม": "ပင်လယ်စာ ဖျော်ပြုတ်",
-      "ยำรวมทะเล": "ပင်လယ်စာ ငရုတ်သီးချဉ်သုပ်",
-      "ยำแมงกะพรุน": "ပင်လယ်ပေါင် ငရုတ်သီးချဉ်သုပ်",
-      "แมงกะพรุนน้ำมันงา": "ပင်လယ်ပေါင် ငွေဆီကြော်",
-      "แหนมกระดูกอ่อนหมู": "ဝက်ရိုးနု ချဉ်သုပ်ကြော်",
-      "ปีกไก่ทอด": "ကြက်တောင်ဖက်ကြော်",
-      "คางกุ้งทอด": "ပုစွန်ခေါင်းကြော်",
-      "เฟรนซ์ฟรายส์": "အာလူးကြော်",
-      "ไข่เจียว": "ဓာတ်ကြော်",
-      "ข้าวสวย": "ထမင်းဖြူ",
-      "น้ำเปล่า": "ရေသန့်",
-      "น้ำอัดลม": "လျှပ်စစ်ရေ",
-      "น้ำอัดลม ขวดใหญ่": "လျှပ်စစ်ရေ (ပုလင်းကြီး)",
-      "น้ำแข็ง": "ရေခဲ",
-      "โซดา": "ဆိုဒါ"
-    };
-    function getLatestUnpaidOrders(data) {
-      const latest = {};
-      data.forEach((row, idx) => {
-        const key = `${row.table}__${row.menu}`;
-        latest[key] = { ...row, idx };
-      });
-      return Object.values(latest).filter(r => (r.status ?? "unpaid") === "unpaid");
-    }
-    async function fetchKitchenOrders() {
-      document.querySelector('.refresh-btn').disabled = true;
-      document.querySelector('.refresh-btn').textContent = '...ရယူနေပါသည်...';
-      const res = await fetch(scriptURL);
-      const data = await res.json();
-      const orders = getLatestUnpaidOrders(data);
-      const summary = {};
-      orders.forEach(item => {
-        const key = `${item.table}__${item.menu}`;
-        if (!summary[key]) summary[key] = { menu: item.menu, table: item.table, qty: 0, note: "", time: item.timestamp || "" };
-        summary[key].qty += Number(item.qty || 1);
-        if (item.note && item.note.trim() && summary[key].note.trim() === "") summary[key].note = item.note;
-        if (item.timestamp) summary[key].time = item.timestamp;
-      });
-      let html = `<table class="kitchen-table">
-        <tr>
-          <th>စားပွဲ</th>
-          <th>မီနူး</th>
-          <th>အရေအတွက်</th>
-          <th>မှတ်ချက်</th>
-          <th>အချိန်</th>
-        </tr>`;
-      Object.values(summary).forEach(row => {
-        html += `<tr class="k-row">
-          <td>${row.table}</td>
-          <td>${menuDict[row.menu] || row.menu}</td>
-          <td style="text-align:center;font-weight:bold">${row.qty}</td>
-          <td>${row.note||""}</td>
-          <td style="font-size:0.9em;color:#237;">${(row.time||'').replace('T','<br>')}</td>
-        </tr>`;
-      });
-      html += `</table>`;
-      if (Object.keys(summary).length === 0) html = "<div style='color:#aaa;text-align:center'>အော်ဒါအသစ် မရှိသေးပါ</div>";
-      document.getElementById('kitchen-orders').innerHTML = html;
-      document.querySelector('.refresh-btn').disabled = false;
-      document.querySelector('.refresh-btn').textContent = 'စာရင်း အသစ်ရယူရန်';
     }
-    fetchKitchenOrders();
   </script>
 </body>
 </html>

 <html lang="my">
 <head>
   <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>စာရင်းမုန့်ဆိုင် (ครัว - รวมทะเล ข้าวต้มปลา)</title>
   <link rel="stylesheet" href="style.css">
   <style>
+    .kitchen-table { width: 100%; border-collapse: collapse; margin: 18px 0; }
+    .kitchen-table th, .kitchen-table td { border: 1px solid #d0e5f7; padding: 8px 7px; text-align: left;}
+    .kitchen-table th { background: #e6f3ff; }
+    .kitchen-table td { font-size: 1.05em; }
+    .table-head { font-size:1.22em; margin-bottom:10px; color: #1b77c2; }
+    #refresh-btn { background: #1b77c2; color:#fff; border:none; border-radius:6px; padding:7px 18px; font-size:1em; cursor:pointer;}
+    #refresh-btn:hover { background: #185ea2; }
+    @media (max-width:600px) {
+      .kitchen-table th, .kitchen-table td { padding: 5px 2px; font-size: 0.97em;}
+      .table-head { font-size:1em;}
     }
   </style>
 </head>
 <body>
   <div class="container">
+    <div class="table-head">🍲 မီးဖိုချောင် မှာ အစားအသောက် အော်ဒါများ (รายการสั่งอาหารฝั่งครัว)</div>
+    <button id="refresh-btn" onclick="loadKitchen()">ဒေတာအသစ်ယူမည် (ดึงข้อมูล)</button>
+    <div id="kitchen-list"></div>
   </div>
   <script>
+  const scriptURL = "https://api.sheetbest.com/sheets/67a68e64-dca9-4eea-99b7-0431c5786cf6";
+  // --- แผนที่ชื่อเมนู ไทย ↔ พม่า
+  const menuMap = {
+    "ข้าวต้มปลา (ปลาช่อน)":       "ငါးချဉ်ဆီထမင်း (ငါးချဉ်)",
+    "ข้าวต้มปลา (ปลากระพง)":     "ငါးချဉ်ဆီထမင်း (ငါးကြက်သွန်)",
+    "ข้าวต้มกุ้ง":                "ပုစွန်ထမင်း",
+    "ข้าวต้มปลาหมึก":             "ငါးမောက်ထမင်း",
+    "ข้าวต้มทะเล":                "ပင်လယ်ထမင်း",
+    "ข้าวต้มหมอยบางรม":           "ဆရာဝန်ထမင်း",
+    "ผัดฉ่าปลา (ปลาช่อน)":        "ငါးချဉ်အပြောင်းရည်",
+    "ผัดฉ่าปลา (ปลากระพง)":      "ငါးကြက်သွန်အပြောင်းရည်",
+    "ผัดขี้เมาปลา (ปลาช่อน)":     "ငါးချဉ်အကြော်ကြော်",
+    "ผัดขี้เมาปลา (ปลากระพง)":   "ငါးကြက်သွန်အကြော်ကြော်",
+    "ต้มยำเนื้อปลา (ปลาช่อน)":    "ငါးချဉ်တူမြန် (ต้มยำ)",
+    "ต้มยำเนื้อปลา (ปลากระพง)":  "ငါးကြက်သွန်တူမြန် (ต้มยำ)",
+    "ต้มยำหัวปลา":               "ငါးခေါင်းတူမြန် (ต้มยำ)",
+    "ต้มยำทะเล":                  "ပင်လယ်တူမြန် (ต้มยำ)",
+    "ต้มยำกุ้ง":                  "ပုစွန်တူမြန် (ต้มยำ)",
+    "เกาเหลาปลา (ปลาช่อน)":      "ငါးချဉ်ကြော်",
+    "เกาเหลาปลา (ปลากระพง)":    "ငါးကြက်သွန်ကြော်",
+    "เกาเหลาทะเล":               "ပင်လယ်ကြော်",
+    "ลวกจิ้มปลา (ปลาช่อน)":      "ငါးချဉ်လွှတ်",
+    "ลวกจิ้มปลา (ปลากระพง)":    "ငါးကြက်သွန်လွှတ်",
+    "รวมทะเลลวกจิ้ม":            "ပင်လယ်လွှတ် (รวมทะเลลวกจิ้ม)",
+    "ยำรวมทะเล":                 "ပင်လယ်ရောစပ် (ยำรวมทะเล)",
+    "ยำแมงกะพรุน":               "ပျားပျံရောစပ် (ยำแมงกะพรุน)",
+    "แมงกะพรุนล้นน้ำมันงา":      "ပျားပျံနွယ်ဆီ (แมงกะพรุนล้นน้ำมันงา)",
+    "แหนมกระดูกอ่อนหมู":         "ဝက်အရိုး (แหนมกระดูกอ่อนหมู)",
+    "ปีกไก่ทอด":                  "ကြက်တောင်ကင်",
+    "คางกุ้งทอด":                 "ပုစွန်နားကင်",
+    "เฟรนซ์ฟรายส์":              "အာလူးကြော်",
+    "ไข่เจียว":                   "ကြက်ဥကြော်",
+    "ข้าวสวย":                    "ထမင်းဖြူ",
+    "น้ำเปล่า":                   "ရေသန့်",
+    "น้ำอัดลม":                   "အာနာတစ်လုံး (น้ำอัดลม)",
+    "น้ำอัดลม ขวดใหญ่":           "အာနာတစ်လုံး (ขวดใหญ่)",
+    "น้ำแข็ง":                    "ရေခဲ",
+    "โซดา":                       "ဆိုဒါ"
+    // *** เพิ่มเติมได้ตามต้องการ ***
+  };
+  function getBilingualMenu(menu) {
+    const my = menuMap[menu] || "";
+    if (my) return `<span style="font-size:1.08em;">${my}</span><br><span style="font-size:0.97em;color:#3574af">${menu}</span>`;
+    return `<span>${menu}</span>`;
+  }
+  async function loadKitchen() {
+    document.getElementById('kitchen-list').innerHTML = "<div style='color:#bbb'>ခဏစောင့်ပါ... (กำลังโหลด...)</div>";
+    const res = await fetch(scriptURL);
+    const data = await res.json();
+    // Soft delete รวมยอดแต่ละเมนูแต่ละโต๊ะ
+    const orders = {};
+    data.forEach(row => {
+      if ((row.status ?? "unpaid") !== "unpaid") return;
+      if (!row.menu || !row.table) return;
+      const key = row.table + "___" + row.menu;
+      if (!orders[key]) {
+        orders[key] = {
+          table: row.table,
+          menu: row.menu,
+          qty: 0,
+          note: row.note || "",
+          time: row.timestamp || "",
+        };
+      }
+      orders[key].qty += Number(row.qty || 1);
+      if (row.timestamp) orders[key].time = row.timestamp;
+    });
+    // Filter เฉพาะที่ qty > 0
+    let orderArr = Object.values(orders).filter(o => o.qty > 0);
+    // sort ใหม่สุดด้านบน (เรียงเวลาล่าสุด)
+    orderArr = orderArr.sort((a, b) => (b.time > a.time ? 1 : -1));
+    let html = `<table class="kitchen-table">
+      <tr>
+        <th>စားပွဲ<br>(โต๊ะ)</th>
+        <th>မီနူး<br>(เมนู)</th>
+        <th>အရေအတွက်<br>(จำนวน)</th>
+        <th>မှတ်ချက်<br>(หมายเหตุ)</th>
+        <th>အချိန်<br>(เวลา)</th>
+      </tr>`;
+    for (const o of orderArr) {
+      html += `<tr>
+        <td style="text-align:center">${o.table}</td>
+        <td>${getBilingualMenu(o.menu)}</td>
+        <td style="text-align:center">${o.qty}</td>
+        <td>${o.note ? o.note : ""}</td>
+        <td style="font-size:0.95em;">${o.time ? o.time.substring(0,19).replace("T", " ") : ""}</td>
+      </tr>`;
     }
+    html += "</table>";
+    if (!orderArr.length) html = "<div style='color:#bbb'>မရှိသေးပါ (ยังไม่มีออเดอร์ค้างในระบบ)</div>";
+    document.getElementById('kitchen-list').innerHTML = html;
+  }
+  // --- โหลดครั้งแรก ---
+  loadKitchen();
   </script>
 </body>
 </html>