<!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> Voice Announcer IGD RSSA</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">

      <script src="./script.js" defer></script>
      <link rel="stylesheet" href="./style.css">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.min.js" integrity="sha384-RuyvpeZCxMJCqVUGFI0Do1mQrods/hhxYlcVfGPOfQtPJh0JCw12tUAZ/Mv10S7D" crossorigin="anonymous"></script>
</head>
<style>
  div.scroll-auto {
      background-color: whitesmoke;
      width: auto;
      height: 400px;
      overflow: auto;
      font-size: 12px;
  }
</style>




<body>
  <h1>Voice Announcer Player</h1>
  <h5>IGD RSSA</h5>
   <form id="TextInput">
    <div class="input-group input-group-sm mb-3">
        <span class="input-group-text" id="inputGroup-sizing-sm">Nama</span>
        <input type="text" id="nama" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" value="agus">
      </div>
      <span class="input-group-text" id="inputGroup-sizing-sm">atribut</span>
      <select class="form-select" id="atribut" aria-label="Default select example">
        <option value="" >Open this select menu</option>
        <option value="Bapak" selected>Bapak</option>
        <option value="ibu">Ibu</option>
        <option value="saudara">saudara</option>
        <option value="saudari">saudari</option>
        <option value="anak">anak</option>
      </select>
      <span class="input-group-text" id="inputGroup-sizing-sm">Tujuan</span>
      <select class="form-select" id="tujuan" aria-label="Default select example">
        <option value="" >Open this select menu</option>
        <option value="loket pendaftaran"selected>loket pendaftaran</option>
        <option value="loket pembayaran">loket pembayaran</option>
        <option value=" triase"> triase</option>
        <option value=" K.I.E"> KIE</option>
        <option value="ciliwung, IGD lantai 2"> ciliwung </option>
        <option value=" ICU, IGD lantai 3"> icu </option>
        <option value=" operasi, IGD lantai 4"> operasi </option>
        <option value="perawatan emerjensi">perawatan emerjensi</option>
      </select>
      <button type="button" onclick="myTableFunction()">next</button>
    </form>

<audio id="myAudio1" controls src ="./voiceAnnouncer1.wav" type="audio/wav"></audio>
<audio id="myAudio2" src="./voiceAnnouncer2.wav" type="audio/wav"></audio>
<audio id="myAudio3" src="./voiceAnnouncer3.wav" type="audio/wav"></audio>

    <div class="scroll-auto">
      <table class="table">
        <thead>
          <tr>
            <th scope="col">No</th>
            <th scope="col">Atribut</th>
            <th scope="col">Nama</th>
            <th scope="col">Tujuan Panggilan</th>
          </tr>
        </thead>
        <tbody id="myTable">
        </tbody>
      </table>
    </div>
    



      
      <textarea hidden id="text" maxlength="500"></textarea>
     

      <div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar" style="width: 100%"></div>
      </div>
      <label for="speed">Speed</label>
      <input type="range" name="speed" id="speed" min=".5" max="3" step=".5" value="1">

      <!-- <button id="play-button" onclick="myFunction()">Play</button> -->
      <!-- <button id="pause-button">Pause</button> -->
      <!-- <button id="stop-button">Stop</button> -->

  




      <script>
        var button = document.getElementById('myAudio1').click();
        button;
     window.onload = function(){
    // const myAudio = document.getElementById('myAudio1');
  };
    
  setInterval(function(){
     setup();
    },30000);  // this will make it click again every 1000 miliseconds


  setInterval(function(){

     myTableFunction();
    
    },1000);  // this will make it click again every 1000 miliseconds

    function myFunction(){

      let nama= document.getElementById('nama').value;
      let atribut= document.getElementById('atribut').value;
      let tujuan= document.getElementById('tujuan').value;
         
    }


    function myTableFunction() {
      
      var table = document.getElementById("myTable"); 
      var row = table.insertRow(-1);
      // var cell1 = row.insertCell(0);
      // var cell2 = row.insertCell(1);
      // var cell3 = row.insertCell(2);
      // var cell4 = row.insertCell(3);
      // let nama= document.getElementById('nama').value;
      // let atribut= document.getElementById('atribut').value;
      // let tujuan= document.getElementById('tujuan').value; 
      // TIDAK DIPAKAI
      
      
      
      
// var x = document.getElementsByTagName("tr");

// var i;
// for (i = 0; i < x.length;i++) {
//   cell1.innerHTML = i;
//   cell2.innerHTML = atribut;
//   cell3.innerHTML = nama;
//   cell4.innerHTML = tujuan;
// }


    let text= document.getElementById('text').value=table.rows[0].cells[1].innerHTML+',' + table.rows[0].cells[2].innerHTML +'...diharap menuju ke'+table.rows[0].cells[3].innerHTML; 
    

}

    



     
          function getAge(birthDate, ageAtDate) {
    let nama= document.getElementById('nama').value;
    var daysInMonth = 30.436875; // Days in a month on average.
    var dob = new Date(birthDate);
    var aad;
    if (!ageAtDate) aad = new Date();
    else aad = new Date(ageAtDate);
    var yearAad = aad.getFullYear();
    var yearDob = dob.getFullYear();
    var years = yearAad - yearDob; // Get age in years.
    dob.setFullYear(yearAad); // Set birthday for this year.
    var aadMillis = aad.getTime();
    var dobMillis = dob.getTime();
    if (aadMillis < dobMillis) {
        --years;
        dob.setFullYear(yearAad - 1); // Set to previous year's birthday
        dobMillis = dob.getTime();
    }
    var days = (aadMillis - dobMillis) / 86400000;  
    var monthsDec = days / daysInMonth; // Months with remainder.
    var months = Math.floor(monthsDec); // Remove fraction from month.
    days = Math.floor(daysInMonth * (monthsDec - months));
    return {years: years, months: months, days: days};
   
    nama.value= {years: years, months: months, days: days};
  }
      </script>
</body>
</html>