1- import React , { useState } from "react" ;
1+ import React , { useState , useContext } from "react" ;
22import styles from "./BatteriesModule.module.scss" ;
3- import { useGlobalTicker , useMeasurementsStore } from "common" ;
3+ import { useGlobalTicker , useMeasurementsStore , usePodDataStore } from "common" ;
4+ import { LostConnectionContext } from "services/connections" ;
45
56interface CellProps {
67 value : number ;
78 min : number ;
89 max : number ;
910}
1011
12+ interface TemperatureProps {
13+ value : number ;
14+ min : number ;
15+ max : number ;
16+ label : string ;
17+ }
18+
1119const BatteriesModule : React . FC < { id : string | number } > = ( { id } ) => {
1220 const minThresholdCellVoltage = 3.73 ;
1321 const maxThresholdCellVoltage = 4.2 ;
22+ const minThresholdTemperature = 0 ;
23+ const maxThresholdTemperature = 60 ;
24+ const temp1VariableName = `HVSCU/battery${ id } ;
25+ const temp2VariableName = `HVSCU/battery${ id } ;
26+
1427 const getNumericMeasurementInfo = useMeasurementsStore ( ( state ) => state . getNumericMeasurementInfo ) ;
28+ const podData = usePodDataStore ( ( state ) => state . podData ) ;
29+ const lostConnection = useContext ( LostConnectionContext ) ;
30+
1531 const [ cellValues , setCellValues ] = useState < number [ ] > ( Array ( 6 ) . fill ( 0 ) ) ;
32+ const [ temperature1 , setTemperature1 ] = useState < number > ( 0 ) ;
33+ const [ temperature2 , setTemperature2 ] = useState < number > ( 0 ) ;
34+ const [ hasReceivedData , setHasReceivedData ] = useState ( false ) ;
1635
1736 useGlobalTicker ( ( ) => {
37+ const boardName = 'HVSCU' ;
38+ const board = podData . boards . find ( b => b . name === boardName ) ;
39+ const hasReceivedPackets = board ?. packets . some ( packet => packet . count > 0 ) || false ;
40+
41+ if ( hasReceivedPackets && ! hasReceivedData ) {
42+ setHasReceivedData ( true ) ;
43+ }
44+
1845 setCellValues (
1946 Array . from ( { length : 6 } , ( _ , i ) => {
2047 const variableName = `HVSCU/battery${ id } ${ i + 1 } ;
2148 return getNumericMeasurementInfo ( variableName ) ?. getUpdate ( ) ?? 0 ;
2249 } )
2350 ) ;
51+
52+ setTemperature1 ( getNumericMeasurementInfo ( temp1VariableName ) ?. getUpdate ( ) ?? 0 ) ;
53+ setTemperature2 ( getNumericMeasurementInfo ( temp2VariableName ) ?. getUpdate ( ) ?? 0 ) ;
2454 } ) ;
2555
26- const getColorFromValue = ( value : number , min : number , max : number ) => {
56+ const getColorFromValue = ( value : number , min : number , max : number , showDisconnected : boolean ) => {
57+ if ( showDisconnected ) return styles . disconnected ;
2758 if ( value < min ) return styles . yellow ;
2859 if ( value > max ) return styles . red ;
2960 return styles . green ;
3061 } ;
3162
63+ const showDisconnected = lostConnection || ! hasReceivedData ;
64+
3265 const Cell : React . FC < CellProps > = ( { value, min, max } ) => {
33- const colorClass = getColorFromValue ( value , min , max ) ;
34- const formattedValue = Math . max ( 0 , Math . min ( 9.999 , value ) ) . toFixed ( 3 ) ;
66+ const colorClass = getColorFromValue ( value , min , max , showDisconnected ) ;
67+ const formattedValue = Math . max ( 0 , Math . min ( 9.999 , value ) ) . toFixed ( 3 ) ;
3568 return (
3669 < div
3770 className = { `${ styles . cell } ${ colorClass } }
71+ title = { showDisconnected ? "DISCONNECTED" : `${ value . toFixed ( 3 ) } }
3872 >
39- < span className = { styles . cellText } > { formattedValue } V</ span >
73+ < span className = { styles . cellText } > { formattedValue } { showDisconnected ? "" : "V" } </ span >
74+ </ div >
75+ ) ;
76+ } ;
77+
78+ const TemperatureIndicator : React . FC < TemperatureProps > = ( { value, min, max, label } ) => {
79+ const colorClass = getColorFromValue ( value , min , max , showDisconnected ) ;
80+ const formattedValue = value . toFixed ( 1 ) ;
81+ return (
82+ < div className = { styles . temperatureIndicator } >
83+ < span className = { styles . temperatureLabel } > { label } </ span >
84+ < div className = { `${ styles . temperatureValue } ${ colorClass } } >
85+ < span className = { styles . temperatureText } > { formattedValue } { showDisconnected ? "" : "°C" } </ span >
86+ </ div >
4087 </ div >
4188 ) ;
4289 } ;
@@ -45,14 +92,29 @@ const BatteriesModule: React.FC<{ id: string | number }> = ({ id }) => {
4592 < div className = { styles . boxContainer1 } >
4693 < div className = { styles . boxContainer2 } >
4794 < article className = { styles . titleDecorationModule } >
48- < h2 className = { styles . h2Module } > Module { id } </ h2 >
95+ < h2 className = { styles . h2Module } > Segment { id } </ h2 >
4996 </ article >
5097
5198 < div className = { styles . flexCells } >
5299 { cellValues . map ( ( value , index ) => (
53100 < Cell key = { index } value = { value } min = { minThresholdCellVoltage } max = { maxThresholdCellVoltage } />
54101 ) ) }
55102 </ div >
103+
104+ < div className = { styles . temperatureContainer } >
105+ < TemperatureIndicator
106+ value = { temperature1 }
107+ min = { minThresholdTemperature }
108+ max = { maxThresholdTemperature }
109+ label = "T1"
110+ />
111+ < TemperatureIndicator
112+ value = { temperature2 }
113+ min = { minThresholdTemperature }
114+ max = { maxThresholdTemperature }
115+ label = "T2"
116+ />
117+ </ div >
56118 </ div >
57119 </ div >
58120 ) ;
0 commit comments