Funktion: Backup und Wiederherstellung

- Anpassung Serviceworker Cache
- Anpassung Einstellungen
- Funktion Export/Import

app/static/app/js/exportDB.js

@@ -0,0 +1,59 @@
+function getAllDataFromIndexedDB(dbName, storeName) {
+    return new Promise((resolve, reject) => {
+        const request = indexedDB.open(dbName);
+        request.onsuccess = function () {
+            const db = request.result;
+            const transaction = db.transaction(storeName, "readonly");
+            const store = transaction.objectStore(storeName);
+            const data = [];
+            const cursorRequest = store.openCursor();
+
+            cursorRequest.onsuccess = function (event) {
+                const cursor = event.target.result;
+                if (cursor) {
+                    data.push(cursor.value);
+                    cursor.continue();
+                } else {
+                    resolve(data);
+                }
+            };
+
+            cursorRequest.onerror = function (event) {
+                reject(event.target.error);
+            };
+        };
+
+        request.onerror = function (event) {
+            reject(event.target.error);
+        };
+    });
+}
+
+function convertToJSON(data) {
+    return JSON.stringify(data, null, 2); // Formatiertes JSON
+}
+
+function downloadData(filename, content) {
+    const blob = new Blob([content], { type: "application/json" }); // JSON als Beispiel
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+}
+
+async function exportIndexedDBData() {
+    const dbName = "myDB";
+    const storeName = "hours";
+
+    try {
+        const data = await getAllDataFromIndexedDB(dbName, storeName);
+        const jsonData = convertToJSON(data);
+        downloadData("exported_data.json", jsonData);
+    } catch (error) {
+        console.error("Fehler beim Exportieren der Daten:", error);
+    }
+}

app/static/app/js/importDB.js

@@ -0,0 +1,64 @@
+function triggerFileInput() {
+    document.getElementById("fileInput").click();
+}
+
+document.getElementById("fileInput").addEventListener("change", handleFileUpload);
+
+function handleFileUpload(event) {
+    const file = event.target.files[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = function (e) {
+        try {
+            const data = JSON.parse(e.target.result);
+            importDataToIndexedDB(data);
+        } catch (error) {
+            console.error("Fehler beim Lesen der Datei:", error);
+            alert("Ungültiges JSON-Format.");
+        }
+    };
+
+    reader.onerror = function () {
+        console.error("Fehler beim Lesen der Datei.");
+    };
+
+    reader.readAsText(file);
+}
+
+function importDataToIndexedDB(data) {
+    const dbName = "myDB";
+    const storeName = "hours";
+
+    const request = indexedDB.open(dbName);
+
+    request.onsuccess = function () {
+        const db = request.result;
+        const transaction = db.transaction(storeName, "readwrite");
+        const store = transaction.objectStore(storeName);
+
+        if (Array.isArray(data)) {
+            data.forEach(item => {
+                store.put(item);
+            });
+        } else {
+            console.error("Die importierten Daten müssen ein Array sein.");
+            alert("Ungültige Datenstruktur. Erwartet wird ein Array.");
+        }
+
+        transaction.oncomplete = function () {
+            if (alert("Daten erfolgreich importiert! \nBitte Seite aktualisieren...")) {
+                location.reload(); // Seite neu laden
+            }
+        };
+
+        transaction.onerror = function () {
+            console.error("Fehler beim Importieren der Daten:", transaction.error);
+            alert("Fehler beim Importieren der Daten.");
+        };
+    };
+
+    request.onerror = function (event) {
+        console.error("Fehler beim Öffnen der IndexedDB:", event.target.error);
+    };
+}

app/static/app/js/serviceworker.js

@@ -4,14 +4,14 @@ self.addEventListener("install", event => {
     this.skipWaiting();
     
     const urlsToCache = [
-        '/app/login/',
-        '/app/home/',
         '/static/app/css/bootstrap.css',
         '/static/app/css/custom.css',
         '/static/app/js/dbcontrol.js',
         '/static/app/js/home.js',
         '/static/app/js/timer.js',
         '/static/app/js/welcomeControl.js',
+        '/static/app/js/exportDB.js',
+        '/static/app/js/importDB.js',
         '/static/app/js/UpdateInfoControl.js',
         '/static/app/images/refresh.png',
         '/static/app/images/play.png',

app/templates/app/base.html

@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="{% static 'app/css/bootstrap.css' %}">
     <link rel="stylesheet" href="{% static 'app/css/custom.css' %}">
     <script src="{% static 'app/js/dbcontrol.js' %}"></script>
+    <script src="{% static 'app/js/exportDB.js' %}"></script>
 
     {% progressive_web_app_meta %}
     
@@ -31,7 +32,7 @@
 
             <div class="settings text-left">
                 <div class="settings-card container">
-                    <h4 class="pt-3 text-center" style="margin-top: -1rem;">Einstellungen</h4>
+                    <h5 class="pt-3 text-center" style="">Einstellungen</h5>
                     <ul class="list-group" style="color: black;">
                         <li class="list-group-item d-flex justify-content-between align-items-center">
                             Bibelstudien:
@@ -43,10 +44,17 @@
                             <input type="number" class="w-25 btn btn-secondary" name="MonthGoalInput" id="MonthGoalInput" value="50" onfocus="document.getElementById('SETMonthGoalSaveButton').classList.remove('d-none')">
                             <button class="btn d-none" id="SETMonthGoalSaveButton">Sichern</button>
                         </li>
-                        <li class="list-group-item d-flex justify-content-between align-items-center mt-5">
+                        <h5 class="mt-5 text-white text-center">Kontakt</h5>
+                        <li class="list-group-item d-flex justify-content-between align-items-center">
                             WhatsApp Community
                             <a class="btn btn-success" href="https://chat.whatsapp.com/Cy4laGaEdLP1DZbhN04zRQ" target="_blank" rel="noopener noreferrer">Beitreten</a>
                         </li>
+                        <h5 class="mt-5 text-white text-center">Daten Verwaltung</h5>
+                        <li class="list-group-item d-flex justify-content-between align-items-center">
+                            <button class="btn btn-info" onclick="exportIndexedDBData()">Exportieren</button>
+                            <input type="file" id="fileInput" style="display: none;" accept=".json" />
+                            <button class="btn btn-danger" onclick="triggerFileInput()">Wiederherstellen</button>
+                        </li>
                     </ul>
                 </div>
             </div>
@@ -58,5 +66,7 @@
         {% block content %}
         {% endblock %}
     </div>
+
+    <script src="{% static 'app/js/importDB.js' %}"></script>
 </body>
 </html>