Merge branch 'sliders-formating' of gitlab.com:saburly/marketalarm/web into add-even-more-filters

This commit is contained in:
Naida Vatric
2020-01-14 23:19:51 +01:00
6 changed files with 199 additions and 90 deletions

View File

@@ -4,9 +4,37 @@ const getLocation = async (req, res) => {
const title = "Odaberite lokaciju"; const title = "Odaberite lokaciju";
const nextStep = req.query.nextStep || "/"; const nextStep = req.query.nextStep || "/";
//Check if location data already exists (active request)
//If it does then get location is called through edit field query
//and map should show already selected location not initial map
let selectedLatLngBounds = {};
let boundsSelected = false;
const searchRequest = await currentSearchRequest(req);
if (!searchRequest || !searchRequest.dataValues) {
res.render("notFound", { title: " " });
return;
}
const selectedArea = searchRequest.areaToSearch;
const sw = selectedArea.coordinates[0][3];
const ne = selectedArea.coordinates[0][1];
if (sw[0] && ne[0]) {
selectedLatLngBounds = {
swLat: sw[1],
swLng: sw[0],
neLat: ne[1],
neLng: ne[0]
};
boundsSelected = true;
}
res.render("location", { res.render("location", {
nextStep, nextStep,
title title,
boundsSelected,
selectedLatLngBounds
}); });
}; };

View File

