From e7d78cadd405f633975c0065fa41d941bda20e8b Mon Sep 17 00:00:00 2001
From: Andrew <mcdeweykp@gmail.com>
Date: Sun, 27 Feb 2022 16:15:40 -0500
Subject: [PATCH] Initial frontend for backup omissions

---
 app/classes/shared/helpers.py                 |  57 +++++
 app/classes/web/ajax_handler.py               |  21 ++
 .../templates/panel/server_backup.html        | 207 ++++++++++++++++++
 .../templates/server/bedrock_wizard.html      |  20 +-
 app/frontend/templates/server/wizard.html     |  20 +-
 5 files changed, 313 insertions(+), 12 deletions(-)

diff --git a/app/classes/shared/helpers.py b/app/classes/shared/helpers.py
index a4566df5..72a583a7 100644
--- a/app/classes/shared/helpers.py
+++ b/app/classes/shared/helpers.py
@@ -737,6 +737,57 @@ class Helpers:
 
         return output
 
+    @staticmethod
+    def generate_backup_tree(folder, output=""):
+        file_list = os.listdir(folder)
+        file_list = sorted(file_list, key=str.casefold)
+        output += \
+    f"""<ul class="tree-nested d-block" id="{folder}ul">"""\
+
+        for raw_filename in file_list:
+            filename = html.escape(raw_filename)
+            rel = os.path.join(folder, raw_filename)
+            dpath = os.path.join(folder, filename)
+            if os.path.isdir(rel):
+                output += \
+                    f"""<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" name="root_path" value="{dpath}">
+                    <span id="{dpath}span" class="files-tree-title" data-path="{dpath}" data-name="{filename}" onclick="getDirView(event)">
+                      <i class="far fa-folder"></i>
+                      <i class="far fa-folder-open"></i>
+                      {filename}
+                      </span>
+                    </input></div><li>
+                    \n"""\
+
+        return output
+
+    @staticmethod
+    def generate_backup_dir(folder, output=""):
+        file_list = os.listdir(folder)
+        file_list = sorted(file_list, key=str.casefold)
+        output += \
+    f"""<ul class="tree-nested d-block" id="{folder}ul">"""\
+
+        for raw_filename in file_list:
+            filename = html.escape(raw_filename)
+            rel = os.path.join(folder, raw_filename)
+            dpath = os.path.join(folder, filename)
+            if os.path.isdir(rel):
+                output += \
+                    f"""<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" name="root_path" value="{dpath}">
+                    <span id="{dpath}span" class="files-tree-title" data-path="{dpath}" data-name="{filename}" onclick="getDirView(event)">
+                      <i class="far fa-folder"></i>
+                      <i class="far fa-folder-open"></i>
+                      {filename}
+                      </span>
+                    </input></div><li>"""\
+
+        return output
+
     @staticmethod
     def generate_zip_dir(folder, output=""):
         file_list = os.listdir(folder)
@@ -773,6 +824,12 @@ class Helpers:
                 websocket_helper.broadcast_user(user_id, 'send_temp_path',{
                 'path': tempDir
                 })
+    @staticmethod
+    def backup_select(path, user_id):
+        if user_id:
+            websocket_helper.broadcast_user(user_id, 'send_temp_path',{
+            'path': path
+        })
 
     @staticmethod
     def unzip_backup_archive(backup_path, zip_name):
diff --git a/app/classes/web/ajax_handler.py b/app/classes/web/ajax_handler.py
index 5d739c9a..72f6ca08 100644
--- a/app/classes/web/ajax_handler.py
+++ b/app/classes/web/ajax_handler.py
@@ -146,6 +146,22 @@ class AjaxHandler(BaseHandler):
                         helper.generate_zip_dir(path))
             self.finish()
 
+        elif page == "get_backup_tree":
+            server_id = self.get_argument('id', None)
+            path = self.get_argument('path', None)
+
+            self.write(helper.get_os_understandable_path(path) + '\n' +
+                        helper.generate_backup_tree(path, server_id))
+            self.finish()
+
+        elif page == "get_backup_dir":
+            server_id = self.get_argument('id', None)
+            path = self.get_argument('path', None)
+
+            self.write(helper.get_os_understandable_path(path) + '\n' +
+                        helper.generate_backup_dir(path, server_id))
+            self.finish()
+
         elif page == "get_dir":
             server_id = self.get_argument('id', None)
             path = self.get_argument('path', None)
@@ -318,6 +334,11 @@ class AjaxHandler(BaseHandler):
             helper.unzipServer(path, exec_user['user_id'])
             return
 
+        elif page == "backup_select":
+            path = self.get_argument('path', None)
+            helper.backup_select(path, exec_user['user_id'])
+            return
+
 
     @tornado.web.authenticated
     def delete(self, page):
diff --git a/app/frontend/templates/panel/server_backup.html b/app/frontend/templates/panel/server_backup.html
index e71522c2..df305d3d 100644
--- a/app/frontend/templates/panel/server_backup.html
+++ b/app/frontend/templates/panel/server_backup.html
@@ -55,6 +55,46 @@
                         <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="col-sm-12">
