Closed #8: Creating folders

- added a button for creating a new folder
- buttons are organized in a column on mobile screens

README.md

@@ -139,7 +139,7 @@ I've created this project mostly for myself. So it's better to state right away
 
 Also note, that since I use Mozilla Firefox as my main web-browser, that's where I did all the testing, and I've spent very little to none effort on maintaining cross-browser-ability.
 
-If you discover any issues/bugs, report them [here](https://github.com/retifrav/rclone-rc-web-gui/issues), but I have to apologize in advance for the possible delays, as I have very little free time outside my working hours.
+If you discover any issues/bugs, report them [here](https://github.com/retifrav/rclone-rc-web-gui/issues).
 
 ## 3rd-party attributions
 

css/gui-mobile.css

@@ -1,4 +1,4 @@
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 700px) {
     h1 { font-size: 1.5em; }
     h2 { font-size: 1.3em; }
     h3 { font-size: 1.15em; }
@@ -14,4 +14,16 @@
         width: 1em;
         height: 1em;
     }
+
+    .controls,
+    .lastButtons {
+        flex-direction: column;
+        margin: -2px;
+    }
+    .controls > * {
+        margin: 2px;
+    }
+    .lastButtons > * {
+        margin: 2px 0;
+    }
 }

css/gui.css

@@ -221,10 +221,19 @@ pre {
     }
 }
 
-.controls {
+.controls,
+.create-folder {
     display: flex;
 }
-.lastButton {
+.create-folder {
+    display: none;
+}
+.create-folder > input {
+    flex-grow: 1;
+    margin: 1px;
+}
+.lastButtons {
+    display: flex;
     margin-left: auto;
 }
 

index.html

@@ -48,10 +48,18 @@ <h2>Files</h2>
                     <button type="button" onclick="copyClicked(this, 'leftPanelFiles');">Copy</button>
                     <button type="button" onclick="moveClicked(this, 'leftPanelFiles');">Move</button>
                     <button type="button" onclick="deleteClicked(this, 'leftPanelFiles');">Delete</button>
-                    <button type="button" onclick="refreshClicked('leftPanelFiles');"
-                        class="lastButton">
-                        Refresh
-                    </button>
+                    <div class="lastButtons">
+                        <button type="button" onclick="showCreateFolder(this);">
+                            Create&nbsp;folder</button>
+                        <button type="button" onclick="refreshClicked('leftPanelFiles');">
+                            Refresh
+                        </button>
+                    </div>
+                </div>
+                <div class="create-folder">
+                    <input type="text" placeholder="Folder name" />
+                    <button type="button" onclick="createFolderClicked(this, 'leftPanelFiles');">Create</button>
+                    <button type="button" onclick="hideCreateFolder(this);">Cancel</button>
                 </div>
                 <div class="filesPanel">
                     <div class="filesPanelHeader">
@@ -75,10 +83,18 @@ <h2>Files</h2>
                     <button type="button" onclick="copyClicked(this, 'rightPanelFiles');">Copy</button>
                     <button type="button" onclick="moveClicked(this, 'rightPanelFiles');">Move</button>
                     <button type="button" onclick="deleteClicked(this, 'rightPanelFiles');">Delete</button>
-                    <button type="button" onclick="refreshClicked('rightPanelFiles');"
-                        class="lastButton">
-                        Refresh
-                    </button>
+                    <div class="lastButtons">
+                        <button type="button" onclick="showCreateFolder(this);">
+                            Create&nbsp;folder</button>
+                        <button type="button" onclick="refreshClicked('rightPanelFiles');">
+                            Refresh
+                        </button>
+                    </div>
+                </div>
+                <div class="create-folder">
+                    <input type="text" placeholder="Folder name" />
+                    <button type="button" onclick="createFolderClicked(this, 'rightPanelFiles');">Create</button>
+                    <button type="button" onclick="hideCreateFolder(this);">Cancel</button>
                 </div>
                 <div class="filesPanel">
                     <div class="filesPanelHeader">

js/main.js

@@ -556,3 +556,62 @@ function deleteOperation(operationType, dataType, sourcePath, targetPath, filesP
         //openPath(panelsPaths[filesPanelID], filesPanelID);
     });
 }
+
+function showCreateFolder(btn)
+{
+    let panelDiv = btn.parentNode.parentNode.parentNode;
+    panelDiv.querySelector(".controls").style.display = "none";
+    panelDiv.querySelector(".create-folder").style.display = "flex";
+}
+
+function hideCreateFolder(btn)
+{
+    let panelDiv = btn.parentNode.parentNode;
+    panelDiv.querySelector(".create-folder").style.display = "none";
+    panelDiv.querySelector(".controls").style.display = "flex";
+}
+
+function createFolderClicked(btn, filesPanelID)
+{
+    let currentPath = panelsPaths[filesPanelID];
+    if (currentPath !== "")
+    {
+        let folderName = btn.parentNode.querySelector("input").value.trim();
+        if (!folderName)
+        {
+            alert("A folder has no name.");
+            return;
+        }
+
+        btn.style.display = "none";
+
+        let lastSlash = currentPath.lastIndexOf("/") + 1;
+        let basePath = lastSlash !== 0 ? currentPath.substring(0, lastSlash) : currentPath.concat("/");
+        let targetPath = currentPath.substring(lastSlash, currentPath.length).concat("/", folderName);
+        console.debug(currentPath, basePath, targetPath);
+
+        let params = {
+            "fs": currentPath,
+            "remote": folderName
+        };
+        sendRequestToRclone("/operations/mkdir", params, function(rez)
+        {
+            btn.style.display = "block";
+            if (rez === null)
+            {
+                console.error("Request returned a null value, looks like there is something wrong with the request");
+                return;
+            }
+            else
+            {
+                hideCreateFolder(btn);
+                refreshClicked(filesPanelID);
+            }
+        });
+    }
+    else
+    {
+        alert("Cannot create a folder in nowhere. Choose a remote first.");
+        return;
+    }
+}

js/settings.js

@@ -1,4 +1,4 @@
-var guiVersion = "0.1.1";
+var guiVersion = "0.1.2";
 
 var rcloneHost = "http://127.0.0.1";
 var rclonePort = "5572";