Four Sections Layout

From dd1d3ecfb03fc37662d40d5a005ce4f92f649d3f Mon Sep 17 00:00:00 2001 From: lonkaars Date: Tue, 19 Mar 2024 22:04:50 +0100 Subject: clean up some code --- ui/css/style.css | 92 ++++++++++++++++++++++++++++++++++++++++++++++++++ ui/file.html | 100 ------------------------------------------------------- ui/index.html | 77 ++++++++++++++++++++++++++++++++++++++++++ ui/js/main.js | 25 ++++++++++++++ ui/script.js | 15 --------- ui/style.css | 89 ------------------------------------------------- 6 files changed, 194 insertions(+), 204 deletions(-) create mode 100644 ui/css/style.css delete mode 100644 ui/file.html create mode 100644 ui/index.html delete mode 100644 ui/script.js delete mode 100644 ui/style.css 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 @@ - - - - - -Four Sections Layout - - - - - -

- Fotocellen -
- - -
-
- CCTV -
- - -
-
- Verlichting -
- - -
-
- Verkeerslicht -
- - -
-
- Slagboom -
- - -
-
- Matrixbord -
- -
-

- - -

- -

- - - - -

Column 1

This is a map

- - - - 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 @@ + + + + + + Four Sections Layout + + + + +

+ Fotocellen +
+ + +
+
+ CCTV +
+ + +
+
+ Verlichting +
+ + +
+
+ Verkeerslicht +
+ + +
+
+ Slagboom +
+ + +
+
+ Matrixbord +
+ +
+

+ +

+ + + + +

Column 1

This is a map

+ + + 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 */ -- cgit v1.2.3