EljakimHerrewijnen/usse
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added perceel filter

Browse Source
This commit is contained in:
Eljakim Herrewijnen 2024-04-03 23:17:36 +02:00
parent 72818ac343
commit 700c543570
2 changed files with 26 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
react_usse/src/App.js
View File

@ -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') })
@ -64,8 +65,14 @@ class App extends Component {
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}

11
react_usse/src/MapContainer.js
View File

@ -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/>