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';
const IdlingGreyBox = () => {
return (
待機中..
剩餘待機時間:
01:55
請於下方確認完成充電以免進入罰款時間
);
};
const ChargingPenaltyPageComponent = ({ data }) => {
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) || '計算中...');
} else {
setTimeSince('計算中...');
}
};
updateTimeSince();
// Update every minute
const intervalId = setInterval(updateTimeSince, 60000);
// Cleanup interval on component unmount
return () => clearInterval(intervalId);
}, [reservationData]);
function timeSinceBooking(timeString) {
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 (
<>
罰款中
罰款時間歷時:
{penaltyTime}
累積:
01:55
請於下方確認完成充電以解鎖
);
};
//用來計算penalty
const [penaltyTime, setPenaltyTime] = useState('');
useEffect(() => {
const updatePenaltyTime = () => {
if (reservationData.actual_end_time) {
setPenaltyTime(calculatePenaltyTime(reservationData.actual_end_time) || '計算中...');
} else {
setPenaltyTime('尚未結束充電');
}
};
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 (
Loading...
);
}
return (
已完成充電
{reservationData.car.car_brand.name} {reservationData.car.car_type.name}
已充電
{reservationData.Soc}%
充電歷時
{timeSince}
{isIdling ? (
) : (
)}
{
router.push('chargingPage');
}}
title={
完成充電
}
/>
觀看閒置狀態頁面}
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'
}
});