added backup page

2025-12-10 05:26:52 +03:00 · 2022-08-30 00:29:50 +02:00
parent bf9050757b
commit 6417f780e6
5 changed files with 145 additions and 0 deletions
--- a/sd-card/html/backup.html
+++ b/sd-card/html/backup.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="icon" href="favicon.ico" type="image/x-icon">
+<title>Backup/Restore Configuration</title>
+<meta charset="utf-8">
+
+<style>
+h1 {font-size: 2em;}
+h2 {font-size: 1.5em;}
+h3 {font-size: 1.2em;} 
+p {font-size: 1em;}
+
+input[type=number] {
+	width: 138px;
+	padding: 10px 5px;
+	display: inline-block;
+	border: 1px solid #ccc;
+	font-size: 16px; 
+}
+
+.button {
+	padding: 10px 20px;
+    width: 211px;
+	font-size: 16px;
+}
+</style>
+
+</head>
+
+<body style="font-family: arial; padding: 0px 10px;">
+<h2>Backup Configuration</h2>
+<p>With the following action the config folder on the SD-card gets zipped and provided as a download.</p>
+
+<table border="0">
+    </tr>
+        <td>
+            <button class="button" id="doBackup" type="button" onclick="doBackup()">Create Config backup</button>
+        </td>
+        <td>
+            <p id=progress></p>
+        </td>
+    </tr>
+</table>
+<hr>
+<h2>Restore Configuration</h2>
+<p>Not implemented yet.<br>
+But you can use the <a href="/fileserver/config" target="_self">File Server</a> to upload individual files.</p>
+</body>
+
+
+<script src="jszip.min.js"></script>
+<script src="FileSaver.min.js"></script>
+<script>
+
+function doBackup() {  
+
+    document.getElementById("progress").innerHTML = "Creating backup...";
+    
+    // Get hostname
+    var xhttp = new XMLHttpRequest();
+    xhttp.open("GET", "/version?type=Hostname", false);
+    xhttp.send();
+    
+    hostname = xhttp.responseText;
+    
+    // get date/time
+    var dateTime = new Date().toJSON().slice(0,10) + "_" + new Date().toJSON().slice(11,19).replaceAll(":", "-");
+    
+    zipFilename = hostname + "_" + dateTime + ".zip";
+    console.log(zipFilename);
+
+    // Get files list
+    var xhttp = new XMLHttpRequest();
+    xhttp.open("GET", "/fileserver/config/", false);
+    xhttp.send();
+    
+    var parser = new DOMParser();
+    var content = parser.parseFromString(xhttp.responseText, 'text/html');
+    
+    const list = content.querySelectorAll("a");
+    
+    var urls = [];
+    
+    for (a of list) {
+        url = a.getAttribute("href");
+        urls.push(url);
+    }
+    
+    // Pack as zip and download
+    saveZip(zipFilename, urls);
+}
+
+
+const saveZip = (filename, urls) => {
+    if(!urls) return;
+
+    const zip = new JSZip();
+    const folder = zip.folder("");
+    
+    var i = 0;
+    urls.forEach((url) => {        
+        const blobPromise = fetch(url).then((r) => {
+            if (r.status === 200) return r.blob();
+            return Promise.reject(new Error(r.statusText));
+        });
+        const name = url.substring(url.lastIndexOf("/") + 1);
+        folder.file(name, blobPromise);
+    });
+
+    zip.generateAsync({ type: "blob" },
+        function updateCallback(metadata) {
+            var msg = "Progress: " + metadata.percent.toFixed(0) + "%";
+            if(metadata.currentFile) {
+                msg += ", " + metadata.currentFile;
+            }
+
+            console.log(msg);
+            document.getElementById("progress").innerHTML = msg;
+        }
+    ).then((blob) => saveAs(blob, filename));
+};
+
+</script>
+
+
+</html>