From 9a0d4e22614ee4d4fee06d82d65214a21d993890 Mon Sep 17 00:00:00 2001 From: Fred Boniface Date: Wed, 1 May 2024 14:10:26 +0100 Subject: [PATCH] Finishing touches --- static/checkjob.js | 10 +++++++++- static/style.css | 32 +++++++++++++++++++++++++++++++- views/processing.ejs | 10 ++++++---- 3 files changed, 46 insertions(+), 6 deletions(-) diff --git a/static/checkjob.js b/static/checkjob.js index ed4fa60..1894795 100644 --- a/static/checkjob.js +++ b/static/checkjob.js @@ -8,13 +8,17 @@ const fetchJobState = async () => { } const data = await response.json(); // Update UI with job state - document.getElementById('job_state').innerText = data.state; + document.getElementById('state-msg').innerText = data.state; if (data.state == "error") { document.getElementById('job_error').innerText = data.error; + document.getElementById('err_msg').style = 'display: inline-block;' stopPolling(); } if (data.state == "done") { stopPolling(); + showDownloadButton(); + document.title = "All Done" + document.getElementById('title').textContent = "All Done" } } catch (error) { console.error(error); @@ -25,6 +29,10 @@ function stopPolling() { clearInterval(pollingIntervalId) } +function showDownloadButton() { + document.getElementById('download-button').style = 'display: inline-block;' +} + // Poll the endpoint every 5 seconds (adjust as needed) const pollingInterval = 2000; //ms const pollingIntervalId = setInterval(fetchJobState, pollingInterval); diff --git a/static/style.css b/static/style.css index 5595acd..615b784 100644 --- a/static/style.css +++ b/static/style.css @@ -5,4 +5,34 @@ html { body { text-align: center; margin: auto; -} \ No newline at end of file +} + +.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; + } \ No newline at end of file diff --git a/views/processing.ejs b/views/processing.ejs index eb78a0b..f025572 100644 --- a/views/processing.ejs +++ b/views/processing.ejs @@ -9,11 +9,13 @@ -

Please wait

+

Please wait

Job ID: <%= job_id %>


-

Job State:

-

Job Error: None

-

Download

+
+ pending +
+

Job Error: None

+ Download \ No newline at end of file