Merge pull request #25 from MO-RISE/radar-two-out

Radar two out

src/pages/ECDIS/components/ChartControls.jsx

@@ -11,6 +11,7 @@ import {
   FormControl,
   Select,
   MenuItem,
+  TextField
 } from "@mui/material"
 import React from "react"
 import { useTheme } from "@mui/material/styles"
@@ -19,6 +20,8 @@ import ZoomInIcon from "@mui/icons-material/ZoomIn"
 import { atomMapState, atomMapSetting, atomLayersTaggable, atomLayersShowing, atomSensorLayersShowing, atomSensorLayersTaggable } from "./SeaChart"
 import { useRecoilState, useRecoilValue } from "recoil"
 import { OS_POSITIONS, OS_POSITION_SETTING } from "../../../recoil/atoms"
+import RadarRangeChange from "./RadarRangeChange"
+import RadarOSRangeChange from "./RadarOSRangeChange"
 
 const ITEM_HEIGHT = 48
 const ITEM_PADDING_TOP = 8
@@ -221,6 +224,12 @@ export default function ChartControls() {
           ))}
         </Select>
       </FormControl>
+
+      {/* Radar range shore radar */}
+      <RadarRangeChange/>
+      <RadarOSRangeChange/>
+
+
     </Stack>
   )
 }

src/pages/ECDIS/components/RadarOSRangeChange.jsx

@@ -0,0 +1,59 @@
+import React from "react"
+import { useFormik } from "formik"
+import * as yup from "yup"
+import { Grid, TextField, Stack, Button } from "@mui/material"
+import { useRecoilState } from "recoil"
+import { AtomOSRadarSetting } from "../../../recoil/atoms"
+
+const validationSchema = yup.object({
+  range_change: yup.number().required("Required"),
+})
+
+
+export default function RadarOSRangeChange() {
+  const [OSRadarRangeChange, setShoreRadarRangeChange] = useRecoilState(AtomOSRadarSetting)
+
+  const formik = useFormik({
+    validationSchema: validationSchema,
+    initialValues: OSRadarRangeChange,
+
+    onChange: values => {
+      onFormChange(values)
+    },
+    onSubmit: values => {
+      onFormSubmit(values)
+    },
+  })
+
+  const onFormChange = values => {
+    console.log("Change", values)
+    setShoreRadarRangeChange( values)
+  }
+
+  const onFormSubmit = values => {
+    console.log("Submit", values)
+    setShoreRadarRangeChange(values)
+  }
+
+  return (
+    <div>
+      <form onSubmit={formik.handleSubmit}>
+        <TextField
+        sx={{width: "6rem"}}
+          id="range_change"
+          label="Shore Range Change "
+          type="number"
+          variant="filled"
+          size="small"
+          defaultValue={formik.values.range_change}
+          onChange={formik.handleChange}
+          error={formik.touched.range_change && Boolean(formik.errors.range_change)}
+          helperText={formik.touched.range_change && formik.errors.range_change}
+        />
+        <Button type="submit" variant="contained" color="success" sx={{ marginTop: "0.4rem" }}>
+          Submit
+        </Button>
+      </form>
+    </div>
+  )
+}

src/pages/ECDIS/components/RadarRangeChange.jsx

@@ -0,0 +1,62 @@
+import React from "react"
+import { useFormik } from "formik"
+import * as yup from "yup"
+import { Grid, TextField, Stack, Button } from "@mui/material"
+import { useRecoilState } from "recoil"
+import { AtomShoreRadarSetting } from "../../../recoil/atoms"
+
+const validationSchema = yup.object({
+  range_change: yup.number().required("Required"),
+})
+
+const initFormValuesManual = {
+  range_change: 500,
+}
+
+export default function RadarRangeChange() {
+  const [shoreRadarRangeChange, setShoreRadarRangeChange] = useRecoilState(AtomShoreRadarSetting)
+
+  const formik = useFormik({
+    validationSchema: validationSchema,
+    initialValues: shoreRadarRangeChange,
+
+    onChange: values => {
+      onFormChange(values)
+    },
+    onSubmit: values => {
+      onFormSubmit(values)
+    },
+  })
+
+  const onFormChange = values => {
+    console.log("Change", values)
+    setShoreRadarRangeChange( values)
+  }
+
+  const onFormSubmit = values => {
+    console.log("Submit", values)
+    setShoreRadarRangeChange(values)
+  }
+
+  return (
+    <div>
+      <form onSubmit={formik.handleSubmit}>
+        <TextField
+           sx={{width: "6rem"}}
+          id="range_change"
+          label="Shore Range Change "
+          type="number"
+          variant="filled"
+          size="small"
+          defaultValue={formik.values.range_change}
+          onChange={formik.handleChange}
+          error={formik.touched.range_change && Boolean(formik.errors.range_change)}
+          helperText={formik.touched.range_change && formik.errors.range_change}
+        />
+        <Button type="submit" variant="contained" color="success" sx={{ marginTop: "0.4rem" }}>
+          Submit
+        </Button>
+      </form>
+    </div>
+  )
+}