refactor: readability and performance

Added form element titles, overflow text now ends with an ellipsis instead of being clipped, removed unnecessary SweetAlert2 parameters, some code reformatting, fetchLogs function now checks for response status and logs error messages, disabled HTTP caching
qx6ghqkz · Dec 9, 2024 · 085b770 · 085b770
1 parent ec990a2
commit 085b770
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 22 deletions.
diff --git a/gallery-dl-server.py b/gallery-dl-server.py
@@ -255,7 +255,7 @@ def download(url, request_options):
     Route("/gallery-dl", endpoint=dl_queue_list),
     Route("/gallery-dl/q", endpoint=q_put, methods=["POST"]),
     Route("/gallery-dl/update", endpoint=update_route, methods=["PUT"]),
-    Route("/gallery-dl/logs", endpoint=log_route),
+    Route("/gallery-dl/logs", endpoint=log_route, methods=["GET"]),
     Mount("/icons", StaticFiles(directory="icons"), name="icons"),
 ]
 

diff --git a/templates/index.html b/templates/index.html
@@ -70,6 +70,8 @@
 
       div.input-group > select.form-select {
         flex: 0.1 1 100px;
+        max-width: 30%;
+        text-overflow: ellipsis;
       }
 
       #btn-logs {
@@ -78,21 +80,21 @@
 
       #box {
         margin: 12px auto 12px auto;
-	resize: vertical;
-	overflow-y: auto;
+        resize: vertical;
+        overflow-y: auto;
         min-height: 95px;
         height: 175px;
-	width: 85%;
-	border: 1px solid #333333;
-	border-radius: 10px;
-	background-color: #181a1b;
-	padding: 10px;
+        width: 85%;
+        border: 1px solid #333333;
+        border-radius: 10px;
+        background-color: #181a1b;
+        padding: 10px;
         text-align: left;
         color: #dedad6;
         font-family: monospace;
-	font-size: 12px;
+        font-size: 12px;
         line-height: 16px;
-	scrollbar-color: #454a4d #202324;
+        scrollbar-color: #454a4d #202324;
       }
 
       textarea {
@@ -143,12 +145,13 @@ <h1 class="display-4">gallery-dl</h1>
               type="url"
               class="form-control"
               placeholder="URL"
+              title="Enter URL"
               aria-label="URL"
               aria-describedby="button-submit"
               autofocus
             />
 
-            <select class="form-select" name="video-opts">
+            <select class="form-select" name="video-opts" title="Select Options">
               <optgroup label="Video Options (overrides loaded configuration)">
                 <option value="none-selected" selected>Select</option>
                 <option value="download-video">Download Videos</option>
@@ -184,7 +187,7 @@ <h1 class="display-4">gallery-dl</h1>
 
     <script>
       const urlParams = new URLSearchParams(window.location.search);
-      const added = urlParams.get('added');
+      const added = urlParams.get("added");
 
       const Success = Swal.mixin({
         animation: true,
@@ -198,10 +201,6 @@ <h1 class="display-4">gallery-dl</h1>
         showCloseButton: true,
         closeButtonHtml: "&times;",
         target: "body",
-        backdrop: false,
-        allowOutsideClick: true,
-        allowEscapeKey: true,
-        stopKeydownPropagation: true,
         timer: 3000,
         timerProgressBar: true,
         toast: true,
@@ -224,12 +223,30 @@ <h1 class="display-4">gallery-dl</h1>
 
       async function fetchLogs() {
         const box = document.getElementById("box");
-        const response = await fetch("gallery-dl/logs");
-        const logs = await response.text();
 
-        if (box.textContent != logs) {
-          box.textContent = logs;
-          box.scrollTop = box.scrollHeight;
+        try {
+          const response = await fetch("/gallery-dl/logs", {
+            method: "GET",
+            headers: {
+              "Cache-Control": "no-cache, no-store, must-revalidate",
+              "Pragma": "no-cache",
+              "Expires": "0"
+            }
+          });
+
+          if (!response.ok) {
+            throw new Error(`Response status: ${response.status}`);
+          }
+
+          const logs = await response.text();
+
+          if (box.textContent != logs) {
+            box.textContent = logs;
+            box.scrollTop = box.scrollHeight;
+          }
+        }
+        catch (error) {
+          console.error(error.message);
         }
       }
 
@@ -275,7 +292,7 @@ <h1 class="display-4">gallery-dl</h1>
 
       function saveBox() {
         const box = document.getElementById("box");
-        let boxPos = box.getBoundingClientRect();
+        const boxPos = box.getBoundingClientRect();
         sessionStorage.setItem("boxHeight", boxPos.height);
         sessionStorage.setItem("scrollPos", box.scrollTop);
       }