Progress on filters

2017-04-05 00:14:30 +02:00
parent 49e9e2fdfb
commit d2ee02b6df
14 changed files with 395 additions and 164 deletions
--- a/web/components/Filters.js
+++ b/web/components/Filters.js
@@ -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>
+    );
  }
 }
--- a/web/components/ListingDetails.js
+++ b/web/components/ListingDetails.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import Gallery from './gallery';
+import {formatPrice} from '../lib/helpers';

 export default class ListingDetails extends React.Component {
  onReadMore (e) {
@@ -48,7 +49,7 @@ export default class ListingDetails extends React.Component {
            imageIndex={this.props.imageIndex} />
          <div className="ld-price-address-box">
            <div className="ld-price">
-              {listing.price.toLocaleString('bs')} KM
+              {formatPrice(listing.price)}
            </div>

            <div className="ld-address">
--- a/web/components/Listings.js
+++ b/web/components/Listings.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import {formatPrice} from '../lib/helpers';

 export default class Listings extends React.Component {
  onListingClick(id) {
@@ -24,7 +25,7 @@ export default class Listings extends React.Component {
            <img src={images[0]} alt=""></img>
          </div>
          <div className="pli-details">
-            <div className="price">{l.price.toLocaleString('bs')} KM</div>
+            <div className="price">{formatPrice(l.price)}</div>
            <div className="description">{l.rooms ? `${l.rooms} sobe, `: null}{l.size ? `${l.size}m2`: null}</div>
            <div className="address">
              <div className="street">
--- a/web/components/Main.js
+++ b/web/components/Main.js
@@ -14,7 +14,6 @@ class Main extends React.Component {
      listings: (new Map()),
      imageIndex: 0,
      filters: {
-        minPrice: 0,
        rooms: {}
      }
    };
@@ -100,40 +99,44 @@ class Main extends React.Component {

  refreshListings() {
    const map = this.map;
+    const {rooms, minSize, maxSize, minPrice, maxPrice} = this.state.filters;
+
    const properties = loadProperties({
      bounds: map.getBounds().toUrlValue(),
-      minPrice: this.state.filters.minPrice,
-      maxPrice: this.state.filters.maxPrice,
-      rooms: this.state.filters.rooms
+      rooms,
+      minSize,
+      maxSize,
+      minPrice,
+      maxPrice
    });

-      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]};
+    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: prop.url
-            }})
-          });
-        }
-
-        this.dispatch({
-          type: 'LISTINGS_LOADED',
-          action: {
-            listings: data
-          }
+        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: prop.url
+          }})
+        });
+      }
+
+      this.dispatch({
+        type: 'LISTINGS_LOADED',
+        action: {
+          listings: data
+        }
+      });
+    })
  }

  onListingClick() {