From faadc33a7e0aecc529e01689f0295d0ee6088ac6 Mon Sep 17 00:00:00 2001 From: vinay kumar Date: Tue, 1 Jul 2025 19:38:11 +0530 Subject: [PATCH] Display device data in ui --- app/(tabs)/index.tsx | 10 ++++++---- app/auth/login.tsx | 2 +- app/auth/verifyOtp.tsx | 10 ++++++++-- components/home/MetricCard.tsx | 9 ++++++--- components/home/SemiCircleProgress.tsx | 12 +++++++----- constants/config.ts | 14 ++++++-------- constants/types.ts | 12 ++++++++++++ services/socket.ts | 19 +++++++++++++++++-- 8 files changed, 63 insertions(+), 25 deletions(-) create mode 100644 constants/types.ts diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx index 83c4c35..4f30c96 100644 --- a/app/(tabs)/index.tsx +++ b/app/(tabs)/index.tsx @@ -20,7 +20,9 @@ export default function HomeScreen() { const { t } = useTranslation(); const navigation = useNavigation(); const [isSupportModalVisible, setIsSupportModalVisible] = useState(false); - const { SoC, SoH } = useSelector((state: RootState) => state.telemetry); + const { SoC, SoH, chargingState } = useSelector( + (state: RootState) => state.telemetry + ); useLayoutEffect(() => { navigation.setOptions({ @@ -54,11 +56,11 @@ export default function HomeScreen() { subMessage="Service Reminder" /> - + - - + + (); - + const { isLoggedIn } = useSelector((state: RootState) => state.auth); const [seconds, setSeconds] = useState(30); const [isTimerActive, setIsTimerActive] = useState(true); const [resendAttempts, setResendAttempts] = useState(0); @@ -49,6 +49,12 @@ export default function VerifyOTP() { const formattedSeconds = seconds.toString().padStart(2, "0"); + useEffect(() => { + if (status === AUTH_STATUSES.SUCCESS && isLoggedIn) { + router.replace("/"); // This assumes "/" leads to your `TabLayout` + } + }, [status, isLoggedIn]); + return ( Verify Code diff --git a/components/home/MetricCard.tsx b/components/home/MetricCard.tsx index efe064d..2861ead 100644 --- a/components/home/MetricCard.tsx +++ b/components/home/MetricCard.tsx @@ -3,15 +3,18 @@ import { View, Text, StyleSheet } from "react-native"; interface MetricCardProps { heading: string; - value: string | number; + value: number | null; + unit: string; } -const MetricCard: React.FC = ({ heading, value }) => { +const MetricCard: React.FC = ({ heading, value, unit }) => { return ( {heading} - {value} + + {value ?? "---"} {unit} + ); diff --git a/components/home/SemiCircleProgress.tsx b/components/home/SemiCircleProgress.tsx index 0eea948..6847b5d 100644 --- a/components/home/SemiCircleProgress.tsx +++ b/components/home/SemiCircleProgress.tsx @@ -1,3 +1,5 @@ +import { BMS_STATE_LABELS } from "@/constants/config"; +import { BmsState } from "@/constants/types"; import React, { useEffect, useRef, useState } from "react"; import { View, StyleSheet, Text, Animated } from "react-native"; import Svg, { Circle, Defs, LinearGradient, Stop } from "react-native-svg"; @@ -8,8 +10,8 @@ const CircleProgressBar = ({ progress, status, }: { - progress: number; - status: number; + progress: number | null; + status: number | null; }) => { const radius = 20; const strokeWidth = 5; @@ -27,7 +29,7 @@ const CircleProgressBar = ({ setDisplayProgress(0); } else { Animated.timing(animatedValue, { - toValue: progress, + toValue: progress ?? 0, duration: 500, useNativeDriver: false, }).start(); @@ -97,7 +99,7 @@ const CircleProgressBar = ({ - {progress === undefined ? "---" : displayProgress} + {progress ? displayProgress : "--"} {progress === undefined ? null : "%"} @@ -105,7 +107,7 @@ const CircleProgressBar = ({ - {status === 1 ? "Charging" : "Discharging"} + {status ? BMS_STATE_LABELS[status as BmsState] : "Unknown"} diff --git a/constants/config.ts b/constants/config.ts index 8082c3a..dd56219 100644 --- a/constants/config.ts +++ b/constants/config.ts @@ -10,6 +10,7 @@ import { BASE_URL, ENV } from "@env"; import InfoIcon from "../assets/icons/error.svg"; import WarningIcon from "../assets/icons/warning.svg"; import DangerIcon from "../assets/icons/danger.svg"; +import type { BmsState } from "./types"; export default { ENV, @@ -66,13 +67,6 @@ export const MESSAGES = { }, }; -export const AUTH_STATUSES = { - IDLE: "Idle", - LOADING: "Loading", - SUCCESS: "Success", - FAILED: "Failed", -} as const; - export const ALERT_STYLES = { info: { backgroundColor: "#E5EBFD", @@ -97,4 +91,8 @@ export const SUPPORT = { EMAIL_BODY: "Hello,\n\nI need assistance with...", }; -export type StatusType = (typeof AUTH_STATUSES)[keyof typeof AUTH_STATUSES]; +export const BMS_STATE_LABELS: Record = { + 0: "Idle", + 1: "Charging", + [-1]: "Discharging", +}; diff --git a/constants/types.ts b/constants/types.ts new file mode 100644 index 0000000..92ee4a7 --- /dev/null +++ b/constants/types.ts @@ -0,0 +1,12 @@ +export const BMS_STATES = [0, 1, -1] as const; + +export type BmsState = (typeof BMS_STATES)[number]; + +export const AUTH_STATUSES = { + IDLE: "Idle", + LOADING: "Loading", + SUCCESS: "Success", + FAILED: "Failed", +} as const; + +export type StatusType = (typeof AUTH_STATUSES)[keyof typeof AUTH_STATUSES]; diff --git a/services/socket.ts b/services/socket.ts index 01898e1..3b7c1fb 100644 --- a/services/socket.ts +++ b/services/socket.ts @@ -1,6 +1,7 @@ import { io, Socket } from "socket.io-client"; import { store } from "../store"; import { updateTelemetry } from "../store/telemetrySlice"; +import { BmsState } from "@/constants/types"; const SERVER_URL = "http://dev.vec-tr.ai:8089/?dashboardId=deviceDashboardSocket&assetId=V16000868651064644504"; @@ -42,12 +43,26 @@ export const disconnectSocket = () => { }; const handleSocketData = (data: any) => { + console.log("..."); try { const SoH = data.dataSeries.assetData[0].bms[0].bmsSpecific.ivecSpecific.soh; const SoC = data?.dataSeries?.assetData?.[0]?.bms?.[0]?.batterySoc; - // console.log(SoC, SoH); - store.dispatch(updateTelemetry({ SoH, SoC })); + const currentMode = + data?.dataSeries?.assetData?.[0]?.bms?.[0]?.bmsSpecific?.ivecSpecific + ?.ivecStatus?.currentMode; + + let bms_state: BmsState | null = null; + + if (currentMode === 0) { + bms_state = 0; + } else if (currentMode === 1) { + bms_state = -1; + } else if (currentMode === 2) { + bms_state = 1; + } + + store.dispatch(updateTelemetry({ SoH, SoC, chargingState: bms_state })); } catch (err) { console.error("Error handling socket data:", err); }