Spaces:
Running
Running
| <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> | |