Merge pull request #26 from MO-RISE/clean-up

Clean up
RISE-Maritime · May 4, 2023 · b792e1a · b792e1a
2 parents bda0016 + 0ae1f81
commit b792e1a
Show file tree

Hide file tree

Showing 20 changed files with 3,809 additions and 4,017 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,47 +3,46 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@deck.gl/aggregation-layers": "^8.8.13",
-    "@deck.gl/geo-layers": "^8.8.13",
-    "@deck.gl/layers": "^8.8.13",
-    "@deck.gl/mesh-layers": "^8.8.13",
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
-    "@harmony-dev/protobufjs-cli": "^1.0.1",
-    "@mui/icons-material": "^5.10.16",
-    "@mui/material": "^5.10.17",
-    "@mui/styled-engine-sc": "^5.10.16",
+    "@deck.gl/aggregation-layers": "^8.9.11",
+    "@deck.gl/geo-layers": "^8.9.11",
+    "@deck.gl/layers": "^8.9.11",
+    "@deck.gl/mesh-layers": "^8.9.11",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.12.2",
+    "@mui/styled-engine-sc": "^5.12.0",
     "@tensorflow-models/coco-ssd": "^2.2.2",
     "@tensorflow/tfjs": "^3.21.0",
     "@turf/turf": "^6.5.0",
     "canvasjs": "^1.8.3",
     "cra-template": "^1.2.0",
-    "deck.gl": "^8.8.20",
+    "deck.gl": "^8.9.11",
     "formik": "^2.2.9",
-    "framer-motion": "^7.6.19",
+    "framer-motion": "^10.12.4",
     "google-protobuf": "^3.21.2",
-    "mapbox-gl": "^2.11.0",
-    "moment-timezone": "^0.5.37",
+    "mapbox-gl": "^2.14.1",
+    "moment-timezone": "^0.5.43",
     "openbridge-css": "^0.2.2",
     "openbridge-web-components": "^0.2.2",
     "precompiled-mqtt": "^4.3.13",
-    "protobufjs": "^7.1.2",
+    "protobufjs": "^7.2.3",
     "protobufjs-cli-dbx": "^7.0.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
-    "react-live-clock": "^6.1.1",
-    "react-map-gl": "^7.0.20",
-    "react-moment": "^1.1.2",
-    "react-rnd": "^10.3.7",
-    "react-router-dom": "^6.4.2",
+    "react-live-clock": "^6.1.13",
+    "react-map-gl": "^7.0.23",
+    "react-moment": "^1.1.3",
+    "react-rnd": "^10.4.1",
+    "react-router-dom": "^6.10.0",
     "react-scripts": "^5.0.1",
-    "react-spring": "^9.5.5",
-    "recharts": "^2.1.16",
-    "recoil": "^0.7.6",
-    "styled-components": "^5.3.6",
-    "web-vitals": "^3.0.3",
-    "yup": "^0.32.11"
+    "react-spring": "^9.7.1",
+    "recharts": "^2.5.0",
+    "recoil": "^0.7.7",
+    "styled-components": "^5.3.10",
+    "web-vitals": "^3.3.1",
+    "yup": "^1.1.1"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/src/App.jsx b/src/App.jsx
@@ -124,7 +124,7 @@ export default function App() {
               <Route exact path={ROUTES.SETTINGS} element={<PageSettings />} />
               <Route exact path={ROUTES.E_LOOKOUT} element={<ELookout />} />
               <Route exact path={ROUTES.E_LOOKOUT_V2} element={<ELookoutV2 />} />
-              <Route exact path={ROUTES.DEVISE_SENSORS} element={<DeviceSensors />} />
+              <Route exact path={ROUTES.DEVICE_SENSORS} element={<DeviceSensors />} />
               <Route exact path={ROUTES.REMOTE_CONTROL} element={<PageRemoteControl />} />
             </Routes>
           </BasePage>

diff --git a/src/ROUTES.json b/src/ROUTES.json
@@ -10,5 +10,5 @@
   "BEARING_RATE": "/bearing_rate",
   "E_LOOKOUT": "/e_lookout",
   "E_LOOKOUT_V2": "/e_lookout_v2",
-  "DEVISE_SENSORS": "/devise_sensors"
+  "DEVICE_SENSORS": "/device_sensors"
 }
diff --git a/src/base-elements/MqttConnectionLOCAL.jsx b/src/base-elements/MqttConnectionLOCAL.jsx
@@ -2,7 +2,7 @@ import React, { useEffect } from "react"
 import mqtt from "precompiled-mqtt"
 import { useSetRecoilState, useRecoilState } from "recoil"
 import { wsMessageParser } from "../recoil/selectors"
