feat: Datenbank-Reiter ergänzt mit neuen Löschfunktionen

- Neuen Tab „Datenbank“ in Einstellungen-Seite eingebaut
- Separate Buttons für:
  - vollständiges Löschen der Datenbank
  - Konfiguration löschen (DBC1)
  - Meldungen löschen (DBC2)
  - Logger-Messwerte löschen (DBC3)
- Logik über eigene Handler-Funktionen umgesetzt
- „Datenbank leeren“-Button aus GeneralSettings entfernt

components/main/settingsPageComponents/DatabaseSettings.tsx

@@ -1,28 +1,49 @@
 // /components/main/settingsPageComponents/DatabaseSettings.tsx
 "use client";
 import React from "react";
-import handleClearDatabase from "./handlers/handleClearDatabase";
+import handleClearDatabase from "./handlers/dbHandlers/handleClearDatabase";
+import handleClearConfig from "./handlers/dbHandlers/handleClearConfig";
+import handleClearMessages from "./handlers/dbHandlers/handleClearMessages";
+import handleClearLogger from "./handlers/dbHandlers/handleClearLogger";
 
 const DatabaseSettings: React.FC = () => {
   return (
     <div className="p-6 md:p-3 bg-gray-100 max-w-5xl mr-auto">
-      <h2 className="text-sm md:text-md font-bold mb-2">
+      <h2 className="text-sm md:text-md font-bold mb-4">
         Datenbank Einstellungen
       </h2>
 
-      <div className="mb-3">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-        <p className="text-xs text-gray-700 mb-2">
-          Datenbankfunktionen wie Löschen, Export oder Reset. Weitere Funktionen
-          folgen.
-        </p>
-
-        {/* ✅ Button: Datenbank leeren */}
         <button
           type="button"
           onClick={handleClearDatabase}
-          className="bg-red-500 text-white px-3 py-1 rounded text-xs"
+          className="bg-littwin-blue text-white px-3 py-1 rounded text-xs"
         >
-          Datenbank leeren
+          Datenbank vollständig leeren
+        </button>
+
+        <button
+          type="button"
+          onClick={handleClearConfig}
+          className="bg-littwin-blue text-white px-3 py-1 rounded text-xs"
+        >
+          Konfiguration löschen
+        </button>
+
+        <button
+          type="button"
+          onClick={handleClearMessages}
+          className="bg-littwin-blue text-white px-3 py-1 rounded text-xs"
+        >
+          Meldungen löschen
+        </button>
+
+        <button
+          type="button"
+          onClick={handleClearLogger}
+          className="bg-littwin-blue text-white px-3 py-1 rounded text-xs"
+        >
+          Messwerte Logger löschen
         </button>
       </div>
     </div>

components/main/settingsPageComponents/GeneralSettings.tsx

@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from "react";
 import { RootState } from "../../../redux/store";
 import { useSelector } from "react-redux";
-import handleClearDatabase from "./handlers/handleClearDatabase";
+import handleClearDatabase from "./handlers/dbHandlers/handleClearDatabase";
 import handleReboot from "./handlers/handleReboot";
 import handleSetDateTime from "./handlers/handleSetDateTime";
 import handleSubmit from "./handlers/handleSubmit";
@@ -216,27 +216,29 @@ const GeneralSettings: React.FC = () => {
             </button>
           ) : (
             <>
-              <input
+              <div className="flex flex-row gap-3">
-                type="text"
+                <input
-                placeholder="Benutzername"
+                  type="text"
-                className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
+                  placeholder="Benutzername"
-                value={username}
+                  className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
-                onChange={(e) => setUsername(e.target.value)}
+                  value={username}
-              />
+                  onChange={(e) => setUsername(e.target.value)}
-              <input
+                />
-                type="password"
+                <input
-                placeholder="Passwort"
+                  type="password"
-                className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
+                  placeholder="Passwort"
-                value={password}
+                  className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
-                onChange={(e) => setPassword(e.target.value)}
+                  value={password}
-              />
+                  onChange={(e) => setPassword(e.target.value)}
-              <button
+                />
-                type="button"
+                <button
-                className="bg-littwin-blue text-white px-2 py-1 rounded text-xs"
+                  type="button"
-                onClick={handleLogin}
+                  className="flex flex-row bg-littwin-blue text-white px-1  rounded text-xs whitespace-nowrap justify-center items-center "
-              >
+                  onClick={handleLogin}
-                Admin anmelden
+                >
-              </button>
+                  Admin anmelden
+                </button>
+              </div>
             </>
           )}
         </div>

components/main/settingsPageComponents/handlers/dbHandlers/handleClearConfig.ts

@@ -0,0 +1,34 @@
+// components/main/settingsPageComponents/handlers/dbHandlers/handleClearConfig.ts
+const handleClearConfig = async () => {
+  const confirmClear = window.confirm(
+    "Sind Sie sicher, dass Sie die Datenbank Konfiguration löschen möchten?"
+  );
+  if (!confirmClear) return;
+
+  // Get the current path and ensure it ends with ".html"
+  let currentPath = window.location.pathname;
+  if (!currentPath.endsWith(".html")) {
+    currentPath += ".html";
+  }
+
+  // Full URL with host, current path, and clear database command
+  const url = `${window.location.origin}/CPL?${currentPath}&DBC1=1`;
+
+  // Log the full URL to the console for debugging
+  console.log(url);
+
+  // Send the clear database command to the server using fetch and GET method
+  try {
+    const response = await fetch(url, { method: "GET" });
+    if (response.ok) {
+      alert("Datenbank Konfiguration erfolgreich gelöscht!");
+    } else {
+      alert("Fehler beim Löschen der Datenbank Konfiguration!");
+    }
+  } catch (error) {
+    console.error("Fehler:", error);
+    alert("Fehler beim Löschen der Datenbank Konfiguration!");
+  }
+};
+
+export default handleClearConfig;

components/main/settingsPageComponents/handlers/dbHandlers/handleClearDatabase.ts

@@ -1,4 +1,4 @@
-// components/main/settingsPageComponents/handlers/handleClearDatabase.ts
+// components/main/settingsPageComponents/handlers/dbHandlers/handleClearDatabase.ts
 const handleClearDatabase = async () => {
   const confirmClear = window.confirm(
     "Sind Sie sicher, dass Sie die Datenbank leeren möchten?"

components/main/settingsPageComponents/handlers/dbHandlers/handleClearLogger.ts

@@ -0,0 +1,34 @@
+// components/main/settingsPageComponents/handlers/dbHandlers/handleClearLogger.ts
+const handleClearLogger = async () => {
+  const confirmClear = window.confirm(
+    "Sind Sie sicher, dass Sie die Datenbank Messwerte Logger löschen möchten?"
+  );
+  if (!confirmClear) return;
+
+  // Get the current path and ensure it ends with ".html"
+  let currentPath = window.location.pathname;
+  if (!currentPath.endsWith(".html")) {
+    currentPath += ".html";
+  }
+
+  // Full URL with host, current path, and clear database command
+  const url = `${window.location.origin}/CPL?${currentPath}&DBC3=1`;
+
+  // Log the full URL to the console for debugging
+  console.log(url);
+
+  // Send the clear database command to the server using fetch and GET method
+  try {
+    const response = await fetch(url, { method: "GET" });
+    if (response.ok) {
+      alert("Datenbank Messwerte Logger erfolgreich gelöscht!");
+    } else {
+      alert("Fehler beim Löschen der Datenbank Messwerte Logger!");
+    }
+  } catch (error) {
+    console.error("Fehler:", error);
+    alert("Fehler beim Löschen der Datenbank Messwerte Logger!");
+  }
+};
+
+export default handleClearLogger;

components/main/settingsPageComponents/handlers/dbHandlers/handleClearMessages.ts

@@ -0,0 +1,34 @@
+// components/main/settingsPageComponents/handlers/dbHandlers/handleClearMessages.ts
+const handleClearMessages = async () => {
+  const confirmClear = window.confirm(
+    "Sind Sie sicher, dass Sie die Datenbank Meldungen löschen möchten?"
+  );
+  if (!confirmClear) return;
+
+  // Get the current path and ensure it ends with ".html"
+  let currentPath = window.location.pathname;
+  if (!currentPath.endsWith(".html")) {
+    currentPath += ".html";
+  }
+
+  // Full URL with host, current path, and clear database command
+  const url = `${window.location.origin}/CPL?${currentPath}&DBC2=1`;
+
+  // Log the full URL to the console for debugging
+  console.log(url);
+
+  // Send the clear database command to the server using fetch and GET method
+  try {
+    const response = await fetch(url, { method: "GET" });
+    if (response.ok) {
+      alert("Datenbank Meldungen erfolgreich gelöscht!");
+    } else {
+      alert("Fehler beim Löschen der Datenbankmeldungen !");
+    }
+  } catch (error) {
+    console.error("Fehler:", error);
+    alert("Fehler beim Löschen der Datenbankmeldungen!");
+  }
+};
+
+export default handleClearMessages;

config/webVersion.ts

@@ -6,5 +6,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.275";
+const webVersion = "1.6.276";
 export default webVersion;