subcrip
/
nanomap
mirror of https://github.com/arielherself/nanomap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: "add" button status control & ui improvement

This commit is contained in:
arielherself 2023-11-24 21:04:40 +08:00
parent fb23e2c592
commit 05c444206e
4 changed files with 66 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.idea/workspace.xml
View File

@ -6,9 +6,7 @@
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="3c7078e7-6f30-4d92-9696-11496f9e6dff" name="Changes" comment=""> <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$/.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/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/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" /> <change beforePath="$PROJECT_DIR$/src/UMap.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/UMap.js" afterDir="false" />
</list> </list>
@ -73,7 +71,7 @@
<updated>1700814200305</updated> <updated>1700814200305</updated>
<workItem from="1700814201341" duration="315000" /> <workItem from="1700814201341" duration="315000" />
<workItem from="1700814808669" duration="47000" /> <workItem from="1700814808669" duration="47000" />
<workItem from="1700822693197" duration="4588000" /> <workItem from="1700822693197" duration="7905000" />
</task> </task>
<servers /> <servers />
</component> </component>

95
src/App.js
View File

@ -8,7 +8,7 @@ import {
CircularProgress, CircularProgress,
DialogContent, DialogContent,
DialogTitle, DialogTitle,
Modal, Modal, ModalClose,
ModalDialog, ModalDialog,
Sheet, Sheet,
Typography Typography
@ -20,16 +20,16 @@ export default function App() {
const [featureOpen, setFeatureOpen] = useState(true); const [featureOpen, setFeatureOpen] = useState(true);
const [version, setVersion] = useState(''); const [version, setVersion] = useState('');
const [intro, setIntro] = useState(''); const [intro, setIntro] = useState('');
const hs=setInterval(()=>{ const hs = setInterval(() => {
post('handshake', []).then((response)=>{ post('handshake', []).then((response) => {
const [version,intro]=response.split('@@'); const [version, intro] = response.split('@@');
setVersion(version); setVersion(version);
setIntro(intro); setIntro(intro);
clearInterval(hs); clearInterval(hs);
}).catch((e)=> { }).catch((e) => {
console.error(e); console.error(e);
setVersion(''); setVersion('');
}); });
}, 1000); }, 1000);
return ( return (
<div className="App" style={{pointerEvents: version !== '' ? 'all' : 'none'}}> <div className="App" style={{pointerEvents: version !== '' ? 'all' : 'none'}}>
@ -67,39 +67,52 @@ export default function App() {
entering: {opacity: 1}, entering: {opacity: 1},
entered: {opacity: 1}, entered: {opacity: 1},
}[state], }[state],
display: 'flex',
width: version !== '' ? '60%' : 'auto',
height: version !== '' ? '60%' : 'auto',
}} }}
> >
<Alert style={{display: version!==''?'none':'flex'}} <ModalClose/>
variant="soft" <Sheet sx={{margin: 'auto'}}>
color="warning" <Alert style={{display: version !== '' ? 'none' : 'flex'}}
invertedColors variant="soft"
startDecorator={ color="warning"
<CircularProgress size="lg" color="warning"> invertedColors
<WebhookOutlined/> startDecorator={
</CircularProgress> <CircularProgress size="lg" color="warning">
} <WebhookOutlined/>
sx={{alignItems: 'flex-start', gap: '1rem'}} </CircularProgress>
> }
<Box sx={{flex: 1}}> sx={{alignItems: 'flex-start', gap: '1rem'}}
<Typography level="title-lg">Still connecting...</Typography> >
<Typography level="body-md"> <Box sx={{flex: 1}}>
nanoMap requires a valid backend to work. If it takes too long, please check <Typography level="title-lg">Still connecting...</Typography>
your connection or see our status page. <Typography level="body-md">
</Typography> nanoMap requires a valid backend to work. If it takes too long, please
</Box> check
</Alert> your connection or see our status page.
<Sheet style={{display: version !== '' ? 'flex' : 'none'}}> </Typography>
<img src={'icon.jpeg'} </Box>
style={{height: '150px', display: 'flex', margin: 'auto', borderRadius: '50%'}} </Alert>
alt={'nanoMap'}/> <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> </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> </ModalDialog>
</Modal> </Modal>
)} )}

