Dropzone edit opction adadded.
This commit is contained in:
Naida Vatric
397
help.js
397
help.js
@@ -1,237 +1,184 @@
|
||||
(function() {
|
||||
// Before using it we must add the parse and format functions
|
||||
// Here is a sample implementation using moment.js
|
||||
validate.extend(validate.validators.datetime, {
|
||||
// The value is guaranteed not to be null or undefined but otherwise it
|
||||
// could be anything.
|
||||
parse: function(value, options) {
|
||||
return +moment.utc(value);
|
||||
},
|
||||
// Input is a unix timestamp
|
||||
format: function(value, options) {
|
||||
var format = options.dateOnly ? "YYYY-MM-DD" : "YYYY-MM-DD hh:mm:ss";
|
||||
return moment.utc(value).format(format);
|
||||
}
|
||||
});
|
||||
let autocomplete;
|
||||
let map;
|
||||
let places;
|
||||
let geocoder;
|
||||
let marker =false; //Initialy no marker on map
|
||||
|
||||
// These are the constraints used to validate the form
|
||||
var constraints = {
|
||||
email: {
|
||||
// Email is required
|
||||
presence: true,
|
||||
// and must be an email (duh)
|
||||
email: true
|
||||
},
|
||||
password: {
|
||||
// Password is also required
|
||||
presence: true,
|
||||
// And must be at least 5 characters long
|
||||
length: {
|
||||
minimum: 5
|
||||
}
|
||||
},
|
||||
"confirm-password": {
|
||||
// You need to confirm your password
|
||||
presence: true,
|
||||
// and it needs to be equal to the other password
|
||||
equality: {
|
||||
attribute: "password",
|
||||
message: "^The passwords does not match"
|
||||
}
|
||||
},
|
||||
username: {
|
||||
// You need to pick a username too
|
||||
presence: true,
|
||||
// And it must be between 3 and 20 characters long
|
||||
length: {
|
||||
minimum: 3,
|
||||
maximum: 20
|
||||
},
|
||||
format: {
|
||||
// We don't allow anything that a-z and 0-9
|
||||
pattern: "[a-z0-9]+",
|
||||
// but we don't care if the username is uppercase or lowercase
|
||||
flags: "i",
|
||||
message: "can only contain a-z and 0-9"
|
||||
}
|
||||
},
|
||||
birthdate: {
|
||||
// The user needs to give a birthday
|
||||
presence: true,
|
||||
// and must be born at least 18 years ago
|
||||
date: {
|
||||
latest: moment().subtract(18, "years"),
|
||||
message: "^You must be at least 18 years old to use this service"
|
||||
}
|
||||
},
|
||||
country: {
|
||||
// You also need to input where you live
|
||||
presence: true,
|
||||
// And we restrict the countries supported to Sweden
|
||||
inclusion: {
|
||||
within: ["SE"],
|
||||
// The ^ prevents the field name from being prepended to the error
|
||||
message: "^Sorry, this service is for Sweden only"
|
||||
}
|
||||
},
|
||||
zip: {
|
||||
// Zip is optional but if specified it must be a 5 digit long number
|
||||
format: {
|
||||
pattern: "\\d{5}"
|
||||
}
|
||||
},
|
||||
"number-of-children": {
|
||||
presence: true,
|
||||
// Number of children has to be an integer >= 0
|
||||
numericality: {
|
||||
onlyInteger: true,
|
||||
greaterThanOrEqualTo: 0
|
||||
const editingRealEstate = <%- editingRealEstate %>;
|
||||
|
||||
|
||||
function locateMe() {
|
||||
if (navigator.geolocation) {
|
||||
function onLocationSuccess(position) {
|
||||
const coordinates =
|
||||
position && position.coords ? position.coords : null;
|
||||
if (coordinates) {
|
||||
const longitude = coordinates.longitude || null;
|
||||
const latitude = coordinates.latitude || null;
|
||||
|
||||
if (longitude && latitude && map) {
|
||||
map.setCenter({ lat: latitude, lng: longitude });
|
||||
map.setZoom(16);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
navigator.geolocation.getCurrentPosition(onLocationSuccess);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function initMap() {
|
||||
const BOSNIA_BOUNDS = {
|
||||
north: 45.7,
|
||||
south: 41.69,
|
||||
west: 15.55,
|
||||
east: 20.77
|
||||
};
|
||||
const SARAJEVO_COORDINATES = {
|
||||
lat: 43.85,
|
||||
lng: 18.41
|
||||
};
|
||||
|
||||
const mapElement = document.getElementById("map");
|
||||
const restrictMapPanningToBosniaOnly = {
|
||||
latLngBounds: BOSNIA_BOUNDS,
|
||||
strictBounds: true
|
||||
};
|
||||
const initialMapParams = {
|
||||
center: SARAJEVO_COORDINATES,
|
||||
zoom: 12,
|
||||
restriction: restrictMapPanningToBosniaOnly,
|
||||
mapTypeControl: false,
|
||||
panControl: false,
|
||||
zoomControl: true,
|
||||
streetViewControl: false
|
||||
};
|
||||
map = new google.maps.Map(mapElement, initialMapParams);
|
||||
|
||||
const inputElement = document.getElementById("autocompleteInput");
|
||||
const restrictAutocompleteResultsToBosniaOnly = { country: "ba" };
|
||||
const initialAutocompleteParams = {
|
||||
types: ["geocode"],
|
||||
componentRestrictions: restrictAutocompleteResultsToBosniaOnly,
|
||||
fields: ["geometry", "types", "address_components"]
|
||||
};
|
||||
|
||||
autocomplete = new google.maps.places.Autocomplete(
|
||||
inputElement,
|
||||
initialAutocompleteParams
|
||||
);
|
||||
autocomplete.bindTo("bounds", map);
|
||||
autocomplete.addListener("place_changed", onPlaceChanged);
|
||||
pacSelectFirst(inputElement);
|
||||
addLocateMeButton(map);
|
||||
|
||||
// Hook up the form so we can prevent it from being posted
|
||||
var form = document.querySelector("form#main");
|
||||
form.addEventListener("submit", function(ev) {
|
||||
ev.preventDefault();
|
||||
handleFormSubmit(form);
|
||||
});
|
||||
//Move map and marker to already selected position if in editing mode
|
||||
if( editingRealEstate===true) {
|
||||
console.log('Editujem mapu!');
|
||||
setMarkerToLocation(map, editingRealEstate);
|
||||
}
|
||||
|
||||
// Hook up the inputs to validate on the fly
|
||||
var inputs = document.querySelectorAll("input, textarea, select");
|
||||
for (var i = 0; i < inputs.length; ++i) {
|
||||
inputs.item(i).addEventListener("change", function(ev) {
|
||||
var errors = validate(form, constraints) || {};
|
||||
showErrorsForInput(this, errors[this.name]);
|
||||
});
|
||||
}
|
||||
|
||||
function handleFormSubmit(form, input) {
|
||||
// validate the form against the constraints
|
||||
var errors = validate(form, constraints);
|
||||
// then we update the form to reflect the results
|
||||
showErrors(form, errors || {});
|
||||
if (!errors) {
|
||||
showSuccess();
|
||||
//Add event listener to position marker on map
|
||||
google.maps.event.addListener(map, 'click', positionMarker);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Updates the inputs with the validation errors
|
||||
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, error);
|
||||
});
|
||||
} else {
|
||||
// otherwise we simply mark it as success
|
||||
formGroup.classList.add("has-success");
|
||||
function positionMarker(event) {
|
||||
let clickedLocation = event.latLng;
|
||||
if(marker === false){
|
||||
marker = new google.maps.Marker({
|
||||
position: clickedLocation,
|
||||
map: map,
|
||||
draggable: true
|
||||
});
|
||||
//google.maps.event.addListener(marker, 'dragend', function(event){
|
||||
// markerLocation();
|
||||
// });
|
||||
} else{
|
||||
marker.setPosition(clickedLocation);
|
||||
}
|
||||
}
|
||||
}
|
||||
function setMarkerToLocation(map) {
|
||||
const ESTATE_COORDINATES = ( <%= locationLat %> !==0 && <%= locationLong %> !== 0 ) ?
|
||||
{
|
||||
lat: <%= locationLat %>,
|
||||
lng: <%= locationLong %>
|
||||
}:
|
||||
{ lat: 43.85, //Set to Sarajevo if coordinates are not picked
|
||||
lng: 18.41
|
||||
};
|
||||
|
||||
// Recusively finds the closest parent that has the specified class
|
||||
function closestParent(child, className) {
|
||||
if (!child || child == document) {
|
||||
return null;
|
||||
marker = new google.maps.Marker({
|
||||
position: ESTATE_COORDINATES,
|
||||
map: map,
|
||||
draggable: true
|
||||
});
|
||||
// google.maps.event.addListener(marker, 'dragend', function(event){
|
||||
// markerLocation();
|
||||
// });
|
||||
//Zooming map to current location
|
||||
map.setCenter(ESTATE_COORDINATES);
|
||||
map.setZoom(13);
|
||||
}
|
||||
if (child.classList.contains(className)) {
|
||||
return child;
|
||||
} else {
|
||||
return closestParent(child.parentNode, className);
|
||||
|
||||
function addLocateMeButton(map) {
|
||||
var parent = document.createElement("div");
|
||||
parent.className = "locate-me-container";
|
||||
|
||||
var a = document.createElement("a");
|
||||
a.id = "locateMe";
|
||||
a.className = "btn-floating";
|
||||
|
||||
var i = document.createElement("i");
|
||||
i.innerText = "gps_fixed";
|
||||
i.className = "material-icons right";
|
||||
|
||||
a.appendChild(i);
|
||||
a.addEventListener("click", locateMe);
|
||||
parent.appendChild(a);
|
||||
|
||||
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(parent);
|
||||
}
|
||||
}
|
||||
|
||||
function resetFormGroup(formGroup) {
|
||||
// Remove the success and error classes
|
||||
formGroup.classList.remove("has-error");
|
||||
formGroup.classList.remove("has-success");
|
||||
// and remove any old messages
|
||||
_.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);
|
||||
}
|
||||
|
||||
function showSuccess() {
|
||||
// We made it \:D/
|
||||
alert("Success!");
|
||||
}
|
||||
})();
|
||||
/////////////////////////////////////////////////
|
||||
const isPresent = $input => {
|
||||
return $input && $input!=="" && $input != null;
|
||||
}
|
||||
|
||||
const isNumber = $input => {
|
||||
const simpleNumberRegex = /[+-]?(?:\d*[.,])?\d+/;
|
||||
return $input && $input.length <250 && simpleNumberRegex.test($input);
|
||||
|
||||
}
|
||||
|
||||
const isInteger = $input => {
|
||||
const simpleIntegerRegex = /^([+-]?[1-9]\d*|0)$/;
|
||||
return $input && $input.length <250 && simpleIntegerRegex.test($input);
|
||||
|
||||
}
|
||||
|
||||
const validate = (input) => {
|
||||
|
||||
const valid;
|
||||
const errorMsg;
|
||||
const 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;
|
||||
|
||||
function onPlaceChanged() {
|
||||
const place = autocomplete.getPlace();
|
||||
if (place.geometry) {
|
||||
map.fitBounds(place.geometry.viewport);
|
||||
map.setZoom(map.getZoom() + 1);
|
||||
$("#locationInputData").val(JSON.stringify(place));
|
||||
}
|
||||
}
|
||||
if (!valid) {
|
||||
const inputField = document.querySelector(`#${input.dbField}`);
|
||||
showErrorsForInput( inputField, errorMsg);
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function pacSelectFirst(input) {
|
||||
// store the original event binding function
|
||||
const _addEventListener = input.addEventListener
|
||||
? input.addEventListener
|
||||
: input.attachEvent;
|
||||
|
||||
function addEventListenerWrapper(type, listener) {
|
||||
// Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
|
||||
// and then trigger the original listener.
|
||||
if (type == "keydown") {
|
||||
const originalListener = listener;
|
||||
listener = function(event) {
|
||||
const suggestionSelected = $(".pac-item-selected").length > 0;
|
||||
if (event.key == "Enter" && !suggestionSelected) {
|
||||
const simulatedDownArrow = $.Event("keydown", {
|
||||
keyCode: 40,
|
||||
which: 40
|
||||
});
|
||||
originalListener.apply(input, [simulatedDownArrow]);
|
||||
}
|
||||
|
||||
originalListener.apply(input, [event]);
|
||||
};
|
||||
}
|
||||
|
||||
_addEventListener.apply(input, [type, listener]);
|
||||
}
|
||||
|
||||
input.addEventListener = addEventListenerWrapper;
|
||||
input.attachEvent = addEventListenerWrapper;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user