Added dynamics page and react router

control-station/package.json

@@ -14,6 +14,7 @@
 	"dependencies": {
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-router-dom": "^6.23.1",
 		"socket.io-client": "^4.7.2"
 	},
 	"devDependencies": {

control-station/src/App.tsx

@@ -1,7 +1,9 @@
 import { ControlPanel, Navbar } from "@/components";
 import usePodData from "./services/usePodData";
 import PodContext from "./services/PodContext";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { Dashboard } from "@/views";
+import Dynamics from "./views/Dynamics/Dynamics";
 
 function App() {
 	const { podData, podSocketClient } = usePodData();
@@ -10,7 +12,12 @@ function App() {
 		<main>
 			<PodContext.Provider value={{ podData, podSocketClient }}>
 				<Navbar />
-				<Dashboard />
+				<BrowserRouter>
+					<Routes>
+						<Route path="/" element={<Dashboard />} />
+						<Route path="/dynamics" element={<Dynamics />} />
+					</Routes>
+				</BrowserRouter>
 				<ControlPanel />
 			</PodContext.Provider>
 		</main>

control-station/src/views/Dynamics/Dynamics.css

@@ -0,0 +1,29 @@
+.dynamics {
+	display: flex;
+}
+
+.dynamics-sensorbox {
+	width: 40%;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-evenly;
+	align-items: center;
+}
+
+.dynamics-pictures {
+	width: 60%;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-around;
+	align-items: center;
+}
+
+.pod-picture-container {
+	background-color: rgb(209, 209, 209);
+	width: 60%;
+	height: 40%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 40px;
+}

control-station/src/views/Dynamics/Dynamics.tsx

@@ -0,0 +1,28 @@
+import SensorBox from "@/components/SensorBoxes/Sensors/SensorBox";
+import PodContext from "@/services/PodContext";
+import FrontPod from "@/data/images/FrontPod.png";
+import SidePod from "@/data/images/SidePod.png";
+import "./Dynamics.css";
+import { useContext } from "react";
+function Dynamics() {
+	const { podData } = useContext(PodContext);
+	const { gyroscope } = podData;
+	return (
+		<div className="dynamics">
+			<div className="dynamics-sensorbox">
+				<SensorBox title="Roll" value={gyroscope.roll} />
+				<SensorBox title="Pitch" value={gyroscope.pitch} />
+			</div>
+			<div className="dynamics-pictures">
+				<div className="pod-picture-container">
+					<img src={FrontPod} />
+				</div>
+				<div className="pod-picture-container">
+					<img src={SidePod} />
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default Dynamics;