admin panel touchups

- Zoom control on mini map
- Temp geofence create dialog

client/src/components/Map.tsx

@@ -8,13 +8,15 @@ interface Props {
   forcedLocation?: [number, number]
   forcedZoom?: number
   style?: React.CSSProperties
+  zoomControl?: boolean
 }
 
 export default function Map({
   children,
   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}
     >
       <TileLayer

client/src/hooks/useRaStore.ts

@@ -3,6 +3,7 @@ import create from 'zustand'
 export interface UseRaStore {
   bulkAssignProject: boolean
   bulkAssignGeofence: boolean
+  geofenceCreateDialog: boolean
   setRaStore: <T extends keyof Omit<UseRaStore, 'setRaStore'>>(
     key: T,
     init: UseRaStore[T] | ((prev: UseRaStore[T]) => UseRaStore[T]),
@@ -12,6 +13,7 @@ export interface UseRaStore {
 export const useRaStore = create<UseRaStore>((set) => ({
   bulkAssignProject: false,
   bulkAssignGeofence: false,
+  geofenceCreateDialog: false,
   setRaStore: (key, newValue) => {
     set((state) => ({
       [key]: typeof newValue === 'function' ? newValue(state[key]) : newValue,

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 (
+    <Dialog
+      open={geofenceCreateDialog}
+      onClose={() => setRaStore('geofenceCreateDialog', false)}
+    >
+      <DialogContent>
+        Creating a geofence from the admin panel is currently not supported. To
+        create one or import from a file, please go to the{' '}
+        <Link href="/map">map</Link> and open the &quot;JSON Manager&quot; from
+        the side panel.
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={() => setRaStore('geofenceCreateDialog', false)}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default function GeofenceCreateButton() {
+  const setRaStore = useRaStore((state) => state.setRaStore)
+
+  return (
+    <>
+      <Button
+        color="primary"
+        onClick={() => setRaStore('geofenceCreateDialog', true)}
+      >
+        <Add />
+        Create
+      </Button>
+      <CreateDialog />
+    </>
+  )
+}

client/src/pages/admin/geofence/GeofenceForm.tsx

@@ -19,6 +19,7 @@ export default function GeofenceForm() {
       <TextInput source="name" fullWidth required />
       <FormDataConsumer>
         {({ formData }) => {
+          if (formData?.area?.geometry === undefined) return null
           const point = center(formData.area.geometry)
           return (
             <Map
@@ -27,6 +28,7 @@ export default function GeofenceForm() {
                 point.geometry.coordinates[0],
               ]}
               forcedZoom={8}
+              zoomControl
               style={{ width: '100%', height: '50vh' }}
             >
               <GeoJSON data={formData.area} />
@@ -41,7 +43,11 @@ export default function GeofenceForm() {
           <TextInput source="value" helperText={false} />
         </SimpleFormIterator>
       </ArrayInput>
-      <ReferenceArrayInput source="related" reference="project">
+      <ReferenceArrayInput
+        source="related"
+        reference="project"
+        label="Projects"
+      >
         <SelectArrayInput optionText="name" />
       </ReferenceArrayInput>
     </SimpleForm>

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 (
+    <TopToolbar>
+      <GeofenceCreateButton />
+    </TopToolbar>
+  )
+}
 
 const defaultSort = { field: 'id', order: 'ASC' }
 
@@ -32,6 +42,7 @@ export default function GeofenceList() {
       pagination={<AreaPagination />}
       title="Geofences"
       perPage={25}
+      actions={<ListActions />}
       sort={defaultSort}
     >
       <Datagrid rowClick="expand" bulkActionButtons={<BulkActions />}>

client/src/pages/admin/project/ProjectForm.tsx

@@ -10,7 +10,11 @@ export default function ProjectForm() {
   return (
     <SimpleForm>
       <TextInput source="name" fullWidth isRequired />
-      <ReferenceArrayInput source="related" reference="geofence">
+      <ReferenceArrayInput
+        source="related"
+        reference="geofence"
+        label="Geofences"
+      >
         <SelectArrayInput optionText="name" />
       </ReferenceArrayInput>
     </SimpleForm>