113 lines
2.8 KiB
JavaScript
113 lines
2.8 KiB
JavaScript
window.onload = function() {
|
|
setInterval(updateDashboard, 500)
|
|
}
|
|
|
|
function updateDashboard() {
|
|
//document.body.innerHTML = ""
|
|
currentStatus = getEmployeeStatus()
|
|
currentStatus.then(function(data) {
|
|
jsonData = data
|
|
for (var employee in jsonData) {
|
|
if (!jsonData.hasOwnProperty(employee)) continue;
|
|
|
|
name = jsonData[employee][0]
|
|
room = jsonData[employee][1]
|
|
available = jsonData[employee][2]
|
|
//document.body.innerHTML += jsonData[employee][0] + " is available: " + jsonData[employee][2] + "<br />"
|
|
drawLight(available, name.replace(" ", "_"), name)
|
|
}
|
|
}).catch(function(err) {
|
|
console.log("err")
|
|
})
|
|
}
|
|
|
|
function getEmployeeStatus() {
|
|
return fetch('getStatus', {
|
|
method: 'post'
|
|
}).then(function(response) {
|
|
return response.json()
|
|
}).catch(function(err) {
|
|
console.log(err)
|
|
});
|
|
}
|
|
|
|
function createOrGetLight(id, label) {
|
|
light = document.querySelectorAll(".trafficLight." + id)
|
|
if (light.length > 0) {
|
|
return light[0]
|
|
} else {
|
|
light = createLight(id, label)
|
|
document.body.appendChild(light)
|
|
return light
|
|
}
|
|
}
|
|
|
|
function createLight(id, labelText) {
|
|
trafficLight = document.createElement("div")
|
|
trafficLight.classList.add("trafficLight")
|
|
trafficLight.classList.add(id)
|
|
label = document.createElement("div")
|
|
label.classList.add("label")
|
|
label.innerHTML = labelText
|
|
trafficLight.appendChild(label)
|
|
canvas = document.createElement("canvas")
|
|
canvas.classList.add("lights")
|
|
trafficLight.appendChild(canvas)
|
|
|
|
return trafficLight
|
|
}
|
|
|
|
function drawLight(available, id, label) {
|
|
container = createOrGetLight(id, label)
|
|
//clearCanvas()
|
|
//container = document.querySelectorAll(".trafficLight." + id)[0]
|
|
canvas = container.children[1]
|
|
//canvas = document.querySelectorAll(".trafficLight." + id + ">canvas")[0];
|
|
canvas.width = container.getBoundingClientRect().width
|
|
canvas.height = container.getBoundingClientRect().height - 80
|
|
cxt = canvas.getContext("2d");
|
|
cHeight = canvas.getBoundingClientRect().height
|
|
cWidth = canvas.getBoundingClientRect().width
|
|
centerX = cWidth / 2;
|
|
centerRedY = cHeight / 4;
|
|
centerGreenY = (cHeight / 4) * 3;
|
|
halfHeight = cHeight / 2
|
|
if (halfHeight < cWidth) {
|
|
radius = halfHeight / 2
|
|
} else {
|
|
radius = cWidth / 2
|
|
}
|
|
|
|
radius -= 20 //margin
|
|
|
|
if (available == true) {
|
|
green = "#00f300" //turned on
|
|
red = "#570000" //turned off
|
|
} else {
|
|
green = "#003000"
|
|
red = "#cc0000"
|
|
}
|
|
cxt.strikeStyle = "#999999";
|
|
cxt.lineWidth = 3;
|
|
|
|
// Draw green light
|
|
cxt.beginPath()
|
|
cxt.arc(centerX, centerGreenY, radius, 0, 2 * Math.PI);
|
|
cxt.fillStyle = green;
|
|
cxt.fill();
|
|
cxt.stroke();
|
|
|
|
// Draw red light
|
|
cxt.beginPath()
|
|
cxt.arc(centerX, centerRedY, radius, 0, 2 * Math.PI);
|
|
cxt.fillStyle = red;
|
|
cxt.fill();
|
|
cxt.stroke();
|
|
}
|
|
|
|
function clearCanvas() {
|
|
canvas = document.getElementsByClassName("lights")[0];
|
|
cxt = canvas.getContext("2d");
|
|
cxt.clearRect(0, 0, canvas.width, canvas.height);
|
|
}
|