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

made the loading animation prettier

Browse Source
This commit is contained in:
Marcel Gansfusz
2025-10-22 21:11:40 +02:00
parent 0c96d04326
commit 26ea274023
3 changed files with 166 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
index.html
View File

@@ -1,113 +1,165 @@
<!doctype html> <!doctype html>
<html lang="de"> <html lang="de">
<head>
<title>Unizeug uploader</title>
<link rel="stylesheet" href="static/style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.min.js"></script>
<script src="static/app.js" defer></script>
<script src="static/autocomplete.js" defer></script>
<script src="static/dynhide.js" defer></script>
<script src="static/filedrop.js" defer></script>
<link
rel="icon"
type="image/png"
href="/favicon/favicon-96x96.png"
sizes="96x96"
/>
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
<link rel="shortcut icon" href="/favicon/favicon.ico" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicon/apple-touch-icon.png"
/>
<meta name="apple-mobile-web-app-title" content="Unizeug" />
<link rel="manifest" href="/favicon/site.webmanifest" />
</head>
<head> <body>
<title>Unizeug uploader</title> <!-- The Modal -->
<link rel="stylesheet" href="static/style.css" /> <div id="loading" class="modal">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.min.js"></script> <!-- Modal content -->
<script src="static/app.js" defer></script> <div class="loading-content">
<script src="static/autocomplete.js" defer></script> <!-- <span class="close">&times;</span> -->
<script src="static/dynhide.js" defer></script> <div class="loader"></div>
<script src="static/filedrop.js" defer></script> <p id="upload_status" class="upload_status_text">Uploading</p>
<link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
<link rel="shortcut icon" href="/favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="Unizeug" />
<link rel="manifest" href="/favicon/site.webmanifest" />
</head>
<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="left" id="controldiv">
<div id="fileupload">
<form id="uploadform" enctype="multipart/form-data">
<div class="filetop">
<!-- <label for="filepicker">Choose a file</label> -->
<input type="file" name="files" id="filepicker" multiple placeholder="Drop File" />
</div>
<button type="submit" id="upload" method="POST" class="fileupload">
Upload
</button>
</form>
</div> </div>
<div id="submitdiv"> </div>
<form id="submitform" ,onsubmit="submitFile(event)"> <!-- main -->
<label for="lva">Lehrveranstaltung:</label> <div class="main">
<div class="autocomplete"> <div class="left" id="controldiv">
<input type="text" id="lva" name="lva" placeholder="Lehrveranstaltung" autocomplete="off" /> <div id="fileupload">
</div> <form id="uploadform" enctype="multipart/form-data">
<br /> <div class="filetop">
<!-- <br /> --> <!-- <label for="filepicker">Choose a file</label> -->
<label for="prof">Vortragende*r:</label> <input
<div class="autocomplete"> type="file"
<input type="text" id="prof" name="prof" placeholder="Vortragende*r" autocomplete="off" /> name="files"
</div> id="filepicker"
<br /> multiple
<!-- <br /> --> placeholder="Drop File"
<label for="name">Name:</label> />
<input type="text" id="name" name="fname" placeholder="Prüfung" /><br />
<label for="sem">Semester:</label>
<input type="text" id="sem" name="sem" placeholder="2024W" /><br />
<input type="radio" id="pruefung" name="stype" value="0" checked="checked" />
<label for="pruefung">Prüfung</label><br />
<input type="radio" id="klausur" name="stype" value="1" />
<label for="klausur">Klausur</label><br />
<input type="radio" id="uebung" name="stype" value="2" />
<label for="uebung">Übung</label><br />
<input type="radio" id="labor" name="stype" value="3" />
<label for="labor">Labor</label><br />
<input type="radio" id="unterlagen" name="stype" value="4" />
<label for="unterlagen">Unterlagen</label><br />
<input type="radio" id="zusammenfassungen" name="stype" value="5" />
<label for="zusammenfassungen">Zusammenfassung</label><br />
<input type="radio" id="multimedia" name="stype" value="6" />
<label for="multimedia">Multimedia</label><br />
<br />
<div id="subcatdiv">
<label for="subcat">Veranstaltung</label>
<div class="autocomplete">
<input type="text" id="subcat" name="subcat" placeholder="Klausur 1" autocomplete="off" />
</div> </div>
</div> <button type="submit" id="upload" method="POST" class="fileupload">
<div id="datediv"> Upload
<label for="date">Datum</label> </button>
<input type="date" id="date" name="ex_date" placeholder="Drop File" /><br /> </form>
</div> </div>
<input type="checkbox" name="censor" id="sec_censor" value="True" checked /><label <div id="submitdiv">
for="sec_censor">Zensieren</label><br /><br /> <form id="submitform" ,onsubmit="submitFile(event)">
<button type="submit" id="send">Senden</button> <label for="lva">Lehrveranstaltung:</label>
</form> <div class="autocomplete">
</div> <input
</div> type="text"
<div class="right" id="rightdiv"> id="lva"
<div class="buttons" id="buttonsdiv"> name="lva"
<button id="prev">Prev</button><button id="next">Next</button> placeholder="Lehrveranstaltung"
<div> autocomplete="off"
<span id="npage"></span> />
<span>/</span> </div>
<span id="npages"></span> <br />
<!-- <br /> -->
<label for="prof">Vortragende*r:</label>
<div class="autocomplete">
<input
type="text"
id="prof"
name="prof"
placeholder="Vortragende*r"
autocomplete="off"
/>
</div>
<br />
<!-- <br /> -->
<label for="name">Name:</label>
<input
type="text"
id="name"
name="fname"
placeholder="Prüfung"
/><br />
<label for="sem">Semester:</label>
<input type="text" id="sem" name="sem" placeholder="2024W" /><br />
<input
type="radio"
id="pruefung"
name="stype"
value="0"
checked="checked"
/>
<label for="pruefung">Prüfung</label><br />
<input type="radio" id="klausur" name="stype" value="1" />
<label for="klausur">Klausur</label><br />
<input type="radio" id="uebung" name="stype" value="2" />
<label for="uebung">Übung</label><br />
<input type="radio" id="labor" name="stype" value="3" />
<label for="labor">Labor</label><br />
<input type="radio" id="unterlagen" name="stype" value="4" />
<label for="unterlagen">Unterlagen</label><br />
<input type="radio" id="zusammenfassungen" name="stype" value="5" />
<label for="zusammenfassungen">Zusammenfassung</label><br />
<input type="radio" id="multimedia" name="stype" value="6" />
<label for="multimedia">Multimedia</label><br />
<br />
<div id="subcatdiv">
<label for="subcat">Veranstaltung</label>
<div class="autocomplete">
<input
type="text"
id="subcat"
name="subcat"
placeholder="Klausur 1"
autocomplete="off"
/>
</div>
</div>
<div id="datediv">
<label for="date">Datum</label>
<input
type="date"
id="date"
name="ex_date"
placeholder="Drop File"
/><br />
</div>
<input
type="checkbox"
name="censor"
id="sec_censor"
value="True"
checked
/><label for="sec_censor">Zensieren</label><br /><br />
<button type="submit" id="send">Senden</button>
</form>
</div> </div>
<button id="clr">Clear Page</button><button id="ca">Claer All</button>
</div> </div>
<div id="cnvdiv"> <div class="right" id="rightdiv">
<div class="stack" id="cnvcont"> <div class="buttons" id="buttonsdiv">
<canvas id="cnv"></canvas> <button id="prev">Prev</button><button id="next">Next</button>
<canvas id="drw_cnv"></canvas> <div>
<span id="npage"></span>
<span>/</span>
<span id="npages"></span>
</div>
<button id="clr">Clear Page</button><button id="ca">Claer All</button>
</div>
<div id="cnvdiv">
<div class="stack" id="cnvcont">
<canvas id="cnv"></canvas>
<canvas id="drw_cnv"></canvas>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </body>
</body>
</html> </html>

