aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2024-03-23 20:51:35 +0100
committerlonkaars <loek@pipeframe.xyz>2024-03-23 20:51:35 +0100
commit6f48041c9dd52f4d98c3defec030232aa0bbfeb9 (patch)
tree092020453e1893021dcf5be7b2f7d4ce93163f87
parenteb46bad3d09e05fe40c4637c3d1aca5d0a263514 (diff)
merge Sean's code
Diffstat
-rw-r--r--old_code/overview_control.html47
-rw-r--r--ui/css/style.css25
-rw-r--r--ui/grid.html47
-rw-r--r--ui/index.html150
-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
10 files changed, 124 insertions, 194 deletions
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>