<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Wywoływane numery</title>
  <style>
    body{font-family:Helvetica,Arial;margin:30px;text-align:center}
    .num{display:inline-block;margin:10px;padding:20px 30px;font-size:72px;font-weight:700;border:2px solid #333;border-radius:8px}
    @media (max-width:700px){
      body{font-size:16px} 
    }

  </style>
  <script>
    async function fetchCurrent(){
      try{
        const r = await fetch('/current');
        const j = await r.json();
      
        const cont = document.getElementById('nums');
        cont.innerHTML = '';
        const list = j.current || [];
        if(list.length == 0){
          cont.textContent = '-';
        } else {
			list.forEach(n => {
			  const el = document.createElement('div');
			  el.className = 'num';
			  el.textContent = n;
			  cont.appendChild(el);
			});  
        };
        document.getElementById('waiting-count').textContent = (j.waiting != null) ? j.waiting : '0';    
        document.getElementById('first-waiting').textContent = (j.first != 0 ) ? j.first : '-';                
      }catch(e){}
    }
    setInterval(fetchCurrent, 5000);
    window.addEventListener('load', fetchCurrent);
  </script>
</head>
<body>
  <h1>Zapraszamy do stanowiska osoby z numerami:</h1>
  <div id="nums">-</div>

  <div id="waiting" style="margin-top:18px;color:#333">
    <h3>Wszystkich osób oczekujących: <span id="waiting-count">0</span></h3>
    <h3>Pierwszy w kolejce numer <span id="first-waiting">-</span></h3>    
  </div>

</body>
</html>
