clean up some code

author: lonkaars <loek@pipeframe.xyz> 2024-03-19 22:04:50 +0100
committer: lonkaars <loek@pipeframe.xyz> 2024-03-19 22:04:50 +0100
commit: dd1d3ecfb03fc37662d40d5a005ce4f92f649d3f (patch)
tree: ef4712170a78c1f79ec3300ad61e8a8c698b2081 /ui
parent: ccbf5f66f88f66e98bfa2d566524cd5636b5d8ee (diff)
6 files changed, 194 insertions, 204 deletions
diff --git a/ui/css/style.css b/ui/css/style.css
new file mode 100644
index 0000000..e16181c
--- /dev/null
+++ b/ui/css/style.css
@@ -0,0 +1,92 @@
+/* CSS for styling */
+body, html {
+	margin: 0;
+	padding: 0;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.container {
+	display: grid;
+	grid-template-columns: 1fr 2fr;
+	grid-template-rows: 1fr 2fr;
+	gap: 10px;
+	width: 100vw;
+	height: 100vh;
+}
+
+.section {
+	background-color: #f0f0f0;
+	border: 1px solid #ccc;
+	display: flex;
+	flex-direction: column; /* Ensure content within sections stacks vertically */
+	justify-content: center;
+	align-items: center;
+	font-size: 24px;
+	overflow-y: auto; /* Add vertical scrolling */
+}
+
+.section.overview_control {
+	grid-row: 1 / span 2; /* Span the top left section across both rows */
+}
+
+
+.table-wrapper {
+	flex-grow: 1; /* Table wrapper takes remaining space */
+	display: flex;
+	justify-content: flex-start; /* Align content to the left */
+	align-items: flex-start; /* Align content to the top */
+	flex-direction: column; /* Content arranged in a column */
+	overflow: auto; /* Enable scrolling within the table wrapper */
+}
+
+#myTable {
+	background-color: #fff;
+	width: 100%;
+	border-collapse: collapse; /* Collapse table borders */
+}
+
+#myTable th {
+	position: sticky;
+	top: 0; /* Stick the table header to the top */
+	background-color: #f0f0f0; /* Set background color for the sticky header */
+	z-index: 1; /* Ensure it stays above other content */
+	width: 100%; /* Ensure table header takes full width */
+}
+
+.button-wrapper {
+	position: sticky;
+	top: 0; /* Stick the button wrapper to the top */
+	background-color: #f0f0f0; /* Set background color for the sticky wrapper */
+	padding: 10px; /* Add padding for spacing */
+	left: 10px;
+}
+
+ul {
+	list-style-type: none;
+	padding: 0;
+}
+.list-item {
+	margin-bottom: 10px;
+	display: flex;
+	align-items: center;
+}
+
+.dot {
+	height: 10px;
+	width: 10px;
+	border-radius: 999px;
+	margin-right: 10px;
+}
+.dot.on { background-color: green; }
+.dot.off { background-color: red; }
+
+.buttons {
+	margin-left: auto;
+}
+.dropdown {
+	margin-left: 10px;
+}
+
diff --git a/ui/file.html b/ui/file.html
deleted file mode 100644
index 19c356a..0000000
--- a/ui/file.html
+++ /dev/null
@@ -1,100 +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="style.css">
-</head>
-<script src="jquery.js"></script> 
-<script> 
-    $(function(){
-      $("#overview_control_src").load("overview_control.html"); 
-    });
-</script> 
-<body>
-    <div class="container">
-        <div class="section overview_control">
-            <ul>
-                <li class="list-item"> 
-                    <span class="dot" id="dot1"></span> Fotocellen
-                    <div class="buttons">
-                        <button onclick="turnOn('dot1')">On</button>
-                        <button onclick="turnOff('dot1')">Off</button>
-                    </div>
-                </li>
-                <li class="list-item"> 
-                    <span class="dot" id="dot2"></span> CCTV
-                    <div class="buttons">
-                        <button onclick="turnOn('dot2')">On</button>
-                        <button onclick="turnOff('dot2')">Off</button>
-                    </div>
-                </li>
-                <li class="list-item"> 
-                    <span class="dot" id="dot3"></span> Verlichting
-                    <div class="buttons">
-                        <button onclick="turnOn('dot3')">On</button>
-                        <button onclick="turnOff('dot3')">Off</button>
-                    </div>
-                </li>
-                <li class="list-item"> 
-                    <span class="dot" id="dot4"></span> Verkeerslicht
-                    <div class="buttons">
-                        <button onclick="turnOn('dot4')">On</button>
-                        <button onclick="turnOff('dot4')">Off</button>
-                    </div>
-                </li>
-                <li class="list-item"> 
-                    <span class="dot" id="dot5"></span> Slagboom
-                    <div class="buttons">
-                        <button onclick="turnOn('dot5')">On</button>
-                        <button onclick="turnOff('dot5')">Off</button>
-                    </div>
-                </li>
-                <li class="list-item"> 
-                    <span class="dot" id="dot6"></span> Matrixbord
-                    <div class="buttons">
-                        <select class="dropdown" onchange="selectOption(this.value)">
-                            <option value="wegafsluiting">Wegafsluiting</option>
-                            <option value="werkzaamheden">Werkzaamheden</option>
-                            <option value="uitschakelen">Uitschakelen</option>
-                        </select>
-                    </div>
-                </li>
-            </ul>
-        
-            <script>
-            function turnOn(dotId) {
-                var dot = document.getElementById(dotId);
-                dot.style.backgroundColor = 'green';
-            }
-
-            function turnOff(dotId) {
-                var dot = document.getElementById(dotId);
-                dot.style.backgroundColor = 'red';
-            }
-            function selectOption(option) {
-                // Empty script placeholder for now
-                console.log("Selected option: " + option);
-            }
-
-            </script>
-        </div>
-        <div class="section notifications" id="sectionNotifications">
-            <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>
-        </div>
-        <div class="section map">This is a map</div>
-    </div>
-
-    <script src="script.js"></script>
-</body>
-</html>
diff --git a/ui/index.html b/ui/index.html
new file mode 100644
index 0000000..8971d64
--- /dev/null
+++ b/ui/index.html
@@ -0,0 +1,77 @@
+<!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">
+			<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>
+		<div class="section notifications" id="sectionNotifications">
+			<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>
+		</div>
+		<div class="section map">This is a map</div>
+	</div>
+</body>
+</html>
+
diff --git a/ui/js/main.js b/ui/js/main.js
index 033b0bb..91572e4 100644
--- a/ui/js/main.js
+++ b/ui/js/main.js
@@ -3,3 +3,28 @@ import './socket.js';
 import api from './api.js';
 window.api = api; // export api to inline JS handlers
 