-import {atomMQTTLocalState} from "../recoil/atoms"
+import { atomMQTTLocalState } from "../recoil/atoms"
 
 /* eslint-disable */
 // const host = process.env.REACT_APP_MQTT_BROKER_ADDRESS
@@ -19,10 +19,12 @@ const options = {
 
 let client = mqtt.connect(host, options)
 
-
-
 export function mqttSubscribeLOCAL(topic) {
-  client.subscribe(topic, err => console.log(err))
+  client.subscribe(topic, err => {
+    if (err) {
+      console.log(topic, err)
+    }
+  })
 }
 
 export function mqttPublishLOCAL(topic, qos, payload) {
@@ -40,9 +42,8 @@ export default function MqttConnectionLOCAL() {
   const parseWsMessage = useSetRecoilState(wsMessageParser)
 
   useEffect(() => {
-
     client.on("connect", () => {
-      console.log("Connected to MQTT broker!")
+      console.log("Connected to LOCAL MQTT broker!")
       setMqttState({
         ...mqttState,
         connected: true,

diff --git a/src/base-elements/navbar/LeftDrawer.jsx b/src/base-elements/navbar/LeftDrawer.jsx
@@ -93,14 +93,14 @@ export default function LeftDrawer(props) {
 
         <ListItem
           button
-          key={"DEVISE_SENSOR"}
+          key={"DEVICE_SENSOR"}
           component={Link}
-          to={ROUTES.DEVISE_SENSORS}
+          to={ROUTES.DEVICE_SENSORS}
         >
           <ListItemIcon>
             <EdgesensorHighIcon />
           </ListItemIcon>
-          <ListItemText primary={"Devise Sensors"} />
+          <ListItemText primary={"Device Sensors"} />
         </ListItem>
 
 

diff --git a/src/base-elements/navbar/index.jsx b/src/base-elements/navbar/index.jsx
@@ -113,7 +113,7 @@ export default function NavBar() {
         <GridCenter item xs={2}>
           <Typography variant={"subtitle1"}>
             <Clock
-              format={"YYYY-MM-D  HH:mm:ss"}
+              format={"YYYY-MM-DD  HH:mm:ss"}
               ticking={true}
               timezone={"Europe/Stockholm"}
             />

diff --git a/src/pages/ECDIS/components/AisInfo.jsx b/src/pages/ECDIS/components/AisInfo.jsx
@@ -8,7 +8,7 @@ export default function AisInfo() {
 
   return (
     <div>
-      <Typography variant={"h5"}> AisInfo</Typography>
+      <Typography variant={"subtitle1"} sx={{"margin": "0.3rem"}}> AIS Info</Typography>
       {chartQueryInfo.layer === "ais" ? (
         <Typography variant={"subtitle1"}>
           Name: {chartQueryInfo.object.shipname}

diff --git a/src/pages/ECDIS/components/MapCursorInfo.jsx b/src/pages/ECDIS/components/MapCursorInfo.jsx
@@ -1,14 +1,19 @@
 import React, { useState } from "react"
 import { mapCursorPosAtom } from "./SeaChart"
-import { OS_POSITIONS, OS_POSITION_SETTING } from "../../../recoil/atoms"
+import { OS_POSITIONS, OS_POSITION_SETTING, OS_VELOCITY_SETTING, OS_VELOCITY } from "../../../recoil/atoms"
 import { useRecoilValue } from "recoil"
 import { formatLatitude, formatLongitude, calcDistanceBetween, calcBearingBetween } from "../../../utils"
 import { Stack, Typography, Grid } from "@mui/material"
 
 export default function MapCursorInfo() {
   const mapCursor = useRecoilValue(mapCursorPosAtom)
+
   const osPos = useRecoilValue(OS_POSITIONS)
   const osPosSetting = useRecoilValue(OS_POSITION_SETTING)
+
+  const osVelocitySetting = useRecoilValue(OS_VELOCITY_SETTING)
+  const osVelocity = useRecoilValue(OS_VELOCITY)
+
   const [displayOptions, setDisplayOptions] = useState({
     positionInDegrees: false,
   })
@@ -23,9 +28,9 @@ export default function MapCursorInfo() {
     <Stack>
       <hr style={{ width: "100%" }} />
 
-      <Typography variant="overline">Cursor</Typography>
+      <Typography variant="overline" style={{padding: "0.5rem"}}>Cursor</Typography>
 
-      <Grid container>
+      <Grid container sx={{padding: "0.5rem"}}>
         <Grid item xs={5}>
           {displayOptions.positionInDegrees ? (
             <div onClick={togglePositionUnit} style={{ minWidth: "50%" }}>
@@ -79,7 +84,7 @@ export default function MapCursorInfo() {
                 mapCursor.longitude,
                 osPos[osPosSetting.source].latitude,
                 osPos[osPosSetting.source].longitude
-              ) * 10
+              ) * osVelocity[osVelocitySetting.source].sog
             ).toFixed(1)}
             min
           </Typography>

diff --git a/src/pages/ECDIS/components/OsInfo.jsx b/src/pages/ECDIS/components/OsInfo.jsx
@@ -1,10 +1,9 @@
 import React from "react"
-import { Stack, FormControl, InputLabel, Select, MenuItem,  Typography, Grid } from "@mui/material"
+import { Stack, FormControl, InputLabel, Select, MenuItem, Typography, Grid } from "@mui/material"
 import { useRecoilState, useRecoilValue } from "recoil"
-import {  OS_POSITION_SETTING, OS_VELOCITY_SETTING, OS_VELOCITY, OS_HEADING, OS_HEADING_SETTING } from "../../../recoil/atoms"
+import { OS_POSITION_SETTING, OS_VELOCITY_SETTING, OS_VELOCITY, OS_HEADING, OS_HEADING_SETTING } from "../../../recoil/atoms"
 
 export default function OsInfo() {
-
   const [posSetting, setPosSetting] = useRecoilState(OS_POSITION_SETTING)
   const osVelocity = useRecoilValue(OS_VELOCITY)
   const osVelocitySetting = useRecoilValue(OS_VELOCITY_SETTING)
@@ -20,7 +19,7 @@ export default function OsInfo() {
   }
 
   return (
-    <div>
+    <div >
       <hr style={{ width: "100%" }} />
       <Grid container sx={{ padding: "0.5rem" }}>
         <Grid item xs={12}>
@@ -47,29 +46,39 @@ export default function OsInfo() {
             </FormControl>
           </Stack>
         </Grid>
+
         <Grid item xs={12}>
-          <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-            <div style={{ textAlign: "center" }}>
-              <Typography variant="caption">Heading</Typography>
-              <Typography variant="subtitle1">{osHeading[osHeadingSetting.source]?.heading}°</Typography>
-            </div>
-          </Stack>
-        </Grid>
-        <Grid item xs={12}>
-          <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-            <div style={{ textAlign: "center" }}>
-              <Typography variant="caption">COG</Typography>
-              <Typography variant="subtitle1">{osVelocity[osVelocitySetting.source]?.cog}°</Typography>
-            </div>
-            <div style={{ textAlign: "center" }}>
-              <Typography variant="caption">SOG</Typography>
-              <Typography variant="subtitle1">{osVelocity[osVelocitySetting.source]?.sog}kts</Typography>
-            </div>
-            <div style={{ textAlign: "center" }}>
-              <Typography variant="caption">ROT</Typography>
-              <Typography variant="subtitle1">{osVelocity[osVelocitySetting.source]?.rot}°/min</Typography>
-            </div>
-          </Stack>
+          <Grid container>
+            <Grid item xs={6}>
+              <div style={{ textAlign: "center" }}>
+                <Typography variant="caption">Heading</Typography>
+                <Typography variant="subtitle1">{osHeading[osHeadingSetting.source]?.heading?.toFixed(1)}°</Typography>
+              </div>
+            </Grid>
+
+            <Grid item xs={6}>
+              <div style={{ textAlign: "center" }}>
+                <Typography variant="caption">COG</Typography>
+                <Typography variant="subtitle1">{osVelocity[osVelocitySetting.source]?.cog?.toFixed(1)}°</Typography>
+              </div>
+            </Grid>
+
+            <Grid item xs={6}>
+              <div style={{ textAlign: "center" }}>
+                <Typography variant="caption">SOG</Typography>
+                <Typography variant="subtitle1">{osVelocity[osVelocitySetting.source]?.sog?.toFixed(1)}kts</Typography>
+              </div>
+            </Grid>
+
+            <Grid item xs={6}>
+              <div style={{ textAlign: "center" }}>
+                <Typography variant="caption">ROT</Typography>
+                <Typography variant="subtitle1">{osVelocity[osVelocitySetting.source]?.rot?.toFixed(1)}°/min</Typography>
+              </div>
+            </Grid>
+          </Grid>
+
+          <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}></Stack>
         </Grid>
       </Grid>
       <hr style={{ width: "100%" }} />