diff --git a/static/app.js b/static/app.js
index ea7d806..5aaf568 100644
--- a/static/app.js
+++ b/static/app.js
@@ -188,6 +188,9 @@ class PDFDocument {
}
}
var mouseIsDown = false;
+var modal;
+var close_loading;
+var upload_status;
//var startX = 0;
//var startY = 0;
//var pdf;
@@ -284,15 +287,20 @@ async function submitForm(formData) {
const updateEventSource = new EventSource(
"http://127.0.0.1:8000/get_censor_status/" + doc.fID,
);
- console.log("http://127.0.0.1:8000/get_censor_status/" + doc.fID);
+ modal.style.display = "block";
+ // console.log("http://127.0.0.1:8000/get_censor_status/" + doc.fID);
updateEventSource.addEventListener("censorUpdate", function(eve) {
console.log(eve.data);
+ var data = JSON.parse(eve.data);
+ upload_status.innerText =
+ "Censoring Page " + data.page + "/" + data.pages;
});
const response = await fetch("http://127.0.0.1:8000/submit", {
method: "POST",
body: formData,
});
updateEventSource.close();
+ modal.style.display = "none";
//let responseJSON=await response.json();
if (response.ok) {
console.log("Submit OK");
@@ -374,6 +382,14 @@ function initListeners() {
doc.clearAll();
});
}
+function initLoading() {
+ modal = document.querySelector("#loading");
+ close_loading = document.querySelector(".close");
+ upload_status = document.querySelector("#upload_status");
+ close_loading.addEventListener("click", function() {
+ modal.style.display = "none";
+ });
+}
const startPdf = () => {
// doc = new PDFDocument(
// "./files/b78c869f-e0bb-11ef-9b58-84144d05d665",
@@ -382,6 +398,7 @@ const startPdf = () => {
// );
//pdf = new PDFView("./VO_Mathematik_3.pdf");
doc = new PDFDocument("./files/greeting", "greeting", "pdf");
+ initLoading();
initDraw();
initUpload();
initListeners();
diff --git a/static/style.css b/static/style.css
index 1593cbb..06b9705 100644
--- a/static/style.css
+++ b/static/style.css
@@ -238,3 +238,78 @@ input[type="file"]::file-selector-button {
width: 100%;
/* background-color: purple; */
}
+
+/* The Modal (background) */
+.modal {
+ display: none;
+ /* Hidden by default */
+ position: fixed;
+ /* Stay in place */
+ z-index: 1;
+ /* Sit on top */
+ left: 0;
+ top: 0;
+ width: 100%;
+ /* Full width */
+ height: 100%;
+ /* Full height */
+ overflow: auto;
+ /* Enable scroll if needed */
+ background-color: #4f5977;
+ /* Fallback color */
+ background-color: rgba(0, 0, 0, 0.4);
+ /* Black w/ opacity */
+}
+
+/* Modal Content/Box */
+.loading-content {
+ background-color: #4f5977;
+ margin: 15% auto;
+ /* 15% from the top and centered */
+ padding: 20px;
+ /* border: 1px solid #888; */
+ /* width: 80%; */
+ border-radius: 15px;
+ /* Could be more or less, depending on screen size */
+}
+
+/* The Close Button */
+.close {
+ color: #aaa;
+ float: right;
+ font-size: 28px;
+ font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+ color: black;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.upload_status_text {
+ color: #ffffff;
+ font-size: 16pt;
+}
+
+.loader {
+ border: 16px solid #f3f3f3;
+ /* Light grey */
+ border-top: 16px solid #3498db;
+ /* Blue */
+ border-radius: 50%;
+ width: 120px;
+ height: 120px;
+ animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}