From 68eef8524c86ce3f7c3b009b161054ae2861c9a1 Mon Sep 17 00:00:00 2001
From: Musselman <jtmuss@pm.me>
Date: Wed, 26 Jun 2024 11:36:53 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20Defer=20list.js=20script?=
 =?UTF-8?q?=20loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #1, the JavaScript ran before the DOM fully loaded.
---
 templates/list.html | 320 ++++++++++++++++++++++++++++----------------
 1 file changed, 201 insertions(+), 119 deletions(-)
diff --git a/templates/list.html b/templates/list.html
index 73be5df..dd45997 100644
--- a/templates/list.html
+++ b/templates/list.html
@@ -1,131 +1,213 @@
-<!DOCTYPE html>
+<!doctype html>
 <html data-bs-theme="dark">
-
-<head>
+  <head>
     <title>List Files</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
-    <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
+    />
+    <link rel="icon" href="/static/favicon.ico" type="image/x-icon" />
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="/static/build/list.js" type="text/javascript"></script>
+    <script src="/static/build/list.js" type="text/javascript" defer></script>
     <script src="/static/build/darkmode.js" type="text/javascript"></script>
 
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
 
-</head>
-
-<body>
+  <body>
     <div id="page-container" class="container">
-        <h1>Welcome, {{.Username}}!</h1>
+      <h1>Welcome, {{.Username}}!</h1>
 
-        <!-- Upload Form Modal -->
-        <div id="uploadModal" class="modal">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 class="modal-title">Upload File</h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                    </div>
-                    <div class="modal-body">
-                        <form method="post" action="/upload" enctype="multipart/form-data">
-                            <input type="file" name="file" id="file" accept=".md,.html" multiple required /><br /><br />
-                            <button type="submit" class="btn btn-primary">Upload</button>
-                        </form>
-                    </div>
+      <!-- Upload Form Modal -->
+      <div id="uploadModal" class="modal">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title">Upload File</h5>
+              <button
+                type="button"
+                class="btn-close"
+                data-bs-dismiss="modal"
+                aria-label="Close"
+              ></button>
+            </div>
+            <div class="modal-body">
+              <form
+                method="post"
+                action="/upload"
+                enctype="multipart/form-data"
+              >
+                <input
+                  type="file"
+                  name="file"
+                  id="file"
+                  accept=".md,.html"
+                  multiple
+                  required
+                /><br /><br />
+                <button type="submit" class="btn btn-primary">Upload</button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- New File Modal -->
+      <div id="newFileModal" class="modal">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title">Create New File</h5>
+              <button
+                type="button"
+                class="btn-close"
+                data-bs-dismiss="modal"
+                aria-label="Close"
+              ></button>
+            </div>
+            <div class="modal-body">
+              <form id="newFileForm" method="post" action="/create">
+                <label for="newFileName">File Name:</label>
+                <input
+                  type="text"
+                  name="newFileName"
+                  id="newFileName"
+                  required
+                /><br /><br />
+                <button
+                  type="submit"
+                  id="createNewFile"
+                  class="btn btn-primary"
+                >
+                  Create
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="buttons-container" class="d-flex justify-content-between">
+        <div>
+          <button
+            id="openUploadModal"
+            class="btn btn-primary"
+            data-bs-toggle="modal"
+            data-bs-target="#uploadModal"
+          >
+            Upload File
+          </button>
+        </div>
+        <div>
+          <button
+            id="openNewFileModal"
+            class="btn btn-primary"
+            data-bs-toggle="modal"
+            data-bs-target="#newFileModal"
+          >
+            Create New File
+          </button>
+        </div>
+        <div>
+          <button
+            id="openDeleteFileModal"
+            class="btn btn-primary"
+            data-bs-toggle="modal"
+            data-bs-target="#deleteFileModal"
+          >
+            Delete Files
+          </button>
+        </div>
+        <div>
+          <button id="exportFolder" class="btn btn-primary">
+            Export Folder
+          </button>
+        </div>
+        <div>
+          <button onclick="location.href='/logout'" class="btn btn-primary">
+            Logout
+          </button>
+        </div>
+      </div>
+
+      <!-- Delete File Modal -->
+      <div id="deleteFileModal" class="modal">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title">Delete Files</h5>
+              <button
+                type="button"
+                class="btn-close"
+                data-bs-dismiss="modal"
+                aria-label="Close"
+              ></button>
+            </div>
+            <div class="modal-body">
+              <form id="deleteForm" action="/delete" method="post">
+                <div class="checklist">
+                  {{range .Files}}
+                  <label>
+                    <input
+                      type="checkbox"
+                      name="filesToDelete[]"
+                      value="{{.Filename}}"
+                    />
+                    {{.Filename}}
+                  </label>
+                  <br />
+                  {{end}}
                 </div>
