🔨 Edit frontend for Restore function

nextcloud_backup/rootfs/opt/nextcloud_backup/views/backupSnaps.ejs

@@ -1,7 +1,7 @@
 <% if (locals.backups) { %>
 <div class="collection">
     <% for(const index in backups) { %>
-    <a class="collection-item local-snap-listener modal-trigger" href="#modal-<%=backups[index].etag%>"
+    <a class="collection-item modal-trigger" href="#modal-<%=backups[index].etag%>"
         data-id="<%= backups[index].etag %>">
         <div><%= backups[index].basename%><div class="secondary-content hide-on-small-and-down">
                 <%= moment(backups[index].lastmod).format('MMM D, YYYY HH:mm')  %></div>
@@ -40,6 +40,7 @@
             </div>
         </div>
         <div class="modal-footer blue-grey darken-4">
+            <a href="#!" class="waves-effect waves-green btn green restore modal-close" data-id="<%=backups[index].filename%>" data-name='<%= backups[index].basename ? backups[index].basename : backups[index].etag %>'>Backup now</a>
             <a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
         </div>
     </div>

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

@@ -81,10 +81,14 @@
   <nav class=" light-blue accent-4">
     <div class="nav-wrapper container">
       <a href="#" class="brand-logo"><img src="./images/Nextcloud_Logo.svg" height="54"
-          style="margin: 5px"></a>
+        style="margin: 5px">
+      </a>
       <ul class="right">
-        <li id="setting-trigger"><a class="dropdown-trigger" href="#" data-target="dropdown-settings"><i
+        <li id="setting-trigger">
-              class="material-icons">settings</i></a></li>
+          <a class="dropdown-trigger" href="#" data-target="dropdown-settings">
+            <i class="material-icons">settings</i>
+          </a>
+        </li>
       </ul>
       <div style="height: 64px; display: table; margin-left: 130px;" class="hide-on-med-and-down">
         <h4 style="display: table-cell; vertical-align: middle;">Nextcloud Backup</h4>
@@ -181,6 +185,7 @@
   
   <%- include('modals/backup-settings-modal') %> 
   
+  <%- include('modals/restore-modal.ejs') %> 
   
   <div id="modal-loading" class="modal blue-grey darken-4 white-text">
     <div class="modal-content ">
@@ -245,6 +250,7 @@
     </div>
   </div>
   
+  
 </body>
 <script src="./js/materialize.min.js"></script>
 <script src="./js/jquery-3.4.1.min.js"></script>
@@ -255,6 +261,8 @@
   var last_manu_back = "";
   var last_auto_back = "";
   
+  var to_restore = "";
+  
   var loadingModal = null;
   document.addEventListener('DOMContentLoaded', function() {
     updateLocalSnaps();
@@ -274,7 +282,7 @@
     var elems = document.querySelectorAll('.collapsible');
     M.Collapsible.init(elems, { accordion: true });
     var modals = document.querySelectorAll('.modal:not(#modal-loading)');
-    M.Modal.init(modals, { dismissible: false });
+    M.Modal.init(modals, { dismissible: true });
     
     let loadingModals = document.querySelectorAll('#modal-loading');
     M.Modal.init(loadingModals, { dismissible: false });
@@ -290,6 +298,13 @@
       let name = this.getAttribute('data-name');
       manualBackup(id, name);
     })
+    $('.restore').click(function(){
+      to_restore = this.getAttribute('data-id');
+      console.log(to_restore)
+      let restore_modal = M.Modal.getInstance(document.querySelector('#modal-restore'));
+      restore_modal.open();
+      
+    })
   }
   
   function updateLocalSnaps() {
@@ -438,12 +453,28 @@
       div.removeClass("hide")
       else
       div.addClass("hide");
-    })
+    });
+    
+    $('#confirm-restore').click(function(){
+      restore(to_restore);
+    });
     
     
     
   }
   
+  function restore(id){
+    loadingModal.open();
+    $.post('./api/restore', {path: id})
+    .done((data)=>{
+      console.log("Restore cmd send !");
+      M.toast({ html: '<i class="material-icons" style="margin-right:10px">check_box</i> Command send !', classes: "green" });
+    }).fail((error) => {
+      console.log(error);
+      M.toast({ html: '<i class="material-icons" style="margin-right:10px">warning</i> Can\'t send command !', classes: "red" });
+    })
+    .always(()=> loadingModal.close())
+  }
   
   function sendNextcloudSettings() {
     loadingModal.open();
@@ -480,7 +511,14 @@
   }
   
   function manualBackup(id, name) {
-    $.post('./api/manual-backup?id=' + id + '&name=' + name);
+    $.post('./api/manual-backup?id=' + id + '&name=' + name)
+    .done((data)=>{
+      console.log("manual bk cmd send !");
+      M.toast({ html: '<i class="material-icons" style="margin-right:10px">check_box</i> Command send !', classes: "green" });
+    }).fail((error) => {
+      console.log(error);
+      M.toast({ html: '<i class="material-icons" style="margin-right:10px">warning</i> Can\'t send command !', classes: "red" });
+    })
     
   }
   

nextcloud_backup/rootfs/opt/nextcloud_backup/views/localSnaps.ejs

@@ -46,7 +46,7 @@
             </div>
         </div>
         <div class="modal-footer blue-grey darken-4">
-            <a href="#!" class="waves-effect waves-green btn light-blue accent-4 manual-back-list modal-close" data-id="<%=snaps[index].slug%>" data-name='<%= snaps[index].name ? snaps[index].name : snaps[index].slug %>'</a>Backup now</a>
+            <a href="#!" class="waves-effect waves-green btn green manual-back-list modal-close" data-id="<%=snaps[index].slug%>" data-name='<%= snaps[index].name ? snaps[index].name : snaps[index].slug %>'</a>Backup now</a>
             <a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
 
         </div>

nextcloud_backup/rootfs/opt/nextcloud_backup/views/modals/restore-modal.ejs

@@ -0,0 +1,22 @@
+<div id="modal-restore" class="modal  blue-grey darken-4 white-text">
+    <div class="modal-content">
+        <div class="row">
+            <div class="col s12 center">
+                <h4>Restore snapshot</h2>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col s12 center divider">
+                </div>
+            </div>
+            <div class="row" style="margin-top: 40px;">
+                <h5 class="center">Are you sure you want to restore this snapshot ?</h5>
+                <h6 class="center">This will remplace all your data !</h6>
+            </div>
+        </div>
+        <div class="modal-footer blue-grey darken-4">
+            <a href="#!" id="confirm-restore" class="waves-effect waves-green btn green modal-close">Confirm</a>
+            <a href="#!" class="modal-close waves-effect waves-green btn red">Cancel</a>
+            
+        </div>
+    </div>