fred.boniface
/
SpeedyF
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finishing touches

This commit is contained in:
Fred Boniface 2024-05-01 14:10:26 +01:00
parent ce28efde7c
commit 9a0d4e2261
3 changed files with 46 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
static/checkjob.js
View File

@ -8,13 +8,17 @@ const fetchJobState = async () => {
} }
const data = await response.json(); const data = await response.json();
// Update UI with job state // Update UI with job state
document.getElementById('job_state').innerText = data.state; document.getElementById('state-msg').innerText = data.state;
if (data.state == "error") { if (data.state == "error") {
document.getElementById('job_error').innerText = data.error; document.getElementById('job_error').innerText = data.error;
document.getElementById('err_msg').style = 'display: inline-block;'
stopPolling(); stopPolling();
} }
if (data.state == "done") { if (data.state == "done") {
stopPolling(); stopPolling();
showDownloadButton();
document.title = "All Done"
document.getElementById('title').textContent = "All Done"
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);
@ -25,6 +29,10 @@ function stopPolling() {
clearInterval(pollingIntervalId) clearInterval(pollingIntervalId)
} }
function showDownloadButton() {
document.getElementById('download-button').style = 'display: inline-block;'
}
// Poll the endpoint every 5 seconds (adjust as needed) // Poll the endpoint every 5 seconds (adjust as needed)
const pollingInterval = 2000; //ms const pollingInterval = 2000; //ms
const pollingIntervalId = setInterval(fetchJobState, pollingInterval); const pollingIntervalId = setInterval(fetchJobState, pollingInterval);

30
static/style.css
View File

@ -6,3 +6,33 @@ body {
text-align: center; text-align: center;
margin: auto; margin: auto;
} }
.download-button {
display: none;
text-decoration: none;
background-color: #008080; /* Teal color */
border: 2px solid #000; /* Black border */
color: #fff; /* White text */
padding: 10px 20px; /* Padding */
font-size: 16px; /* Font size */
font-weight: bold; /* Bold text */
cursor: pointer; /* Cursor on hover */
outline: none; /* Remove outline on focus */
transition: background-color 0.3s, border-color 0.3s, color 0.3s; /* Smooth transition */
}
.download-button:hover {
background-color: #fff; /* White background on hover */
border-color: #008080; /* Teal border on hover */
color: #008080; /* Teal text on hover */
}
#state {
padding: 30px;
margin: 30px;
font-size: 40px;
}
#err_msg {
display: none;
}

10
views/processing.ejs
View File

@ -9,11 +9,13 @@
<script src="/checkjob.js"></script> <script src="/checkjob.js"></script>
</head> </head>
<body> <body>
<h1>Please wait</h1> <h1 id="title">Please wait</h1>
<p>Job ID: <%= job_id %></p> <p>Job ID: <%= job_id %></p>
<br> <br>
<p>Job State: <span id="job_state"></span></p> <div id="state">
<p>Job Error: <span id="job_error">None</span></p> <span class="pending" id="state-msg">pending</span>
<p><a href="/download?job_id=<%= job_id %>">Download</a></p> </div>
<p id="err_msg">Job Error: <span id="job_error">None</span></p>
<a id="download-button" class="download-button" href="/download?job_id=<%= job_id %>">Download</a>
</body> </body>
</html> </html>