207 buoy fields

src/components/BuoyFieldForm/index.css

@@ -0,0 +1,30 @@
+.labelInterval .ant-form-item-label label, .labelSymbol .ant-form-item-label label,
+.labelInterval .ant-select-selection-item, .labelSymbol .ant-select-selection-item,
+div.ant-select-item-option, .ant-select-arrow {
+  font-size: 9px !important;
+}
+
+.propertiesForm .ant-form-item label,
+.propertiesForm .ant-form-item-control-input,
+.propertiesForm .ant-form-item-control-input input,
+.propertiesForm .ant-select-selection-item
+{
+  font-size: 12px !important;
+  min-height: 0px !important;
+}
+
+.propertiesForm .ant-form-item {
+  margin-bottom: 0px !important;
+}
+
+.ant-select-item-option {
+  padding: 0px !important;
+}
+
+.ant-form-item-label >label::after {
+  margin-inline-end: 2px !important;
+}
+
+.ant-select-selector {
+  padding: 0px !important;
+}

src/components/BuoyFieldForm/index.tsx

@@ -0,0 +1,174 @@
+import { Feature, MultiPoint } from 'geojson'
+import {
+  Checkbox,
+  ColorPicker,
+  DatePicker,
+  Form,
+  Input,
+  Select,
+} from 'antd'
+import { Color } from 'antd/es/color-picker'
+import { useEffect, useState } from 'react'
+import { BuoyFieldProps } from '../../types'
+import { presetColors } from '../../helpers/standardShades'
+import './index.css'
+import { symbolOptions } from '../../helpers/symbolTypes'
+import dayjs from 'dayjs'
+import type { Dayjs } from 'dayjs'
+
+export interface FieldFormProps {
+  field: Feature<MultiPoint, BuoyFieldProps>
+  onChange: (point: Feature<MultiPoint, BuoyFieldProps>) => void
+}
+
+/** swap the time string a parameter of the expected type */
+type FormTypeProps = Omit<BuoyFieldProps, 'time' | 'timeEnd'> & {
+  dTime: Dayjs
+  dTimeEnd: Dayjs
+}
+
+export const BuoyFieldForm: React.FC<FieldFormProps> = ({
+  field,
+  onChange,
+}) => {
+  const [state, setState] = useState<BuoyFieldProps | null>(null)
+
+  useEffect(() => {
+    if (field) {
+      const props = field.properties
+      setState(convert(props))
+    }
+  }, [field, setState])
+
+  const convert = (shape: Readonly<BuoyFieldProps>): FormTypeProps=> {
+    const oldVal = shape
+    const newVal = {...shape} as FormTypeProps
+    if (oldVal.time) {
+      newVal.dTime = dayjs(oldVal.time)
+      delete (newVal as Partial<BuoyFieldProps>).time
+    }
+    if (oldVal.timeEnd) {
+      newVal.dTimeEnd = dayjs(oldVal.timeEnd)
+      delete (newVal as Partial<BuoyFieldProps>).timeEnd
+    }
+    return newVal
+  }
+
+  const convertBack = (shape: Readonly<FormTypeProps>): BuoyFieldProps => {
+    const oldVal = shape
+    const newVal = {...shape} as BuoyFieldProps
+    if (shape.dTime) {
+      newVal.time = oldVal.dTime.toISOString() 
+      delete (newVal as Partial<FormTypeProps>).dTime
+    }
+    if (shape.dTimeEnd) {
+      newVal.timeEnd = oldVal.dTimeEnd.toISOString() 
+      delete (newVal as Partial<FormTypeProps>).dTimeEnd
+    }
+    return newVal
+  }
+
+  const localChange = (values: Partial<FormTypeProps>) => {
+    if (values.color) {
+      values.color = (values.color as unknown as Color).toHexString()
+    }
+    const updatedProps= {...state, ...values} as FormTypeProps
+    const convertedProps = convertBack(updatedProps)
+    const res = {...field, properties: convertedProps}
+    onChange(res)
+  }
+
+  if (!state) {
+    return null
+  }
+
+  const itemStyle = { marginBottom: '0.5em' }
+
+  return (
+    <>
+      <Form
+        name='trackPropertiesForm'
+        className='propertiesForm'
+        labelCol={{ span: 7 }}
+        wrapperCol={{ span: 17 }}
+        style={{ maxWidth: 400 }}
+        initialValues={state}
+        autoComplete='off'
+        onValuesChange={localChange}
+        size='small'
+      >
+        <Form.Item<FormTypeProps>
+          label='Name'
+          name='name'
+          style={itemStyle}
+          rules={[{ required: true, message: 'Please enter track name!' }]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item<FormTypeProps>
+          label='Short name'
+          name='shortName'
+          style={itemStyle}
+          rules={[{ required: true, message: 'Please enter short name!' }]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item<FormTypeProps>
+          label='Visible'
+          name={'visible'}
+          style={itemStyle}
+          valuePropName='checked'
+        >
+          <Checkbox />
+        </Form.Item>
+        <Form.Item<FormTypeProps>
+          label='Symbol'
+          name='symbol'
+          style={itemStyle}
+          rules={[
+            {
+              required: true,
+              message: 'Please specify the environment/symbol for the track',
+            },
+          ]}
+        >
+          <Select options={symbolOptions} />
+        </Form.Item>
+        <Form.Item<FormTypeProps>
+          label='Color'
+          name='color'
+          style={itemStyle}
+          rules={[{ required: true, message: 'color is required!' }]}
+        >
+          <ColorPicker
+            style={{ marginLeft: 0 }}
+            format='hex'
+            trigger='click'
+            presets={presetColors}
+          />
+        </Form.Item>
+        <Form.Item<FormTypeProps> label='Time' style={itemStyle} name='dTime'>
+          <DatePicker showTime format={'MMM DDHHmm'} />
+        </Form.Item>
+        <Form.Item<FormTypeProps>
+          label='Time end'
+          style={itemStyle}
+          // validate that dTimeEnd is after dTime
+          rules={[
+            ({ getFieldValue }) => ({
+              validator(_, value) {
+                // if there is a value, check if it's after the dTime
+                return !value || getFieldValue('dTime') < value
+                  ? Promise.resolve()
+                  : Promise.reject(new Error('Time-end must be after time!'))
+              },
+            }),
+          ]}
+          name='dTimeEnd'
+        >
+          <DatePicker showTime format={'MMM DDHHmm'} />
+        </Form.Item>
+      </Form>
+    </>
+  )
+}

src/components/Layers/index.tsx

@@ -10,13 +10,14 @@ import {
   CloseCircleOutlined,
   ShrinkOutlined,
 } from '@ant-design/icons'
-import { Feature, Geometry, Point, Polygon } from 'geojson'
-import { GROUP_TYPE, REFERENCE_POINT_TYPE, TRACK_TYPE, ZONE_TYPE } from '../../constants'
+import { Feature, Geometry, MultiPoint, Point, Polygon } from 'geojson'
+import { BUOY_FIELD_TYPE, GROUP_TYPE, REFERENCE_POINT_TYPE, TRACK_TYPE, ZONE_TYPE } from '../../constants'
 import { useAppContext } from '../../state/AppContext'
 import { useAppSelector, useAppDispatch } from '../../state/hooks'
 import { LoadTrackModel } from '../LoadTrackModal'
-import { NewTrackProps, TrackProps, CoreShapeProps, ZoneProps, PointProps, GroupProps } from '../../types'
+import { NewTrackProps, TrackProps, CoreShapeProps, ZoneProps, PointProps, GroupProps, BuoyFieldProps } from '../../types'
 import { PointForm } from '../PointForm'
+import { BuoyFieldForm } from '../BuoyFieldForm'
 
 interface LayerProps {
   openGraph: { (): void }
@@ -137,13 +138,16 @@ const Layers: React.FC<LayerProps> = ({ openGraph }) => {
   const dispatch = useAppDispatch()
 
   const NODE_TRACKS = 'node-tracks'
+  const NODE_FIELDS = 'node-fields'
 
   const [model, setModel] = React.useState<TreeDataNode[]>([])
   const [checkedKeys, setCheckedKeys] = React.useState<string[]>([])
   const [message, setMessage] = React.useState<string>('')
   const [createTrackDialogVisible, setcreateTrackDialogVisible] = useState(false)
   const [newPoint, setNewPoint] = useState<Feature<Geometry, CoreShapeProps> | null>(null)
+  const [newBuoyField, setNewBuoyField] = useState<Feature<MultiPoint, BuoyFieldProps> | null>(null)
   const [workingPoint, setWorkingPoint] = useState<Feature<Geometry, CoreShapeProps> | null>(null)
+  const [workingBuoyField, setWorkingBuoyField] = useState<Feature<Geometry, BuoyFieldProps> | null>(null)
   const [formType, setFormType] = useState<string>('')
   const [expandedKeys, setExpandedKeys] = useState<string[]>([NODE_TRACKS])
 
@@ -203,13 +207,35 @@ const Layers: React.FC<LayerProps> = ({ openGraph }) => {
     setNewPoint(zone)
   }
 
+  const addBuoyField = () => {
+    const buoyField: Feature<MultiPoint, BuoyFieldProps> = {
+      type: 'Feature',
+      properties: {
+        name: '',
+        shortName: '',
+        symbol: 'air',
+        dataType: BUOY_FIELD_TYPE,
+        color: '#FF0000',
+        visible: true
+      },
+      geometry: {
+        type: 'MultiPoint',
+        coordinates: []
+      }
+    }
+    setWorkingBuoyField(buoyField)
+    setNewBuoyField(buoyField)
+  }
+
   const addGroup = () => {
     setMessage('Adding group')
   }
 
   const handleAdd = useCallback( (e: React.MouseEvent, key: string, title: string) => {
     if (key === NODE_TRACKS) {
       setcreateTrackDialogVisible(true)
+    } else if (key === NODE_FIELDS) {
+      addBuoyField()
     } else if (key === 'node-points') {
       addPoint()
     } else if (key === 'node-zones') {
@@ -225,6 +251,7 @@ const Layers: React.FC<LayerProps> = ({ openGraph }) => {
   useEffect(() => {
     const items: TreeDataNode[] = []
     items.push(mapFunc(features, 'Tracks', NODE_TRACKS, TRACK_TYPE, handleAdd))
+    items.push(mapFunc(features, 'Buoy Fields', NODE_FIELDS, BUOY_FIELD_TYPE, handleAdd))
     items.push(mapFunc(features, 'Zones', 'node-zones', ZONE_TYPE, handleAdd))
     items.push(mapFunc(features, 'Points', 'node-points', REFERENCE_POINT_TYPE, handleAdd))
     items.push(mapFunc(features, 'Groups', 'node-groups', GROUP_TYPE, handleAdd))
@@ -381,6 +408,13 @@ const Layers: React.FC<LayerProps> = ({ openGraph }) => {
     setWorkingPoint(null)
   }
 
+  const handleBuoyFieldSave = () => {
+    dispatch({ type: 'fColl/featureAdded', payload: workingBuoyField })
+    setNewBuoyField(null)
+    setWorkingBuoyField(null)
+  }
+
+
   const handleDialogCancel = () => {
     setcreateTrackDialogVisible(false)
   }
@@ -480,6 +514,16 @@ const Layers: React.FC<LayerProps> = ({ openGraph }) => {
           onChange={(point) => setWorkingPoint(point)}
         />
       </Modal>}
+      { newBuoyField && <Modal
+        title={'Create new buoy field'}
+        open={true}
+        onCancel={() => setNewBuoyField(null)}
+        onOk={handleBuoyFieldSave}>
+        <BuoyFieldForm
+          field={newBuoyField}
+          onChange={(point) => setWorkingBuoyField(point)}
+        />
+      </Modal>}
     </>
   )
 }

src/components/Properties/index.tsx

@@ -1,15 +1,16 @@
 import React, { ReactNode, useCallback, useEffect, useState } from 'react'
-import { CoreShapeProps, TrackProps, GroupProps } from '../../types'
+import { CoreShapeProps, TrackProps, GroupProps, BuoyFieldProps } from '../../types'
 import { useAppContext } from '../../state/AppContext'
 import { useAppDispatch, useAppSelector } from '../../state/hooks'
 import './index.css'
-import { Feature, GeoJsonProperties, Geometry, LineString, Point } from 'geojson'
-import { GROUP_TYPE, REFERENCE_POINT_TYPE, TRACK_TYPE, ZONE_TYPE } from '../../constants'
+import { Feature, GeoJsonProperties, Geometry, LineString, MultiPoint, Point } from 'geojson'
+import { BUOY_FIELD_TYPE, GROUP_TYPE, REFERENCE_POINT_TYPE, TRACK_TYPE, ZONE_TYPE } from '../../constants'
 import { PointForm } from '../PointForm'
 import { CoreForm } from '../CoreForm'
 import { PropertiesViewer } from './PropertiesViewer'
 import { TrackForm } from '../TrackForm'
 import { GroupForm } from '../GroupForm'
+import { BuoyFieldForm } from '../BuoyFieldForm'
 
 
 const Properties: React.FC = () => {
@@ -61,6 +62,11 @@ const Properties: React.FC = () => {
             <TrackForm onChange={updateFeatureState} track={featureState as Feature<LineString, TrackProps>} />
           </CoreForm>)
           break
+        case BUOY_FIELD_TYPE:    
+          setPropertyForm(<CoreForm formDirty={formDirty} onReset={onReset} onSave={onSave}>
+            <BuoyFieldForm onChange={updateFeatureState} field={featureState as Feature<MultiPoint, BuoyFieldProps>} />
+          </CoreForm>)
+          break
         case ZONE_TYPE:
           setPropertyForm(<CoreForm formDirty={formDirty} onReset={onReset} onSave={onSave}>
             <PointForm onChange={updateFeatureState} shape={featureState as Feature<Geometry, CoreShapeProps>} />

src/components/spatial/BuoyField/index.css

@@ -0,0 +1,3 @@
+.point-label {
+  text-shadow: 1px 1px 2px white;
+}