108 lines
3.3 KiB
JavaScript
108 lines
3.3 KiB
JavaScript
import React from 'react';
|
|
|
|
export default class Filters extends React.Component {
|
|
|
|
onCloseClick(e) {
|
|
if (this.props.onClose) {
|
|
this.props.onClose();
|
|
}
|
|
}
|
|
|
|
onMinPriceChange (e) {
|
|
this.props.dispatch({type: 'SET_MIN_PRICE', action: {minPrice: e.target.value}})
|
|
}
|
|
|
|
onRoomsClick(rooms) {
|
|
console.log('rooms:', rooms);
|
|
this.props.dispatch({type: 'SET_ROOMS', action: {rooms}});
|
|
}
|
|
|
|
render() {
|
|
|
|
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)}
|
|
className="close-icon fa fa-times"
|
|
aria-hidden="true"></i>
|
|
</div>
|
|
|
|
<div className="filter-row">
|
|
<div className="filter-title">
|
|
CIJENA
|
|
</div>
|
|
|
|
<div className="filter-content value-between-box">
|
|
izmedju <input value={`${this.props.filters.minPrice}`} onChange={this.onMinPriceChange.bind(this)}></input> KM i <input></input>
|
|
</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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div className="filter-row filter-property-rooms">
|
|
<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')}`}>
|
|
Garsonjera
|
|
</div>
|
|
<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)}`}>
|
|
3
|
|
</div>
|
|
<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-content">
|
|
<div className="filter-btn more-filters">Više Filtera</div>
|
|
</div>
|
|
</div>
|
|
<div className="clear-both">
|
|
</div>
|
|
<div className="filter-bottom">
|
|
</div>
|
|
</div>)
|
|
}
|
|
}
|