diff --git a/typescript/frontend-marios2/src/content/dashboards/BatteryView/DetailedBatteryView.tsx b/typescript/frontend-marios2/src/content/dashboards/BatteryView/DetailedBatteryView.tsx
index bacb3ff88..818cf967c 100644
--- a/typescript/frontend-marios2/src/content/dashboards/BatteryView/DetailedBatteryView.tsx
+++ b/typescript/frontend-marios2/src/content/dashboards/BatteryView/DetailedBatteryView.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
import { I_S3Credentials } from '../../../interfaces/S3Types';
import {
Card,
@@ -8,7 +8,8 @@ import {
TableBody,
TableCell,
TableContainer,
- TableRow
+ TableRow,
+ Typography
} from '@mui/material';
import { Battery } from '../Log/graph.util';
import Button from '@mui/material/Button';
@@ -38,6 +39,64 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
);
};
+ const [GreenisBlinking, setGreenisBlinking] = useState(
+ props.batteryData.GreenLeds.value === 'Blinking'
+ );
+
+ const [AmberisBlinking, setAmberisBlinking] = useState(
+ props.batteryData.AmberLeds.value === 'Blinking'
+ );
+ const [RedisBlinking, setRedisBlinking] = useState(
+ props.batteryData.RedLeds.value === 'Blinking'
+ );
+
+ const [BlueisBlinking, setBlueisBlinking] = useState(
+ props.batteryData.BlueLeds.value === 'Blinking'
+ );
+
+ useEffect(() => {
+ const intervalId = setInterval(() => {
+ if (props.batteryData.AmberLeds.value === 'Blinking') {
+ setAmberisBlinking((prevIsBlinking) => !prevIsBlinking);
+ }
+
+ if (props.batteryData.RedLeds.value === 'Blinking') {
+ setRedisBlinking((prevIsBlinking) => !prevIsBlinking);
+ }
+
+ if (props.batteryData.BlueLeds.value === 'Blinking') {
+ setBlueisBlinking((prevIsBlinking) => !prevIsBlinking);
+ }
+
+ if (props.batteryData.GreenLeds.value === 'Blinking') {
+ setGreenisBlinking((prevIsBlinking) => !prevIsBlinking);
+ }
+ }, 500); // Blink every 500 milliseconds
+
+ // Cleanup the interval on component unmount
+ return () => clearInterval(intervalId);
+ }, []);
+
+ const batteryStyle = {
+ borderRadius: '15px',
+ padding: '10px',
+ backgroundColor: 'lightgray',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: '150px',
+ marginTop: '30px'
+ };
+
+ const batteryStringStyle = {
+ flex: 1,
+ border: '1px solid #000',
+ height: '97%',
+ width: '30px',
+ borderRadius: '7px',
+ backgroundColor: '#bfbfbf'
+ };
+
return (
<>
@@ -70,18 +129,149 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
-
+
+
+
+
+
+
+
+
+
+
+
+ Battery Information
+
+
@@ -217,28 +407,7 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
props.batteryData.HeatingCurrent.unit}
-
-
- Heating Power
-
-
- {props.batteryData.HeatingPower.value +
- ' ' +
- props.batteryData.HeatingPower.unit}
-
-
+
-
-
- SOCAh
-
-
- {props.batteryData.SOCAh.value +
- ' ' +
- props.batteryData.SOCAh.unit}
-
-
{/*----------------------------------------------------------------------------------------------------------------------------------*/}
-
+
+
+ Temperature
+
+
@@ -466,19 +628,33 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
{/*----------------------------------------------------------------------------------------------------------------------------------*/}
-
+
+
+ Io Status
+
@@ -643,19 +819,33 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
{/*----------------------------------------------------------------------------------------------------------------------------------*/}
-
+
+
+ Specification
+
@@ -819,151 +1009,109 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
{/*----------------------------------------------------------------------------------------------------------------------------------*/}
-
-
-
-
-
-
-
- Blue Led
-
-
-
-
-
-
-
- Green Led
-
-
-
-
-
-
-
- Red Led
-
-
-
-
-
-
-
- Amber Led
-
-
-
-
-
-
-
-
-
-
+
+ {/**/}
+ {/* */}
+ {/* */}
+ {/* */}
+ {/* */}
+ {/* */}
+ {/* */}
+ {/* Green Led*/}
+ {/* */}
+ {/* */}
+ {/* {props.batteryData.GreenLeds.value}*/}
+ {/* */}
+ {/* */}
+ {/* */}
+ {/* */}
+ {/* Amber Led*/}
+ {/* */}
+ {/* */}
+ {/* {props.batteryData.AmberLeds.value}*/}
+ {/* */}
+ {/* */}
+ {/* */}
+ {/* */}
+ {/* Blue Led*/}
+ {/* */}
+ {/* */}
+ {/* {props.batteryData.BlueLeds.value}*/}
+ {/* */}
+ {/* */}
+
+ {/* */}
+ {/* */}
+ {/* Red Led*/}
+ {/* */}
+ {/* */}
+ {/* {props.batteryData.RedLeds.value}*/}
+ {/* */}
+ {/* */}
+ {/* */}
+ {/*
*/}
+ {/* */}
+ {/* */}
+ {/**/}
>
);
}