Added cookies and changed m2 color view to include parcel
This commit is contained in:
parent
587f6fc950
commit
5022a2ccda
46
react_usse/package-lock.json
generated
46
react_usse/package-lock.json
generated
@ -15,7 +15,8 @@
|
||||
"react-icons": "^3.2.2",
|
||||
"react-leaflet": "4.2.1",
|
||||
"react-scripts": "^5.0.1",
|
||||
"sort-by": "^1.2.0"
|
||||
"sort-by": "^1.2.0",
|
||||
"universal-cookie": "^7.1.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@ampproject/remapping": {
|
||||
@ -3476,6 +3477,11 @@
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/cookie": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
|
||||
"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
|
||||
},
|
||||
"node_modules/@types/eslint": {
|
||||
"version": "8.21.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.21.1.tgz",
|
||||
@ -15542,6 +15548,23 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/universal-cookie": {
|
||||
"version": "7.1.4",
|
||||
"resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-7.1.4.tgz",
|
||||
"integrity": "sha512-Q+DVJsdykStWRMtXr2Pdj3EF98qZHUH/fXv/gwFz/unyToy1Ek1w5GsWt53Pf38tT8Gbcy5QNsj61Xe9TggP4g==",
|
||||
"dependencies": {
|
||||
"@types/cookie": "^0.6.0",
|
||||
"cookie": "^0.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/universal-cookie/node_modules/cookie": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
|
||||
"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/universalify": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
|
||||
@ -18943,6 +18966,11 @@
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"@types/cookie": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
|
||||
"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
|
||||
},
|
||||
"@types/eslint": {
|
||||
"version": "8.21.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.21.1.tgz",
|
||||
@ -27568,6 +27596,22 @@
|
||||
"crypto-random-string": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"universal-cookie": {
|
||||
"version": "7.1.4",
|
||||
"resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-7.1.4.tgz",
|
||||
"integrity": "sha512-Q+DVJsdykStWRMtXr2Pdj3EF98qZHUH/fXv/gwFz/unyToy1Ek1w5GsWt53Pf38tT8Gbcy5QNsj61Xe9TggP4g==",
|
||||
"requires": {
|
||||
"@types/cookie": "^0.6.0",
|
||||
"cookie": "^0.6.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"cookie": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
|
||||
"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"universalify": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
|
||||
|
||||
@ -5,12 +5,13 @@
|
||||
"dependencies": {
|
||||
"escape-string-regexp": "^1.0.5",
|
||||
"leaflet": "",
|
||||
"react-leaflet" : "4.2.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^3.2.2",
|
||||
"react-leaflet": "4.2.1",
|
||||
"react-scripts": "^5.0.1",
|
||||
"sort-by": "^1.2.0"
|
||||
"sort-by": "^1.2.0",
|
||||
"universal-cookie": "^7.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -5,16 +5,26 @@ import { FaBars } from 'react-icons/fa';
|
||||
import './App.css';
|
||||
import escapeRegExp from 'escape-string-regexp';
|
||||
|
||||
import Cookies from 'universal-cookie';
|
||||
|
||||
class App extends Component {
|
||||
state = {
|
||||
allLocations: {},
|
||||
query : '',
|
||||
toggleMenu: false,
|
||||
cookies : new Cookies(),
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.setState({ allLocations : locations})
|
||||
const cookies = new Cookies();
|
||||
this.cookies = cookies;
|
||||
this.setState({ price: cookies.get('price') })
|
||||
this.setState({ minPrice: cookies.get('minPrice') })
|
||||
this.setState({ afstandNFI: cookies.get('NFI') })
|
||||
this.setState({ afstandHoogstraat: cookies.get('Hoogstraat') })
|
||||
this.setState({ afstandBakkersdijk: cookies.get('Bakkersdijk') })
|
||||
this.setState({ afstandKorhoen: cookies.get('Korhoen') })
|
||||
}
|
||||
|
||||
onToggleMenu = () => {
|
||||
@ -27,6 +37,14 @@ class App extends Component {
|
||||
|
||||
updatePrice = (maxPrice) => {
|
||||
this.setState({ price: parseInt(maxPrice.trim())})
|
||||
const cookies = this.cookies.set('price', maxPrice, { path: '/' })
|
||||
this.setState({ cookies: cookies })
|
||||
}
|
||||
|
||||
updatePriceMin = (minPrice) => {
|
||||
this.setState({ minPrice: parseInt(minPrice.trim())})
|
||||
const cookies = this.cookies.set('minPrice', minPrice, { path: '/' })
|
||||
this.setState({ cookies: cookies })
|
||||
}
|
||||
|
||||
updateAfstand = (minuten, naar) => {
|
||||
@ -42,10 +60,12 @@ class App extends Component {
|
||||
if (naar === 'Bakkersdijk') {
|
||||
this.setState({ afstandBakkersdijk: parseInt(minuten.trim())})
|
||||
}
|
||||
const cookies = this.cookies.set(naar, minuten, { path: '/' })
|
||||
this.setState({ cookies: cookies })
|
||||
}
|
||||
|
||||
render() {
|
||||
const { allLocations, query, price, afstandNFI, afstandHoogstraat, afstandKorhoen, afstandBakkersdijk } = this.state
|
||||
const { allLocations, query, price, minPrice, afstandNFI, afstandHoogstraat, afstandKorhoen, afstandBakkersdijk } = this.state
|
||||
let showingLocations
|
||||
if (query || price || afstandNFI || afstandHoogstraat || afstandKorhoen || afstandBakkersdijk) {
|
||||
showingLocations = allLocations;
|
||||
@ -61,6 +81,12 @@ class App extends Component {
|
||||
location.price <= maxPrice
|
||||
)
|
||||
}
|
||||
if(minPrice){
|
||||
const price = parseInt(minPrice) * 1000
|
||||
showingLocations = showingLocations.filter((location) =>
|
||||
location.price >= price
|
||||
)
|
||||
}
|
||||
if(afstandNFI){
|
||||
showingLocations = showingLocations.filter((location) =>
|
||||
location.nfi_location.duration <= (afstandNFI * 60)
|
||||
@ -101,6 +127,7 @@ class App extends Component {
|
||||
query={this.state.query}
|
||||
onUpdateQuery={this.updateQuery}
|
||||
onUpdatePrice={this.updatePrice}
|
||||
onUpdateMinPrice={this.updatePriceMin}
|
||||
onUpdateAfstand={this.updateAfstand}
|
||||
onToggleMenu={this.onToggleMenu}
|
||||
onListItemClick={this.onListItemClick}
|
||||
@ -108,6 +135,7 @@ class App extends Component {
|
||||
selectedLocation={this.state.selectedLocation}
|
||||
locationData={this.state.locationData}
|
||||
maxPrice={this.state.price}
|
||||
minPrice={this.state.minPrice}
|
||||
afstandNFI={this.state.afstandNFI}
|
||||
afstandHoogstraat={this.state.afstandHoogstraat}
|
||||
afstandKorhoen={this.state.afstandKorhoen}
|
||||
|
||||
@ -37,11 +37,11 @@ L.Marker.prototype.options.icon = DefaultIcon;
|
||||
|
||||
function valueToColor(value) {
|
||||
// Clamp the value between 2000 and 5000
|
||||
value = Math.max(2000, Math.min(5000, value));
|
||||
value = Math.max(500, Math.min(3000, value));
|
||||
|
||||
// Map the value to the range 0 to 255
|
||||
let green = Math.round(255 * (5000 - value) / 3000);
|
||||
let red = Math.round(255 * (value - 2000) / 3000);
|
||||
let green = Math.round(255 * (3000 - value) / 3000);
|
||||
let red = Math.round(255 * (value - 500) / 3000);
|
||||
|
||||
// Ensure the values are within the RGB range
|
||||
green = Math.max(0, Math.min(255, green));
|
||||
@ -105,6 +105,7 @@ class LeafletMap extends Component {
|
||||
render() {
|
||||
let { markers} = this.props
|
||||
let { maxPrice} = this.props
|
||||
let {minPrice} = this.props
|
||||
let { afstandNFI} = this.props
|
||||
let { afstandHoogstraat} = this.props
|
||||
let { afstandKorhoen} = this.props
|
||||
@ -129,6 +130,13 @@ class LeafletMap extends Component {
|
||||
<button onClick={() => this.props.onToggleMenu()}>close</button>
|
||||
|
||||
|
||||
<div className='priceFilterBlock'>
|
||||
<li>Minimale prijs</li>
|
||||
<input type="range" min="100" max="700" onInput={(e) => {
|
||||
this.props.onUpdateMinPrice(e.target.value)
|
||||
}} />
|
||||
<output>{minPrice}</output>
|
||||
</div>
|
||||
<div className='priceFilterBlock'>
|
||||
<li>Maximale prijs</li>
|
||||
<input type="range" min="100" max="700" onInput={(e) => {
|
||||
@ -196,9 +204,9 @@ class LeafletMap extends Component {
|
||||
/>
|
||||
{markers && markers.map((marker) => (
|
||||
// marker.price_m2
|
||||
<Marker key={marker.house_id} position={{ lng : marker.position[0], lat : marker.position[1]}} icon={this.getCustomIcon(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} <br/>
|
||||
Prijs: {marker.price} Per m2: {marker.price_m2_total} <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/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user