diff options
| author | SiemV <swl.vermeulen@student.avans.nl> | 2024-03-19 21:26:23 +0100 |
|---|---|---|
| committer | lonkaars <loek@pipeframe.xyz> | 2024-03-19 21:26:23 +0100 |
| commit | ccbf5f66f88f66e98bfa2d566524cd5636b5d8ee (patch) | |
| tree | 7dde065669d0624d045ed6395daa41973a0d3633 /ui | |
| parent | af9a3231f3174fd04082b75eddb6a6c6d57654ef (diff) | |
Add files from Siem
Diffstat (limited to 'ui')
| -rw-r--r-- | ui/file.html | 100 | ||||
| -rw-r--r-- | ui/script.js | 15 | ||||
| -rw-r--r-- | ui/style.css | 89 |
3 files changed, 204 insertions, 0 deletions
diff --git a/ui/file.html b/ui/file.html new file mode 100644 index 0000000..19c356a --- /dev/null +++ b/ui/file.html @@ -0,0 +1,100 @@ +<!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="style.css">
+</head>
+<script src="jquery.js"></script>
+<script>
+ $(function(){
+ $("#overview_control_src").load("overview_control.html");
+ });
+</script>
+<body>
+ <div class="container">
+ <div class="section overview_control">
+ <ul>
+ <li class="list-item">
+ <span class="dot" id="dot1"></span> Fotocellen
+ <div class="buttons">
+ <button onclick="turnOn('dot1')">On</button>
+ <button onclick="turnOff('dot1')">Off</button>
+ </div>
+ </li>
+ <li class="list-item">
+ <span class="dot" id="dot2"></span> CCTV
+ <div class="buttons">
+ <button onclick="turnOn('dot2')">On</button>
+ <button onclick="turnOff('dot2')">Off</button>
+ </div>
+ </li>
+ <li class="list-item">
+ <span class="dot" id="dot3"></span> Verlichting
+ <div class="buttons">
+ <button onclick="turnOn('dot3')">On</button>
+ <button onclick="turnOff('dot3')">Off</button>
+ </div>
+ </li>
+ <li class="list-item">
+ <span class="dot" id="dot4"></span> Verkeerslicht
+ <div class="buttons">
+ <button onclick="turnOn('dot4')">On</button>
+ <button onclick="turnOff('dot4')">Off</button>
+ </div>
+ </li>
+ <li class="list-item">
+ <span class="dot" id="dot5"></span> Slagboom
+ <div class="buttons">
+ <button onclick="turnOn('dot5')">On</button>
+ <button onclick="turnOff('dot5')">Off</button>
+ </div>
+ </li>
+ <li class="list-item">
+ <span class="dot" id="dot6"></span> Matrixbord
+ <div class="buttons">
+ <select class="dropdown" onchange="selectOption(this.value)">
+ <option value="wegafsluiting">Wegafsluiting</option>
+ <option value="werkzaamheden">Werkzaamheden</option>
+ <option value="uitschakelen">Uitschakelen</option>
+ </select>
+ </div>
+ </li>
+ </ul>
+
+ <script>
+ function turnOn(dotId) {
+ var dot = document.getElementById(dotId);
+ dot.style.backgroundColor = 'green';
+ }
+
+ function turnOff(dotId) {
+ var dot = document.getElementById(dotId);
+ dot.style.backgroundColor = 'red';
+ }
+ function selectOption(option) {
+ // Empty script placeholder for now
+ console.log("Selected option: " + option);
+ }
+
+ </script>
+ </div>
+ <div class="section notifications" id="sectionNotifications">
+ <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>
+ </div>
+ <div class="section map">This is a map</div>
+ </div>
+
+ <script src="script.js"></script>
+</body>
+</html>
diff --git a/ui/script.js b/ui/script.js new file mode 100644 index 0000000..6a5e457 --- /dev/null +++ b/ui/script.js @@ -0,0 +1,15 @@ +// 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 new file mode 100644 index 0000000..6cb4598 --- /dev/null +++ b/ui/style.css @@ -0,0 +1,89 @@ +/* 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 */
|