<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Control Room</title>
<script>
function httpGetAsync(theUrl, callback)
{
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
      if (callback) callback(xmlHttp.responseText);
  }
  xmlHttp.open("GET", theUrl, true);
  xmlHttp.send(null);
}

window.onload = function(){
// window.setInterval(main, 1000);
  httpGetAsync("/api", setup);
}

function setup(data){
  data = JSON.parse(data);
  var options = document.getElementById("available");
  for (var i=0; i<data["rfid"].length; i++){
    var newOption = document.createElement("option");
    newOption.text = data["rfid"][i]["name"]+" ("+data["rfid"][i]["vendor"]+"|"+data["rfid"][i]["uid"]+")";
    newOption.value = data["rfid"][i]["id"];
    options.options.add(newOption, newOption.value);
  }
  for (var i=0; i<options.length; i++){
    if (options.options[i].value==data["active_id"]) {
      options.options.selectedIndex=i;
      break;
    }
  }
}

function update(){
  var selection = document.getElementById("available");
  console.log(selection.options[selection.options.selectedIndex].value);
  httpGetAsync("/api?rfid="+selection.options[selection.options.selectedIndex].value);
  return false;
}

</script>
<style>
button, select , input{
  display: block;
  margin: 1px;
}
button, input {
  min-width: 200px;
}
body {
  background-color: #EEEEEE;
}
</style>
</head>
<body>
  <h1>Welcome to<br><strike>Admin</strike>Ugly panel</h1>
    <form action="/api" method="get" onsubmit="return update()">
      <select id="available">
        <option value="0">Disabled</option>
      </select>
      <input type="submit" value="Update">
    </form>
    <button id="wifi" onclick="javascript:location.href='/wifi'" >WiFi Setup</button>
    <button id="rfid" onclick="javascript:location.href='/rfid'" >RFID Setup</button>
</body>
</html>
