From 5022a2ccdae3c849bb2b5f51a8c015c41260ed42 Mon Sep 17 00:00:00 2001 From: Eljakim Herrewijnen Date: Tue, 2 Apr 2024 22:46:16 +0200 Subject: [PATCH] Added cookies and changed m2 color view to include parcel --- react_usse/package-lock.json | 46 +++++++++++++++++++++++++++++++++- react_usse/package.json | 7 +++--- react_usse/src/App.js | 30 +++++++++++++++++++++- react_usse/src/MapContainer.js | 18 +++++++++---- 4 files changed, 91 insertions(+), 10 deletions(-) diff --git a/react_usse/package-lock.json b/react_usse/package-lock.json index fd61ebfb..be56601d 100644 --- a/react_usse/package-lock.json +++ b/react_usse/package-lock.json @@ -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", diff --git a/react_usse/package.json b/react_usse/package.json index 85f30746..47f138ba 100644 --- a/react_usse/package.json +++ b/react_usse/package.json @@ -4,13 +4,14 @@ "private": true, "dependencies": { "escape-string-regexp": "^1.0.5", - "leaflet" : "", - "react-leaflet" : "4.2.1", + "leaflet": "", "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", diff --git a/react_usse/src/App.js b/react_usse/src/App.js index 9a87f958..c47fd888 100644 --- a/react_usse/src/App.js +++ b/react_usse/src/App.js @@ -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} diff --git a/react_usse/src/MapContainer.js b/react_usse/src/MapContainer.js index fc27ecaf..748c13ce 100644 --- a/react_usse/src/MapContainer.js +++ b/react_usse/src/MapContainer.js @@ -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 { +
+
  • Minimale prijs
    • + { + this.props.onUpdateMinPrice(e.target.value) + }} /> + {minPrice} +
  • Maximale prijs
    • { @@ -196,9 +204,9 @@ class LeafletMap extends Component { /> {markers && markers.map((marker) => ( // marker.price_m2 - + - Prijs: {marker.price} Per m2: {marker.price_m2}
    + Prijs: {marker.price} Per m2: {marker.price_m2_total}
    NFI: {Math.floor(marker.nfi_location.distance / 1000)} km, {Math.floor(marker.nfi_location.duration / 60)} minuten
    Korhoen: {Math.floor(marker.korhoen_location.distance / 1000)} km, {Math.floor(marker.korhoen_location.duration / 60)} minuten
    Bakkersdijk: {Math.floor(marker.bakkersdijk_location.distance / 1000)} km, {Math.floor(marker.bakkersdijk_location.duration / 60)} minuten