Aufteilung in 2 Tabs

Zugriff auf ionos-Mongo

public/global.js

@@ -13,6 +13,36 @@ document.addEventListener('DOMContentLoaded', () => {
 
   let editId = null;
 
+  // Modal für Fehleranzeige
+  function showModal(message, callback) {
+    // Vorherige Modals entfernen
+    document.querySelectorAll('.custom-modal-popup').forEach(m => m.remove());
+
+    let modal = document.createElement('div');
+    modal.className = 'custom-modal-popup';
+
+    let box = document.createElement('div');
+    box.className = 'custom-modal-box';
+
+    let msg = document.createElement('div');
+    msg.className = 'custom-modal-msg';
+    msg.textContent = message;
+    box.appendChild(msg);
+
+    let btn = document.createElement('button');
+    btn.className = 'custom-modal-btn';
+    btn.textContent = 'OK';
+    btn.onclick = () => {
+      if (modal.parentNode) {
+        modal.parentNode.removeChild(modal);
+      }
+      if (callback) callback();
+    };
+    box.appendChild(btn);
+    modal.appendChild(box);
+    document.body.appendChild(modal);
+  }
+
 // Sensornummer nur Zahlen erlauben
 sensorNumberInput.addEventListener('input', () => {
   sensorNumberInput.value = sensorNumberInput.value.replace(/\D/g, '');
@@ -29,9 +59,20 @@ async function fetchAddressIfValid() {
         addressInput.value = data.address;
       } else {
         addressInput.value = '';
+        sensorNumberInput.disabled = true;
+        showModal('Sensor unbekannt', () => {
+          sensorNumberInput.disabled = false;
+          sensorNumberInput.focus();
+        });
       }
     } catch (err) {
       console.error('Fehler beim Abrufen der Adresse:', err);
+      addressInput.value = '';
+      sensorNumberInput.disabled = true;
+      showModal('Sensor unbekannt', () => {
+        sensorNumberInput.disabled = false;
+        sensorNumberInput.focus();
+      });
     }
   }
 }

public/styles.css

@@ -1,3 +1,65 @@
+/* Tab Navigation */
+.tabs {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+.tab-btn {
+  background: #eee;
+  border: none;
+  padding: 0.7rem 2rem;
+  font-size: 1.1rem;
+  border-radius: 6px 6px 0 0;
+  cursor: pointer;
+  color: #333;
+  font-weight: 500;
+  transition: background 0.2s, color 0.2s;
+}
+.tab-btn.active {
+  background: #007bff;
+  color: #fff;
+  font-weight: bold;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
+}
+/* Modal Fehlerfenster */
+.custom-modal-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0,0,0,0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.custom-modal-box {
+  background: #fff;
+  padding: 3rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
+  text-align: center;
+  min-width: 350px;
+  max-width: 90vw;
+}
+
+.custom-modal-msg {
+  margin-bottom: 2rem;
+  font-size: 1.5rem;
+  color: red;
+}
+
+.custom-modal-btn {
+  padding: 0.8rem 2.5rem;
+  font-size: 1.1rem;
+  background: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
 body {
   font-family: system-ui, sans-serif;
   padding: 20px;
@@ -89,6 +151,10 @@ button:hover {
   background: #0056b3;
 }
 
+#saveBtn {
+  margin-top: 20px;
+}
+
 p.error {
   color: red;
   font-weight: bold;