Added cookies and changed m2 color view to include parcel

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",

react_usse/package.json

@@ -4,13 +4,14 @@
   "private": true,
   "dependencies": {
     "escape-string-regexp": "^1.0.5",
-    "leaflet" : "",
+    "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",

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}

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 green = Math.round(255 * (3000 - value) / 3000);
-    let red = Math.round(255 * (value - 2000) / 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/>