From 61586367586d32f127e4953f6d47e1af75fe06c8 Mon Sep 17 00:00:00 2001 From: Carlos Sousa Date: Mon, 18 Dec 2023 23:41:10 +0100 Subject: [PATCH] updated initial PoC --- Dockerfile | 4 + docker-compose.yml | 4 +- frontend/public/lists/visited.json | 208 ++++++++++++++++++++++-- frontend/public/lists/wishlist.json | 21 +-- frontend/public/{ => maps}/world.json | 0 frontend/src/App.js | 25 --- frontend/src/components/MapComponent.js | 37 +++-- 7 files changed, 223 insertions(+), 76 deletions(-) rename frontend/public/{ => maps}/world.json (100%) diff --git a/Dockerfile b/Dockerfile index 75e0961..7b73bf5 100644 --- a/Dockerfile +++ b/Dockerfile @@ -9,5 +9,9 @@ RUN npm run build # Stage 2: Serve the application with Nginx FROM nginx:alpine COPY --from=build /app/build /usr/share/nginx/html + +# Set permissions for the images directory +RUN chmod -R 755 /usr/share/nginx/html/images + EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] diff --git a/docker-compose.yml b/docker-compose.yml index ac92f4f..9c44bea 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -14,9 +14,9 @@ services: #stdin_open: true #tty: true - website: + traveltracer: build: . - container_name: website + container_name: traveltracer restart: unless-stopped # Use WITHOUT Reverse Proxy Setup ports: diff --git a/frontend/public/lists/visited.json b/frontend/public/lists/visited.json index 2897792..c9545bd 100644 --- a/frontend/public/lists/visited.json +++ b/frontend/public/lists/visited.json @@ -1,20 +1,200 @@ [ { - "id": 1, - "name": "Eiffel Tower", - "description": "A wrought-iron lattice tower on the Champ de Mars in Paris, France.", - "thumbnailUrl": "url_to_eiffel_thumbnail.jpg", - "imageUrl": "url_to_eiffel_image.jpg", - "lat": 48.8584, - "lng": 2.2945 + "name": "Budapest, Hungary", + "description": "A wonderful city with amazing views, even if sometimes too much \"touristic friendly\"", + "images" : [ + ["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"] + ], + "lat": 47.497913, + "lng": 19.040236 }, { - "id": 2, - "name": "Statue of Liberty", - "description": "A colossal neoclassical sculpture on Liberty Island in New York Harbor.", - "thumbnailUrl": "url_to_liberty_thumbnail.jpg", - "imageUrl": "url_to_liberty_image.jpg", - "lat": 40.6892, - "lng": -74.0445 + "name": "Bratislava, Slovakia", + "description": "What a *wonderful* city, with such history and views and so much culture and food to offer. Can't recommend enough, even if it doesn't require the longest stay.", + "images" : [ + ["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"] + ], + "lat": 48.148598, + "lng": 17.107748 + }, + { + "name": "Vienna, Austria", + "description": "If you enjoy castles, palaces and visiting the home of one of the most long lasting and powerful families, dating centuries into the past where they dynasty effects can still be felt in almost the entire Central Europe, Vienna is your place.", + "images" : [ + ["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"] + ], + "lat": 48.2083537, + "lng": 16.3725042 + }, + { + "name": "Florence, Italy", + "description": "An *amazing* city, full of culture, views, smells and food. One of my favourite cities, either if I'm talking about Italian ones or all places.", + "images" : [ + ["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"] + ], + "lat": 43.7698712, + "lng": 11.2555757 + }, + { + "name": "Pisa, Italy", + "description": "Rather iconic because of *that* monument, but a very lovely city to visit in Italy. Walking near the sea and eating a true gelato is highly recommend.", + "images" : [ + ["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"] + ], + "lat": 43.7159395, + "lng": 10.4018624 + }, + { + "name": "Karlsruhe, Germany", + "description": "", + "images" : [ + ["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"] + ], + "lat": 49.0068705, + "lng": 8.4034195 + }, + { + "name": "Ludwigsburg, Germany", + "description": "", + "images" : [ + ["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"] + ], + "lat": 48.8953937, + "lng": 9.1895147 + }, + { + "name": "Dortmund, Germany", + "description": "", + "images" : [ + ["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"] + ], + "lat": 51.5142273, + "lng": 7.4652789 + }, + { + "name": "Munich, Germany", + "description": "", + "images" : [ + ["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"] + ], + "lat": 48.1371079, + "lng": 11.5753822 + }, + { + "name": "Konstanz, Germany", + "description": "", + "images" : [ + ["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"] + ], + "lat": 47.659216, + "lng": 9.1750718 + }, + { + "name": "Prague, Czech Republic", + "description": "", + "images" : [ + ["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"] + ], + "lat": 50.0874654, + "lng": 14.4212535 + }, + { + "name": "Kraków, Poland", + "description": "", + "images" : [ + ["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"] + ], + "lat": 50.0619474, + "lng": 19.9368564 + }, + { + "name": "Auschwitz, Oświęcim, Poland", + "description": "", + "images" : [ + ["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"] + ], + "lat": 50.0336707, + "lng": 19.2600798 + }, + { + "name": "Riga, Latvia", + "description": "", + "images" : [ + ["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"] + ], + "lat": 56.9493977, + "lng": 24.1051846 + }, + { + "name": "Tallinn, Estonia", + "description": "", + "images" : [ + ["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"] + ], + "lat": 59.4372155, + "lng": 24.7453688 + }, + { + "name": "Vilnius, Lithuania", + "description": "", + "images" : [ + ["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"] + ], + "lat": 54.6870458, + "lng": 25.2829111 + }, + { + "name": "Porto, Portugal", + "description": "", + "images" : [ + ["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"] + ], + "lat": 41.1494512, + "lng": -8.6107884 + }, + { + "name": "Lisbon, Portugal", + "description": "", + "images" : [ + ["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"] + ], + "lat": 38.7077507, + "lng": -9.1365919 + }, + { + "name": "Sintra, Portugal", + "description": "", + "images" : [ + ["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"] + ], + "lat": 38.79846, + "lng": -9.3881 + }, + { + "name": "Serra da Estrela, Portugal", + "description": "", + "images" : [ + ["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"] + ], + "lat": 40.32, + "lng": -7.62 + }, + { + "name": "Athens, Portugal", + "description": "", + "images" : [ + ["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"] + ], + "lat": 37.9755648, + "lng": 23.7348324 + }, + { + "name": "Thessaloniki, Portugal", + "description": "", + "images" : [ + ["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"] + ], + "lat": 40.6403167, + "lng": 22.9352716 } ] diff --git a/frontend/public/lists/wishlist.json b/frontend/public/lists/wishlist.json index d7dfccf..0637a08 100644 --- a/frontend/public/lists/wishlist.json +++ b/frontend/public/lists/wishlist.json @@ -1,20 +1 @@ -[ - { - "id": 1, - "name": "Eiffel Tower", - "lat": 48.8584, - "lng": 2.2945 - }, - { - "id": 2, - "name": "Statue of Liberty", - "lat": 40.6892, - "lng": -74.0445 - }, - { - "id": 3, - "name": "Great Wall of China", - "lat": 40.4319, - "lng": 116.5704 - } -] +[] \ No newline at end of file diff --git a/frontend/public/world.json b/frontend/public/maps/world.json similarity index 100% rename from frontend/public/world.json rename to frontend/public/maps/world.json diff --git a/frontend/src/App.js b/frontend/src/App.js index b3a134f..e80f3e9 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,30 +1,5 @@ -// import logo from './logo.svg'; // import './App.css'; -// function App() { -// return ( -//
-//
-// logo -//

