list files

assets/js/butter-dir-listing.js

@@ -1,5 +1,15 @@
+/**
+ * This script redraws the default lighttpd directory listing to our custom styles.
+ * 
+ * Since the person inserting the files has physical access to the box and we serve
+ * their static sites directly from the USB, ***THIS SCRIPT DOES NOT ATTEMPT TO PREVENT
+ * INJECTION ATTACKS***.  We just pop filenames and the like right into innerHTML.
+ */
+
 console.log("butter-dir-listing.js loaded!");
 
+const supported_extensions = [".apk"];
+
 const getFolderDivHTML = (directory_name, number_of_items, href) => {
     return `
     <a class="container" href="${href}">
@@ -12,7 +22,26 @@ const getFolderDivHTML = (directory_name, number_of_items, href) => {
         </div>
         <div class="empty-block"></div>
     </a>`;
-}
+};
+
+const getFileDivHTML = (file_name, size, date, href) => {
+    icon = "ext-unknown.svg";
+    extension = file_name.split('.').pop();
+    if (supported_extensions.includes(extension)) {
+        icon = "ext" + extension + ".svg";
+    }
+    return `
+    <a class="container" href="${href}">
+        <div class="logo-container">
+            <img src="/assets/images/${icon}" alt="directory">
+        </div>
+        <div class="text-container">
+            <div class="upper-text">${file_name}</div>
+            <div class="lower-text">${size} | ${date}</div>
+        </div>
+        <div class="empty-block"></div>
+    </a>`;
+};
 
 // Function to extract directory listing information
 function extractDirectoryListing() {
@@ -38,14 +67,16 @@ function extractDirectoryListing() {
         const href = nameCell.getAttribute('href');
 
         // Determine if it's a file or folder based on the class of the row or type
-        if (type === 'Directory' && name !== '..') {
-            folders.push({
-                name: name.replace('/', ''),  // Remove the trailing slash
-                lastModified: lastModified,
-                size: size,
-                type: type,
-                href: href
-            });
+        if (type === 'Directory') {
+            if (name !== '..') {
+                folders.push({
+                    name: name.replace('/', ''),  // Remove the trailing slash
+                    lastModified: lastModified,
+                    size: size,
+                    type: type,
+                    href: href
+                });
+            }
         } else {
             files.push({
                 name: name,
@@ -60,7 +91,7 @@ function extractDirectoryListing() {
     return { files, folders };
 }
 
-window.onload = function() {
+window.onload = function () {
     // Example usage
     const { files, folders } = extractDirectoryListing();
     console.log('Files:', files);
@@ -69,6 +100,7 @@ window.onload = function() {
     // insert a new div before div.list
     const folderListing = document.createElement("div");
     folderListing.classList.add('folder-list');
+    folderListing.innerHTML = '<h2>Folders</h2>';
 
     // for each folder, add a div to folderListing
     folders.forEach(folder => {
@@ -81,4 +113,24 @@ window.onload = function() {
     // do the insertion
     const listDiv = document.querySelector('div.list');
     listDiv.parentNode.insertBefore(folderListing, listDiv);
+
+    if (folders.length > 0 && files.length > 0) {
+        listDiv.parentNode.insertBefore(document.createElement('hr'), listDiv);
+    }
+
+    // then for files
+    const fileListing = document.createElement("div");
+    fileListing.classList.add('file-list');
+    fileListing.innerHTML = '<h2>Files</h2>';
+
+    // for each file, add a div to fileListing
+    files.forEach(file => {
+        const fileDiv = document.createElement('div');
+        fileDiv.classList.add('file-row');
+        fileDiv.innerHTML = getFileDivHTML(file.name, file.size, file.lastModified, file.href);
+        fileListing.appendChild(fileDiv);
+    });
+
+    // do the insertion
+    listDiv.parentNode.insertBefore(fileListing, listDiv);
 }