From 6f48041c9dd52f4d98c3defec030232aa0bbfeb9 Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Sat, 23 Mar 2024 20:51:35 +0100
Subject: merge Sean's code

---
 old_code/overview_control.html      |  47 -----------
 ui/css/style.css                    |  25 +++++-
 ui/grid.html                        |  47 -----------
 ui/index.html                       | 150 +++++++++++++++++++++++++-----------
 ui/sections/lfv/barrier.html        |  10 ---
 ui/sections/lfv/lights.html         |  13 ----
 ui/sections/lfv/traffic_lights.html |  10 ---
 ui/sections/lfv_selector.html       |   5 --
 ui/sections/map.html                |   1 -
 ui/sections/notifications.html      |  10 ---
 10 files changed, 124 insertions(+), 194 deletions(-)
 delete mode 100644 old_code/overview_control.html
 delete mode 100644 ui/grid.html
 delete mode 100644 ui/sections/lfv/barrier.html
 delete mode 100644 ui/sections/lfv/lights.html
 delete mode 100644 ui/sections/lfv/traffic_lights.html
 delete mode 100644 ui/sections/lfv_selector.html
 delete mode 100644 ui/sections/map.html
 delete mode 100644 ui/sections/notifications.html

diff --git a/old_code/overview_control.html b/old_code/overview_control.html
deleted file mode 100644
index 4a27e53..0000000
--- a/old_code/overview_control.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<ul>
-    <li class="list-item"> 
-        <span class="dot"></span> Fotocellen
-        <div class="buttons">
-            <button onclick="onOffButton(this)" value="1">On</button>
-            <button onclick="onOffButton(this)" value="0">Off</button>
-        </div>
-    </li>
-    <li class="list-item"> 
-        <span class="dot"></span> CCTV
-        <div class="buttons">
-            <button onclick="onOffButton(this)" value="1">On</button>
-            <button onclick="onOffButton(this)" value="0">Off</button>
-        </div>
-    </li>
-    <li class="list-item"> 
-        <span class="dot"></span> Verlichting
-        <div class="buttons">
-            <button onclick="onOffButton(this)" value="1">On</button>
-            <button onclick="onOffButton(this)" value="0">Off</button>
-        </div>
-    </li>
-    <li class="list-item"> 
-        <span class="dot"></span> Verkeerslicht
-        <div class="buttons">
-            <button onclick="onOffButton(this)" value="1">On</button>
-            <button onclick="onOffButton(this)" value="0">Off</button>
-        </div>
-    </li>
-    <li class="list-item"> 
-        <span class="dot"></span> Slagboom
-        <div class="buttons">
-            <button onclick="onOffButton(this)" value="1">On</button>
-            <button onclick="onOffButton(this)" value="0">Off</button>
-        </div>
-    </li>
-    <li class="list-item"> 
-        <span class="dot"></span> Matrixbord
-        <div class="buttons">
-            <select class="dropdown">
-                <option value="wegafsluiting">Wegafsluiting</option>
-                <option value="werkzaamheden">Werkzaamheden</option>
-                <option value="uitschakelen">Uitschakelen</option>
-            </select>
-        </div>
-    </li>
-</ul>
\ No newline at end of file
diff --git a/ui/css/style.css b/ui/css/style.css
index 963f4c5..7b8f8d2 100644
--- a/ui/css/style.css
+++ b/ui/css/style.css
@@ -27,9 +27,13 @@ body, html {
 	overflow-y: auto; /* Add vertical scrolling */
 }
 
-/*.section.overview_control { 
+.section.overview_control { 
 	grid-row: 1 / span 2; /* Span the top left section across both rows */