@@ -312,7 +312,7 @@ class RentalCrawler {
let numberOfRooms = let numberOfRooms =
parseInt(extractedData["re_realEstates_roomsNO"]) + parseInt(extractedData["re_realEstates_roomsNO"]) +
parseInt(extractedData["re_realEstates_bedroomNO"]) || null, parseInt(extractedData["re_realEstates_bedNO"]) || null,
numberOfFloors = numberOfFloors =
parseInt(extractedData["re_realEstates_floorsNO"]) || parseInt(extractedData["re_realEstates_floorsNO"]) ||
this.getNumberOfFloorsFromFloorId(extractedData["re_floorNO_id"]), this.getNumberOfFloorsFromFloorId(extractedData["re_floorNO_id"]),
@@ -352,7 +352,9 @@ class RentalCrawler {
realEstatePropertiesFromInfrastructure.phoneConnection, realEstatePropertiesFromInfrastructure.phoneConnection,
cableTV = realEstatePropertiesFromInfrastructure.cableTV, cableTV = realEstatePropertiesFromInfrastructure.cableTV,
internet = realEstatePropertiesFromInfrastructure.internet, internet = realEstatePropertiesFromInfrastructure.internet,
basementAttic = realEstatePropertiesFromSpaces.basementAttic, basementAttic =
realEstatePropertiesFromSpaces.basementAttic ||
this.checkBasemAtticFromFloors(extractedData["re_floorNO_id"]),
storeRoom = realEstatePropertiesFromSpaces.storeRoom, storeRoom = realEstatePropertiesFromSpaces.storeRoom,
videoSurveillance = videoSurveillance =
realEstatePropertiesFromDescriptions.videoSurveillance || realEstatePropertiesFromDescriptions.videoSurveillance ||
@@ -397,9 +399,7 @@ class RentalCrawler {
); );
if (!publishedDateMoment.isValid()) { if (!publishedDateMoment.isValid()) {
throw { throw {
message: `Invalid published date : ${ message: `Invalid published date : ${extractedData["re_realEstates_inserted"]}`
extractedData["re_realEstates_inserted"]
}`
}; };
} }
@@ -410,9 +410,7 @@ class RentalCrawler {
); );
if (!renewedDateMoment.isValid()) { if (!renewedDateMoment.isValid()) {
throw { throw {
message: `Invalid renewed date : ${ message: `Invalid renewed date : ${extractedData["re_realEstates_edited"]}`
extractedData["re_realEstates_edited"]
}`
}; };
} }
@@ -782,8 +780,42 @@ class RentalCrawler {
if (floorIds.length === 0) { if (floorIds.length === 0) {
return null; return null;
} }
let noOfFloors = floorIds.length;
// Floors of 'suteren', 'podrum', 'tavan' and 'potkrovlje' are not counted
floorIds.forEach(id => {
if (
parseInt(id) === 1 ||
parseInt(id) === 2 ||
parseInt(id) === 12 ||
parseInt(id) === 14
) {
noOfFloors--;
}
});
return noOfFloors;
}
return floorIds.length; checkBasemAtticFromFloors(floorsIdText) {
// floorIdText can be array of numbers, separated by comma or number
const floorIds = floorsIdText.split(",");
let check = false;
if (floorIds.length === 0) {
check = false;
}
//If floors 'suteren', 'podrum', 'tavan' and 'potkrovlje' exists then tag for basement-attic is true
floorIds.forEach(id => {
if (
parseInt(id) === 1 ||
parseInt(id) === 2 ||
parseInt(id) === 12 ||
parseInt(id) === 14
) {
check = true;
}
});
return check;
} }
async sleep(ms) { async sleep(ms) {

View File

@@ -1,13 +1,17 @@
<div class="row center-align"> <div class="row center-align">
<h3> <h3>
Područje na mapi će biti uključeno u pretragu. Namjestite mapu na ulice Područje na mapi će biti uključeno u pretragu. Namjestite mapu na ulice koje
koje želite da budu vidljive. želite da budu vidljive.
</h3> </h3>
</div> </div>
<div class="row center-align"> <div class="row center-align">
<div class="col s12 m12 l12 xl12"> <div class="col s12 m12 l12 xl12">
<input id="autocompleteInput" placeholder="Unesite grad, naselje ili ulicu..." type="text" /> <input
id="autocompleteInput"
placeholder="Unesite grad, naselje ili ulicu..."
type="text"
/>
</div> </div>
</div> </div>
@@ -17,12 +21,17 @@
</div> </div>
</div> </div>
<br> <br />
<form method="POST" id="form-map-output"> <form method="POST" id="form-map-output">
<div class="row center-align"> <div class="row center-align">
<div class="col s6 push-s3"> <div class="col s6 push-s3">
<a id="submit" href="#" class="welcome-center-button waves-effect waves-light btn">Dalje</a> <a
id="submit"
href="#"
class="welcome-center-button waves-effect waves-light btn"
>Dalje</a
>
</div> </div>
</div> </div>
<input type="hidden" name="north" id="north" /> <input type="hidden" name="north" id="north" />
@@ -41,15 +50,15 @@
function locateMe() { function locateMe() {
if (navigator.geolocation) { if (navigator.geolocation) {
function onLocationSuccess(position) {
function onLocationSuccess (position) { const coordinates =
const coordinates = position && position.coords ? position.coords : null; position && position.coords ? position.coords : null;
if (coordinates){ if (coordinates) {
const longitude = coordinates.longitude || null; const longitude = coordinates.longitude || null;
const latitude = coordinates.latitude || null; const latitude = coordinates.latitude || null;
if (longitude && latitude && map){ if (longitude && latitude && map) {
map.setCenter({lat: latitude, lng: longitude}); map.setCenter({ lat: latitude, lng: longitude });
map.setZoom(16); map.setZoom(16);
} }
} }
@@ -61,20 +70,20 @@
function initMap() { function initMap() {
const BOSNIA_BOUNDS = { const BOSNIA_BOUNDS = {
north: 45.70, north: 45.7,
south: 41.69, south: 41.69,
west: 15.55, west: 15.55,
east: 20.77, east: 20.77
}; };
const SARAJEVO_COORDINATES = { const SARAJEVO_COORDINATES = {
lat: 43.85, lat: 43.85,
lng: 18.41, lng: 18.41
}; };
const mapElement = document.getElementById('map'); const mapElement = document.getElementById("map");
const restrictMapPanningToBosniaOnly = { const restrictMapPanningToBosniaOnly = {
latLngBounds: BOSNIA_BOUNDS, latLngBounds: BOSNIA_BOUNDS,
strictBounds: true, strictBounds: true
}; };
const initialMapParams = { const initialMapParams = {
center: SARAJEVO_COORDINATES, center: SARAJEVO_COORDINATES,
@@ -87,38 +96,50 @@
}; };
map = new google.maps.Map(mapElement, initialMapParams); map = new google.maps.Map(mapElement, initialMapParams);
const inputElement = document.getElementById('autocompleteInput'); const inputElement = document.getElementById("autocompleteInput");
const restrictAutocompleteResultsToBosniaOnly = {'country': 'ba'}; const restrictAutocompleteResultsToBosniaOnly = { country: "ba" };
const initialAutocompleteParams = { const initialAutocompleteParams = {
types: ['geocode'], types: ["geocode"],
componentRestrictions: restrictAutocompleteResultsToBosniaOnly, componentRestrictions: restrictAutocompleteResultsToBosniaOnly,
fields: ['geometry', 'types', 'address_components'] fields: ["geometry", "types", "address_components"]
}; };
autocomplete = new google.maps.places.Autocomplete(inputElement, initialAutocompleteParams); autocomplete = new google.maps.places.Autocomplete(
autocomplete.bindTo('bounds', map); inputElement,
autocomplete.addListener('place_changed', onPlaceChanged); initialAutocompleteParams
);
autocomplete.bindTo("bounds", map);
autocomplete.addListener("place_changed", onPlaceChanged);
pacSelectFirst(inputElement); pacSelectFirst(inputElement);
addLocateMeButton(map); addLocateMeButton(map);
//After map initialization we check if area is already selected
//If yes we bound map to show already selected area
const boundsSelected = <%- boundsSelected %>;
const selectedLatLngBounds = <%- JSON.stringify(selectedLatLngBounds) %>;
if (boundsSelected) {
boundMapToSelected(map, selectedLatLngBounds);
}
} }
function addLocateMeButton(map) { function addLocateMeButton(map) {
var parent = document.createElement('div'); var parent = document.createElement("div");
parent.className = "locate-me-container"; parent.className = "locate-me-container";
var a = document.createElement('a'); var a = document.createElement("a");
a.id = "locateMe"; a.id = "locateMe";
a.className = "btn-floating"; a.className = "btn-floating";
var i = document.createElement('i'); var i = document.createElement("i");
i.innerText = "gps_fixed"; i.innerText = "gps_fixed";
i.className = "material-icons right"; i.className = "material-icons right";
a.appendChild(i) a.appendChild(i);
a.addEventListener("click", locateMe); a.addEventListener("click", locateMe);
parent.appendChild(a) parent.appendChild(a);
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(parent) map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(parent);
} }
function onPlaceChanged() { function onPlaceChanged() {
@@ -133,33 +154,49 @@
function pacSelectFirst(input) { function pacSelectFirst(input) {
// store the original event binding function // store the original event binding function
const _addEventListener = input.addEventListener const _addEventListener = input.addEventListener
? input.addEventListener ? input.addEventListener
: input.attachEvent : input.attachEvent;
function addEventListenerWrapper (type, listener) { function addEventListenerWrapper(type, listener) {
// Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected, // Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
// and then trigger the original listener. // and then trigger the original listener.
if (type == 'keydown') { if (type == "keydown") {
const originalListener = listener const originalListener = listener;
listener = function (event) { listener = function(event) {
const suggestionSelected = $('.pac-item-selected').length > 0 const suggestionSelected = $(".pac-item-selected").length > 0;
if (event.key == 'Enter' && !suggestionSelected) { if (event.key == "Enter" && !suggestionSelected) {
const simulatedDownArrow = $.Event('keydown', { const simulatedDownArrow = $.Event("keydown", {
keyCode: 40, keyCode: 40,
which: 40 which: 40
}) });
originalListener.apply(input, [simulatedDownArrow]) originalListener.apply(input, [simulatedDownArrow]);
} }
originalListener.apply(input, [event]) originalListener.apply(input, [event]);
} };
} }
_addEventListener.apply(input, [type, listener]) _addEventListener.apply(input, [type, listener]);
} }
input.addEventListener = addEventListenerWrapper input.addEventListener = addEventListenerWrapper;
input.attachEvent = addEventListenerWrapper input.attachEvent = addEventListenerWrapper;
}
function boundMapToSelected(map, selectedLatLngBounds) {
const swBound = new google.maps.LatLng(
selectedLatLngBounds.swLat,
selectedLatLngBounds.swLng
);
const neBound = new google.maps.LatLng(
selectedLatLngBounds.neLat,
selectedLatLngBounds.neLng
);
let bounds = new google.maps.LatLngBounds();
bounds.extend(swBound);
bounds.extend(neBound);
map.fitBounds(bounds);
} }
$(document).ready(function() { $(document).ready(function() {
@@ -171,11 +208,16 @@
$("#east").val(mapBounds.getNorthEast().lng()); $("#east").val(mapBounds.getNorthEast().lng());
$("#west").val(mapBounds.getSouthWest().lng()); $("#west").val(mapBounds.getSouthWest().lng());
$("#locationInput").val(document.getElementById('autocompleteInput').value); $("#locationInput").val(
document.getElementById("autocompleteInput").value
);
$("#form-map-output").submit(); $("#form-map-output").submit();
}); });
}); });
</script> </script>
<script src="https://maps.googleapis.com/maps/api/js?key=<%= process.env.API_MAP_KEY %>&language=bs&libraries=places&callback=initMap" async <script
defer></script> src="https://maps.googleapis.com/maps/api/js?key=<%= process.env.API_MAP_KEY %>&language=bs&libraries=places&callback=initMap"
async
defer
></script>

View File

@@ -1,66 +1,73 @@
<br> <br />
<div class="row center-align"> <div class="row center-align">
<h5>Cijena</h5> <h5>Cijena (KM)</h5>
<br><br> <br /><br />
<div class="col s12"> <div class="col s12">
<div class="center-align no-ui-slider" id="priceFilter"></div> <div class="center-align no-ui-slider" id="priceFilter"></div>
</div> </div>
</div> </div>
<br> <br />
<div class="row"> <div class="row">
<div class="col s5 m3 l3 push-m1 push-l2"> <div class="col s5 m3 l3 push-m1 push-l2">
<input class="sliderInputBox" type="number" id="priceMin" name="priceMin"> <input class="sliderInputBox" type="number" id="priceMin" name="priceMin" />
</div> </div>
<div class="col s5 m3 l3 push-s1 push-m4 push-l4"> <div class="col s5 m3 l3 push-s1 push-m4 push-l4">
<input class="sliderInputBox" type="number" id="priceMax" name="priceMax"> <input class="sliderInputBox" type="number" id="priceMax" name="priceMax" />
</div> </div>
</div> </div>
<br> <br />
<div class="row center-align"> <div class="row center-align">
<h5>Površina</h5> <h5>Površina (m<sup>2</sup>)</h5>
<br><br> <br /><br />
<div class="col s12"> <div class="col s12">
<div class="center-align no-ui-slider" id="sizeFilter"></div> <div class="center-align no-ui-slider" id="sizeFilter"></div>
</div> </div>
</div> </div>
<br> <br />
<div class="row"> <div class="row">
<div class="col s5 m3 l3 push-m1 push-l2"> <div class="col s5 m3 l3 push-m1 push-l2">
<input class="sliderInputBox" type="number" id="sizeMin" name="sizeMin"> <input class="sliderInputBox" type="number" id="sizeMin" name="sizeMin" />
</div> </div>
<div class="col s5 m3 l3 push-s1 push-m4 push-l4"> <div class="col s5 m3 l3 push-s1 push-m4 push-l4">
<input class="sliderInputBox" type="number" id="sizeMax" name="sizeMax"> <input class="sliderInputBox" type="number" id="sizeMax" name="sizeMax" />
</div> </div>
</div> </div>
<br> <br />
<% if(hasGardenSize) { %> <% if(hasGardenSize) { %>
<div class="row center-align"> <div class="row center-align">
<h5>Površina okućnice</h5> <h5>Površina okućnice (m<sup>2</sup>)</h5>
<br><br> <br /><br />
<div class="col s12"> <div class="col s12">
<div class="center-align no-ui-slider" id="gardenSizeFilter"></div> <div class="center-align no-ui-slider" id="gardenSizeFilter"></div>
</div>
</div> </div>
</div>
<br> <br />
<div class="row"> <div class="row">
<div class="col s5 m3 l3 push-m1 push-l2"> <div class="col s5 m3 l3 push-m1 push-l2">
<input class="sliderInputBox" type="number" id="gardenSizeMin" name="gardenSizeMin"> <input
class="sliderInputBox"
</div> type="number"
<div class="col s5 m3 l3 push-s1 push-m4 push-l4"> id="gardenSizeMin"
<input class="sliderInputBox" type="number" id="gardenSizeMax" name="gardenSizeMax"> name="gardenSizeMin"
</div> />
</div> </div>
<div class="col s5 m3 l3 push-s1 push-m4 push-l4">
<input
class="sliderInputBox"
type="number"
id="gardenSizeMax"
name="gardenSizeMax"
/>
</div>
</div>
<% } %> <% } %>
<script> <script>

View File

@@ -13,5 +13,5 @@ if (urlToScrape) {
})(); })();
} else { } else {
console.log("No URL to scrape. Use like this : "); console.log("No URL to scrape. Use like this : ");
console.log("npm run test-olx-scraper -- URL_TO_SCRAPE"); console.log("npm run test-rental-scraper -- URL_TO_SCRAPE");
} }