diff --git a/front-end/GoodOldMap/index.html b/front-end/GoodOldMap/index.html index 4eecffc..2a00b50 100644 --- a/front-end/GoodOldMap/index.html +++ b/front-end/GoodOldMap/index.html @@ -2,10 +2,16 @@ - + + + GoodOldMap diff --git a/front-end/GoodOldMap/package-lock.json b/front-end/GoodOldMap/package-lock.json index 9632446..76ec4d6 100644 --- a/front-end/GoodOldMap/package-lock.json +++ b/front-end/GoodOldMap/package-lock.json @@ -8,8 +8,10 @@ "name": "goodoldmap", "version": "0.0.0", "dependencies": { + "leaflet": "^1.9.4", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-leaflet": "^4.2.1", "react-router-dom": "^6.17.0" }, "devDependencies": { @@ -926,6 +928,16 @@ "node": ">= 8" } }, + "node_modules/@react-leaflet/core": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz", + "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==", + "peerDependencies": { + "leaflet": "^1.9.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, "node_modules/@remix-run/router": { "version": "1.10.0", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.10.0.tgz", @@ -2960,6 +2972,11 @@ "json-buffer": "3.0.1" } }, + "node_modules/leaflet": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", + "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==" + }, "node_modules/levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -3606,6 +3623,19 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "node_modules/react-leaflet": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz", + "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==", + "dependencies": { + "@react-leaflet/core": "^2.1.0" + }, + "peerDependencies": { + "leaflet": "^1.9.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, "node_modules/react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", @@ -5045,6 +5075,12 @@ "fastq": "^1.6.0" } }, + "@react-leaflet/core": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz", + "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==", + "requires": {} + }, "@remix-run/router": { "version": "1.10.0", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.10.0.tgz", @@ -6533,6 +6569,11 @@ "json-buffer": "3.0.1" } }, + "leaflet": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", + "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==" + }, "levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -6967,6 +7008,14 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "react-leaflet": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz", + "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==", + "requires": { + "@react-leaflet/core": "^2.1.0" + } + }, "react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", diff --git a/front-end/GoodOldMap/package.json b/front-end/GoodOldMap/package.json index 1efe2f7..12d2d60 100644 --- a/front-end/GoodOldMap/package.json +++ b/front-end/GoodOldMap/package.json @@ -10,8 +10,10 @@ "preview": "vite preview" }, "dependencies": { + "leaflet": "^1.9.4", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-leaflet": "^4.2.1", "react-router-dom": "^6.17.0" }, "devDependencies": { diff --git a/front-end/GoodOldMap/src/App.jsx b/front-end/GoodOldMap/src/App.jsx index d9b91d2..cd99feb 100644 --- a/front-end/GoodOldMap/src/App.jsx +++ b/front-end/GoodOldMap/src/App.jsx @@ -6,17 +6,20 @@ import Login from './pages/Authenticate/Login'; import Register from './pages/Authenticate/Register'; import Error from './pages/Error/Error'; import InfoDetail from './pages/InfoDetail/InfoDetail'; +import Favorite from './pages/FavoriteList/Favorite'; import AuthLayout from './pages/Authenticate/AuthLayout'; import AccountLayout from './pages/Account/AccountLayout'; -import Favorite from './pages/FavoriteList/Favorite'; - +import MapLayout from './pages/MainMap/MapLayout'; const App = () => { return ( <> - } /> + + }> + } /> + }> } /> } /> @@ -25,11 +28,10 @@ const App = () => { {/* TODO: add params: /info/:pieceInfo */} }/> - }> - }> - }/> - } /> - + }> + } /> + }/> + } /> diff --git a/front-end/GoodOldMap/src/components/popup/popupContent.jsx b/front-end/GoodOldMap/src/components/popup/popupContent.jsx index 7d823ee..a71e2be 100644 --- a/front-end/GoodOldMap/src/components/popup/popupContent.jsx +++ b/front-end/GoodOldMap/src/components/popup/popupContent.jsx @@ -6,8 +6,8 @@ function PopupContent(props){ return ( // dark background
{props.handleClick()}}> + className="popupBackground fixed top-0 left-0 z-50 w-full h-full bg-black bg-opacity-50 flex items-center justify-center" + onClick={props.handleClick}> {/* white popup container: */}
diff --git a/front-end/GoodOldMap/src/index.css b/front-end/GoodOldMap/src/index.css index 2582867..cea22d5 100644 --- a/front-end/GoodOldMap/src/index.css +++ b/front-end/GoodOldMap/src/index.css @@ -24,5 +24,4 @@ } @layer utilities { - } \ No newline at end of file diff --git a/front-end/GoodOldMap/src/pages/Account/Account.jsx b/front-end/GoodOldMap/src/pages/Account/Account.jsx index 6d79c0c..c0ae327 100644 --- a/front-end/GoodOldMap/src/pages/Account/Account.jsx +++ b/front-end/GoodOldMap/src/pages/Account/Account.jsx @@ -13,19 +13,19 @@ const Account = () => { return(
- + profile picture

{props.username}

{props.email}

{/* Add a button that redirects to another place */} - + - + diff --git a/front-end/GoodOldMap/src/pages/AccountEdit/AccountEdit.jsx b/front-end/GoodOldMap/src/pages/AccountEdit/AccountEdit.jsx index e7ca491..127d543 100644 --- a/front-end/GoodOldMap/src/pages/AccountEdit/AccountEdit.jsx +++ b/front-end/GoodOldMap/src/pages/AccountEdit/AccountEdit.jsx @@ -92,6 +92,10 @@ const AccountEdit = () => { console.error(error) } }; + const handleClose = (evt) => { + evt.stopPropagation() + if(evt.target.classList.contains("popupBackground")) setCurrentActionData(null) + } //Return the AccountEdit component return ( @@ -106,7 +110,7 @@ const AccountEdit = () => { title={currentActionData.title} inputs={currentActionData.inputs} buttons={currentActionData.buttons} - handleClick = {() => {setCurrentActionData(null)}} + handleClick = {handleClose} />}
diff --git a/front-end/GoodOldMap/src/pages/MainMap/MainMap.jsx b/front-end/GoodOldMap/src/pages/MainMap/MainMap.jsx index e1b055d..fb90bde 100644 --- a/front-end/GoodOldMap/src/pages/MainMap/MainMap.jsx +++ b/front-end/GoodOldMap/src/pages/MainMap/MainMap.jsx @@ -1,7 +1,19 @@ +import { MapContainer, TileLayer, useMap } from 'react-leaflet' + const MainMap = () => { return( <> - main map page + + + {/* + + A pretty CSS3 popup.
Easily customizable. + + */} + ) } diff --git a/front-end/GoodOldMap/src/pages/MainMap/MapLayout.jsx b/front-end/GoodOldMap/src/pages/MainMap/MapLayout.jsx new file mode 100644 index 0000000..100c5b6 --- /dev/null +++ b/front-end/GoodOldMap/src/pages/MainMap/MapLayout.jsx @@ -0,0 +1,21 @@ +import { Outlet } from "react-router-dom"; +import FormInput from "../../components/form/formInput"; + +const MapLayout = () => { + return ( + <> +
+ +
+ +
+
+ + ); +}; + +export default MapLayout; \ No newline at end of file