| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127 |
- <!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>
|