From 05c444206e5b18420999231a77d93555d120b0e9 Mon Sep 17 00:00:00 2001
From: arielherself <ariel@arielherself.xyz>
Date: Fri, 24 Nov 2023 21:04:40 +0800
Subject: [PATCH] feat: "add" button status control & ui improvement

---
 .idea/workspace.xml  |  4 +-
 src/App.js           | 95 +++++++++++++++++++++++++-------------------
 src/SimulateClick.js |  4 +-
 src/UMap.js          | 17 ++++----
 4 files changed, 66 insertions(+), 54 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 4540371..70ab1c1 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,9 +6,7 @@
   <component name="ChangeListManager">
     <list default="true" id="3c7078e7-6f30-4d92-9696-11496f9e6dff" name="Changes" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/public/index.html" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/Networking.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/Networking.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/SimulateClick.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/SimulateClick.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/UMap.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/UMap.js" afterDir="false" />
     </list>
@@ -73,7 +71,7 @@
       <updated>1700814200305</updated>
       <workItem from="1700814201341" duration="315000" />
       <workItem from="1700814808669" duration="47000" />
-      <workItem from="1700822693197" duration="4588000" />
+      <workItem from="1700822693197" duration="7905000" />
     </task>
     <servers />
   </component>
diff --git a/src/App.js b/src/App.js
index 49550e5..e78c0e3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,7 +8,7 @@ import {
     CircularProgress,
     DialogContent,
     DialogTitle,
-    Modal,
+    Modal, ModalClose,
     ModalDialog,
     Sheet,
     Typography
@@ -20,16 +20,16 @@ export default function App() {
     const [featureOpen, setFeatureOpen] = useState(true);
     const [version, setVersion] = useState('');
     const [intro, setIntro] = useState('');
-    const hs=setInterval(()=>{
-            post('handshake', []).then((response)=>{
-                const [version,intro]=response.split('@@');
-                setVersion(version);
-                setIntro(intro);
-                clearInterval(hs);
-            }).catch((e)=> {
-                console.error(e);
-                setVersion('');
-            });
+    const hs = setInterval(() => {
+        post('handshake', []).then((response) => {
+            const [version, intro] = response.split('@@');
+            setVersion(version);
+            setIntro(intro);
+            clearInterval(hs);
+        }).catch((e) => {
+            console.error(e);
+            setVersion('');
+        });
     }, 1000);
     return (
         <div className="App" style={{pointerEvents: version !== '' ? 'all' : 'none'}}>
@@ -67,39 +67,52 @@ export default function App() {
                                         entering: {opacity: 1},
                                         entered: {opacity: 1},
                                     }[state],
+                                    display: 'flex',
+                                    width: version !== '' ? '60%' : 'auto',
+                                    height: version !== '' ? '60%' : 'auto',
                                 }}
                             >
-                                <Alert style={{display: version!==''?'none':'flex'}}
-                                    variant="soft"
-                                    color="warning"
-                                    invertedColors
-                                    startDecorator={
-                                        <CircularProgress size="lg" color="warning">
-                                            <WebhookOutlined/>
-                                        </CircularProgress>
-                                    }
-                                    sx={{alignItems: 'flex-start', gap: '1rem'}}
-                                >
-                                    <Box sx={{flex: 1}}>
-                                        <Typography level="title-lg">Still connecting...</Typography>
-                                        <Typography level="body-md">
-                                            nanoMap requires a valid backend to work. If it takes too long, please check
-                                            your connection or see our status page.
-                                        </Typography>
-                                    </Box>
-                                </Alert>
-                                <Sheet style={{display: version !== '' ? 'flex' : 'none'}}>
-                                    <img src={'icon.jpeg'}
-                                         style={{height: '150px', display: 'flex', margin: 'auto', borderRadius: '50%'}}
-                                         alt={'nanoMap'}/>
+                                <ModalClose/>
+                                <Sheet sx={{margin: 'auto'}}>
+                                    <Alert style={{display: version !== '' ? 'none' : 'flex'}}
+                                           variant="soft"
+                                           color="warning"
+                                           invertedColors
+                                           startDecorator={
+                                               <CircularProgress size="lg" color="warning">
+                                                   <WebhookOutlined/>
+                                               </CircularProgress>
+                                           }
+                                           sx={{alignItems: 'flex-start', gap: '1rem'}}
+                                    >
+                                        <Box sx={{flex: 1}}>
+                                            <Typography level="title-lg">Still connecting...</Typography>
+                                            <Typography level="body-md">
+                                                nanoMap requires a valid backend to work. If it takes too long, please
+                                                check
+                                                your connection or see our status page.
+                                            </Typography>
+                                        </Box>
+                                    </Alert>
+                                    <Sheet style={{display: version !== '' ? 'flex' : 'none'}}>
+                                        <img src={'icon.jpeg'}
+                                             style={{
+                                                 height: '150px',
+                                                 display: 'flex',
+                                                 margin: 'auto',
+                                                 borderRadius: '50%'
+                                             }}
+                                             alt={'nanoMap'}/>
+                                    </Sheet>
+                                    <DialogTitle style={{display: version !== '' ? 'flex' : 'none'}}
+                                                 sx={{margin: 'auto', fontSize: '200%', textAlign: 'center'}}>What's new
+                                        in
+                                        nanoMap {version}</DialogTitle>
+                                    <DialogContent style={{display: version !== '' ? 'flex' : 'none'}}
+                                                   sx={{margin: 'auto'}}>
+                                        <div dangerouslySetInnerHTML={{__html: intro}}/>
+                                    </DialogContent>
                                 </Sheet>
-                                <DialogTitle style={{display: version !== '' ? 'flex' : 'none'}}
-                                             sx={{margin: 'auto', fontSize: '200%'}}>What's new in
-                                    nanoMap {version}</DialogTitle>
-                                <DialogContent style={{display: version !== '' ? 'flex' : 'none'}}
-                                               sx={{margin: 'auto'}}>
-                                    <div dangerouslySetInnerHTML={{ __html: intro }} />
-                                </DialogContent>
                             </ModalDialog>
                         </Modal>
                     )}
diff --git a/src/SimulateClick.js b/src/SimulateClick.js
index 1674acd..69e6249 100644
--- a/src/SimulateClick.js
+++ b/src/SimulateClick.js
@@ -3,10 +3,10 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import React from "react";
 import {Add} from "@mui/icons-material";
 
-export default function SimulateClick() {
+export default function SimulateClick({isCandEmpty}) {
     return (
         <ButtonGroup buttonFlex={1} aria-label="flex button group" sx={{zIndex: 'modal'}}>
-            <Button variant={'solid'} color={'primary'} startDecorator={<Add />}>Add</Button>
+            <Button disabled={isCandEmpty} variant={'solid'} color={'primary'} startDecorator={<Add />}>Add</Button>
         </ButtonGroup>
     );
 }
\ No newline at end of file
diff --git a/src/UMap.js b/src/UMap.js
index f7a3544..c6ae8a3 100644
--- a/src/UMap.js
+++ b/src/UMap.js
@@ -1,7 +1,7 @@
 import React, {Component, useEffect, useRef, useState} from 'react';
 import * as L from 'leaflet';
 import SearchIcon from '@mui/icons-material/Search';
-import {MapContainer, TileLayer, Marker, Popup, useMap} from 'react-leaflet';
+import {MapContainer, TileLayer, Marker, Popup, useMap, LayersControl} from 'react-leaflet';
 import {useMapEvents} from 'react-leaflet/hooks';
 import {post} from './Networking';
 import {Autocomplete, CircularProgress, Sheet} from "@mui/joy";
@@ -11,7 +11,7 @@ const AppleParkLoc=[37.334835049999995,-122.01139165956805];
 class Markers extends Component {
     constructor(props) {
         super(props);
-        this.state = {markers: [], candMarkers: []};
+        this.state = {markers: [], candMarkers: [], candEmpty: true};
     }
 
     render() {
@@ -26,7 +26,7 @@ class Markers extends Component {
 
     addMarker(lat, lng) {
         this.setState((prev) => ({
-            markers: [...prev.markers, [lat, lng]], candMarkers: prev.candMarkers,
+            markers: [...prev.markers, [lat, lng]], candMarkers: prev.candMarkers,candEmpty: prev.candEmpty
         }));
         this.getFocus();
     }
@@ -35,17 +35,18 @@ class Markers extends Component {
         this.setState((prev) => ({
             candMarkers: [...prev.candMarkers, [lat, lng]],
             markers: prev.markers,
+            candEmpty: false
         }));
         this.getFocus();
     }
 
     clearMarkers() {
-        this.setState((prev) => ({markers: [], candMarkers: prev.candMarkers}));
+        this.setState((prev) => ({markers: [], candMarkers: prev.candMarkers, candEmpty: prev.candMarkers}));
         this.getFocus();
     }
 
     clearCandMarkers(){
-        this.setState((prev) => ({markers: prev.markers, candMarkers: []}));
+        this.setState((prev) => ({markers: prev.markers, candMarkers: [], candEmpty: true}));
         this.getFocus();
     }
 
@@ -148,7 +149,7 @@ function ChangeView({center,zoom}){
 export default function UMap() {
     const markersRef = useRef(null);
     const [focus, setFocus]=useState([37.334835049999995,-122.01139165956805]);
-    const zoom=13;
+    const zoom=16;
     const sf=(a)=>{setFocus(a);console.log(`triggered focus update, new focus is ${focus}`);};
     return (
         <Sheet>
@@ -162,8 +163,8 @@ export default function UMap() {
                 <Markers ref={markersRef} focusUpdater={sf}/>
                 <MapClickHandler mks={markersRef}/>
             </MapContainer>
-            <Sheet sx={{position: 'absolute', top: '20px', left: '10vw', zIndex: 'modal'}}>
-                <SimulateClick />
+            <Sheet sx={{position: 'absolute', top: '20px', right: '10vw', zIndex: 'modal'}}>
+                <SimulateClick isCandEmpty={markersRef.current?markersRef.current.state.candEmpty:true} />
                 <LocationSearch mks={markersRef}/>
             </Sheet>
         </Sheet>