// component/chargingPage/chargingPenaltyComponent.tsx
import { View, Text, ScrollView, StyleSheet, Image, ActivityIndicator } from 'react-native';
import React, { useEffect, useState } from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import NormalButton from '../global/normal_button';
import ExpectedFeeBox from '../global/expectedFeeBox';
import OtherInformationBox from '../global/otherInformationBox';
import { BatteryLogoSvg, TimeClockLogoSvg, WarningTriangleLogoSvg } from '../global/SVG';
import { router } from 'expo-router';
import { useTranslation } from '../../util/hooks/useTranslation';
const IdlingGreyBox = ({ t }: { t: Function }) => {
return (
{t('charging_penalty.idling')}
{t('charging_penalty.remaining_idling_time')}
01:55
{t('charging_penalty.confirm_charging')}
);
};
const ChargingPenaltyPageComponent = ({ data }) => {
const { t } = useTranslation();
const [isIdling, setIsIdling] = React.useState(false);
const reservationData = Array.isArray(data) ? data[0] : data;
const [loading, setLoading] = useState(false);
//用來計充電歷時 //用來計充電歷時 //用來計充電歷時 //用來計充電歷時 //用來計充電歷時
const [timeSince, setTimeSince] = useState('');
useEffect(() => {
const updateTimeSince = () => {
if (reservationData && reservationData.actual_start_time) {
setTimeSince(timeSinceBooking(reservationData.actual_start_time) || t('common.calculating'));
} else {
setTimeSince(t('common.calculating'));
}
};
updateTimeSince();
// Update every minute
const intervalId = setInterval(updateTimeSince, 60000);
// Cleanup interval on component unmount
return () => clearInterval(intervalId);
}, [reservationData]);
function timeSinceBooking(timeString: any) {
if (timeString) {
const startTime = new Date(timeString);
const now = new Date();
const diffInMilliseconds = now - startTime;
const diffInMinutes = Math.floor(diffInMilliseconds / (1000 * 60));
if (diffInMinutes < 1) {
return '< 1 m';
} else {
return `${diffInMinutes} m${diffInMinutes !== 1 ? 's' : ''}`;
}
}
}
//用來計充電歷時 //用來計充電歷時 //用來計充電歷時 //用來計充電歷時 //用來計充電歷時
const PenaltyRedBox = () => {
const penalty_time = reservationData.actual_end_time;
return (
<>
{t('charging_penalty.in_penalty')}
{t('charging_penalty.penalty_duration')}:
{penaltyTime}
{t('charging_penalty.accumulated')}:
01:55
{t('charging_penalty.unlock_charger')}
);
};
//用來計算penalty
const [penaltyTime, setPenaltyTime] = useState('');
useEffect(() => {
const updatePenaltyTime = () => {
if (reservationData.actual_end_time) {
setPenaltyTime(calculatePenaltyTime(reservationData.actual_end_time) || t('common.calculating'));
} else {
setPenaltyTime(t('charging_penalty.not_finished'));
}
};
updatePenaltyTime();
// Update every 30 seconds
const intervalId = setInterval(updatePenaltyTime, 30000);
// Cleanup interval on component unmount
return () => clearInterval(intervalId);
}, [reservationData.actual_end_time]);
function calculatePenaltyTime(endTimeString: any) {
if (endTimeString) {
const endTime = new Date(endTimeString);
const graceEndTime = new Date(endTime.getTime() + 15 * 60000); // Add 15 minutes
const now = new Date();
const diffInMilliseconds = now - graceEndTime;
const diffInMinutes = Math.floor(diffInMilliseconds / (1000 * 60));
if (diffInMinutes < 0) {
return '0 m'; // No penalty yet
} else if (diffInMinutes === 0) {
return '< 1 m';
} else {
return `${diffInMinutes} m ${diffInMinutes !== 1 ? 's' : ''}`;
}
}
}
if (loading) {
return (
{t('common.loading')}
);
}
return (
{t('charging_penalty.charging_completed')}
{reservationData.car.car_brand.name} {reservationData.car.car_type.name}
{t('charging_penalty.charged')}
{reservationData.Soc}%
{t('charging_penalty.charging_duration')}
{timeSince}
{isIdling ? (
) : (
)}
{
router.push('chargingPage');
}}
title={
{t('charging_penalty.finish_charging')}
}
/>
{t('charging_penalty.view_idling_status')}}
onPress={() => setIsIdling((prevState) => !prevState)}
/>
);
};
export default ChargingPenaltyPageComponent;
const styles = StyleSheet.create({
grayColor: {
color: '#888888'
},
greenColor: {
color: '#02677D'
},
text: {
fontWeight: '300',
color: '#000000'
},
warningLightText: {
color: 'white',
fontSize: 15,
fontWeight: '400'
},
warningBoldText: {
color: 'white',
fontSize: 20,
fontWeight: '700'
}
});