Merged finished kivi-input in view

2020-03-14 14:09:36 +01:00
parent 6821f61e55 9f1fe3641d
commit a36fba09eb
17 changed files with 415 additions and 261 deletions
--- a/app/common/publishEnums.js
+++ b/app/common/publishEnums.js
@@ -6,16 +6,6 @@ const {
 } = require("./enums");

 const BASIC_BOOLEAN_PUBLISH = [
-  {
-    dbField: "balcony",
-    title: "Balkon",
-    categoriesToShow: [
-      AD_CATEGORY.FLAT,
-      AD_CATEGORY.HOUSE,
-      AD_CATEGORY.APARTMENT,
-      AD_CATEGORY.COTTAGE
-    ]
-  },
  {
    dbField: "newBuilding",
    title: "Novogradnja",
@@ -28,6 +18,17 @@ const BASIC_BOOLEAN_PUBLISH = [
      AD_CATEGORY.GARAGE
    ]
  },
+  {
+    dbField: "balcony",
+    title: "Balkon",
+    categoriesToShow: [
+      AD_CATEGORY.FLAT,
+      AD_CATEGORY.HOUSE,
+      AD_CATEGORY.APARTMENT,
+      AD_CATEGORY.COTTAGE
+    ]
+  },
+
  {
    dbField: "elevator",
    title: "Lift",
@@ -51,6 +52,34 @@ const BASIC_BOOLEAN_PUBLISH = [
 ];

 const BASIC_INPUT_PUBLISH = [
+  {
+    dbField: "title",
+    title: "Naslov",
+    categoriesToShow: [
+      AD_CATEGORY.FLAT,
+      AD_CATEGORY.HOUSE,
+      AD_CATEGORY.APARTMENT,
+      AD_CATEGORY.COTTAGE,
+      AD_CATEGORY.OFFICE,
+      AD_CATEGORY.LAND,
+      AD_CATEGORY.GARAGE
+    ],
+    constraint: ["required"]
+  },
+  {
+    dbField: "shortDescription",
+    title: "Opis",
+    categoriesToShow: [
+      AD_CATEGORY.FLAT,
+      AD_CATEGORY.HOUSE,
+      AD_CATEGORY.APARTMENT,
+      AD_CATEGORY.COTTAGE,
+      AD_CATEGORY.OFFICE,
+      AD_CATEGORY.LAND,
+      AD_CATEGORY.GARAGE
+    ],
+    constraint: []
+  },
  {
    dbField: "price",
    title: "Cijena (KM)",
@@ -85,6 +114,20 @@ const BASIC_INPUT_PUBLISH = [
    categoriesToShow: [AD_CATEGORY.HOUSE, AD_CATEGORY.COTTAGE],
    constraint: ["numerical"]
  },
+  {
+    dbField: "streetName",
+    title: "Adresa",
+    categoriesToShow: [
+      AD_CATEGORY.FLAT,
+      AD_CATEGORY.HOUSE,
+      AD_CATEGORY.APARTMENT,
+      AD_CATEGORY.COTTAGE,
+      AD_CATEGORY.OFFICE,
+      AD_CATEGORY.LAND,
+      AD_CATEGORY.GARAGE
+    ],
+    constraint: []
+  },
  {
    dbField: "numberOfRooms",
    title: "Broj soba",
@@ -117,48 +160,6 @@ const BASIC_INPUT_PUBLISH = [
      AD_CATEGORY.OFFICE
    ],
    constraint: ["integer"]
-  },
-  {
-    dbField: "title",
-    title: "Naslov",
-    categoriesToShow: [
-      AD_CATEGORY.FLAT,
-      AD_CATEGORY.HOUSE,
-      AD_CATEGORY.APARTMENT,
-      AD_CATEGORY.COTTAGE,
-      AD_CATEGORY.OFFICE,
-      AD_CATEGORY.LAND,
-      AD_CATEGORY.GARAGE
-    ],
-    constraint: ["required"]
-  },
-  {
-    dbField: "shortDescription",
-    title: "Opis",
-    categoriesToShow: [
-      AD_CATEGORY.FLAT,
-      AD_CATEGORY.HOUSE,
-      AD_CATEGORY.APARTMENT,
-      AD_CATEGORY.COTTAGE,
-      AD_CATEGORY.OFFICE,
-      AD_CATEGORY.LAND,
-      AD_CATEGORY.GARAGE
-    ],
-    constraint: []
-  },
-  {
-    dbField: "streetName",
-    title: "Adresa",
-    categoriesToShow: [
-      AD_CATEGORY.FLAT,
-      AD_CATEGORY.HOUSE,
-      AD_CATEGORY.APARTMENT,
-      AD_CATEGORY.COTTAGE,
-      AD_CATEGORY.OFFICE,
-      AD_CATEGORY.LAND,
-      AD_CATEGORY.GARAGE
-    ],
-    constraint: []
  }
 ];

--- a/app/controllers/publishRealEstate.js
+++ b/app/controllers/publishRealEstate.js
@@ -1,4 +1,5 @@
 const { findRealEstateByAgencyId } = require("../helpers/db/realEstate");
+const { bulkUpsertKiviPhotos } = require("../helpers/db/kiviOriginalAdsPhotos");
 const { currentKiviRealEstate } = require("../helpers/url");

 const validate = require("validate.js");
@@ -188,6 +189,9 @@ const postPublishInputs = async (req, res) => {

  const nextStepPage = req.query.nextStep || "/uspjesnaobjava";

+  //Request body
+  //console.log("Body:", req.body);
+
  const balcony = req.body.balcony === "on";
  const elevator = req.body.elevator === "on";
  const newBuilding = req.body.newBuilding === "on";
@@ -248,6 +252,16 @@ const postPublishInputs = async (req, res) => {
  const locationLong = req.body.lng || null;
  //Contact email saved in other table
  const contactEmail = req.body.email || "";
+  //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,
+      photoUrl: url
+    };
+  });
+  const savedImageUrls = await bulkUpsertKiviPhotos(imageUrlsData);

  realEstate.balcony = balcony;
  realEstate.elevator = elevator;
--- a/app/helpers/db/kiviOriginalAdsPhotos.js
+++ b/app/helpers/db/kiviOriginalAdsPhotos.js
@@ -0,0 +1,17 @@
+"use strict";
+const db = require("../../models/index");
+const sequelize = require("sequelize");
+
+const bulkUpsertKiviPhotos = async kiviPhotosData => {
+  try {
+    return await db.KiviOriginalAdsPhotos.bulkCreate(kiviPhotosData, {
+      ignoreDuplicates: true
+    });
+  } catch (e) {
+    console.log("Error bulk upserting kiviOriginalAdsPhotos : ", e);
+  }
+};
+
+module.exports = {
+  bulkUpsertKiviPhotos
+};
--- a/app/migrations/20200312210336-add-table-kivi-photos.js
+++ b/app/migrations/20200312210336-add-table-kivi-photos.js
@@ -0,0 +1,39 @@
+"use strict";
+
+module.exports = {
+  up: (queryInterface, Sequelize) => {
+    const tableFields = {
+      id: {
+        type: Sequelize.BIGINT,
+        autoIncrement: true,
+        primaryKey: true,
+        allowNull: false
+      },
+      kiviAdId: {
+        type: Sequelize.UUID,
+        allowNull: false,
+        references: {
+          model: "KiviOriginal",
+          key: "kiviAdId"
+        }
+      },
+      photoUrl: {
+        type: Sequelize.TEXT,
+        allowNull: false
+      },
+      createdAt: {
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal("NOW()")
+      },
+      updatedAt: {
+        type: Sequelize.DATE,
+        defaultValue: Sequelize.literal("NOW()")
+      }
+    };
+    return queryInterface.createTable("KiviOriginalAdsPhotos", tableFields);
+  },
+
+  down: (queryInterface, Sequelize) => {
+    return queryInterface.dropTable("KiviOriginalAdsPhotos", {});
+  }
+};
--- a/app/models/kiviOriginalAdsPhotos.js
+++ b/app/models/kiviOriginalAdsPhotos.js
@@ -0,0 +1,41 @@
+"use strict";
+
+module.exports = (sequalize, DataTypes) => {
+  const KiviOriginalAdsPhotos = sequalize.define(
+    "KiviOriginalAdsPhotos",
+    {
+      id: {
+        type: DataTypes.BIGINT,
+        autoIncrement: true,
+        primaryKey: true,
+        allowNull: false
+      },
+      kiviAdId: {
+        type: DataTypes.UUID,
+        allowNull: false,
+        references: {
+          model: "KiviOriginal",
+          key: "kiviAdId"
+        }
+      },
+      photoUrl: {
+        type: DataTypes.TEXT,
+        allowNull: false
+      }
+    },
+    {
+      freezeTableName: true
+    }
+  );
+
+  KiviOriginalAdsPhotos.associate = models => {
+    KiviOriginalAdsPhotos.hasMany(models.KiviOriginal, {
+      foreignKey: "kiviAdId",
+      sourceKey: "kiviAdId",
+      targetKey: "kiviAdId",
+      as: "kiviOriginal"
+    });
+  };
+
+  return KiviOriginalAdsPhotos;
+};
--- a/app/public/main.css
+++ b/app/public/main.css
@@ -164,7 +164,6 @@ h3 {
 }

 .custom-col {
-  width: 18%;
  margin-left: auto;
  left: auto;
  right: auto;
@@ -190,3 +189,16 @@ h3 {
  opacity: 1;
  position: relative;
 }
+.dropzone {
+  background: white;
+  border-radius: 10px;
+  border: 4px dashed #02adba;
+  border-image: none;
+  max-width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.dz-progress {
+  display: none;
+}
--- a/app/views/layout.ejs
+++ b/app/views/layout.ejs
@@ -9,14 +9,21 @@
    gtag('js', new Date());
    gtag('config', '<%= process.env.GA_ID %>');
  </script>
-
+ 
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.5/nouislider.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/dropzone.css">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

  <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 type="text/javascript">
+    Dropzone.autoDiscover = false;  
+  </script>
+
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/assets/main.css">
  <link rel="stylesheet" href="/assets/segment.css">
@@ -52,6 +59,9 @@
    <% } else { %>
    <title>Kivi.ba</title>
  <% } %>
+
+  
+
 </head>

 <body>
--- a/app/views/publishAdditionalData.ejs
+++ b/app/views/publishAdditionalData.ejs
@@ -1,7 +1,7 @@
 <br>
 <div class="row">
 <% for (const input of additionalInputInputs){ %>
-    <div class="input-field col s3 m4 l5">
+    <div class="input-field col s12">
    <textarea
            id="<%= input.dbField %>"
            form="publishForm"
@@ -15,9 +15,10 @@
 </div>

 <br>
+<div class="row">

 <% for (const input of additionalBooleanPublishInputs){ %>
-  <p>
+  <p class="col s6 m4 l4">
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="<%= input.dbField %>"
        <% if (additionalBooleanPublishValues[input.dbField]) { %>
@@ -27,7 +28,7 @@
    </label>
  </p>
 <% } %>
-
+</div>
 <br>
 <% for (const input of additionalSegmentSelectInputs){ %>
  <div>
--- a/app/views/publishBasicData.ejs
+++ b/app/views/publishBasicData.ejs
@@ -1,7 +1,7 @@
 <br>
 <div class="row" id="basic-inputs">
 <% for (const input of basicInputInputs){ %>
-    <div class="input-field col s3 m4 l5">
+    <div class="input-field col s10 m5 l4">
    <input
            id="<%= input.dbField %>"
            name="<%= input.dbField %>"
--- a/app/views/publishPhotos.ejs
+++ b/app/views/publishPhotos.ejs
@@ -1,72 +1,12 @@
 <br>
-<div class="mdl-textfield mdl-js-textfield mdl-textfield--file">
-  <input type="file" id="selector">
-</div>

-<input class="mdl-button mdl-button--raised mdl-button--colored" type="button" value="Upload"
-  onclick="generateSignedURL()">
+<div action="/photos-upload" class="dropzone" id="photos-upload">
+      <div class="fallback">
+        <input name="file" type="file" multiple />
+      </div>
+      
+    </div>

-  <div class="mdl-textfield mdl-js-textfield mdl-textfield--file" id="status"></div>
+<br>

-<script type="text/javascript">
-/*
-var c = "";
-    var filename = "";
-
-    function uuidv4() {
-      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
-        return v.toString(16);
-      });
-    }
-
-    function getFilename() {
-      var fullPath = document.getElementById('selector').value;
-      if (fullPath) {
-        var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
-        filename = fullPath.substring(startIndex);
-        if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
-          filename = filename.substring(1);
-        }
-        filename = (uuidv4() + filename).replace(/\s+/g, '');
-        return (filename);
-      }
-      return (null);
-    }
-
-    function upload() {
-      var file = $('#selector')[0].files[0];
-      uploadFile(file)
-    }
-
-
-    async function generateSignedURL() {
-      const file = getFilename();
-      const response = await fetch('/generateSignedURL?filename=' + file);
-      if (!response.ok) {
-        throw new Error('Network response for fetch was not ok.');
-      }
-      c = await response.text();
-      c = c.replace(/\"/g, "")
-      console.log("Got signedURL: " + c)
-      console.log("Trying to upload " + file)
-      upload();
-      console.log("Complete")
-      return false;
-    }
-
-    function uploadFile(file) {
-      $("#status").html('Starting Upload...')
-      url = c
-      fetch(url, {
-        method: 'PUT',
-        body: file
-      })
-        .then(response => response.text())
-        .catch(error => $("#status").html(error)
-        )
-        .then(response => $("#status").html('File uploaded successfully: ' + filename));
-    }
-
-    */
-</script>
+<input type="hidden" name="imageUrls" id="imageUrls" value="">
--- a/app/views/publishRealEstate.ejs
+++ b/app/views/publishRealEstate.ejs
@@ -3,11 +3,11 @@
  <div class="row">
    <div class="col s12">
      <ul class="tabs">
-        <li class="tab custom-col"><a href="#publishBasicData">Osnovni podaci</a></li>
-        <li class="tab custom-col"><a href="#publishAdditionalData">Dodatni podaci</a></li>
-        <li class="tab custom-col"><a href="#publishLocation">Lokacija</a></li>
-        <li class="tab custom-col"><a href="#publishPhotos">Fotografije</a></li>
-        <li class="tab custom-col"><a href="#publishEnd">Kraj</a></li>
+        <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>
@@ -32,10 +32,85 @@
 </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,}))$/;
@@ -152,7 +227,8 @@

 }

-    $("#submit").click( function () {
+    $("#submit").click( async function (e) {
+      e.preventDefault();

      if (marker) {
        const currentLocation = marker.getPosition();
@@ -170,7 +246,6 @@
        $("#lng").val(0);
      }
      
-
       //Tag for checking of error presence 
       let hasErrors = false;
      //Check if email is valid
@@ -196,12 +271,19 @@

        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();

-      if (!hasErrors) {
-       
-        $("#publishForm").submit();
      };
-       
+  
    });
  });