Added docker

react_usse/Dockerfile

@@ -0,0 +1,21 @@
+# Step 1: Use an official Node.js runtime as a parent image
+FROM node:latest
+
+# Step 2: Set the working directory in the container
+WORKDIR /usr/src/app
+
+# Step 3: Copy package.json and package-lock.json (or yarn.lock)
+COPY package*.json ./
+
+# Step 4: Install dependencies
+RUN npm install
+
+# Step 5: Copy the rest of your app's source code
+COPY . .
+
+# Step 6: Build the app
+RUN npm run build
+
+# Step 7: Install serve and serve the production build
+RUN npm install -g serve
+CMD ["serve", "-s", "build"]

react_usse/Readme.md

@@ -0,0 +1,3 @@
+# React Usse
+Simple ``React`` application to use the results generated by the scraper in an *interactive* map.
+

react_usse/src/App.css

@@ -1,6 +1,9 @@
 .App {
   text-align: center;
 }
+
+
+
 /* App Header */
 .App-header {
   background-color: #282c34;
@@ -130,3 +133,5 @@ button.location-list-item:hover {
   }
 
 }
+
+/* @import "~leaflet/dist/leaflet.css"; */

react_usse/src/App.js

@@ -1,12 +1,9 @@
 import React, { Component } from 'react';
 import LeafletMap from './MapContainer';
 import locations from './locations';
-
-
 import { FaBars } from 'react-icons/fa';
 import './App.css';
 import escapeRegExp from 'escape-string-regexp';
-import sortBy from 'sort-by';
 
 
 class App extends Component {
@@ -63,6 +60,12 @@ class App extends Component {
       }
       // showingLocations.sort(sortBy('name'));
 
+      
+
+  const position = [51.505, -0.09]; // Latitude and Longitude of the map center
+
+
+
     return (
       <div className="App">
         <header className="App-header">

react_usse/src/MapContainer.js

@@ -1,7 +1,17 @@
 import React, { Component } from 'react';
-import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
-// import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
 import LocationDetails from './LocationDetails';
+import L from 'leaflet';
+import icon from 'leaflet/dist/images/marker-icon.png';
+import iconShadow from 'leaflet/dist/images/marker-shadow.png';
+
+let DefaultIcon = L.icon({
+    iconUrl: icon,
+    shadowUrl: iconShadow
+});
+
+L.Marker.prototype.options.icon = DefaultIcon;
 
 class LeafletMap extends Component {
     state = {
@@ -30,23 +40,36 @@ class LeafletMap extends Component {
             let { lng, lat } = location.position;
         }
 
+
     render() {
         let { markers} = this.props
         let { maxPrice} = this.props
         let { activeMarker, activeMarkerProps} = this.state;
-        const position = [51.505, -0.09]
+        const position = [52.079, 5.09]
         return(
             <div>
                 <div style={{ height: 'calc(100%-10vmin', width: '100%'}}>
-                <MapContainer center={position} zoom={13} scrollWheelZoom={false}>
+                <MapContainer center={position} zoom={13} style={{ height: '100vh', width: '100%' }}>
                     <TileLayer
-                        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                     />
-                    <Marker position={position}>
+                    {markers && markers.map((marker) => (
+                    <Marker position={{ lng : marker.position[0], lat : marker.position[1]}}>
                         <Popup>
-                            A pretty CSS3 popup. <br /> Easily customizable.
+                            Prijs: {marker.price} Per m2: {marker.price_m2} <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/>
+                            Hoogstraat: {Math.floor(marker.hoogstraat_location.distance / 1000)} km, {Math.floor(marker.hoogstraat_location.duration / 60)} minuten <br/>
+                            Harde: {Math.floor(marker.harde_location.distance / 1000)} km, {Math.floor(marker.harde_location.duration / 60)} minuten <br/>
+                            <a href={"https://www.funda.nl/" + marker.house_id }>Klik mij voor het huis</a>
                         </Popup>
+
+                    </Marker>        
+                    ))}
+                    <Marker position={position}>
+                        
                     </Marker>
                 </MapContainer>
                 </div>

react_usse/use_docker.sh

@@ -0,0 +1,55 @@
+#!/bin/bash
+
+CONTAINER_NAME="usse_react"
+IMAGE_NAME="usse_react"
+PORT_MAPPING="5000:3000"
+COMMAND="bash"
+
+ok () {
+    echo -e "[\033[32;1m+\033[0m] $@"
+}
+
+err () {
+    echo -e "[\033[31;1m!\033[0m] $@"
+}
+
+info () {
+    echo -e "[\033[34;1m-\033[0m] $@"
+}
+
+check_ret (){
+    if [ $? -ne 0 ]
+    then
+    err $1
+    exit -1
+    fi
+}
+
+if [[ "$1" == "remove" ]]; then
+    echo "Stopping the Docker container..."
+    docker stop ${CONTAINER_NAME} && docker rm ${CONTAINER_NAME}
+    exit 0 
+fi
+
+if [[ "$1" == "rebuild" ]]; then
+    echo "Stopping and removing the Docker container..."
+    docker stop ${CONTAINER_NAME} && docker rm ${CONTAINER_NAME}
+
+    echo "Removing the Docker image..."
+    docker rmi ${IMAGE_NAME} || true
+fi
+
+# Check if the container image exists
+if [[ ! "$(docker images -q ${IMAGE_NAME})" ]]; then
+    echo "Building the Docker container..."
+    docker build -t ${IMAGE_NAME} --build-arg http_proxy=$http_proxy --build-arg https_proxy=$https_proxy .
+    check_ret "Docker build failed!"
+fi
+
+if [[ "$1" == "recreate" ]]; then
+    echo "Removing docker container for recreation..."
+    docker stop ${CONTAINER_NAME} && docker rm ${CONTAINER_NAME}
+fi
+
+# Run container
+docker run --name ${CONTAINER_NAME} -p ${PORT_MAPPING} ${IMAGE_NAME}