upload over the map

aloxe · Jul 23, 2024 · c2b8e82 · c2b8e82
1 parent a1ce4d9
commit c2b8e82
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 29 deletions.
diff --git a/src/components/FileUpload.css b/src/components/FileUpload.css
@@ -1,11 +1,21 @@
-section {
-  margin-top: 2em;
+.upload {
+  position: absolute;
+  top: 0;
+  width: 75vw;
+  max-height: 80vh;
+  padding: 1em;
+}
+
+.upload .footer {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  width: 200px;
 }
 
 .dropzone {
-    width: 80%;
     height: 100px;
-    margin: 10px auto;
+    margin: 0 auto;
     background-color: azure;
     border: 2px dotted skyblue;
 }
@@ -17,27 +27,27 @@ section {
 
 .selected-file {
   margin-top: 40px;
+  font-weight: 500;
 }
 
 .progress {
     margin: 2px auto;
-    margin-top: -12px;
-    margin-bottom: 20px;
-    width: calc(80% + 4px);
+    margin-top: -5px;
+    width: calc(100% + 1px);
     background: aliceblue;
     justify-content: flex-start;
     align-items: center;
     position: relative;
     padding: 0;
     display: flex;
-    height: 5px;
+    height: 7px;
   }
 
   .progress-value {
     animation: load 1s normal forwards;
     background: skyblue;
-    height: 5px;
-    font-size: x-small;
+    height: 7px;
+    font-size: xx-small;
     color: white;
   }
 
@@ -47,9 +57,9 @@ section {
   }
 
   .card {
-    width: 80%;
     margin: 0 auto;
     padding: 5px;
+    background-color: rgba(255,255,255,0.7);
   }
 
   form {
@@ -82,10 +92,3 @@ section {
     width: 80%;
     margin: 0 auto;
   }
-
-  .upload .footer {
-    position: absolute;
-    bottom: 10px;
-    left: 10px;
-    width: 200px;
-  }
diff --git a/src/components/FileUpload.jsx b/src/components/FileUpload.jsx
@@ -6,7 +6,7 @@ import Login from "./Login";
 import './FileUpload.css'
 
 
-const FileUpload = ({ isLogged, setIsLogged }) => {
+const FileUpload = ({ isLogged, setIsLogged, setGeojsonList }) => {
     const [currentGpx, setCurrentGpx] = useState(undefined);
     const [currentName, setCurrentName] = useState(undefined);
     const [currentGeoJson, setCurrentGeoJson] = useState(undefined);
@@ -22,6 +22,7 @@ const FileUpload = ({ isLogged, setIsLogged }) => {
       const getGeoJsonAwaited = async (name) => {
         const geojson = await loadGeoJsonFromGpx(name);
         setCurrentGeoJson(geojson);
+        setGeojsonList([geojson])
       }
       if (currentName) {
         getGeoJsonAwaited(currentName)

diff --git a/src/components/Wrapper.jsx b/src/components/Wrapper.jsx
@@ -6,11 +6,13 @@ import { flagToCountryCode } from "../helpers/countryUtil";
 import SideBar from "./SideBar";
 import MainMap from "./MainMap";
 import Popup from "./Popup";
+import FileUpload from '../components/FileUpload';
 
 const Wrapper = ({ isLogged, setIsLogged }) => {
   const history = useNavigate();
   const params = useParams();
   const track = params.track;
+  const setting = params.setting;
   const year = track ? getYear(track) : getYearInParams(params)
   const country = getCountryInParams(params) || ''
 
@@ -128,7 +130,7 @@ const Wrapper = ({ isLogged, setIsLogged }) => {
 
   return (
     <div className='wrapper'>
-        <SideBar
+        {!setting && <SideBar
             step={step}
             currentYear={currentYear}
             currentCountry={currentCountry}
@@ -138,7 +140,7 @@ const Wrapper = ({ isLogged, setIsLogged }) => {
             handleClickTile={handleClickTile}
             isLogged={isLogged}
             setIsLogged={setIsLogged} 
-        />
+        />}
         <MainMap 
           geojsonList={geojsonList}
           tileName={currentTile}
@@ -149,6 +151,11 @@ const Wrapper = ({ isLogged, setIsLogged }) => {
           geojson={currentGeoJson} 
           handleClickPopup={handleClickPopup} 
         />}
+        {setting && <FileUpload 
+          isLogged={isLogged} 
+          setIsLogged={setIsLogged}
+          setGeojsonList={setGeojsonList}
+        />}
     </div>
   );
 }

diff --git a/src/routes/App.jsx b/src/routes/App.jsx
@@ -1,20 +1,14 @@
-// import { useParams } from 'react-router-dom';
-import { useParams } from 'react-router-dom';
 import Wrapper from '../components/Wrapper'
-import './App.css'
-import FileUpload from '../components/FileUpload';
 import { useState } from 'react';
+import './App.css'
 
 
 
 function App() {
   const [isLogged, setIsLogged] = useState(false);
-  const params = useParams();
-  const setting = params.setting;
     return (
     <div className='App'>
-      {setting && <FileUpload isLogged={isLogged} setIsLogged={setIsLogged}/>}
-      {!setting && <Wrapper isLogged={isLogged} setIsLogged={setIsLogged} />}
+      <Wrapper isLogged={isLogged} setIsLogged={setIsLogged} />
     </div>
   )
 }