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

Search & show listings

Browse Source
This commit is contained in:
Edin Dazdarevic
2017-03-31 14:31:56 +02:00
parent c32e49e6c3
commit d6c2e857d0
16 changed files with 1598 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -26,4 +26,3 @@ Trenutno postoji samo jedan crawler a to je `olx.js`
3. node build/crawler.js
4. profit!
Trenutno se rezultati crawlanja spasavaju u JSON file, naravno ovo moramo cim prije promjeniti.

3
backend/.babelrc Normal file
View File

@@ -0,0 +1,3 @@
{
"presets": ["es2015", "es2017"],
}

187
backend/build/server.js Normal file
View File

@@ -0,0 +1,187 @@
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
var _express = __webpack_require__(1);
var _express2 = _interopRequireDefault(_express);
var _bodyParser = __webpack_require__(2);
var _bodyParser2 = _interopRequireDefault(_bodyParser);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
var MongoClient = __webpack_require__(3).MongoClient;
var url = 'mongodb://localhost:27017/example';
__webpack_require__(4);
var router = _express2.default.Router({ mergeParams: true });
var PORT = process.env.PORT || 3001;
var AGENTURA_KEY = process.env.AGENTURA_KEY || '1somethingverysecret';
// TODO:
// db.results.ensureIndex({loc:"2d"})
//collection.ensureIndex("username",callback)
router.get('/search', function () {
var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee(req, res, next) {
var bounds, db, properties, query, _bounds$split$map, _bounds$split$map2, lat1, lng1, lat2, lng2, box, all;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.prev = 0;
bounds = req.query.bounds || '';
_context.next = 4;
return MongoClient.connect(url);
case 4:
db = _context.sent;
properties = db.collection('results');
query = {};
if (bounds) {
_bounds$split$map = bounds.split(',').map(parseFloat), _bounds$split$map2 = _slicedToArray(_bounds$split$map, 4), lat1 = _bounds$split$map2[0], lng1 = _bounds$split$map2[1], lat2 = _bounds$split$map2[2], lng2 = _bounds$split$map2[3];
box = [[lat1, lng1], [lat2, lng2]];
query = Object.assign(query, {
loc: {
"$geoWithin": {
"$box": box
}
}
});
}
_context.next = 10;
return properties.find(query).toArray();
case 10:
all = _context.sent;
res.json(all);
res.end();
_context.next = 15;
return db.close();
case 15:
_context.next = 21;
break;
case 17:
_context.prev = 17;
_context.t0 = _context['catch'](0);
console.log('error:', _context.t0);
next(_context.t0);
case 21:
case 'end':
return _context.stop();
}
}
}, _callee, undefined, [[0, 17]]);
}));
return function (_x, _x2, _x3) {
return _ref.apply(this, arguments);
};
}());
var app = (0, _express2.default)();
app.use(_bodyParser2.default.json());
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
res.header('Access-Control-Allow-Credentials', 'true');
next();
});
app.use('/api', router);
app.listen(PORT, function () {
return console.log('Express server running at localhost: ' + PORT);
});
/***/ },
/* 1 */
/***/ function(module, exports) {
module.exports = require("express");
/***/ },
/* 2 */
/***/ function(module, exports) {
module.exports = require("body-parser");
/***/ },
/* 3 */
/***/ function(module, exports) {
module.exports = require("mongodb");
/***/ },
/* 4 */
/***/ function(module, exports) {
module.exports = require("babel-polyfill");
/***/ }
/******/ ]);

24
backend/package.json Normal file
View File

@@ -0,0 +1,24 @@
{
"name": "backend",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-es2017": "^6.22.0",
"body-parser": "^1.17.1",
"cookie-parser": "^1.4.3",
"express": "^4.15.2",
"isomorphic-fetch": "^2.2.1",
"mongodb": "^2.2.25"
}
}

62
backend/server.js Normal file
View File

