added alertbox

Arleee1 · Arleee1 · commit 8b905eef236c · 2023-01-29T12:22:32.000-05:00
diff --git a/backend/package.json b/backend/package.json
@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "express": "^4.18.1",
+    "react-d3-speedometer": "^1.1.0",
     "socket.io": "^4.5.2"
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
@@ -16,6 +16,7 @@
     "@types/react-dom": "^18.0.6",
     "react": "^18.2.0",
     "react-charts": "^3.0.0-beta.50",
+    "react-d3-speedometer": "^1.1.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
diff --git a/frontend/src/components/AlertBox.tsx b/frontend/src/components/AlertBox.tsx
@@ -0,0 +1,37 @@
+import { AxisOptions, Chart, ChartOptions } from "react-charts";
+import {Alert, Box, Paper, Typography } from "@mui/material";
+
+import React from "react";
+
+interface Props {
+  data: string[];
+}
+
+/*
+ * TODO:
+ * Add a legend
+ * Add a focus event to emphasise one line
+ * Fix the tooltip location somehow
+ */
+const AlertBox: React.FC<Props> = ({ data}) => {
+
+
+  return (
+    <Box flex="1 0 0">
+      <Paper sx={{ p: 2 }} elevation={2}>
+        <Typography variant="h5" pb={1}>
+          Motor Fault Alerts
+        </Typography>
+        <Box>
+            {
+                data.map((alert) => {
+                        return (<Alert severity="warning">{alert}</Alert>);
+                })
+            }
+        </Box>
+      </Paper>
+    </Box>
+  );
+};
+
+export default AlertBox;
diff --git a/frontend/src/pages/HeadsUpPage.tsx b/frontend/src/pages/HeadsUpPage.tsx
@@ -1,8 +1,10 @@
-import {Box, Paper, Typography} from "@mui/material";
+import {Alert, Box, Paper, Typography} from "@mui/material";
 import React, {useEffect, useState} from "react";
 import VideoFeed from "../components/VideoFeed";
 import OnePedalDrive from "../components/OnePedalDrive";
 import {io} from "socket.io-client";
+import ReactSpeedometer from "react-d3-speedometer";
+import AlertBox from "../components/AlertBox";
 
 const socket = io("http://localhost:5050");
 const MAX_LENGTH = 50;
@@ -118,10 +120,24 @@ const HeadsUpPage = () => {
           </Paper>
         </Box>
         <Box>
+          {/*<ReactSpeedometer />*/}
+          <Box>
+          {/* Replace this paper component with mph */}
+          <Paper
+            sx={{
+              flex: "1 0 0",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <AlertBox data={["low bat", "sldkfj"]}/>
+          </Paper>
+        </Box>
           <VideoFeed />
         </Box>
       </Box>
-      <OnePedalDrive value={ data.pedal_value.length != 0 ? data.pedal_value[data.pedal_value.length - 1].value : 50 } />
+      <OnePedalDrive value={ data.pedal_value.length !== 0 ? data.pedal_value[data.pedal_value.length - 1].value : 50 } />
     </Box>
   );
 };
diff --git a/frontend/src/pages/InteractivePage.tsx b/frontend/src/pages/InteractivePage.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import OnePedalDrive from "../components/OnePedalDrive";
 import { io } from "socket.io-client";
 import ToggleButtons from "../components/ToggleButtons";
+import AlertBox from "../components/AlertBox";
 
 const socket = io("http://localhost:5050");
 const MAX_LENGTH = 50;
@@ -221,7 +222,7 @@ const InteractivePage = () => {
                     height: "calc(25vh - 8px)",
                   }}
                 >
-                  <Typography>Motor Faults</Typography>
+                    <AlertBox data={["Alert 1", "Alert2"]}/>
                 </Paper>
                 {/* Replace this paper component with fifa chart */}
                 <Paper
diff --git a/frontend/yarn.lock b/frontend/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"dependencies": {`
`3`	`3`	`"express": "^4.18.1",`
	`4`	`+ "react-d3-speedometer": "^1.1.0",`
`4`	`5`	`"socket.io": "^4.5.2"`
`5`	`6`	`}`
`6`	`7`	`}`