Remove files from ajax

app/classes/shared/helpers.py

@@ -1092,87 +1092,6 @@ class Helpers:
 
         return data
 
-    def generate_tree(self, folder, output=""):
-        dir_list = []
-        unsorted_files = []
-        file_list = os.listdir(folder)
-        for item in file_list:
-            if os.path.isdir(os.path.join(folder, item)):
-                dir_list.append(item)
-            elif str(item) != self.ignored_names:
-                unsorted_files.append(item)
-        file_list = sorted(dir_list, key=str.casefold) + sorted(
-            unsorted_files, key=str.casefold
-        )
-        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):
-                if filename not in self.ignored_names:
-                    output += f"""<li id="{dpath}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">
-                        <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>
-                        {filename}
-                        </span>
-                        </div><li>
-                        \n"""
-            else:
-                if filename not in self.ignored_names:
-                    output += f"""<li id="{dpath}li"
-                    class="d-block tree-ctx-item tree-file tree-item"
-                    data-path="{dpath}"
-                    data-name="{filename}"
-                    onclick="clickOnFile(event)"><span style="margin-right: 6px;">
-                    <i class="far fa-file"></i></span>{filename}</li>"""
-        return output
-
-    def generate_dir(self, folder, output=""):
-        dir_list = []
-        unsorted_files = []
-        file_list = os.listdir(folder)
-        for item in file_list:
-            if os.path.isdir(os.path.join(folder, item)):
-                dir_list.append(item)
-            elif str(item) != self.ignored_names:
-                unsorted_files.append(item)
-        file_list = sorted(dir_list, key=str.casefold) + sorted(
-            unsorted_files, 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)
-            dpath = os.path.join(folder, filename)
-            rel = os.path.join(folder, raw_filename)
-            if os.path.isdir(rel):
-                if filename not in self.ignored_names:
-                    output += f"""<li id="{dpath}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">
-                        <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>
-                        {filename}
-                        </span>
-                        </div><li>"""
-            else:
-                if filename not in self.ignored_names:
-                    output += f"""<li id="{dpath}li"
-                    class="d-block tree-ctx-item tree-file tree-item"
-                    data-path="{dpath}"
-                    data-name="{filename}"
-                    onclick="clickOnFile(event)"><span style="margin-right: 6px;">
-                    <i class="far fa-file"></i></span>{filename}</li>"""
-        output += "</ul>\n"
-        return output
-
     @staticmethod
     def generate_zip_tree(folder, output=""):
         file_list = os.listdir(folder)

app/classes/web/ajax_handler.py

@@ -108,24 +108,6 @@ class AjaxHandler(BaseHandler):
             )
             self.finish()
 
-        elif page == "get_dir":
-            server_id = self.get_argument("id", None)
-            path = self.get_argument("path", None)
-
-            if not self.check_server_id(server_id, "get_tree"):
-                return
-            server_id = bleach.clean(server_id)
-
-            if Helpers.validate_traversal(
-                self.controller.servers.get_server_data_by_id(server_id)["path"], path
-            ):
-                self.write(
-                    Helpers.get_os_understandable_path(path)
-                    + "\n"
-                    + Helpers.generate_dir(path)
-                )
-            self.finish()
-
     @tornado.web.authenticated
     def post(self, page):
         api_key, _, exec_user = self.current_user

app/frontend/templates/panel/server_files.html

@@ -882,67 +882,85 @@
     });
   }
 
-  function getTreeView(event) {
+  function getDirView(event){
-    const path = $('#root_dir').data('path');;
+    let path = event.target.parentElement.getAttribute("data-path");
+    if (document.getElementById(path).classList.contains('clicked')) {
+      return;
+    }else{
+      getTreeView(path);
+    }
 
-    $.ajax({
+  }
-      type: "GET",
+  async function getTreeView(path){
-      url: "/files/get_tree?id=" + serverId + "&path=" + path,
+    var token = getCookie("_xsrf");
-      dataType: 'text',
+    let res = await fetch(`/api/v2/servers/${serverId}/files`, {
-      success: function (data) {
+        method: 'POST',
-        console.log("got response:");
+        headers: {
+          'X-XSRFToken': token
+        },
+        body: JSON.stringify({"page": "files", "folder": path}),
+      });
+      let responseData = await res.json();
+      if (responseData.status === "ok") {
+        console.log(responseData);
+        process_tree_response(responseData);
 
-        dataArr = data.split('\n');
+      } else {
-        serverDir = dataArr.shift(); // Remove & return first element (server directory)
-        text = dataArr.join('\n');
 
+        bootbox.alert({
+          title: responseData.status,
+          message: responseData.error
+        });
+      }
+  }
+
+  function process_tree_response(response) {
+    let path = response.data.root_path.path;
+    let text = ``;
+    if (!response.data.root_path.top){
+      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.dir){
+        if (value.excluded){
+          checked = "checked"
+        }
+        text += `<li class="tree-item" id="${dpath}li" 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 d-none file-check" name="root_path" 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>
+                            ${filename}
+                            </span>
+                            </input></div></li>`
+      }else{
+        text += `<li
+                        class="d-block tree-ctx-item tree-file"
+                        data-path="${dpath}"
+                        data-name="${filename}"
+                        onclick="clickOnFile(event)" id="${dpath}li"><input type='checkbox' class="checkBoxClass d-none file-check" name='root_path' value="${dpath}" ${checked}><span style="margin-right: 6px;">
+                        <i class="far fa-file"></i></span></input>${filename}</li>`
+      }
+    });
+    if (! response.data.root_path.top){
+      text += `</ul>`;
+    }
+    if(response.data.root_path.top){
       try {
-          document.getElementById(path).innerHTML += text;
+          document.getElementById('main-tree-div').innerHTML += text;
-          event.target.parentElement.classList.add("clicked");
+          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');
-
-        setTimeout(function () { setTreeViewContext() }, 1000);
-      },
-    });
-  }
-
-  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) {
-    let 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: "/files/get_dir?id=" + serverId + "&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;
@@ -951,9 +969,7 @@
             console.log("Bad")
           }
 
-          setTimeout(function () { setTreeViewContext() }, 1000);
+          var toggler = document.getElementById(path + "span");
-
-          var toggler = document.getElementById(path);
 
           if (toggler.classList.contains('files-tree-title')) {
             document.getElementById(path + "span").addEventListener("click", function caretListener() {
@@ -961,9 +977,14 @@
               document.getElementById(path + "span").classList.toggle("tree-caret-down");
             });
           }
-        },
-      });
     }
+    setTimeout(function () { setTreeViewContext() }, 1000);
+  }
+  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 setTreeViewContext() {
@@ -1172,7 +1193,7 @@
     });
   }
 
-  getTreeView();
+  getTreeView($('#root_dir').data('path'));
   setTreeViewContext();
 
   function setKeyboard(target) {