Add dedicated traffic light to management page

assets/js/ampel.js

@@ -0,0 +1,82 @@
+function drawLight(available, light_id, light_label, room_id, room_label) {
+	container = createOrGetLight(light_id, light_label, room_id, room_label)
+	canvas = container.children[1]
+	canvas.width = container.getBoundingClientRect().width
+	canvas.width = maxLightWidth
+	canvas.height = container.getBoundingClientRect().height - 80
+	canvas.height = maxLightWidth * 1.5
+	cxt = canvas.getContext("2d");
+	cHeight = canvas.getBoundingClientRect().height
+	cHeight = canvas.height
+	cWidth =  canvas.getBoundingClientRect().width
+	cWidth = canvas.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 createOrGetLight(light_id, light_label, room_id, room_label) {
+	light = document.querySelectorAll(".trafficLight." + light_id)
+	if (typeof room_id !== 'undefined') {
+		roomContainer = createOrGetRoomContainer(room_id, room_label)
+	}
+	if (light.length > 0) {
+		return light[0]
+	} else {
+		light = createLight(light_id, light_label)
+		if (typeof room_id !== 'undefined') {
+			roomContainer.appendChild(light)
+		} else {
+			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
+}
+

assets/js/mainDisplay.js

@@ -54,33 +54,6 @@ function createOrGetRoomContainer(room_id, room_label) {
 	}
 }
 
-function createOrGetLight(light_id, light_label, room_id, room_label) {
-	light = document.querySelectorAll(".trafficLight." + light_id)
-	roomContainer = createOrGetRoomContainer(room_id, room_label)
-	if (light.length > 0) {
-		return light[0]
-	} else {
-		light = createLight(light_id, light_label)
-		roomContainer.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 createRoomContainer(room_id, room_label) {
 	roomContainer = document.createElement("div")
 	roomContainer.classList.add("room")
@@ -105,55 +78,6 @@ function findSmallestBoundBox() {
 	return smallestBox;
 }
 
-function drawLight(available, light_id, light_label, room_id, room_label) {
-	container = createOrGetLight(light_id, light_label, room_id, room_label)
-	canvas = container.children[1]
-	canvas.width = container.getBoundingClientRect().width
-	canvas.width = maxLightWidth
-	canvas.height = container.getBoundingClientRect().height - 80
-	canvas.height = maxLightWidth * 1.5
-	cxt = canvas.getContext("2d");
-	cHeight = canvas.getBoundingClientRect().height
-	cHeight = canvas.height
-	cWidth =  canvas.getBoundingClientRect().width
-	cWidth = canvas.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");

assets/templates/display.tpl

@@ -61,6 +61,7 @@
 		</style>
 	</head>
 	<body>
+		<script src="assets/js/ampel.js"></script>
 		<script src="assets/js/mainDisplay.js"></script>
 	</body>
 </html>

assets/templates/manage.tpl

@@ -1,11 +1,26 @@
 <html>
 	<head>
 		<title>Ampelmanagement für Benutzer {{employeeData[0]}}</title>
+		<style>
+			body {
+				display: flex;
+				justify-content: center;
+				align-items: stretch;
+				height: 100%;
+			}
+
+			canvas.lights {
+				background-color: gray;
+			}
+
+		</style>
 	</head>
 	<body>
-		<div>Hello {{employeeData}}</div>
+		<script src="assets/js/ampel.js"></script>
+		<script>maxLightWidth = 300; drawLight({{str(employeeData[2]).lower()}}, "{{employeeData[0]}}", "")</script>
+		<div>Hello {{employeeData[0]}} (Raum {{employeeData[1]}}).</div>
 		<form method="post" action="logout">
-			<button type="submit">Logout</button>
+			<button type="submit">Abmelden</button>
 		</form>
 		<form method="post" action="setStatus">
 			<button type="submit">Ampel ändern</button>