@@ -0,0 +1,62 @@
import express from 'express'
import bodyParser from 'body-parser';
var MongoClient = require('mongodb').MongoClient;
var url = 'mongodb://localhost:27017/example';
require("babel-polyfill");
const router = express.Router({mergeParams: true})
const PORT = process.env.PORT || 3001;
const AGENTURA_KEY = process.env.AGENTURA_KEY || '1somethingverysecret';
// TODO:
// db.results.ensureIndex({loc:"2d"})
//collection.ensureIndex("username",callback)
router.get('/search', async (req, res, next) => {
try {
const bounds = req.query.bounds || '';
const db = await MongoClient.connect(url);
const properties = db.collection('results');
let query = {};
if (bounds) {
const [lat1, lng1, lat2, lng2] = bounds.split(',').map(parseFloat)
const box = [[lat1, lng1], [lat2, lng2]];
query = Object.assign(query, {
loc: {
"$geoWithin": {
"$box": box
}
}
});
}
const all = await properties.find(query).toArray();
res.json(all);
res.end();
await db.close();
} catch (e) {
console.log('error:', e);
next(e);
}
});
const app = express()
app.use(bodyParser.json());
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
res.header('Access-Control-Allow-Credentials', 'true');
next();
});
app.use('/api', router);
app.listen(PORT, () => console.log('Express server running at localhost: ' + PORT));

23
backend/webpack.config.js Normal file
View File

@@ -0,0 +1,23 @@
var fs = require('fs')
var path = require('path')
module.exports = {
entry: path.resolve(__dirname, 'server.js'),
output: {
filename: 'build/server.js'
},
target: 'node',
externals: fs.readdirSync(path.resolve(__dirname, 'node_modules')).reduce((ext, mod) => {
ext[mod] = 'commonjs ' + mod
return ext
}, {}),
node: {
__filename: true,
__dirname: true
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=es2017' }
]
}
}

1120
backend/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff

14
crawler/specific/olx.js
View File