-/*}*/
+	justify-content: unset;
+	align-items: normal;
+	padding: 8px;
+	gap: 8px;
+}
 
 .table-wrapper {
 	flex-grow: 1; /* Table wrapper takes remaining space */
@@ -98,7 +102,7 @@ ul {
 	border: 5px solid black;
 	width: calc(20% - 5px);
 	height: calc(40% - 5px);
-	background-color: gray;
+	background-color: #ccc;
 }
 .traffic-light {
 	width: 20px;
@@ -136,10 +140,23 @@ ul {
 	left: 5px;
 }
 
-
 /* Styles for the inner content of the squares */
 .inner-content {
 	position: relative;
 	width: 100%;
 	height: 100%;
 }
+
+details {
+	border: 1px solid #0008;
+	padding: 4px;
+}
+
+details summary {
+	user-select: none;
+}
+
+details[open] summary {
+	border-bottom: 1px solid #0008;
+}
+
diff --git a/ui/grid.html b/ui/grid.html
deleted file mode 100644
index 70810e5..0000000
--- a/ui/grid.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Four Sections Layout</title>
-	<link rel="stylesheet" href="css/style.css">
-	<script type="module" src="js/main.js"></script>
-</head>
-<body>
-    <div class="container">
-        <div class="section overview_control" id="overview_control"></div>
-        <div class="section notifications" id="notifications"></div>
-        <div class="section lfv_selector" id="lfv_selector"></div>
-        <div class="section map" id="map"></div>
-    </div>
-
-    <script>
-        // Function to include HTML content from given URL into specified element
-        async function includeHTML(url, elementId) {
-            const response = await fetch(url);
-            const html = await response.text();
-            document.getElementById(elementId).innerHTML = html;
-        }
-
-        // Function to handle item click and load respective HTML page
-        function handleItemClick(event) {
-            const target = event.target.getAttribute('data-target');
-            includeHTML(`sections/lfv/${target}.html`, 'overview_control');
-        }
-
-        // Include HTML content into respective div elements
-        // includeHTML('sections/overview_control.html', 'overview_control');
-        includeHTML('sections/notifications.html', 'notifications');
-        includeHTML('sections/lfv_selector.html', 'lfv_selector');
-        includeHTML('sections/map.html', 'map');
-
-        // Add event listener to each item in the list (event delegation)
-        document.getElementById('lfv_selector').addEventListener('click', function(event) {
-            if (event.target.tagName === 'LI') {
-                handleItemClick(event);
-            }
-        });
-    </script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/ui/index.html b/ui/index.html
index 1d0eb37..ae263f3 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,57 +8,110 @@
 	<link rel="stylesheet" href="css/style.css">
 	<script type="module" src="js/main.js"></script>
 </head>
+
 <body>
 	<div class="container">
 		<div class="section overview_control">
-			<ul>
-				<li class="list-item"> 
-					<span class="dot"></span> Fotocellen
-					<div class="buttons">
-						<button onclick="onOffButton(this)" value="1">On</button>
-						<button onclick="onOffButton(this)" value="0">Off</button>
-					</div>
-				</li>
-				<li class="list-item"> 
-					<span class="dot"></span> CCTV
-					<div class="buttons">
-						<button onclick="onOffButton(this)" value="1">On</button>
-						<button onclick="onOffButton(this)" value="0">Off</button>
-					</div>
-				</li>
-				<li class="list-item"> 
-					<span class="dot"></span> Verlichting
-					<div class="buttons">
-						<button onclick="onOffButton(this)" value="1">On</button>
-						<button onclick="onOffButton(this)" value="0">Off</button>
-					</div>
-				</li>
-				<li class="list-item"> 
-					<span class="dot"></span> Verkeerslicht
-					<div class="buttons">
-						<button onclick="onOffButton(this)" value="1">On</button>
-						<button onclick="onOffButton(this)" value="0">Off</button>
-					</div>
-				</li>
-				<li class="list-item"> 
-					<span class="dot"></span> Slagboom
-					<div class="buttons">
-						<button onclick="onOffButton(this)" value="1">On</button>
-						<button onclick="onOffButton(this)" value="0">Off</button>
-					</div>
-				</li>
-				<li class="list-item"> 
-					<span class="dot"></span> Matrixbord
-					<div class="buttons">
-						<select class="dropdown">
-							<option value="wegafsluiting">Wegafsluiting</option>
-							<option value="werkzaamheden">Werkzaamheden</option>
-							<option value="uitschakelen">Uitschakelen</option>
-						</select>
-					</div>
-				</li>
-			</ul>
+
+			<details open>
+				<summary>State controls</summary>
+				<div class="state_controls">
+					<ul>
+						<li class="list-item"> 
+							<span class="dot"></span> Fotocellen
+							<div class="buttons">
+								<button onclick="onOffButton(this)" value="1">On</button>
+								<button onclick="onOffButton(this)" value="0">Off</button>
+							</div>
+						</li>
+						<li class="list-item"> 
+							<span class="dot"></span> CCTV
+							<div class="buttons">
+								<button onclick="onOffButton(this)" value="1">On</button>
+								<button onclick="onOffButton(this)" value="0">Off</button>
+							</div>
+						</li>
+						<li class="list-item"> 
+							<span class="dot"></span> Verlichting
+							<div class="buttons">
+								<button onclick="onOffButton(this)" value="1">On</button>
+								<button onclick="onOffButton(this)" value="0">Off</button>
+							</div>
+						</li>
+						<li class="list-item"> 
+							<span class="dot"></span> Verkeerslicht
+							<div class="buttons">
+								<button onclick="onOffButton(this)" value="1">On</button>
+								<button onclick="onOffButton(this)" value="0">Off</button>
+							</div>
+						</li>
+						<li class="list-item"> 
+							<span class="dot"></span> Slagboom
+							<div class="buttons">
+								<button onclick="onOffButton(this)" value="1">On</button>
+								<button onclick="onOffButton(this)" value="0">Off</button>
+							</div>
+						</li>
+						<li class="list-item"> 
+							<span class="dot"></span> Matrixbord
+							<div class="buttons">
+								<select class="dropdown">
+									<option value="wegafsluiting">Wegafsluiting</option>
+									<option value="werkzaamheden">Werkzaamheden</option>
+									<option value="uitschakelen">Uitschakelen</option>
+								</select>
+							</div>
+						</li>
+					</ul>
+				</div>
+			</details>
+
+			<details>
+				<summary>Lights</summary>
+				<div class="light_controls">
+					<ul>
+						<li><button onclick="setPercentage(0)">0%</button></li>
+						<li><button onclick="setPercentage(10)">10%</button></li>
+						<li><button onclick="setPercentage(20)">20%</button></li>
+					</ul>
+					<div id="percentageDisplay">Percentage: 0%</div>
+					<script>
+						function setPercentage(percentage) {
+							document.getElementById('percentageDisplay').innerText = `Percentage: ${percentage}%`;
+						}
+					</script>
+				</div>
+			</details>
+
+			<details>
+				<summary>Traffic lights</summary>
+				<div class="traffic_light_controls">
+					<button onclick="setStatus('Red')">Red</button>
+					<button onclick="setStatus('Off')">Off</button>
+					<div id="statusDisplay">Status: </div>
+					<script>
+						function setStatus(status) {
+							document.getElementById('statusDisplay').innerText = `Status: ${status}`;
+						}
+					</script>
+				</div>
+			</details>
+
+			<details>
+				<summary>Barrier</summary>
+				<div class="barrier_controls">
+					<button onclick="setStatus('Open')">Open</button>
+					<button onclick="setStatus('Close')">Close</button>
+					<div id="statusDisplay">Status: </div>
+					<script>
+						function setStatus(status) {
+							document.getElementById('statusDisplay').innerText = `Status: ${status}`;
+						}
+					</script>
+				</div>
+			</details>
 		</div>
+
 		<div class="section notifications" id="sectionNotifications">
 			<div class="button-wrapper">
 				<button id="addRowBtn">Add Row</button>
@@ -70,6 +124,7 @@
 				</table>
 			</div>
 		</div>
+
 		<div class="section bottom-right">
 			<p>Start</p>
 			<div class="canvas-square" id="myCanvas1">
@@ -100,6 +155,7 @@
 			<p>End</p>	 
 		</div>
 	</div>
+
 </body>
 </html>
 
diff --git a/ui/sections/lfv/barrier.html b/ui/sections/lfv/barrier.html
deleted file mode 100644
index 64705b0..0000000
--- a/ui/sections/lfv/barrier.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<h2>Barrier Control</h2>
-<button onclick="setStatus('Open')">Open</button>
-<button onclick="setStatus('Close')">Close</button>
-<div id="statusDisplay">Status: </div>
-
-<script>
-    function setStatus(status) {
-        document.getElementById('statusDisplay').innerText = `Status: ${status}`;
-    }
-</script>
diff --git a/ui/sections/lfv/lights.html b/ui/sections/lfv/lights.html
deleted file mode 100644
index bb37603..0000000
--- a/ui/sections/lfv/lights.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<h2>Lights Control</h2>
-<ul>
-    <li><button onclick="setPercentage(0)">0%</button></li>
-    <li><button onclick="setPercentage(10)">10%</button></li>
-    <li><button onclick="setPercentage(20)">20%</button></li>
-</ul>
-<div id="percentageDisplay">Percentage: 0%</div>
-
-<script>
-    function setPercentage(percentage) {
-        document.getElementById('percentageDisplay').innerText = `Percentage: ${percentage}%`;
-    }
-</script>
diff --git a/ui/sections/lfv/traffic_lights.html b/ui/sections/lfv/traffic_lights.html
deleted file mode 100644
index 8fa3eb4..0000000
--- a/ui/sections/lfv/traffic_lights.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<h2>Traffic Lights Control</h2>
-<button onclick="setStatus('Red')">Red</button>
-<button onclick="setStatus('Off')">Off</button>
-<div id="statusDisplay">Status: </div>
-
-<script>
-    function setStatus(status) {
-        document.getElementById('statusDisplay').innerText = `Status: ${status}`;
-    }
-</script>
diff --git a/ui/sections/lfv_selector.html b/ui/sections/lfv_selector.html
deleted file mode 100644
index 3608d31..0000000
--- a/ui/sections/lfv_selector.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<ul>
-    <li data-target="lights">Lights</li>
-    <li data-target="traffic_lights">Traffic Lights</li>
-    <li data-target="barrier">Barrier</li>
-</ul>
diff --git a/ui/sections/map.html b/ui/sections/map.html
deleted file mode 100644
index 734ebe1..0000000
--- a/ui/sections/map.html
+++ /dev/null
@@ -1 +0,0 @@
-This is a map
\ No newline at end of file
diff --git a/ui/sections/notifications.html b/ui/sections/notifications.html
deleted file mode 100644
index cd2863e..0000000
--- a/ui/sections/notifications.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="button-wrapper">
-    <button id="addRowBtn">Add Row</button>
-</div>
-<div class="table-wrapper">
-    <table id="myTable">
-        <tr>
-            <th>Column 1</th>
-        </tr>
-    </table>
-</div>
-- 
cgit v1.2.3