aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2024-03-23 20:33:54 +0100
committerlonkaars <loek@pipeframe.xyz>2024-03-23 20:33:54 +0100
commiteb46bad3d09e05fe40c4637c3d1aca5d0a263514 (patch)
treedfd68380a3e427bcad53db91b321607451e41238
parent8c77921791842bbda80f3eb254092e6e7c0ad648 (diff)
parent896ff81bd0da72d8aed990ad823eca6a0c03d148 (diff)
Merge branch 'HTML_Sean'
-rw-r--r--old_code/overview_control.html47
-rw-r--r--ui/css/style.css4
-rw-r--r--ui/grid.html47
-rw-r--r--ui/sections/lfv/barrier.html10
-rw-r--r--ui/sections/lfv/lights.html13
-rw-r--r--ui/sections/lfv/traffic_lights.html10
-rw-r--r--ui/sections/lfv_selector.html5
-rw-r--r--ui/sections/map.html1
-rw-r--r--ui/sections/notifications.html10
9 files changed, 145 insertions, 2 deletions
diff --git a/old_code/overview_control.html b/old_code/overview_control.html
new file mode 100644
index 0000000..4a27e53
--- /dev/null
+++ b/old_code/overview_control.html
@@ -0,0 +1,47 @@
+<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 3d92840..963f4c5 100644
--- a/ui/css/style.css
+++ b/ui/css/style.css
@@ -27,9 +27,9 @@ 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 */
-}
+/*}*/
.table-wrapper {
flex-grow: 1; /* Table wrapper takes remaining space */
diff --git a/ui/grid.html b/ui/grid.html
new file mode 100644
index 0000000..70810e5
--- /dev/null
+++ b/ui/grid.html
@@ -0,0 +1,47 @@
+<!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/sections/lfv/barrier.html b/ui/sections/lfv/barrier.html
new file mode 100644
index 0000000..64705b0
--- /dev/null
+++ b/ui/sections/lfv/barrier.html
@@ -0,0 +1,10 @@
+<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
new file mode 100644
index 0000000..bb37603
--- /dev/null
+++ b/ui/sections/lfv/lights.html
@@ -0,0 +1,13 @@
+<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
new file mode 100644
index 0000000..8fa3eb4
--- /dev/null
+++ b/ui/sections/lfv/traffic_lights.html
@@ -0,0 +1,10 @@
+<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
new file mode 100644
index 0000000..3608d31
--- /dev/null
+++ b/ui/sections/lfv_selector.html
@@ -0,0 +1,5 @@
+<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
new file mode 100644
index 0000000..734ebe1
--- /dev/null
+++ b/ui/sections/map.html
@@ -0,0 +1 @@
+This is a map \ No newline at end of file
diff --git a/ui/sections/notifications.html b/ui/sections/notifications.html
new file mode 100644
index 0000000..cd2863e
--- /dev/null
+++ b/ui/sections/notifications.html
@@ -0,0 +1,10 @@
+<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>