dynamically list maps avaialble

assets/js/butter-dir-listing.js

@@ -120,8 +120,7 @@ function extractDirectoryListing(doc) {
     return { files, folders };
 }
 
-window.onload = function () {
-    // Example usage
+function renderDirectory() {
     const { files, folders } = extractDirectoryListing(window.document);
     const listDiv = document.querySelector('div.list');
 
@@ -201,4 +200,10 @@ window.onload = function () {
 
     // do the insertion
     listDiv.parentNode.insertBefore(fileListing, listDiv);
+}
+
+window.onload = function () {
+    if (window.location.pathname.includes(usbRoot)) {
+        renderDirectory();
+    }
 }

assets/js/main.js

@@ -36,11 +36,8 @@ if (btnModal) {
 }
 
 function renderPlaceholders() {
-  const usbButter = document.querySelector('#usb-butter');
-  const appstoreCard = document.querySelector('#appstore-card');
-  const mapsCard = document.querySelector('#maps-card');
-  const conditionalCards = [appstoreCard, usbButter, mapsCard];
-  for (let card of conditionalCards) {
+  const discovered = document.querySelectorAll(".hidden-card");
+  for (let card of discovered) {
     fetch(card.dataset.url)
       .then(response => {
         if (response.status === 200) {
@@ -57,5 +54,4 @@ function renderPlaceholders() {
   }
 }
 
-
 renderPlaceholders();

assets/js/maps.js

@@ -0,0 +1,47 @@
+// Checks to see what map files exist at /usb-butter/osm-map-files/ and displays them
+// using the template hidden in the page
+
+const getMaps = 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);
+        renderMaps(files);
+    }
+    const response = fetch(folder_href).then(populateSpan);
+}
+
+function getOsmObfDisplayName(name) {
+    const region = name.split('_')[0];
+    const words = region.split('-');
+    for (let i = 0; i < words.length; i++) {
+        words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
+    }
+    return words.join(" ");
+}
+
+function renderMaps(files) {
+    template = document.getElementById('filerow-template');
+    fileList = template.parentElement;
+    for (let file of files) {
+        let clone = template.cloneNode(true);
+        const links = clone.querySelectorAll('a');
+        for (let link of links) {
+            link.href = '/usb-butter/osm-map-files/' + file.href;
+            link.download = file.name
+        }
+        const upperText = clone.querySelector('.upper-text');
+        const lowerText = clone.querySelector('.lower-text');
+        upperText.textContent = getOsmObfDisplayName(file.name);
+        lowerText.textContent = file.name;
+        fileList.appendChild(clone);
+        clone.removeAttribute('id');
+        clone.classList.remove("template");
+    }
+}
+
+getMaps('/usb-butter/osm-map-files/');