| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223 |
- <!DOCTYPE html>
- <html>
- <head>
- <link rel="icon" href="favicon.ico?v=$COMMIT_HASH" 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 <a href="/fileserver/config/" target="_self">config</a> folder on the SD-card gets zipped and provided as a download.</p>
- <button class="button" id="startBackup" type="button" onclick="startBackup()">Create Config backup</button>
- <p id=progress></p>
- <hr>
- <h2>Restore Configuration</h2>
- <p>Use the <a href="/fileserver/config/" target="_self">File Server</a> to upload individual files.</p>
- </body>
- <script type="text/javascript" src="common.js?v=$COMMIT_HASH"></script>
- <script type="text/javascript" src="jszip.min.js?v=$COMMIT_HASH"></script>
- <script type="text/javascript" src="FileSaver.min.js?v=$COMMIT_HASH"></script>
- <script>
- function startBackup() {
- document.getElementById("progress").innerHTML = "Creating backup...<br>\n";
-
- // Get hostname
- try {
- var xhttp = new XMLHttpRequest();
- xhttp.open("GET", getDomainname() + "/info?type=Hostname", false);
- xhttp.send();
- hostname = xhttp.responseText;
- }
- catch(err) {
- setStatus("<span style=\"color: red\">Failed to fetch hostname: " + err.message + "!</span>");
- return;
- }
-
- // 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
- setStatus("Fetching File List...");
- try {
- var xhttp = new XMLHttpRequest();
- xhttp.open("GET", getDomainname() + "/fileserver/config/", false);
- xhttp.send();
-
- var parser = new DOMParser();
- var content = parser.parseFromString(xhttp.responseText, 'text/html'); }
- catch(err) {
- setStatus("Failed to fetch files list: " + err.message);
- return;
- }
-
- const list = content.querySelectorAll("a");
-
- var urls = [];
-
- for (a of list) {
- url = a.getAttribute("href");
- urls.push(getDomainname() + url);
- }
-
- // Pack as zip and download
- try {
- backup(urls, zipFilename);
- }
- catch(err) {
- setStatus("<span style=\"color: red\">Failed to zip files: " + err.message + "!</span>");
- return;
- }
- }
- function fetchFiles(urls, filesData, index, retry, zipFilename) {
- url = urls[index];
- // console.log(url + " started (" + index + "/" + urls.length + ")");
- if (retry == 0) {
- setStatus(" - " + getFilenameFromUrl(urls[index]) + " (" + (index+1) + "/" + urls.length + ")...");
- }
- else {
- setStatus("<span style=\"color: gray\"> Retrying (" + retry + ")...</span>");
- }
- const xhr = new XMLHttpRequest();
- xhr.open('GET', url, true);
- xhr.responseType = "blob";
- if (retry == 0) { // Short timeout on first retry
- xhr.timeout = 2000; // time in milliseconds
- }
- else if (retry == 1) { // longer timeout
- xhr.timeout = 5000; // time in milliseconds
- }
- else if (retry == 2) { // longer timeout
- xhr.timeout = 10000; // time in milliseconds
- }
- else if (retry == 3) { // longer timeout
- xhr.timeout = 20000; // time in milliseconds
- }
- else { // very long timeout
- xhr.timeout = 30000; // time in milliseconds
- }
- xhr.onload = () => { // Request finished
- //console.log(url + " done");
- filesData[index] = xhr.response;
- if (index == urls.length - 1) {
- setStatus("Fetched all files");
- generateZipFile(urls, filesData, zipFilename);
- return;
- }
- else { // Next file
- fetchFiles(urls, filesData, index+1, 0, zipFilename);
- }
- };
- xhr.onprogress = (e) => { // XMLHttpRequest progress ... extend timeout
- xhr.timeout = xhr.timeout + 500;
- };
- xhr.onerror = (e) => { // XMLHttpRequest error loading
- console.log("Error on fetching " + url + "!");
- if (retry > 5) {
- setStatus("<span style=\"color: red\">Backup failed, please restart the device and try again!</span>");
- }
- else {
- fetchFiles(urls, filesData, index, retry+1, zipFilename);
- }
- };
- xhr.ontimeout = (e) => { // XMLHttpRequest timed out
- console.log("Timeout on fetching " + url + "!");
- if (retry > 5) {
- setStatus("<span style=\"color: red\">Backup failed, please restart the device and try again!</span>");
- }
- else {
- fetchFiles(urls, filesData, index, retry+1, zipFilename);
- }
- };
- xhr.send(null);
- }
- function generateZipFile(urls, filesData, zipFilename) {
- setStatus("Creating Zip File...");
- var zip = new JSZip();
- for (var i = 0; i < urls.length; i++) {
- zip.file(getFilenameFromUrl(urls[i]), filesData[i]);
- }
- zip.generateAsync({type:"blob"})
- .then(function(content) {
- saveAs(content, zipFilename);
- });
- setStatus("Backup completed");
- }
- const backup = (urls, zipFilename) => {
- if(!urls) return;
- /* Testing */
- /*len = urls.length;
- for (i = 0; i < len - 3; i++) {
- urls.pop();
- }*/
- console.log(urls);
- urlIndex = 0;
- setStatus("Fetching files...");
- fetchFiles(urls, [], 0, 0, zipFilename);
- };
- function setStatus(status) {
- console.log(status);
- document.getElementById("progress").innerHTML += status + "<br>\n";
- }
- function getFilenameFromUrl(url) {
- return filename = url.substring(url.lastIndexOf('/')+1);
- }
- </script>
- </html>
|