+// Initialize a counter to keep track of the row number
+var rowCount = 1;
+
+// JavaScript for adding a row dynamically at the top
+document.getElementById("addRowBtn").addEventListener("click", () => {
+	var table = document.getElementById("myTable");
+	var row = table.insertRow(1); // Insert row at the top of the table
+	var cell = row.insertCell(0); // Insert cell into the row
+	cell.innerHTML = "Hallo siem ik ben dit aan het testen. er blijven maar 10 statussen in deze tabel " + rowCount++; // Add content to the cell with incremented counter
+	var size = table.rows.length;
+	var lastRowIndex = table.rows.length - 1; // Index of the last row
+	if (size > 11) { // Check if there is more than one row (excluding the header row)
+		table.deleteRow(lastRowIndex); // Delete the last row
+	}
+});
+
+function onOffButton(btn) {
+	var newState = !!Number(btn.value); // Boolean("0") == true
+	var dot = btn.parentNode.parentNode.querySelector('.dot');
+	dot.classList.remove("on");
+	dot.classList.remove("off");
+	dot.classList.add(newState ? "on" : "off");
+}
+window.onOffButton = onOffButton;
+
diff --git a/ui/script.js b/ui/script.js
deleted file mode 100644
index 6a5e457..0000000
--- a/ui/script.js
+++ /dev/null
@@ -1,15 +0,0 @@
-// Initialize a counter to keep track of the row number
-var rowCount = 1;
-
-// JavaScript for adding a row dynamically at the top
-document.getElementById("addRowBtn").addEventListener("click", function() {
-    var table = document.getElementById("myTable");
-    var row = table.insertRow(1); // Insert row at the top of the table
-    var cell = row.insertCell(0); // Insert cell into the row
-    cell.innerHTML = "Hallo siem ik ben dit aan het testen. er blijven maar 10 statussen in deze tabel " + rowCount++; // Add content to the cell with incremented counter
-    var size = table.rows.length;
-    var lastRowIndex = table.rows.length - 1; // Index of the last row
-    if (size > 11) { // Check if there is more than one row (excluding the header row)
-        table.deleteRow(lastRowIndex); // Delete the last row
-    }
-});
diff --git a/ui/style.css b/ui/style.css
deleted file mode 100644
index 6cb4598..0000000
--- a/ui/style.css
+++ /dev/null
@@ -1,89 +0,0 @@
-/* CSS for styling */
-body, html {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.container {
-    display: grid;
-    grid-template-columns: 1fr 2fr;
-    grid-template-rows: 1fr 2fr;
-    gap: 10px;
-    width: 100vw; /* Set width to 100% of viewport width */
-    height: 100vh; /* Set height to 100% of viewport height */
-}
-
-.section {
-    background-color: #f0f0f0;
-    border: 1px solid #ccc;
-    display: flex;
-    flex-direction: column; /* Ensure content within sections stacks vertically */
-    justify-content: center;
-    align-items: center;
-    font-size: 24px;
-    overflow-y: auto; /* Add vertical scrolling */
-}
-
-.section.overview_control {
-    grid-row: 1 / span 2; /* Span the top left section across both rows */
-}
-
-
-.table-wrapper {
-    flex-grow: 1; /* Table wrapper takes remaining space */
-    display: flex;
-    justify-content: flex-start; /* Align content to the left */
-    align-items: flex-start; /* Align content to the top */
-    flex-direction: column; /* Content arranged in a column */
-    overflow: auto; /* Enable scrolling within the table wrapper */
-}
-
-#myTable {
-    background-color: #fff; /* Set background color for the table */
-    width: 100%; /* Ensure table takes full width of its container */
-    border-collapse: collapse; /* Collapse table borders */
-}
-
-#myTable th {
-    position: sticky;
-    top: 0; /* Stick the table header to the top */
-    background-color: #f0f0f0; /* Set background color for the sticky header */
-    z-index: 1; /* Ensure it stays above other content */
-    width: 100%; /* Ensure table header takes full width */
-}
-.button-wrapper {
-    position: sticky;
-    top: 0; /* Stick the button wrapper to the top */
-    background-color: #f0f0f0; /* Set background color for the sticky wrapper */
-    padding: 10px; /* Add padding for spacing */
-    left: 10px;
-}
-
-ul {
-    list-style-type: none;
-    padding: 0;
-}
-.list-item {
-    margin-bottom: 10px;
-    display: flex;
-    align-items: center;
-}
-.dot {
-    height: 10px;
-    width: 10px;
-    background-color: red;
-    border-radius: 50%;
-    margin-right: 10px;
-}
-.buttons {
-    margin-left: auto;
-}
-.dropdown {
-    margin-left: 10px;
-}
-
-/* Additional styles as needed */
author	lonkaars <loek@pipeframe.xyz>	2024-03-19 22:04:50 +0100
committer	lonkaars <loek@pipeframe.xyz>	2024-03-19 22:04:50 +0100
commit	dd1d3ecfb03fc37662d40d5a005ce4f92f649d3f (patch)
tree	ef4712170a78c1f79ec3300ad61e8a8c698b2081 /ui
parent	ccbf5f66f88f66e98bfa2d566524cd5636b5d8ee (diff)