+                        <div class="form-group">
+                          <label for="server">{{ translate('serverWizard', 'selectRoot', data['lang']) }} <small>{{ translate('serverWizard', 'explainRoot', 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('serverWizard', 'clickRoot', data['lang']) }}</button>
+                        </div>
+                      </div>
+                      <div class="col-sm-12" style="visibility: hidden;">
+                        <div class="form-group">
+                          <input type="text" class="form-control" id="zip_root_path" name="zip_root_path">
+                        </div>
+                      </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('serverWizard', 'selectZipDir', 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" class="btn btn-secondary" data-dismiss="modal">{{ translate('serverWizard', 'close', data['lang']) }}</button>
+                              <button type="button" id="modal-okay" data-dismiss="modal" class="btn btn-primary">{{ translate('serverWizard', 'save', data['lang']) }}</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>
@@ -116,6 +156,44 @@
 
 
 </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 %}
@@ -123,6 +201,7 @@
 {% 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) {
@@ -258,6 +337,134 @@
   });
 
 
+  document.getElementById("root_files_button").addEventListener("click", function(){
+    if($("#root_files_button").data('server_path') != ""){
+      if(document.getElementById('root_files_button').classList.contains('clicked')){
+        document.getElementById('main-tree-div').innerHTML = '<input type="radio" id="main-tree-input" name="root_path" value="" checked><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>'
+      }else{
+        document.getElementById('root_files_button').classList.add('clicked')
+      }
+    path = $("#root_files_button").data('server_path')
+    console.log($("#root_files_button").data('server_path'))
+    var 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
+  });
+
+    $.ajax({
+      type: "POST",
+      headers: {'X-XSRFToken': token},
+      url: '/ajax/backup_select?id='+server_id+'&path='+path,
+    });
+  }else{
+    bootbox.alert("You must input a path before selecting this button");
+  }
+  });
+  if (webSocket) {
+    webSocket.on('send_temp_path', function (data) {
+      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', data.path)
+        getTreeView(data.path);
+        show_file_tree();
+
+    }, 5000);
+    });
+  }
+
+  function getTreeView(path) {
+    path = path
+
+    $.ajax({
+      type: "GET",
+      url: '/ajax/get_backup_tree?id='+server_id+'&path='+path,
+      dataType: 'text',
+      success: function(data){
+        console.log("got response:");
+        console.log(data);
+
+        dataArr = data.split('\n');
+        serverDir = dataArr.shift(); // Remove & return first element (server directory)
+        text = dataArr.join('\n');
+
+        try{
+          document.getElementById('main-tree-div').innerHTML += text;
+          document.getElementById('main-tree').parentElement.classList.add("clicked");
+        }catch{
+          document.getElementById('files-tree').innerHTML = text;
+        }
+        
+
+        document.getElementsByClassName('files-tree-title')[0].setAttribute('data-path', serverDir);
+        document.getElementsByClassName('files-tree-title')[0].setAttribute('data-name', 'Files');
+
+      },
+    });
+  }
+  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 getDirView(event) {
+      path = event.target.parentElement.getAttribute('data-path');
+
+      if (document.getElementById(path).classList.contains('clicked')){
+
+      var toggler = document.getElementById(path+"span");
+
+      if (toggler.classList.contains('files-tree-title')){
+          document.getElementById(path+"ul").classList.toggle("d-block");
+          document.getElementById(path+"span").classList.toggle("tree-caret-down");
+      }
+      return;
+    }else{
+    $.ajax({
+      type: "GET",
+      url: '/ajax/get_backup_dir?id='+server_id+'&path='+path,
+      dataType: 'text',
+      success: function(data){
+        console.log("got response:");
+
+        dataArr = data.split('\n');
+        serverDir = dataArr.shift(); // Remove & return first element (server directory)
+        text = dataArr.join('\n');
+
+        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);
+
+          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 show_file_tree(){
+    $("#dir_select").modal();
+  }
+
 </script>
 
 {% end %}
\ No newline at end of file
diff --git a/app/frontend/templates/server/bedrock_wizard.html b/app/frontend/templates/server/bedrock_wizard.html
index 731032b5..e700b1a1 100644
--- a/app/frontend/templates/server/bedrock_wizard.html
+++ b/app/frontend/templates/server/bedrock_wizard.html
@@ -310,9 +310,6 @@
       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(){
-    dialog.modal('hide');
-}, 5000);
     $.ajax({
       type: "POST",
       headers: {'X-XSRFToken': token},
@@ -433,9 +430,20 @@ function hide(event) {
     }
     if (webSocket) {
       webSocket.on('send_temp_path', function (data) {
-        document.getElementById('main-tree-input').setAttribute('value', data.path)
-        getTreeView(data.path);
-        show_file_tree();
+        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', data.path)
+          getTreeView(data.path);
+          show_file_tree();
+  
+      }, 5000);
       });
     }
 
diff --git a/app/frontend/templates/server/wizard.html b/app/frontend/templates/server/wizard.html
index a36fe068..b159fc57 100644
--- a/app/frontend/templates/server/wizard.html
+++ b/app/frontend/templates/server/wizard.html
@@ -437,9 +437,6 @@
       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(){
-    dialog.modal('hide');
-}, 5000);
     $.ajax({
       type: "POST",
       headers: {'X-XSRFToken': token},
@@ -587,9 +584,20 @@ function hide(event) {
     }
     if (webSocket) {
       webSocket.on('send_temp_path', function (data) {
-        document.getElementById('main-tree-input').setAttribute('value', data.path)
-        getTreeView(data.path);
-        show_file_tree();
+        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', data.path)
+          getTreeView(data.path);
+          show_file_tree();
+  
+      }, 5000);
       });
     }