marcel/fet_Unizeug
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added Loading circle

Browse Source
This commit is contained in:
Marcel Gansfusz
2025-10-22 18:10:56 +02:00
parent 352540a3b1
commit 0c96d04326
3 changed files with 103 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@@ -18,6 +18,16 @@
</head> </head>
<body> <body>
<!-- The Modal -->
<div id="loading" class="modal">
<!-- Modal content -->
<div class="loading-content">
<span class="close">&times;</span>
<div class="loader"></div>
<p id="upload_status" class="upload_status_text">Uploading</p>
</div>
</div>
<!-- main -->
<div class="main"> <div class="main">
<div class="left" id="controldiv"> <div class="left" id="controldiv">
<div id="fileupload"> <div id="fileupload">

19
static/app.js
View File

@@ -188,6 +188,9 @@ class PDFDocument {
} }
} }
var mouseIsDown = false; var mouseIsDown = false;
var modal;
var close_loading;
var upload_status;
//var startX = 0; //var startX = 0;
//var startY = 0; //var startY = 0;
//var pdf; //var pdf;
@@ -284,15 +287,20 @@ async function submitForm(formData) {
const updateEventSource = new EventSource( const updateEventSource = new EventSource(
"http://127.0.0.1:8000/get_censor_status/" + doc.fID, "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) { updateEventSource.addEventListener("censorUpdate", function(eve) {
console.log(eve.data); 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", { const response = await fetch("http://127.0.0.1:8000/submit", {
method: "POST", method: "POST",
body: formData, body: formData,
}); });
updateEventSource.close(); updateEventSource.close();
modal.style.display = "none";
//let responseJSON=await response.json(); //let responseJSON=await response.json();
if (response.ok) { if (response.ok) {
console.log("Submit OK"); console.log("Submit OK");
@@ -374,6 +382,14 @@ function initListeners() {
doc.clearAll(); 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 = () => { const startPdf = () => {
// doc = new PDFDocument( // doc = new PDFDocument(
// "./files/b78c869f-e0bb-11ef-9b58-84144d05d665", // "./files/b78c869f-e0bb-11ef-9b58-84144d05d665",
@@ -382,6 +398,7 @@ const startPdf = () => {
// ); // );
//pdf = new PDFView("./VO_Mathematik_3.pdf"); //pdf = new PDFView("./VO_Mathematik_3.pdf");
doc = new PDFDocument("./files/greeting", "greeting", "pdf"); doc = new PDFDocument("./files/greeting", "greeting", "pdf");
initLoading();
initDraw(); initDraw();
initUpload(); initUpload();
initListeners(); initListeners();

75
static/style.css
View File

@@ -238,3 +238,78 @@ input[type="file"]::file-selector-button {
width: 100%; width: 100%;
/* background-color: purple; */ /* 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);
}
}