Add percentage to backups page

Helper designed to be used for support logs as well.

app/classes/shared/helpers.py

@@ -426,15 +426,27 @@ class Helpers:
     
     @staticmethod
     def calc_percent(source_path, dest_path):
+        #calculates percentable of zip from drive. Not with compression. For backups and support logs
         source_size = 0
+        files_count = 0
         for path, _dirs, files in os.walk(source_path):
             for f in files:
                 fp = os.path.join(path, f)
                 source_size += os.stat(fp).st_size
+                files_count += 1
         dest_size = os.path.getsize(str(dest_path))
         percent = round((dest_size/source_size) * 100)
-        print("per", percent)
-        return percent
+        if percent >= 0:
+            results = {
+                "percent": percent,
+                "total_files": files_count
+            }
+        else:
+            results = {
+                "percent": 0,
+                "total_files": 0
+            }
+        return results
 
     @staticmethod
     def check_file_exists(path: str):

app/classes/shared/server.py

@@ -594,6 +594,7 @@ class Server:
         if not self.is_backingup:
             try:
                 backup_thread.start()
+                self.is_backingup = True
             except Exception as ex:
                 logger.error(f"Failed to start backup: {ex}")
                 return False
@@ -603,13 +604,24 @@ class Server:
         logger.info(f"Backup Thread started for server {self.settings['server_name']}.")
 
     def a_backup_server(self):
+        if len(websocket_helper.clients) > 0:
+                websocket_helper.broadcast_page_params(
+            '/panel/server_detail',
+            {
+                'id': str(self.server_id)
+            },
+            'backup_reload',
+            {
+                "percent": 0,
+                "total_files": 0
+            }
+        )
         logger.info(f"Starting server {self.name} (ID {self.server_id}) backup")
         server_users = server_permissions.get_server_user_list(self.server_id)
         for user in server_users:
             websocket_helper.broadcast_user(user, 'notification', translation.translate('notify',
             'backupStarted', users_helper.get_user_lang_by_id(user)).format(self.name))
         time.sleep(3)
-        self.is_backingup = True
         conf = management_helper.get_backup_config(self.server_id)
         try:
             backup_filename = f"{self.settings['backup_path']}/{datetime.datetime.now().strftime('%Y-%m-%d_%H-%M-%S')}"
@@ -666,7 +678,26 @@ class Server:
             return
         
     def backup_status(self, source_path, dest_path):
-        helper.calc_percent(source_path, dest_path)
+        results = helper.calc_percent(source_path, dest_path)
+        self.backup_stats = results
+        if len(websocket_helper.clients) > 0:
+            websocket_helper.broadcast_page_params(
+            '/panel/server_detail',
+            {
+                'id': str(self.server_id)
+            },
+            'backup_status',
+            results
+        )
+        
+    def send_backup_status(self):
+        try:
+            return self.backup_stats
+        except:
+            return {
+                'percent': 0,
+                'total_files': 0
+            }
 
     def list_backups(self):
         if self.settings['backup_path']:

app/frontend/templates/panel/server_backup.html

@@ -42,9 +42,20 @@
                       <input type="hidden" name="id" value="{{ data['server_stats']['server_id']['server_id'] }}">
                       <input type="hidden" name="subpage" value="backup">
 
-                      <div class="form-group">
-                        <a href="/panel/backup_now?id={{ data['server_stats']['server_id']['server_id'] }}" class="btn btn-primary" onclick="backup_started()">{{ translate('serverBackups', 'backupNow', data['lang']) }}</a>
+
+                      {% if data['backing_up'] %}
+                      <div class="progress" style="height: 15px;">
+                        <div class="progress-bar progress-bar-striped progress-bar-animated" id="backup_progress_bar" role="progressbar" style="width:{{data['backup_stats']['percent']}}%;" aria-valuenow="{{data['backup_stats']['percent']}}" aria-valuemin="0" aria-valuemax="100">{{ data['backup_stats']['percent'] }}%</div>
                       </div>
+                      <p>Backing up <span id="total_files">{{data['backup_stats']['total_files']}}</span> Files</p>
+                      {% end %}
+
+                      <br>
+                      {% if not data['backing_up'] %}
+                      <div id="backup_button" class="form-group">
+                        <button class="btn btn-primary" id="backup_now_button">{{ translate('serverBackups', 'backupNow', data['lang']) }}</button>
+                      </div>
+                      {% end %}
                       <div class="form-group">
                         {% if data['super_user'] %}
                         <label for="server_name">{{ translate('serverBackups', 'storageLocation', data['lang']) }} <small class="text-muted ml-1"> - {{ translate('serverBackups', 'storageLocationDesc', data['lang']) }}</small> </label>
@@ -224,12 +235,21 @@ const server_id = new URLSearchParams(document.location.search).get('id')
     return r ? r[1] : undefined;
   }
 
-  function backup_started(time='5-10') {
-    bootbox.alert({
+  function backup_started() {
+    var token = getCookie("_xsrf")
+    document.getElementById('backup_button').style.visibility = 'hidden';
+    var dialog = bootbox.dialog({
       message: "{{ translate('serverBackups', 'backupTask', data['lang']) }}",
-      backdrop: true
-    });
-  }
+      closeButton: false
+  });
+  $.ajax({
+    type: "POST",
+    headers: {'X-XSRFToken': token},
+    url: '/ajax/backup_now?id='+server_id,
+    success: function(data) {
+    },
+  });
+}
 
   function del_backup(filename, id){
     var token = getCookie("_xsrf")
@@ -350,6 +370,9 @@ const server_id = new URLSearchParams(document.location.search).get('id')
         }
       });
     });
+    $( "#backup_now_button" ).click(function() {
+      backup_started();
+    });
 
   });
 
@@ -402,6 +425,26 @@ document.getElementById("modal-cancel").addEventListener("click", function(){
     }, 5000);
     });
   }
+  if (webSocket) {
+    webSocket.on('backup_status', function (backup) {
+      if(backup.percent >= 100){
+        document.getElementById('backup_progress_bar').innerHTML = '100%';
+        document.getElementById('backup_progress_bar').style.width = '100%';
+        setTimeout(function(){
+          window.location.reload(1);
+       }, 5000);
+      }else{
+        document.getElementById('backup_progress_bar').innerHTML = backup.percent +'%';
+        document.getElementById('backup_progress_bar').style.width = backup.percent + '%';
+        document.getElementById('total_files').innerHTML = backup.total_files;
+      }
+    });
+  }
+  if (webSocket) {
+    webSocket.on('backup_reload', function (backup) {
+      location.reload()
+    });
+  }
 
   function getTreeView(path) {
     path = path