4
src/SimulateClick.js
View File

@ -3,10 +3,10 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import React from "react"; import React from "react";
import {Add} from "@mui/icons-material"; import {Add} from "@mui/icons-material";
export default function SimulateClick() { export default function SimulateClick({isCandEmpty}) {
return ( return (
<ButtonGroup buttonFlex={1} aria-label="flex button group" sx={{zIndex: 'modal'}}> <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> </ButtonGroup>
); );
} }

17
src/UMap.js
View File

@ -1,7 +1,7 @@
import React, {Component, useEffect, useRef, useState} from 'react'; import React, {Component, useEffect, useRef, useState} from 'react';
import * as L from 'leaflet'; import * as L from 'leaflet';
import SearchIcon from '@mui/icons-material/Search'; 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 {useMapEvents} from 'react-leaflet/hooks';
import {post} from './Networking'; import {post} from './Networking';
import {Autocomplete, CircularProgress, Sheet} from "@mui/joy"; import {Autocomplete, CircularProgress, Sheet} from "@mui/joy";
@ -11,7 +11,7 @@ const AppleParkLoc=[37.334835049999995,-122.01139165956805];
class Markers extends Component { class Markers extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {markers: [], candMarkers: []}; this.state = {markers: [], candMarkers: [], candEmpty: true};
} }
render() { render() {
@ -26,7 +26,7 @@ class Markers extends Component {
addMarker(lat, lng) { addMarker(lat, lng) {
this.setState((prev) => ({ this.setState((prev) => ({
markers: [...prev.markers, [lat, lng]], candMarkers: prev.candMarkers, markers: [...prev.markers, [lat, lng]], candMarkers: prev.candMarkers,candEmpty: prev.candEmpty
})); }));
this.getFocus(); this.getFocus();
} }
@ -35,17 +35,18 @@ class Markers extends Component {
this.setState((prev) => ({ this.setState((prev) => ({
candMarkers: [...prev.candMarkers, [lat, lng]], candMarkers: [...prev.candMarkers, [lat, lng]],
markers: prev.markers, markers: prev.markers,
candEmpty: false
})); }));
this.getFocus(); this.getFocus();
} }
clearMarkers() { clearMarkers() {
this.setState((prev) => ({markers: [], candMarkers: prev.candMarkers})); this.setState((prev) => ({markers: [], candMarkers: prev.candMarkers, candEmpty: prev.candMarkers}));
this.getFocus(); this.getFocus();
} }
clearCandMarkers(){ clearCandMarkers(){
this.setState((prev) => ({markers: prev.markers, candMarkers: []})); this.setState((prev) => ({markers: prev.markers, candMarkers: [], candEmpty: true}));
this.getFocus(); this.getFocus();
} }
@ -148,7 +149,7 @@ function ChangeView({center,zoom}){
export default function UMap() { export default function UMap() {
const markersRef = useRef(null); const markersRef = useRef(null);
const [focus, setFocus]=useState([37.334835049999995,-122.01139165956805]); 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}`);}; const sf=(a)=>{setFocus(a);console.log(`triggered focus update, new focus is ${focus}`);};
return ( return (
<Sheet> <Sheet>
@ -162,8 +163,8 @@ export default function UMap() {
<Markers ref={markersRef} focusUpdater={sf}/> <Markers ref={markersRef} focusUpdater={sf}/>
<MapClickHandler mks={markersRef}/> <MapClickHandler mks={markersRef}/>
</MapContainer> </MapContainer>
<Sheet sx={{position: 'absolute', top: '20px', left: '10vw', zIndex: 'modal'}}> <Sheet sx={{position: 'absolute', top: '20px', right: '10vw', zIndex: 'modal'}}>
<SimulateClick /> <SimulateClick isCandEmpty={markersRef.current?markersRef.current.state.candEmpty:true} />
<LocationSearch mks={markersRef}/> <LocationSearch mks={markersRef}/>
</Sheet> </Sheet>
</Sheet> </Sheet>