+                <button
+                  type="button"
+                  data-bs-dismiss="modal"
+                  class="btn btn-secondary"
+                >
+                  Cancel
+                </button>
+                <button type="button" id="checkAll" class="btn btn-primary">
+                  Check All
+                </button>
+                <button
+                  type="submit"
+                  id="deleteSelected"
+                  class="btn btn-danger"
+                >
+                  Delete Selected
+                </button>
+              </form>
             </div>
+          </div>
+          Invalid Date
         </div>
-
-        <!-- New File Modal -->
-        <div id="newFileModal" class="modal">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 class="modal-title">Create New File</h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                    </div>
-                    <div class="modal-body">
-                        <form id="newFileForm" method="post" action="/create">
-                            <label for="newFileName">File Name:</label>
-                            <input type="text" name="newFileName" id="newFileName" required><br /><br />
-                            <button type="submit" id="createNewFile" class="btn btn-primary">Create</button>
-                        </form>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div id="buttons-container" class="d-flex justify-content-between">
-            <div>
-                <button id="openUploadModal" class="btn btn-primary" data-bs-toggle="modal"
-                    data-bs-target="#uploadModal">Upload File</button>
-            </div>
-            <div>
-                <button id="openNewFileModal" class="btn btn-primary" data-bs-toggle="modal"
-                    data-bs-target="#newFileModal">Create New File</button>
-            </div>
-            <div>
-                <button id="openDeleteFileModal" class="btn btn-primary" data-bs-toggle="modal"
-                    data-bs-target="#deleteFileModal">Delete Files</button>
-            </div>
-            <div>
-                <button id="exportFolder" class="btn btn-primary">Export Folder</button>
-            </div>
-            <div>
-                <button onclick="location.href='/logout'" class="btn btn-primary">Logout</button>
-            </div>
-        </div>
-
-        <!-- Delete File Modal -->
-        <div id="deleteFileModal" class="modal">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 class="modal-title">Delete Files</h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                    </div>
-                    <div class="modal-body">
-                        <form id="deleteForm" action="/delete" method="post">
-                            <div class="checklist">
-                                {{range .Files}}
-                                <label>
-                                    <input type="checkbox" name="filesToDelete[]" value="{{.Filename}}">
-                                    {{.Filename}}
-                                </label>
-                                <br>
-                                {{end}}
-                            </div>
-                            <button type="button" data-bs-dismiss="modal" class="btn btn-secondary">Cancel</button>
-                            <button type="button" id="checkAll" class="btn btn-primary">Check All</button>
-                            <button type="submit" id="deleteSelected" class="btn btn-danger">Delete Selected</button>
-                        </form>
-                    </div>
-                </div>Invalid Date	
-            </div>
-        </div>
-        <table class="table">
-            <thead>
-                <tr>
-                    <th>File Name</th>
-                    <th>Creation Time</th>
-                    <th>Last Edited</th>
-                </tr>
-            </thead>
-            <tbody>
-                {{range .Files}}
-                <tr>
-                    <td>
-                        <a class="link-offset-2" href="/edit?filename={{.Filename}}">{{.Filename}}</a>
-                    </td>
-                    <td>
-                        <span class="creation-time" data-unix="{{.CreationTime}}"></span>
-                    </td>
-                    <td>
-                        <span class="last-edited-time" data-unix="{{.LastEdited}}"></span>
-                    </td>
-                </tr>
-                {{end}}
-            </tbody>
-        </table>
+      </div>
+      <table class="table">
+        <thead>
+          <tr>
+            <th>File Name</th>
+            <th>Creation Time</th>
+            <th>Last Edited</th>
+          </tr>
+        </thead>
+        <tbody>
+          {{range .Files}}
+          <tr>
+            <td>
+              <a class="link-offset-2" href="/edit?filename={{.Filename}}"
+                >{{.Filename}}</a
+              >
+            </td>
+            <td>
+              <span class="creation-time" data-unix="{{.CreationTime}}"></span>
+            </td>
+            <td>
+              <span class="last-edited-time" data-unix="{{.LastEdited}}"></span>
+            </td>
+          </tr>
+          {{end}}
+        </tbody>
+      </table>
     </div>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>
+
