Skip to content

Instantly share code, notes, and snippets.

@dionarya23

dionarya23/display.html

Created October 13, 2021 12:00
Show Gist options
  • Save dionarya23/d48165db71cc04e39bbe3a20e614d122 to your computer and use it in GitHub Desktop.
Save dionarya23/d48165db71cc04e39bbe3a20e614d122 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
display.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Biro Administrasi Umum - Universatas Komputer Indonesia</title>
<script src="public/script/angular.min.js"></script>
<link rel="stylesheet" href="public/style/style.css">
<style>@import 'https://fonts.googleapis.com/css?family=Open+Sans';</style>
<script type="text/javascript" src="js/suara.js"></script>
<script type="text/javascript" src="js/socket.io-1.4.5.js"></script>
</head>
<body onload="times(), tanggal()">
<div id="bg" class="bg-antrian" style="background: #fff;">
<!-- bg #0067b0 -->
<!-- color #fcff00 -->
<!-- margin #003d5a -->
<!-- main -->
<div id="main" class="flex">
<!-- yang baru masuk -->
<div class="active flex">
<div class="process flex">
<div class="header flex">
<div class="logo" style="height: 75%; width: 110px; margin: 2%;">
<img src="public/img/logo.png" height="100%" alt="logo">
</div>
<div class="text">
<div class="label-1" >UNIVERSITAS KOMPUTER INDONESIA</div>
<!-- <div class="label-2">JL. 112 - 116 Dipatiukur Bandung</div> -->
<div id="date"></div>
</div>
</div>
<div class="antrian-active flex">
<div class="nama-loket">
<span class="kode-1">LOKET</span>
<span class="kode-2" id="loket-aktif">1</span>
</div>
<div class="nomor">
<span class="nomor-antrian" id="0">-</span>
</div>
</div>
</div>
<div class="video flex">
<video src="public/video/Kunjungan SMA Saraswati 1 Denpasar.MP4" height="100%" style="background:#003d5a;" autoplay loop muted></video>
</div>
</div>
<!-- loket bawah / yang lagi aktif -->
<div class="queue flex">
<div id="loket-1" class="loket flex">
<div class="nama-loket">
<span class="kode-1">LOKET</span>
<span class="kode-2">1</span>
</div>
<div class="nomor">
<span class="nomor-antrian" id="1">101</span>
</div>
</div>
<div id="loket-2" class="loket flex">
<div class="nama-loket">
<span class="kode-1">LOKET</span>
<span class="kode-2" >2</span>
</div>
<div class="nomor">
<span class="nomor-antrian" id="2">061</span>
</div>
</div>
<div id="loket-3" class="loket flex">
<div class="nama-loket">
<span class="kode-1">LOKET</span>
<span class="kode-2">3</span>
</div>
<div class="nomor">
<span class="nomor-antrian" id="3">015</span>
</div>
</div>
<div id="loket-4" class="loket flex">
<div class="nama-loket">
<span class="kode-1">LOKET</span>
<span class="kode-2">4</span>
</div>
<div class="nomor">
<span class="nomor-antrian" id="4">051</span>
</div>
</div>
<div id="loket-5" class="loket flex">
<div class="nama-loket">
<span class="kode-1">LOKET</span>
<span class="kode-2">5</span>
</div>
<div class="nomor">
<span class="nomor-antrian" id="5">051</span>
</div>
</div>
<div id="loket-6" class="loket flex">
<div class="nama-loket">
<span class="kode-1">LOKET</span>
<span class="kode-2">6</span>
</div>
<div class="nomor">
<span class="nomor-antrian" id="6">051</span>
</div>
</div>
<div id="loket-7" class="loket flex">
<div class="nama-loket">
<span class="kode-1">LOKET</span>
<span class="kode-2">7</span>
</div>
<div class="nomor">
<span class="nomor-antrian" id="7">051</span>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer" class="flex">
<div id="footer-time"></div>
<marquee >
UNIVERSITAS KOMPUTER INDONESIA
</marquee>
</div>
</div>
<script src="public/script/client.js"></script>
<script src="controller/controller.js"></script>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/Queue.js"></script>
<script type="text/javascript">
var host = "http://"+window.location.host;
var base_url = host+"/apipmb/public/api/v1/";
var url2 = host+"/apipmb/";
$(document).ready(function(){
$.ajax({
type:'GET',
url : base_url+'cekhari',
success:function(data){
console.log('Fungsi cek hari dipanggil');
}
});
var socket = io('http://localhost:3000/');
// create a new queue
var queue = new Queue();
socket.on('putar suara', function (data) {
queue.enqueue({nomor:data.nomor,loket:data.loket});
});
var ceksuara = false;
setInterval(panggil,1000);
function panggil(){
if((queue.getLength()>0) && (ceksuara == false)){
var item = queue.dequeue();
ceksuara = true;
var putar =[];
putar = generateSuara(item.nomor,item.loket);
playsound(0,2,putar);
}
console.log(ceksuara);
}
function playsound(i, j, nomor) {
if (i < nomor.length) {
var sound = new Audio('public/sound/' + nomor[i] + '.wav');
sound.addEventListener('ended', function() {
this.currentTime = 0;
playsound(i + 1, j, nomor);
}, false);
sound.play();
} else {
if (j < 2) {
playsound(0, 2, nomor);
}
ceksuara = false;
}
}
var tes = new Array();
setInterval(loaddata,1000);
function loaddata(){
var host = window.location.host;
$.ajax({
url:'http://'+host+"/apipmb/public/api/v1/antrianpmb/temp",
timeout: 1000,
type: "GET",
dataType: 'json',
success: function(data) {
$("#1").html(data.result[1].no_antrian);
$("#2").html(data.result[2].no_antrian);
$("#3").html(data.result[3].no_antrian);
$("#4").html(data.result[4].no_antrian);
$("#5").html(data.result[5].no_antrian);
$("#6").html(data.result[6].no_antrian);
$("#7").html(data.result[7].no_antrian);
$("#loket-aktif").html(data.result[0].no_loket);
$("#0").html(data.result[0].no_antrian);
}
});
}
});
</script>
<script>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment