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">
<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>

95
src/App.js
View File

@ -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>
)}

4
src/SimulateClick.js
View File

@ -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>
);
}

17
src/UMap.js
View File

@ -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>