diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index cefebac..54668da 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,8 +6,10 @@
-
-
+
+
+
+
@@ -81,7 +83,7 @@
-
+
diff --git a/api/click.js b/api/click.js
index 40baa78..3203b14 100644
--- a/api/click.js
+++ b/api/click.js
@@ -1,7 +1,9 @@
const getArgs=(s)=>s.split('@@')
export default function handler(req,res){
+ const {body}=req;
res.status(200).json({
- log: `Method: click\nArgs: ${getArgs(req.query.query)}\nStatus: test service, nothing done`,
+ log: `Method: click\nArgs: ${body}\nStatus: returned the raw polylines`,
+ multipolyline: body,
});
}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 5edb7e4..76f76ca 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,7 +21,7 @@ export default function App() {
const [version, setVersion] = useState('');
const [intro, setIntro] = useState('');
const hs = setInterval(() => {
- post('handshake', []).then((response) => {
+ post('GET','handshake', []).then((response) => {
const {version, intro} = response;
setVersion(version);
setIntro(intro);
diff --git a/src/Networking.js b/src/Networking.js
index 76c150c..6e6f2ce 100644
--- a/src/Networking.js
+++ b/src/Networking.js
@@ -1,11 +1,18 @@
-export function post(method,args) {
- const payload=args.join('@@');
+export function post(type,method,args) {
let res = '';
let ft = async () => {
- const response = await fetch(`/api/${method}${payload.length?"?query=":""}${payload}`, {
- method: 'GET',
- // body: data
- });
+ let response;
+ if(type==='GET'){
+ const payload=args.join('@@');
+ response = await fetch(`/api/${method}${payload.length?"?query=":""}${payload}`, {
+ method: 'GET',
+ });
+ }else if(type==='POST'){
+ response = await fetch(`/api/${method}`, {
+ method: 'POST',
+ body: JSON.stringify(args),
+ });
+ }
const response_data = await response.json();
console.log(`Request "${method}" finished:\n ${response_data.log.replaceAll('\n','\n ')}`);
return response_data;
diff --git a/src/UMap.js b/src/UMap.js
index d9ca257..3e76601 100644
--- a/src/UMap.js
+++ b/src/UMap.js
@@ -1,7 +1,6 @@
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, LayersControl} from 'react-leaflet';
+import {MapContainer, TileLayer, Marker, useMap, Polyline} from 'react-leaflet';
import {useMapEvents} from 'react-leaflet/hooks';
import {post} from './Networking';
import {Autocomplete, CircularProgress, Sheet} from "@mui/joy";
@@ -11,22 +10,30 @@ const AppleParkLoc=[37.334835049999995,-122.01139165956805];
class Markers extends Component {
constructor(props) {
super(props);
- this.state = {markers: [], candMarkers: [], candEmpty: true};
+ this.state = {markers: [], candMarkers: [], candEmpty: true, polylines: []};
}
render() {
+ const fillBlueOptions = { fillColor: 'blue' };
+ const pl=this.state.polylines;
const mks=this.state.markers.map((p, i) => (
-
+
));
const cmks=this.state.candMarkers.map((p, i) => (
-
+
));
- return mks.concat(cmks);
+ return [
+ ...mks.concat(cmks),
+ pl&&pl.length>1?:
+ ];
}
addMarker(lat, lng) {
this.setState((prev) => ({
- markers: [...prev.markers, [lat, lng]], candMarkers: prev.candMarkers,candEmpty: prev.candEmpty
+ markers: [...prev.markers, [lat, lng]],
+ candMarkers: prev.candMarkers,
+ candEmpty: prev.candEmpty,
+ polylines: [], // automatically clear polylines when marker changes
}));
this.getFocus();
}
@@ -35,18 +42,29 @@ class Markers extends Component {
this.setState((prev) => ({
candMarkers: [...prev.candMarkers, [lat, lng]],
markers: prev.markers,
- candEmpty: false
+ candEmpty: false,
+ polylines: prev.polylines,
}));
this.getFocus();
}
clearMarkers() {
- this.setState((prev) => ({markers: [], candMarkers: prev.candMarkers, candEmpty: prev.candMarkers}));
+ this.setState((prev) => ({
+ markers: [],
+ candMarkers: prev.candMarkers,
+ candEmpty: prev.candEmpty,
+ polylines: [],
+ }));
this.getFocus();
}
clearCandMarkers(){
- this.setState((prev) => ({markers: prev.markers, candMarkers: [], candEmpty: true}));
+ this.setState((prev) => ({
+ markers: prev.markers,
+ candMarkers: [],
+ candEmpty: true,
+ polylines: prev.polylines,
+ }));
this.getFocus();
}
@@ -61,6 +79,16 @@ class Markers extends Component {
}
this.props.focusUpdater(currentFocus);
}
+
+ flushPolylines(pl){
+ this.setState((prev)=>({
+ markers: prev.markers,
+ candMarkers: prev.candMarkers,
+ candEmpty: prev.candEmpty,
+ polylines: pl,
+ }));
+ // TODO
+ }
}
function MapClickHandler({mks}) {
@@ -70,11 +98,13 @@ function MapClickHandler({mks}) {
const lat = e.latlng.lat, lng = e.latlng.lng;
console.info(`Clicking on ${lat} ${lng}`);
mks.current.addMarker(lat, lng);
- post('click', [lat, lng]).then((response)=>{
- // TODO
+ post('POST','click', mks.current.state.markers).then((response)=>{
+ // TODO: real functionality
+ const pl=JSON.parse(response.multipolyline);
+ mks.current.flushPolylines(pl);
}).catch((e)=>{
console.error(e);
- location.reload();
+ // location.reload();
});
},
// TODO