10
static/app.js
View File

@@ -287,7 +287,7 @@ 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,
); );
modal.style.display = "block"; modal.style.display = "flex";
// console.log("http://127.0.0.1:8000/get_censor_status/" + doc.fID); // 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);
@@ -384,11 +384,11 @@ function initListeners() {
} }
function initLoading() { function initLoading() {
modal = document.querySelector("#loading"); modal = document.querySelector("#loading");
close_loading = document.querySelector(".close"); // close_loading = document.querySelector(".close");
upload_status = document.querySelector("#upload_status"); upload_status = document.querySelector("#upload_status");
close_loading.addEventListener("click", function() { // close_loading.addEventListener("click", function() {
modal.style.display = "none"; // modal.style.display = "none";
}); // });
} }
const startPdf = () => { const startPdf = () => {
// doc = new PDFDocument( // doc = new PDFDocument(

8
static/style.css
View File

@@ -259,18 +259,23 @@ input[type="file"]::file-selector-button {
/* Fallback color */ /* Fallback color */
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */ /* Black w/ opacity */
justify-content: center;
} }
/* Modal Content/Box */ /* Modal Content/Box */
.loading-content { .loading-content {
background-color: #4f5977; background-color: #4f5977;
margin: 15% auto; margin: auto;
/* 15% from the top and centered */ /* 15% from the top and centered */
padding: 20px; padding: 20px;
/* border: 1px solid #888; */ /* border: 1px solid #888; */
/* width: 80%; */ /* width: 80%; */
border-radius: 15px; border-radius: 15px;
display: flex;
flex-direction: column;
/* Could be more or less, depending on screen size */ /* Could be more or less, depending on screen size */
align-items: center;
text-align: center;
} }
/* The Close Button */ /* The Close Button */
@@ -294,6 +299,7 @@ input[type="file"]::file-selector-button {
} }
.loader { .loader {
margin: auto;
border: 16px solid #f3f3f3; border: 16px solid #f3f3f3;
/* Light grey */ /* Light grey */
border-top: 16px solid #3498db; border-top: 16px solid #3498db;