Web App Search by barcodes or QR code

bysemicon -
1

 



index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html5-qrcode/2.3.4/html5-qrcode.min.js"></script>

<style>
  main {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #reader {
    width: 600px;
    padding:15px;
  }
  #result {
    text-align: center;
    font-size: 1.5rem;
    padding:15px;
  }
  button{
    padding: 15px !important;
    margin: 15px auto !important;
  }
  a{
    padding: 15px !important;
    margin: 15px auto !important;
  }
</style>

<main>
  <div id="reader"></div>
  <div id="result"></div>
</main>

<div id="data-teble-results"></div>

<script>

  const scanner = new Html5QrcodeScanner('reader', {
    qrbox: {
    width: 250,
    height: 250,
    },
    fps: 20,
  });
  scanner.render(success, error);

  function success(result) {
    const data = result
    document.getElementById('result').innerHTML = `
    <h2>Success!</h2>
    <p><a href="${result}">${result}</a></p>`
    scanner.clear();
    document.getElementById('reader').remove();

    if(result){
      google.script.run.withSuccessHandler((displayData)=>{
        if (displayData != null) {
          // Display data in a table
          const tableHtml = `<table class='table table-bordered' width=100%>
              <thead>
<tr>
<th>Name</th>
<th>DataD</th>
<th>DataE</th>
<th>DataF</th>
<th>DataH</th>
</tr>
</thead>
              <tbody>
              <tr>
              <td>${displayData.name}</td>
              <td>${displayData.dataD}</td>
              <td>${displayData.dataE}</td>
              <td>${displayData.dataF }</td>
              <td>${displayData.dataH }</td>
              </tr>
              </tbody>
              </table>`

            document.querySelector('#data-teble-results').innerHTML =  tableHtml
        }else{
          document.querySelector('#data-teble-results').innerHTML = "Data not found!"
        }
      }).sendback(result);
    }
  }

  function error(err) {
    console.error(err);
  }
</script>
 
</body>
</html>


code.gs


const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];

function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setTitle('My Project')
    .setFaviconUrl('https://semicon.github.io/img/logo2.png')
    .addMetaTag('viewport', 'width=device-width , initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
}

function sendback(data) {
  const qrCode = data
  const values = sheet.getDataRange().getValues()
  let responseData = {}
  const item = values.findIndex(r => {return r[0] == qrCode})
    if(~item) {
      responseData = {
        name: values[item][1],  // Assuming name is in column B
        dataC: values[item][2], // Assuming dataD is in column C
        dataD: values[item][3], // Assuming dataF is in column D
        dataE: values[item][4], // Assuming dataG is in column E
        dataF: values[item][5], // Assuming dataG is in column F
        dataG: values[item][6], // Assuming dataG is in column G
        dataH: values[item][7]  // Assuming dataG is in column H  
      }
      return responseData;
    }else{
      return null;
    }

}

 Download

Tags:

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

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