Revize f41a4cd3

import menu start

re #9741

frontend/.vscode/launch.json

@@ +1 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

frontend/src/features/Reusables/ButtonOpenableDialog.tsx

@@ -12 +12 @@
     maxWidth?: 'xs' | 'sm' | 'md' | 'lg' // the max width of the dialog
     open: boolean,
     setOpen: (open: boolean) => void
+    size?: 'small' | 'medium' | 'large'
 }
 
 
@@ -25 +26 @@
     children,
     maxWidth,
     open,
-    setOpen
+    setOpen,
+    size
 }) => {
 
     // Change maxWidth to large if its undefined
@@ -52 +54 @@
                 onClick={onOpen}
                 color={buttonColor}
                 variant={buttonVariant}
+                size={size ?? 'medium'}
             >
                 {buttonText}
             </Button>

frontend/src/features/TrackingTool/DraggableList/DraggableList.tsx

@@ -12 +12 @@
     onDragEnd: OnDragEndResponder
 }
 
-const DraggableList = memo(({ items, onDragEnd }: DraggableListProps) => {
-    window.addEventListener('error', (e) => {
-        if (
-            e.message ===
-                'ResizeObserver loop completed with undelivered notifications.' ||
-            e.message === 'ResizeObserver loop limit exceeded'
-        ) {
-            e.stopImmediatePropagation()
-        }
-    })
+window.addEventListener('error', (e) => {
+    if (
+        e.message ===
+            'ResizeObserver loop completed with undelivered notifications.' ||
+        e.message === 'ResizeObserver loop limit exceeded'
+    ) {
+        e.stopImmediatePropagation()
+    }
+})
 
+const DraggableList = memo(({ items, onDragEnd }: DraggableListProps) => {
     return (
         <DragDropContext onDragEnd={onDragEnd}>
             <Droppable droppableId="droppable-list">

frontend/src/features/TrackingTool/DraggableList/DraggableListItem.tsx

@@ -1 +1 @@
 import {
-    Avatar,
     Checkbox,
+    FormControlLabel,
+    IconButton,
     ListItem,
     ListItemAvatar,
     ListItemText,
 } from '@mui/material'
 import { Draggable } from 'react-beautiful-dnd'
 import { MapPoint, PathVariant } from '../Map/pathUtils'
-import LocationOnIcon from '@mui/icons-material/LocationOn'
 import { CatalogItemDto } from '../../../swagger/data-contracts'
 import { useDispatch } from 'react-redux'
-import { updateMapMarker, updateMapMarkerWithId } from '../trackingToolSlice'
+import { updateMapMarkerWithId } from '../trackingToolSlice'
 import { useMemo } from 'react'
+import DragHandleIcon from '@mui/icons-material/DragHandle'
+import VisibilityIcon from '@mui/icons-material/Visibility'
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'
+import AddRoadIcon from '@mui/icons-material/AddRoad'
+import RemoveRoadIcon from '@mui/icons-material/RemoveRoad'
 
 export type DraggableListItemProps = {
     list: PathVariant
@@ -20 +25 @@
 
 const getFormattedLocationOrEmpty = (catalogItem: CatalogItemDto) => {
     if (!catalogItem || !catalogItem.latitude || !catalogItem.longitude) {
-        return 'Location Unknown'
+        return 'Location unavailable'
     }
 
-    return `${catalogItem.latitude}°, ${catalogItem.longitude}°`
+    return `${catalogItem.latitude.toFixed(
+        3
+    )}°, ${catalogItem.longitude.toFixed(3)}°`
 }
 
 const DraggableListItem = ({ list, idx }: DraggableListItemProps) => {
@@ -32 +39 @@
 
     // useMemo to prevent unnecessary re-renders which will make the list jumpy
     return useMemo(() => {
+        const toggleAddToPath = () => {
+            dispatch(
+                updateMapMarkerWithId({
+                    item: {
+                        ...item,
+                        addToPath: !item?.addToPath,
+                    } as MapPoint,
+                    id: item.id,
+                })
+            )
+        }
+
         const toggleHidden = () => {
             dispatch(
                 updateMapMarkerWithId({
                     item: {
                         ...item,
-                        active: !item?.active,
+                        hidden: !item?.hidden,
                     } as MapPoint,
                     id: item.id,
                 })
@@ -55 +74 @@
                         ref={provided.innerRef}
                         {...provided.draggableProps}
                         {...provided.dragHandleProps}
-                        sx={{
-                            background: snapshot.isDragging
-                                ? 'rgb(235,235,235)'
-                                : 'inherit',
-                        }}
                     >
                         <ListItemAvatar>
-                            <Avatar>
-                                <LocationOnIcon />
-                            </Avatar>
+                            <DragHandleIcon />
                         </ListItemAvatar>
                         <ListItemText
                             primary={item.catalogItem.name ?? 'Unknown name'}
@@ -72 +84 @@
                                 item.catalogItem
                             )}
                         />
-                        <Checkbox
-                            checked={item.active}
-                            onChange={toggleHidden}
-                        />
+                        <IconButton sx={{ mr: 1 }} onClick={toggleHidden}>
+                            {item.hidden ? (
+                                <VisibilityOffIcon />
+                            ) : (
+                                <VisibilityIcon />
+                            )}
+                        </IconButton>
+                        <IconButton sx={{ mr: 1 }} onClick={toggleAddToPath}>
+                            {item.addToPath ? (
+                                <AddRoadIcon />
+                            ) : (
+                                <RemoveRoadIcon />
+                            )}
+                        </IconButton>
+                        {/* <FormControlLabel
+                            control={
+                                <Checkbox
+                                    checked={item.addToPath}
+                                    onChange={toggleAddToPath}
+                                />
+                            }
+                            label="Add to path"
+                        /> */}
                     </ListItem>
                 )}
             </Draggable>

frontend/src/features/TrackingTool/Import/AddFromCoordinatesDialog.tsx

@@ +1 @@
+import { DialogContent, DialogTitle, Grid, TextField } from '@mui/material'
+import { FunctionComponent, useState } from 'react'
+import ButtonOpenableDialog from '../../Reusables/ButtonOpenableDialog'
+import * as yup from 'yup'
+import { useDispatch } from 'react-redux'
+import { mergeWithCurrentPath } from '../trackingToolSlice'
+import { MapPointType, PathVariant } from '../Map/pathUtils'
+import generateUuid from '../../../utils/id/uuidGenerator'
+import { useFormik } from 'formik'
+import ContextMenuDialogProps from './contextMenuDialogProps'
+
+interface AddCatalogItemFromCoords {
+    latitude: number
+    longitude: number
+    name: string
+}
+
+const AddFromCoordinatesDialog: FunctionComponent<ContextMenuDialogProps> = ({
+    latLng,
+    closeContextMenu,
+}) => {
+    const [open, setOpen] = useState(false)
+    const dispatch = useDispatch()
+
+    const formik = useFormik({
+        initialValues: {
+            latitude: latLng[0],
+            longitude: latLng[1],
+            name: '',
+        } as AddCatalogItemFromCoords,
+        validationSchema: yup.object().shape({
+            latitude: yup.number().required('Latitude is required'),
+            longitude: yup.number().required('Longitude is required'),
+            name: yup.string().required('Name is required'),
+        }),
+        onSubmit: (values: AddCatalogItemFromCoords) => {
+            dispatch(
+                mergeWithCurrentPath([
+                    {
+                        id: generateUuid(),
+                        idx: -1,
+                        addToPath: false,
+                        type: MapPointType.FromCoordinates,
+                        catalogItem: {
+                            name: values.name,
+                            latitude: values.latitude,
+                            longitude: values.longitude,
+                        },
+                    },
+                ] as PathVariant)
+            )
+        },
+    })
+
+    return (
+        <ButtonOpenableDialog
+            buttonText="Create Location"
+            buttonColor="primary"
+            buttonVariant="text"
+            onCloseCallback={closeContextMenu}
+            maxWidth="xs"
+            open={open}
+            setOpen={setOpen}
+            size="small"
+        >
+            <DialogTitle>Add New Location From Coordinates</DialogTitle>
+            <DialogContent>
+                <form onSubmit={formik.handleSubmit}>
+                    <Grid container spacing={1} sx={{ mt: 1, mb: 1 }}>
+                        <Grid item xs={12} md={6}>
+                            <TextField
+                                fullWidth
+                                label="Latitude"
+                                name="latitude"
+                                type="number"
+                                variant="outlined"
+                                value={formik.values.latitude}
+                                onChange={formik.handleChange}
+                                error={
+                                    Boolean(formik.errors.latitude) &&
+                                    formik.touched.latitude
+                                }
+                                helperText={
+                                    formik.errors.latitude &&
+                                    formik.touched.latitude
+                                }
+                            />
+                        </Grid>
+                        <Grid item xs={12} md={6}>
+                            <TextField
+                                fullWidth
+                                label="Longitude"
+                                name="longitude"
+                                type="number"
+                                variant="outlined"
+                                value={formik.values.longitude}
+                                onChange={formik.handleChange}
+                                error={
+                                    Boolean(formik.errors.longitude) &&
+                                    formik.touched.longitude
+                                }
+                                helperText={
+                                    formik.errors.longitude &&
+                                    formik.touched.longitude
+                                }
+                            />
+                        </Grid>
+                    </Grid>
+                    <TextField
+                        fullWidth
+                        label="Name"
+                        name="name"
+                        variant="outlined"
+                        value={formik.values.name}
+                        onChange={formik.handleChange}
+                        error={
+                            Boolean(formik.errors.name) && formik.touched.name
+                        }
+                        helperText={formik.errors.name && formik.touched.name}
+                    />
+                </form>
+            </DialogContent>
+        </ButtonOpenableDialog>
+    )
+}
+
+export default AddFromCoordinatesDialog

frontend/src/features/TrackingTool/Import/ImportContextMenu.tsx

@@ +1 @@
+import { LeafletMouseEvent } from 'leaflet'
+import { Fragment, useCallback, useState } from 'react'
+import { Popup, useMap, useMapEvents } from 'react-leaflet'
+
+import * as React from 'react'
+import Divider from '@mui/material/Divider'
+import Paper from '@mui/material/Paper'
+import MenuList from '@mui/material/MenuList'
+import MenuItem from '@mui/material/MenuItem'
+import ListItemText from '@mui/material/ListItemText'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import Typography from '@mui/material/Typography'
+import ContentCut from '@mui/icons-material/ContentCut'
+import ContentCopy from '@mui/icons-material/ContentCopy'
+import ContentPaste from '@mui/icons-material/ContentPaste'
+import Cloud from '@mui/icons-material/Cloud'
+import { Button, Stack, ThemeProvider } from '@mui/material'
+import AddFromCoordinatesDialog from './AddFromCoordinatesDialog'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../redux/store'
+import { buildTheme } from '../../Theme/ThemeWrapper'
+import ImportLocationDialog from './ImportLocationDialog'
+
+const RightClickPopupMenu = () => {
+    const [open, setOpen] = useState(false)
+    const [latLng, setLatLng] = useState<[number, number]>([0, 0])
+
+    const paletteMode = useSelector(
+        (state: RootState) => state.theme.paletteMode
+    )
+
+    useMapEvents({
+        contextmenu: (e: LeafletMouseEvent) => {
+            setLatLng([e.latlng.lat, e.latlng.lng])
+            setOpen(true)
+        },
+    })
+
+    const closeContextMenu = useCallback(() => {
+        setOpen(false)
+    }, [setOpen])
+
+    return (
+        <Fragment>
+            {open && (
+                <Popup onClose={() => setOpen(false)} position={latLng}>
+                    <Stack
+                        sx={{ p: 0, mt: 0 }}
+                        direction="column"
+                        justifyItems="center"
+                        justifyContent="center"
+                    >
+                        <Typography style={{margin: 0}} sx={{ mb: 0.5 }} align="center">
+                            {latLng[0].toFixed(5)}°{latLng[1].toFixed(5)}°
+                        </Typography>
+                        <AddFromCoordinatesDialog
+                            latLng={latLng}
+                            closeContextMenu={closeContextMenu}
+                        />
+                        <ImportLocationDialog
+                            latLng={latLng}
+                            closeContextMenu={closeContextMenu}
+                        />
+                    </Stack>
+                </Popup>
+            )}
+        </Fragment>
+    )
+}
+
+export default RightClickPopupMenu

frontend/src/features/TrackingTool/Import/ImportLocationDialog.tsx

@@ +1 @@
+import {
+    Button,
+    DialogContent,
+    DialogTitle,
+    FormControl,
+    Grid,
+    InputLabel,
+    MenuItem,
+    Select,
+} from '@mui/material'
+import { FunctionComponent, useState } from 'react'
+import ButtonOpenableDialog from '../../Reusables/ButtonOpenableDialog'
+import ContextMenuDialogProps from './contextMenuDialogProps'
+
+const importTypes = {
+    localCatalog: 'Local Catalog',
+    websiteCatalogs: 'Website Catalogs',
+}
+
+const ImportLocationDialog: FunctionComponent<ContextMenuDialogProps> = ({
+    latLng,
+    closeContextMenu,
+}) => {
+    const [open, setOpen] = useState(false)
+    const [importType, setImportType] = useState('localCatalog')
+    const [submitFunction, setSubmitFunction] = useState<() => void>(() => {})
+
+    return (
+        <ButtonOpenableDialog
+            buttonText="Import Location"
+            buttonColor="primary"
+            buttonVariant="text"
+            onCloseCallback={closeContextMenu}
+            maxWidth="xs"
+            open={open}
+            setOpen={setOpen}
+            size="small"
+            onOpenCallback={() => {}}
+        >
+            <DialogTitle>Import Locations</DialogTitle>
+            <DialogContent>
+                <Grid container sx={{mt: 0}} spacing={1}>
+                    <Grid item xs={6} md={9}>
+                        <FormControl fullWidth>
+                            <InputLabel id="importType">Import</InputLabel>
+                            <Select
+                                labelId="importType"
+                                id="importTypeSelect"
+                                value={importType}
+                                label="Import"
+                                size="small"
+                                onChange={(e) => setImportType(e.target.value)}
+                            >
+                                {Object.keys(importTypes).map((key) => (
+                                    <MenuItem key={key} value={key}>
+                                        {
+                                            //@ts-ignore
+                                            importTypes[key]
+                                        }
+                                    </MenuItem>
+                                ))}
+                            </Select>
+                        </FormControl>
+                    </Grid>
+                    <Grid item xs={6} md={3} alignContent="flex-end" justifyContent="flex-end">
+                        <Button variant="contained" color="primary" onClick={submitFunction}>Import</Button>
+                    </Grid>
+                </Grid>
+            </DialogContent>
+        </ButtonOpenableDialog>
+    )
+}
+
+export default ImportLocationDialog

frontend/src/features/TrackingTool/Import/contextMenuDialogProps.ts

@@ +1 @@
+export default interface ContextMenuDialogProps {
+    latLng: [number, number]
+    closeContextMenu: () => void
+}

frontend/src/features/TrackingTool/Map/MapPath.tsx

@@ -62 +62 @@
     useEffect(() => {
         // Get all active map points
         const activeMapPoints = displayableMapPoints.filter(
-            (item) => item.active
+            (item) => item.addToPath && !item.hidden
         )
         if (activeMapPoints.length < 2) {
             setEdges([])
@@ -155 +155 @@
                                     <FormControlLabel
                                         control={
                                             <Checkbox
-                                                checked={item.active}
+                                                checked={item.addToPath}
                                                 onChange={() => {
                                                     dispatch(
                                                         updateMapMarker({
                                                             ...item,
-                                                            active: !item.active,
+                                                            addToPath: !item.addToPath,
                                                         })
                                                     )
                                                 }}

frontend/src/features/TrackingTool/Map/RightClickPopupMenu.tsx

@@ -1 @@
-import { LeafletMouseEvent } from 'leaflet'
-import { Fragment, useState } from 'react'
-import { Popup, useMap, useMapEvents } from 'react-leaflet'
-
-import * as React from 'react'
-import Divider from '@mui/material/Divider'
-import Paper from '@mui/material/Paper'
-import MenuList from '@mui/material/MenuList'
-import MenuItem from '@mui/material/MenuItem'
-import ListItemText from '@mui/material/ListItemText'
-import ListItemIcon from '@mui/material/ListItemIcon'
-import Typography from '@mui/material/Typography'
-import ContentCut from '@mui/icons-material/ContentCut'
-import ContentCopy from '@mui/icons-material/ContentCopy'
-import ContentPaste from '@mui/icons-material/ContentPaste'
-import Cloud from '@mui/icons-material/Cloud'
-
-export function IconMenu() {
-    return (
-        // <Paper sx={{ width: 320, maxWidth: '100%' }}>
-            <MenuList>
-                <MenuItem>
-                    <ListItemIcon>
-                        <ContentCut fontSize="small" />
-                    </ListItemIcon>
-                    <ListItemText>Cut</ListItemText>
-                    <Typography variant="body2" color="text.secondary">
-                        ⌘X
-                    </Typography>
-                </MenuItem>
-                <MenuItem>
-                    <ListItemIcon>
-                        <ContentCopy fontSize="small" />
-                    </ListItemIcon>
-                    <ListItemText>Copy</ListItemText>
-                    <Typography variant="body2" color="text.secondary">
-                        ⌘C
-                    </Typography>
-                </MenuItem>
-                <MenuItem>
-                    <ListItemIcon>
-                        <ContentPaste fontSize="small" />
-                    </ListItemIcon>
-                    <ListItemText>Paste</ListItemText>
-                    <Typography variant="body2" color="text.secondary">
-                        ⌘V
-                    </Typography>
-                </MenuItem>
-                <Divider />
-                <MenuItem>
-                    <ListItemIcon>
-                        <Cloud fontSize="small" />
-                    </ListItemIcon>
-                    <ListItemText>Web Clipboard</ListItemText>
-                </MenuItem>
-            </MenuList>
-        // </Paper>
-    )
-}
-
-const RightClickPopupMenu = () => {
-    const [open, setOpen] = useState(false)
-    const [latLng, setLatLng] = useState<[number, number]>([0, 0])
-    const mapEvents = useMapEvents({
-        contextmenu: (e: LeafletMouseEvent) => {
-            setLatLng([e.latlng.lat, e.latlng.lng])
-            setOpen(true)
-        },
-    })
-
-    return (
-        <Fragment>
-            {open && <Popup onClose={() => setOpen(false)} position={latLng}>
-                <IconMenu />
-                </Popup>}
-        </Fragment>
-    )
-}
-
-export default RightClickPopupMenu

frontend/src/features/TrackingTool/Map/pathUtils.ts

@@ -17 +17 @@
 export interface MapPoint {
     id: string // unique id for react
     idx: number,
-    active: boolean,
+    addToPath: boolean, // whether to add the point to the path
     catalogItem: CatalogItemDto,
     type: MapPointType
+    hidden?: boolean // if true the point will not be displayed on the map
 }
 
 export const isMapPointDisplayable = (mapPoint: MapPoint): boolean =>
-    !!mapPoint.catalogItem.latitude && !!mapPoint.catalogItem.longitude
+    !!mapPoint.catalogItem.latitude && !!mapPoint.catalogItem.longitude && !mapPoint.hidden
 
 /**
  * Cartesian product of two arrays
@@ -59 +60 @@
                 {
                     id: generateUuid(),
                     idx,
-                    active: !!catalogItem.latitude && !!catalogItem.longitude,
+                    addToPath: !!catalogItem.latitude && !!catalogItem.longitude,
                     catalogItem,
                     type: mapPointType,
-                })
+                } as MapPoint)
         )
     )
 }

frontend/src/features/TrackingTool/TrackingTool.tsx

@@ -24 +24 @@
 import GeoJsonImportDialog from './Upload/GeoJsonImportDialog'
 import ProcessedTextDisplay from './ProcessedText/ProcessedTextDisplay'
 import DraggableMarkerList from './DraggableList/DraggableMarkerList'
-import RightClickPopupMenu from './Map/RightClickPopupMenu'
+import RightClickPopupMenu from './Import/ImportContextMenu'
 import { buildTheme, getPalette } from '../Theme/ThemeWrapper'
 
 const mapTheme = buildTheme('light')

frontend/src/features/TrackingTool/Upload/GeoJsonExportButton.tsx

@@ -32 +32 @@
         }
 
         const exportPath = path.filter(
-            (vertex) => isMapPointDisplayable(vertex) && vertex.active
+            (vertex) => isMapPointDisplayable(vertex) && vertex.addToPath
         )
         const exportPathString = exportAsGeoJsonString(exportPath)
         const blob = new Blob([exportPathString], { type: 'application/json' })

frontend/src/features/TrackingTool/Upload/GeoJsonIo.ts

@@ -4 +4 @@
 
 export const exportAsGeoJsonString = (path: PathVariant) => JSON.stringify({
     type: 'FeatureCollection',
-    features: path.filter(item => item.active && isMapPointDisplayable(item)).map((item) => {
+    features: path.filter(item => item.addToPath && isMapPointDisplayable(item)).map((item) => {
         const catalogItem = item.catalogItem
         return {
             type: 'Feature',
@@ -63 +63 @@
         return {
             id: generateUuid(),
             idx: feature.properties.idx,
-            active: true,
+            addToPath: true,
             catalogItem: {
                 id: catalogItem.id,
                 name: catalogItem.name,

frontend/src/features/TrackingTool/trackingToolSlice.ts

@@ -172 +172 @@
 
             // Add items to the end
             itemsToAdd.forEach((item) => {
-                item.active = !state.pathVariants || state.pathVariants.length === 0
+                item.addToPath = !state.pathVariants || state.pathVariants.length === 0
                 item.idx = newPath.length
                 newPath.push(item)
             })