Add config type page

lr101 · Sep 1, 2024 · 37dd911 · 37dd911
1 parent 5b7033c
commit 37dd911
Show file tree

Hide file tree

Showing 9 changed files with 252 additions and 5 deletions.
diff --git a/.gitignore b/.gitignore
@@ -40,3 +40,4 @@ build/
 /update.sh
 /.env
 /influx/
+/src/main/ardoino/ESP8622_DS18B20_http/.theia/launch.json
diff --git a/src/main/kotlin/de/lrprojects/tempserver/controller/ViewController.kt b/src/main/kotlin/de/lrprojects/tempserver/controller/ViewController.kt
@@ -47,6 +47,15 @@ class ViewController(
         return "config-sensor-categories"
     }
 
+    @GetMapping(CONFIG_SENSOR_TYPES)
+    fun configSensorTypes(model: Model): String {
+        val types = typeService.getAllTypes()
+        val sensors = sensorService.getAllSensors()
+        model.addAttribute("types", types)
+        model.addAttribute("sensors", sensors)
+        return "config-sensor-types"
+    }
+
     companion object {
         const val BASE = "/"
         const val DISPLAY = "/display"

diff --git a/src/main/resources/static/javascript/config-sensor-types.js b/src/main/resources/static/javascript/config-sensor-types.js
@@ -0,0 +1,94 @@
+/**
+ * logic
+ */
+
+function select(sensor_type, sensor_type_id, sensor_type_unit) {
+    const editElement = document.getElementById("typeName");
+    editElement.value = sensor_type;
+    editElement.setAttribute("data-id", sensor_type_id);
+    const editElement2 = document.getElementById("typeUnit");
+    editElement.setAttribute("data-id", sensor_type_id);
+    editElement2.value = sensor_type_unit;
+}
+
+
+function submitData() {
+    const sensor_type = document.getElementById("typeName").value;
+    const sensor_type_id = document.getElementById("typeName").getAttribute("data-id");
+    const sensor_type_unit = document.getElementById("typeUnit").value;
+    const ajax = new XMLHttpRequest();
+
+    let json;
+    if (sensor_type_id !== "" ) {
+        ajax.open("PUT", "/rest/v1/types/" + sensor_type_id, true);
+        json = {typeName : sensor_type, id :sensor_type_id, description: sensor_type_unit}
+    } else if (sensor_type_id === "") {
+        ajax.open("POST", "/rest/v1/types", true);
+        json = {typeName : sensor_type, description: sensor_type_unit}
+    }
+    if (json !== undefined && sensor_type.length > 0) {
+        ajax.setRequestHeader("Content-Type", "application/json");
+        ajax.send(JSON.stringify(json));
+        ajax.onreadystatechange = function () {
+            if (ajax.readyState === 4) {
+                if (ajax.status === 200 || ajax.status === 201) {
+                    updateTypes();
+
+                } else {
+                    alert(ajax.responseText);
+                }
+            }
+        };
+    }
+}
+
+function updateTypes() {
+    const ajax = new XMLHttpRequest();
+    ajax.open("GET", "/rest/v1/types", true);
+    ajax.send();
+    ajax.onreadystatechange = function() {
+        if (ajax.readyState === 4) {
+            if(ajax.status === 200) {
+                const listElement = document.getElementById("list");
+                listElement.textContent = '';
+                const data = JSON.parse(ajax.responseText);
+                for (let i = 0; i < data.length + 1; i++) {
+                    let btn = document.createElement("button");
+                    btn.classList.add('list-group-item','list-group-item-action');
+                    if (i === data.length) btn.classList.add('active');
+                    btn.id = "list_" + (i === data.length ? "new" : data[i].id);
+                    btn.setAttribute("type", "button");
+                    btn.setAttribute("data-toggle", "list");
+                    btn.setAttribute("onclick", (i === data.length ? "select('','','')" : "select('" + data[i].typeName + "','" + data[i].id + "','" + data[i].description + "')"));
+                    btn.innerHTML = (i === data.length ? "+" : data[i].typeName);
+                    listElement.appendChild(btn);
+                }
+                document.getElementById("typeName").value = "";
+                document.getElementById("typeUnit").value = "";
+                document.getElementById("typeName").setAttribute("data-id", "");
+            } else {
+                alert(ajax.responseText);
+            }
+        }
+    };
+}
+
+document.getElementById("submit").addEventListener("click", function () {
+    submitData();
+});
+
+document.getElementById("delete").addEventListener("click", function () {
+    const sensor_type_id = document.getElementById("typeName").getAttribute("data-id");
+    const ajax = new XMLHttpRequest();
+    ajax.open("DELETE", "/rest/v1/types" + sensor_type_id, true);
+    ajax.send();
+    ajax.onreadystatechange = function () {
+        if (ajax.readyState === 4) {
+            if (ajax.status === 200) {
+                updateTypes();
+            } else {
+                alert(ajax.responseText);
+            }
+        }
+    }
+});
diff --git a/src/main/resources/templates/config-local-sensors.html b/src/main/resources/templates/config-local-sensors.html
@@ -45,6 +45,11 @@
                                 <input  class="menu-content" type="submit"  value="Edit Sensors">
                             </form>
                         </li>
+                        <li>
+                            <form action="/config/sensor-types" method="get">
+                                <input  class="menu-content" type="submit"  value="Edit Sensors">
+                            </form>
+                        </li>
                         <li>
                             <form action="/config/sensor-categories" method="get">
                                 <input class="menu-content" type="submit" value="Edit Categories">
@@ -144,7 +149,7 @@ <h2 id="active">LOADING...</h2>
     </div>
 </main>
     <footer>
-        <h1>https://github.com/lr101/SpringServer</h1>
+        <h1>https://github.com/lr101/TempServer</h1>
     </footer>
     <div class="zeynep-overlay"></div>
 </div>

diff --git a/src/main/resources/templates/config-sensor-categories.html b/src/main/resources/templates/config-sensor-categories.html
@@ -45,6 +45,11 @@
                 <input  class="menu-content" type="submit"  value="Edit Sensors">
               </form>
             </li>
+            <li>
+              <form action="/config/sensor-types" method="get">
+                <input  class="menu-content" type="submit"  value="Edit Types">
+              </form>
+            </li>
             <li>
               <form action="/config/sensor-categories" method="get">
                 <input class="menu-content" type="submit" value="Edit Categories">
@@ -100,7 +105,7 @@ <h1 id="config_name">Sensor Category</h1>
   </div>
 </main>
   <footer>
-    <h1>https://github.com/lr101/SpringServer</h1>
+    <h1>https://github.com/lr101/TempServer</h1>
   </footer>
   <div class="zeynep-overlay"></div>
 </div>

diff --git a/src/main/resources/templates/config-sensor-types.html b/src/main/resources/templates/config-sensor-types.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel='stylesheet' href='../stylesheets/config-sensor-types.css'>
+  <link rel='stylesheet' href='../stylesheets/bootstrap.css'>
+  <link rel='stylesheet' href='../stylesheets/template.css'>
+  <link rel='stylesheet' href="../stylesheets/zynep.css">
+  <title>Configuration</title>
+</head>
+<body>
+<header class="text-center">
+
+  <div class="zeynep first" data-menu-name="first">
+    <ul>
+      <li>
+        <a>Menu</a>
+        <a class="active_Page" href="/">Home</a>
+      </li>
+      <li class="has-submenu">
+        <a href="" data-submenu="display">Display Sensors</a>
+        <div id="display" class="submenu">
+          <div class="submenu-header">
+            <a href="#" data-submenu-close="display">Display Sensors</a>
+          </div>
+          <ul>
+            <li th:each="sensor: ${sensors}">
+              <form action="/display" method="get" >
+                <input hidden name="sensor_id" th:value="${sensor.getId()}">
+                <input class="menu-content" th:id="'dropdown_' + ${sensor.getId()}" type="submit" th:value="${sensor.getSensorNick()}">
+              </form>
+            </li>
+          </ul>
+        </div>
+      </li>
+      <li class="has-submenu">
+        <a href="#" data-submenu="configuration">Configure Sensors</a>
+        <div id="configuration" class="submenu">
+          <div class="submenu-header">
+            <a href="" data-submenu-close="configuration">Configure Sensors</a>
+          </div>
+          <ul>
+            <li>
+              <form action="/config/local-sensors" method="get">
+                <input  class="menu-content" type="submit"  value="Edit Sensors">
+              </form>
+            </li>
+            <li>
+              <form action="/config/sensor-types" method="get">
+                <input  class="menu-content" type="submit"  value="Edit Types">
+              </form>
+            </li>
+            <li>
+              <form action="/config/sensor-categories" method="get">
+                <input class="menu-content" type="submit" value="Edit Categories">
+              </form>
+            </li>
+          </ul>
+        </div>
+      </li>
+    </ul>
+  </div>
+</header>
+<div class="main page-body">
+  <div class="row header">
+    <h1 id="title">Configure Types</h1>
+  </div>
+  <main id="main" th:data-length="${sensors.size()}" class="container-fluid">
+    <div class="row">
+      <nav class="navbar lightgrey">
+        <div class="hamburger-container">
+          <div class="hamburger"></div>
+        </div>
+        <form  method="get" action="/" class="wrapper">
+          <input class="button"  type="submit" value="home">
+        </form>
+      </nav>
+    </div>
+
+  <div class="row" id="sensor_config">
+    <section class="col-lg-2 config" id="config_left">
+      <div class="content p-2">
+        <h2>Selection</h2>
+        <div class="list-group" id="list">
+          <button th:each="type : ${types}" th:id="'list_' + ${type.getId()}" type="button" data-toggle="list" th:attr="onclick=|select('${type.getTypeName()}', '${type.getId()}', '${type.getDescription()}')|" class="list-group-item list-group-item-action" th:text="${type.getTypeName()}"></button>
+          <button id="list_new"  type="button" data-toggle="list" onclick="select('', '','')" class="list-group-item list-group-item-action active">+</button>
+        </div>
+      </div>
+    </section>
+    <section class="col-lg-10 config" id="config_middle">
+      <div class="content">
+        <h1 id="config_name">Sensor Type</h1>
+        <form id="form">
+          <label  class="form-label" for="typeName">Sensor Type:</label>
+          <div class="input-group mb-3">
+            <input data-id="" maxlength="16" minlength="1" autocomplete="off" class="form-control" type="text" id="typeName" name="sensor_type" required>
+          </div>
+          <label  class="form-label" for="typeUnit">Sensor Unit:</label>
+          <div class="input-group mb-3">
+            <input data-id="" maxlength="16" minlength="1" autocomplete="off" class="form-control" type="text" id="typeUnit" name="sensor_type" required>
+          </div>
+          <div class="input-group mb-3">
+            <input data-target="#login_sub" data-toggle="modal"  id="submit" class="button login-trigger"  value="Submit">
+            <input data-target="#login_del" data-toggle="modal" id="delete" class="button login-trigger" value="Delete">
+          </div>
+        </form>
+      </div>
+    </section>
+  </div>
+</main>
+  <footer>
+    <h1>https://github.com/lr101/TempServer</h1>
+  </footer>
+  <div class="zeynep-overlay"></div>
+</div>
+
+
+<script src="../javascript/jquery-3.6.0.min.js"></script>
+<script src="../javascript/bootstrap.bundle.js"></script>
+<script src="../javascript/config-sensor-types.js"></script>
+<script src="../javascript/zynep.js"></script>
+</body>
+</html>
diff --git a/src/main/resources/templates/display.html b/src/main/resources/templates/display.html
@@ -44,6 +44,11 @@
                 <input  class="menu-content" type="submit"  value="Edit Sensors">
               </form>
             </li>
+            <li>
+              <form action="/config/sensor-types" method="get">
+                <input  class="menu-content" type="submit"  value="Edit Types">
+              </form>
+            </li>
             <li>
               <form action="/config/sensor-categories" method="get">
                 <input class="menu-content" type="submit" value="Edit Categories">
@@ -108,7 +113,7 @@ <h1 class="displayRow" th:text="'Sensor Type: ' + ${thisSensor.getType() != null
     </div>
   </main>
   <footer>
-    <h1>https://github.com/lr101/SpringServer</h1>
+    <h1>https://github.com/lr101/TempServer</h1>
   </footer>
   <div class="zeynep-overlay"></div>
 </div>

diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
@@ -44,6 +44,11 @@
                 <input  class="menu-content" type="submit"  value="Edit Sensors">
               </form>
             </li>
+            <li>
+              <form action="/config/sensor-types" method="get">
+                <input  class="menu-content" type="submit"  value="Edit Types">
+              </form>
+            </li>
             <li>
               <form action="/config/sensor-categories" method="get">
                 <input class="menu-content" type="submit" value="Edit Categories">
@@ -100,7 +105,7 @@ <h1 id="title">Data Display</h1>
     </div>
   </main>
   <footer>
-    <h1>https://github.com/lr101/SpringServer</h1>
+    <h1>https://github.com/lr101/TempServer</h1>
   </footer>
   <div class="zeynep-overlay"></div>
 </div>

diff --git a/src/test/kotlin/de/lrprojects/tempserver/SpringServerApplicationTests.kt b/src/test/kotlin/de/lrprojects/tempserver/SpringServerApplicationTests.kt
@@ -4,7 +4,7 @@ import org.junit.jupiter.api.Test
 import org.springframework.boot.test.context.SpringBootTest
 
 @SpringBootTest
-class SpringServerApplicationTests {
+class TempServerApplicationTests {
     @Test
     fun contextLoads() {
     }