From f2e00040bd5bb84aa4437004fd37086b32397b77 Mon Sep 17 00:00:00 2001
From: amcmanu3 <mcdeweykp@gmail.com>
Date: Sat, 20 Apr 2024 18:15:06 -0400
Subject: [PATCH] Make backups list page load

---
 app/classes/web/panel_handler.py              |  31 +-
 .../templates/panel/server_backup.html        | 411 +++------
 .../templates/panel/server_backup_edit.html   | 820 ++++++++++++++++++
 3 files changed, 952 insertions(+), 310 deletions(-)
 create mode 100644 app/frontend/templates/panel/server_backup_edit.html

diff --git a/app/classes/web/panel_handler.py b/app/classes/web/panel_handler.py
index d436a72a..514ea494 100644
--- a/app/classes/web/panel_handler.py
+++ b/app/classes/web/panel_handler.py
@@ -677,16 +677,10 @@ class PanelHandler(BaseHandler):
                 page_data["java_versions"] = page_java
             if subpage == "backup":
                 server_info = self.controller.servers.get_server_data_by_id(server_id)
-                page_data["backup_config"] = (
-                    self.controller.management.get_backup_config(server_id)
-                )
+
                 page_data["backups"] = self.controller.management.get_backups_by_server(
                     server_id, model=True
                 )
-                exclusions = []
-                page_data["exclusions"] = (
-                    self.controller.management.get_excluded_backup_dirs(server_id)
-                )
                 page_data["backing_up"] = (
                     self.controller.servers.get_server_instance_by_id(
                         server_id
@@ -698,20 +692,8 @@ class PanelHandler(BaseHandler):
                     ).send_backup_status()
                 )
                 # makes it so relative path is the only thing shown
-                for file in page_data["exclusions"]:
-                    if Helpers.is_os_windows():
-                        exclusions.append(file.replace(server_info["path"] + "\\", ""))
-                    else:
-                        exclusions.append(file.replace(server_info["path"] + "/", ""))
-                page_data["exclusions"] = exclusions
+
                 self.controller.servers.refresh_server_settings(server_id)
-                try:
-                    page_data["backup_list"] = server.list_backups()
-                except:
-                    page_data["backup_list"] = []
-                page_data["backup_path"] = Helpers.wtol_path(
-                    page_data["backup_config"]["backup_path"]
-                )
 
             if subpage == "metrics":
                 try:
@@ -1260,6 +1242,15 @@ class PanelHandler(BaseHandler):
 
             template = "panel/server_schedule_edit.html"
 
+        elif page == "edit_backup":
+            exclusions = []
+            for file in page_data["exclusions"]:
+                if Helpers.is_os_windows():
+                    exclusions.append(file.replace(server_info["path"] + "\\", ""))
+                else:
+                    exclusions.append(file.replace(server_info["path"] + "/", ""))
+            page_data["exclusions"] = exclusions
+
         elif page == "edit_user":
             user_id = self.get_argument("id", None)
             role_servers = self.controller.servers.get_authorized_servers(user_id)
diff --git a/app/frontend/templates/panel/server_backup.html b/app/frontend/templates/panel/server_backup.html
index 0ffba3c4..6a8098c4 100644
--- a/app/frontend/templates/panel/server_backup.html
+++ b/app/frontend/templates/panel/server_backup.html
@@ -43,35 +43,51 @@
             <div class="col-md-12 col-sm-12" style="overflow-x:auto;">
               <div class="card">
                 <div class="card-header header-sm d-flex justify-content-between align-items-center">
-                  <h4 class="card-title"><i class="fa-regular fa-bell"></i> {{ translate('serverBackups', 'backups', data['lang']) }} </h4>
+                  <h4 class="card-title"><i class="fa-regular fa-bell"></i> {{ translate('serverBackups', 'backups',
+                    data['lang']) }} </h4>
                   {% if data['user_data']['hints'] %}
-                  <span class="too_small" title="{{ translate('serverSchedules', 'cannotSee', data['lang']) }}" , data-content="{{ translate('serverSchedules', 'cannotSeeOnMobile', data['lang']) }}" , data-placement="bottom"></span>
+                  <span class="too_small" title="{{ translate('serverSchedules', 'cannotSee', data['lang']) }}" ,
+                    data-content="{{ translate('serverSchedules', 'cannotSeeOnMobile', data['lang']) }}" ,
+                    data-placement="bottom"></span>
                   {% end %}
-                  <div><a class="btn btn-info" href="/panel/add_backup?id={{ data['server_stats']['server_id']['server_id'] }}"><i class="fas fa-plus-circle"></i> {{ translate('serverBackups', 'newBackup', data['lang']) }}</a></div>
+                  <div><a class="btn btn-info"
+                      href="/panel/add_backup?id={{ data['server_stats']['server_id']['server_id'] }}"><i
+                        class="fas fa-plus-circle"></i> {{ translate('serverBackups', 'newBackup', data['lang']) }}</a>
+                  </div>
                 </div>
                 <div class="card-body">
                   {% if len(data['backups']) == 0 %}
                   <div style="text-align: center; color: grey;">
-                    <h7>{{ translate('serverBackups', 'no-backup', data['lang']) }} <strong>{{ translate('serverBackups', 'newBackup',data['lang']) }}</strong>.</h7>
+                    <h7>{{ translate('serverBackups', 'no-backup', data['lang']) }} <strong>{{
+                        translate('serverBackups', 'newBackup',data['lang']) }}</strong>.</h7>
                   </div>
                   {% end %}
                   {% if len(data['backups']) > 0 %}
                   <div class="d-none d-lg-block">
-                    <table class="table table-hover responsive-table" aria-label="backups list" id="backup_table" width="100%" style="table-layout:fixed;">
+                    <table class="table table-hover responsive-table" aria-label="backups list" id="backup_table"
+                      width="100%" style="table-layout:fixed;">
                       <thead>
                         <tr class="rounded">
-                          <th scope="col" style="width: 5%; min-width: 64px;">{{ translate('serverBackups', 'enabled', data['lang']) }}</th>
-                          <th scope="col" style="width: 15%; min-width: 10px;">{{ translate('serverBackups', 'name', data['lang']) }} </th>
-                          <th scope="col" style="width: 60%; min-width: 50px;">{{ translate('serverBackups', 'storageLocation', data['lang']) }}</th>
-                          <th scope="col" style="width: 10%; min-width: 50px;">{{ translate('serverBackups', 'maxBackups', data['lang']) }}</th>
-                          <th scope="col" style="width: 10%; min-width: 50px;">{{ translate('serverBackups', 'actions', data['lang']) }}</th>
+                          <th scope="col" style="width: 5%; min-width: 64px;">{{ translate('serverBackups', 'enabled',
+                            data['lang']) }}</th>
+                          <th scope="col" style="width: 15%; min-width: 10px;">{{ translate('serverBackups', 'name',
+                            data['lang']) }} </th>
+                          <th scope="col" style="width: 60%; min-width: 50px;">{{ translate('serverBackups',
+                            'storageLocation', data['lang']) }}</th>
+                          <th scope="col" style="width: 10%; min-width: 50px;">{{ translate('serverBackups',
+                            'maxBackups', data['lang']) }}</th>
+                          <th scope="col" style="width: 10%; min-width: 50px;">{{ translate('serverBackups', 'actions',
+                            data['lang']) }}</th>
                         </tr>
                       </thead>
                       <tbody>
                         {% for backup in data['backups'] %}
                         <tr>
                           <td id="{{backup.enabled}}" class="enabled">
