portal-oddajanje-solar/templates/index.html
2020-10-23 10:07:14 +02:00

136 lines
5.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portal za oddajanje besedil za DS4 in DS1</title>
{{ dropzone.load_css() }}
<style>
#info-fields {
position: relative;
top: -350px;
}
label, input {
display: block;
}
input, select {
margin-bottom: 10px;
}
label {
margin-bottom: 5px;
}
#izjava {
float:left;
}
</style>
</head>
<body>
<h1>Portal za oddajanje besedil za DS4 in DS1</h1>
<form id="my-dropzone" class="dropzone" style="margin-top: 350px;">
<div id="info-fields">
<label for="tip">Želim prispevati:</label>
<select id="tip" name="tip" form="tip" required="required">
<option value="enojez">Enojezična besedila</option>
<option value="prevodi">Prevodi</option>
</select>
<label for="ime">*Ime:</label>
<input type="text" id="ime" name="ime" required="required"/>
<label for="podjetje">Podjetje / institucija:</label>
<input type="text" id="podjetje" name="podjetje"/>
<label for="email">*Email:</label>
<input type="text" id="email" name="email" required="required"/>
<label for="telefon">Telefon:</label>
<input type="text" id="telefon" name="telefon"/>
<input type="checkbox" id="izjava" name="izjava" value="izjava" required="required">
<label for="izjava">*Izjavljam, da sem lastnik avtorskih pravic in dovoljujem, da se besedila vključijo v korpuse v skladu z ustrezno licenco korpusa.</label>
<button type="submit">Oddaj</button>
</div>
<div class="dropzone-previews"></div>
</form>
{{ dropzone.load_js() }}
<script>
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
url: "/upload",
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 20,
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 1000, // MB
acceptedFiles: ".txt, .csv, .pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx",
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;
// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
// Check form validity.
var form = document.forms["my-dropzone"];
var ime = form["ime"].value;
var email = form["email"].value;
var podjetje = form["podjetje"].value;
var telefon = form["telefon"].value;
var izjava = form["izjava"].checked;
if (isEmptyOrSpaces(ime) || isEmptyOrSpaces(email) || !izjava) {
alert("Izpolnite vsa obvezna polja!");
} else if (!reEmail.test(email.toLowerCase())) {
alert("Email napačnega formata!");
} else if (ime.length > 100 || email.length > 100 || podjetje.length > 100 || telefon.length > 100) {
alert("Velikost polj je omejena na 100 znakov.");
} else {
dz.processQueue();
}
});
// 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
});
}
}
</script>
</body>
</html>