senaduka/old-web
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

move all filters to one page

Browse Source
This commit is contained in:
Bilal Catic
2019-10-11 15:37:47 +02:00
parent ef3d97612b
commit 3251aca4e7
12 changed files with 235 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
app/common/enums.js
View File

@@ -1,14 +1,70 @@
const PRICE_SLIDER_OPTIONS = {
start: [30000, 70000],
range: {
min: [0, 1000],
"10%": [20000, 1000],
"35%": [100000, 1000],
"70%": [200000, 10000],
max: [1000000]
},
connect: true,
tooltips: true
};
//This will be used for Flats, Apartments, Houses
const HOME_SIZE_SLIDER_OPTIONS = {
start: [20, 75],
range: {
min: [0, 5],
"50%": [100, 10],
max: [400]
},
connect: true,
tooltips: true
};
const GARDEN_SIZE_SLIDER_OPTIONS = {
start: [100, 1000],
range: {
min: [0, 10],
"40%": [1000, 100],
"80%": [10000, 100],
max: [100000]
},
connect: true,
tooltips: true
};
const AD_TYPE = {
AD_TYPE_SALE: "SALE",
AD_TYPE_RENT: "RENT"
};
const AD_CATEGORY = {
FLAT: { id: "FLAT", title: "Stan", hasGardenSize: false },
HOUSE: { id: "HOUSE", title: "Kuća", hasGardenSize: true },
FLAT: {
id: "FLAT",
title: "Stan",
hasGardenSize: false,
priceSliderOptions: PRICE_SLIDER_OPTIONS,
sizeSliderOptions: HOME_SIZE_SLIDER_OPTIONS
},
HOUSE: {
id: "HOUSE",
title: "Kuća",
hasGardenSize: true,
priceSliderOptions: PRICE_SLIDER_OPTIONS,
sizeSliderOptions: HOME_SIZE_SLIDER_OPTIONS,
gardenSizeSliderOptions: GARDEN_SIZE_SLIDER_OPTIONS
},
//OFFICE: { id: "OFFICE", title: "Kancelarija", hasGardenSize: false },
//LAND: { id: "LAND", title: "Zemljište", hasGardenSize: true },
APARTMENT: { id: "APARTMENT", title: "Apartman", hasGardenSize: false }
APARTMENT: {
id: "APARTMENT",
title: "Apartman",
hasGardenSize: false,
priceSliderOptions: PRICE_SLIDER_OPTIONS,
sizeSliderOptions: HOME_SIZE_SLIDER_OPTIONS
}
//GARAGE: { id: "GARAGE", title: "Garaža", hasGardenSize: false },
//COTTAGE: { id: "COTTAGE", title: "Vikendica", hasGardenSize: true }
};

48
app/controllers/gardenSizes.js
View File

@@ -1,48 +0,0 @@
const { currentSearchRequest } = require("../helpers/url");
const { AD_CATEGORY } = require("../common/enums");
const getGardenSize = (req, res) => {
const title = "Koliko okućnice tražite ?";
const unit = " m2";
const rangeFrom = {
min: 10,
max: 3000,
value: 0,
step: 10
};
const rangeTo = {
min: 10,
max: 3000,
value: 100,
step: 10
};
res.render("gardenSize", { rangeFrom, rangeTo, unit, title });
};
const postGardenSize = async (req, res) => {
const searchRequest = await currentSearchRequest(req);
const nextStepPage = req.query.nextStep || "cijena";
const nextStepUrl = `/${nextStepPage}/${searchRequest.id}`;
const realEstateType = AD_CATEGORY[searchRequest.realEstateType];
if (realEstateType && realEstateType.hasGardenSize) {
const gardenSizeMin = req.body.from || 0;
const gardenSizeMax = req.body.to || 0;
//TODO: Validate input
searchRequest.gardenSizeMin = gardenSizeMin;
searchRequest.gardenSizeMax = gardenSizeMax;
await searchRequest.save();
}
res.redirect(nextStepUrl);
};
module.exports = {
getGardenSize,
postGardenSize
};

2
app/controllers/location.js
View File

@@ -40,7 +40,7 @@ const postLocation = async (req, res) => {
await searchRequest.save();
const nextStepPage = req.query.nextStep || "povrsina";
const nextStepPage = req.query.nextStep || "filteri";
const nextStepUrl = `/${nextStepPage}/${searchRequest.id}`;
res.redirect(nextStepUrl);

43
app/controllers/prices.js
View File

@@ -1,43 +0,0 @@
const { currentSearchRequest } = require("../helpers/url");
const getPrice = (req, res) => {
const title = "Koja Vam okvirna cijena odgovara ?";
const unit = " KM";
const rangeFrom = {
min: 1000,
max: 250000,
value: 0,
step: 1000
};
const rangeTo = {
min: 1000,
max: 250000,
value: 50000,
step: 1000
};
res.render("price", { rangeFrom, rangeTo, unit, title });
};
const postPrice = async (req, res) => {
const searchRequest = await currentSearchRequest(req);
const nextStepPage = req.query.nextStep || "pregled";
const nextStepUrl = `/${nextStepPage}/${searchRequest.id}`;
const priceMin = req.body.from || 0;
const priceMax = req.body.to || 0;
//TODO: price validation
searchRequest.priceMin = priceMin;
searchRequest.priceMax = priceMax;
await searchRequest.save();
res.redirect(nextStepUrl);
};
module.exports = {
getPrice,
postPrice
};

6
app/controllers/queryReview.js
View File

@@ -49,17 +49,17 @@ const getQueryReviewData = searchRequest => {
{
id: "size",
title: sizeTitle,
url: `/povrsina/${id}?nextStep=pregled`
url: `/filteri/${id}?nextStep=pregled`
},
{
id: "gardenSize",
title: gardenSizeTitle,
url: enableGardenSizeEdit ? `/okucnica/${id}?nextStep=pregled` : ""
url: enableGardenSizeEdit ? `/filteri/${id}?nextStep=pregled` : ""
},
{
id: "price",
title: priceTitle,
url: `/cijena/${id}?nextStep=pregled`
url: `/filteri/${id}?nextStep=pregled`
}
];
};