-                            <button type="button" class="btn btn-sm btn-info btn-toggle backup-custom-toggle" id="backup_{{backup.id}}" name="backup_{{backup.id}}" data-backup-id="{{backup.id}}" data-backup-enabled="{{ 'true' if backup.enabled else 'false' }}" data-toggle="button" aria-pressed="true" autocomplete="off">
+                            <button type="button" class="btn btn-sm btn-info btn-toggle backup-custom-toggle"
+                              id="backup_{{backup.id}}" name="backup_{{backup.id}}" data-backup-id="{{backup.id}}"
+                              data-backup-enabled="{{ 'true' if backup.enabled else 'false' }}" data-toggle="button"
+                              aria-pressed="true" autocomplete="off">
                               <div class="handle"></div>
                             </button>
                           </td>
@@ -85,13 +101,17 @@
                             <p>{{backup.max_backups}}</p>
                           </td>
                           <td id="backup_edit" class="action">
-                            <button onclick="window.location.href=`/panel/backup_edit?id={{ data['server_stats']['server_id']['server_id'] }}&backup_id={{backup.id}}`" class="btn btn-info">
+                            <button
+                              onclick="window.location.href=`/panel/backup_edit?id={{ data['server_stats']['server_id']['server_id'] }}&backup_id={{backup.id}}`"
+                              class="btn btn-info">
                               <i class="fas fa-pencil-alt"></i>
                             </button>
                             <button data-backup={{ backup.id }} class="btn btn-danger del_button">
                               <i class="fas fa-trash" aria-hidden="true"></i>
                             </button>
-                            <button data-backup={{ backup.id }} data-toggle="tooltip" title="{{ translate('serverBackups', 'run', data['lang']) }}" class="btn btn-outline-warning test-socket">
+                            <button data-backup={{ backup.id }} data-toggle="tooltip"
+                              title="{{ translate('serverBackups', 'run', data['lang']) }}"
+                              class="btn btn-outline-warning test-socket">
                               <i class="fa-solid fa-vial"></i>
                             </button>
                           </td>
@@ -101,7 +121,8 @@
                     </table>
                   </div>
                   <div class="d-block d-lg-none">
