From 50dbd59e304cd0829c0c9392fe7000ed940c6ab2 Mon Sep 17 00:00:00 2001 From: Nina Xiao Date: Mon, 30 Oct 2023 15:23:24 -0400 Subject: [PATCH 1/4] map setup --- front-end/GoodOldMap/index.html | 6 +++++- front-end/GoodOldMap/src/pages/MainMap/MainMap.jsx | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/front-end/GoodOldMap/index.html b/front-end/GoodOldMap/index.html index 4eecffc..7c9f438 100644 --- a/front-end/GoodOldMap/index.html +++ b/front-end/GoodOldMap/index.html @@ -2,10 +2,14 @@ - + + + GoodOldMap diff --git a/front-end/GoodOldMap/src/pages/MainMap/MainMap.jsx b/front-end/GoodOldMap/src/pages/MainMap/MainMap.jsx index e1b055d..76d23bd 100644 --- a/front-end/GoodOldMap/src/pages/MainMap/MainMap.jsx +++ b/front-end/GoodOldMap/src/pages/MainMap/MainMap.jsx @@ -2,6 +2,7 @@ const MainMap = () => { return( <> main map page +
) } From e250eac4d3feb3c239ef66327cf34ae01a925d85 Mon Sep 17 00:00:00 2001 From: Nina Xiao Date: Mon, 30 Oct 2023 16:49:34 -0400 Subject: [PATCH 2/4] del header --- front-end/GoodOldMap/index.html | 4 ---- 1 file changed, 4 deletions(-) diff --git a/front-end/GoodOldMap/index.html b/front-end/GoodOldMap/index.html index 7c9f438..0329931 100644 --- a/front-end/GoodOldMap/index.html +++ b/front-end/GoodOldMap/index.html @@ -6,10 +6,6 @@ - - GoodOldMap From f1f4aed1a0dfdc5d0da409ef6426eb9e5e14e258 Mon Sep 17 00:00:00 2001 From: Nina Xiao Date: Mon, 30 Oct 2023 17:52:55 -0400 Subject: [PATCH 3/4] basic map set up --- front-end/GoodOldMap/index.html | 6 +++ front-end/GoodOldMap/package-lock.json | 49 +++++++++++++++++++ front-end/GoodOldMap/package.json | 2 + front-end/GoodOldMap/src/App.jsx | 18 ++++--- .../src/components/form/formInput.jsx | 2 +- .../src/components/popup/popupContent.jsx | 4 +- front-end/GoodOldMap/src/index.css | 1 - .../GoodOldMap/src/pages/Account/Account.jsx | 6 +-- .../src/pages/AccountEdit/AccountEdit.jsx | 6 ++- .../GoodOldMap/src/pages/MainMap/MainMap.jsx | 15 +++++- .../src/pages/MainMap/MapLayout.jsx | 20 ++++++++ 11 files changed, 111 insertions(+), 18 deletions(-) create mode 100644 front-end/GoodOldMap/src/pages/MainMap/MapLayout.jsx diff --git a/front-end/GoodOldMap/index.html b/front-end/GoodOldMap/index.html index 0329931..2a00b50 100644 --- a/front-end/GoodOldMap/index.html +++ b/front-end/GoodOldMap/index.html @@ -6,6 +6,12 @@ + + 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/form/formInput.jsx b/front-end/GoodOldMap/src/components/form/formInput.jsx index 60511a5..d6fe899 100644 --- a/front-end/GoodOldMap/src/components/form/formInput.jsx +++ b/front-end/GoodOldMap/src/components/form/formInput.jsx @@ -3,7 +3,7 @@ const FormInput = (props) => { // optional: type return (
- 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 76d23bd..fb90bde 100644 --- a/front-end/GoodOldMap/src/pages/MainMap/MainMap.jsx +++ b/front-end/GoodOldMap/src/pages/MainMap/MainMap.jsx @@ -1,8 +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..2186aa3 --- /dev/null +++ b/front-end/GoodOldMap/src/pages/MainMap/MapLayout.jsx @@ -0,0 +1,20 @@ +import { Outlet } from "react-router-dom"; +import FormInput from "../../components/form/formInput"; + +const MapLayout = () => { + return ( + <> +
+ +
+ +
+
+ + ); +}; + +export default MapLayout; \ No newline at end of file From f3f4b6d357c830a503a88666e6449437e1f7f8d3 Mon Sep 17 00:00:00 2001 From: Nina Xiao Date: Mon, 30 Oct 2023 18:06:51 -0400 Subject: [PATCH 4/4] update comment --- front-end/GoodOldMap/src/components/form/formInput.jsx | 2 +- front-end/GoodOldMap/src/pages/MainMap/MapLayout.jsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/front-end/GoodOldMap/src/components/form/formInput.jsx b/front-end/GoodOldMap/src/components/form/formInput.jsx index d6fe899..60511a5 100644 --- a/front-end/GoodOldMap/src/components/form/formInput.jsx +++ b/front-end/GoodOldMap/src/components/form/formInput.jsx @@ -3,7 +3,7 @@ const FormInput = (props) => { // optional: type return (
- diff --git a/front-end/GoodOldMap/src/pages/MainMap/MapLayout.jsx b/front-end/GoodOldMap/src/pages/MainMap/MapLayout.jsx index 2186aa3..100c5b6 100644 --- a/front-end/GoodOldMap/src/pages/MainMap/MapLayout.jsx +++ b/front-end/GoodOldMap/src/pages/MainMap/MapLayout.jsx @@ -6,7 +6,8 @@ const MapLayout = () => { <>