Update index.js

Neue Import- und Export-Funktion, Bereinigung Code

index.js

@@ -16,6 +16,47 @@ document.addEventListener('DOMContentLoaded', function () {
     let sleepTimerTimeout = null;
     let sleepTimerEndTime = null;
 
+    // Benutzerdefiniertes Modal für Alerts und Bestätigungen
+    function showAlert(title, message) {
+        const modal = document.getElementById("custom-modal");
+        const titleElement = document.getElementById("custom-modal-title");
+        const messageElement = document.getElementById("custom-modal-message");
+        const cancelButton = document.getElementById("custom-modal-cancel");
+
+        titleElement.textContent = title;
+        messageElement.textContent = message;
+        cancelButton.classList.add("hidden");
+
+        modal.classList.remove("hidden");
+
+        document.getElementById("custom-modal-ok").onclick = function() {
+            modal.classList.add("hidden");
+        };
+    }
+
+    function showConfirm(title, message, callback) {
+        const modal = document.getElementById("custom-modal");
+        const titleElement = document.getElementById("custom-modal-title");
+        const messageElement = document.getElementById("custom-modal-message");
+        const cancelButton = document.getElementById("custom-modal-cancel");
+
+        titleElement.textContent = title;
+        messageElement.textContent = message;
+        cancelButton.classList.remove("hidden");
+
+        modal.classList.remove("hidden");
+
+        document.getElementById("custom-modal-ok").onclick = function() {
+            modal.classList.add("hidden");
+            callback(true);
+        };
+
+        cancelButton.onclick = function() {
+            modal.classList.add("hidden");
+            callback(false);
+        };
+    }
+
     initializeFooter();
     loadPresets();
     initializeEventListeners();
@@ -44,7 +85,7 @@ document.addEventListener('DOMContentLoaded', function () {
                 presets = await response.json();
                 localStorage.setItem('presets', JSON.stringify(presets));
             } catch (error) {
-                alert('Fehler beim Laden der Presets: ' + error.message);
+                showAlert("Fehler", 'Fehler beim Laden der Presets: ' + error.message);
             }
         }
         displayPresets(presets);
@@ -136,7 +177,7 @@ document.addEventListener('DOMContentLoaded', function () {
             const remainingTime = Math.max(0, Math.ceil((sleepTimerEndTime - Date.now()) / 60000));
             openSleepTimerModalButton.innerHTML = `<i class="fas fa-hourglass-half"></i> ${remainingTime} Minuten`;
             if (remainingTime > 0) {
-                setTimeout(updateSleepTimerButton, 60000); // Update every minute
+                setTimeout(updateSleepTimerButton, 60000);
             } else {
                 openSleepTimerModalButton.textContent = 'Sleep Timer';
                 sleepTimerEndTime = null;
@@ -184,6 +225,7 @@ document.addEventListener('DOMContentLoaded', function () {
         presetModal.classList.remove('hidden');
         presetModal.style.display = 'block';
         renderPresets();
+        generateExportCode();
     }
 
     window.closeModal = function() {
@@ -194,19 +236,27 @@ document.addEventListener('DOMContentLoaded', function () {
     window.addPreset = function() {
         presets.push({ name: 'Neuer Sender', url: '' });
         renderPresets();
+        generateExportCode();
     }
 
     window.changeName = function(index, newName) {
         presets[index].name = newName;
+        generateExportCode();
     }
 
     window.changeURL = function(index, newURL) {
         presets[index].url = newURL;
+        generateExportCode();
     }
 
     window.deletePreset = function(index) {
-        presets.splice(index, 1);
+        showConfirm("Löschen", "Möchtest du diesen Sender wirklich löschen?", function(confirmed) {
-        renderPresets();
+            if (confirmed) {
+                presets.splice(index, 1);
+                renderPresets();
+                generateExportCode();
+            }
+        });
     }
 
     window.saveAndClose = function() {
@@ -226,10 +276,47 @@ document.addEventListener('DOMContentLoaded', function () {
             onEnd: function (evt) {
                 const newOrder = Array.from(tableBody.children).map(row => parseInt(row.getAttribute('data-index')));
                 presets = newOrder.map(index => presets[index]);
+                generateExportCode();
             }
         });
     }
 
+    // --- NEUE EXPORT/IMPORT-FUNKTIONEN ---
+    window.generateExportCode = function() {
+        try {
+            const jsonString = JSON.stringify(presets);
+            const base64String = btoa(unescape(encodeURIComponent(jsonString)));
+            const exportField = document.getElementById('export-string-field');
+            if (exportField) exportField.value = base64String;
+        } catch (e) {
+            console.error("Export-Fehler:", e);
+            showAlert("Fehler", "Export-Fehler: " + e.message);
+        }
+    }
+
+    // Export nach Base64-Code
+    window.copyExportCode = function() {
+        const field = document.getElementById('export-string-field');
+        field.select();
+        field.setSelectionRange(0, 99999);
+
+        try {
+            if (navigator.clipboard) {
+                navigator.clipboard.writeText(field.value)
+                    .catch(err => {
+                        console.error("Kopieren mit Clipboard-API fehlgeschlagen:", err);
+                        document.execCommand('copy');
+                    });
+            } else {
+                document.execCommand('copy');
+            }
+        } catch (err) {
+            console.error("Kopieren fehlgeschlagen:", err);
+            showAlert("Fehler", "Kopieren fehlgeschlagen. Bitte manuell kopieren: " + field.value);
+        }
+    };
+    
+    // Export nach JSON-Datei
     window.exportPreset = function() {
         const presetsJSON = JSON.stringify(presets, null, 2);
         const blob = new Blob([presetsJSON], { type: 'application/json' });
@@ -241,31 +328,56 @@ document.addEventListener('DOMContentLoaded', function () {
         a.click();
         document.body.removeChild(a);
         URL.revokeObjectURL(url);
-    }
+    };
 
-    window.importPreset = function() {
+    // Import aus Base64-Code mit Warnung
-        const input = document.createElement('input');
+    window.importFromString = function() {
-        input.type = 'file';
+        const field = document.getElementById('import-string-field');
-        input.accept = 'application/json';
+        const code = field.value.trim();
-        input.onchange = function(event) {
+        if (!code) return showAlert("Fehler", "Bitte Code einfügen.");
-            const file = event.target.files[0];
+
-            if (file) {
+        showConfirm("Vorsicht", "Es werden alle bestehenden Sender überschrieben. Möchtest du fortfahren?", function(confirmed) {
-                const reader = new FileReader();
+            if (!confirmed) return;
-                reader.onload = function(e) {
+
-                    try {
+            try {
-                        const importedPresets = JSON.parse(e.target.result);
+                const data = JSON.parse(decodeURIComponent(escape(atob(code))));
-                        presets = importedPresets;
+                if (Array.isArray(data)) {
-                        localStorage.setItem('presets', JSON.stringify(presets));
+                    presets = data;
-                        renderPresets();
+                    savePresets();
-                        displayPresets(presets);
+                    location.reload();
-                        location.reload();
+                }
-                    } catch (error) {
+            } catch (e) {
-                        alert('Fehler beim Importieren der Presets: Ungültige Datei.');
+                showAlert("Fehler", "Code ungültig!");
-                    }
-                };
-                reader.readAsText(file);
             }
-        };
+        });
-        input.click();
+    };
-    }
+
+    // Import aus JSON-Datei mit Warnung
+    window.importPreset = function() {
+        showConfirm("Vorsicht", "Es werden alle bestehenden Sender überschrieben. Möchtest du fortfahren?", function(confirmed) {
+            if (!confirmed) return;
+
+            const input = document.createElement('input');
+            input.type = 'file';
+            input.accept = 'application/json';
+            input.onchange = function(event) {
+                const file = event.target.files[0];
+                if (file) {
+                    const reader = new FileReader();
+                    reader.onload = function(e) {
+                        try {
+                            const importedPresets = JSON.parse(e.target.result);
+                            presets = importedPresets;
+                            savePresets();
+                            location.reload();
+                        } catch (error) {
+                            showAlert("Fehler", 'Fehler beim Importieren der Presets: Ungültige Datei.');
+                        }
+                    };
+                    reader.readAsText(file);
+                }
+            };
+            input.click();
+        });
+    };
 });