-                    <table aria-label="backups list" class="table table-hover responsive-table" id="backup_table_mini" width="100%" style="table-layout:fixed;">
+                    <table aria-label="backups list" class="table table-hover responsive-table" id="backup_table_mini"
+                      width="100%" style="table-layout:fixed;">
                       <thead>
                         <tr class="rounded">
                           <th style="width: 20%; min-width: 64px;">{{ translate('serverBackups', 'enabled',
@@ -116,7 +137,10 @@
                         {% for backup in data['backups'] %}
                         <tr>
                           <td id="{{backup.enabled}}" class="enabled">
-                            <button type="button" class="btn btn-sm btn-info btn-toggle backup-custom-toggle" id="backup_{{backup.id}}" name="backup_{{backup.id}}" data-backup-id="{{backup.id}}" data-backup-enabled="{{ 'true' if backup.enabled else 'false' }}" data-toggle="button" aria-pressed="true" autocomplete="off">
+                            <button type="button" class="btn btn-sm btn-info btn-toggle backup-custom-toggle"
+                              id="backup_{{backup.id}}" name="backup_{{backup.id}}" data-backup-id="{{backup.id}}"
+                              data-backup-enabled="{{ 'true' if backup.enabled else 'false' }}" data-toggle="button"
+                              aria-pressed="true" autocomplete="off">
                               <div class="handle"></div>
                             </button>
                           </td>
@@ -124,13 +148,17 @@
                             <p>{{backup.backup_name}}</p>
                           </td>
                           <td id="backup_edit" class="action">
-                            <button onclick="window.location.href=`/panel/backup_edit?id={{ data['server_stats']['server_id']['server_id'] }}&backup_id={{backup.id}}`" class="btn btn-info">
+                            <button
+                              onclick="window.location.href=`/panel/backup_edit?id={{ data['server_stats']['server_id']['server_id'] }}&backup_id={{backup.id}}`"
+                              class="btn btn-info">
                               <i class="fas fa-pencil-alt"></i>
                             </button>
                             <button data-backup={{ backup.backup_id }} class="btn btn-danger del_button">
                               <i class="fas fa-trash" aria-hidden="true"></i>
                             </button>
-                            <button data-backup={{ backup.backup_id }} data-toggle="tooltip" title="{{ translate('serverBackups', 'run', data['lang']) }}" class="btn btn-outline-warning test-socket">
+                            <button data-backup={{ backup.backup_id }} data-toggle="tooltip"
+                              title="{{ translate('serverBackups', 'run', data['lang']) }}"
+                              class="btn btn-outline-warning test-socket">
                               <i class="fa-solid fa-vial"></i>
                             </button>
                           </td>
@@ -144,207 +172,6 @@
               </div>
             </div>
           </div>
-          <div class="row">
-            <div class="col-md-6 col-sm-12">
-              <br>
-              <br>
-              {% 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 <i class="fas fa-spin fa-spinner"></i> <span
-                  id="total_files">{{data['server_stats']['world_size']}}</span></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 %}
-              <form id="backup-form" class="forms-sample">
-                <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>
-                  <input type="text" class="form-control" name="backup_path" id="backup_path"
-                    value="{{ data['backup_config']['backup_path']  }}"
-                    placeholder="{{ translate('serverBackups', 'storageLocation', data['lang']) }}">
-                  {% end %}
-                </div>
-
-                <div class="form-group">
-                  <label for="server_path">{{ translate('serverBackups', 'maxBackups', data['lang']) }} <small
-                      class="text-muted ml-1"> - {{ translate('serverBackups', 'maxBackupsDesc', data['lang'])
-                      }}</small> </label>
-                  <input type="text" class="form-control" name="max_backups" id="max_backups"
-                    value="{{ data['backup_config']['max_backups']  }}"
-                    placeholder="{{ translate('serverBackups', 'maxBackups', data['lang']) }}">
-                </div>
-                <div class="form-group">
-                  <label for="compress" class="form-check-label ml-4 mb-4"></label>
-                  {% if data['backup_config']['compress'] %}
-                  <input type="checkbox" class="form-check-input" id="compress" name="compress" checked=""
-                    value="True">{{ translate('serverBackups', 'compress', data['lang']) }}
-                  {% else %}
-                  <input type="checkbox" class="form-check-input" id="compress" name="compress" value="True">{{
-                  translate('serverBackups', 'compress', data['lang']) }}
-                  {% end %}
-                </div>
-                <div class="form-group">
-                  <label for="shutdown" class="form-check-label ml-4 mb-4"></label>
-                  {% if data['backup_config']['shutdown'] %}
-                  <input type="checkbox" class="form-check-input" id="shutdown" name="shutdown" checked=""
-                    value="True">{{ translate('serverBackups', 'shutdown', data['lang']) }}
-                  {% else %}
-                  <input type="checkbox" class="form-check-input" id="shutdown" name="shutdown" value="True">{{
-                  translate('serverBackups', 'shutdown', data['lang']) }}
-                  {% end %}
-                </div>
-                <div class="form-group">
-                  <label for="command-check" class="form-check-label ml-4 mb-4"></label>
-                  {% if data['backup_config']['before'] %}
-                  <input type="checkbox" class="form-check-input" id="before-check" name="before-check" checked>{{
-                  translate('serverBackups', 'before', data['lang']) }}
-                  <br>
-                  <input type="text" class="form-control" name="backup_before" id="backup_before"
-                    value="{{ data['backup_config']['before'] }}" placeholder="We enter the / for you"
-                    style="display: inline-block;">
-                  {% else %}
-                  <input type="checkbox" class="form-check-input" id="before-check" name="before-check">{{
-                  translate('serverBackups', 'before', data['lang']) }}
-                  <br>
-                  <input type="text" class="form-control" name="backup_before" id="backup_before" value=""
-                    placeholder="We enter the / for you." style="display: none;">
-                  {% end %}
-                </div>
-                <div class="form-group">
-                  <label for="command-check" class="form-check-label ml-4 mb-4"></label>
-                  {% if data['backup_config']['after'] %}
-                  <input type="checkbox" class="form-check-input" id="after-check" name="after-check" checked>{{
-                  translate('serverBackups', 'after', data['lang']) }}
-                  <br>
-                  <input type="text" class="form-control" name="backup_after" id="backup_after"
-                    value="{{ data['backup_config']['after'] }}" placeholder="We enter the / for you"
-                    style="display: inline-block;">
-                  {% else %}
-                  <input type="checkbox" class="form-check-input" id="after-check" name="after-check">{{
-                  translate('serverBackups', 'after', data['lang']) }}
-                  <br>
-                  <input type="text" class="form-control" name="backup_after" id="backup_after" value=""
-                    placeholder="We enter the / for you." style="display: none;">
-                  {% end %}
-                </div>
-                <div class="form-group">
-                  <label for="server">{{ translate('serverBackups', 'exclusionsTitle', data['lang']) }} <small> - {{
-                      translate('serverBackups', 'excludedChoose', data['lang']) }}</small></label>
-                  <br>
-                  <button class="btn btn-primary mr-2" id="root_files_button"
-                    data-server_path="{{ data['server_stats']['server_id']['path']}}" type="button">{{
-                    translate('serverBackups', 'clickExclude', data['lang']) }}</button>
-                </div>
-                <div class="modal fade" id="dir_select" tabindex="-1" role="dialog" aria-labelledby="dir_select"
-                  aria-hidden="true">
-                  <div class="modal-dialog" role="document">
-                    <div class="modal-content">
-                      <div class="modal-header">
-                        <h5 class="modal-title" id="exampleModalLongTitle">{{ translate('serverBackups',
-                          'excludedChoose', data['lang']) }}</h5>
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                          <span aria-hidden="true">&times;</span>
-                        </button>
-                      </div>
-                      <div class="modal-body">
-                        <div class="tree-ctx-item" id="main-tree-div" data-path=""
-                          style="overflow: scroll; max-height:75%;">
-                          <input type="checkbox" id="main-tree-input" name="root_path" value="" disabled>
-                          <span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path="">
-                            <i class="far fa-folder"></i>
-                            <i class="far fa-folder-open"></i>
-                            {{ translate('serverFiles', 'files', data['lang']) }}
-                          </span>
-                          </input>
-                        </div>
-                      </div>
-                      <div class="modal-footer">
-                        <button type="button" id="modal-cancel" class="btn btn-secondary" data-dismiss="modal"><i class="fa-solid fa-xmark"></i></button>
-                        <button type="button" id="modal-okay" data-dismiss="modal" class="btn btn-primary"><i class="fa-solid fa-thumbs-up"></i></button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <button type="submit" class="btn btn-success mr-2">{{ translate('serverBackups', 'save', data['lang'])
-                  }}</button>
-                <button type="reset" class="btn btn-light">{{ translate('serverBackups', 'cancel', data['lang'])
-                  }}</button>
-              </form>
-            </div>
-
-            <div class="col-md-6 col-sm-12">
-              <div class="text-center">
-
-                <table class="table table-responsive dataTable" id="backup_table">
-                  <h4 class="card-title">{{ translate('serverBackups', 'currentBackups', data['lang']) }}</h4>
-                  <thead>
-                    <tr>
-                      <th width="10%">{{ translate('serverBackups', 'options', data['lang']) }}</th>
-                      <th>{{ translate('serverBackups', 'path', data['lang']) }}</th>
-                      <th width="20%">{{ translate('serverBackups', 'size', data['lang']) }}</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {% for backup in data['backup_list'] %}
-                    <tr>
-                      <td>
-                        <a href="/panel/download_backup?file={{ backup['path'] }}&id={{ data['server_stats']['server_id']['server_id'] }}"
-                          class="btn btn-primary">
-                          <i class="fas fa-download" aria-hidden="true"></i>
-                          {{ translate('serverBackups', 'download', data['lang']) }}
-                        </a>
-                        <br>
-                        <br>
-                        <button data-file="{{ backup['path'] }}" data-backup_path="{{ data['backup_path'] }}"
-                          class="btn btn-danger del_button">
-                          <i class="fas fa-trash" aria-hidden="true"></i>
-                          {{ translate('serverBackups', 'delete', data['lang']) }}
-                        </button>
-                        <button data-file="{{ backup['path'] }}" class="btn btn-warning restore_button">
-                          <i class="fas fa-undo-alt" aria-hidden="true"></i>
-                          {{ translate('serverBackups', 'restore', data['lang']) }}
-                        </button>
-                      </td>
-                      <td>{{ backup['path'] }}</td>
-                      <td>{{ backup['size'] }}</td>
-                    </tr>
-                    {% end %}
-
-                  </tbody>
-                </table>
-
-              </div>
-            </div>
-          </div>
-          <div class="col-md-12 col-sm-12">
-            <br>
-            <br>
-            <div class="card-header header-sm d-flex justify-content-between align-items-center">
-              <h4 class="card-title"><i class="fas fa-server"></i> {{ translate('serverBackups', 'excludedBackups',
-                data['lang']) }} <small class="text-muted ml-1"></small> </h4>
-            </div>
-            <br>
-            <ul>
-              {% for item in data['exclusions'] %}
-              <li>{{item}}</li>
-              <br>
-              {% end %}
-            </ul>
-          </div>
 
         </div>
       </div>
@@ -414,15 +241,15 @@
   async function backup_started() {
     const token = getCookie("_xsrf")
     let res = await fetch(`/api/v2/servers/${server_id}/action/backup_server`, {
-        method: 'POST',
-        headers: {
-          'X-XSRFToken': token
-        }
-      });
-      let responseData = await res.json();
-      if (responseData.status === "ok") {
-        console.log(responseData);
-        $("#backup_button").html(`<div class="progress" style="height: 15px;">
+      method: 'POST',
+      headers: {
+        'X-XSRFToken': token
+      }
+    });
+    let responseData = await res.json();
+    if (responseData.status === "ok") {
+      console.log(responseData);
+      $("#backup_button").html(`<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">{{
@@ -430,18 +257,18 @@
                 </div>
                 <p>Backing up <i class="fas fa-spin fa-spinner"></i> <span
                     id="total_files">{{data['server_stats']['world_size']}}</span></p>`);
-      } else {
+    } else {
 
-        bootbox.alert({
-          title: responseData.status,
-          message: responseData.error
-        });
-      }
+      bootbox.alert({
+        title: responseData.status,
+        message: responseData.error
+      });
+    }
     return;
   }
   async function del_backup(filename, id) {
     const token = getCookie("_xsrf")
-    let contents = JSON.stringify({"filename": filename})
+    let contents = JSON.stringify({ "filename": filename })
     let res = await fetch(`/api/v2/servers/${id}/backups/backup/`, {
       method: 'DELETE',
       headers: {
@@ -452,15 +279,17 @@
     let responseData = await res.json();
     if (responseData.status === "ok") {
       window.location.reload();
-    }else{
-      bootbox.alert({"title": responseData.status,
-                    "message": responseData.error})
+    } else {
+      bootbox.alert({
+        "title": responseData.status,
+        "message": responseData.error
+      })
     }
   }
 
   async function restore_backup(filename, id) {
     const token = getCookie("_xsrf")
-    let contents = JSON.stringify({"filename": filename})
+    let contents = JSON.stringify({ "filename": filename })
     var dialog = bootbox.dialog({
       message: "<i class='fa fa-spin fa-spinner'></i> {{ translate('serverBackups', 'restoring', data['lang']) }}",
       closeButton: false
@@ -475,9 +304,11 @@
     let responseData = await res.json();
     if (responseData.status === "ok") {
       window.location.href = "/panel/dashboard";
-    }else{
-      bootbox.alert({"title": responseData.status,
-                    "message": responseData.error})
+    } else {
+      bootbox.alert({
+        "title": responseData.status,
+        "message": responseData.error
+      })
     }
   }
 
@@ -529,7 +360,7 @@
       $('input.excluded:checkbox:checked').each(function () {
         excluded.push($(this).val());
       });
-      if ($("#root_files_button").hasClass("clicked")){
+      if ($("#root_files_button").hasClass("clicked")) {
         formDataObject.exclusions = excluded;
       }
       delete formDataObject.root_path
@@ -711,54 +542,54 @@
     });
   }
 
-  function getDirView(event){
+  function getDirView(event) {
     let path = event.target.parentElement.getAttribute("data-path");
     if (document.getElementById(path).classList.contains('clicked')) {
       return;
-    }else{
+    } else {
       getTreeView(path);
     }
 
   }
-  async function getTreeView(path){
+  async function getTreeView(path) {
     console.log(path)
     const token = getCookie("_xsrf");
     let res = await fetch(`/api/v2/servers/${server_id}/files`, {
-        method: 'POST',
-        headers: {
-          'X-XSRFToken': token
-        },
-        body: JSON.stringify({"page": "backups", "path": path}),
+      method: 'POST',
+      headers: {
+        'X-XSRFToken': token
+      },
+      body: JSON.stringify({ "page": "backups", "path": path }),
+    });
+    let responseData = await res.json();
+    if (responseData.status === "ok") {
+      console.log(responseData);
+      process_tree_response(responseData);
+
+    } else {
+
+      bootbox.alert({
+        title: responseData.status,
+        message: responseData.error
       });
-      let responseData = await res.json();
-      if (responseData.status === "ok") {
-        console.log(responseData);
-        process_tree_response(responseData);
-
-      } else {
-
-        bootbox.alert({
-          title: responseData.status,
-          message: responseData.error
-        });
-      }
+    }
   }
 
   function process_tree_response(response) {
     let path = response.data.root_path.path;
     let text = `<ul class="tree-nested d-block" id="${path}ul">`;
-      Object.entries(response.data).forEach(([key, value]) => {
-        if (key === "root_path" || key === "db_stats"){
-          //continue is not valid in for each. Return acts as a continue.
-          return;
-        }
+    Object.entries(response.data).forEach(([key, value]) => {
+      if (key === "root_path" || key === "db_stats") {
+        //continue is not valid in for each. Return acts as a continue.
+        return;
+      }
       let checked = ""
       let dpath = value.path;
       let filename = key;
-      if (value.excluded){
+      if (value.excluded) {
         checked = "checked"
       }
-      if (value.dir){
+      if (value.dir) {
         text += `<li class="tree-item" data-path="${dpath}">
                             \n<div id="${dpath}" data-path="${dpath}" data-name="${filename}" class="tree-caret tree-ctx-item tree-folder">
                             <input type="checkbox" class="checkBoxClass excluded" value="${dpath}" ${checked}>
@@ -768,7 +599,7 @@
                             <strong>${filename}</strong>
                             </span>
                             </input></div><li>`
-      }else{
+      } else {
         text += `<li
                         class="d-block tree-ctx-item tree-file"
                         data-path="${dpath}"
@@ -778,30 +609,30 @@
       }
     });
     text += `</ul>`;
-    if(response.data.root_path.top){
+    if (response.data.root_path.top) {
       try {
-          document.getElementById('main-tree-div').innerHTML += text;
-          document.getElementById('main-tree').parentElement.classList.add("clicked");
-        } catch {
-          document.getElementById('files-tree').innerHTML = text;
-        }
-    }else{
+        document.getElementById('main-tree-div').innerHTML += text;
+        document.getElementById('main-tree').parentElement.classList.add("clicked");
+      } catch {
+        document.getElementById('files-tree').innerHTML = text;
+      }
+    } else {
       try {
-            document.getElementById(path + "span").classList.add('tree-caret-down');
-            document.getElementById(path).innerHTML += text;
-            document.getElementById(path).classList.add("clicked");
-          } catch {
-            console.log("Bad")
-          }
+        document.getElementById(path + "span").classList.add('tree-caret-down');
+        document.getElementById(path).innerHTML += text;
+        document.getElementById(path).classList.add("clicked");
+      } catch {
+        console.log("Bad")
+      }
 
-          var toggler = document.getElementById(path + "span");
+      var toggler = document.getElementById(path + "span");
 
-          if (toggler.classList.contains('files-tree-title')) {
-            document.getElementById(path + "span").addEventListener("click", function caretListener() {
-              document.getElementById(path + "ul").classList.toggle("d-block");
-              document.getElementById(path + "span").classList.toggle("tree-caret-down");
-            });
-          }
+      if (toggler.classList.contains('files-tree-title')) {
+        document.getElementById(path + "span").addEventListener("click", function caretListener() {
+          document.getElementById(path + "ul").classList.toggle("d-block");
+          document.getElementById(path + "span").classList.toggle("tree-caret-down");
+        });
+      }
     }
   }
 
diff --git a/app/frontend/templates/panel/server_backup_edit.html b/app/frontend/templates/panel/server_backup_edit.html
new file mode 100644
index 00000000..0ffba3c4
--- /dev/null
+++ b/app/frontend/templates/panel/server_backup_edit.html
@@ -0,0 +1,820 @@
+{% extends ../base.html %}
+
+{% block meta %}
+{% end %}
+
+{% block title %}Crafty Controller - {{ translate('serverDetails', 'serverDetails', data['lang']) }}{% end %}
+
+{% block content %}
+
+<div class="content-wrapper">
+
+  <!-- Page Title Header Starts-->
+  <div class="row page-title-header">
+    <div class="col-12">
+      <div class="page-header">
+        <h4 class="page-title">
+          {{ translate('serverDetails', 'serverDetails', data['lang']) }} - {{
+          data['server_stats']['server_id']['server_name'] }}
+          <br />
+          <small>UUID: {{ data['server_stats']['server_id']['server_id'] }}</small>
+        </h4>
+      </div>
+    </div>
+
+  </div>
+  <!-- Page Title Header Ends-->
+
+  {% include "parts/details_stats.html %}
+
+  <div class="row">
+
+    <div class="col-sm-12 grid-margin">
+      <div class="card">
+        <div class="card-body  pt-0">
+
+          <span class="d-none d-sm-block">
+            {% include "parts/server_controls_list.html %}
+          </span>
+          <span class="d-block d-sm-none">
+            {% include "parts/m_server_controls_list.html %}
+          </span>
+          <div class="row">
+            <div class="col-md-12 col-sm-12" style="overflow-x:auto;">
+              <div class="card">
+                <div class="card-header header-sm d-flex justify-content-between align-items-center">
+                  <h4 class="card-title"><i class="fa-regular fa-bell"></i> {{ translate('serverBackups', 'backups', data['lang']) }} </h4>
+                  {% if data['user_data']['hints'] %}
+                  <span class="too_small" title="{{ translate('serverSchedules', 'cannotSee', data['lang']) }}" , data-content="{{ translate('serverSchedules', 'cannotSeeOnMobile', data['lang']) }}" , data-placement="bottom"></span>
+                  {% end %}
+                  <div><a class="btn btn-info" href="/panel/add_backup?id={{ data['server_stats']['server_id']['server_id'] }}"><i class="fas fa-plus-circle"></i> {{ translate('serverBackups', 'newBackup', data['lang']) }}</a></div>
+                </div>
+                <div class="card-body">
+                  {% if len(data['backups']) == 0 %}
+                  <div style="text-align: center; color: grey;">
+                    <h7>{{ translate('serverBackups', 'no-backup', data['lang']) }} <strong>{{ translate('serverBackups', 'newBackup',data['lang']) }}</strong>.</h7>
+                  </div>
+                  {% end %}
+                  {% if len(data['backups']) > 0 %}
+                  <div class="d-none d-lg-block">
+                    <table class="table table-hover responsive-table" aria-label="backups list" id="backup_table" width="100%" style="table-layout:fixed;">
+                      <thead>
+                        <tr class="rounded">
+                          <th scope="col" style="width: 5%; min-width: 64px;">{{ translate('serverBackups', 'enabled', data['lang']) }}</th>
+                          <th scope="col" style="width: 15%; min-width: 10px;">{{ translate('serverBackups', 'name', data['lang']) }} </th>
+                          <th scope="col" style="width: 60%; min-width: 50px;">{{ translate('serverBackups', 'storageLocation', data['lang']) }}</th>
+                          <th scope="col" style="width: 10%; min-width: 50px;">{{ translate('serverBackups', 'maxBackups', data['lang']) }}</th>
+                          <th scope="col" style="width: 10%; min-width: 50px;">{{ translate('serverBackups', 'actions', data['lang']) }}</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {% for backup in data['backups'] %}
+                        <tr>
+                          <td id="{{backup.enabled}}" class="enabled">
+                            <button type="button" class="btn btn-sm btn-info btn-toggle backup-custom-toggle" id="backup_{{backup.id}}" name="backup_{{backup.id}}" data-backup-id="{{backup.id}}" data-backup-enabled="{{ 'true' if backup.enabled else 'false' }}" data-toggle="button" aria-pressed="true" autocomplete="off">
+                              <div class="handle"></div>
+                            </button>
+                          </td>
+                          <td id="{{backup.backup_name}}" class="id">
+                            <p>{{backup.backup_name}}</p>
+                          </td>
+                          <td id="{{backup.backup_location}}" class="type">
+                            <p>{{backup.backup_location}}</p>
+                          </td>
+                          <td id="{{backup.max_backups}}" class="trigger" style="overflow: scroll; max-width: 30px;">
+                            <p>{{backup.max_backups}}</p>
+                          </td>
+                          <td id="backup_edit" class="action">
+                            <button onclick="window.location.href=`/panel/backup_edit?id={{ data['server_stats']['server_id']['server_id'] }}&backup_id={{backup.id}}`" class="btn btn-info">
+                              <i class="fas fa-pencil-alt"></i>
+                            </button>
+                            <button data-backup={{ backup.id }} class="btn btn-danger del_button">
+                              <i class="fas fa-trash" aria-hidden="true"></i>
+                            </button>
+                            <button data-backup={{ backup.id }} data-toggle="tooltip" title="{{ translate('serverBackups', 'run', data['lang']) }}" class="btn btn-outline-warning test-socket">
+                              <i class="fa-solid fa-vial"></i>
+                            </button>
+                          </td>
+                        </tr>
+                        {% end %}
+                      </tbody>
+                    </table>
+                  </div>
+                  <div class="d-block d-lg-none">
+                    <table aria-label="backups list" class="table table-hover responsive-table" id="backup_table_mini" width="100%" style="table-layout:fixed;">
+                      <thead>
+                        <tr class="rounded">
+                          <th style="width: 20%; min-width: 64px;">{{ translate('serverBackups', 'enabled',
+                            data['lang']) }}</th>
+                          <th style="width: 40%; min-width: 10px;">Name
+                          </th>
+                          <th style="width: 40%; min-width: 50px;">{{ translate('serverBackups', 'edit', data['lang'])
+                            }}</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {% for backup in data['backups'] %}
+                        <tr>
+                          <td id="{{backup.enabled}}" class="enabled">
+                            <button type="button" class="btn btn-sm btn-info btn-toggle backup-custom-toggle" id="backup_{{backup.id}}" name="backup_{{backup.id}}" data-backup-id="{{backup.id}}" data-backup-enabled="{{ 'true' if backup.enabled else 'false' }}" data-toggle="button" aria-pressed="true" autocomplete="off">
+                              <div class="handle"></div>
+                            </button>
+                          </td>
+                          <td id="{{backup.backup_name}}" class="id">
+                            <p>{{backup.backup_name}}</p>
+                          </td>
+                          <td id="backup_edit" class="action">
+                            <button onclick="window.location.href=`/panel/backup_edit?id={{ data['server_stats']['server_id']['server_id'] }}&backup_id={{backup.id}}`" class="btn btn-info">
+                              <i class="fas fa-pencil-alt"></i>
+                            </button>
+                            <button data-backup={{ backup.backup_id }} class="btn btn-danger del_button">
+                              <i class="fas fa-trash" aria-hidden="true"></i>
+                            </button>
+                            <button data-backup={{ backup.backup_id }} data-toggle="tooltip" title="{{ translate('serverBackups', 'run', data['lang']) }}" class="btn btn-outline-warning test-socket">
+                              <i class="fa-solid fa-vial"></i>
+                            </button>
+                          </td>
+                        </tr>
+                        {% end %}
+                      </tbody>
+                    </table>
+                  </div>
+                  {% end %}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-6 col-sm-12">
+              <br>
+              <br>
+              {% 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 <i class="fas fa-spin fa-spinner"></i> <span
+                  id="total_files">{{data['server_stats']['world_size']}}</span></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 %}
+              <form id="backup-form" class="forms-sample">
+                <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>
+                  <input type="text" class="form-control" name="backup_path" id="backup_path"
+                    value="{{ data['backup_config']['backup_path']  }}"
+                    placeholder="{{ translate('serverBackups', 'storageLocation', data['lang']) }}">
+                  {% end %}
+                </div>
+
+                <div class="form-group">
+                  <label for="server_path">{{ translate('serverBackups', 'maxBackups', data['lang']) }} <small
+                      class="text-muted ml-1"> - {{ translate('serverBackups', 'maxBackupsDesc', data['lang'])
+                      }}</small> </label>
+                  <input type="text" class="form-control" name="max_backups" id="max_backups"
+                    value="{{ data['backup_config']['max_backups']  }}"
+                    placeholder="{{ translate('serverBackups', 'maxBackups', data['lang']) }}">
+                </div>
+                <div class="form-group">
+                  <label for="compress" class="form-check-label ml-4 mb-4"></label>
+                  {% if data['backup_config']['compress'] %}
+                  <input type="checkbox" class="form-check-input" id="compress" name="compress" checked=""
+                    value="True">{{ translate('serverBackups', 'compress', data['lang']) }}
+                  {% else %}
+                  <input type="checkbox" class="form-check-input" id="compress" name="compress" value="True">{{
+                  translate('serverBackups', 'compress', data['lang']) }}
+                  {% end %}
+                </div>
+                <div class="form-group">
+                  <label for="shutdown" class="form-check-label ml-4 mb-4"></label>
+                  {% if data['backup_config']['shutdown'] %}
+                  <input type="checkbox" class="form-check-input" id="shutdown" name="shutdown" checked=""
+                    value="True">{{ translate('serverBackups', 'shutdown', data['lang']) }}
+                  {% else %}
+                  <input type="checkbox" class="form-check-input" id="shutdown" name="shutdown" value="True">{{
+                  translate('serverBackups', 'shutdown', data['lang']) }}
+                  {% end %}
+                </div>
+                <div class="form-group">
+                  <label for="command-check" class="form-check-label ml-4 mb-4"></label>
+                  {% if data['backup_config']['before'] %}
+                  <input type="checkbox" class="form-check-input" id="before-check" name="before-check" checked>{{
+                  translate('serverBackups', 'before', data['lang']) }}
+                  <br>
+                  <input type="text" class="form-control" name="backup_before" id="backup_before"
+                    value="{{ data['backup_config']['before'] }}" placeholder="We enter the / for you"
+                    style="display: inline-block;">
+                  {% else %}
+                  <input type="checkbox" class="form-check-input" id="before-check" name="before-check">{{
+                  translate('serverBackups', 'before', data['lang']) }}
+                  <br>
+                  <input type="text" class="form-control" name="backup_before" id="backup_before" value=""
+                    placeholder="We enter the / for you." style="display: none;">
+                  {% end %}
+                </div>
+                <div class="form-group">
+                  <label for="command-check" class="form-check-label ml-4 mb-4"></label>
+                  {% if data['backup_config']['after'] %}
+                  <input type="checkbox" class="form-check-input" id="after-check" name="after-check" checked>{{
+                  translate('serverBackups', 'after', data['lang']) }}
+                  <br>
+                  <input type="text" class="form-control" name="backup_after" id="backup_after"
+                    value="{{ data['backup_config']['after'] }}" placeholder="We enter the / for you"
+                    style="display: inline-block;">
+                  {% else %}
+                  <input type="checkbox" class="form-check-input" id="after-check" name="after-check">{{
+                  translate('serverBackups', 'after', data['lang']) }}
+                  <br>
+                  <input type="text" class="form-control" name="backup_after" id="backup_after" value=""
+                    placeholder="We enter the / for you." style="display: none;">
+                  {% end %}
+                </div>
+                <div class="form-group">
+                  <label for="server">{{ translate('serverBackups', 'exclusionsTitle', data['lang']) }} <small> - {{
+                      translate('serverBackups', 'excludedChoose', data['lang']) }}</small></label>
+                  <br>
+                  <button class="btn btn-primary mr-2" id="root_files_button"
+                    data-server_path="{{ data['server_stats']['server_id']['path']}}" type="button">{{
+                    translate('serverBackups', 'clickExclude', data['lang']) }}</button>
+                </div>
+                <div class="modal fade" id="dir_select" tabindex="-1" role="dialog" aria-labelledby="dir_select"
+                  aria-hidden="true">
+                  <div class="modal-dialog" role="document">
+                    <div class="modal-content">
+                      <div class="modal-header">
+                        <h5 class="modal-title" id="exampleModalLongTitle">{{ translate('serverBackups',
+                          'excludedChoose', data['lang']) }}</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                          <span aria-hidden="true">&times;</span>
+                        </button>
+                      </div>
+                      <div class="modal-body">
+                        <div class="tree-ctx-item" id="main-tree-div" data-path=""
+                          style="overflow: scroll; max-height:75%;">
+                          <input type="checkbox" id="main-tree-input" name="root_path" value="" disabled>
+                          <span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path="">
+                            <i class="far fa-folder"></i>
+                            <i class="far fa-folder-open"></i>
+                            {{ translate('serverFiles', 'files', data['lang']) }}
+                          </span>
+                          </input>
+                        </div>
+                      </div>
+                      <div class="modal-footer">
+                        <button type="button" id="modal-cancel" class="btn btn-secondary" data-dismiss="modal"><i class="fa-solid fa-xmark"></i></button>
+                        <button type="button" id="modal-okay" data-dismiss="modal" class="btn btn-primary"><i class="fa-solid fa-thumbs-up"></i></button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <button type="submit" class="btn btn-success mr-2">{{ translate('serverBackups', 'save', data['lang'])
+                  }}</button>
+                <button type="reset" class="btn btn-light">{{ translate('serverBackups', 'cancel', data['lang'])
+                  }}</button>
+              </form>
+            </div>
+
+            <div class="col-md-6 col-sm-12">
+              <div class="text-center">
+
+                <table class="table table-responsive dataTable" id="backup_table">
+                  <h4 class="card-title">{{ translate('serverBackups', 'currentBackups', data['lang']) }}</h4>
+                  <thead>
+                    <tr>
+                      <th width="10%">{{ translate('serverBackups', 'options', data['lang']) }}</th>
+                      <th>{{ translate('serverBackups', 'path', data['lang']) }}</th>
+                      <th width="20%">{{ translate('serverBackups', 'size', data['lang']) }}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {% for backup in data['backup_list'] %}
+                    <tr>
+                      <td>
+                        <a href="/panel/download_backup?file={{ backup['path'] }}&id={{ data['server_stats']['server_id']['server_id'] }}"
+                          class="btn btn-primary">
+                          <i class="fas fa-download" aria-hidden="true"></i>
+                          {{ translate('serverBackups', 'download', data['lang']) }}
+                        </a>
+                        <br>
+                        <br>
+                        <button data-file="{{ backup['path'] }}" data-backup_path="{{ data['backup_path'] }}"
+                          class="btn btn-danger del_button">
+                          <i class="fas fa-trash" aria-hidden="true"></i>
+                          {{ translate('serverBackups', 'delete', data['lang']) }}
+                        </button>
+                        <button data-file="{{ backup['path'] }}" class="btn btn-warning restore_button">
+                          <i class="fas fa-undo-alt" aria-hidden="true"></i>
+                          {{ translate('serverBackups', 'restore', data['lang']) }}
+                        </button>
+                      </td>
+                      <td>{{ backup['path'] }}</td>
+                      <td>{{ backup['size'] }}</td>
+                    </tr>
+                    {% end %}
+
+                  </tbody>
+                </table>
+
+              </div>
+            </div>
+          </div>
+          <div class="col-md-12 col-sm-12">
+            <br>
+            <br>
+            <div class="card-header header-sm d-flex justify-content-between align-items-center">
+              <h4 class="card-title"><i class="fas fa-server"></i> {{ translate('serverBackups', 'excludedBackups',
+                data['lang']) }} <small class="text-muted ml-1"></small> </h4>
+            </div>
+            <br>
+            <ul>
+              {% for item in data['exclusions'] %}
+              <li>{{item}}</li>
+              <br>
+              {% end %}
+            </ul>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+
+</div>
+<style>
+  /* Remove default bullets */
+  .tree-view,
+  .tree-nested {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    margin-left: 10px;
+  }
+
+  /* Style the items */
+  .tree-item,
+  .files-tree-title {
+    cursor: pointer;
+    user-select: none;
+    /* Prevent text selection */
+  }
+
+  /* Create the caret/arrow with a unicode, and style it */
+  .tree-caret .fa-folder {
+    display: inline-block;
+  }
+
+  .tree-caret .fa-folder-open {
+    display: none;
+  }
+
+  /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
+  .tree-caret-down .fa-folder {
+    display: none;
+  }
+
+  .tree-caret-down .fa-folder-open {
+    display: inline-block;
+  }
+
+  /* Hide the nested list */
+  .tree-nested {
+    display: none;
+  }
+</style>
+<!-- content-wrapper ends -->
+
+{% end %}
+
+{% block js %}
+<script>
+
+  const server_id = new URLSearchParams(document.location.search).get('id')
+
+
+  //used to get cookies from browser - this is part of tornados xsrf protection - it's for extra security
+  function getCookie(name) {
+    var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
+    return r ? r[1] : undefined;
+  }
+
+  async function backup_started() {
+    const token = getCookie("_xsrf")
+    let res = await fetch(`/api/v2/servers/${server_id}/action/backup_server`, {
+        method: 'POST',
+        headers: {
+          'X-XSRFToken': token
+        }
+      });
+      let responseData = await res.json();
+      if (responseData.status === "ok") {
+        console.log(responseData);
+        $("#backup_button").html(`<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 <i class="fas fa-spin fa-spinner"></i> <span
+                    id="total_files">{{data['server_stats']['world_size']}}</span></p>`);
+      } else {
+
+        bootbox.alert({
+          title: responseData.status,
+          message: responseData.error
+        });
+      }
+    return;
+  }
+  async function del_backup(filename, id) {
+    const token = getCookie("_xsrf")
+    let contents = JSON.stringify({"filename": filename})
+    let res = await fetch(`/api/v2/servers/${id}/backups/backup/`, {
+      method: 'DELETE',
+      headers: {
+        'token': token,
+      },
+      body: contents
+    });
+    let responseData = await res.json();
+    if (responseData.status === "ok") {
+      window.location.reload();
+    }else{
+      bootbox.alert({"title": responseData.status,
+                    "message": responseData.error})
+    }
+  }
+
+  async function restore_backup(filename, id) {
+    const token = getCookie("_xsrf")
+    let contents = JSON.stringify({"filename": filename})
+    var dialog = bootbox.dialog({
+      message: "<i class='fa fa-spin fa-spinner'></i> {{ translate('serverBackups', 'restoring', data['lang']) }}",
+      closeButton: false
+    });
+    let res = await fetch(`/api/v2/servers/${id}/backups/backup/`, {
+      method: 'POST',
+      headers: {
+        'token': token,
+      },
+      body: contents
+    });
+    let responseData = await res.json();
+    if (responseData.status === "ok") {
+      window.location.href = "/panel/dashboard";
+    }else{
+      bootbox.alert({"title": responseData.status,
+                    "message": responseData.error})
+    }
+  }
+
+  $("#before-check").on("click", function () {
+    if ($("#before-check:checked").val()) {
+      $("#backup_before").css("display", "inline-block");
+    } else {
+      $("#backup_before").css("display", "none");
+      $("#backup_before").val("");
+    }
+  });
+  $("#after-check").on("click", function () {
+    if ($("#after-check:checked").val()) {
+      $("#backup_after").css("display", "inline-block");
+    } else {
+      $("#backup_after").css("display", "none");
+      $("#backup_after").val("");
+    }
+  });
+
+  function replacer(key, value) {
+    if (key != "backup_before" && key != "backup_after") {
+      if (typeof value == "boolean" || key === "executable_update_url") {
+        return value
+      } else {
+        return (isNaN(value) ? value : +value);
+      }
+    } else {
+      return value;
+    }
+  }
+
+  $(document).ready(function () {
+    $("#backup-form").on("submit", async function (e) {
+      e.preventDefault();
+      const token = getCookie("_xsrf")
+      let backupForm = document.getElementById("backup-form");
+
+      let formData = new FormData(backupForm);
+      //Remove checks that we don't need in form data.
+      formData.delete("after-check");
+      formData.delete("before-check");
+      //Create an object from the form data entries
+      let formDataObject = Object.fromEntries(formData.entries());
+      //We need to make sure these are sent regardless of whether or not they're checked
+      formDataObject.compress = $("#compress").prop('checked');
+      formDataObject.shutdown = $("#shutdown").prop('checked');
+      let excluded = [];
+      $('input.excluded:checkbox:checked').each(function () {
+        excluded.push($(this).val());
+      });
+      if ($("#root_files_button").hasClass("clicked")){
+        formDataObject.exclusions = excluded;
+      }
+      delete formDataObject.root_path
+      console.log(excluded);
+      console.log(formDataObject);
+      // Format the plain form data as JSON
+      let formDataJsonString = JSON.stringify(formDataObject, replacer);
+
+      console.log(formDataJsonString);
+
+      let res = await fetch(`/api/v2/servers/${server_id}/backups/`, {
+        method: 'PATCH',
+        headers: {
+          'X-XSRFToken': token
+        },
+        body: formDataJsonString,
+      });
+      let responseData = await res.json();
+      if (responseData.status === "ok") {
+        window.location.reload();
+      } else {
+
+        bootbox.alert({
+          title: responseData.error,
+          message: responseData.error_data
+        });
+      }
+    });
+
+    try {
+      if ($('#backup_path').val() == '') {
+        console.log('true')
+        try {
+          document.getElementById('backup_now_button').disabled = true;
+        } catch {
+
+        }
+      } else {
+        document.getElementById('backup_now_button').disabled = false;
+      }
+    } catch {
+      try {
+        document.getElementById('backup_now_button').disabled = false;
+      } catch {
+
+      }
+    }
+    console.log("ready!");
+    $("#backup_config_box").hide();
+    $("#backup_save_note").hide();
+
+    $("#show_config").click(function () {
+      $("#backup_config_box").toggle();
+      $('#backup_button').hide();
+      $('#backup_save_note').show();
+      $('#backup_data').hide();
+    });
+
+    $('#backup_table').DataTable({
+      "order": [[1, "desc"]],
+      "paging": false,
+      "lengthChange": false,
+      "searching": true,
+      "ordering": true,
+      "info": true,
+      "autoWidth": false,
+      "responsive": true,
+    });
+
+    $(".del_button").click(function () {
+      var file_to_del = $(this).data("file");
+      var backup_path = $(this).data('backup_path');
+
+      console.log("file to delete is" + file_to_del);
+
+      bootbox.confirm({
+        title: "{% raw translate('serverBackups', 'destroyBackup', data['lang']) %}",
+        message: "{{ translate('serverBackups', 'confirmDelete', data['lang']) }}",
+        buttons: {
+          cancel: {
+            label: '<i class="fas fa-times"></i> {{ translate("serverBackups", "cancel", data['lang']) }}'
+          },
+          confirm: {
+            label: '<i class="fas fa-check"></i> {{ translate("serverBackups", "confirm", data['lang']) }}'
+          }
+        },
+        callback: function (result) {
+          console.log(result);
+          if (result == true) {
+            var full_path = backup_path + '/' + file_to_del;
+            del_backup(file_to_del, server_id);
+          }
+        }
+      });
+    });
+
+    $(".restore_button").click(function () {
+      var file_to_restore = $(this).data("file");
+
+
+      bootbox.confirm({
+        title: "{{ translate('serverBackups', 'restore', data['lang']) }} " + file_to_restore,
+        message: "{{ translate('serverBackups', 'confirmRestore', data['lang']) }}",
+        buttons: {
+          cancel: {
+            label: '<i class="fas fa-times"></i> {{ translate("serverBackups", "cancel", data['lang']) }}'
+          },
+          confirm: {
+            label: '<i class="fas fa-check"></i> {{ translate("serverBackups", "restore", data['lang']) }}',
+            className: 'btn-outline-danger'
+          }
+        },
+        callback: function (result) {
+          console.log(result);
+          if (result == true) {
+            restore_backup(file_to_restore, server_id);
+          }
+        }
+      });
+    });
+    $("#backup_now_button").click(function () {
+      backup_started();
+    });
+
+  });
+
+  document.getElementById("modal-cancel").addEventListener("click", function () {
+    document.getElementById("root_files_button").classList.remove('clicked');
+    document.getElementById("main-tree-div").innerHTML = '<input type="checkbox" id="main-tree-input" name="root_path" value="" disabled><span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path=""><i class="far fa-folder"></i><i class="far fa-folder-open"></i>{{ translate("serverFiles", "files", data["lang"]) }}</span></input>'
+  })
+
+  document.getElementById("root_files_button").addEventListener("click", function () {
+    if ($("#root_files_button").data('server_path') != "") {
+      if (document.getElementById('root_files_button').classList.contains('clicked')) {
+        show_file_tree();
+        return;
+      } else {
+        document.getElementById('root_files_button').classList.add('clicked');
+      }
+      path = $("#root_files_button").data('server_path')
+      console.log($("#root_files_button").data('server_path'))
+      const token = getCookie("_xsrf");
+      var dialog = bootbox.dialog({
+        message: '<p class="text-center mb-0"><i class="fa fa-spin fa-cog"></i> Please wait while we gather your files...</p>',
+        closeButton: false
+      });
+
+      setTimeout(function () {
+        var x = document.querySelector('.bootbox');
+        if (x) {
+          x.remove()
+        }
+        var x = document.querySelector('.modal-backdrop');
+        if (x) {
+          x.remove()
+        }
+        document.getElementById('main-tree-input').setAttribute('value', path)
+        getTreeView(path);
+        show_file_tree();
+
+      }, 5000);
+    } else {
+      bootbox.alert("You must input a path before selecting this button");
+    }
+  });
+  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;
+      }
+    });
+  }
+
+  function getDirView(event){
+    let path = event.target.parentElement.getAttribute("data-path");
+    if (document.getElementById(path).classList.contains('clicked')) {
+      return;
+    }else{
+      getTreeView(path);
+    }
+
+  }
+  async function getTreeView(path){
+    console.log(path)
+    const token = getCookie("_xsrf");
+    let res = await fetch(`/api/v2/servers/${server_id}/files`, {
+        method: 'POST',
+        headers: {
+          'X-XSRFToken': token
+        },
+        body: JSON.stringify({"page": "backups", "path": path}),
+      });
+      let responseData = await res.json();
+      if (responseData.status === "ok") {
+        console.log(responseData);
+        process_tree_response(responseData);
+
+      } else {
+
+        bootbox.alert({
+          title: responseData.status,
+          message: responseData.error
+        });
+      }
+  }
+
+  function process_tree_response(response) {
+    let path = response.data.root_path.path;
+    let text = `<ul class="tree-nested d-block" id="${path}ul">`;
+      Object.entries(response.data).forEach(([key, value]) => {
+        if (key === "root_path" || key === "db_stats"){
+          //continue is not valid in for each. Return acts as a continue.
+          return;
+        }
+      let checked = ""
+      let dpath = value.path;
+      let filename = key;
+      if (value.excluded){
+        checked = "checked"
+      }
+      if (value.dir){
+        text += `<li class="tree-item" data-path="${dpath}">
+                            \n<div id="${dpath}" data-path="${dpath}" data-name="${filename}" class="tree-caret tree-ctx-item tree-folder">
+                            <input type="checkbox" class="checkBoxClass excluded" value="${dpath}" ${checked}>
+                            <span id="${dpath}span" class="files-tree-title" data-path="${dpath}" data-name="${filename}" onclick="getDirView(event)">
+                            <i style="color: var(--info);" class="far fa-folder"></i>
+                            <i style="color: var(--info);" class="far fa-folder-open"></i>
+                            <strong>${filename}</strong>
+                            </span>
+                            </input></div><li>`
+      }else{
+        text += `<li
+                        class="d-block tree-ctx-item tree-file"
+                        data-path="${dpath}"
+                        data-name="${filename}"
+                        onclick=""><input type='checkbox' class="checkBoxClass excluded" name='root_path' value="${dpath}" ${checked}><span style="margin-right: 6px;">
+                        <i class="far fa-file"></i></span></input>${filename}</li>`
+      }
+    });
+    text += `</ul>`;
+    if(response.data.root_path.top){
+      try {
+          document.getElementById('main-tree-div').innerHTML += text;
+          document.getElementById('main-tree').parentElement.classList.add("clicked");
+        } catch {
+          document.getElementById('files-tree').innerHTML = text;
+        }
+    }else{
+      try {
+            document.getElementById(path + "span").classList.add('tree-caret-down');
+            document.getElementById(path).innerHTML += text;
+            document.getElementById(path).classList.add("clicked");
+          } catch {
+            console.log("Bad")
+          }
+
+          var toggler = document.getElementById(path + "span");
+
+          if (toggler.classList.contains('files-tree-title')) {
+            document.getElementById(path + "span").addEventListener("click", function caretListener() {
+              document.getElementById(path + "ul").classList.toggle("d-block");
+              document.getElementById(path + "span").classList.toggle("tree-caret-down");
+            });
+          }
+    }
+  }
+
+  function getToggleMain(event) {
+    path = event.target.parentElement.getAttribute('data-path');
+    document.getElementById("files-tree").classList.toggle("d-block");
+    document.getElementById(path + "span").classList.toggle("tree-caret-down");
+    document.getElementById(path + "span").classList.toggle("tree-caret");
+  }
+  function show_file_tree() {
+    $("#dir_select").modal();
+  }
+
+</script>
+
+{% end %}
\ No newline at end of file