380 lines
10 KiB
TypeScript
380 lines
10 KiB
TypeScript
import {
|
|
Pressable,
|
|
ScrollView,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
} from "react-native";
|
|
import { useTranslation } from "react-i18next";
|
|
import SemiCircleProgress from "../../components/home/SemiCircleProgress";
|
|
import { Text, View } from "react-native";
|
|
import { useNavigation } from "expo-router";
|
|
import { useEffect, useLayoutEffect, useState } from "react";
|
|
import { StatusBar } from "expo-status-bar";
|
|
import CustomerCareIcon from "../../assets/icons/customer-care.svg";
|
|
import ServiceReminderCard from "@/components/home/ServiceReminderCard";
|
|
import MetricCard from "@/components/home/MetricCard";
|
|
import PaymentDueCard from "@/components/home/PaymentDueCard";
|
|
import MapView, { Marker, PROVIDER_GOOGLE } from "react-native-maps";
|
|
import BatteryWarrantyCard from "@/components/home/BatteryWarrantyCars";
|
|
import CustomerSupportModal from "@/components/home/CustomerSupportModal";
|
|
import { useSelector } from "react-redux";
|
|
import { RootState } from "@/store";
|
|
import LocationOff from "@/assets/icons/location_off.svg";
|
|
import { Linking } from "react-native";
|
|
import { useRouter } from "expo-router";
|
|
import ProfileImage from "@/components/home/Profile";
|
|
import { calculateBearing, calculateDistance } from "@/utils/Map";
|
|
|
|
export default function HomeScreen() {
|
|
const { t } = useTranslation();
|
|
const navigation = useNavigation();
|
|
const [isSupportModalVisible, setIsSupportModalVisible] = useState(false);
|
|
const { SoC, SoH, chargingState, lat, lon, loading, error } = useSelector(
|
|
(state: RootState) => state.telemetry
|
|
);
|
|
const [prevPosition, setPrevPosition] = useState<{
|
|
lat: number;
|
|
lon: number;
|
|
} | null>(null);
|
|
const [bearing, setBearing] = useState<number>(0);
|
|
|
|
const step = 0.001;
|
|
useEffect(() => {
|
|
if (lat && lon) {
|
|
if (prevPosition) {
|
|
// Calculate bearing between prev and current position
|
|
const newBearing = calculateBearing(
|
|
prevPosition.lat,
|
|
prevPosition.lon,
|
|
lat,
|
|
lon
|
|
);
|
|
setBearing(newBearing);
|
|
}
|
|
setPrevPosition({ lat, lon }); // Update previous position
|
|
}
|
|
}, [lat, lon]);
|
|
|
|
useEffect(() => {
|
|
if (lat && lon) {
|
|
if (prevPosition) {
|
|
const distance = calculateDistance(
|
|
prevPosition.lat,
|
|
prevPosition.lon,
|
|
lat,
|
|
lon
|
|
);
|
|
if (distance > 5) {
|
|
// Only update bearing if moved >5 meters
|
|
const newBearing = calculateBearing(
|
|
prevPosition.lat,
|
|
prevPosition.lon,
|
|
lat,
|
|
lon
|
|
);
|
|
setBearing(newBearing);
|
|
}
|
|
}
|
|
setPrevPosition({ lat, lon });
|
|
}
|
|
}, [lat, lon]);
|
|
const router = useRouter();
|
|
|
|
useLayoutEffect(() => {
|
|
navigation.setOptions({
|
|
headerTitle: () => (
|
|
<View style={styles.headerTitleContainer}>
|
|
<Text style={styles.title}>Yatri - NBX 600</Text>
|
|
<Text style={styles.subtitle}>DL253C3602</Text>
|
|
</View>
|
|
),
|
|
headerRight: () => (
|
|
<View style={styles.rightContainer}>
|
|
<Pressable
|
|
style={styles.iconContainer}
|
|
onPress={() => {
|
|
console.log("Support Pressed");
|
|
setIsSupportModalVisible(true);
|
|
}}
|
|
>
|
|
<CustomerCareIcon />
|
|
</Pressable>
|
|
<Pressable
|
|
onPress={() => {
|
|
router.push("/user/profile");
|
|
}}
|
|
>
|
|
<ProfileImage
|
|
username="Vivek"
|
|
onClick={() => router.push("/user/profile")}
|
|
textSize={20}
|
|
boxSize={40}
|
|
/>
|
|
</Pressable>
|
|
</View>
|
|
),
|
|
});
|
|
}, [navigation]);
|
|
|
|
const openInGoogleMaps = () => {
|
|
const url = `https://www.google.com/maps/search/?api=1&query=${lat},${lon}`;
|
|
Linking.openURL(url).catch((err) =>
|
|
console.error("Failed to open Google Maps:", err)
|
|
);
|
|
};
|
|
|
|
return (
|
|
<View style={{ flex: 1, backgroundColor: "#F3F5F8" }}>
|
|
<StatusBar style="dark" />
|
|
<ScrollView contentContainerStyle={styles.container} style={{ flex: 1 }}>
|
|
<ServiceReminderCard
|
|
type="info"
|
|
message="Service will be due in 3 days"
|
|
subMessage="Service Reminder"
|
|
/>
|
|
<View style={styles.iconContainer}>
|
|
<SemiCircleProgress progress={SoC} status={chargingState} />
|
|
</View>
|
|
<View style={styles.metrics}>
|
|
<MetricCard heading={t("home.battery-health")} value={SoH} unit="%" />
|
|
<MetricCard
|
|
heading={t("home.total-distance")}
|
|
value={20009}
|
|
unit="km"
|
|
/>
|
|
</View>
|
|
<PaymentDueCard
|
|
label="Payment Due"
|
|
amount="$2,000"
|
|
onPress={() => {
|
|
alert("le is number pe bhej de 8685846459");
|
|
}}
|
|
/>
|
|
<View style={styles.map}>
|
|
{loading ? (
|
|
<View style={styles.errorContainer}>
|
|
<LocationOff />
|
|
<Text style={styles.errorText}>Fetching Location...</Text>
|
|
</View>
|
|
) : lat && lon ? (
|
|
<>
|
|
<View style={styles.mapContainer}>
|
|
<MapView
|
|
provider={PROVIDER_GOOGLE}
|
|
style={styles.mapStyle}
|
|
region={{
|
|
latitude: lat,
|
|
longitude: lon,
|
|
latitudeDelta: 0.0922,
|
|
longitudeDelta: 0.0421,
|
|
}}
|
|
>
|
|
<Marker
|
|
draggable
|
|
coordinate={{
|
|
latitude: lat,
|
|
longitude: lon,
|
|
}}
|
|
rotation={bearing}
|
|
anchor={{ x: 0.5, y: 0.5 }}
|
|
tracksViewChanges={false}
|
|
image={require("../../assets/images/marker.png")}
|
|
/>
|
|
</MapView>
|
|
</View>
|
|
<TouchableOpacity>
|
|
<Text
|
|
style={styles.viewLocationText}
|
|
onPress={openInGoogleMaps}
|
|
>
|
|
View Vehicle Location
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</>
|
|
) : (
|
|
<View style={styles.errorContainer}>
|
|
<LocationOff />
|
|
<Text style={styles.errorText}>Error fetching location</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
<BatteryWarrantyCard
|
|
totalWarrantyYears={8}
|
|
batteryPurchaseEpoch={Math.floor(
|
|
new Date("2023-06-30").getTime() / 1000
|
|
)}
|
|
/>
|
|
</ScrollView>
|
|
<CustomerSupportModal
|
|
visible={isSupportModalVisible}
|
|
onClose={() => setIsSupportModalVisible(false)}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const mapStyle = [
|
|
{ elementType: "geometry", stylers: [{ color: "#242f3e" }] },
|
|
{ elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
|
|
{ elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
|
|
{
|
|
featureType: "administrative.locality",
|
|
elementType: "labels.text.fill",
|
|
stylers: [{ color: "#d59563" }],
|
|
},
|
|
{
|
|
featureType: "poi",
|
|
elementType: "labels.text.fill",
|
|
stylers: [{ color: "#d59563" }],
|
|
},
|
|
{
|
|
featureType: "poi.park",
|
|
elementType: "geometry",
|
|
stylers: [{ color: "#263c3f" }],
|
|
},
|
|
{
|
|
featureType: "poi.park",
|
|
elementType: "labels.text.fill",
|
|
stylers: [{ color: "#6b9a76" }],
|
|
},
|
|
{
|
|
featureType: "road",
|
|
elementType: "geometry",
|
|
stylers: [{ color: "#38414e" }],
|
|
},
|
|
{
|
|
featureType: "road",
|
|
elementType: "geometry.stroke",
|
|
stylers: [{ color: "#212a37" }],
|
|
},
|
|
{
|
|
featureType: "road",
|
|
elementType: "labels.text.fill",
|
|
stylers: [{ color: "#9ca5b3" }],
|
|
},
|
|
{
|
|
featureType: "road.highway",
|
|
elementType: "geometry",
|
|
stylers: [{ color: "#746855" }],
|
|
},
|
|
{
|
|
featureType: "road.highway",
|
|
elementType: "geometry.stroke",
|
|
stylers: [{ color: "#1f2835" }],
|
|
},
|
|
{
|
|
featureType: "road.highway",
|
|
elementType: "labels.text.fill",
|
|
stylers: [{ color: "#f3d19c" }],
|
|
},
|
|
{
|
|
featureType: "transit",
|
|
elementType: "geometry",
|
|
stylers: [{ color: "#2f3948" }],
|
|
},
|
|
{
|
|
featureType: "transit.station",
|
|
elementType: "labels.text.fill",
|
|
stylers: [{ color: "#d59563" }],
|
|
},
|
|
{
|
|
featureType: "water",
|
|
elementType: "geometry",
|
|
stylers: [{ color: "#17263c" }],
|
|
},
|
|
{
|
|
featureType: "water",
|
|
elementType: "labels.text.fill",
|
|
stylers: [{ color: "#515c6d" }],
|
|
},
|
|
{
|
|
featureType: "water",
|
|
elementType: "labels.text.stroke",
|
|
stylers: [{ color: "#17263c" }],
|
|
},
|
|
];
|
|
|
|
const styles = StyleSheet.create({
|
|
errorText: {
|
|
color: "#565F70",
|
|
fontWeight: "400",
|
|
fontSize: 16,
|
|
textAlign: "center",
|
|
},
|
|
errorContainer: {
|
|
height: 255,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
backgroundColor: "#FCFCFC",
|
|
gap: 8,
|
|
},
|
|
viewLocationText: {
|
|
color: "#388E3C",
|
|
fontWeight: "600",
|
|
fontSize: 16,
|
|
textAlign: "center",
|
|
marginTop: 8,
|
|
},
|
|
map: {
|
|
padding: 12,
|
|
borderRadius: 10,
|
|
overflow: "hidden",
|
|
backgroundColor: "#fff",
|
|
},
|
|
mapContainer: {
|
|
height: 255,
|
|
},
|
|
mapStyle: {
|
|
width: "100%",
|
|
height: "100%",
|
|
borderRadius: 10,
|
|
},
|
|
metrics: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
backgroundColor: "#F3F5F8",
|
|
},
|
|
container: {
|
|
padding: 16,
|
|
gap: 16,
|
|
paddingBottom: 110,
|
|
},
|
|
iconContainer: {
|
|
backgroundColor: "#fff",
|
|
},
|
|
headerTitleContainer: {
|
|
flexDirection: "column",
|
|
backgroundColor: "#fff",
|
|
},
|
|
title: {
|
|
fontSize: 14,
|
|
color: "#6B7280",
|
|
fontWeight: "500",
|
|
},
|
|
subtitle: {
|
|
fontSize: 18,
|
|
color: "#111827",
|
|
fontWeight: "700",
|
|
},
|
|
rightContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
paddingRight: 16,
|
|
gap: 8,
|
|
backgroundColor: "#fff",
|
|
},
|
|
badge: {
|
|
backgroundColor: "#FEE2E2",
|
|
borderRadius: 20,
|
|
width: 30,
|
|
height: 30,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
badgeText: {
|
|
color: "#DC2626",
|
|
fontWeight: "700",
|
|
},
|
|
});
|