portal-oddajanje-solar/templates/solar-oddaja.html

321 lines
15 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portal za oddajanje besedil</title>
<!--{{ dropzone.load_css() }}-->
<link rel="stylesheet" href="/static/dropzone.css" type="text/css">
{{ dropzone.style('position: absolute;
top: -0.5px;
width: 388px;
height: 732px;
left: 385px;
background: linear-gradient(198.62deg, rgba(255, 255, 255, 0.49) -1.62%, rgba(255, 255, 255, 0.73) -1.61%, rgba(255, 255, 255, 0.41) 79.34%);
box-shadow: 20px 4px 40px rgba(0, 0, 0, 0.25);
border: 0px;
2021-09-21 15:34:35 +00:00
backdrop-filter: blur(20px);
border-radius: 0px 20px 20px 0px;') }}
<link rel="stylesheet" href="/static/style.css" type="text/css">
</head>
<body>
2021-10-12 09:11:37 +00:00
<a href="../logout">Odjavi se</a>
{% if is_institution_coordinator %}
2021-10-12 09:11:37 +00:00
<br><a href="../manage-institution">Upravljaj z institucijo</a>
{% endif %}
{% if is_admin %}
2021-10-12 09:11:37 +00:00
<br><a href="../admin">Administracijski meni</a>
{% endif %}
<br><a href="mailto:email@example.com">Pomoč</a>
<div class="bg"></div>
<div id="main-window">
<div id="rect1">
<div id="logo-container">
<img src="/static/image/logo.svg" alt="logo"/>
</div>
<form id="my-dropzone" class="dropzone">
<div style="position: relative; right: 390px;">
<h1 id="title" style="font-size: 25px;">Korpus ŠOLAR</h1>
<div class="selection-tabs">
2021-05-24 08:15:54 +00:00
<button id="button-oddaja" class="selection-tab-button selected">ODDAJA</button>
<button id="button-zgodovina" class="selection-tab-button">ZGODOVINA</button>
<button id="button-pogodbe" class="selection-tab-button">POGODBE</button>
</div>
2021-05-05 12:26:26 +00:00
{% if not institution %}
<div class="warning">Niste član nobene institucije!</div>
{% elif not institution_contract %}
<div class="warning">Pogodba s šolo še ni naložena!</div>
{% endif %}
<div id="data-confirm-notification" class="message-notification" style="display: none;">Prosimo, preverite in potrdite vnešene podatke.</div>
2021-05-05 12:26:26 +00:00
<label for="program">PROGRAM</label>
<select id="program" name="program">
<option value="OS" selected="selected">Osnovnošolski (OŠ)</option>
<option value="SSG">Splošna in strokovna gimnazija (SGG)</option>
<option value="MGP">Mednarodni gimnazijski programi (MGP)</option>
<option value="ZG">Zasebne gimnazije (ZG)</option>
<option value="NPI">Nižje poklicno izobraževanje (NPI)</option>
<option value="SPI">Srednje poklicno izobraževanje (SPI)</option>
<option value="SSI">Srednje strokovno izobraževanje (SSI)</option>
<option value="PTI">Poklicno-tehnično izobraževanje (PTI)</option>
</select>
<label for="predmet">PREDMET</label>
<select id="predmet" name="predmet">
<option value="slo" selected="selected">Slovenščina</option>
<option value="drug-jez">Drugi jezikoslovni predmeti</option>
<option value="drug-druz">Drugi družboslovni predmeti</option>
<option value="drug-narav">Drugi naravoslovni predmeti</option>
<option value="drug-strok">Drugi strokovni predmeti</option>
<option value="drug-izb">Drugi izbirni ali dodatni predmeti</option>
</select>
<div id="predmet-custom-box" style="display: none;">
<label for="predmet-custom">Ime predmeta:</label>
<input type="text" id="predmet-custom" name="predmet-custom"/>
</div>
2021-05-05 12:26:26 +00:00
<label for="letnik">LETNIK</label>
<select id="letnik" name="letnik">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<label for="vrsta">VRSTA BESEDILA</label>
<select id="vrsta" name="vrsta">
<option value="esej-spis" selected="selected">Esej ali spis</option>
<option value="prakticno">Praktično besedilo (npr. vabila, prošnje ipd. pri pouku slovenščine), napisano za oceno</option>
<option value="solski-test">Šolski test</option>
<option value="delo-v-razredu">Delo v razredu, ne za oceno</option>
</select>
<div id="vrsta-custom-box" style="display: none;">
<label for="vrsta-custom">Vtipkajte besedilno vrsto:</label>
<input type="text" id="vrsta-custom" name="vrsta-custom"/>
</div>
2021-05-05 12:26:26 +00:00
<label for="solsko-leto">ŠOLSKO LETO</label>
<select id="solsko-leto" name="solsko-leto">
<option value="20-21" selected="selected">2020/21</option>
<option value="21-22">2021/22</option>
</select>
<label for="jezikovni-popravki">JEZIKOVNI POPRAVKI</label>
<select id="jezikovni-popravki" name="jezikovni-popravki">
<option value="popr-ne" selected="selected">Besedilo vsebuje učiteljske popravke in strinjam se z njihovo vključitvijo v korpus</option>
<option value="brez-popr">Besedilo ne vsebuje učiteljskih popravkov</option>
<option value="popr-da">Besedilo vsebuje učiteljske popravke in ne strinjam se z njihovo vključitvijo v korpus</option>
</select>
<button id="button-submit" type="submit">Oddaj</button>
</div>
<div class="dropzone-previews">
</div>
</form>
</div>
</div>
<div id="popup-terms" style="display: none">
<div id="popup-terms-text">
</div>
<button id="button-submit-cancel" class="button-terms" style="background: #ff2d2d;">Prekliči</button>
<button id="button-submit-final" class="button-terms">Oddaj</button>
</div>
<!--{{ dropzone.load_js() }}-->
<script src="/static/dropzone.js"></script>
<script>
/////////////////////////
// Dropzone //
/////////////////////////
var selectPredmet = document.getElementById("predmet");
var selectVrsta = document.getElementById("vrsta");
var btnSubmit = document.getElementById("button-submit");
var btnSubmitFinal = document.getElementById("button-submit-final");
var btnSubmitCancel = document.getElementById("button-submit-cancel");
2021-05-24 08:15:54 +00:00
var btnZgodovina = document.getElementById("button-zgodovina");
var btnPogodbe = document.getElementById("button-pogodbe");
var elemTermsPopup = document.getElementById("popup-terms");
var termsScrollbox = document.getElementById("popup-terms-text");
var dataConfirmNotification = document.getElementById("data-confirm-notification");
var scrollboxTriggered = false;
var form = document.forms["my-dropzone"];
2021-09-16 15:25:20 +00:00
{% if not institution %}
btnSubmit.disabled = true;
{% endif %}
function isEmptyOrSpaces(str){
return str == null || str.match(/^ *$/) !== null;
}
const reEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
Dropzone.options.myDropzone = { // The camelized version of the ID of the form element
2021-10-12 09:11:37 +00:00
url: "../upload",
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 20,
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 1000, // MB
2021-05-27 07:29:32 +00:00
timeout: 5000000, // milliseconds
2021-09-16 15:25:20 +00:00
acceptedFiles: ".txt, .csv, .pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .jpg, .jpeg, .png",
maxFiles: 20,
dictDefaultMessage: `Kliknite ali odložite datoteke sem.`,
dictFallbackMessage: "Vaš brskalnik ne podpira izbiranje datotek z odlaganjem (\"drag & drop\").",
dictInvalidFileType: "Datoteka je napačnega formata.",
dictFileTooBig: "Datoteke je prevelika {{filesize}}. Največja dovoljena velikost: {{maxFilesize}}MiB.",
dictResponseError: "Napaka strežnika: {{statusCode}}",
dictMaxFilesExceeded: "Ne morete naložiti več datotek.",
dictCancelUpload: "Prekini prenos",
dictRemoveFile: "Odstrani datoteko",
dictCancelUploadConfirmation: "Ali res želite odstraniti to datoteko?",
dictUploadCanceled: "Prenos prekinjen",
// The setting up of the dropzone
init: function() {
var dz = this;
selectPredmet.addEventListener("change", function(e) {
var predmetCustomBox = document.getElementById("predmet-custom-box");
if (selectPredmet.value.startsWith("drug")) {
predmetCustomBox.style.display = "inherit";
} else {
predmetCustomBox.style.display = "none";
}
});
selectVrsta.addEventListener("change", function(e) {
var vrstaCustomBox = document.getElementById("vrsta-custom-box");
if (selectVrsta.value == "delo-v-razredu") {
vrstaCustomBox.style.display = "inherit";
} else {
vrstaCustomBox.style.display = "none";
}
});
btnSubmit.addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
// Check form validity.
var program = form["program"].value;
var predmet = form["predmet"].value;
var predmetCustom = form["predmet-custom"].value;
var letnik = form["letnik"].value;
var vrsta = form["vrsta"].value;
var vrstaCustom = form["vrsta-custom"].value;
var solskoLeto = form["solsko-leto"].value;
var jezikovniPopravki = form["jezikovni-popravki"].value;
if (predmet.startsWith("drug") && isEmptyOrSpaces(predmetCustom)) {
alert("Polje za predmet ne more biti prazno!");
} else if (vrsta === "delo-v-razredu" && isEmptyOrSpaces(vrstaCustom)) {
alert("Polje za vrsto besedila ne more biti prazno!");
} else if (dataConfirmNotification.style.display == "none") {
dataConfirmNotification.style.display = "inherit";
btnSubmit.textContent = "Potrdi";
} else {
// Then make terms popup visible
2021-09-16 15:25:20 +00:00
//btnSubmit.disabled = true;
//btnSubmitFinal.disabled = true;
//elemTermsPopup.style.display = "inline";
//scrollboxtriggered = false;
// Hand off data to dropzone
dz.processQueue();
// Clear fields and hide popup agian
dataConfirmNotification.style.display = "none";
btnSubmit.textContent = "Oddaj";
form.reset();
}
});
2021-05-24 08:15:54 +00:00
// First change the button to actually tell dropzone to process the queue.
btnSubmitFinal.addEventListener("click", function(e) {
// Hand off data to dropzone
dz.processQueue();
// Clear fields and hide popup agian
btnSubmit.disabled = false;
elemTermsPopup.style.display = "none";
dataConfirmNotification.style.display = "none";
btnSubmit.textContent = "Oddaj";
form.reset();
scrollboxTriggered = false;
});
btnSubmitCancel.addEventListener("click", function(e) {
btnSubmit.disabled = false;
scrollboxTriggered = false;
elemTermsPopup.style.display = "none";
});
2021-05-24 08:15:54 +00:00
btnZgodovina.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
2021-10-12 09:11:37 +00:00
window.location.replace("../zgodovina");
2021-05-24 08:15:54 +00:00
});
btnPogodbe.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
2021-10-12 09:11:37 +00:00
window.location.replace("../pogodbe");
2021-05-24 08:15:54 +00:00
});
// Enable final submit button only if user scrolls to the end of the terms.
function checkScrollboxTrigger(event) {
var element = event.target;
if (!scrollboxTriggered
&& element.scrollHeight - element.scrollTop <= element.clientHeight + 50
) {
scrollboxTriggered = true;
btnSubmitFinal.disabled = false;
}
}
termsScrollbox.addEventListener('scroll', function(event) {
checkScrollboxTrigger(event);
});
termsScrollbox.addEventListener("mouseenter", function(event) {
checkScrollboxTrigger(event);
});
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function() {
// Gets triggered when the form is actually being sent.
// Hide the success button or the complete form.
});
this.on("successmultiple", function(files, response) {
// Gets triggered when the files have successfully been sent.
// Redirect user or notify of success.
alert("Odgovor strežnika: " + response);
location.reload();
});
this.on("errormultiple", function(files, response) {
// Gets triggered when there was an error sending the files.
// Maybe show form again, and notify user of error
});
2021-05-24 08:15:54 +00:00
}
}
</script>
</body>
</html>