diff --git a/client/src/components/Map.tsx b/client/src/components/Map.tsx index 2f0e1923..86f7a556 100644 --- a/client/src/components/Map.tsx +++ b/client/src/components/Map.tsx @@ -8,6 +8,7 @@ interface Props { forcedLocation?: [number, number] forcedZoom?: number style?: React.CSSProperties + zoomControl?: boolean } export default function Map({ @@ -15,6 +16,7 @@ export default function Map({ forcedLocation, forcedZoom, style, + zoomControl = false, }: Props) { const { location, zoom } = usePersist.getState() const tileServer = useStatic((s) => s.tileServer) @@ -24,7 +26,7 @@ export default function Map({ key="map" center={forcedLocation ?? location} zoom={forcedZoom ?? zoom} - zoomControl={false} + zoomControl={zoomControl} style={style} > >( key: T, init: UseRaStore[T] | ((prev: UseRaStore[T]) => UseRaStore[T]), @@ -12,6 +13,7 @@ export interface UseRaStore { export const useRaStore = create((set) => ({ bulkAssignProject: false, bulkAssignGeofence: false, + geofenceCreateDialog: false, setRaStore: (key, newValue) => { set((state) => ({ [key]: typeof newValue === 'function' ? newValue(state[key]) : newValue, diff --git a/client/src/pages/admin/geofence/CreateDialog.tsx b/client/src/pages/admin/geofence/CreateDialog.tsx new file mode 100644 index 00000000..0aed2501 --- /dev/null +++ b/client/src/pages/admin/geofence/CreateDialog.tsx @@ -0,0 +1,51 @@ +import * as React from 'react' +import { + Button, + Dialog, + DialogActions, + DialogContent, + Link, +} from '@mui/material' +import { useRaStore } from '@hooks/useRaStore' +import Add from '@mui/icons-material/Add' + +export function CreateDialog() { + const geofenceCreateDialog = useRaStore((state) => state.geofenceCreateDialog) + const setRaStore = useRaStore((state) => state.setRaStore) + + return ( + setRaStore('geofenceCreateDialog', false)} + > + + Creating a geofence from the admin panel is currently not supported. To + create one or import from a file, please go to the{' '} + map and open the "JSON Manager" from + the side panel. + + + + + + ) +} + +export default function GeofenceCreateButton() { + const setRaStore = useRaStore((state) => state.setRaStore) + + return ( + <> + + + + ) +} diff --git a/client/src/pages/admin/geofence/GeofenceForm.tsx b/client/src/pages/admin/geofence/GeofenceForm.tsx index f84f637c..9176e885 100644 --- a/client/src/pages/admin/geofence/GeofenceForm.tsx +++ b/client/src/pages/admin/geofence/GeofenceForm.tsx @@ -19,6 +19,7 @@ export default function GeofenceForm() { {({ formData }) => { + if (formData?.area?.geometry === undefined) return null const point = center(formData.area.geometry) return ( @@ -41,7 +43,11 @@ export default function GeofenceForm() { - + diff --git a/client/src/pages/admin/geofence/GeofenceList.tsx b/client/src/pages/admin/geofence/GeofenceList.tsx index 95563e7e..e40ac10d 100644 --- a/client/src/pages/admin/geofence/GeofenceList.tsx +++ b/client/src/pages/admin/geofence/GeofenceList.tsx @@ -8,8 +8,18 @@ import { NumberField, Pagination, TextField, + TopToolbar, } from 'react-admin' import { BulkAssignButton } from '../actions/bulk/AssignButton' +import GeofenceCreateButton from './CreateDialog' + +function ListActions() { + return ( + + + + ) +} const defaultSort = { field: 'id', order: 'ASC' } @@ -32,6 +42,7 @@ export default function GeofenceList() { pagination={} title="Geofences" perPage={25} + actions={} sort={defaultSort} > }> diff --git a/client/src/pages/admin/project/ProjectForm.tsx b/client/src/pages/admin/project/ProjectForm.tsx index e4721af4..73aca227 100644 --- a/client/src/pages/admin/project/ProjectForm.tsx +++ b/client/src/pages/admin/project/ProjectForm.tsx @@ -10,7 +10,11 @@ export default function ProjectForm() { return ( - +