From 8aa915e6dcf7bcf0d9b06f7d44c1ce61dcc6406d Mon Sep 17 00:00:00 2001
From: Joren <jorenschip@gmail.com>
Date: Fri, 13 Sep 2024 22:57:55 +0200
Subject: [PATCH] Clear jobs

---
 handlers.go        | 23 +++++++++++++++++++++++
 main.go            |  1 +
 templates/index    | 34 ++++++++++++++++++++++++++++++++++
 templates/progress | 32 ++++++++++++++++++++++++--------
 4 files changed, 82 insertions(+), 8 deletions(-)

diff --git a/handlers.go b/handlers.go
index 6e92aa5..76b9701 100644
--- a/handlers.go
+++ b/handlers.go
@@ -209,3 +209,26 @@ func handleAbort(w http.ResponseWriter, r *http.Request) {
 
 	fmt.Fprintf(w, "Abort signal sent for %s", filename)
 }
+
+func handleClearCompleted(w http.ResponseWriter, r *http.Request) {
+	if r.Method != http.MethodPost {
+		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	clearCompletedJobs()
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(map[string]bool{"success": true})
+}
+
+func clearCompletedJobs() {
+	progressMutex.Lock()
+	defer progressMutex.Unlock()
+
+	for filename, info := range progress {
+		if info.Percentage >= 100 {
+			delete(progress, filename)
+		}
+	}
+}
diff --git a/main.go b/main.go
index 86360aa..1b66682 100644
--- a/main.go
+++ b/main.go
@@ -81,6 +81,7 @@ func startWebServer() {
 	http.HandleFunc("/abort", handleAbort)
 	http.HandleFunc("/pause", handlePause)
 	http.HandleFunc("/resume", handleResume)
+	http.HandleFunc("/clear-completed", handleClearCompleted)
 
 	fmt.Println("Starting web server on http://0.0.0.0:8080")
 	http.ListenAndServe(":8080", nil)
diff --git a/templates/index b/templates/index
index b0e7cc1..bc57763 100644
--- a/templates/index
+++ b/templates/index
@@ -45,6 +45,7 @@
         ul {
             list-style-type: none;
             padding: 0;
+            margin-bottom: 10px; 
         }
         li {
             background-color: #2d2d2d;
@@ -83,6 +84,25 @@
             input[type="file"], input[type="submit"] {
                 font-size: 16px;
             }
+            input[type="submit"], #clear-completed {
+                font-size: 16px;
+            }
+        }
+        input[type="submit"], #clear-completed {
+            cursor: pointer;
+            color: white;
+            border: 1px solid #444;
+            padding: 8px 12px;
+            border-radius: 4px;
+            margin-bottom: 10px;
+            max-width: 100%;
+            width: 100%;
+        }
+        #clear-completed {
+            background-color: #f44336;
+        }
+        #clear-completed:hover {
+            background-color: #d32f2f;
         }
     </style>
 </head>
@@ -107,5 +127,19 @@
             <li>No active jobs</li>
         {{end}}
     </ul>
+    <button id="clear-completed" onclick="clearCompleted()">Clear Completed Jobs</button>
+    <script>
+        function clearCompleted() {
+            fetch('/clear-completed', { method: 'POST' })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        location.reload();
+                    } else {
+                        alert('Failed to clear completed jobs');
+                    }
+                });
+        }
+    </script>
 </body>
 </html>
diff --git a/templates/progress b/templates/progress
index b7160f1..b113c91 100644
--- a/templates/progress
+++ b/templates/progress
@@ -69,7 +69,7 @@
             background-color: #d32f2f;
         }
         #pause-button, #resume-button {
-            background-color: #2196F3;
+            background-color: #4CAF50;
             color: white;
             border: none;
             padding: 10px 15px;
@@ -78,11 +78,24 @@
             cursor: pointer;
         }
         #pause-button:hover, #resume-button:hover {
-            background-color: #1976D2;
+            background-color: #45a049;
         }
         #resume-button {
             display: none;
         }
+        #back-button {
+            background-color: #2196F3;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            margin-top: 10px;
+            border-radius: 4px;
+            cursor: pointer;
+            float: right;
+        }
+        #back-button:hover {
+            background-color: #1976D2;
+        }
         @media (max-width: 600px) {
             body {
                 padding: 10px;
@@ -111,9 +124,12 @@
         </div>
         <div id="currentFile"></div>
     </div>
-    <button id="abort-button" onclick="abortDownload()">Abort Download</button>
-    <button id="pause-button" onclick="pauseDownload()">Pause Download</button>
-    <button id="resume-button" onclick="resumeDownload()">Resume Download</button>
+    <div>
+        <button id="abort-button" onclick="abortDownload()">Abort Download</button>
+        <button id="pause-button" onclick="pauseDownload()">Pause Download</button>
+        <button id="resume-button" onclick="resumeDownload()">Resume Download</button>
+        <button id="back-button" onclick="window.location.href='/'">Back to Index</button>
+    </div>
     <script>
         function updateProgress() {
             fetch('/progress?filename={{.Filename}}', {
@@ -138,7 +154,7 @@
             fetch('/abort?filename={{.Filename}}', { method: 'POST' })
                 .then(response => {
                     if (response.ok) {
-                        alert('Abort signal sent. The download will stop soon.');
+                        console.log('Abort signal sent. The download will stop soon.');
                     } else {
                         alert('Failed to abort the download.');
                     }
@@ -149,7 +165,7 @@
             fetch('/pause?filename={{.Filename}}', { method: 'POST' })
                 .then(response => {
                     if (response.ok) {
-                        alert('Pause signal sent. The download will pause soon.');
+                        console.log('Pause signal sent. The download will pause soon.');
                         document.getElementById('pause-button').style.display = 'none';
                         document.getElementById('resume-button').style.display = 'inline-block';
                     } else {
@@ -162,7 +178,7 @@
             fetch('/resume?filename={{.Filename}}', { method: 'POST' })
                 .then(response => {
                     if (response.ok) {
-                        alert('Resume signal sent. The download will resume soon.');
+                        console.log('Resume signal sent. The download will resume soon.');
                         document.getElementById('resume-button').style.display = 'none';
                         document.getElementById('pause-button').style.display = 'inline-block';
                     } else {