feat: "add" button status control & ui improvement
This commit is contained in:
parent
fb23e2c592
commit
05c444206e
|
|
@ -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>
|
||||
|
|
|
|||
33
src/App.js
33
src/App.js
|
|
@ -8,7 +8,7 @@ import {
|
|||
CircularProgress,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
Modal,
|
||||
Modal, ModalClose,
|
||||
ModalDialog,
|
||||
Sheet,
|
||||
Typography
|
||||
|
|
@ -20,13 +20,13 @@ 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('@@');
|
||||
const hs = setInterval(() => {
|
||||
post('handshake', []).then((response) => {
|
||||
const [version, intro] = response.split('@@');
|
||||
setVersion(version);
|
||||
setIntro(intro);
|
||||
clearInterval(hs);
|
||||
}).catch((e)=> {
|
||||
}).catch((e) => {
|
||||
console.error(e);
|
||||
setVersion('');
|
||||
});
|
||||
|
|
@ -67,9 +67,14 @@ 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'}}
|
||||
<ModalClose/>
|
||||
<Sheet sx={{margin: 'auto'}}>
|
||||
<Alert style={{display: version !== '' ? 'none' : 'flex'}}
|
||||
variant="soft"
|
||||
color="warning"
|
||||
invertedColors
|
||||
|
|
@ -83,23 +88,31 @@ export default function App() {
|
|||
<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
|
||||
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%'}}
|
||||
style={{
|
||||
height: '150px',
|
||||
display: 'flex',
|
||||
margin: 'auto',
|
||||
borderRadius: '50%'
|
||||
}}
|
||||
alt={'nanoMap'}/>
|
||||
</Sheet>
|
||||
<DialogTitle style={{display: version !== '' ? 'flex' : 'none'}}
|
||||
sx={{margin: 'auto', fontSize: '200%'}}>What's new in
|
||||
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 }} />
|
||||
<div dangerouslySetInnerHTML={{__html: intro}}/>
|
||||
</DialogContent>
|
||||
</Sheet>
|
||||
</ModalDialog>
|
||||
</Modal>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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
17
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue