Change general structure of control station pages

control-station/src/App.tsx

@@ -7,6 +7,7 @@ import { ReactComponent as Wheel } from 'assets/svg/wheel.svg';
 import { ReactComponent as Gui } from  'assets/svg/gui.svg';
 import { ReactComponent as Cameras } from 'assets/svg/cameras.svg';
 import { ReactComponent as TeamLogo } from 'assets/svg/team_logo.svg';
+import { ReactComponent as Batteries } from 'assets/svg/battery-filled.svg'
 import { SplashScreen, WsHandlerProvider, useLoadBackend } from 'common';
 
 export const App = () => {
@@ -20,8 +21,9 @@ export const App = () => {
                     <Sidebar
                         items={[
                             { path: '/vehicle', icon: <Wheel /> },
-                            { path: '/cameras', icon: <Cameras /> },
-                            { path: '/guiBooster', icon: <Gui /> }
+                            { path: '/batteries', icon: <Batteries /> },
+                            { path: '/booster', icon: <Gui /> },
+                            { path: '/cameras', icon: <Cameras /> }
                         ]}
                     />
                     <Outlet />

control-station/src/components/GuiModules/GuiModule.tsx → control-station/src/components/BoosterModules/BoosterModule.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import styles from "./GuiModule.module.scss";
+import styles from "./BoosterModule.module.scss";
 
 import { useMeasurementsStore } from "common";
 
@@ -9,7 +9,7 @@ interface CellProps {
   max: number;
 }
 
-const GuiModule: React.FC<{ id: string | number }> = ({ id }) => {
+const BoosterModule: React.FC<{ id: string | number }> = ({ id }) => {
   const moduleMinCell = useMeasurementsStore(
     (state) => (state.getNumericMeasurementInfo(`HVSCU-Cabinet/HVSCU-Cabinet_module_${id}_min_cell`)?.getUpdate() ?? 0)
   );
@@ -85,5 +85,5 @@ const GuiModule: React.FC<{ id: string | number }> = ({ id }) => {
   );
 };
 
-export default GuiModule;
+export default BoosterModule;
 

control-station/src/hooks/useConnectionContext.ts

@@ -0,0 +1,28 @@
+import { Connection, useConnections } from 'common';
+
+export function useConnectionContext() {
+    const connections = useConnections();
+
+    function isDisconnected(connection: Connection): boolean {
+        return !connection.isConnected;
+    }
+
+    function any<T>(data: T[], condition: (value: T) => boolean): boolean {
+        for (const value of data) {
+            if (condition(value)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    const lostConnection = any(
+        [...connections.boards, connections.backend],
+        isDisconnected
+    );
+
+    return {
+        connections,
+        lostConnection
+    };
+}

control-station/src/hooks/useEmergencyOrders.ts

@@ -1,5 +1,5 @@
 import { Order, useListenKey, useSendOrder } from 'common';
-import { emergencyStopOrders } from 'pages/VehiclePage/Data2Page/FixedOrders';
+import { emergencyStopOrders } from 'pages/VehiclePage/BatteriesPage/FixedOrders';
 
 export function useEmergencyOrders(
     shortcut: string = ' ',

control-station/src/main.tsx

@@ -9,10 +9,10 @@ import {
 } from 'react-router-dom';
 import { App } from './App';
 import './index.css';
-import { vehicleRoute } from 'pages/VehiclePage/vehicleRoute';
+import { mainPageRoute } from 'pages/VehiclePage/MainPage/mainPageRoute';
 import { camerasRoute } from 'pages/CamerasPage/camerasRoute';
-import { tubeRoute } from 'pages/TubePage/tubeRoute';
-import { guiRoute } from 'pages/VehiclePage/GuiBoosterPage/guiRoute';
+import { batteriesRoute } from 'pages/VehiclePage/BatteriesPage/batteriesRoute'
+import { boosterRoute } from 'pages/VehiclePage/BoosterPage/boosterRoute';
 import { ConfigProvider, GlobalTicker } from 'common';
 
 const router = createBrowserRouter([
@@ -21,10 +21,10 @@ const router = createBrowserRouter([
         element: <App />,
         children: [
             { path: '', element: <Navigate to={'vehicle'} /> },
-            vehicleRoute,
-            camerasRoute,
-            tubeRoute,
-            guiRoute,
+            mainPageRoute,
+            boosterRoute,
+            batteriesRoute,
+            camerasRoute
         ],
     },
 ]);

control-station/src/pages/VehiclePage/Data2Page/Data2Page.tsx → control-station/src/pages/VehiclePage/BatteriesPage/BatteriesPage.tsx

@@ -1,15 +1,26 @@
-import styles from './Data2Page.module.scss';
+import styles from './BatteriesPage.module.scss';
 import { LCU } from '../Boards/LCU/LCU';
-import { PCU } from '../Boards/PCU/PCU';
 import { Orders, useOrders } from 'common';
 import { Connections, Logger, MessagesContainer } from 'common';
 import { Window } from 'components/Window/Window';
 import FixedOrders, { getHardcodedOrders } from './FixedOrders';
+import { usePodDataUpdate } from 'hooks/usePodDataUpdate';
+import { Connection, useConnections } from 'common';
+import { LostConnectionContext } from 'services/connections';
 
-export const Data2Page = () => {
+export const BatteriesPage = () => {
+    usePodDataUpdate();
+
+    const connections = useConnections();
     const boardOrders = useOrders();
 
     return (
+        <LostConnectionContext.Provider
+             value={any(
+                [...connections.boards, connections.backend],
+                 isDisconnected
+             )}
+        >
         <div className={styles.data2_page}>
             <div className={`${styles.column} ${styles.lcu}`}>
                 <LCU />
@@ -38,5 +49,29 @@ export const Data2Page = () => {
                 </Window>
             </div>
         </div>
+
+        </LostConnectionContext.Provider>
     );
 };
+
+function isDisconnected(connection: Connection): boolean {
+    return !connection.isConnected;
+}
+
+function all<T>(data: T[], condition: (value: T) => boolean): boolean {
+    for (const value of data) {
+        if (!condition(value)) {
+            return false;
+        }
+    }
+    return true;
+}
+
+function any<T>(data: T[], condition: (value: T) => boolean): boolean {
+    for (const value of data) {
+        if (condition(value)) {
+            return true;
+        }
+    }
+    return false;
+}

control-station/src/pages/VehiclePage/BatteriesPage/batteriesRoute.tsx

@@ -0,0 +1,6 @@
+import { BatteriesPage } from "./BatteriesPage";
+
+export const batteriesRoute = {
+    path: "/batteries",
+    element: <BatteriesPage/>
+};

control-station/src/pages/VehiclePage/Boards/HVSCU/HVSCU.module.scss

@@ -55,7 +55,6 @@
 
 .text {
   display: flex;
-  justify-content: center; 
   align-items: center;
   margin: 0.5rem;
   gap: 0.4rem;

control-station/src/pages/VehiclePage/Boards/LCU/LCU.module.scss

@@ -13,7 +13,6 @@
   text-align: center;
   color: #5894A7;
   font-style: italic;
-  font-weight: bold;
   margin-top: 2px;
   margin-bottom: 2px;
   padding-top: 0;

control-station/src/pages/VehiclePage/GuiBoosterPage/GuiPage.tsx → control-station/src/pages/VehiclePage/BoosterPage/BoosterPage.tsx

@@ -1,17 +1,13 @@
 import { useState } from "react";
-import styles from "./GuiPage.module.scss";
-import GuiModule from "../../../components/GuiModules/GuiModule";
+import styles from "./BoosterPage.module.scss";
+import GuiModule from "../../../components/BoosterModules/BoosterModule";
 import { useMeasurementsStore, HvscuCabinetMeasurements, getBooleanMeasurement, GlobalTicker, useGlobalTicker, useOrders, BoardOrders, MessagesContainer } from "common";
 import { OrdersContainer } from "components/OrdersContainer/OrdersContainer";
 import { Window } from "components/Window/Window";
-import { getHardcodedOrders } from "../Data2Page/FixedOrders";
-
-// Función para filtrar solo las placas deseadas
-function getFilteredBoardOrders(boardOrders: BoardOrders[]): BoardOrders[] {
-  return boardOrders.filter(board => 
-    board.name === "HVSCU-Cabinet" || board.name === "BCU"
-  );
-}
+import { getHardcodedOrders } from "../BatteriesPage/FixedOrders";
+import { usePodDataUpdate } from 'hooks/usePodDataUpdate';
+import { Connection, useConnections } from 'common';
+import { LostConnectionContext } from 'services/connections';
 
 interface ModuleData {
   id: number | string;
@@ -24,7 +20,10 @@ const modules: ModuleData[] = [
   { id: 3, name: "Module 3" },
 ];
 
-export function GuiPage() {
+export function BoosterPage() {
+  usePodDataUpdate();
+
+  const connections = useConnections();
   const getNumericMeasurementInfo = useMeasurementsStore((state) => state.getNumericMeasurementInfo);
 
   const boardOrders = useOrders();
@@ -58,7 +57,12 @@ export function GuiPage() {
   });
 
   return (
-    <div>
+    <LostConnectionContext.Provider
+         value={any(
+            [...connections.boards, connections.backend],
+             isDisconnected
+         )}
+    >
       <main className={styles.boosterMainContainer}>
         <div className={styles.boosterContainer}>
           <div className={styles.statusContainer}>
@@ -121,6 +125,28 @@ export function GuiPage() {
           </Window>
         </div>
       </main>
-    </div>
+    </LostConnectionContext.Provider>
   );
 }
+
+function isDisconnected(connection: Connection): boolean {
+    return !connection.isConnected;
+}
+
+function all<T>(data: T[], condition: (value: T) => boolean): boolean {
+    for (const value of data) {
+        if (!condition(value)) {
+            return false;
+        }
+    }
+    return true;
+}
+
+function any<T>(data: T[], condition: (value: T) => boolean): boolean {
+    for (const value of data) {
+        if (condition(value)) {
+            return true;
+        }
+    }
+    return false;
+}

control-station/src/pages/VehiclePage/BoosterPage/boosterRoute.tsx

@@ -0,0 +1,6 @@
+import { BoosterPage } from "./BoosterPage";
+
+export const boosterRoute = {
+    path: "/booster",
+    element: <BoosterPage/>
+};

control-station/src/pages/VehiclePage/Data1Page/Data1Page.module.scss → control-station/src/pages/VehiclePage/MainPage/MainPage.module.scss

@@ -44,6 +44,9 @@
   box-sizing: border-box;
   padding: 0;
   gap: 0.4rem;
+  margin-top: 1%;
+  margin-left: 1%;
+  margin-right: 1%;
 }
 
 .leds {
@@ -157,7 +160,6 @@
 .emergency_wrapper {
   display: flex;
   justify-content: center;
-
 }
 .compact {
   height: 200px;

control-station/src/pages/VehiclePage/Data1Page/Data1Page.tsx → control-station/src/pages/VehiclePage/MainPage/MainPage.tsx

@@ -1,22 +1,32 @@
-import styles from './Data1Page.module.scss';
+import styles from './MainPage.module.scss';
 import { LCU } from '../Boards/LCU/LCU';
 import { HVSCU } from '../Boards/HVSCU/HVSCU';
-import { Orders, useOrders } from 'common';
 import { MessagesContainer } from 'common';
 import { Window } from 'components/Window/Window';
-import { emergencyStopOrders, getHardcodedOrders } from '../Data2Page/FixedOrders';
+import { emergencyStopOrders, getHardcodedOrders } from '../BatteriesPage/FixedOrders';
 import { BigOrderButton } from 'components/BigOrderButton';
-import { ChartDLIM, ChartLSM } from './Data1Modules/Data1Charts';
-import { Batteries } from './Data1Modules/Data1Batteries';
-import { LEDS } from './Data1Modules/Leds';
-import { BrakeState } from './Data1Modules/BrakeState';
-import { PodPosition } from './Data1Modules/PodPosition';
+import { ChartDLIM, ChartLSM } from './MainPageModules/MainCharts';
+import { Batteries } from './MainPageModules/MainBatteries';
+import { LEDS } from './MainPageModules/Leds';
+import { BrakeState } from './MainPageModules/BrakeState';
+import { PodPosition } from './MainPageModules/PodPosition';
 import { OrdersContainer } from 'components/OrdersContainer/OrdersContainer';
+import { usePodDataUpdate } from 'hooks/usePodDataUpdate';
+import { Connection, useConnections } from 'common';
+import { LostConnectionContext } from 'services/connections';
 
-export const Data1Page = () => {
-    const boardOrders = useOrders();
+export const MainPage = () => {
+    usePodDataUpdate();
+
+    const connections = useConnections();
 
     return (
+        <LostConnectionContext.Provider
+             value={any(
+                [...connections.boards, connections.backend],
+                 isDisconnected
+             )}
+        >
         <div className={styles.data1_page}>
             <LEDS/>
             <PodPosition/>
@@ -58,5 +68,29 @@ export const Data1Page = () => {
                 </div>
             </div>
         </div>
+
+        </LostConnectionContext.Provider>
     );
-};
+};
+
+function isDisconnected(connection: Connection): boolean {
+    return !connection.isConnected;
+}
+
+function all<T>(data: T[], condition: (value: T) => boolean): boolean {
+    for (const value of data) {
+        if (!condition(value)) {
+            return false;
+        }
+    }
+    return true;
+}
+
+function any<T>(data: T[], condition: (value: T) => boolean): boolean {
+    for (const value of data) {
+        if (condition(value)) {
+            return true;
+        }
+    }
+    return false;
+}

control-station/src/pages/VehiclePage/Data1Page/Data1Modules/BrakeState.tsx → control-station/src/pages/VehiclePage/MainPage/MainPageModules/BrakeState.tsx

@@ -1,8 +1,7 @@
 import { VcuMeasurements, useGlobalTicker, useMeasurementsStore } from "common";
 import { useContext, useState } from "react";
 import { LostConnectionContext } from "services/connections";
-import styles from '../Data1Page.module.scss';
-import hand from 'assets/svg/hand.svg'
+import styles from '../MainPage.module.scss';
 
 export const BrakeState = () => {
     const getBooleanMeasurementInfo = useMeasurementsStore((state) => state.getBooleanMeasurementInfo);

control-station/src/pages/VehiclePage/Data1Page/Data1Modules/Leds.tsx → control-station/src/pages/VehiclePage/MainPage/MainPageModules/Leds.tsx

@@ -1,7 +1,7 @@
 import { HvscuMeasurements, useGlobalTicker, useMeasurementsStore } from "common";
 import { useContext, useState } from "react";
 import { LostConnectionContext } from "services/connections";
-import styles from '../Data1Page.module.scss';
+import styles from '../MainPage.module.scss';
 import { useEffect } from 'react';
 
 export const LEDS = () => {