src/core/static/js/post-ajax.js

@@ -5,10 +5,8 @@ const postAjaxController = (data, action) => {
         return ;
     }
 
-    console.log(data);
     if (data.hasOwnProperty('path_head'))
-        console.log();
+        updateHTMLDirList(data);
-        // updateHTMLDirList(data);
     if (data.hasOwnProperty('faves_list'))
         // generateFavesList(data.faves_list);
         console.log("faves stub...");
@@ -47,39 +45,26 @@ const generateFavesList = (data) => {
 
 
 const updateHTMLDirList = async (data) => {
-    var dirTemplate = document.querySelector('#dirTemplate');
+    console.log(data);
-    var vidTemplate = document.querySelector('#vidTemplate');
-    var imgTemplate = document.querySelector('#imgTemplate');
-    var filTemplate = document.querySelector('#filTemplate');
-    let insertArea  = document.getElementById('file-grid');
     let pathElm     = document.getElementById("path");
-    let thumbnail   = formatURL("static/imgs/icons/folder.png");
+    let dirs        = (data.list.dirs)  ? data.list.dirs[0]  : [];
-    let pathParts     = data.path_head.split("/");
+    let videos      = (data.list.vids)  ? data.list.vids[0]  : [];
-    let dirPath     = pathParts[pathParts.length - 1] + "/";
+    let images      = (data.list.images)  ? data.list.images[0]  : [];
-
+    let files       = (data.list.ungrouped) ? data.list.ungrouped[0] : [];
-    let title       = "";
-    let hash        = "";
-
-    // Can still set the path info if locked...
-    pathElm.innerText = dirPath;
-    // If locked return and create password field....
-
-    let dirs        = (data.list.dirs)  ? data.list.dirs  : [];
-    let videos      = (data.list.vids)  ? data.list.vids  : [];
-    let images      = (data.list.imgs)  ? data.list.imgs  : [];
-    let files       = (data.list.files) ? data.list.files : [];
     let isInFaves   = data.in_fave;
-    let background_image = images[0] ? images[0][0] : "";
-    let i           = 0;
-    let size        = 0;
 
+    console.log(data.list.images);
+    let background_image = (images[0]) ? images[0][0] : "";
+    console.log(background_image);
+
+    pathElm.innerText = data.path_head; // Can still set the path info if locked...
     // Setup background if there is a 000.* in selection
     if (background_image.match(/000\.(jpg|png|gif)\b/) != null) {
         // Due to same hash for 000 we add date to make link unique for each run to bypass cache issues...
-        background_image = formatURL("files/" + images[i][1] + '?d=' + Date.now());
+        background_image = "api/file-manager-action/files/" + images[0][1] + '?d=' + Date.now();
         updateBackground(background_image, false);
     } else {
-        background_image = formatURL("static/imgs/backgrounds/particles.mp4");
+        background_image = "static/imgs/backgrounds/particles.mp4";
         updateBackground(background_image);
     }
 
@@ -90,89 +75,92 @@ const updateHTMLDirList = async (data) => {
     else
         elm.classList.remove("btn-info");
 
-    clearChildNodes(insertArea);
-    // Insert dirs
-    let dirClone  = document.importNode(dirTemplate.content, true);
-    let dir       = null;
-    size          = dirs.length;
-    for (; i < size; i++) {
-        const clone = dirClone.cloneNode(true);
-        title = dirs[i][0];
-        hash  = dirs[i][1];
-        createElmBlock(insertArea, clone, thumbnail, title, hash);
-    }
 
-    // Insert videos
+    renderFilesList(data.list);
-    let vidClone  = document.importNode(vidTemplate.content, true);
-    size          = videos.length;
-    for (i = 0; i < size; i++) {
-        const clone = vidClone.cloneNode(true);
-        title       = videos[i][0];
-        thumbnail   = formatURL(videos[i][1]);
-        hash        = videos[i][2];
-        createElmBlock(insertArea, clone, thumbnail, title, hash, true);
-    }
 
-    // Insert images
+//     clearChildNodes(insertArea);
-    let imgClone  = document.importNode(imgTemplate.content, true);
+//     // Insert dirs
-    thumbnail     = "";
+//     let dirClone  = document.importNode(dirTemplate.content, true);
-    size          = images.length;
+//     let dir       = null;
-    for (i = 0; i < size; i++) {
+//     size          = dirs.length;
-        title     = images[i][0];
+//     for (; i < size; i++) {
-        thumbnail = formatURL("files/" + images[i][1]);
+//         const clone = dirClone.cloneNode(true);
-        hash      = images[i][1];
+//         title = dirs[i][0];
-
+//         hash  = dirs[i][1];
-        if (thumbnail.match(/000\.(jpg|png|gif)\b/) == null &&
+//         createElmBlock(insertArea, clone, thumbnail, title, hash);
-            !thumbnail.includes("favicon.png") && !thumbnail.includes("000")) {
+//     }
-            const clone  = imgClone.cloneNode(true);
-            createElmBlock(insertArea, clone, thumbnail, title, hash);
-        }
-    }
-
-    // Insert files
-    let fileClone = document.importNode(filTemplate.content, true);
-    size          = files.length;
-    for (i = 0; i < size; i++) {
-        const clone  = fileClone.cloneNode(true);
-        title     = files[i][0];
-        thumbnail = setFileIconType(files[i][0]);
-        hash      = files[i][1];
-        createElmBlock(insertArea, clone, thumbnail, title, hash);
-    }
-}
-
-const createElmBlock = (ulElm, clone, thumbnail, title, hash, isVideo=false) => {
-    let containerTag = clone.firstElementChild;
-    containerTag.setAttribute("style", "background-image: url('" + thumbnail + "')");
-    containerTag.setAttribute("title", title);
-    containerTag.setAttribute("hash", hash);
-
-    // If image tag this sink to oblivion since there are no input tags in the template
-    try {
-        let inputTag = clone.querySelector("input");
-        inputTag.setAttribute("value", title);
-        // NOTE: Keeping this just incase i do want to rename stuff...
 //
-        // inputTag.addEventListener("dblclick", function (eve) {
+//     // Insert videos
-        //     enableEdit(eve.target);
+//     let vidClone  = document.importNode(vidTemplate.content, true);
+//     size          = videos.length;
+//     for (i = 0; i < size; i++) {
+//         const clone = vidClone.cloneNode(true);
+//         title       = videos[i][0];
+//         thumbnail   = formatURL(videos[i][1]);
+//         hash        = videos[i][2];
+//         createElmBlock(insertArea, clone, thumbnail, title, hash, true);
+//     }
+//
+//     // Insert images
+//     let imgClone  = document.importNode(imgTemplate.content, true);
+//     thumbnail     = "";
+//     size          = images.length;
+//     for (i = 0; i < size; i++) {
+//         title     = images[i][0];
+//         thumbnail = formatURL("files/" + images[i][1]);
+//         hash      = images[i][1];
+//
+//         if (thumbnail.match(/000\.(jpg|png|gif)\b/) == null &&
+//             !thumbnail.includes("favicon.png") && !thumbnail.includes("000")) {
+//             const clone  = imgClone.cloneNode(true);
+//             createElmBlock(insertArea, clone, thumbnail, title, hash);
+//         }
+//     }
+//
+//     // Insert files
+//     let fileClone = document.importNode(filTemplate.content, true);
+//     size          = files.length;
+//     for (i = 0; i < size; i++) {
+//         const clone  = fileClone.cloneNode(true);
+//         title     = files[i][0];
+//         thumbnail = setFileIconType(files[i][0]);
+//         hash      = files[i][1];
+//         createElmBlock(insertArea, clone, thumbnail, title, hash);
+//     }
+// }
+//
+// const createElmBlock = (ulElm, clone, thumbnail, title, hash, isVideo=false) => {
+//     let containerTag = clone.firstElementChild;
+//     containerTag.setAttribute("style", "background-image: url('" + thumbnail + "')");
+//     containerTag.setAttribute("title", title);
+//     containerTag.setAttribute("hash", hash);
+//
+//     // If image tag this sink to oblivion since there are no input tags in the template
+//     try {
+//         let inputTag = clone.querySelector("input");
+//         inputTag.setAttribute("value", title);
+//         // NOTE: Keeping this just incase i do want to rename stuff...
+//         //
+//         // inputTag.addEventListener("dblclick", function (eve) {
+//         //     enableEdit(eve.target);
+//         // });
+//         // inputTag.addEventListener("focusout", function (eve) {
+//         //     disableEdit(eve.target);
+//         // });
+//     } catch (e) { }
+//
+//     if (isVideo) {
+//         let popoutTag = clone.querySelector(".card-popout-btn");
+//         popoutTag.setAttribute("hash", hash);
+//         popoutTag.addEventListener("click", function (eve) {
+//             let target = eve.target;
+//             const hash = target.getAttribute("hash");
+//             openWithLocalProgram(hash);
 //         });
-        // inputTag.addEventListener("focusout", function (eve) {
+//     }
-        //     disableEdit(eve.target);
+//
-        // });
+//
-    } catch (e) { }
+//     ulElm.appendChild(clone);
-
-    if (isVideo) {
-        let popoutTag = clone.querySelector(".card-popout-btn");
-        popoutTag.setAttribute("hash", hash);
-        popoutTag.addEventListener("click", function (eve) {
-            let target = eve.target;
-            const hash = target.getAttribute("hash");
-            openWithLocalProgram(hash);
-        });
-    }
-
-
-    ulElm.appendChild(clone);
 }
 
 const setFileIconType = (fileName) => {

src/core/static/js/react-ui-logic.js

@@ -30,15 +30,14 @@ class FilesList extends React.Component {
     }
 }
 
-const renderFilesList = (data = {"files": ['Dir 1', 'Dir 2', 'Dir 3', 'Dir 4', 'Dir 5']}) => {
+const renderFilesList = (data = null) => {
     // Obtain the root
     const filesListElm = document.getElementById('files')
+    console.log(data);
 
-    // Use the ReactDOM.render to show our component on the browser
+    // // Use the ReactDOM.render to show our component on the browser
-    ReactDOM.render(
+    // ReactDOM.render(
-        React.createElement(FilesList, data),
+    //     React.createElement(FilesList, data),
-        filesListElm
+    //     filesListElm
-    )
+    // )
 }
-
-renderFilesList()

src/core/static/js/ui-logic.js

@@ -20,8 +20,6 @@ const scrollFilesToTop = () => {
 const updateBackground = (srcLink, isvideo = true) => {
     try {
         let elm = document.getElementById("bg");
-
-        console.log(srcLink);
         if (isvideo) {
             if (elm.getAttribute('src') === "") {
                 elm.src = srcLink;

src/core/templates/body-footer.html

@@ -10,7 +10,7 @@
         <div class="col col-lg-auto">
             <ul class="navbar-nav">
                 <li class="nav-item">
-                    <span id="currentDirectory">{{current_directory}}</span>
+                    <span id="path">{{current_directory}}</span>
                 </li>
             </ul>
         </div>

src/core/templates/body-header.html

@@ -22,6 +22,16 @@
                         <button title="File viewer..." class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#file-view-modal">🖼</button>
                     </div>
                 </li>
+
+                <li class="nav-item">
+                    <div class="input-group input-group-sm justify-content-center">
+                        <button class="btn btn-sm btn-secondary" data-toggle="modal"
+                        data-target="#favorites-modal">Faves List &#8597;</button>
+                        <button id="tggl-faves-btn" class="btn btn-sm btn-secondary" title="Add/Delete from favorites..." >&#9734;</button>
+                        <button id="lock-folders-btn" class="btn btn-sm btn-secondary" title="Lock unlocked folders..." >&#x1F512;</button>
+                        <button id="scroll-files-to-top-btn" class="btn btn-sm btn-secondary" title="Lock unlocked folders..." >Scroll Files To Top</button>
+                    </div>
+                </li>
             {% else %}
             <!-- Branding -->
             <div class="navbar-brand">