Committing constant2 changes before I mess something up

src/App.js

@@ -9,7 +9,7 @@ import Nav from "./pages/focus/nav";
 import Ingress from "./pages/focus/ingress";
 import Equipment from "./pages/focus/equipment";
 import Egress from "./pages/focus/egress";
-import Constant from './pages/constant/constant';
+import Constant from './pages/constant/constant2';
 import { GlobalProvider } from './components/GlobalContext'; // Ensure this is the correct path to your GlobalContext
 
 function App() {

src/pages/constant/EVData.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useGlobal } from '../../components/GlobalContext';
+import './constant2.css'; // Import CSS file for styling
+
+const EVData = ({ evNumber }) => {
+  const { allData, error } = useGlobal();
+
+  if (error) return <div>Error: {error}</div>;
+  if (!allData.telemetry || !allData.telemetry.telemetry) return <div>Loading...</div>;
+
+  const evaData = allData.telemetry.telemetry[`eva${evNumber}`];
+
+  return (
+    <div className="ev-container">
+      <h2>EV{evNumber} Data</h2>
+      <div className="ev-table-container">
+        <table className="ev-table">
+          <thead>
+            <tr>
+              <th>Parameter</th>
+              <th>Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            {Object.entries(evaData).map(([key, value]) => (
+              <tr key={key}>
+                <td>{key}</td>
+                <td>{value}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default EVData;

src/pages/constant/constant2.css

@@ -0,0 +1,110 @@
+.pagecontainer {
+    display: flex;
+    flex-direction: column;
+    height: 90vh;
+    width: 100vw;
+    overflow: hidden;
+  }
+
+  #topbar {
+    height: 10vh;
+    width: 100%;
+    background-color: lightblue; /* Change to desired color */
+    position: relative;
+  }
+
+  #centerbar {
+    width: 40vw;
+    height: 10vh;
+    background-color: lightgreen; /* Change to desired color */
+    position: absolute;
+    top: calc(50vh); /* Center vertically */
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 10;
+  }
+
+  #HMDStream, #RoverStream {
+    width: 50%;
+    height: 45vh;
+    background-color: lightcoral; /* Change to desired color */
+  }
+
+  #RoverStream {
+    background-color: lightyellow; /* Change to desired color */
+  }
+
+  #EV1, #Map, #EV2 {
+    width: 33.33%;
+    height: 45vh;
+  }
+
+  #EV1 {
+    background-color: lightgray; /* Change to desired color */
+  }
+
+  #Map {
+    margin-top: 5vh;
+    background-color: lightpink; /* Change to desired color */
+  }
+
+  #EV2 {
+    background-color: lightgoldenrodyellow; /* Change to desired color */
+  }
+
+  .top-half, .bottom-half {
+    display: flex;
+    width: 100%;
+  }
+
+  .bottom-half {
+    display: flex;
+    width: 100%;
+    height: 55vh;
+  }
+  .ev-container {
+    padding: 20px;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .ev-table-container {
+    width: 100%;
+    height: 100%;
+    overflow: auto;  /* Allow scrolling if content overflows */
+  }
+
+  .ev-table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .ev-table th,
+  .ev-table td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+    box-sizing: border-box;
+  }
+
+  .ev-table th {
+    background-color: #4CAF50;
+    color: white;
+  }
+
+  .ev-table tr:nth-child(even) {
+    background-color: #f2f2f2;
+  }
+
+  .ev-table tr:hover {
+    background-color: #ddd;
+  }
+

src/pages/constant/constant2.js

@@ -0,0 +1,27 @@
+import "./constant2.css";
+import StreamComponent from "../../components/StreamComponent.js";
+import RoverCam from "../../components/RoverCamera.js";
+import "../../pages-style/page.css";
+import EVData from './EVData';
+import Map from '../../components/Map';
+
+
+function Constant() {
+  return (
+    <div className="pagecontainer" id="constantpage">
+        <div id="topbar"></div>
+        <div id="centerbar"></div>
+        <div className="top-half">
+            <div id="HMDStream"> <StreamComponent /> </div>
+            <div id="RoverStream"> <RoverCam /> </div>
+        </div>
+        <div className="bottom-half">
+            <div id="EV1"> <EVData evNumber={1} /> </div>
+            <div id="Map"> < Map /> </div>
+            <div id="EV2"> <EVData evNumber={2} /> </div>
+        </div>
+    </div>
+  );
+}
+
+export default Constant;