83
app/controllers/realEstateFilters.js Normal file
View File

@@ -0,0 +1,83 @@
const { currentSearchRequest } = require("../helpers/url");
const { AD_CATEGORY } = require("../common/enums");
const getFilters = async (req, res) => {
const searchRequest = await currentSearchRequest(req);
const title = "Filteri za pretraživanje";
const {
realEstateType,
priceMin,
priceMax,
sizeMin,
sizeMax,
gardenSizeMin,
gardenSizeMax
} = searchRequest;
const category = AD_CATEGORY[realEstateType] || AD_CATEGORY.FLAT;
const {
hasGardenSize,
priceSliderOptions,
sizeSliderOptions,
gardenSizeSliderOptions
} = category;
if (priceMin && priceMax) {
priceSliderOptions.start = [priceMin, priceMax];
}
if (sizeMin && sizeMax) {
sizeSliderOptions.start = [sizeMin, sizeMax];
}
if (gardenSizeSliderOptions && gardenSizeMin && gardenSizeMax) {
gardenSizeSliderOptions.start = [gardenSizeMin, gardenSizeMax];
}
res.render("realEstateFilters", {
title,
hasGardenSize,
priceSliderOptions: JSON.stringify(priceSliderOptions),
sizeSliderOptions: JSON.stringify(sizeSliderOptions),
gardenSizeSliderOptions: JSON.stringify(gardenSizeSliderOptions)
});
};
const postFilters = async (req, res) => {
const searchRequest = await currentSearchRequest(req);
const nextStepPage = req.query.nextStep || "pregled";
const nextStepUrl = `/${nextStepPage}/${searchRequest.id}`;
const priceMin = parseInt(req.body.priceFilterMin) || 0;
const priceMax = parseInt(req.body.priceFilterMax) || 0;
const sizeMin = parseInt(req.body.sizeFilterMin) || 0;
const sizeMax = parseInt(req.body.sizeFilterMax) || 0;
//TODO: Filter validation
searchRequest.priceMin = priceMin;
searchRequest.priceMax = priceMax;
searchRequest.sizeMin = sizeMin;
searchRequest.sizeMax = sizeMax;
if (req.body.gardenSizeFilterMin && req.body.gardenSizeFilterMax) {
const gardenSizeMin = parseInt(req.body.gardenSizeFilterMin);
const gardenSizeMax = parseInt(req.body.gardenSizeFilterMax);
//TODO: Filter validation
searchRequest.gardenSizeMin = gardenSizeMin;
searchRequest.gardenSizeMax = gardenSizeMax;
}
await searchRequest.save();
res.redirect(nextStepUrl);
};
module.exports = {
getFilters,
postFilters
};

47
app/controllers/sizes.js
View File

@@ -1,47 +0,0 @@
const { currentSearchRequest } = require("../helpers/url");
const { AD_CATEGORY } = require("../common/enums");
const getSize = (req, res) => {
const title = "Od koliko kvadrata tražite nekretninu ?";
const unit = " m2";
const rangeFrom = {
min: 10,
max: 250,
value: 0,
step: 10
};
const rangeTo = {
min: 10,
max: 250,
value: 50,
step: 10
};
res.render("size", { rangeFrom, rangeTo, unit, title });
};
const postSize = async (req, res) => {
const searchRequest = await currentSearchRequest(req);
const realEstateType = AD_CATEGORY[searchRequest.realEstateType];
const sizeMin = req.body.from || 0;
const sizeMax = req.body.to || 0;
//TODO: Validation, check if real estate type is valid, ...
const nextStep =
realEstateType && realEstateType.hasGardenSize ? "okucnica" : "cijena";
const nextStepPage = req.query.nextStep || nextStep;
const nextStepUrl = `/${nextStepPage}/${searchRequest.id}`;
searchRequest.sizeMin = sizeMin;
searchRequest.sizeMax = sizeMax;
await searchRequest.save();
res.redirect(nextStepUrl);
};
module.exports = {
getSize,
postSize
};

14
app/routes/index.js
View File

