Implement renting option frontend #65

Merged
bilal.catic merged 8 commits from implement-renting-option-frontend into master 2019-10-31 19:12:43 +01:00
12 changed files with 157 additions and 61 deletions

View File

@@ -1,4 +1,4 @@
const PRICE_SLIDER_OPTIONS = {
const PRICE_SLIDER_OPTIONS_SALE = {
start: [50000, 85000],
range: {
min: [0],
@@ -8,6 +8,16 @@ const PRICE_SLIDER_OPTIONS = {
connect: true
};
const PRICE_SLIDER_OPTIONS_RENT = {
start: [300, 500],
range: {
min: [0],
max: [2000]
},
step: 50,
connect: true
};
//This will be used for Flats, Apartments, Houses
const HOME_SIZE_SLIDER_OPTIONS = {
start: [30, 75],
@@ -59,9 +69,21 @@ const GARAGE_PRICE_SLIDER_OPTIONS = {
};
const AD_TYPE = {
AD_TYPE_SALE: "SALE",
AD_TYPE_RENT: "RENT",
AD_TYPE_REQUEST: "REQUEST"
AD_TYPE_SALE: {
id: 1,
stringId: "SALE",
title: "Prodaja"
},
AD_TYPE_RENT: {
id: 2,
stringId: "RENT",
title: "Najam"
},
AD_TYPE_REQUEST: {
id: 3,
stringId: "REQUEST",
title: "Potražnja"
}
};
const AD_CATEGORY = {
@@ -72,14 +94,16 @@ const AD_CATEGORY = {
id: "FLAT",
title: "Stan",
hasGardenSize: false,
priceSliderOptions: PRICE_SLIDER_OPTIONS,
priceSliderOptionsSale: PRICE_SLIDER_OPTIONS_SALE,
priceSliderOptionsRent: PRICE_SLIDER_OPTIONS_RENT,
sizeSliderOptions: HOME_SIZE_SLIDER_OPTIONS
},
HOUSE: {
id: "HOUSE",
title: "Kuća",
hasGardenSize: true,
priceSliderOptions: PRICE_SLIDER_OPTIONS,
priceSliderOptionsSale: PRICE_SLIDER_OPTIONS_SALE,
priceSliderOptionsRent: PRICE_SLIDER_OPTIONS_RENT,
sizeSliderOptions: HOME_SIZE_SLIDER_OPTIONS,
gardenSizeSliderOptions: GARDEN_SIZE_SLIDER_OPTIONS
},
@@ -87,35 +111,40 @@ const AD_CATEGORY = {
id: "OFFICE",
title: "Kancelarija",
hasGardenSize: false,
priceSliderOptions: PRICE_SLIDER_OPTIONS,
priceSliderOptionsSale: PRICE_SLIDER_OPTIONS_SALE,
priceSliderOptionsRent: PRICE_SLIDER_OPTIONS_RENT,
sizeSliderOptions: HOME_SIZE_SLIDER_OPTIONS
},
LAND: {
id: "LAND",
title: "Zemljište",
hasGardenSize: false,
priceSliderOptions: PRICE_SLIDER_OPTIONS,
priceSliderOptionsSale: PRICE_SLIDER_OPTIONS_SALE,
priceSliderOptionsRent: PRICE_SLIDER_OPTIONS_RENT,
sizeSliderOptions: LAND_SIZE_SLIDER_OPTIONS
},
APARTMENT: {
id: "APARTMENT",
title: "Apartman",
hasGardenSize: false,
priceSliderOptions: PRICE_SLIDER_OPTIONS,
priceSliderOptionsSale: PRICE_SLIDER_OPTIONS_SALE,
priceSliderOptionsRent: PRICE_SLIDER_OPTIONS_RENT,
sizeSliderOptions: HOME_SIZE_SLIDER_OPTIONS
},
GARAGE: {
id: "GARAGE",
title: "Garaža",
hasGardenSize: false,
priceSliderOptions: GARAGE_PRICE_SLIDER_OPTIONS,
priceSliderOptionsSale: PRICE_SLIDER_OPTIONS_SALE,
priceSliderOptionsRent: PRICE_SLIDER_OPTIONS_RENT,
sizeSliderOptions: GARAGE_SIZE_SLIDER_OPTIONS
},
COTTAGE: {
id: "COTTAGE",
title: "Vikendica",
hasGardenSize: true,
priceSliderOptions: PRICE_SLIDER_OPTIONS,
priceSliderOptionsSale: PRICE_SLIDER_OPTIONS_SALE,
priceSliderOptionsRent: PRICE_SLIDER_OPTIONS_RENT,
sizeSliderOptions: HOME_SIZE_SLIDER_OPTIONS,
gardenSizeSliderOptions: GARDEN_SIZE_SLIDER_OPTIONS
}

View File

@@ -3,11 +3,12 @@ const { isValidEmail } = require("../helpers/email");
const {
notifyForNewSearchRequest
} = require("../services/notificationService");
const { AD_CATEGORY } = require("../common/enums");
const { AD_CATEGORY, AD_TYPE } = require("../common/enums");
const getQueryReviewData = searchRequest => {
const {
id,
adType,
realEstateType,
sizeMin,
sizeMax,
@@ -22,8 +23,21 @@ const getQueryReviewData = searchRequest => {
? realEstateTypeObject.hasGardenSize
: false;
let adTypeTitle = "";
switch (adType) {
case AD_TYPE.AD_TYPE_SALE.stringId:
adTypeTitle = AD_TYPE.AD_TYPE_SALE.title;
break;
case AD_TYPE.AD_TYPE_RENT.stringId:
adTypeTitle = AD_TYPE.AD_TYPE_RENT.title;
break;
default:
adTypeTitle = "-";
break;
}
const realEstateTypeTitle = realEstateTypeObject
? realEstateTypeObject.title
? `[${adTypeTitle}] ${realEstateTypeObject.title}`
: "-";
const locationTitle = "Promjenite lokaciju";

View File

@@ -1,5 +1,5 @@
const { currentSearchRequest } = require("../helpers/url");
const { AD_CATEGORY } = require("../common/enums");
const { AD_CATEGORY, AD_TYPE } = require("../common/enums");
const getFilters = async (req, res) => {
const searchRequest = await currentSearchRequest(req);
@@ -12,6 +12,7 @@ const getFilters = async (req, res) => {
const title = "Filteri za pretraživanje";
const {
adType,
realEstateType,
priceMin,
priceMax,
@@ -24,11 +25,22 @@ const getFilters = async (req, res) => {
const {
hasGardenSize,
priceSliderOptions,
priceSliderOptionsSale,
priceSliderOptionsRent,
sizeSliderOptions,
gardenSizeSliderOptions
} = category;
let priceSliderOptions;
if (adType === AD_TYPE.AD_TYPE_SALE.stringId) {
priceSliderOptions = Object.assign({}, priceSliderOptionsSale);
} else if (adType === AD_TYPE.AD_TYPE_RENT.stringId) {
priceSliderOptions = Object.assign({}, priceSliderOptionsRent);
} else {
res.render("notFound", { title: " " });
return;
}
if (priceMin || priceMax) {
priceSliderOptions.start = [priceMin, priceMax];
}

View File

@@ -1,20 +1,45 @@
const { currentSearchRequest } = require("../helpers/url");
const { createSearchRequest } = require("../helpers/db/searchRequest");
const { AD_CATEGORY } = require("../common/enums");
const { AD_CATEGORY, AD_TYPE } = require("../common/enums");
const getRealEstateTypes = async (req, res) => {
const searchRequest = await currentSearchRequest(req);
const getRealEstateTypes = (req, res) => {
const title = "Koju nekretninu tražite?";
let selectedAdType = AD_TYPE.AD_TYPE_SALE.id;
if (
searchRequest &&
searchRequest.adType &&
searchRequest.adType === AD_TYPE.AD_TYPE_RENT.stringId
) {
selectedAdType = AD_TYPE.AD_TYPE_RENT.id;
}
const realEstateTypes = Object.keys(AD_CATEGORY)
.map(category => AD_CATEGORY[category])
.filter(category => category.title);
res.render("realEstateType", { realEstateTypes, title });
res.render("realEstateType", {
selectedAdType,
realEstateTypes,
title,
AD_TYPE
});
};
const postRealEstateTypes = async (req, res) => {
const searchRequest = await currentSearchRequest(req);
const adType = parseInt(req.body.adType);
const adTypeStringIds = {
[AD_TYPE.AD_TYPE_SALE.id]: AD_TYPE.AD_TYPE_SALE.stringId,
[AD_TYPE.AD_TYPE_RENT.id]: AD_TYPE.AD_TYPE_RENT.stringId
};
const adTypeStringId =
adTypeStringIds[adType] || AD_TYPE.AD_TYPE_SALE.stringId;
const validRealEstateTypes = Object.keys(AD_CATEGORY).filter(
category => !!AD_CATEGORY[category].title
);
@@ -30,12 +55,14 @@ const postRealEstateTypes = async (req, res) => {
let nextStepUrl = "";
if (searchRequest && searchRequest.id) {
nextStepUrl = `/${nextStepPage}/${searchRequest.id}`;
searchRequest.adType = adTypeStringId;
searchRequest.realEstateType = selectedRealEstateType;
await searchRequest.save();
} else {
try {
const newSearchRequest = await createSearchRequest({
adType: adTypeStringId,
realEstateType: selectedRealEstateType
});

View File

@@ -342,9 +342,9 @@ class AktidoCrawler {
getKiviAdTypeFromAktidoActionId(actionId) {
switch (actionId) {
case 1:
return AD_TYPE.AD_TYPE_SALE;
return AD_TYPE.AD_TYPE_SALE.stringId;
case 2:
return AD_TYPE.AD_TYPE_RENT;
return AD_TYPE.AD_TYPE_RENT.stringId;
default:
return undefined;
}

View File

@@ -475,11 +475,11 @@ class OlxCrawler {
getAdTypeId(adTypeText) {
switch (adTypeText) {
case "Prodaja":
return AD_TYPE.AD_TYPE_SALE;
return AD_TYPE.AD_TYPE_SALE.stringId;
case "Izdavanje":
return AD_TYPE.AD_TYPE_RENT;
return AD_TYPE.AD_TYPE_RENT.stringId;
case "Potražnja":
return AD_TYPE.AD_TYPE_RENT;
return AD_TYPE.AD_TYPE_RENT.stringId;
default:
return undefined;
}

View File

@@ -228,9 +228,9 @@ class ProstorCrawler {
static getAdTypeId(adTypeText) {
switch (adTypeText) {
case "prodaja":
return AD_TYPE.AD_TYPE_SALE;
return AD_TYPE.AD_TYPE_SALE.stringId;
case "najam":
return AD_TYPE.AD_TYPE_RENT;
return AD_TYPE.AD_TYPE_RENT.stringId;
default:
return undefined;
}

View File

@@ -342,9 +342,9 @@ class RentalCrawler {
getKiviAdTypeFromRentalActionId(actionId) {
switch (actionId) {
case 1:
return AD_TYPE.AD_TYPE_SALE;
return AD_TYPE.AD_TYPE_SALE.stringId;
case 2:
return AD_TYPE.AD_TYPE_RENT;
return AD_TYPE.AD_TYPE_RENT.stringId;
default:
return undefined;
}

View File

@@ -26,7 +26,7 @@ module.exports = (sequelize, DataTypes) => {
adType: {
type: DataTypes.TEXT,
allowNull: false,
defaultValue: AD_TYPE.AD_TYPE_SALE
defaultValue: AD_TYPE.AD_TYPE_SALE.stringId
},
email: DataTypes.TEXT,
locality: DataTypes.TEXT,

View File

@@ -1,32 +1,29 @@
.ui-segment{
color: #02adba;
border: 1px solid #02adba;
border-radius: 4px;
display:inline-block;
.ui-segment {
color: #02adba;
border: 1px solid #02adba;
border-radius: 4px;
display: inline-block;
}
.ui-segment span.option.active{
background-color: #02adba;
color: white;
.ui-segment span.option.active {
background-color: #02adba;
color: white;
}
.ui-segment span.option{
padding-left: 30px;
padding-right: 30px;
height: 35px;
text-align:center;
display:inline-block;
line-height: 35px;
margin: 0px;
float:left;
cursor:pointer;
border-right:1px solid #02adba;
}
.ui-segment span.option[disabled]{
color: gray;
.ui-segment span.option {
padding-left: 30px;
padding-right: 30px;
height: 35px;
text-align: center;
display: inline-block;
line-height: 35px;
margin: 0px;
float: left;
cursor: pointer;
border-right: 1px solid #02adba;
}
.ui-segment span.option:last-child{
border-right: none;
.ui-segment span.option:last-child {
border-right: none;
}
.segment-select{
display:none;
.segment-select {
display: none;
}

View File

@@ -58,6 +58,7 @@
}
if (simpleEmailRegex.test(email)){
$("#submit").attr("disabled", true);
$("#form-queryreview").submit();
}else{
$("#error-label-email").text("Greška ! Unešeni emailovi nisu isti");

View File

@@ -3,14 +3,22 @@
<div class="center-align">
<div class="row">
<select class="segment-select">
<option value="1">Prodaja</option>
<option value="2" disabled>Najam (uskoro)</option>
<select class="segment-select" id="adType" name="adType">
<option value="<%= AD_TYPE.AD_TYPE_SALE.id %>"
<% if (selectedAdType === AD_TYPE.AD_TYPE_SALE.id) { %>
selected="selected"
<% } %>
><%= AD_TYPE.AD_TYPE_SALE.title %></option>
<option value="<%= AD_TYPE.AD_TYPE_RENT.id %>"
<% if (selectedAdType === AD_TYPE.AD_TYPE_RENT.id) { %>
selected="selected"
<% } %>
><%= AD_TYPE.AD_TYPE_RENT.title %></option>
</select>
</div>
<br>
<div class="collection">
<div id="realEstateTypeSelection" class="collection">
<% for(const realEstateType of realEstateTypes) { %>
<a class="waves-effect row collection-item"
@@ -33,16 +41,17 @@
$.fn.extend({
Segment: function() {
$(this).each(function() {
const self = $(this);
const onchange = self.attr('onchange');
const wrapper = $("<div>", { class: "ui-segment" });
$(this)
.find("option")
.each(function(param, param2) {
const isDisabled = $(param2).attr("disabled");
.each(function() {
const option = $("<span>", {
class: "option",
onclick: onchange,
text: $(this).text(),
value: $(this).val(),
disabled: isDisabled
});
if ($(this).is(":selected")) {
option.addClass("active");
@@ -50,6 +59,12 @@
wrapper.append(option);
});
wrapper.find("span.option").click(function (){
wrapper.find("span.option").removeClass("active");
$(this).addClass("active");
self.val($(this).attr('value'));
});
$(this).after(wrapper);
$(this).hide();
});
@@ -63,6 +78,7 @@
function saveAndSubmit(id) {
$("#realEstateType").val(id);
$("#realEstateTypeSelection > a").attr("onclick", "");
$("#form-real-estate-type").submit();
}
</script>