path selector

3 files changed, 45 insertions, 15 deletions

diff --git a/css/style.css b/css/style.css
index 24fa86f..39a545c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -295,7 +295,7 @@ input[type=submit]:hover {
 
 .filesystem > h2 button {
     border: none;
-    padding: 0.3rem 0.7rem;
+    padding: 0.3rem 1.1rem;
     background: inherit;
     border-radius: 0;
 }
diff --git a/loggedin.js b/loggedin.js
index d4f56ae..1affb09 100644
--- a/loggedin.js
+++ b/loggedin.js
@@ -4,13 +4,12 @@ const upload_form    = document.getElementById("upload_form");
 const the_file       = document.getElementById("the_file");
 const filename_input = document.getElementById("filename");
 const upload_btn     = document.getElementById("upload_btn");
+const the_path       = document.getElementById("the_path");
 const current_directory = document.getElementById("current_directory");
 
 the_file.onchange = on_file_added;
 
-
-const pwd = "/";
-
+var pwd = [];
 const pending_uploads = [];
 
 class FileView {
@@ -48,8 +47,7 @@ function on_file_added(_e) {
         }).then((resp) => {
             if (resp.status == 200) {
                 done_upload(fileview);
-            }
-            else {
+            } else {
                 alert("Upload failed");
             }
         }, () => {
@@ -67,12 +65,40 @@ function done_upload(fileview) {
     var index = pending_uploads.indexOf(fileview);
     if (index >= 0)
         pending_uploads.splice(index, 1);
-    load_dir(pwd);
+
+    load_dir();
 }
 
-function load_dir(pwd) {
+function load_dir() {
     var data = new FormData();
-    data.append('path', '/');
+
+    var path = "/";
+    for (const d of pwd)
+        path += d + "/";
+
+    while (the_path.children.length > 1)
+        the_path.removeChild(the_path.lastChild);
+
+    for (let i = 0; i < pwd.length; i++) {
+        var d = pwd[i];
+
+        var separator_div = document.createElement('div');
+        separator_div.classList.add('separator');
+        the_path.appendChild(separator_div);
+        separator_div.innerText = "»";
+
+        var entry = document.createElement('button');
+        entry.classList.add('pathentry');
+        entry.innerText = d;
+        the_path.appendChild(entry);
+
+        entry.onclick = () => {
+            pwd.length = i + 1;
+            load_dir();
+        }
+    }
+
+    data.append('path', path);
 
     var xhr = new XMLHttpRequest();
     xhr.open('POST', '/php/readdir.php', true);
@@ -97,6 +123,10 @@ function add_file_visuals(name, is_directory, mimetype) {
 
     if (is_directory) {
         img.src="/mimeicons/directory.png";
+        fileDiv.onclick = () => {
+            pwd.push(name);
+            load_dir();
+        }
     }
     else {
         img.src=`/mimeicons/${mimetype.replace("/", "-")}.png`;
@@ -123,4 +153,4 @@ function begin_upload() {
     the_file.click();
 }
 
-load_dir("/");
+load_dir();
diff --git a/loggedin.php b/loggedin.php
index 0c95750..34b8997 100644
--- a/loggedin.php
+++ b/loggedin.php
@@ -3,11 +3,11 @@
         <h2 style="display: flex; gap: 0rem;">
             <button id="upload_btn" onclick="begin_upload()">Upload</button>
             <div class="separator"></div>
-            <div class="path">
-                <!-- <a class="pathentry" href="#"> <?php echo $_SESSION['username'] ?>'s files/</a><a class="pathentry" href="#">foo/</a><a class="pathentry" href="#">bar</a> -->
-                <button class="pathentry">Haha's files</button>
-                <div class="separator">»</div>
-                <button class="pathentry">Haha's files</button>
+            <button id="upload_btn" onclick="begin_upload()">New Folder</button>
+            <div class="separator"></div>
+            <div class="path" id="the_path">
+                <!-- <a class="pathentry" href="#"> /</a><a class="pathentry" href="#">foo/</a><a class="pathentry" href="#">bar</a> -->
+                <button class="pathentry" onclick="pwd.length = 0; load_dir();"><?php echo $_SESSION['username'] ?>'s files</button>
             </div>
         </h2>