From c7646d99ce470817b6da9891d281ecd736ca93f4 Mon Sep 17 00:00:00 2001
From: John Hess <john@jthess.com>
Date: Wed, 12 Jun 2024 21:33:48 -0500
Subject: [PATCH] get item count

---
 assets/js/butter-dir-listing.js       | 35 +++++++++++++++++----------
 simulated-usb-butter/Learn/index.html |  4 +--
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/assets/js/butter-dir-listing.js b/assets/js/butter-dir-listing.js
index 44f9b12..03daf11 100644
--- a/assets/js/butter-dir-listing.js
+++ b/assets/js/butter-dir-listing.js
@@ -6,12 +6,10 @@
  * INJECTION ATTACKS***.  We just pop filenames and the like right into innerHTML.
  */
 
-console.log("butter-dir-listing.js loaded!");
 
 const supported_extensions = ["apk", "deb", "dmg", "pdf", "exe", "jpg", "png", "pptx", "ppt", "mp3"];
 const usbRoot = "usb-butter/";
 const inferredBaseURL = window.location.pathname.split("/" + usbRoot)[0] + "/";
-console.log("Inferred Base URL:", inferredBaseURL);
 
 const getFolderDivHTML = (directory_name, number_of_items, href) => {
     return `
@@ -21,7 +19,7 @@ const getFolderDivHTML = (directory_name, number_of_items, href) => {
         </div>
         <div class="text-filerow">
             <div class="upper-text">${directory_name}</div>
-            <div class="lower-text">${number_of_items} items</div>
+            <div class="lower-text"><span id="${href}">${number_of_items}</span> items</div>
         </div>
         <div class="empty-block"></div>
     </a>`;
@@ -30,7 +28,6 @@ const getFolderDivHTML = (directory_name, number_of_items, href) => {
 const getFileDivHTML = (file_name, size, date, href) => {
     icon = "ext-unknown.svg";
     extension = file_name.split('.').pop();
-    console.log("Extension:", extension);
     if (supported_extensions.includes(extension)) {
         icon = "ext-" + extension + ".svg";
     }
@@ -49,11 +46,26 @@ const getFileDivHTML = (file_name, size, date, href) => {
     </a>`;
 };
 
+const getFolderItemCount = async (folder_href) => {
+    async function populateSpan(response) {
+        if (!response.ok) {
+            console.error("Failed to fetch " + folder_href);
+            return;
+        }
+        const text = await response.text();
+        const doc = new DOMParser().parseFromString(text, 'text/html');
+        const { files, folders } = extractDirectoryListing(doc);
+        const items = files.length + folders.length;
+        const span = document.getElementById(folder_href);
+        span.textContent = items;
+    }
+    const response = fetch(folder_href).then(populateSpan);
+}
+
 // Function to extract directory listing information
-function extractDirectoryListing() {
+function extractDirectoryListing(doc) {
     // Get all rows in the table body
-    const rows = document.querySelectorAll('tbody tr');
-    console.log('Rows:', rows)
+    const rows = doc.querySelectorAll('tbody tr');
 
     // Initialize arrays to hold file and folder information
     const files = [];
@@ -99,16 +111,12 @@ function extractDirectoryListing() {
 
 window.onload = function () {
     // Example usage
-    const { files, folders } = extractDirectoryListing();
-    console.log('Files:', files);
-    console.log('Folders:', folders);
+    const { files, folders } = extractDirectoryListing(window.document);
     const listDiv = document.querySelector('div.list');
 
     // Header with breadcrumbs
     const h2Path = document.querySelector('h2').textContent;
-    console.log("H2 Path:", h2Path);
     const path = h2Path.replace('Index of ', '').replace(usbRoot, '');
-    console.log("Path:", path);
 
     const breadcrumbs = document.createElement("div");
     breadcrumbs.classList.add('breadcrumbs');
@@ -153,8 +161,9 @@ window.onload = function () {
     folders.forEach(folder => {
         const folderDiv = document.createElement('div');
         folderDiv.classList.add('folder-row');
-        folderDiv.innerHTML = getFolderDivHTML(folder.name, 0, folder.href);
+        folderDiv.innerHTML = getFolderDivHTML(folder.name, "?", folder.href);
         folderListing.appendChild(folderDiv);
+        getFolderItemCount(folder.href);
     });
 
     // do the insertion
diff --git a/simulated-usb-butter/Learn/index.html b/simulated-usb-butter/Learn/index.html
index 57ac702..b3927b9 100644
--- a/simulated-usb-butter/Learn/index.html
+++ b/simulated-usb-butter/Learn/index.html
@@ -10,14 +10,14 @@ layout: empty
 <html>
 
 <head>
-    <title>Index of /usb-butter/Download/Learn/</title>
+    <title>Index of /usb-butter/Learn/</title>
     <meta name="viewport" content="initial-scale=1">
     <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/css/butter-dir-listing.css">
     <script src="{{ site.baseurl }}/assets/js/butter-dir-listing.js"></script>
 </head>
 
 <body>
-    <h2>Index of /usb-butter/Download/Learn/</h2>
+    <h2>Index of /usb-butter/Learn/</h2>
     <div class="list">
         <table summary="Directory Listing" cellpadding="0" cellspacing="0">
             <thead>