diff options
| author | Sean <heavydragon99@outlook.com> | 2024-03-21 09:30:20 +0100 |
|---|---|---|
| committer | Sean <heavydragon99@outlook.com> | 2024-03-21 09:30:20 +0100 |
| commit | feb7a342718f0d014678517bf45e0043846905a7 (patch) | |
| tree | fc34e8ff06a1dfa116d09212c865c5e2af978848 | |
| parent | dd1d3ecfb03fc37662d40d5a005ce4f92f649d3f (diff) | |
Added fourth grid. Made grid 1 change depending on which item is selected
| -rw-r--r-- | ui/css/style.css | 4 | ||||
| -rw-r--r-- | ui/grid.html | 47 | ||||
| -rw-r--r-- | ui/sections/lfv/barrier.html | 10 | ||||
| -rw-r--r-- | ui/sections/lfv/lights.html | 13 | ||||
| -rw-r--r-- | ui/sections/lfv/traffic_lights.html | 10 | ||||
| -rw-r--r-- | ui/sections/lfv_selector.html | 5 | ||||
| -rw-r--r-- | ui/sections/map.html | 1 | ||||
| -rw-r--r-- | ui/sections/notifications.html | 10 | ||||
| -rw-r--r-- | ui/sections/overview_control.html | 47 |
9 files changed, 145 insertions, 2 deletions
diff --git a/ui/css/style.css b/ui/css/style.css index e16181c..18093b4 100644 --- a/ui/css/style.css +++ b/ui/css/style.css @@ -28,9 +28,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 { 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> diff --git a/ui/sections/overview_control.html b/ui/sections/overview_control.html new file mode 100644 index 0000000..4a27e53 --- /dev/null +++ b/ui/sections/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 |