290 lines
8.9 KiB
Plaintext
290 lines
8.9 KiB
Plaintext
<br>
|
|
<form id="publishForm" method="POST" novalidate >
|
|
<div class="row">
|
|
<div class="col s12">
|
|
<ul class="tabs">
|
|
<li class="tab col s3"><a href="#publishBasicData">Osnovni podaci</a></li>
|
|
<li class="tab col s3"><a href="#publishAdditionalData">Dodatni podaci</a></li>
|
|
<li class="tab col s2"><a href="#publishLocation">Lokacija</a></li>
|
|
<li class="tab col s2"><a href="#publishPhotos">Fotografije</a></li>
|
|
<li class="tab col s2"><a href="#publishEnd">Kraj</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
<div id="publishBasicData" class="col s12">
|
|
<%- include("./publishBasicData.ejs") %>
|
|
</div>
|
|
<div id="publishAdditionalData" class="col s12">
|
|
<%- include("./publishAdditionalData.ejs") %>
|
|
</div>
|
|
<div id="publishLocation" class="col s12">
|
|
<%- include("./publishLocation.ejs") %>
|
|
</div>
|
|
<div id="publishPhotos" class="col s12">
|
|
<%- include("./publishPhotos.ejs") %>
|
|
</div>
|
|
<div id="publishEnd" class="col s12">
|
|
<%- include("./publishEnd.ejs") %>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</form>
|
|
|
|
<script>
|
|
function uuidv4() {
|
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
|
const r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
|
|
return v.toString(16);
|
|
});
|
|
}
|
|
|
|
function getFileName(fileName) {
|
|
const encodedFileName = (uuidv4() + fileName).replace(/\s+/g, '');
|
|
return encodedFileName;
|
|
}
|
|
|
|
function upload() {
|
|
var file = $('#selector')[0].files[0];
|
|
uploadFile(file)
|
|
}
|
|
|
|
|
|
async function generateSignedURL(file) {
|
|
const fileName = getFileName(file.name);
|
|
const response = await fetch('/generateSignedURL?filename=' + fileName);
|
|
if (!response.ok) {
|
|
throw new Error('Network response for fetch was not ok.');
|
|
}
|
|
let signedUrl = await response.text();
|
|
signedUrl = signedUrl.replace(/\"/g, "")
|
|
await uploadFile(file, fileName, signedUrl);
|
|
return fileName;
|
|
}
|
|
|
|
function uploadFile(file, fileName, url) {
|
|
return fetch(url, {
|
|
method: 'PUT',
|
|
headers: new Headers({'content-type': 'image/*'}),
|
|
mode: 'cors',
|
|
body: file
|
|
})
|
|
.then(response => response.text())
|
|
.then (response => {
|
|
return response;
|
|
}
|
|
)
|
|
.catch(error => $("#status").html(error)
|
|
)
|
|
.then(response => {
|
|
$("#imageUrls").val($("#imageUrls").val()+ fileName+"|");
|
|
});
|
|
|
|
}
|
|
|
|
$(document).ready(function(){
|
|
$('.tabs').tabs();
|
|
|
|
// Manual dropzone init
|
|
const dropzoneOptions = {
|
|
url: "/photos-upload", //can be a function that returns url ?
|
|
autoProcessQueue:false, //not to upload files automaticly
|
|
method: "put", //or post
|
|
parallelUploads: 1,
|
|
uploadMultiple: false,
|
|
addRemoveLinks: true,
|
|
maxFilesize: 2, //MB,
|
|
resizeWidth: 600,
|
|
maxFiles: 10,
|
|
acceptedFiles: "image/*",
|
|
dictDefaultMessage: `<span class="text-center">
|
|
<h3>Prevuci fotografije ili klikni za dodavanje!</h3>
|
|
(Maksimalno 10 fotografija.)
|
|
</span>`,
|
|
dictResponseError: 'Error uploading file!',
|
|
dictRemoveFile: 'Izbriši ',
|
|
dictFileTooBig: 'Fajl je prevelik!',
|
|
dictInvalidFileType: 'Iabrani fajl nije fotografija!',
|
|
dictMaxFilesExceeded: 'Dostigli ste maksimalan broj fotografija!'
|
|
};
|
|
var photosUploader = new Dropzone('#photos-upload', dropzoneOptions);
|
|
|
|
|
|
//VALIDATION - WiP
|
|
//Helper validation functions
|
|
const isValidEmail = $email => {
|
|
const simpleEmailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
|
return $email && $email.length < 250 && simpleEmailRegex.test($email);
|
|
};
|
|
|
|
const isPresent = $input => {
|
|
return $input && $input!=="" && $input != null;
|
|
};
|
|
|
|
const isNumber = $input => {
|
|
const simpleNumberRegex = /([0-9]+[.|,][0-9])|([0-9][.|,][0-9]+)|([0-9]+)/;
|
|
return $input && $input.length <250 && simpleNumberRegex.test($input) && !isNaN($input);
|
|
};
|
|
|
|
const isInteger = $input => {
|
|
const simpleIntegerRegex = /^([+-]?[1-9]\d*|0)$/;
|
|
return $input && $input.length <250 && simpleIntegerRegex.test($input);
|
|
};
|
|
|
|
const form = document.querySelector("#publishForm");
|
|
|
|
function showErrors(form, errors) {
|
|
// We loop through all the inputs and show the errors for that input
|
|
//_.each(form.querySelectorAll("input[name], select[name]"), function(input) {
|
|
// Since the errors can be null if no errors were found we need to handle
|
|
// that
|
|
showErrorsForInput(input, errors && errors[input.name]);
|
|
// });
|
|
}
|
|
|
|
// Shows the errors for a specific input
|
|
function showErrorsForInput(input, errors) {
|
|
// This is the root of the input
|
|
var formGroup = closestParent(input.parentNode, "form-group"),
|
|
// Find where the error messages will be insert into
|
|
messages = formGroup.querySelector(".messages");
|
|
// First we remove any old messages and resets the classes
|
|
resetFormGroup(formGroup);
|
|
// If we have errors
|
|
if (errors) {
|
|
// we first mark the group has having errors
|
|
formGroup.classList.add("has-error");
|
|
// then we append all the errors
|
|
$.each(errors, function(error) {
|
|
addError(messages, errors[error]);
|
|
});
|
|
|
|
} else {
|
|
// otherwise we simply mark it as success
|
|
formGroup.classList.add("has-success");
|
|
}
|
|
}
|
|
|
|
// Recusively finds the closest parent that has the specified class
|
|
function closestParent(child, className) {
|
|
if (!child || child == document) {
|
|
return null;
|
|
}
|
|
if (child.classList.contains(className)) {
|
|
return child;
|
|
} else {
|
|
return closestParent(child.parentNode, className);
|
|
}
|
|
}
|
|
|
|
function resetFormGroup(formGroup) {
|
|
formGroup.classList.remove("has-error");
|
|
formGroup.classList.remove("has-success");
|
|
$.each(formGroup.querySelectorAll(".help-block.error"), function(el) {
|
|
el.parentNode.removeChild(el);
|
|
});
|
|
}
|
|
|
|
// Adds the specified error with the following markup
|
|
// <p class="help-block error">[message]</p>
|
|
function addError(messages, error) {
|
|
var block = document.createElement("p");
|
|
block.classList.add("help-block");
|
|
block.classList.add("error");
|
|
block.innerText = error;
|
|
messages.appendChild(block);
|
|
}
|
|
|
|
const validate = (input) => {
|
|
|
|
let valid=true;
|
|
let errorMsg =[];
|
|
let constraint = input.constraint[0];
|
|
|
|
switch (constraint) {
|
|
case "required":
|
|
valid = isPresent ($(`#${input.dbField}`).val());
|
|
errorMsg = ["Ovo je obavezno polje."];
|
|
break;
|
|
case "numerical":
|
|
valid = isNumber ($(`#${input.dbField}`).val());
|
|
errorMsg = ["Unesite brojcanu vrijednost."];
|
|
break;
|
|
case "integer":
|
|
valid = isInteger ($(`#${input.dbField}`).val());
|
|
errorMsg = ["Unesite cijeli broj."];
|
|
break;
|
|
default :
|
|
valid = true;
|
|
}
|
|
if (!valid) {
|
|
const inputField = document.querySelector(`#${input.dbField}`);
|
|
showErrorsForInput( inputField, errorMsg);
|
|
return false;
|
|
} else {
|
|
return true;
|
|
}
|
|
|
|
}
|
|
|
|
$("#submit").click( async function (e) {
|
|
e.preventDefault();
|
|
|
|
if (marker) {
|
|
const currentLocation = marker.getPosition();
|
|
|
|
$("#lat").val(currentLocation.lat());
|
|
|
|
$("#lng").val(currentLocation.lng());
|
|
|
|
$("#locationInput").val(
|
|
document.getElementById("autocompleteInput").value
|
|
);
|
|
} else {
|
|
$("#lat").val(0);
|
|
|
|
$("#lng").val(0);
|
|
}
|
|
|
|
//Tag for checking of error presence
|
|
let hasErrors = false;
|
|
//Check if email is valid
|
|
const validEmail = isValidEmail($("#email").val());
|
|
//Show messeges for invalid email is present
|
|
if (!validEmail) {
|
|
const errorMsgs = ["Unesite validan email."];
|
|
const email = document.querySelector("#email");
|
|
showErrorsForInput( email, errorMsgs)
|
|
hasErrors = true;
|
|
};
|
|
//Check if other input fields are valid - vratiti se na ovo!!
|
|
//const basicInputInputs= document.getElementById("basic-inputs").getElementsByTagName("input");
|
|
|
|
//alert(JSON.stringify(""));
|
|
/*
|
|
$.each(basicInputInputs, function (input) {
|
|
alert(input);
|
|
validate (input);
|
|
})
|
|
for (const input of basicInputInputs ) {
|
|
alert(input.getAttribute(name));
|
|
|
|
validate (input);
|
|
} */
|
|
const addedFiles = photosUploader.files.filter(file => file.status!=="error");
|
|
const asyncUpload =[];
|
|
|
|
addedFiles.forEach( file => {
|
|
asyncUpload.push(generateSignedURL(file));
|
|
})
|
|
|
|
if (!hasErrors) {
|
|
await Promise.all(asyncUpload);
|
|
$("#publishForm").submit();
|
|
|
|
};
|
|
|
|
});
|
|
});
|
|
|
|
</script> |