Merge pull request #27 from MO-RISE/route-editor

Route editor
RISE-Maritime · Aug 18, 2023 · ccdef77 · ccdef77
2 parents b792e1a + 05026ad
commit ccdef77
Show file tree

Hide file tree

Showing 40 changed files with 7,166 additions and 6,640 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,45 +3,49 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@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",
+    "@deck.gl/aggregation-layers": "^8.9.19",
+    "@deck.gl/geo-layers": "^8.9.19",
+    "@deck.gl/layers": "^8.9.19",
+    "@deck.gl/mesh-layers": "^8.9.19",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.13.7",
+    "@mui/material": "^5.13.7",
     "@mui/styled-engine-sc": "^5.12.0",
+    "@mui/x-data-grid": "^6.9.1",
+    "@mui/x-data-grid-generator": "^6.11.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.9.11",
-    "formik": "^2.2.9",
-    "framer-motion": "^10.12.4",
+    "deck.gl": "^8.9.19",
+    "formik": "^2.4.2",
+    "framer-motion": "^10.12.18",
     "google-protobuf": "^3.21.2",
-    "mapbox-gl": "^2.14.1",
+    "mapbox-gl": "^2.15.0",
     "moment-timezone": "^0.5.43",
+    "mui-file-input": "^3.0.0",
     "openbridge-css": "^0.2.2",
     "openbridge-web-components": "^0.2.2",
+    "papaparse": "^5.4.1",
     "precompiled-mqtt": "^4.3.13",
-    "protobufjs": "^7.2.3",
+    "protobufjs": "^7.2.4",
     "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.13",
-    "react-map-gl": "^7.0.23",
+    "react-live-clock": "^6.1.14",
+    "react-map-gl": "^7.1.0",
     "react-moment": "^1.1.3",
+    "react-papaparse": "^4.1.0",
     "react-rnd": "^10.4.1",
-    "react-router-dom": "^6.10.0",
+    "react-router-dom": "^6.14.1",
     "react-scripts": "^5.0.1",
-    "react-spring": "^9.7.1",
-    "recharts": "^2.5.0",
+    "react-spring": "^9.7.2",
+    "recharts": "^2.7.2",
     "recoil": "^0.7.7",
-    "styled-components": "^5.3.10",
-    "web-vitals": "^3.3.1",
+    "web-vitals": "^3.3.2",
     "yup": "^1.1.1"
   },
   "scripts": {

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.jsx b/src/App.jsx
@@ -20,6 +20,7 @@ import ELookoutV2 from "./pages/e-lookout-v2"
 import DeviceSensors from "./pages/device-sensors"
 import PageSettings from "./pages/settings"
 import PageConfiguration from "./pages/configuration"
+import RouteEditor from "./pages/route-editor"
 // MQTT
 import MqttConnectionLOCAL from "./base-elements/MqttConnectionLOCAL"
 import { mqttSubscribeLOCAL } from "./base-elements/MqttConnectionLOCAL"
@@ -35,65 +36,65 @@ export default function App() {
 
       ...(app_state.appActiveColorTheme === "light"
         ? // Light pallette
-          {
-            primary: {
-              main: "#1f2e47",
-              light: "#66bb77",
-              contrastText: "#ffffff",
-            },
-            secondary: {
-              main: "#ed6432",
-              contrast: "#33BBFF",
-            },
-            background: {
-              default: "#e3e3e3",
-            },
-            error: {
-              main: "#cb2e24",
-            },
-            warning: {
-              main: "#eec937",
-            },
-            success: {
-              main: "#14cc17",
-            },
-            info: {
-              main: "#031e49",
-            },
-          }
+        {
+          primary: {
+            main: "#1f2e47",
+            light: "#66bb77",
+            contrastText: "#ffffff",
+          },
+          secondary: {
+            main: "#ed6432",
+            contrast: "#33BBFF",
+          },
+          background: {
+            default: "#e3e3e3",
+          },
+          error: {
+            main: "#cb2e24",
+          },
+          warning: {
+            main: "#eec937",
+          },
+          success: {
+            main: "#14cc17",
+          },
+          info: {
+            main: "#031e49",
+          },
+        }
         : // Dark pallette
-          {
-            primary: {
-              main: "#2196f3",
-              light: "#66bb77",
-              contrastText: "#ffffff",
-              port: "#E93629",
-              starboard: "#1FB948",
-            },
-            secondary: {
-              main: "#ed6432",
-              dark: "#b84d27",
-            },
-            background: {
-              default: "#333333",
-            },
-            error: {
-              main: "#cb2e24",
-            },
-            warning: {
-              main: "#eec937",
-            },
-            success: {
-              main: "#11b014",
-              contrastText: "#ffffff",
-            },
-            info: {
-              main: "#2196f3",
-            },
-            text: {
-              primary: "#fff",
-            },
-          }),
+        {
+          primary: {
+            main: "#2196f3",
+            light: "#66bb77",
+            contrastText: "#ffffff",
+            port: "#E93629",
+            starboard: "#1FB948",
+          },
+          secondary: {
+            main: "#ed6432",
+            dark: "#b84d27",
+          },
+          background: {
+            default: "#333333",
+          },
+          error: {
+            main: "#cb2e24",
+          },
+          warning: {
+            main: "#eec937",
+          },
+          success: {
+            main: "#11b014",
+            contrastText: "#ffffff",
+          },
+          info: {
+            main: "#2196f3",
+          },
+          text: {
+            primary: "#fff",
+          },
+        }),
     },
   })
 
