Quasi functioning lists

src/core/static/css/main.css

@@ -46,11 +46,12 @@
 
 
 
+.icon-style {
+    width: 2em;
+    height: auto;
+}
 
 .dir-style, .video-style, .image-style, .file-style {
-	/* max-width: 24vw; */
-    /* height: auto;
-	position: relative; */
 	max-width: 20em;
 }
 

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

@@ -45,19 +45,15 @@ const generateFavesList = (data) => {
 
 
 const updateHTMLDirList = async (data) => {
-    console.log(data);
+    // let dirs             = data.list.dirs[0];
-    let pathElm     = document.getElementById("path");
+    // let videos           = data.list.vids[0];
-    let dirs        = (data.list.dirs)  ? data.list.dirs[0]  : [];
+    let images           = data.list.images[0];
-    let videos      = (data.list.vids)  ? data.list.vids[0]  : [];
+    // let files            = data.list.files[0];
-    let images      = (data.list.images)  ? data.list.images[0]  : [];
-    let files       = (data.list.ungrouped) ? data.list.ungrouped[0] : [];
     let isInFaves        = data.in_fave;
-
-    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...
+
+    document.getElementById("path").innerText = data.path_head;
     // 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...
@@ -69,11 +65,11 @@ const updateHTMLDirList = async (data) => {
     }
 
     // See if in faves
-    let elm = document.getElementById("tggl-faves-btn");
+    let tggl_faves_btn = document.getElementById("tggl-faves-btn");
     if (isInFaves == "true")
-        elm.classList.add("btn-info");
+        tggl_faves_btn.classList.add("btn-info");
     else
-        elm.classList.remove("btn-info");
+        tggl_faves_btn.classList.remove("btn-info");
 
 
     renderFilesList(data.list);
@@ -163,26 +159,26 @@ const updateHTMLDirList = async (data) => {
 //     ulElm.appendChild(clone);
 }
 
-const setFileIconType = (fileName) => {
+// const setFileIconType = (fileName) => {
-    icoPath = "";
+//     icoPath = "";
-
+//
-    if (fileName.match(/\.(doc|docx|xls|xlsx|rtf)\b/) != null) {
+//     if (fileName.match(/\.(doc|docx|xls|xlsx|rtf)\b/) != null) {
-        icoPath = "static/imgs/icons/doc.png";
+//         icoPath = "static/imgs/icons/doc.png";
-    } else if (fileName.match(/\.(7z|7zip|zip|tar.gz|tar.xz|gz|rar|jar)\b/) != null) {
+//     } else if (fileName.match(/\.(7z|7zip|zip|tar.gz|tar.xz|gz|rar|jar)\b/) != null) {
-        icoPath = "resources/images/icons/arc.png";
+//         icoPath = "resources/images/icons/arc.png";
-    } else if (fileName.match(/\.(pdf)\b/) != null) {
+//     } else if (fileName.match(/\.(pdf)\b/) != null) {
-        icoPath = "static/imgs/icons/pdf.png";
+//         icoPath = "static/imgs/icons/pdf.png";
-    } else if (fileName.match(/\.(html)\b/) != null) {
+//     } else if (fileName.match(/\.(html)\b/) != null) {
-        icoPath = "static/imgs/icons/html.png";
+//         icoPath = "static/imgs/icons/html.png";
-    } else if (fileName.match(/\.(txt|conf)\b/) != null) {
+//     } else if (fileName.match(/\.(txt|conf)\b/) != null) {
-        icoPath = "static/imgs/icons/text.png";
+//         icoPath = "static/imgs/icons/text.png";
-    } else if (fileName.match(/\.(iso|img)\b/) != null) {
+//     } else if (fileName.match(/\.(iso|img)\b/) != null) {
-        icoPath = "static/imgs/icons/img.png";
+//         icoPath = "static/imgs/icons/img.png";
-    } else if (fileName.match(/\.(sh|batch|exe)\b/) != null) {
+//     } else if (fileName.match(/\.(sh|batch|exe)\b/) != null) {
-        icoPath = "static/imgs/icons/scrip.png";
+//         icoPath = "static/imgs/icons/scrip.png";
-    } else {
+//     } else {
-        icoPath = "static/imgs/icons/bin.png";
+//         icoPath = "static/imgs/icons/bin.png";
-    }
+//     }
-
+//
-    return formatURL(icoPath)
+//     return formatURL(icoPath)
-}
+// }

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

@@ -1,21 +1,49 @@
+const setFileIconType = (fileName) => {
+    let icoPath = "";
+
+    if (fileName.match(/\.(doc|docx|xls|xlsx|rtf)\b/) != null) {
+        icoPath = "static/imgs/icons/doc.png";
+    } else if (fileName.match(/\.(7z|7zip|zip|tar.gz|tar.xz|gz|rar|jar)\b/) != null) {
+        icoPath = "resources/images/icons/arc.png";
+    } else if (fileName.match(/\.(pdf)\b/) != null) {
+        icoPath = "static/imgs/icons/pdf.png";
+    } else if (fileName.match(/\.(html)\b/) != null) {
+        icoPath = "static/imgs/icons/html.png";
+    } else if (fileName.match(/\.(txt|conf)\b/) != null) {
+        icoPath = "static/imgs/icons/text.png";
+    } else if (fileName.match(/\.(iso|img)\b/) != null) {
+        icoPath = "static/imgs/icons/img.png";
+    } else if (fileName.match(/\.(sh|batch|exe)\b/) != null) {
+        icoPath = "static/imgs/icons/scrip.png";
+    } else {
+        icoPath = "static/imgs/icons/bin.png";
+    }
+
+    return icoPath
+}
+
 // Create a ES6 class component
 class FilesList extends React.Component {
     // Use the render function to return JSX component
     render() {
         let final = [];
-        let files = this.props.files;
+        let files = this.props.files[0];
+        console.log(files);
 
         for (let file of files) {
             final.push(
                 <div class="col-sm-12 col-md-6 col-lg-4">
                     <div class="card">
-                        <div class="card-header">{file}</div>
+                        <div class="card-header">
+                            <img class="icon-style" src={ setFileIconType(file[0]) } alt={file[0]} />
+                            {file[0]}
+                        </div>
                         <div class="card-body">
-                            <img class="image-style" src="/api/files/file" alt="{file}" />
+                        <img class="image-style" src={"api/file-manager-action/" + file[1]} alt={file[0]} />
                         </div>
                         <div class="card-footer">
-                            <input app="{file}" class="btn btn-secondary btn-sm" type="button" value="Launch"/>
+                            <input app={file[1]} class="btn btn-secondary btn-sm" type="button" value="Open"/>
-                            <input app="{file}" class="btn btn-secondary btn-sm" type="button" value="Launch Locally"/>
+                            <input app={file[1]} class="btn btn-secondary btn-sm" type="button" value="Open Locally"/>
                         </div>
                     </div>
                 </div>
@@ -31,13 +59,9 @@ class FilesList extends React.Component {
 }
 
 const renderFilesList = (data = null) => {
-    // Obtain the root
+    const filesListElm = document.getElementById('files');
-    const filesListElm = document.getElementById('files')
+    ReactDOM.render(
-    console.log(data);
+        React.createElement(FilesList, data),
-
+        filesListElm
-    // // Use the ReactDOM.render to show our component on the browser
+    )
-    // ReactDOM.render(
-    //     React.createElement(FilesList, data),
-    //     filesListElm
-    // )
 }

src/core/templates/favorites-modal.html

@@ -0,0 +1,26 @@
+<!-- Favorites modal -->
+<div class="modal fade" id="favorites-modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>Favorites:</h3>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+
+            <div class="modal-body">
+                <div class="row">
+                    <div class="col scroller" style="max-height: 30em; overflow: auto;">
+                        <ul id="faves-list">
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            <div class="modal-footer">
+                <button type="button" data-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
+            </div>
+        </div>
+    </div>
+</div>

src/core/templates/file-modal.html

@@ -0,0 +1,77 @@
+<!-- File viewer modal -->
+<div class="modal fade" id="file-view-modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-xl" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>File Viewer:</h3>
+                <button type="button" onclick="pauseVideo()" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+
+            <div class="modal-body text-center justify-content-center">
+                <div class="row">
+                    <div class="col scroller" style="max-height: 70vh; overflow: auto;">
+                        <!-- For video -->
+                        <div id="video-container">
+                            <video id="video-viewer"
+                                loop
+                                src=""
+                                autoplay=""
+                                volume="0.75"
+                                poster="{{ url_for('static', filename='imgs/icons/loading.gif')}}"
+                                onmousemove="showControls()">
+                            </video>
+
+                            <div id="video-controls">
+                                <div class="row pl-5 pr-5">
+                                    <div class="col-md-8">
+                                        <input id="seek-slider" class="form-control-range" type="range" min="0" value="0" max="100" step="1"/>
+                                    </div>
+                                    <div class="col-md-3">
+                                        <span id="videoCurrentTime"></span>
+                                        /
+                                        <span id="videoDuration"></span>
+                                    </div>
+                                    <div class="col-md-1">
+                                        <span id="volumeIcon" onclick="toggleVolumeControl()">&#128264;</span>
+                                        <input id="volume-slider" class="form-control-range volume-control-positioner" style="display: none;"
+                                        type="range" orient="vertical" min="0.0" max="1.0" value="0.75" step="0.05" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+
+                        <!-- For image -->
+                        <img id="image-viewer"
+                            style="width: inherit; height: auto; display: none;"
+                            src="" alt="" />
+
+                        <!-- For pdf -->
+                        <iframe id="pdf-viewer"
+                            src=""
+                            width="720" height="460"
+                            style="display: none;"
+                            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+                            allowfullscreen="allowfullscreen"
+                            mozallowfullscreen="mozallowfullscreen"
+                            msallowfullscreen="msallowfullscreen"
+                            oallowfullscreen="oallowfullscreen"
+                            webkitallowfullscreen="webkitallowfullscreen">
+                        </iframe>
+
+                        <!-- For text -->
+                        <pre id="text-viewer"
+                            style="width: inherit; height: auto; display: none;">
+                        </pre>
+                    </div>
+                </div>
+            </div>
+
+            <div class="modal-footer">
+                <button onclick="pauseVideo()" type="button" data-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
+            </div>
+        </div>
+    </div>
+</div>

src/core/templates/options-modal.html

@@ -0,0 +1,42 @@
+<!-- Other Options modal -->
+<div class="modal fade" id="options-modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-xl" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>Settings:</h3>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+
+            <div class="modal-body">
+                <div class="row">
+                    <div class="col scroller" style="max-height: 30em; overflow: auto;">
+
+                        <!-- <center>
+                            <form>
+                                <input class="ulFile" type="file" title="files To Upload" name="filesToUpload[]" data-multiple-caption="{count} files selected" multiple />
+                                <input type="button" onclick="uploadFiles()" name="UploadFiles" title="Upload File(s)" value="Upload File(s)" />
+                                <input type="reset" title="Clear" id="CLEARBTTN" value="Clear" style="display:none;">
+                                <input type="text" id="DIRPATHUL" name="DIRPATHUL" value="">
+                            </form>
+                            <br/>
+                            <input type="text" id="NewItem" value=""/>
+                            <input type="button" value="New Dir" onclick="createItem('dir')"/>
+                            <input type="button" value="New File" onclick="createItem('file')"/>
+                            <input type="button" value="Show Server Messages" onclick="tgglElmView('serverMsgView')"/>
+                            <br/>
+                            <input id="MergeType" type="checkbox" onchange="getDir('./')" />
+                            <label for="MergeType">Show seassons in same list.</label>
+                        </center> -->
+
+                    </div>
+                </div>
+            </div>
+
+            <div class="modal-footer">
+                <button type="button" data-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
+            </div>
+        </div>
+    </div>
+</div>