Files
semakin-imut/costumer_service/1modal_input.php
2025-10-09 11:03:05 +07:00

194 lines
7.0 KiB
PHP

<!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>