Merge branch 'main' of ssh://git.herreweb.nl:3022/EljakimHerrewijnen/usse

Google_Maps_App_ReactsJS/Original_README.md

@@ -0,0 +1,43 @@
+### React Google Maps Final Project
+
+A single page React App, featuring google maps, a list of locations with on map markers, a filter locations options for finding locations easier, and a third API for rendering details about the map locations. 
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+### APIs used in this project
+- Google Maps API
+- Zomato API
+
+### Download and run the project
+- Download the project file
+- run $ npm install
+- run $ npm start
+The project runs at http://localhost:3000/
+
+## Project Specifications
+
+### Interface Design
+- All application components render on-screen in a responsive manner, and are usable across modern desktop, tablet, and phone browsers.
+
+### Application Functionality
+- Includes a text input field or dropdown menu that filters the map markers and list items to locations matching the text input or selection. Filter function runs error-free.
+
+### List View
+- A list-view of location names is provided which displays all locations by default, and displays the filtered subset of locations when a filter is applied.
+- Clicking a location on the list displays unique information about the location.
+
+### Map and Markers
+- Map displays all location markers by default, and displays the filtered subset of location markers when a filter is applied.
+- Clicking a marker displays unique information about a location  on the page in a separate div.
+
+### Asynchronous API Requests
+- Application utilizes the Google Maps API and Zomato API.
+- All data requests are retrieved in an asynchronous manner using Fetch API.
+
+
+### Offline Use
+- When available in the browser, the site uses a service worker to cache responses to requests for site assets. Visited pages are rendered when there is no network access.
+
+### Accessibility
+- Elements on the page use the appropriate semantic elements. For those elements in which a semantic element is not available, appropriate ARIA roles are defined.
+- All content-related images include appropriate alternate text that clearly describes the content of the image.

Google_Maps_App_ReactsJS/Readme.md

@@ -0,0 +1,5 @@
+# Usse
+
+```bash
+export NODE_OPTIONS=--openssl-legacy-provider
+```

documentation/source/app.rst

@@ -26,3 +26,10 @@ To use the dockerfile you can simply use the bash script: ``use_docker.sh`` and
 .. code-block:: bash
 
     ./use_docker.sh 
+
+Several commands are supported:
+
+.. code-block:: bash
+
+    ./use_docker.sh remove
+    ./use_docker.sh recreate

react_usse/src/App.css

@@ -44,9 +44,13 @@
   position: absolute;
   left: 10px;
   width: 300px;
-  height: calc(100%-10vmin);
+  top: 0;
-  top: calc(10px+10vmin);
+  /*height: calc(100%-10vmin);
+  top: calc(10px+10vmin);*/
+  height: 100%;
+  top: 0;
   border-bottom: 1px solid #d5d8df;
+  z-index: 10;
 }
 
 .priceFilterBlock{

react_usse/src/App.js

@@ -70,7 +70,7 @@ class App extends Component {
       <div className="App">
         <header className="App-header">
           <h1>Vind je droomhuis</h1>
-          <button className="toggle-menu" onClick={this.onToggleMenu}><FaBars/></button>
+          <button name="toggle-menu" className="toggle-menu" onClick={this.onToggleMenu}><FaBars/></button>
         </header>
         <LeafletMap toggleMenu={this.state.toggleMenu}
                       locations={showingLocations}

react_usse/src/MapContainer.js

@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
+import React, { Component, useEffect } from 'react';
-import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
 import LocationDetails from './LocationDetails';
 import L from 'leaflet';
@@ -25,7 +25,7 @@ class LeafletMap extends Component {
     }
 
     mapReady = (props, map) => {
-        this.setState({map})
+        this.setState({map: map})
     }
 
     onClickMarker = (props, marker, e) => {
@@ -35,10 +35,10 @@ class LeafletMap extends Component {
     this.setState({ activeMarker: {}, showingInfoWindow: false, activeMarkerProps: {} });
     
     onListItemClick = (location) => {
-        this.setState({ selectedLocation : location , showDetails : true})
+        console.log(useMap())
-            let {name} = location; 
+        this.setState({ selectedLocation : location , showDetails : true, clickedMarkerPos : location.position, clickedMarker : true})
-            let { lng, lat } = location.position;
+        console.log( this.map.getCenter())
-        }
+    }
 
 
     render() {
@@ -46,35 +46,8 @@ class LeafletMap extends Component {
         let { maxPrice} = this.props
         let { activeMarker, activeMarkerProps} = this.state;
         const position = [52.079, 5.09]
-        let count = 0
         return(
             <div>
-                <div style={{ height: 'calc(100%-10vmin', width: '100%'}}>
-                <MapContainer center={position} zoom={12} style={{ height: '100vh', width: '100%' }}>
-                    <TileLayer
-                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                    />
-                    {markers && markers.map((marker) => (
-                        
-                        <Marker key={marker.house_id} position={{ lng : marker.position[0], lat : marker.position[1]}}>
-                            <Popup>
-                                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/>
-                                Location: {count + "=" + marker.address + "  " + Math.floor(marker.position[0]) + ":" + Math.floor(marker.position[1]) + "City:" + marker.city} <br/>
-                                <a href={"https://www.funda.nl/" + marker.house_id }>Klik mij voor het huis</a>
-                            </Popup>
-                            {/* {console.log(count + "=" + marker.position + "price:" + marker.city)}
-                            {count = count + 1} */}
-                        </Marker>
-                    ))}
-                    
-                </MapContainer>
-                </div>
                 {this.props.toggleMenu && (
                     <div className="list-locations">     
                         <input 
@@ -96,7 +69,6 @@ class LeafletMap extends Component {
                             }}/>
                             <p className='priceFilterValue'>{maxPrice}</p>
                         </div>
-                    
                         <div className="location-list container">
                             <ol className="location-list">
                                 {this.props.locations.map((location) => (
@@ -115,6 +87,28 @@ class LeafletMap extends Component {
                         )}
                     </div>
                 )}
+                <div style={{ height: 'calc(100%-10vmin', width: '100%'}}>
+                <MapContainer center={position} zoom={12} style={{ height: '100vh', width: '100%', "z-index": 0 }}>
+                    <TileLayer
+                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                    />
+                    {markers && markers.map((marker) => (
+                        
+                        <Marker key={marker.house_id} position={{ lng : marker.position[0], lat : marker.position[1]}}>
+                            <Popup>
+                                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>
+                    ))}
+                </MapContainer>
+                </div>
             </div>
         )
     }