ระบบเรียกคิว 5 ช่อง

bysemicon -
1

 




ระบบเรียกคิวมี จอแสดงผลหลัก (Main Display) และ ตัวลูก 5 ช่องบริการ (Client Terminals) ซึ่งแต่ละช่องสามารถเรียกคิวได้ และกำหนดหมายเลขช่องของตัวเองได้

1. Google Sheet (QueueData)

plaintext
| QueueNumber | Channel | Called |
|-------------|---------|--------|
| A001        |         |        |
| A002        |         |        |
| A003        |         |        |

  • QueueNumber: หมายเลขคิว
  • Channel: ช่องที่เรียก (1-5)
  • Called: TRUE เมื่อถูกเรียกแล้ว

📁 โครงสร้างไฟล์

  • Code.gs – ส่วนของ Server (Google Apps Script)
  • mainDisplay.html – หน้าจอแสดงผลหลัก (ไว้เปิดเต็มหน้าจอทีวี)
  • client.html – จอของช่องบริการ (ตัวลูก) สำหรับเรียกคิว พร้อมเลือกช่อง

📜 Code.gs

javascript
function doGet(e) {
  const page = e.parameter.page;
  if (page === 'client') {
    return HtmlService.createHtmlOutputFromFile('client');
  }
  return HtmlService.createHtmlOutputFromFile('mainDisplay');
}

function getNextQueueForChannel(channel) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('QueueData');
  const data = sheet.getDataRange().getValues();

  for (let i = 1; i < data.length; i++) {
    if (!data[i][2]) { // ยังไม่ถูกเรียก
      sheet.getRange(i + 1, 2).setValue(channel); // ใส่ช่องบริการ
      sheet.getRange(i + 1, 3).setValue("TRUE"); // Mark Called
      const queue = {
        number: data[i][0],
        channel: channel,
        timestamp: new Date().toLocaleString()
      };
      // บันทึกค่าใน Cache สำหรับหน้าจอหลัก
      CacheService.getScriptCache().put("lastQueue", JSON.stringify(queue), 300);
      return queue;
    }
  }
  return { number: null, channel: null };
}

function getLastQueueCalled() {
  const cache = CacheService.getScriptCache().get("lastQueue");
  return cache ? JSON.parse(cache) : null;
}

🌐 mainDisplay.html – หน้าจอแสดงผลหลัก

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>หน้าจอแสดงผลคิว</title>
  <script>
    function fetchQueue() {
      google.script.run.withSuccessHandler(function(data) {
        if (data) {
          document.getElementById('queueNumber').innerText = data.number;
          document.getElementById('channel').innerText = data.channel;
          speak(`ขอเชิญหมายเลข ${data.number} เข้ารับบริการที่ช่องหมายเลข ${data.channel}`);
        }
      }).getLastQueueCalled();
    }

    function speak(text) {
      const msg = new SpeechSynthesisUtterance(text);
      msg.lang = 'th-TH';
      window.speechSynthesis.speak(msg);
    }

    setInterval(fetchQueue, 3000); // อัปเดตทุก 3 วิ
  </script>
  <style>
    body {
      text-align: center;
      font-family: 'Arial';
      background-color: #f0f8ff;
    }
    h1 {
      font-size: 4em;
      color: #007BFF;
    }
    .channel {
      font-size: 3em;
      color: #28a745;
    }
  </style>
</head>
<body>
  <h1>หมายเลขคิว: <span id="queueNumber">-</span></h1>
  <div class="channel">ช่องบริการ: <span id="channel">-</span></div>
</body>
</html>

🧑‍💼 client.html – หน้าจอตัวลูกแต่ละช่อง

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>เรียกคิว</title>
  <script>
    function callQueue() {
      const channel = document.getElementById("channelSelect").value;
      if (!channel) return alert("กรุณาเลือกช่องบริการ");

      google.script.run.withSuccessHandler(function(data) {
        if (data.number) {
          document.getElementById("result").innerText = 
            `เรียกหมายเลข ${data.number} ที่ช่อง ${data.channel}`;
          speak(`ขอเชิญหมายเลข ${data.number} เข้ารับบริการที่ช่องหมายเลข ${data.channel}`);
        } else {
          document.getElementById("result").innerText = "ไม่มีคิวที่เหลือแล้ว";
        }
      }).getNextQueueForChannel(channel);
    }

    function speak(text) {
      const msg = new SpeechSynthesisUtterance(text);
      msg.lang = 'th-TH';
      window.speechSynthesis.speak(msg);
    }
  </script>
  <style>
    body {
      font-family: 'Arial';
      text-align: center;
      padding: 20px;
    }
    select, button {
      font-size: 1.2em;
      padding: 10px;
      margin: 10px;
    }
    #result {
      font-size: 1.5em;
      margin-top: 20px;
      color: #007BFF;
    }
  </style>
</head>
<body>
  <h2>เรียกคิว</h2>
  <label>เลือกช่องบริการ: 
    <select id="channelSelect">
      <option value="">-- เลือก --</option>
      <option value="1">ช่อง 1</option>
      <option value="2">ช่อง 2</option>
      <option value="3">ช่อง 3</option>
      <option value="4">ช่อง 4</option>
      <option value="5">ช่อง 5</option>
    </select>
  </label><br>
  <button onclick="callQueue()">เรียกคิว</button>
  <div id="result"></div>
</body>
</html>

🔗 วิธีใช้งาน

  1. เปิด Google Apps Script
  2. สร้างโปรเจกต์ใหม่
  3. วาง Code.gs, mainDisplay.html, และ client.html ตามด้านบน
  4. ผูกกับ Google Sheet ที่ชื่อ QueueData
  5. กด Deploy > Manage deployments > Web app

    • Execute as: Me
    • Who has access: Anyone
     6. เปิด:
    • /exec?page=client → สำหรับจอเรียกคิว (ของแต่ละช่อง)
    • /exec → สำหรับจอแสดงผลหลัก

 ดาวน์โหลด เรียกคิว - Google ชีต



Tags:

1 ความคิดเห็น

แสดงความคิดเห็น
ใหม่กว่า เก่ากว่า