diff options
| author | lonkaars <loek@pipeframe.xyz> | 2024-03-23 20:33:54 +0100 |
|---|---|---|
| committer | lonkaars <loek@pipeframe.xyz> | 2024-03-23 20:33:54 +0100 |
| commit | eb46bad3d09e05fe40c4637c3d1aca5d0a263514 (patch) | |
| tree | dfd68380a3e427bcad53db91b321607451e41238 /ui | |
| parent | 8c77921791842bbda80f3eb254092e6e7c0ad648 (diff) | |
| parent | 896ff81bd0da72d8aed990ad823eca6a0c03d148 (diff) | |
Merge branch 'HTML_Sean'
Diffstat (limited to 'ui')
| -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 |
8 files changed, 98 insertions, 2 deletions
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> |