Aufteilung in 2 Tabs

Zugriff auf ionos-Mongo

views/index.pug

@@ -7,42 +7,58 @@ html(lang="de")
     link(rel="stylesheet", href="/styles.css")
   body
     h1 ESP-ID → Sensornummer
-    div.card
-      form#entryForm
-        label(for="espId") ESP-ID:
-        input#espId(type="text")
+    // Tab Navigation
+    div.tabs
+      button.tab-btn#tabInput.active(type="button" onclick="showTab('input')") Eingabe
+      button.tab-btn#tabList(type="button" onclick="showTab('list')") Liste
 
-        label(for="sensorNumber") Sensornummer:
-        input#sensorNumber(type="text" placeholder="Nur Zahlen erlaubt")
+    // Eingabe-Tab
+    div#tabInputContent.tab-content
+      div.card
+        form#entryForm
+          label(for="sensorNumber") Sensornummer:
+          input#sensorNumber(type="text" placeholder="Nur Zahlen erlaubt")
 
-        label(for="name") Bezeichnung:
-        input#name(type="text")
+          label(for="espId") ESP-ID:
+          input#espId(type="text")
 
-        label(for="description") Beschreibung:
-        textarea#description
+          label(for="name") Bezeichnung:
+          input#name(type="text")
 
-        label(for="address") Anschrift:
-        input#address(type="text" placeholder="Wird automatisch ausgefüllt, kann geändert werden")
+          label(for="description") Beschreibung:
+          textarea#description
 
-        button#saveBtn(type="button") Speichern
-        div#result
+          label(for="address") Anschrift:
+          input#address(type="text" placeholder="Wird automatisch ausgefüllt" readonly)
 
-    div.controls
-      button#refreshBtn Aktualisieren
-      |  Seite:
-      input#page(value="1")
-      |  Limit:
-      input#limit(value="10")
+          button#saveBtn(type="button") Speichern
+          div#result
 
-    table#entriesTable
-      thead
-        tr
-          th ESP-ID
-          th Sensornummer
-          th Bezeichnung
-          th Beschreibung
-          th Anschrift
-          th Datum
-          th Aktionen
-      tbody
-    script(type="module" src="/global.js")
+    // Listen-Tab
+    div#tabListContent.tab-content(style="display:none")
+      div.controls
+        button#refreshBtn Aktualisieren
+        |  Seite:
+        input#page(value="1")
+        |  Limit:
+        input#limit(value="10")
+
+      table#entriesTable
+        thead
+          tr
+            th SensorNr
+            th ESP-ID
+            th Bezeichnung
+            th Beschreibung
+            th Anschrift
+            th Datum
+            th Aktionen
+        tbody
+    script(type="module" src="/global.js")
+    script.
+      function showTab(tab) {
+        document.getElementById('tabInputContent').style.display = tab === 'input' ? '' : 'none';
+        document.getElementById('tabListContent').style.display = tab === 'list' ? '' : 'none';
+        document.getElementById('tabInput').classList.toggle('active', tab === 'input');
+        document.getElementById('tabList').classList.toggle('active', tab === 'list');
+      }