web-nfc.html

<button id="scanButton">Scan</button>
<div id="logz"></div>
<div id="messagez" style="font-size: x-large; font-weight: bold;"></div>

<script>

const employeeSN = { "11:c9:20:3e": "Bu Elsha", "11:c9:20:3f": "Pak Dito", "11:c9:20:40": "Mas Bonar", "11:c9:20:41": "Mbak Lita" };

scanButton.addEventListener("click", async () => {
  console.log("User clicked scan button");
  document.querySelector('#logz').textContent = "User clicked scan button";

  try {
    const ndef = new NDEFReader();
    await ndef.scan();
    console.log("> Scan started");
    document.querySelector('#logz').textContent = "> Scanning..." + '\n';

    ndef.addEventListener("readingerror", () => {
        console.log("Argh! Cannot read data from the NFC tag. Try another one?");
        document.querySelector('#logz').textContent = "Argh! Cannot read data from the NFC tag. Try another one?";
    });

    ndef.addEventListener("reading", ({ message, serialNumber }) => {
        var employeeName = employeeSN[serialNumber];
        var today = new Date();
        var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
        var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
        var dateTime = date+' '+time;

        document.querySelector('#messagez').textContent = `> ${dateTime} Welcome: ${employeeName}`;

        //console.log(`> Serial Number: ${serialNumber}`);
        //document.querySelector('#messagez').textContent += `> Serial Number: ${serialNumber}` + '\n';

        //console.log(`> Records: (${message.records.length})`);
        //document.querySelector('#messagez').textContent += `> Records: (${message.records.length})` + '\n';
    });
  } catch (error) {
    console.log("Argh! " + error);
    document.querySelector('#logz').textContent = "Argh! " + error;
  }
});

</script>