made the loading animation prettier
This commit is contained in:
Marcel Gansfusz
256
index.html
256
index.html
@@ -1,113 +1,165 @@
|
||||
<!doctype html>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<body>
|
||||
<!-- The Modal -->
|
||||
<div id="loading" class="modal">
|
||||
<!-- Modal content -->
|
||||
<div class="loading-content">
|
||||
<span class="close">×</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>
|
||||
<body>
|
||||
<!-- The Modal -->
|
||||
<div id="loading" class="modal">
|
||||
<!-- Modal content -->
|
||||
<div class="loading-content">
|
||||
<!-- <span class="close">×</span> -->
|
||||
<div class="loader"></div>
|
||||
<p id="upload_status" class="upload_status_text">Uploading</p>
|
||||
</div>
|
||||
<div id="submitdiv">
|
||||
<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" />
|
||||
</div>
|
||||
<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>
|
||||
<!-- 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>
|
||||
</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>
|
||||
<div class="right" id="rightdiv">
|
||||
<div class="buttons" id="buttonsdiv">
|
||||
<button id="prev">Prev</button><button id="next">Next</button>
|
||||
<div>
|
||||
<span id="npage"></span>
|
||||
<span>/</span>
|
||||
<span id="npages"></span>
|
||||
<button type="submit" id="upload" method="POST" class="fileupload">
|
||||
Upload
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div id="submitdiv">
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
<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 class="right" id="rightdiv">
|
||||
<div class="buttons" id="buttonsdiv">
|
||||
<button id="prev">Prev</button><button id="next">Next</button>
|
||||
<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>
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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(
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user