websocketClient

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Websocket Test</title>
</head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>
  <div class="container-fluid">
    <form>
      <input type="text" id="host" value="localhost" style="background: lightgray">
      <input type="text" id="port" value="39477" style="background: lightgray">
      <input type="text" id="uri" value="/readID" style="background: lightgray">
    </form>
    <br>

    <img id="idphoto" hidden="true" width="100px" height="100px">

    <form>
      เลขบัตรประจำตัวประชาชน
      <input type="text" id="cid" name="cid" style="width: 100%">
      <br> ชื่อ สกุล
      <input type="text" id="thname" name="thai name" style="width:100%">
      <br>
      <input type="text" id="engname" name="english name" style="width:100%">
      <br> เกิดวันที่
      <input type="text" id="dob" name="date of birth" style="width:100%">
      <br> อายุ
      <input type="text" id="age" name="age" style="width:100%">
      <br> ที่อยู่
      <input type="text" id="addr" name="address" style="width:100%">
      <br> ออกบัตร
      <input type="text" id="iss" name="issue date" style="width:100%">
      <br> หมดอายุ
      <input type="text" id="exp" name="expire date" style="width:100%">
      <br>
    </form>
    <br>

    <input type="button" id="readIdCard" value="read">
    <input type="button" id="readingStatus" value=" " style="background-color: lightgray">

  </div>
</body>


<script>
  clientWebsocket = () => {
    var host = document.getElementById('host').value;
    var port = document.getElementById('port').value;
    var uri = document.getElementById('uri').value;
    var ws = new WebSocket('ws://' + host + ':' + port + uri);
    var currentTime

    document.getElementById('readIdCard').addEventListener('click', (event) => {
      currentTime = new Date();
      ws.send(currentTime);
      console.log("Start reading...");
    });

    if (document.getElementById('readingStatus') !== '') {
      document.getElementById('readingStatus').addEventListener('click', () => {
        location.reload();
      });
    }

    ws.onopen = () => {
      document.getElementById('host').style.background = "#00ff16"
    };

    ws.onmessage = (event) => {
      try {
        var data = JSON.parse(event.data);
        console.log(currentTime);
        fillForm(data, currentTime);
        document.getElementById('readingStatus').style.background = "#00ff16";
        document.getElementById('readingStatus').value = "Reading success.";
        console.log('Reading success.');
        // submitForm();
      }
      catch{
        console.log(event.data);
        document.getElementById('readingStatus').style.background = "#ff1600";
        document.getElementById('readingStatus').value = "Reading failed.";
        console.log('Reading failed.')
      }
    };

    ws.onclose = (event) => {
      document.getElementById('host').style.background = '#ff1600';
      document.getElementById('readingStatus').value = 'Connection is closed, press F5 or click here to reconnect.';
      console.log('Connection is closed try reopen the program or press F5 to reconnect.');
    };

    window.onbeforeunload = (event) => {
      console.log('refresh attemp');
      ws.close();
    };

    window.onunload = (event) => {
      event.preventDefault()
    };
  };

  fillForm = (data, currentTime) => {
    var cid = data['result']['cid'];
    var pers_info = data['result']['pers_info'];
    var dob = pers_info['dob'];
    var addr_info = data['result']['addr_info'];
    var iss_date = data['result']['iss_exp_date']['iss_date'];
    var exp_date = data['result']['iss_exp_date']['exp_date'];
    var photo = 'data:image/png;base64,' + data['result']['photo'];

    document.getElementById('cid').value = cid;
    document.getElementById('thname').value = pers_info['title']['th_title'] + pers_info['name']['th_f_name'] + ' ' + pers_info['name']['th_l_name'];
    document.getElementById('engname').value = pers_info['title']['eng_title'] + ' ' + pers_info['name']['eng_f_name'] + ' ' + pers_info['name']['eng_l_name'];
    document.getElementById('dob').value = dob['date'].toString() + '/' + dob['month'].toString() + '/' + dob['year'].toString();
    document.getElementById('addr').value = addr_info['house_no'] + ' ' + addr_info['road'] + ' ' + addr_info['subdistrict'] + ' ' + addr_info['district'] + ' ' + addr_info['province'];
    document.getElementById('iss').value = iss_date['date'] + '/' + iss_date['month'] + '/' + iss_date['year'];
    document.getElementById('exp').value = exp_date['date'] + '/' + exp_date['month'] + '/' + exp_date['year'];
    document.getElementById('idphoto').src = photo;
    document.getElementById('idphoto').hidden = false;

    if (currentTime.getMonth() - dob['month'] > 0) {
      document.getElementById('age').value = (currentTime.getFullYear() - dob['year']).toString();
    } else if (currentTime.getMonth() - dob['month'] == 0) {
      if (currentTime.getDate() - dob['date'] >= 0) {
        document.getElementById('age').value = (currentTime.getFullYear() - dob['year']).toString();
      }
      else {
        document.getElementById('age').value = (currentTime.getFullYear() - dob['year'] - 1).toString();
      }
    }
  };

  submitForm = () => {
    /* submit info */
  };

  window.onload = clientWebsocket();
</script>

</html>