added perceel filter

react_usse/src/App.js

@@ -21,6 +21,7 @@ class App extends Component {
     this.cookies = cookies;
     this.setState({ price: cookies.get('price') })
     this.setState({ minPrice: cookies.get('minPrice') })
+    this.setState({ minPerceel: cookies.get('minPerceel') })
     this.setState({ afstandNFI: cookies.get('NFI') })
     this.setState({ afstandHoogstraat: cookies.get('Hoogstraat') })
     this.setState({ afstandBakkersdijk: cookies.get('Bakkersdijk') })
@@ -63,9 +64,15 @@ class App extends Component {
     const cookies = this.cookies.set(naar, minuten, { path: '/' })
     this.setState({ cookies: cookies })
   }
+
+  onUpdateMinPerceel = (minPerceel) => {
+    this.setState({ minPerceel: parseInt(minPerceel.trim())})
+    const cookies = this.cookies.set('minPerceel', minPerceel, { path: '/' })
+    this.setState({ cookies: cookies })
+  }
   
   render() {
-    const { allLocations, query, price, minPrice, afstandNFI, afstandHoogstraat, afstandKorhoen, afstandBakkersdijk } = this.state
+    const { allLocations, query, price, minPrice, minPerceel, afstandNFI, afstandHoogstraat, afstandKorhoen, afstandBakkersdijk } = this.state
     let showingLocations 
       if (query || price || afstandNFI || afstandHoogstraat || afstandKorhoen || afstandBakkersdijk) {
         showingLocations = allLocations;
@@ -87,6 +94,12 @@ class App extends Component {
             location.price >= price
           )
         }
+        if(minPerceel){
+          const perceel = parseInt(minPerceel)
+          showingLocations = showingLocations.filter((location) => 
+            location.perceel_area >= perceel
+          )
+        }
         if(afstandNFI){
           showingLocations = showingLocations.filter((location) => 
             location.nfi_location.duration <= (afstandNFI * 60)
@@ -130,12 +143,14 @@ class App extends Component {
                       onUpdateMinPrice={this.updatePriceMin}
                       onUpdateAfstand={this.updateAfstand}
                       onToggleMenu={this.onToggleMenu}
+                      onUpdateMinPerceel={this.onUpdateMinPerceel}
                       onListItemClick={this.onListItemClick}
                       showDetails={this.state.showDetails}
                       selectedLocation={this.state.selectedLocation}
                       locationData={this.state.locationData}
                       maxPrice={this.state.price}
                       minPrice={this.state.minPrice}
+                      minPerceel={this.state.minPerceel}
                       afstandNFI={this.state.afstandNFI}
                       afstandHoogstraat={this.state.afstandHoogstraat}
                       afstandKorhoen={this.state.afstandKorhoen}

react_usse/src/MapContainer.js

@@ -107,6 +107,7 @@ class LeafletMap extends Component {
         let { markers} = this.props
         let { maxPrice} = this.props
         let {minPrice} = this.props
+        let {minPerceel} = this.props
         let { afstandNFI} = this.props
         let { afstandHoogstraat} = this.props
         let { afstandKorhoen} = this.props
@@ -174,6 +175,14 @@ class LeafletMap extends Component {
                             <output>{afstandBakkersdijk}</output>
                         </div>
 
+                        <div className='priceFilterBlock'>
+                            <li>Minimaal Perceel opervlakte</li>
+                            <input type="range" min="0" max="400"  onInput={(e) => {
+                                this.props.onUpdateMinPerceel(e.target.value)
+                            }} />
+                            <output>{minPerceel}</output>
+                        </div>
+
                         <div className="location-list container">
                             <ol className="location-list">
                                 {this.props.query && this.props.locations.length === 0 && (
@@ -210,7 +219,7 @@ class LeafletMap extends Component {
                         // marker.price_m2
                         <Marker key={marker.house_id} position={{ lng : marker.position[0], lat : marker.position[1]}} icon={this.getCustomIcon(marker.price_m2_total)}>
                             <Popup>
-                                Prijs: {marker.price} Per m2: {marker.price_m2_total} <br/>
+                                Prijs: {marker.price} Per m2: {marker.price_m2_total} perceel: {marker.perceel_area}<br/>
                                 NFI: {Math.floor(marker.nfi_location.distance / 1000)} km, {Math.floor(marker.nfi_location.duration / 60)} minuten <br/>
                                 Korhoen: {Math.floor(marker.korhoen_location.distance / 1000)} km, {Math.floor(marker.korhoen_location.duration / 60)} minuten <br/>
                                 Bakkersdijk: {Math.floor(marker.bakkersdijk_location.distance / 1000)} km, {Math.floor(marker.bakkersdijk_location.duration / 60)} minuten <br/>