🔨 Add settings for partial backup #33

nextcloud_backup/rootfs/opt/nextcloud_backup/routes/api.js

@@ -12,6 +12,7 @@ const humanFileSize = require("../tools/toolbox").humanFileSize;
 const cronTools = require("../tools/cronTools");
 
 const logger = require("../config/winston");
+const { add } = require("../config/winston");
 
 router.get("/status", (req, res, next) => {
     cronTools.updatetNextDate();
@@ -36,11 +37,11 @@ router.get("/formated-local-snap", function (req, res, next) {
             res.status(500);
             res.send("");
         }
-    );
+        );
-});
+    });
-
+    
-router.get("/formated-backup-manual", function (req, res, next) {
+    router.get("/formated-backup-manual", function (req, res, next) {
-    webdav
+        webdav
         .getFolderContent(webdav.getConf().back_dir + pathTools.manual)
         .then((contents) => {
             contents.sort((a, b) => {
@@ -52,11 +53,11 @@ router.get("/formated-backup-manual", function (req, res, next) {
         .catch(() => {
             res.send();
         });
-});
+    });
-
+    
-router.get("/formated-backup-auto", function (req, res, next) {
+    router.get("/formated-backup-auto", function (req, res, next) {
-    let url = webdav.getConf().back_dir + pathTools.auto;
+        let url = webdav.getConf().back_dir + pathTools.auto;
-    webdav
+        webdav
         .getFolderContent(url)
         .then((contents) => {
             contents.sort((a, b) => {
@@ -68,13 +69,13 @@ router.get("/formated-backup-auto", function (req, res, next) {
         .catch(() => {
             res.send();
         });
-});
+    });
-
+    
-router.post("/nextcloud-settings", function (req, res, next) {
+    router.post("/nextcloud-settings", function (req, res, next) {
-    let settings = req.body;
+        let settings = req.body;
-    if (settings.ssl != null && settings.host != null && settings.host != "" && settings.username != null && settings.password != null) {
+        if (settings.ssl != null && settings.host != null && settings.host != "" && settings.username != null && settings.password != null) {
-        webdav.setConf(settings);
+            webdav.setConf(settings);
-        webdav
+            webdav
             .confIsValid()
             .then(() => {
                 res.status(201);
@@ -84,33 +85,33 @@ router.post("/nextcloud-settings", function (req, res, next) {
                 res.status(406);
                 res.json({ message: err });
             });
-    } else {
+        } else {
-        res.status(400);
+            res.status(400);
-        res.send();
+            res.send();
-    }
+        }
-});
+    });
-
+    
-router.get("/nextcloud-settings", function (req, res, next) {
+    router.get("/nextcloud-settings", function (req, res, next) {
-    let conf = webdav.getConf();
+        let conf = webdav.getConf();
-    if (conf == null) {
+        if (conf == null) {
-        res.status(404);
+            res.status(404);
-        res.send();
+            res.send();
-    } else {
+        } else {
-        res.json(conf);
+            res.json(conf);
-    }
+        }
-});
+    });
-
+    
-router.post("/manual-backup", function (req, res, next) {
+    router.post("/manual-backup", function (req, res, next) {
-    let id = req.query.id;
+        let id = req.query.id;
-    let name = req.query.name;
+        let name = req.query.name;
-    let status = statusTools.getStatus();
+        let status = statusTools.getStatus();
-    if (status.status == "creating" && status.status == "upload" && status.status == "download") {
+        if (status.status == "creating" && status.status == "upload" && status.status == "download") {
-        res.status(503);
+            res.status(503);
-        res.send();
+            res.send();
-        return;
+            return;
-    }
+        }
-
+        
-    hassioApiTools
+        hassioApiTools
         .downloadSnapshot(id)
         .then(() => {
             webdav.uploadFile(id, webdav.getConf().back_dir + pathTools.manual + name + ".tar");
@@ -121,54 +122,61 @@ router.post("/manual-backup", function (req, res, next) {
             res.status(500);
             res.send();
         });
-});
+    });
-
+    
-router.post("/new-backup", function (req, res, next) {
+    router.post("/new-backup", function (req, res, next) {
-    let status = statusTools.getStatus();
+        let status = statusTools.getStatus();
-    if (status.status === "creating" && status.status === "upload" && status.status === "download") {
+        if (status.status === "creating" && status.status === "upload" && status.status === "download") {
-        res.status(503);
+            res.status(503);
-        res.send();
+            res.send();
-        return;
+            return;
-    }
+        }
-    hassioApiTools
+        hassioApiTools
         .getVersion()
         .then((version) => {
             let name = settingsTools.getFormatedName(true, version);
             hassioApiTools
-                .createNewBackup(name)
+            .createNewBackup(name)
-                .then((id) => {
+            .then((id) => {
-                    hassioApiTools
+                hassioApiTools
-                        .downloadSnapshot(id)
+                .downloadSnapshot(id)
-                        .then(() => {
+                .then(() => {
-                            webdav.uploadFile(id, webdav.getConf().back_dir + pathTools.manual + name + ".tar");
+                    webdav.uploadFile(id, webdav.getConf().back_dir + pathTools.manual + name + ".tar");
-                        })
-                        .catch(() => {});
                 })
                 .catch(() => {});
+            })
+            .catch(() => {});
         })
         .catch(() => {});
-
+        
-    res.status(201);
+        res.status(201);
-    res.send();
-});
-
-router.get("/backup-settings", function (req, res, next) {
-    res.send(settingsTools.getSettings());
-});
-
-router.post("/backup-settings", function (req, res, next) {
-    if (settingsTools.check(req.body)) {
-        settingsTools.setSettings(req.body);
-        cronTools.startCron();
         res.send();
-    } else {
+    });
-        res.status(400);
+    
-        res.send();
+    router.get("/backup-settings", function (req, res, next) {
-    }
+        hassioApiTools.getAddonList().then((addonList)=>{
-});
+            let data = {};
-
+            data['folders'] = hassioApiTools.getFolderList();
-router.post("/clean-now", function (req, res, next) {
+            data['addonList'] = addonList;
-    webdav
+            data['settings'] = settingsTools.getSettings();
+            res.send(data);
+        })
+        
+    });
+    
+    router.post("/backup-settings", function (req, res, next) {
+        if (settingsTools.check(req.body)) {
+            settingsTools.setSettings(req.body);
+            cronTools.startCron();
+            res.send();
+        } else {
+            res.status(400);
+            res.send();
+        }
+    });
+    
+    router.post("/clean-now", function (req, res, next) {
+        webdav
         .clean()
         .then(() => {
             hassioApiTools.clean().catch();
@@ -176,21 +184,22 @@ router.post("/clean-now", function (req, res, next) {
         .catch(() => {
             hassioApiTools.clean().catch();
         });
-    res.status(201);
+        res.status(201);
-    res.send();
-});
-
-router.post("/restore", function (req, res, next) {
-    if (req.body["path"] != null) {
-        webdav.downloadFile(req.body["path"]).then((path) => {
-            hassioApiTools.uploadSnapshot(path);
-        });
-        res.status(200);
         res.send();
-    } else {
+    });
-        res.status(400);
+    
-        res.send();
+    router.post("/restore", function (req, res, next) {
-    }
+        if (req.body["path"] != null) {
-});
+            webdav.downloadFile(req.body["path"]).then((path) => {
-
+                hassioApiTools.uploadSnapshot(path);
-module.exports = router;
+            });
+            res.status(200);
+            res.send();
+        } else {
+            res.status(400);
+            res.send();
+        }
+    });
+    
+    module.exports = router;
+    

nextcloud_backup/rootfs/opt/nextcloud_backup/tools/hassioApiTools.js

@@ -46,6 +46,75 @@ function getVersion() {
     });
 }
 
+function getAddonList() {
+    return new Promise((resolve, reject) => {
+        let token = process.env.HASSIO_TOKEN;
+        let status = statusTools.getStatus();
+        let option = {
+            headers: { "X-HASSIO-KEY": token },
+            responseType: "json",
+        };
+        
+        got("http://hassio/addons", option)
+        .then((result) => {
+            if (status.error_code === 1) {
+                status.status = "idle";
+                status.message = null;
+                status.error_code = null;
+                statusTools.setStatus(status);
+            }
+            let addons = result.body.data.addons;
+            let instaled = [];
+            for(let index in addons){
+                let current = addons[index];
+                if(current.installed == true){
+                    instaled.push({slug:current.slug, name: current.name})
+                }                
+            }
+            instaled.sort((a,b)=>{
+                var textA = a.name.toUpperCase();
+                var textB = b.name.toUpperCase();
+                return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
+            });
+            resolve(instaled);
+        })
+        .catch((error) => {
+            status.status = "error";
+            status.message = "Fail to fetch addons list (" + error.message + ")";
+            status.error_code = 1;
+            statusTools.setStatus(status);
+            logger.error(status.message);
+            reject(error.message);
+        });
+    });
+}
+
+function getFolderList(){
+    return [
+        {
+            name: "Homme Assistant configuration",
+            slug: "homeassistant"
+            
+        },
+        {
+            name: "SSL",
+            slug: "ssl"
+        },
+        {
+            name: "Share",
+            slug: "share"
+        },
+        {
+            name: "Media",
+            slug: "media"
+        },
+        {
+            name: "Local add-ons",
+            slug: "addons/local"
+        }   
+    ]
+}
+
 
 function getSnapshots() {
     return new Promise((resolve, reject) => {
@@ -302,6 +371,8 @@ function uploadSnapshot(path) {
 }
 
 exports.getVersion = getVersion;
+exports.getAddonList = getAddonList;
+exports.getFolderList = getFolderList;
 exports.getSnapshots = getSnapshots;
 exports.downloadSnapshot = downloadSnapshot;
 exports.createNewBackup = createNewBackup;

nextcloud_backup/rootfs/opt/nextcloud_backup/tools/settingsTools.js

@@ -28,6 +28,7 @@ function check_cron(conf){
 
 
 function check(conf, fallback = false){
+    let needSave = false;
     if(!check_cron(conf)){
         if(fallback){
             logger.warn("Bad value for cron settings, fallback to default ")
@@ -92,7 +93,39 @@ function check(conf, fallback = false){
             return false;
         }
     }
-    if(fallback){
+    if(conf.exclude_addon == null){
+        if(fallback){
+            logger.warn("Bad value for 'exclude_addon', fallback to [] ")
+            conf.exclude_addon = []
+        }
+        else {
+            logger.error("Bad value for 'exclude_addon'")
+            return false;
+        }
+    }
+    if(conf.exclude_folder == null){
+        if(fallback){
+            logger.warn("Bad value for 'exclude_folder', fallback to [] ")
+            conf.exclude_folder = []
+        }
+        else {
+            logger.error("Bad value for 'exclude_folder'")
+            return false;
+        }
+    }
+
+    if(!Array.isArray(conf.exclude_folder)){
+        logger.debug("exclude_folder is not array (Empty value), reset...");
+        conf.exclude_folder = []
+        needSave = true;
+    }
+    if(!Array.isArray(conf.exclude_addon)){
+        logger.debug("exclude_addon is not array (Empty value), reset...");
+        conf.exclude_addon = []
+        needSave = true;
+    }
+
+    if(fallback || needSave){
         setSettings(conf);
     }
     return true

nextcloud_backup/rootfs/opt/nextcloud_backup/views/index.ejs

@@ -98,7 +98,7 @@
   <ul id="dropdown-settings" class="dropdown-content blue-grey darken-4">
     <li><a href="#modal-settings-nextcloud" id="trigger-nextcloud-settings" class="modal-trigger center">Nextcloud</a>
     </li>
-    <li><a href="#modal-settings-backup" id="trigger-backup-settings" class="modal-trigger center">Backup</a></li>
+    <li><a href="#" id="trigger-backup-settings" class="center">Backup</a></li>
   </ul>
   <div class="container ">
     
@@ -263,6 +263,7 @@
   
   var loadingModal = null;
   document.addEventListener('DOMContentLoaded', function() {
+    $.ajaxSetup({traditional: true});
     updateLocalSnaps();
     update_status();
     let tooltips = document.querySelectorAll('.tooltipped');
@@ -596,30 +597,30 @@
         }
       }
       
-      changeSelect('#cron-drop-settings', data.cron_base);
+      changeSelect('#cron-drop-settings', data.settings.cron_base);
       $('#cron-drop-settings').change(updateDropVisibility);
-      $('#name-template').val(data.name_template);
+      $('#name-template').val(data.settings.name_template);
       $('#name-template + label').removeClass("active");
       $('#name-template + label').addClass("active");
       
       let timepicker = document.querySelector('#timepicker');
-      $('#timepicker').val(data.cron_hour);
+      $('#timepicker').val(data.settings.cron_hour);
       $('#timepicker + label').removeClass("active");
       $('#timepicker + label').addClass("active");
       if (M.Timepicker.getInstance(timepicker) != null)
       M.Timepicker.getInstance(timepicker).destroy();
-      M.Timepicker.init(timepicker, { defaultTime: data.cron_hour, twelveHour: false, container: 'body' });
+      M.Timepicker.init(timepicker, { defaultTime: data.settings.cron_hour, twelveHour: false, container: 'body' });
-      $('#cron-drop-day-month-read').val(data.cron_month_day);
+      $('#cron-drop-day-month-read').val(data.settings.cron_month_day);
-      $('#cron-drop-day-month').val(data.cron_month_day);
+      $('#cron-drop-day-month').val(data.settings.cron_month_day);
       
       $('#cron-drop-day-month-read + label').removeClass("active");
       $('#cron-drop-day-month-read + label').addClass("active");
       
       
-      $('#auto_clean_local').prop('checked', data.auto_clean_local == "true");
+      $('#auto_clean_local').prop('checked', data.settings.auto_clean_local == "true");
-      $('#local-snap-keep').val(data.auto_clean_local_keep);
+      $('#local-snap-keep').val(data.settings.auto_clean_local_keep);
-      $('#auto_clean_backup').prop('checked', data.auto_clean_backup == "true");
+      $('#auto_clean_backup').prop('checked', data.settings.auto_clean_backup == "true");
-      $('#backup-snap-keep').val(data.auto_clean_backup_keep);
+      $('#backup-snap-keep').val(data.settings.auto_clean_backup_keep);
       
       
       $('#backup-snap-keep + label').removeClass("active");
@@ -627,9 +628,26 @@
       $('#local-snap-keep + label').removeClass("active");
       $('#local-snap-keep + label').addClass("active");
       
-      changeSelect('#cron-drop-day', data.cron_weekday);
+      changeSelect('#cron-drop-day', data.settings.cron_weekday);
+      let folder_html = ""
+      for(let index in data.folders){
+        let thisFolder = data.folders[index];
+        let exclude = data.settings.exclude_folder.includes(thisFolder.slug);
+        folder_html += `<li><label><input type="checkbox" class="folders-box" id="${thisFolder.slug}" ${exclude ? "" : "checked=checked"}/><span>${thisFolder.name}</span></label></li>`
+      }
+      $("#folders-div").html(folder_html);
+
+      let addons_html = ""
+      for(let index in data.addonList){
+        let thisAddon = data.addonList[index];
+        let exclude = data.settings.exclude_addon.includes(thisAddon.slug);
+        addons_html += `<li><label><input type="checkbox" class="addons-box" id="${thisAddon.slug}"  ${exclude ? "" : "checked=checked"}/><span>${thisAddon.name}</span></label></li>`
+      }
+      $("#addons-div").html(addons_html);
       updateDropVisibility();
       loadingModal.close();
+      M.Modal.getInstance(document.querySelector("#modal-settings-backup")).open()
+
     });
     
   }
@@ -672,6 +690,19 @@
     let auto_clean_local_keep = $("#local-snap-keep").val();
     let auto_clean_backup_keep = $("#backup-snap-keep").val();
     let name_template = $('#name-template').val();
+
+    let excluded_folders_nodes = document.querySelectorAll('.folders-box:not(:checked)');
+    let exclude_folder = [""];
+    for(let i of excluded_folders_nodes){
+      exclude_folder.push(i.id);
+    }
+
+    let excluded_addons_nodes = document.querySelectorAll('.addons-box:not(:checked)');
+    let exclude_addon = [""];
+    for(let i of excluded_addons_nodes){
+      exclude_addon.push(i.id);
+    }
+
     loadingModal.open();
     $.post('./api/backup-settings',
     {
@@ -684,6 +715,8 @@
       auto_clean_local_keep: auto_clean_local_keep,
       auto_clean_backup: auto_clean_backup,
       auto_clean_backup_keep: auto_clean_backup_keep,
+      exclude_addon: exclude_addon,
+      exclude_folder: exclude_folder
     })
     .done(() => {
       M.toast({ html: '<i class="material-icons" style="margin-right:10px">check_box</i> Backup settings saved !', classes: "green" });

nextcloud_backup/rootfs/opt/nextcloud_backup/views/modals/backup-settings-modal.ejs

@@ -14,131 +14,156 @@
           <input id="name-template" type="text" class="white-text">
           <label for="name-template">Backup name</label>
           <span class="helper-text">You can find all available variables <a target="_blank"
-              href="https://github.com/Sebclem/hassio-nextcloud-backup/blob/master/naming_template.md">here</a></span>
+            href="https://github.com/Sebclem/hassio-nextcloud-backup/blob/master/naming_template.md">here</a></span>
-        </div>
+          </div>
-      </div>
-      
-      <div class="row">
-        <div class="input-field col offset-xl2 xl8 offset-l1 l10 m12 s12">
-          <select id="cron-drop-settings">
-            <option value="0">Disable</option>
-            <option value="1">Daily</option>
-            <option value="2">Weekly</option>
-            <option value="3">Monthly</option>
-          </select>
-          <label>Auto Backup</label>
-        </div>
-      </div>
-      <div class="row hide">
-        <div class="input-field col offset-xl2 xl8 offset-l1 l10 m12 s12">
-          <input type="text" class="timepicker white-text" readonly="true" id="timepicker">
-          <label>Hour </label>
-        </div>
-      </div>
-      
-      <div class="row hide">
-        <div class="input-field col offset-xl2 xl8 offset-l1 l10 m12 s12">
-          <select id="cron-drop-day">
-            <option value="1">Monday</option>
-            <option value="2">Tuesday</option>
-            <option value="3">Wednesday</option>
-            <option value="4">Thursday</option>
-            <option value="5">Friday</option>
-            <option value="6">Saturday</option>
-            <option value="0">Sunday</option>
-          </select>
-          <label>Day</label>
-        </div>
-      </div>
-      
-      <div class="row hide">
-        <div class="input-field col s2">
-          <input type="text" class="white-text" disabled readonly="true" id="cron-drop-day-month-read">
-          <label class="white-text active">Day of month</label>
-        </div>
-        <div class="input-field col s10">
-          <p class="range-field">
-            <input type="range" id="cron-drop-day-month" min="1" max="28" style="border: none;" />
-          </p>
         </div>
         
-      </div>
+        <div class="row">
-      <div class="row">
+          <div class="input-field col offset-xl2 xl8 offset-l1 l10 m12 s12">
-        <div class="col s12">
+            <select id="cron-drop-settings">
+              <option value="0">Disable</option>
+              <option value="1">Daily</option>
+              <option value="2">Weekly</option>
+              <option value="3">Monthly</option>
+            </select>
+            <label>Auto Backup</label>
+          </div>
+        </div>
+        <div class="row hide">
+          <div class="input-field col offset-xl2 xl8 offset-l1 l10 m12 s12">
+            <input type="text" class="timepicker white-text" readonly="true" id="timepicker">
+            <label>Hour </label>
+          </div>
+        </div>
+        
+        <div class="row hide">
+          <div class="input-field col offset-xl2 xl8 offset-l1 l10 m12 s12">
+            <select id="cron-drop-day">
+              <option value="1">Monday</option>
+              <option value="2">Tuesday</option>
+              <option value="3">Wednesday</option>
+              <option value="4">Thursday</option>
+              <option value="5">Friday</option>
+              <option value="6">Saturday</option>
+              <option value="0">Sunday</option>
+            </select>
+            <label>Day</label>
+          </div>
+        </div>
+        
+        <div class="row hide">
+          <div class="input-field col s2">
+            <input type="text" class="white-text" disabled readonly="true" id="cron-drop-day-month-read">
+            <label class="white-text active">Day of month</label>
+          </div>
+          <div class="input-field col s10">
+            <p class="range-field">
+              <input type="range" id="cron-drop-day-month" min="1" max="28" style="border: none;" />
+            </p>
+          </div>
           
         </div>
-      </div>
-      <div class="row" style="margin-bottom: 5px;">
-        <div class="col s12 center">
-          <h4>Auto Clean Settings</h2>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col s12 center divider">
-            
-          </div>
-        </div>
-        
         <div class="row">
           <div class="col offset-xl1 xl5 l6 m12 s12">
-            <div class="row" style="margin-bottom: 10px;">
+            <div class="row">
-              <div class="col s12">
+              <div class="col s12 center">
-                <div style="color: #9e9e9e; display: inline;">Auto Clean Local Snapshots</div>
+                <h5>Folders</h5>
-                <div class="switch" style="display: inline;">
-                  <label>
-                    <input id="auto_clean_local" type="checkbox">
-                    <span class="lever"></span>
-                  </label>
-                </div>
               </div>
             </div>
             <div class="row">
-              <div class="input-field col s12">
+              <div class="col offset-s1 s11 xl10 offset-xl2" >
-                <input type="number" class="white-text" id="local-snap-keep">
+                <ul id="folders-div">
-                <label class="active">Local snapshot to keep</label>
+
+                </ul>
               </div>
-            </div>
+            </div>           
-            
           </div>
           <div class="col xl5 l6 m12 s12" >
-            <div class="row" style="margin-bottom: 10px;">
+            <div class="row">
-              <div class="col s12">
+              <div class="col s12 center">
-                <div style="color: #9e9e9e; display: inline;">Auto Clean Nextcloud Snapshots</div>
+                <h5>Addons</h5>
-              <div class="switch" style="display: inline;">
-                <label>
-                  <input id="auto_clean_backup" type="checkbox">
-                  <span class="lever"></span>
-                </label>
               </div>
+            </div>
+            <div class="row">
+              <div class="col offset-s1 s11 xl10 offset-xl2">
+                <ul id="addons-div">
+
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row" style="margin-bottom: 5px;">
+          <div class="col s12 center">
+            <h4>Auto Clean Settings</h2>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col s12 center divider">
+              
+            </div>
+          </div>
+          
+          <div class="row">
+            <div class="col offset-xl1 xl5 l6 m12 s12">
+              <div class="row" style="margin-bottom: 10px;">
+                <div class="col s12">
+                  <div style="color: #9e9e9e; display: inline;">Auto Clean Local Snapshots</div>
+                  <div class="switch" style="display: inline;">
+                    <label>
+                      <input id="auto_clean_local" type="checkbox">
+                      <span class="lever"></span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="input-field col s12">
+                  <input type="number" class="white-text" id="local-snap-keep">
+                  <label class="active">Local snapshot to keep</label>
+                </div>
               </div>
               
             </div>
-            <div class="row">
+            <div class="col xl5 l6 m12 s12" >
-              <div class="input-field col s12">
+              <div class="row" style="margin-bottom: 10px;">
-                <input type="number" class="white-text" id="backup-snap-keep">
+                <div class="col s12">
-                <label class="active">Nextcloud snapshot to keep</label>
+                  <div style="color: #9e9e9e; display: inline;">Auto Clean Nextcloud Snapshots</div>
+                  <div class="switch" style="display: inline;">
+                    <label>
+                      <input id="auto_clean_backup" type="checkbox">
+                      <span class="lever"></span>
+                    </label>
+                  </div>
+                </div>
+                
               </div>
+              <div class="row">
+                <div class="input-field col s12">
+                  <input type="number" class="white-text" id="backup-snap-keep">
+                  <label class="active">Nextcloud snapshot to keep</label>
+                </div>
+              </div>
+              
+              
             </div>
-            
+          </div>
+          
+          <div class="row" style="margin-bottom: 10px;">
+            
+          </div>
+          <div class="row">
             
           </div>
-        </div>
-        
-        <div class="row" style="margin-bottom: 10px;">
-          
-        </div>
-        <div class="row">
           
         </div>
         
-      </div>
-      
-      
-      
-      
-      <div class="modal-footer blue-grey darken-4">
-        <a href="#" class="modal-close waves-effect btn red"><b>Cancel</b></a>
-        <a href="#" class="btn green waves-effect" style="margin-left: 5px;" id="save-backup-settings"><b>Save</b></a>
         
-      </div>
+        
-    </div>
+        
+        <div class="modal-footer blue-grey darken-4">
+          <a href="#" class="modal-close waves-effect btn red"><b>Cancel</b></a>
+          <a href="#" class="btn green waves-effect" style="margin-left: 5px;" id="save-backup-settings"><b>Save</b></a>
+          
+        </div>
+      </div>