initial rerendering of dirlist

assets/js/butter-dir-listing.js

@@ -1 +1,84 @@
-console.log("butter-dir-listing.js loaded!");
+console.log("butter-dir-listing.js loaded!");
+
+const getFolderDivHTML = (directory_name, number_of_items, href) => {
+    return `
+    <a class="container" href="${href}">
+        <div class="logo-container">
+            <img src="/assets/images/directory.svg" alt="directory">
+        </div>
+        <div class="text-container">
+            <div class="upper-text">${directory_name}</div>
+            <div class="lower-text">${number_of_items} items</div>
+        </div>
+        <div class="empty-block"></div>
+    </a>`;
+}
+
+// Function to extract directory listing information
+function extractDirectoryListing() {
+    // Get all rows in the table body
+    const rows = document.querySelectorAll('tbody tr');
+    console.log('Rows:', rows)
+
+    // Initialize arrays to hold file and folder information
+    const files = [];
+    const folders = [];
+
+    // Iterate over each row
+    rows.forEach(row => {
+        const nameCell = row.querySelector('td.n a');
+        const modifiedCell = row.querySelector('td.m');
+        const sizeCell = row.querySelector('td.s');
+        const typeCell = row.querySelector('td.t');
+
+        const name = nameCell.textContent;
+        const lastModified = modifiedCell.textContent.trim();
+        const size = sizeCell.textContent.trim();
+        const type = typeCell.textContent.trim();
+        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
+            });
+        } else {
+            files.push({
+                name: name,
+                lastModified: lastModified,
+                size: size,
+                type: type,
+                href: href
+            });
+        }
+    });
+
+    return { files, folders };
+}
+
+window.onload = function() {
+    // Example usage
+    const { files, folders } = extractDirectoryListing();
+    console.log('Files:', files);
+    console.log('Folders:', folders);
+
+    // insert a new div before div.list
+    const folderListing = document.createElement("div");
+    folderListing.classList.add('folder-list');
+
+    // for each folder, add a div to folderListing
+    folders.forEach(folder => {
+        const folderDiv = document.createElement('div');
+        folderDiv.classList.add('folder-row');
+        folderDiv.innerHTML = getFolderDivHTML(folder.name, 0, folder.href);
+        folderListing.appendChild(folderDiv);
+    });
+
+    // do the insertion
+    const listDiv = document.querySelector('div.list');
+    listDiv.parentNode.insertBefore(folderListing, listDiv);
+}