Clear jobs

This commit is contained in:
2024-09-13 22:57:55 +02:00
parent 37c390f911
commit 8aa915e6dc
4 changed files with 82 additions and 8 deletions

View File

@ -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>

View File

@ -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 {