-// Edit src/App.js and save to reload. -//

-// -// Learn React -// -//
-//
-// ); -// } - -// export default App; - - import React from 'react'; import MapComponent from './components/MapComponent'; diff --git a/frontend/src/components/MapComponent.js b/frontend/src/components/MapComponent.js index c779a3a..3f9d494 100644 --- a/frontend/src/components/MapComponent.js +++ b/frontend/src/components/MapComponent.js @@ -10,7 +10,7 @@ const MapComponent = () => { useEffect(() => { // Fetch GeoJSON data - fetch('world.json') + fetch('maps/world.json') .then(res => res.json()) .then(data => setGeoJson(data)); @@ -47,35 +47,42 @@ const MapComponent = () => { attribution='Map data © OpenStreetMap contributors' /> {geoJson && } + {visitedPois.map(poi => ( - +

{poi.name}

{poi.description}

- {`Thumbnail openInNewTab(poi.imageUrl)} - /> + {poi.images.map(([thumbnailUrl, imageUrl]) => ( + {`Thumbnail openInNewTab(imageUrl)} + /> + ))}
))} {wishlistPois.map(poi => ( - +

{poi.name}

{poi.description}

- {`Thumbnail openInNewTab(poi.imageUrl)} - /> + {poi.images.map(([thumbnailUrl, imageUrl]) => ( + {`Thumbnail openInNewTab(imageUrl)} + /> + ))}