@@ -7,9 +7,6 @@ const {
getRealEstateTypes,
postRealEstateTypes
} = require("../controllers/realEstateTypes");
const { getSize, postSize } = require("../controllers/sizes");
const { getGardenSize, postGardenSize } = require("../controllers/gardenSizes");
const { getPrice, postPrice } = require("../controllers/prices");
const {
getQueryReview,
postQueryReview
@@ -19,6 +16,7 @@ const { getLocation, postLocation } = require("../controllers/location");
const { getUnsubscribe } = require("../controllers/unsubscribe");
const { getRealEstates } = require("../controllers/realEstates");
const { getRedirect } = require("../controllers/redirect");
const { getFilters, postFilters } = require("../controllers/realEstateFilters");
const router = express.Router();
@@ -32,14 +30,8 @@ router.post("/vrstanekretnine", postRealEstateTypes);
router.get("/lokacija/:searchRequestId", getLocation);
router.post("/lokacija/:searchRequestId", postLocation);
router.get("/povrsina/:searchRequestId", getSize);
router.post("/povrsina/:searchRequestId", postSize);
router.get("/okucnica/:searchRequestId", getGardenSize);
router.post("/okucnica/:searchRequestId", postGardenSize);
router.get("/cijena/:searchRequestId", getPrice);
router.post("/cijena/:searchRequestId", postPrice);
router.get("/filteri/:searchRequestId", getFilters);
router.post("/filteri/:searchRequestId", postFilters);
router.get("/pregled/:searchRequestId", getQueryReview);
router.post("/pregled/:searchRequestId", postQueryReview);

1
app/views/gardenSize.ejs
View File

@@ -1 +0,0 @@
<% include partials/range %>

1
app/views/price.ejs
View File

@@ -1 +0,0 @@
<% include partials/range %>

86
app/views/realEstateFilters.ejs Normal file
View File

@@ -0,0 +1,86 @@
<form id="filtersForm" method="POST">
<br>
<div class="row center-align">
<h5>Cijena</h5>
<br><br>
<div class="center-align no-ui-slider" id="priceFilter"></div>
<input type="hidden" id="priceFilterMin" name="priceFilterMin">
<input type="hidden" id="priceFilterMax" name="priceFilterMax">
</div>
<br><br>
<div class="row center-align">
<h5>Površina</h5>
<br><br>
<div class="center-align no-ui-slider" id="sizeFilter"></div>
<input type="hidden" id="sizeFilterMin" name="sizeFilterMin">
<input type="hidden" id="sizeFilterMax" name="sizeFilterMax">
</div>
<br><br>
<% if(hasGardenSize) { %>
<div class="row center-align">
<h5>Površina okućnice</h5>
<br><br>
<div class="center-align no-ui-slider" id="gardenSizeFilter"></div>
<input type="hidden" id="gardenSizeFilterMin" name="gardenSizeFilterMin">
<input type="hidden" id="gardenSizeFilterMax" name="gardenSizeFilterMax">
</div>
<br><br>
<% } %>
<div class="row">
<div class="col s6 push-s3">
<a id="submit" href="#" class="welcome-center-button waves-effect waves-light btn">Dalje</a>
</div>
</div>
</form>
<script>
$(document).ready(() => {
const priceFormat = wNumb({
thousand: ".",
suffix: " KM"
});
const sizeFormat = wNumb({
thousand: ".",
suffix: " m2"
});
const priceSlider = document.getElementById("priceFilter");
const extendedPriceSliderOptions = {...<%- priceSliderOptions %>, format: priceFormat};
noUiSlider.create(priceSlider, extendedPriceSliderOptions);
const sizeSlider = document.getElementById("sizeFilter");
const extendedSizeSliderOptions = {...<%- sizeSliderOptions %>, format: sizeFormat};
noUiSlider.create(sizeSlider, extendedSizeSliderOptions);
<% if(hasGardenSize) { %>
const gardenSizeSlider = document.getElementById("gardenSizeFilter");
const extendedGardenSizeSliderOptions = {...<%- gardenSizeSliderOptions %>, format: sizeFormat};
noUiSlider.create(gardenSizeSlider, extendedGardenSizeSliderOptions);
<% } %>
$("#submit").click(() => {
const priceFilterValues = priceSlider.noUiSlider.get();
$("#priceFilterMin").val(priceFormat.from(priceFilterValues[0]));
$("#priceFilterMax").val(priceFormat.from(priceFilterValues[1]));
const sizeFilterValues = sizeSlider.noUiSlider.get();
$("#sizeFilterMin").val(sizeFormat.from(sizeFilterValues[0]));
$("#sizeFilterMax").val(sizeFormat.from(sizeFilterValues[1]));
<% if (hasGardenSize) { %>
const gardenSizeFilterValues = gardenSizeSlider.noUiSlider.get();
$("#gardenSizeFilterMin").val(sizeFormat.from(gardenSizeFilterValues[0]));
$("#gardenSizeFilterMax").val(sizeFormat.from(gardenSizeFilterValues[1]));
<% } %>
$("#filtersForm").submit();
});
});
</script>

1
app/views/size.ejs
View File

@@ -1 +0,0 @@
<% include partials/range %>