show text fields when editing location

client/src/Map/Device/DeviceLocationEdit.tsx

@@ -1,27 +1,81 @@
 import React, { useState } from "react";
-import { Stack, Typography } from "@mui/material";
+import { Stack, TextField, Typography } from "@mui/material";
+import { locationToString } from "../../Utils/utils";
+import { ButtonTooltip } from "../../Utils/ButtonTooltip";
+import { Edit } from "@mui/icons-material";
+import { TextFieldDebounce } from "../../Utils/TextFieldDebounce";
 
-export const DeviceLocationEdit = ({ devLocation }) => {
-    const [isEditLocation, setIsEditLocation] = useState<boolean>(false);
+const NumberTextField = ({ label, value, setValue }: {
+    label: string,
+    value: number,
+    setValue: (val: number) => void,
+}) => {
     return (
-        <>
-            {
-                isEditLocation
-                    ? null
-                    : (
-                        <Stack direction='row'>
-                            <Typography variant='overline'>
-                                {devLocation.map(x => Math.round(x * 1e7) / 1e7).join(',')}
-                            </Typography>
-                            {/* <ButtonTooltip
-              // tooltip={'Edit location'}
-              // onClick={() => setIsEditLocation(true)}
-              >
-                  <Edit />
-              </ButtonTooltip> */}
-                        </Stack>
-                    )
-            }
-        </>
+        <TextField
+            sx={{
+                paddingTop: '5px',
+                paddingBottom: '5px',
+                fontSize: '12px',
+                // padding: '4px',
+                width: '180px',
+                '& .MuiInputBase-root': {
+                    width: '100%',
+                    minWidth: '',
+                    fontSize: '12px', // Text size
+                    height: '30px',  // Overall height
+                },
+                '& .MuiOutlinedInput-input': {
+                    padding: '4px', // Inner padding
+                },
+            }}
+
+            variant="outlined"
+            size="small"
+            InputLabelProps={{
+                shrink: true
+            }}
+            label={label}
+            type="number"
+            onChange={e => {
+                const n = parseFloat(e.target.value);
+                if (isFinite(n)) setValue(n);
+            }}
+            value={Math.round(value * 1e8) / 1e8}
+        />
     )
+}
+
+export const DeviceLocationEdit = ({ location, setLocation }) => {
+    const [isEditLocation, setIsEditLocation] = useState<boolean>(false);
+    const [innerLocation, setInnerLocation] = useState(location);
+
+    return isEditLocation
+        ? <Stack direction='row' sx={{ marginTop: '10px' }}>
+            <NumberTextField
+                label={'Lat'}
+                value={innerLocation[0] || 0}
+                setValue={v => setInnerLocation([v, innerLocation[1]])}
+            />
+            <Typography
+                style={{ margin: 0, marginInline: '2px', alignContent: 'center' }}
+            >
+                ,
+            </Typography>
+            <NumberTextField
+                label={'Lng'}
+                value={innerLocation[1] || 0}
+                setValue={v => setInnerLocation([innerLocation[0], v])}
+            />
+        </Stack>
+        : <Stack direction='row'>
+            <Typography variant='overline'>
+                {locationToString(location)}
+            </Typography>
+            <ButtonTooltip
+                tooltip={'Edit location'}
+                onClick={() => setIsEditLocation(true)}
+            >
+                <Edit />
+            </ButtonTooltip>
+        </Stack >
 }

client/src/Map/Device/DeviceMarker.jsx

@@ -5,9 +5,8 @@ import { usePopupSwitch } from "../PopupSwitchContext";
 import { experimentContext } from "../../Context/ExperimentProvider";
 import { renderToStaticMarkup } from "react-dom/server";
 import { divIcon } from "leaflet";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faMapMarkerAlt } from "@fortawesome/free-solid-svg-icons";
 import { IconDeviceByName } from "../../Experiment/IconPicker";
+import { locationToString } from "../../Utils/utils";
 
 export const DeviceMarker = ({ deviceOnTrial, setDeviceOnTrial, showDeviceNames }) => {
     const { selection, setLocationsToDevices, currTrial } = useContext(experimentContext);
@@ -27,10 +26,6 @@ export const DeviceMarker = ({ deviceOnTrial, setDeviceOnTrial, showDeviceNames
         setLocationsToDevices([{ deviceTypeName, deviceItemName }], [latlng]);
     }
 
-    const locationToString = (coords) => {
-        return coords.map(x => Math.round(x * 1e8) / 1e8).join(',')
-    }
-
     const isSelected = selection.find(s => s.deviceItemName === deviceItemName && s.deviceTypeName === deviceTypeName);
 
     const deviceType = currTrial.experiment.deviceTypes.find(dt => dt.name === deviceTypeName);
@@ -88,6 +83,7 @@ export const DeviceMarker = ({ deviceOnTrial, setDeviceOnTrial, showDeviceNames
                 <SingleDevicePropertiesView
                     deviceOnTrial={deviceOnTrial}
                     setDeviceOnTrial={setDeviceOnTrial}
+                    setLocation={setLocation}
                 >
                 </SingleDevicePropertiesView>
             </Popup>

client/src/Map/Device/SingleDevicePropertiesView.jsx

@@ -15,15 +15,13 @@ import { AddContainedButton } from '../../Experiment/Contained/AddContainedButto
 import { ContainedDevice } from '../../Experiment/Contained/ContainedDevice';
 import { DeviceLocationEdit } from './DeviceLocationEdit';
 
-export const SingleDevicePropertiesView = ({ deviceOnTrial, setDeviceOnTrial, children }) => {
+export const SingleDevicePropertiesView = ({ deviceOnTrial, setDeviceOnTrial, setLocation, children }) => {
     const { currTrial, setLocationsToDevices, setTrialData } = useContext(experimentContext);
     const experiment = currTrial.experiment || {};
     const { deviceTypeName, deviceItemName } = deviceOnTrial;
     const deviceType = (experiment.deviceTypes || []).find(t => t.name === deviceTypeName);
     const deviceItem = ((deviceType || []).devices || []).find(t => t.name === deviceItemName);
 
-    const devLocation = deviceOnTrial.location.coordinates;
-
     const devicesOnTrial = (currTrial.trial || {}).devicesOnTrial || [];
     const containedDevicesIndices = devicesOnTrial
         .map((dev, index) => {
@@ -45,7 +43,8 @@ export const SingleDevicePropertiesView = ({ deviceOnTrial, setDeviceOnTrial, ch
             </Typography>
             <br />
             <DeviceLocationEdit
-                devLocation={devLocation}
+                location={deviceOnTrial.location.coordinates}
+                setLocation={setLocation}
             />
             {deviceItem
                 ? <AttributeItemList

client/src/Utils/ButtonTooltip.jsx

@@ -5,7 +5,7 @@ import {
 } from '@mui/material';
 import { DomEvent } from 'leaflet';
 
-export const ButtonTooltip = ({ onClick, tooltip, disabled, closeTooltipOnClick = undefined, children, ...restProps }) => {
+export const ButtonTooltip = ({ onClick, tooltip, disabled = false, closeTooltipOnClick = undefined, children, ...restProps }) => {
     const [open, setOpen] = React.useState(false);
 
     const button = (

client/src/Utils/utils.js

@@ -64,3 +64,7 @@ export function change(thing, func) {
     func(draft);
     return draft;
 }
+
+export const locationToString = (coords) => {
+    return coords.map(x => Math.round(x * 1e8) / 1e8).join(',')
+}