Dropzone edit opction adadded.

This commit is contained in:
Naida Vatric
2020-03-24 11:10:16 +01:00
parent 477424caa1
commit 3fa9804ca6
24 changed files with 9400 additions and 256 deletions

View File

@@ -202,8 +202,8 @@ const getPublishInputs = async (req, res) => {
additionalInputValues,
validate: validate,
email,
locationLat: locationLat || 0,
locationLong: locationLong || 0,
locationLat, //: locationLat || 0,
locationLong, //: locationLong || 0,
editingRealEstate,
realEstatePhotosUrls
});
@@ -223,7 +223,9 @@ const postPublishInputs = async (req, res) => {
return;
}
const editingRealEstate = req.body.editingRealEstate;
const editingRealEstate = req.body.editingRealEstate === "true";
console.log("Editing real estate:", editingRealEstate);
const nextStepPage = editingRealEstate
? req.query.nextStep || "/uspjesnaizmjena"
@@ -294,6 +296,7 @@ const postPublishInputs = async (req, res) => {
//Image urls are stored in new table
const imageUrls =
req.body.imageUrls.split("|").filter(url => url !== "") || [];
const imageUrlsData = imageUrls.map(url => {
return {
kiviAdId: kiviOriginal.kiviAdId,

7
app/public/dropzone-5.7.0/.gitignore vendored Normal file
View File

@@ -0,0 +1,7 @@
build
components
node_modules
.DS_Store
.sass-cache
_site
_config.yaml

View File

@@ -0,0 +1,52 @@
{
"files": [
{
"name": "src/dropzone.coffee",
"regexs": [
"Dropzone.version = \"###\""
]
},
{
"name": "dist/dropzone.js",
"regexs": [
"version = \"###\""
]
},
{
"name": "dist/min/dropzone.min.js",
"regexs": [
"version=\"###\""
]
},
{
"name": "dist/dropzone-amd-module.js",
"regexs": [
"version = \"###\""
]
},
{
"name": "dist/min/dropzone-amd-module.min.js",
"regexs": [
"version=\"###\""
]
},
{
"name": "package.json",
"regexs": [
"\"version\": \"###\""
]
},
{
"name": "component.json",
"regexs": [
"\"version\": \"###\""
]
},
{
"name": "bower.json",
"regexs": [
"\"version\": \"###\""
]
}
]
}

View File

@@ -0,0 +1,6 @@
Contribute
==========
DO NOT CREATE PULL REQUESTS ON GITHUB!
I will simply close them. If you want to contribute, please use [gitlab.com](https://gitlab.com/meno/dropzone) instead.

View File

@@ -0,0 +1,12 @@
License
(The MIT License)
Copyright (c) 2012 Matias Meno <m@tias.me>
Logo & Website Design (c) 2015 "1910" www.weare1910.com
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@@ -0,0 +1,36 @@
<img alt="Dropzone.js" src="http://www.dropzonejs.com/images/new-logo.svg" />
Dropzone.js is a light weight JavaScript library that turns an HTML element into a dropzone.
This means that a user can drag and drop a file onto it, and the file gets uploaded to the server via AJAX.
* * *
_If you want support, please use [stackoverflow](http://stackoverflow.com/) with the `dropzone.js` tag and not the
GitHub issues tracker. Only post an issue here if you think you discovered a bug or have a feature request._
* * *
**Please read the [contributing guidelines](CONTRIBUTING.md) before you start working on Dropzone!**
<br>
<div align="center">
<a href="https://gitlab.com/meno/dropzone/builds/artifacts/master/download?job=release"><strong>&gt;&gt; Download &lt;&lt;</strong></a>
</div>
<br>
<br>
This is no longer the official repository for Dropzone. I have switched to [gitlab.com](https://gitlab.com/meno/dropzone)
as the primary location to continue development.
There are multiple reasons why I am switching from GitHub to GitLab, but a few of the reasons are the
issue tracker that GitHub is providing, *drowning* me in issues that I am unable to categorise or prioritize properly,
the lack of proper continuous integration, and build files. I don't want the compiled `.js` files in my repository, and
people regularly commit changes to the compiled files and create pull requests with them.
I will write a blog post soon, that goes into detail about why I am doing the switch.
This repository will still remain, and always host the most up to date versions of dropzone, but only the distribution
files!
MIT License
-----------

View File

@@ -0,0 +1,16 @@
{
"name": "dropzone",
"location": "enyo/dropzone",
"version": "5.7.0",
"description": "Dropzone is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars.",
"homepage": "http://www.dropzonejs.com",
"main": [
"dist/min/dropzone.min.css",
"dist/min/dropzone.min.js"
],
"ignore": [
"*",
"!dist",
"!dist/**/*"
]
}

View File

@@ -0,0 +1,10 @@
{
"name": "dropzone",
"repo": "enyo/dropzone",
"version": "5.7.0",
"description": "Handles drag and drop of files for you.",
"scripts": [ "index.js", "dist/dropzone.js" ],
"styles": [ "dist/basic.css" ],
"dependencies": { },
"license": "MIT"
}

View File

@@ -0,0 +1,18 @@
{
"name": "enyo/dropzone",
"description": "Handles drag and drop of files for you.",
"homepage": "http://www.dropzonejs.com",
"keywords": [
"dragndrop",
"drag and drop",
"file upload",
"upload"
],
"authors": [{
"name": "Matias Meno",
"email": "m@tias.me",
"homepage": "http://www.matiasmeno.com"
}],
"license": "MIT",
"minimum-stability": "dev"
}

View File

@@ -0,0 +1,39 @@
/*
* The MIT License
* Copyright (c) 2012 Matias Meno <m@tias.me>
*/
.dropzone, .dropzone * {
box-sizing: border-box; }
.dropzone {
position: relative; }
.dropzone .dz-preview {
position: relative;
display: inline-block;
width: 120px;
margin: 0.5em; }
.dropzone .dz-preview .dz-progress {
display: block;
height: 15px;
border: 1px solid #aaa; }
.dropzone .dz-preview .dz-progress .dz-upload {
display: block;
height: 100%;
width: 0;
background: green; }
.dropzone .dz-preview .dz-error-message {
color: red;
display: none; }
.dropzone .dz-preview.dz-error .dz-error-message, .dropzone .dz-preview.dz-error .dz-error-mark {
display: block; }
.dropzone .dz-preview.dz-success .dz-success-mark {
display: block; }
.dropzone .dz-preview .dz-error-mark, .dropzone .dz-preview .dz-success-mark {
position: absolute;
display: none;
left: 30px;
top: 30px;
width: 54px;
height: 58px;
left: 50%;
margin-left: -27px; }

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,396 @@
/*
* The MIT License
* Copyright (c) 2012 Matias Meno <m@tias.me>
*/
@-webkit-keyframes passing-through {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px); }
30%, 70% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px); }
100% {
opacity: 0;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px); } }
@-moz-keyframes passing-through {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px); }
30%, 70% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px); }
100% {
opacity: 0;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px); } }
@keyframes passing-through {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px); }
30%, 70% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px); }
100% {
opacity: 0;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px); } }
@-webkit-keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px); }
30% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px); } }
@-moz-keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px); }
30% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px); } }
@keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px); }
30% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px); } }
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }
10% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1); }
20% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); } }
@-moz-keyframes pulse {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }
10% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1); }
20% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); } }
@keyframes pulse {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }
10% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1); }
20% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); } }
.dropzone, .dropzone * {
box-sizing: border-box; }
.dropzone {
min-height: 150px;
border: 2px solid rgba(0, 0, 0, 0.3);
background: white;
padding: 20px 20px; }
.dropzone.dz-clickable {
cursor: pointer; }
.dropzone.dz-clickable * {
cursor: default; }
.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
cursor: pointer; }
.dropzone.dz-started .dz-message {
display: none; }
.dropzone.dz-drag-hover {
border-style: solid; }
.dropzone.dz-drag-hover .dz-message {
opacity: 0.5; }
.dropzone .dz-message {
text-align: center;
margin: 2em 0; }
.dropzone .dz-message .dz-button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit; }
.dropzone .dz-preview {
position: relative;
display: inline-block;
vertical-align: top;
margin: 16px;
min-height: 100px; }
.dropzone .dz-preview:hover {
z-index: 1000; }
.dropzone .dz-preview:hover .dz-details {
opacity: 1; }
.dropzone .dz-preview.dz-file-preview .dz-image {
border-radius: 20px;
background: #999;
background: linear-gradient(to bottom, #eee, #ddd); }
.dropzone .dz-preview.dz-file-preview .dz-details {
opacity: 1; }
.dropzone .dz-preview.dz-image-preview {
background: white; }
.dropzone .dz-preview.dz-image-preview .dz-details {
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-ms-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear; }
.dropzone .dz-preview .dz-remove {
font-size: 14px;
text-align: center;
display: block;
cursor: pointer;
border: none; }
.dropzone .dz-preview .dz-remove:hover {
text-decoration: underline; }
.dropzone .dz-preview:hover .dz-details {
opacity: 1; }
.dropzone .dz-preview .dz-details {
z-index: 20;
position: absolute;
top: 0;
left: 0;
opacity: 0;
font-size: 13px;
min-width: 100%;
max-width: 100%;
padding: 2em 1em;
text-align: center;
color: rgba(0, 0, 0, 0.9);
line-height: 150%; }
.dropzone .dz-preview .dz-details .dz-size {
margin-bottom: 1em;
font-size: 16px; }
.dropzone .dz-preview .dz-details .dz-filename {
white-space: nowrap; }
.dropzone .dz-preview .dz-details .dz-filename:hover span {
border: 1px solid rgba(200, 200, 200, 0.8);
background-color: rgba(255, 255, 255, 0.8); }
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
overflow: hidden;
text-overflow: ellipsis; }
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
border: 1px solid transparent; }
.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
background-color: rgba(255, 255, 255, 0.4);
padding: 0 0.4em;
border-radius: 3px; }
.dropzone .dz-preview:hover .dz-image img {
-webkit-transform: scale(1.05, 1.05);
-moz-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
-webkit-filter: blur(8px);
filter: blur(8px); }
.dropzone .dz-preview .dz-image {
border-radius: 20px;
overflow: hidden;
width: 120px;
height: 120px;
position: relative;
display: block;
z-index: 10; }
.dropzone .dz-preview .dz-image img {
display: block; }
.dropzone .dz-preview.dz-success .dz-success-mark {
-webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); }
.dropzone .dz-preview.dz-error .dz-error-mark {
opacity: 1;
-webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); }
.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
pointer-events: none;
opacity: 0;
z-index: 500;
position: absolute;
display: block;
top: 50%;
left: 50%;
margin-left: -27px;
margin-top: -27px; }
.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
display: block;
width: 54px;
height: 54px; }
.dropzone .dz-preview.dz-processing .dz-progress {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear; }
.dropzone .dz-preview.dz-complete .dz-progress {
opacity: 0;
-webkit-transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-ms-transition: opacity 0.4s ease-in;
-o-transition: opacity 0.4s ease-in;
transition: opacity 0.4s ease-in; }
.dropzone .dz-preview:not(.dz-processing) .dz-progress {
-webkit-animation: pulse 6s ease infinite;
-moz-animation: pulse 6s ease infinite;
-ms-animation: pulse 6s ease infinite;
-o-animation: pulse 6s ease infinite;
animation: pulse 6s ease infinite; }
.dropzone .dz-preview .dz-progress {
opacity: 1;
z-index: 1000;
pointer-events: none;
position: absolute;
height: 16px;
left: 50%;
top: 50%;
margin-top: -8px;
width: 80px;
margin-left: -40px;
background: rgba(255, 255, 255, 0.9);
-webkit-transform: scale(1);
border-radius: 8px;
overflow: hidden; }
.dropzone .dz-preview .dz-progress .dz-upload {
background: #333;
background: linear-gradient(to bottom, #666, #444);
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 0;
-webkit-transition: width 300ms ease-in-out;
-moz-transition: width 300ms ease-in-out;
-ms-transition: width 300ms ease-in-out;
-o-transition: width 300ms ease-in-out;
transition: width 300ms ease-in-out; }
.dropzone .dz-preview.dz-error .dz-error-message {
display: block; }
.dropzone .dz-preview.dz-error:hover .dz-error-message {
opacity: 1;
pointer-events: auto; }
.dropzone .dz-preview .dz-error-message {
pointer-events: none;
z-index: 1000;
position: absolute;
display: block;
display: none;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
border-radius: 8px;
font-size: 13px;
top: 130px;
left: -10px;
width: 140px;
background: #be2626;
background: linear-gradient(to bottom, #be2626, #a92222);
padding: 0.5em 1.2em;
color: white; }
.dropzone .dz-preview .dz-error-message:after {
content: '';
position: absolute;
top: -6px;
left: 64px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #be2626; }

4697
app/public/dropzone-5.7.0/dist/dropzone.js vendored Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1 @@
.dropzone,.dropzone *{box-sizing:border-box}.dropzone{position:relative}.dropzone .dz-preview{position:relative;display:inline-block;width:120px;margin:0.5em}.dropzone .dz-preview .dz-progress{display:block;height:15px;border:1px solid #aaa}.dropzone .dz-preview .dz-progress .dz-upload{display:block;height:100%;width:0;background:green}.dropzone .dz-preview .dz-error-message{color:red;display:none}.dropzone .dz-preview.dz-error .dz-error-message,.dropzone .dz-preview.dz-error .dz-error-mark{display:block}.dropzone .dz-preview.dz-success .dz-success-mark{display:block}.dropzone .dz-preview .dz-error-mark,.dropzone .dz-preview .dz-success-mark{position:absolute;display:none;left:30px;top:30px;width:54px;height:58px;left:50%;margin-left:-27px}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1 @@
module.exports = require("./dist/dropzone.js"); // Exposing dropzone

View File

@@ -0,0 +1,40 @@
{
"name": "dropzone",
"version": "5.7.0",
"description": "Handles drag and drop of files for you.",
"keywords": [
"dragndrop",
"drag and drop",
"file upload",
"upload"
],
"homepage": "http://www.dropzonejs.com",
"main": "./dist/dropzone.js",
"maintainers": [
{
"name": "Matias Meno",
"email": "m@tias.me",
"web": "http://www.colorglare.com"
}
],
"contributors": [
{
"name": "Matias Meno",
"email": "m@tias.me",
"web": "http://www.colorglare.com"
}
],
"scripts": {
"test": "grunt && npm run test-prebuilt",
"test-prebuilt": "mocha-headless-chrome -f test/test-prebuilt.html -a no-sandbox -a disable-setuid-sandbox"
},
"bugs": {
"email": "m@tias.me",
"url": "https://gitlab.com/meno/dropzone/issues"
},
"license": "MIT",
"repository": {
"type": "git",
"url": "https://gitlab.com/meno/dropzone.git"
}
}

View File

@@ -19,7 +19,7 @@
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/dropzone.js"></script>
<script src="/assets/dropzone-5.7.0/dist/dropzone.js"></script>
<script type="text/javascript">
Dropzone.autoDiscover = false;
</script>

View File

@@ -108,7 +108,7 @@
//Move map and marker to already selected position if in editing mode
if( editingRealEstate===true) {
console.log('Editujem mapu!');
setMarkerToLocation(map);
setMarkerToLocation(map, editingRealEstate);
}
//Add event listener to position marker on map
@@ -132,11 +132,15 @@
}
}
function setMarkerToLocation(map) {
const ESTATE_COORDINATES = {
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
};
marker = new google.maps.Marker({
position: ESTATE_COORDINATES,
map: map,

View File

@@ -90,11 +90,10 @@
$(document).ready(function(){
$('.tabs').tabs();
const editingRealEstate = <%- editingRealEstate %>;
const editingRealEstate = <%- JSON.stringify(editingRealEstate) %>;
$("#editingRealEstate").val(editingRealEstate);
const realEstatePhotosUrls = <%-JSON.stringify(realEstatePhotosUrls)%>;
const currentRealEstatePhotosUrls = <%-JSON.stringify(realEstatePhotosUrls)%>;
// Manual dropzone init
const dropzoneOptions = {
@@ -118,36 +117,32 @@
dictInvalidFileType: 'Iabrani fajl nije fotografija!',
dictMaxFilesExceeded: 'Dostigli ste maksimalan broj fotografija!',
init: function () {
let fileCountOnServer = realEstatePhotosUrls.length; // The number of files already uploaded
let fileCountOnServer = currentRealEstatePhotosUrls.length; // The number of files already uploaded
this.options.maxFiles = this.options.maxFiles - fileCountOnServer;
if (editingRealEstate) {
for (let i=0; i<realEstatePhotosUrls.length; i++) {
let fileName = realEstatePhotosUrls[i].replace("https://storage.cloud.google.com/marketalarm-photos/", "");
for (let i=0; i<currentRealEstatePhotosUrls.length; i++) {
let fileName = currentRealEstatePhotosUrls[i].replace("https://storage.cloud.google.com/marketalarm-photos/", "");
var mockFile = { name: fileName, size: 12345, type: 'image/jpeg', accepted: true, status: Dropzone.ACCEPTED };
this.options.addedfile.call(this, mockFile);
this.options.thumbnail.call(this, mockFile, realEstatePhotosUrls[i]);
this.options.thumbnail.call(this, mockFile, currentRealEstatePhotosUrls[i]);
this.files.push(mockFile);
mockFile.previewElement.classList.add('dz-success');
mockFile.previewElement.classList.add('dz-complete');
}
};
this.on("addedfile", function(event) {
while (this.files.length > this.options.maxFiles) {
this.removeFile(this.files[0]);
this.removeFile(this.files[0]); //automaticly removing if more then 10 files
}
console.log('Files:', this.files);
});
this.on("removedfile", function(event) {
let fileCountOnPreview = this.files.length;
this.options.maxFiles = 10;
this.options.maxFiles = 10; //resets allowed number of files
this._updateMaxFilesReachedClass();
});
}
}
@@ -313,27 +308,42 @@
})
for (const input of basicInputInputs ) {
alert(input.getAttribute(name));
validate (input);
} */
//
console.log('All files:', photosUploader.files);
//Filter all files to exclude ones that are already uploaded during the ad publish
//But keep them stored to know that they are not deleted from ad
let filesForUpload =[];
if(editingRealEstate) {
let currentPhotosFilenames = currentRealEstatePhotosUrls.map( url => {
return url.replace("https://storage.cloud.google.com/marketalarm-photos/", "");
})
photosUploader.files.map( file => {
if ( currentPhotosFilenames.includes(file.name) ) {
return $("#imageUrls").val($("#imageUrls").val()+ file.name+"|");
} else if (file.status!=="error") {
return filesForUpload.push(file);
}
});
} else {
photosUploader.files.map( file => {
if (file.status!=="error") {
return filesForUpload.push(file);
}
})
}
const addedFiles = photosUploader.files.filter(file => file.status!=="error");
const asyncUpload =[];
addedFiles.forEach( file => {
const asyncUpload =[];
filesForUpload.forEach( file => {
asyncUpload.push(generateSignedURL(file));
})
if (!hasErrors) {
await Promise.all(asyncUpload);
alert($("#imageUrls").val());
$("#publishForm").submit();
};
});

397
help.js
View File

@@ -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;
}