@@ -4,9 +4,6 @@ let fetch = require('node-fetch');
let cheerio = require('cheerio');
let fs = require('fs');
const pagesToTake = 10;
export default class OlxCrawler {
constructor(fromPage = 0, toPage = 10, maxResults = 1000) {
@@ -69,6 +66,7 @@ export default class OlxCrawler {
longDescription: descriptions.last().text(),
lat,
lng,
loc: [parseFloat(lat), parseFloat(lng)],
images
};
@@ -85,10 +83,10 @@ export default class OlxCrawler {
console.log('Starting to index page: ' + pageNr);
const url = `http://www.olx.ba/pretraga?vrsta=samoizdavanje&sort_order=desc&kategorija=23&sort_po=datum&kanton=9&stranica=${pageNr}`;
const res = await fetch(url);
const body = await res.text();
const $ = cheerio.load(body);
const hrefs = [];
const res = await fetch(url);
const body = await res.text();
const $ = cheerio.load(body);
const hrefs = [];
const results = {};
$('#rezultatipretrage').find('.listitem').each((i, elem) => {
@@ -135,5 +133,3 @@ export default class OlxCrawler {
}
}
//indexSingle('http://www.olx.ba/artikal/23198642/trosoban-stan-centar-josipa-vancasa/');

8
web/components/Filters.js
View File

@@ -8,6 +8,10 @@ export default class Filters extends React.Component {
}
}
onMinPriceChange (e) {
this.props.dispatch({type: 'SET_MIN_PRICE', action: {minPrice: e.target.value}})
}
render() {
return (
@@ -21,11 +25,11 @@ export default class Filters extends React.Component {
<div className="filter-row">
<div className="filter-title">
CIJENA
CIJENA
</div>
<div className="filter-content value-between-box">
izmedju <input></input> i <input></input>
izmedju <input value={`${this.props.filters.minPrice}`} onChange={this.onMinPriceChange.bind(this)}></input> KM i <input></input>
</div>
</div>

38
web/components/ListingDetails.js
View File

@@ -1,12 +1,21 @@
import React from 'react';
export default class ListingDetails extends React.Component {
onReadMore (e) {
e.preventDefault();
this.props.dispatch({type: 'EXPAND_DESCRIPTION'});
}
onBackClick() {
if (this.props.onBackClick) {
this.props.onBackClick();
}
}
render() {
const {listing, descriptionExpanded} = this.props;
const descriptionClasses = descriptionExpanded ? "ld-description expanded" : "ld-description";
return (
<div className="ld-container">
<div className="ld-header">
@@ -21,7 +30,6 @@ export default class ListingDetails extends React.Component {
</div>
<button className="hide-listing">
<i className="fa fa-thumbs-o-down" aria-hidden="true"></i>
<span>
Sakrij
</span>
@@ -30,16 +38,16 @@ export default class ListingDetails extends React.Component {
<div className="ld-details">
<div className="ld-image-container">
<img src="https://d1qwdw9cs0do74.cloudfront.net/150698038/640x480"></img>
<img src={listing.images[0]}></img>
</div>
<div className="ld-price-address-box">
<div className="ld-price">
120 000 KM
{listing.price}
</div>
<div className="ld-address">
<div className="">Hakije Turajlica 4</div>
<div className="">Novi Grad, Sarajevo</div>
<div className="">{listing.address}</div>
<div className="">{listing.location}</div>
</div>
</div>
@@ -50,7 +58,7 @@ export default class ListingDetails extends React.Component {
</div>
<div className="ld-feature-box">
<i className="fa fa-home"></i>
88m2
{listing.size}m2
</div>
<div className="ld-feature-box">
<i className="fa fa-home"></i>
@@ -64,17 +72,15 @@ export default class ListingDetails extends React.Component {
<div className="ld-check-availability">
<button>Kontaktiraj</button>
</div>
<div className="ld-description">
Agencija "Nekretnina", (www.nekretnina.ba), prodaje komforan trosoban stan, 67m2, na veoma lijepoj lokaciji, Dobrinja 3. Stan se nalazi na visokom prizemlju stambene zgrade od samo četiri etaže.
Sastoji se od: Ulaznog hodnika, dnevnog boravka, kuhinje, trpezarije, iz koje se izlazi na balkon, dvije spavaće sobe i kupatila. Stan je dvostran a posjeduje i podrumsku prostoriju. Veoma miran kvart sa odličnim komšilukom, okružen šetalištima i parkovima za djecu, sa javnim i privatnim parkingom. Stan zahtjeva dodatna ulaganja po vlastitom izboru i odlična je ponuda za višečlanu porodicu.
Stan je trenutno bez namještaja i kuhinje, spreman za obnovu i useljenje.
U neposrednoj blizini se nalaze sve važnije ustanove, osnovna i srednja škola, Peta gimnazija, vrtići, uslužne djelatnosti te gradski saobraćaj. Molimo sve ozbiljno zainteresovane osobe da se jave za dodatne informacije.
Želite kvalitetno investirati u nekretnine? Nazovite nas!
<div className={descriptionClasses}>
{listing.longDescription}
</div>
<div className="ld-read-more">
<a href="">Procitajte vise</a>
</div>
{!descriptionExpanded
?
<div className="ld-read-more">
<a href="" onClick={this.onReadMore.bind(this)}>Pročitajte više</a>
</div>
: null}
<div className="ld-footer">
</div>
</div>

66
web/components/Main.js
View File

@@ -3,15 +3,25 @@ import Filters from './Filters';
import Listings from './Listings';
import ListingDetails from './ListingDetails';
import { pacSelectFirst } from '../helpers/googleMaps';
import {loadProperties} from '../lib/api'
import {handleMessage} from '../lib/handlers'
class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
listingDetails: false
listingDetails: false,
filters: {
minPrice: 0
}
};
}
dispatch ({type, action = {}}) {
console.log('DISPATCH', this);
handleMessage({type, action}, this);
}
componentDidMount() {
const uluru = {lat: 43.845031, lng: 18.4019262};
const map = new google.maps.Map(this.refs.map, {
@@ -28,7 +38,8 @@ class Main extends React.Component {
var control = document.createElement('div');
control.classList.add('filters-btn-toggle');
control.innerHTML = '<button>Filters</button>';
control.style = "top: 200px;"
//control.style = "top: 200px;"
control["style"]= "top: 200px;"
var input = document.getElementById('gmaps-places-input');
@@ -52,6 +63,7 @@ class Main extends React.Component {
map.setCenter(place.geometry.location);
map.setZoom(18);
}
console.log(map.getBounds());
});
control.addEventListener('click', (e) => {
@@ -59,9 +71,45 @@ class Main extends React.Component {
mapClicked: true
});
});
control.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
this.map = map;
map.addListener('idle', () => {
const properties = loadProperties({
bounds: map.getBounds().toUrlValue(),
minPrice: this.state.filters.minPrice});
properties.then(p=> p.text()).then(p => {
const data = JSON.parse(p);
console.log('props', data)
for(const [index, prop] of data.entries()) {
const myLatLng = {lat: prop.loc[0], lng: prop.loc[1]};
const marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: prop.title
});
marker.addListener('click', () => {
console.log('clicking...')
this.dispatch({type: 'VIEW_LISTING_DETAILS', action: {
id: index
}})
});
}
this.dispatch({
type: 'LISTINGS_LOADED',
action: {
listings: data
}
});
})
});
}
onCloseClick(e) {
@@ -93,9 +141,15 @@ class Main extends React.Component {
const children = [];
if (this.state.listingDetails) {
children.push(<ListingDetails onBackClick={this.onBackClick.bind(this)}/>);
const listing = this.state.listings[this.state.listingId];
console.log(this.state);
children.push(<ListingDetails
listing={listing}
dispatch={this.dispatch.bind(this)}
descriptionExpanded={this.state.descriptionExpanded}
onBackClick={this.onBackClick.bind(this)}/>);
} else {
children.push(<Filters onClose={this.onCloseClick.bind(this)}/>);
children.push(<Filters filters={this.state.filters} dispatch={this.dispatch.bind(this)} onClose={this.onCloseClick.bind(this)}/>);
children.push(<Listings onListingClick={this.onListingClick.bind(this)}/>);
}
const content = (
@@ -107,8 +161,8 @@ class Main extends React.Component {
}
render() {
const leftStyle = {};
const rightStyle = {};
const leftStyle = {};
const rightStyle = {};
const listingDetails = true;
let leftClass = 'left-base';

8
web/dist/main.css vendored
View File

@@ -653,6 +653,14 @@ html {
overflow: hidden;
}
.ld-description.expanded {
max-height: none;
}
.ld-description.expanded:after {
background: none;
}
.ld-description:after {
position: absolute;
top: 0;

13
web/lib/api.js Normal file
View File

@@ -0,0 +1,13 @@
import fetch from 'isomorphic-fetch';
export const loadProperties = ({bounds, minPrice = 0}) => {
// TODO: handle errors
//return fetch(process.env.API_URL + '/api/search', {
return fetch(`http://localhost:3001/api/search?bounds=${bounds}&minPrice=${minPrice}`, {
//credentials: 'include'
});
//const body = await res.text();
//return JSON.parse(body);
}

43
web/lib/handlers.js Normal file
View File

@@ -0,0 +1,43 @@
const setMinPrice = ({type, action}, component) => {
component.setState({
filters: {
minPrice: parseFloat(action.minPrice) || 0
}
})
}
const viewListingDetails= ({type, action}, component) => {
component.setState({
listingDetails: true,
listingId: action.id,
descriptionExpanded: false
})
}
const listingsLoaded = ({type, action}, component) => {
component.setState({
listings: action.listings
});
}
const expandDescription = ({type, action}, component) => {
component.setState({
descriptionExpanded: true
});
}
const handlers = {
'SET_MIN_PRICE': setMinPrice,
'LISTINGS_LOADED': listingsLoaded,
'EXPAND_DESCRIPTION': expandDescription,
'VIEW_LISTING_DETAILS': viewListingDetails
}
export const handleMessage = ({type, action}, component) => {
if (!handlers[type]) {
throw new `Unhandled message: ${type}`;
}
return handlers[type]({type, action}, component);
}

3
web/package.json
View File

@@ -15,7 +15,8 @@
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"react": "^15.3.2",
"react-dom": "^15.3.2"
"react-dom": "^15.3.2",
"react-image-gallery": "^0.7.15"
},
"devDependencies": {
"webpack": "^1.13.3",

20
web/yarn.lock
View File

@@ -1520,6 +1520,14 @@ loader-utils@^0.2.11:
json5 "^0.5.0"
object-assign "^4.0.1"
lodash.debounce@^4.0.8:
version "4.0.8"
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
lodash.throttle@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
lodash@^4.16.2, lodash@^4.2.0:
version "4.16.6"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.16.6.tgz#d22c9ac660288f3843e16ba7d2b5d06cca27d777"
@@ -1915,6 +1923,18 @@ react-dom:
version "15.3.2"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.3.2.tgz#c46b0aa5380d7b838e7a59c4a7beff2ed315531f"
react-image-gallery:
version "0.7.15"
resolved "https://registry.yarnpkg.com/react-image-gallery/-/react-image-gallery-0.7.15.tgz#8930b0b5d5c04b22dd69434d5497889fd7e9d5dc"
dependencies:
lodash.debounce "^4.0.8"
lodash.throttle "^4.1.1"
react-swipeable "^3.5.1"
react-swipeable@^3.5.1:
version "3.9.2"
resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-3.9.2.tgz#bbaab62688b1aed4a4f73830d272eedd168f3627"
readable-stream@^1.0.27-1, readable-stream@^1.1.13:
version "1.1.14"
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"