Preliminary status indicator box

control-station/src/App.tsx

@@ -1,11 +1,15 @@
-import { ControlPanel, Navbar, SensorData } from "@/components";
+import { ControlPanel, Navbar, SensorData, StatusIndicator } from "@/components";
+import usePodData from "./services/usePodData";
 
 function App() {
+	const { podData, podSocketClient } = usePodData();
+
 	return (
 		<main>
 			<Navbar />
 			<SensorData />
-			<ControlPanel />
+			<StatusIndicator state={podData.state} />
+			<ControlPanel podSocketClient={podSocketClient} />
 		</main>
 	);
 }

control-station/src/components/ControlPanel/ControlPanel.css

@@ -1,6 +1,4 @@
 .controlpanel {
-	position: fixed;
-	bottom: 0;
 	width: 100%;
 	background-color: black;
 	height: 9%;

control-station/src/components/ControlPanel/ControlPanel.tsx

@@ -1,11 +1,13 @@
 import "./ControlPanel.css";
-import usePodData from "@/services/usePodData";
+import PodSocketClient from "@/services/PodSocketClient";
 
-function ControlPanel() {
-	const { podData, podSocketClient } = usePodData();
+interface ControlPanelProps {
+	podSocketClient: PodSocketClient;
+}
+
+function ControlPanel({ podSocketClient }: ControlPanelProps) {
 	return (
 		<div className="controlpanel">
-			<h2 style={{ color: "white" }}>Current State: {podData.state}</h2>
 			<button className="button run" onClick={() => podSocketClient.sendRun()}>
 				Run
 			</button>

control-station/src/components/SensorBoxes/Sensors/SensorsContainer.tsx

@@ -7,8 +7,6 @@ function SensorContainer() {
 			<SensorBox />
 			<SensorBox />
 			<SensorBox />
-			<SensorBox />
-			<SensorBox />
 		</div>
 	);
 }

control-station/src/components/StatusIndicator/StatusIndicator.css

@@ -0,0 +1,53 @@
+.status-indicator {
+	background-color: lightgray;
+	border-radius: 10px;
+	padding: 1rem;
+	margin: 2rem;
+}
+
+.group {
+	margin-bottom: 1rem;
+}
+
+.state-text {
+	display: inline-block;
+	vertical-align: middle;
+}
+
+.circle {
+	width: 25px;
+	height: 25px;
+	border-radius: 50%;
+	display: inline-block;
+	vertical-align: middle;
+	margin-right: 20px;
+	background-color: gray;
+}
+
+.disconnected-state > .active {
+	background-color: white;
+}
+
+.init-state > .active {
+	background-color: pink;
+}
+
+.running-state > .active {
+	background-color: green;
+}
+
+.stopped-state > .active {
+	background-color: red;
+}
+
+.halted-state > .active {
+	background-color: darkred;
+}
+
+.faulted-state > .active {
+	background-color: darkred;
+}
+
+.load-state > .active {
+	background-color: rgb(0, 100, 188);
+}

control-station/src/components/StatusIndicator/StatusIndicator.tsx

@@ -0,0 +1,23 @@
+import { State } from "@/services/PodSocketClient";
+import "./StatusIndicator.css";
+
+interface StatusIndicatorProps {
+	state: State;
+}
+
+function StatusIndicator({ state }: StatusIndicatorProps) {
+	return (
+		<div className="status-indicator">
+			{Object.values(State).map((s) => {
+				return (
+					<div key={s} className={`group ${s.toLowerCase()}-state`}>
+						<span className={`circle` + (s === state ? " active" : "")}></span>
+						<div className="state-text">{s}</div>
+					</div>
+				);
+			})}
+		</div>
+	);
+}
+
+export default StatusIndicator;

control-station/src/components/index.ts

@@ -2,3 +2,4 @@ export { default as ControlPanel } from "./ControlPanel/ControlPanel";
 export { default as Navbar } from "./Navbar/Navbar";
 export { default as SensorData } from "./SensorBoxes/SensorData";
 export { default as Status } from "./Status/Status";
+export { default as StatusIndicator } from "./StatusIndicator/StatusIndicator";