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

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';