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>
<html lang="de">
<head>
<title>Unizeug uploader</title>
<link rel="stylesheet" href="static/style.css" />
@@ -9,10 +8,19 @@
<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/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" />
<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>
@@ -22,7 +30,7 @@
<div id="loading" class="modal">
<!-- Modal content -->
<div class="loading-content">
<span class="close">&times;</span>
<!-- <span class="close">&times;</span> -->
<div class="loader"></div>
<p id="upload_status" class="upload_status_text">Uploading</p>
</div>
@@ -34,7 +42,13 @@
<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" />
<input
type="file"
name="files"
id="filepicker"
multiple
placeholder="Drop File"
/>
</div>
<button type="submit" id="upload" method="POST" class="fileupload">
Upload
@@ -45,21 +59,44 @@
<form id="submitform" ,onsubmit="submitFile(event)">
<label for="lva">Lehrveranstaltung:</label>
<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>
<br />
<!-- <br /> -->
<label for="prof">Vortragende*r:</label>
<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>
<br />
<!-- <br /> -->
<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>
<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 />
<input type="radio" id="klausur" name="stype" value="1" />
<label for="klausur">Klausur</label><br />
@@ -77,15 +114,31 @@
<div id="subcatdiv">
<label for="subcat">Veranstaltung</label>
<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 id="datediv">
<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>
<input type="checkbox" name="censor" id="sec_censor" value="True" checked /><label
for="sec_censor">Zensieren</label><br /><br />
<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>
@@ -109,5 +162,4 @@
</div>
</div>
</body>
</html>

10
static/app.js
View File

@@ -287,7 +287,7 @@ async function submitForm(formData) {
const updateEventSource = new EventSource(
"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);
updateEventSource.addEventListener("censorUpdate", function(eve) {
console.log(eve.data);
@@ -384,11 +384,11 @@ function initListeners() {
}
function initLoading() {
modal = document.querySelector("#loading");
close_loading = document.querySelector(".close");
// close_loading = document.querySelector(".close");
upload_status = document.querySelector("#upload_status");
close_loading.addEventListener("click", function() {
modal.style.display = "none";
});
// close_loading.addEventListener("click", function() {
// modal.style.display = "none";
// });
}
const startPdf = () => {
// doc = new PDFDocument(

8
static/style.css
View File

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