butter-kanglam-ui/assets/js/butter-dir-listing.js

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);
}