<style>
.button {
  font-size: 16px;
  background-color: #69addd;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  font-family: roboto;
  font-size: 18px;
  font-weight: 400px;
  color: #404040;
  border-radius: 12px;
  border: 1px solid;
  border-color: transparent;
}
.button:hover {
  background: transparent;
  border: 1px solid;
  border-color: #69addd;
  color: #69addd;
}
</style>
<%+header%>
<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
<h2><a id="content" name="content">Device Status</a></h2>
<div id="status">
    <p>
	<input class="button" id="refresh" onclick="refresh_status()" value="Refresh Status"</input>
    </p>
  <div id="data">
    <p>Timestamp: <span id="timestamp"></span></p>
    <p>Device ID: <span id="device_id"></span></p>
    <p>Device Name: <span id="device_name"></span></p>
    <p>Location: <span id="device_location"></span></p>
    <p>IMEI: <span id="imei"></span></p>
    <p>ICCID: <span id="iccid"></span></p>
    <p>Light Status: <span id="light_status"></span></p>
    <p>Light Override: <span id="light_override"></span></p>
    <p>Light Power: <span id="light_power"></span></p>
  </div>
</div>
<script>
function refresh_status() {
    document.getElementById("refresh").disabled = true
    document.getElementById("refresh").style.cursor = "not-allowed"
	var xhr = new XHR();
	xhr.get('<%=luci.dispatcher.build_url("admin", "nyc-dot", "rest-api", "status", "refresh")%>', null,
		function(x, data) {
			console.log(data);
			document.getElementById("timestamp").innerText = data.timestamp
			document.getElementById("device_id").innerText = data.id
			document.getElementById("device_name").innerText = data.name
			document.getElementById("device_location").innerText = data.device_location
			document.getElementById("imei").innerText = data.imei
			document.getElementById("iccid").innerText = data.iccid
			document.getElementById("light_status").innerText = data.light_status
			document.getElementById("light_override").innerText = data.light_override
			document.getElementById("light_power").innerText = data.light_power
            document.getElementById("refresh").disabled = false
            document.getElementById("refresh").style.cursor = "default"
	});
}
function toggle_do() {
  var xhr = new XHR();
	xhr.get('<%=luci.dispatcher.build_url("admin", "nyc-dot", "rest-api", "status", "toggle_do")%>', null,
		function(x, data) {
			console.log(data);
			document.getElementById("do2").innerText = data.status
	});
}
refresh_status();
</script>
<%+footer%>
