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

Progress on filters

Browse Source
This commit is contained in:
Edin Dazdarevic
2017-04-05 00:14:30 +02:00
parent 49e9e2fdfb
commit d2ee02b6df
14 changed files with 395 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
web/components/Filters.js
View File

@@ -1,43 +1,72 @@
import React from 'react';
import React from "react";
import { formatFilterNumber } from "../lib/helpers";
export default class Filters extends React.Component {
onCloseClick(e) {
if (this.props.onClose) {
this.props.onClose();
}
}
onMaxPriceChange (e) {
this.props.dispatch({type: 'SET_MAX_PRICE', action: {maxPrice: e.target.value}})
onMaxPriceChange(e) {
this.props.dispatch({
type: "SET_MAX_PRICE",
action: { maxPrice: e.target.value }
});
}
onMinPriceChange (e) {
this.props.dispatch({type: 'SET_MIN_PRICE', action: {minPrice: e.target.value}})
onMinPriceChange(e) {
this.props.dispatch({
type: "SET_MIN_PRICE",
action: { minPrice: e.target.value }
});
}
onMaxSizeChange(e) {
this.props.dispatch({
type: "SET_MAX_SIZE",
action: { maxSize: e.target.value }
});
}
onMinSizeChange(e) {
this.props.dispatch({
type: "SET_MIN_SIZE",
action: { minSize: e.target.value }
});
}
onRoomsClick(rooms) {
console.log('rooms:', rooms);
this.props.dispatch({type: 'SET_ROOMS', action: {rooms}});
}
onRefreshClick () {
this.props.dispatch({type: 'UPDATE_SEARCH'});
onRefreshClick() {
this.updateSearch();
}
onKeyPress (e) {
if (e.key === 'Enter') {
this.updateSearch();
}
}
updateSearch () {
this.props.dispatch({ type: "UPDATE_SEARCH" });
}
render() {
const {filters} = this.props;
const selectedRooms = (val) => filters.rooms[val] ? 'selected' : '';
const { filters } = this.props;
const selectedRooms = val => filters.rooms[val] ? "selected" : "";
return (
<div className="filters">
<div className="filters-close">
Uslovi Pretrage
<i onClick={this.onCloseClick.bind(this)}
<i
onClick={this.onCloseClick.bind(this)}
className="close-icon fa fa-times"
aria-hidden="true"></i>
aria-hidden="true"
/>
</div>
<div className="filter-row">
@@ -46,71 +75,122 @@ export default class Filters extends React.Component {
</div>
<div className="filter-content value-between-box">
izmedju <input value={`${this.props.filters.minPrice}`} onChange={this.onMinPriceChange.bind(this)}></input> KM i <input onChange={this.onMaxPriceChange.bind(this)}></input>
{this.props.filters.dirty? <button onClick={this.onRefreshClick.bind(this)}>Refresh</button>: null}
</div>
OD
<input
onKeyPress={this.onKeyPress.bind(this)}
onChange={this.onMinPriceChange.bind(this)}
value={formatFilterNumber(filters.minPrice)}
/>
{" "}
DO
<input
onKeyPress={this.onKeyPress.bind(this)}
onChange={this.onMaxPriceChange.bind(this)}
value={formatFilterNumber(filters.maxPrice)}
/>
{this.props.filters.priceDirty
?
<i
onClick={this.onRefreshClick.bind(this)}
className="fa fa-refresh fa-refresh-custom"
aria-hidden="true">
</i>
: null}
</div>
</div>
<div className="filter-row filter-property-types">
<div className="filter-title">
TIP
</div>
<div className="filter-content">
<div className="filter-btn property-type-btn">
Stan
</div>
<div className="filter-btn property-type-btn">
Kuća
</div>
<div className="filter-content">
<div className="filter-btn property-type-btn">
Stan
</div>
<div className="filter-content">
<div className="filter-btn property-type-btn">
Zemljište
</div>
<div className="filter-btn property-type-btn">
Poslovni prostor
</div>
<div className="filter-btn property-type-btn">
Kuća
</div>
</div>
<div className="filter-content">
<div className="filter-btn property-type-btn">
Zemljište
</div>
<div className="filter-btn property-type-btn">
Poslovni prostor
</div>
</div>
</div>
<div className="filter-row">
<div className="filter-title">
KVADRATA
</div>
<div className="filter-content value-between-box">
izmedju <input></input>
i <input></input>
OD
<input
onKeyPress={this.onKeyPress.bind(this)}
value={formatFilterNumber(filters.minSize)}
onChange={this.onMinSizeChange.bind(this)}
/>
DO
{" "}
<input
onKeyPress={this.onKeyPress.bind(this)}
value={formatFilterNumber(filters.maxSize)}
onChange={this.onMaxSizeChange.bind(this)}
/>
{this.props.filters.sizeDirty
? <i
onClick={this.onRefreshClick.bind(this)}
className="fa fa-refresh fa-refresh-custom"
aria-hidden="true">
</i>
: null}
</div>
</div>
<div className="filter-row filter-property-rooms">
<div className="filter-row filter-property-rooms no-border">
<div className="filter-title">
BROJ SOBA
</div>
<div className="filter-content">
<div onClick={this.onRoomsClick.bind(this, 'Garsonjera')} className={`filter-btn property-rooms-studio-btn ${selectedRooms('Garsonjera')}`}>
<div
onClick={this.onRoomsClick.bind(this, "Garsonjera")}
className={
`filter-btn property-rooms-studio-btn ${selectedRooms("Garsonjera")}`
}
>
Garsonjera
</div>
<div onClick={this.onRoomsClick.bind(this, 2)} className={`filter-btn property-rooms-btn ${selectedRooms(2)}`}>
<div
onClick={this.onRoomsClick.bind(this, 2)}
className={`filter-btn property-rooms-btn ${selectedRooms(2)}`}
>
2
</div>
<div onClick={this.onRoomsClick.bind(this, 3)} className={`filter-btn property-rooms-btn ${selectedRooms(3)}`}>
<div
onClick={this.onRoomsClick.bind(this, 3)}
className={`filter-btn property-rooms-btn ${selectedRooms(3)}`}
>
3
</div>
<div onClick={this.onRoomsClick.bind(this, '4+')} className={`filter-btn property-rooms-btn ${selectedRooms('4+')}`}>
<div
onClick={this.onRoomsClick.bind(this, "4+")}
className={`filter-btn property-rooms-btn ${selectedRooms("4+")}`}
>
4+
</div>
</div>
</div>
<div className="filter-row no-border">
<div className="filter-title">
</div>
<div className="filter-title" />
<div className="filter-content">
<div className="filter-btn more-filters">Više Filtera</div>
<div className="hide filter-btn more-filters">Više Filtera</div>
</div>
</div>
<div className="clear-both">
</div>
<div className="filter-bottom">
</div>
</div>)
<div className="clear-both" />
<div className="filter-bottom" />
</div>
);
}
}