feat: add empty state placeholder to page(#30)

* added "Empty folder" text to the page

* added text for nonexistent directory and no search results

assets/index.css

@@ -97,6 +97,11 @@ body {
   padding: 0 1em;
 }
 
+.empty-folder {
+  display: block;
+  padding-top: 1rem;
+}
+
 .uploaders-table th,
 .paths-table th {
   text-align: left;
@@ -208,4 +213,4 @@ body {
   .path a {
     color: #3191ff;
   }
-} 
+} 

assets/index.js

@@ -7,6 +7,12 @@
  * @property {number} size
  */
 
+// https://stackoverflow.com/a/901144/3642588
+const params = new Proxy(new URLSearchParams(window.location.search), {
+  get: (searchParams, prop) => searchParams.get(prop),
+});
+
+const dirEmptyNote = params.q ? 'No results' : DATA.dir_exists ? 'Empty folder' : 'Folder will be created when a file is uploaded';
 
 /**
  * @type Element
@@ -54,6 +60,7 @@ class Uploader {
   </tr>`);
     $uploadersTable.classList.remove("hidden");
     this.$uploadStatus = document.getElementById(`uploadStatus${idx}`);
+    document.querySelector('.main i.empty-folder').remove();
 
     const ajax = new XMLHttpRequest();
     ajax.upload.addEventListener("progress", e => this.progress(e), false);
@@ -180,6 +187,8 @@ async function deletePath(index) {
         DATA.paths[index] = null;
         if (!DATA.paths.find(v => !!v)) {
           $pathsTable.classList.add("hidden");
+          document.querySelector('.main').insertAdjacentHTML("afterbegin", '<i class="empty-folder"></i>');
+          document.querySelector('.main .empty-folder').textContent = dirEmptyNote;
         }
     } else {
       throw new Error(await res.text())
@@ -275,6 +284,10 @@ function ready() {
   $pathsTableBody = document.querySelector(".paths-table tbody");
   $uploadersTable = document.querySelector(".uploaders-table");
 
+  if (params.q) {
+    document.getElementById('search').value = params.q;
+  }
+
   addBreadcrumb(DATA.breadcrumb);
   if (Array.isArray(DATA.paths)) {
     const len = DATA.paths.length;
@@ -284,6 +297,10 @@ function ready() {
     for (let i = 0; i < len; i++) {
       addPath(DATA.paths[i], i);
     }
+    if (len == 0) {
+      document.querySelector('.main').insertAdjacentHTML("afterbegin", '<i class="empty-folder"></i>');
+      document.querySelector('.main .empty-folder').textContent = dirEmptyNote;
+    }
   }
   if (DATA.allow_upload) {
     dropzone();

src/server.rs

@@ -325,7 +325,7 @@ impl InnerService {
                 }
             }
         };
-        self.send_index(path, paths, res)
+        self.send_index(path, paths, res, exist)
     }
 
     async fn handle_query_dir(
@@ -354,7 +354,7 @@ impl InnerService {
                 }
             }
         }
-        self.send_index(path, paths, res)
+        self.send_index(path, paths, res, true)
     }
 
     async fn handle_zip_dir(&self, path: &Path, res: &mut Response) -> BoxResult<()> {
@@ -645,6 +645,7 @@ impl InnerService {
         path: &Path,
         mut paths: Vec<PathItem>,
         res: &mut Response,
+        exist: bool,
     ) -> BoxResult<()> {
         paths.sort_unstable();
         let rel_path = match self.args.path.parent() {
@@ -656,6 +657,7 @@ impl InnerService {
             paths,
             allow_upload: self.args.allow_upload,
             allow_delete: self.args.allow_delete,
+            dir_exists: exist,
         };
         let data = serde_json::to_string(&data).unwrap();
         let output = INDEX_HTML.replace(
@@ -802,6 +804,7 @@ struct IndexData {
     paths: Vec<PathItem>,
     allow_upload: bool,
     allow_delete: bool,
+    dir_exists: bool,
 }
 
 #[derive(Debug, Serialize, Eq, PartialEq, Ord, PartialOrd)]