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

80
index.html
View File

@@ -1,6 +1,5 @@
<!doctype html> <!doctype html>
<html lang="de"> <html lang="de">
<head> <head>
<title>Unizeug uploader</title> <title>Unizeug uploader</title>
<link rel="stylesheet" href="static/style.css" /> <link rel="stylesheet" href="static/style.css" />
@@ -9,10 +8,19 @@
<script src="static/autocomplete.js" defer></script> <script src="static/autocomplete.js" defer></script>
<script src="static/dynhide.js" defer></script> <script src="static/dynhide.js" defer></script>
<script src="static/filedrop.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/png"
href="/favicon/favicon-96x96.png"
sizes="96x96"
/>
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
<link rel="shortcut icon" href="/favicon/favicon.ico" /> <link rel="shortcut icon" href="/favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" /> <link
rel="apple-touch-icon"
sizes="180x180"
href="/favicon/apple-touch-icon.png"
/>
<meta name="apple-mobile-web-app-title" content="Unizeug" /> <meta name="apple-mobile-web-app-title" content="Unizeug" />
<link rel="manifest" href="/favicon/site.webmanifest" /> <link rel="manifest" href="/favicon/site.webmanifest" />
</head> </head>
@@ -22,7 +30,7 @@
<div id="loading" class="modal"> <div id="loading" class="modal">
<!-- Modal content --> <!-- Modal content -->
<div class="loading-content"> <div class="loading-content">
<span class="close">&times;</span> <!-- <span class="close">&times;</span> -->
<div class="loader"></div> <div class="loader"></div>
<p id="upload_status" class="upload_status_text">Uploading</p> <p id="upload_status" class="upload_status_text">Uploading</p>
</div> </div>
@@ -34,7 +42,13 @@
<form id="uploadform" enctype="multipart/form-data"> <form id="uploadform" enctype="multipart/form-data">
<div class="filetop"> <div class="filetop">
<!-- <label for="filepicker">Choose a file</label> --> <!-- <label for="filepicker">Choose a file</label> -->
<input type="file" name="files" id="filepicker" multiple placeholder="Drop File" /> <input
type="file"
name="files"
id="filepicker"
multiple
placeholder="Drop File"
/>
</div> </div>
<button type="submit" id="upload" method="POST" class="fileupload"> <button type="submit" id="upload" method="POST" class="fileupload">
Upload Upload
@@ -45,21 +59,44 @@
<form id="submitform" ,onsubmit="submitFile(event)"> <form id="submitform" ,onsubmit="submitFile(event)">
<label for="lva">Lehrveranstaltung:</label> <label for="lva">Lehrveranstaltung:</label>
<div class="autocomplete"> <div class="autocomplete">
<input type="text" id="lva" name="lva" placeholder="Lehrveranstaltung" autocomplete="off" /> <input
type="text"
id="lva"
name="lva"
placeholder="Lehrveranstaltung"
autocomplete="off"
/>
</div> </div>
<br /> <br />
<!-- <br /> --> <!-- <br /> -->
<label for="prof">Vortragende*r:</label> <label for="prof">Vortragende*r:</label>
<div class="autocomplete"> <div class="autocomplete">
<input type="text" id="prof" name="prof" placeholder="Vortragende*r" autocomplete="off" /> <input
type="text"
id="prof"
name="prof"
placeholder="Vortragende*r"
autocomplete="off"
/>
</div> </div>
<br /> <br />
<!-- <br /> --> <!-- <br /> -->
<label for="name">Name:</label> <label for="name">Name:</label>
<input type="text" id="name" name="fname" placeholder="Prüfung" /><br /> <input
type="text"
id="name"
name="fname"
placeholder="Prüfung"
/><br />
<label for="sem">Semester:</label> <label for="sem">Semester:</label>
<input type="text" id="sem" name="sem" placeholder="2024W" /><br /> <input type="text" id="sem" name="sem" placeholder="2024W" /><br />
<input type="radio" id="pruefung" name="stype" value="0" checked="checked" /> <input
type="radio"
id="pruefung"
name="stype"
value="0"
checked="checked"
/>
<label for="pruefung">Prüfung</label><br /> <label for="pruefung">Prüfung</label><br />
<input type="radio" id="klausur" name="stype" value="1" /> <input type="radio" id="klausur" name="stype" value="1" />
<label for="klausur">Klausur</label><br /> <label for="klausur">Klausur</label><br />
@@ -77,15 +114,31 @@
<div id="subcatdiv"> <div id="subcatdiv">
<label for="subcat">Veranstaltung</label> <label for="subcat">Veranstaltung</label>
<div class="autocomplete"> <div class="autocomplete">
<input type="text" id="subcat" name="subcat" placeholder="Klausur 1" autocomplete="off" /> <input
type="text"
id="subcat"
name="subcat"
placeholder="Klausur 1"
autocomplete="off"
/>
</div> </div>
</div> </div>
<div id="datediv"> <div id="datediv">
<label for="date">Datum</label> <label for="date">Datum</label>
<input type="date" id="date" name="ex_date" placeholder="Drop File" /><br /> <input
type="date"
id="date"
name="ex_date"
placeholder="Drop File"
/><br />
</div> </div>
<input type="checkbox" name="censor" id="sec_censor" value="True" checked /><label <input
for="sec_censor">Zensieren</label><br /><br /> 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> <button type="submit" id="send">Senden</button>
</form> </form>
</div> </div>
@@ -109,5 +162,4 @@
</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;