Filters view on mobile

web/dist/index.html

@@ -4,7 +4,7 @@
     <title>KIVI - Najbolji način da pronađeš svoj dom</title>
     <meta charset="UTF-8">
     <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
 
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 

web/dist/main.css

@@ -170,6 +170,12 @@ html {
   border-radius: 5px 0 0 5px;
 }
 
+.view-type-right.selected,
+.view-type-left.selected {
+  background-color: #b6d53b;
+  color: #fff;
+}
+
 .view-type-right {
   border-radius: 0px 5px 5px 0;
   margin-left: -1px;
@@ -179,8 +185,13 @@ html {
   position: fixed;
   bottom: 0;
   left: 0;
-  width: 100%;
+  width: 99%;
   height: 50px;
+  display: flex;
+  text-align: center;
+  padding-left: 10px;
+  padding-right: 0;
+  align-items: baseline;
 }
 
 .filter-title {
@@ -256,7 +267,7 @@ html {
 }
 
 .filter-btn.more-filters {
-  float: right;
+  /*float: right;*/
   width: 145px;
 }
 
@@ -459,11 +470,39 @@ html {
   }
 }
 
+.listings-filter {
+  display: none;
+}
+
 @media (max-width : 768px) {
   .listings-count {
     display: none;
   }
 
+  .listings-filter {
+    right: 5px;
+    min-width: 150px;
+    /*text-align: right;*/
+    /*display: block;*/
+
+    display: inline-block;
+    border: 1px solid #b6d53b;
+    padding: 8px 12px;
+    cursor: pointer;
+    margin: 0 6px 6px 0;
+    color: #2d3138;
+    font-size: 14px;
+    letter-spacing: .4px;
+    border-radius: 3px;
+    user-select: none;
+    touch-action: manipulation;
+    vertical-align: middle;
+    text-align: center;
+    flex-grow: 1;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
   #right {
     width: 100%;
     float: none;
@@ -540,7 +579,7 @@ html {
 
   .filter-row {
     display: block;
-    padding: 11px 0;
+    padding: 5px 0;
     border: 0;
   }
 

web/src/components/Filters.js

@@ -68,8 +68,14 @@ export default class Filters extends React.Component {
     this.props.dispatch({type: 'SET_CATEGORY', action: {category}})
   }
 
-  onRefreshClick () {
+  onRefreshClick (closeFilters) {
     this.updateSearch()
+
+    if (closeFilters) {
+      this.props.dispatch({
+        type: 'CLOSE_FILTERS'
+      })
+    }
   }
 
   onKeyPress (e) {
@@ -95,6 +101,25 @@ export default class Filters extends React.Component {
     this.props.dispatch({type: 'UPDATE_SEARCH'})
   }
 
+  onResetSearch (e) {
+    this.props.dispatch({
+      type: 'UPDATE_ROUTE',
+      action: {
+        params: {
+          minPrice: '',
+          maxPrice: '',
+          minSize: '',
+          maxSize: '',
+          rooms: '',
+          category: ''
+        }
+      }
+    })
+    this.props.dispatch({
+      type: 'RESET_FILTERS'
+    })
+  }
+
   render () {
     const {filters} = this.props
     const selectedRooms = val => filters.rooms[val] ? 'selected' : ''
@@ -249,7 +274,11 @@ export default class Filters extends React.Component {
           </div>
         </div>
         <div className="clear-both" />
-        <div className="filter-bottom" />
+        <div className="filter-bottom">
+          <div onClick={this.onResetSearch.bind(this)} className="filter-btn">Poništi</div>
+          <div onClick={this.onRefreshClick.bind(this, true)} className="filter-btn">Potvrdi</div>
+        
+        </div>
       </div>
     )
   }

web/src/components/Listings.js

@@ -157,6 +157,14 @@ export default class Listings extends React.Component {
     })
   }
 
+  onFiltersClick (e) {
+    e.preventDefault()
+
+    this.props.dispatch({
+      type: 'OPEN_FILTERS'
+    })
+  }
+
   render () {
     const {listings = new Map(), totalCount, sort} = this.props
 
@@ -181,6 +189,12 @@ export default class Listings extends React.Component {
           <div className="listings-count">
             {totalCount} rezultata
           </div>
+
+          <div
+            onClick={this.onFiltersClick.bind(this)}
+            className="listings-filter">
+            Filteri
+          </div>
         </div>
 
         <div className="listings-items">

web/src/components/Main.js

@@ -166,8 +166,12 @@ class Main extends React.Component {
     })
 
     control.addEventListener('click', e => {
-      this.setState({
-        mapClicked: true
+      //this.setState({
+        //mapClicked: true
+      //})
+
+      this.dispatch({
+        type: 'OPEN_FILTERS'
       })
     })
 
@@ -183,18 +187,22 @@ class Main extends React.Component {
   }
 
   onCloseClick (e) {
-    if (this.state.mapClicked) {
-      setTimeout(
-        () => {
-          google.maps.event.trigger(this.map, 'resize')
-        },
-        100
-      )
+    if (this.state.filtersOpen) {
+      console.log('FILTERS WERE OPEN')
+      //setTimeout(
+        //() => {
+          //google.maps.event.trigger(this.map, 'resize')
+        //},
+        //100
+      //)
     }
 
-    this.setState({
-      mapClicked: false
+    this.dispatch({
+      type: 'CLOSE_FILTERS'
     })
+    //this.setState({
+      //mapClicked: false
+    //})
   }
 
   findMarker (id) {
@@ -578,12 +586,13 @@ class Main extends React.Component {
     let leftClass = 'left-base'
     let rightClass = 'right-base'
 
-    if (this.state.listingId || this.state.mapClicked) {
+    if (this.state.listingId || this.state.filtersOpen) {
       leftClass = this.addAbsoluteLeftInRender ? 'left-absolute' : ''
       rightClass = 'right-shown'
     }
 
     const {contactFormOpen} = this.state
+    const isMapView = this.state.mobileView === 'MAP'
 
     return (
       <div id="container">
@@ -601,10 +610,10 @@ class Main extends React.Component {
             type="text"
           />
           <div className="view-types">
-            <a onClick={this.onMobileListViewClick.bind(this)}className="view-type-left">
+            <a onClick={this.onMobileListViewClick.bind(this)} className={!isMapView ? "view-type-left selected": "view-type-left"}>
               <i className="btn-select-map fa fa-list" />
             </a>
-            <a onClick={this.onMobileMapViewClick.bind(this)} className="view-type-right">
+            <a onClick={this.onMobileMapViewClick.bind(this)} className={isMapView ? "view-type-right selected": "view-type-right"}>
               <i className="view-type-map-icon fa fa-map-marker" />
             </a>
           </div>
@@ -616,7 +625,7 @@ class Main extends React.Component {
 
         <div id="left" style={leftStyle} className={leftClass}>
           {this.state.mobileView === 'LIST' && !this.state.listingDetails  &&  
-          <div className="map-list-view">
+          <div className={ this.state.filtersOpen ? "map-list-view hide": "map-list-view" }>
         <Listings
           sort={this.state.sort}
           totalCount={this.state.totalCount}

web/src/lib/api.js

@@ -1,7 +1,7 @@
 import fetch from 'isomorphic-fetch'
 
 //const BASE_URL = 'localhost';
-const BASE_URL = '192.168.0.13';
+const BASE_URL = '192.168.1.117';
 
 export const saveContactRequest = (listingId, params) => {
 

web/src/lib/handlers.js

@@ -372,6 +372,27 @@ const mobileListView = ({type, action}, component) => {
   })
 }
 
+const openFilters = ({type, action}, component) => {
+  component.setState({
+    filtersOpen: true
+  })
+}
+
+const closeFilters = ({type, action}, component) => {
+  component.setState({
+    filtersOpen: false
+  })
+}
+
+const resetFilters = ({type, action}, component) => {
+  component.setState({
+    filters: {
+      rooms: {},
+      category: {}
+    }
+  })
+}
+
 const handlers = {
   SET_MIN_PRICE: setMinPrice,
   SET_MAX_PRICE: setMaxPrice,
@@ -401,7 +422,10 @@ const handlers = {
   SUBMIT_CONTACT_END: submitContactEnd,
   INVALID_CONTACT: invalidContact,
   MOBILE_MAP_VIEW: mobileMapView,
-  MOBILE_LIST_VIEW: mobileListView
+  MOBILE_LIST_VIEW: mobileListView,
+  OPEN_FILTERS: openFilters,
+  CLOSE_FILTERS: closeFilters,
+  RESET_FILTERS: resetFilters
 }
 
 export const handleMessage = ({type, action}, component) => {