@@ -126,6 +127,7 @@ export default function App() {
               <Route exact path={ROUTES.E_LOOKOUT_V2} element={<ELookoutV2 />} />
               <Route exact path={ROUTES.DEVICE_SENSORS} element={<DeviceSensors />} />
               <Route exact path={ROUTES.REMOTE_CONTROL} element={<PageRemoteControl />} />
+              <Route exact path={ROUTES.ROUTE_EDITOR} element={<RouteEditor />} />
             </Routes>
           </BasePage>
         </Router>

diff --git a/src/ROUTES.json b/src/ROUTES.json
@@ -10,5 +10,6 @@
   "BEARING_RATE": "/bearing_rate",
   "E_LOOKOUT": "/e_lookout",
   "E_LOOKOUT_V2": "/e_lookout_v2",
-  "DEVICE_SENSORS": "/device_sensors"
+  "DEVICE_SENSORS": "/device_sensors",
+  "ROUTE_EDITOR": "/route_editor"
 }
diff --git a/src/base-elements/components/apps/Playback.jsx b/src/base-elements/components/apps/Playback.jsx
@@ -21,31 +21,31 @@ export default function Playback({ setIsDraggable, isDraggable }) {
   const [playbackObj, setPlaybackObj] = useRecoilState(playbackState);
 
   const playPause = () => {
-    let action = "";
+    // let action = "";
 
     setPlaybackObj({
       ...playbackObj,
       is_playing: !playbackObj.is_playing,
     });
 
-    let topic = "/playback/action";
-    let qos = 0;
+    // let topic = "/playback/action";
+    // let qos = 0;
 
     if (!playbackObj.is_playing === true) {
-      action = "start";
+      // action = "start";
     } else {
-      action = "stop";
+      // action = "stop";
     }
 
-    let payload = { actionPlay: action };
+    // let payload = { actionPlay: action };
 
     // mqttPublishRemote(topic, qos, payload);
   };
 
   const changeTimePointer = (value) => {
-    let topic = "/playback/action";
-    let qos = 0;  
-    let payload = { timeLinePos: value };
+    // let topic = "/playback/action";
+    // let qos = 0;  
+    // let payload = { timeLinePos: value };
     // mqttPublishRemote(topic, qos, payload);
 
     setPlaybackObj({