|
|
@@ -20,25 +20,53 @@ import { SafeAreaView } from 'react-native-safe-area-context';
|
|
|
import { chargeStationService } from '../../service/chargeStationService';
|
|
|
import * as Location from 'expo-location';
|
|
|
import { calculateDistance } from '../global/distanceCalculator';
|
|
|
+import { ChargingDetails, Remark, PriceWeek, Special } from '../../service/type/chargeStationType';
|
|
|
|
|
|
interface ChargingStationTabViewProps {
|
|
|
titles: string[];
|
|
|
+ pricemodel_id: string;
|
|
|
}
|
|
|
-interface StationCoordinates {
|
|
|
- StationLat: number;
|
|
|
- StationLng: number;
|
|
|
+interface ChargingPeriod{
|
|
|
+ event_name: string;
|
|
|
+ price: number;
|
|
|
+ from: string;
|
|
|
+ to: string;
|
|
|
}
|
|
|
-
|
|
|
-const ChargingStationTabView: React.FC<ChargingStationTabViewProps> = ({ titles }) => {
|
|
|
+const ChargingStationTabView: React.FC<ChargingStationTabViewProps> = ({ titles, pricemodel_id }) => {
|
|
|
const layout = useWindowDimensions();
|
|
|
+ const [list, setList] = useState<ChargingPeriod []>([])
|
|
|
+ const [strWeek, setStrWeek] = useState<string>('')
|
|
|
+ useEffect(() => {
|
|
|
+ chargeStationService.fetchElectricityPrice(pricemodel_id || 'a').then(res => {
|
|
|
+ const date = new Date();
|
|
|
+ const str = (date.toLocaleString('en-US', { weekday: 'short' })).toLowerCase();
|
|
|
+ setStrWeek(date.toLocaleString('zh', { weekday: 'long' }))
|
|
|
+ const newList = [] as ChargingPeriod[]
|
|
|
+ res?.forEach((item) => {
|
|
|
+ const obj = item[str as keyof PriceWeek]
|
|
|
+ newList.push({event_name: item.event_name, price: obj.price, from: obj.from, to: obj.to})
|
|
|
+ setList(newList)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }, [pricemodel_id])
|
|
|
|
|
|
//tab 1
|
|
|
const FirstRoute = () => (
|
|
|
<ScrollView style={{ flex: 1, marginHorizontal: '5%' }}>
|
|
|
- <Text className="text-lg" style={styles.text}>
|
|
|
- 由於充電站車流眾多， 敬請客戶務必於預約時間的十五分鐘內到達充電站。
|
|
|
- 若客戶逾時超過15分鐘，系統將視作自動放棄預約，客戶需要重新預約一次。 本公司有權保留全數費用，恕不退還。
|
|
|
- </Text>
|
|
|
+ <View>
|
|
|
+ <View className='w-full flex-row justify-between mt-4 pr-10'>
|
|
|
+ <Text style={styles.leftLable}>時段</Text>
|
|
|
+ <Text style={styles.rightLable}>價格(/度)</Text>
|
|
|
+ </View>
|
|
|
+ {
|
|
|
+ list.map((item, index) => (
|
|
|
+ <View key={index} className='w-full flex-row justify-between mt-3 pr-14'>
|
|
|
+ <Text style={styles.leftLable}>{item.event_name}({item.from}-{item.to}):</Text>
|
|
|
+ <Text style={styles.rightLable}>${item.price}</Text>
|
|
|
+ </View>
|
|
|
+ ))
|
|
|
+ }
|
|
|
+ </View>
|
|
|
</ScrollView>
|
|
|
);
|
|
|
|
|
|
@@ -104,22 +132,15 @@ const ResultDetailPageComponent = () => {
|
|
|
const chargeStationID = params.chargeStationID as string;
|
|
|
const chargeStationName = params.chargeStationName as string;
|
|
|
const chargeStationAddress = params.chargeStationAddress as string;
|
|
|
- const availableConnectorsFromParams = params.availableConnectors;
|
|
|
+ const pricemodel_id = params.pricemodel_id as string;
|
|
|
const imageSourceProps = params.imageSource;
|
|
|
const stationLng = params.stationLng as string;
|
|
|
const stationLat = params.stationLat as string;
|
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
const [imageSource, setImageSource] = useState();
|
|
|
- // const chargeStationLat = params.chargeStationLat as string;
|
|
|
- // const chargeStationLng = params.chargeStationLng as string;
|
|
|
const [currentLocation, setCurrentLocation] = useState<Location.LocationObject | null>(null);
|
|
|
- const [distance, setDistance] = useState<string | null>(null);
|
|
|
- const [coordinates, setCoordinates] = useState<StationCoordinates | null>(null);
|
|
|
const [price, setPrice] = useState('');
|
|
|
- const [availableConnectors, setAvailableConnectors] = useState<number | null>(
|
|
|
- availableConnectorsFromParams ? Number(availableConnectorsFromParams) : null
|
|
|
- );
|
|
|
- const [newAvailableConnectors, setNewAvailableConnectors] = useState([]);
|
|
|
+ const [newAvailableConnectors, setNewAvailableConnectors] = useState<any>([]);
|
|
|
useEffect(() => {
|
|
|
const imgObj = imageSourceProps? {uri: imageSourceProps} : require('../../assets/dummyStationPicture.png')
|
|
|
setImageSource(imgObj);
|
|
|
@@ -304,7 +325,7 @@ const ResultDetailPageComponent = () => {
|
|
|
<Text className="text-xl pb-2 mx-[5%]" style={styles.text}>
|
|
|
充電站資訊
|
|
|
</Text>
|
|
|
- <ChargingStationTabView titles={['預約充電事項', '其他']} />
|
|
|
+ <ChargingStationTabView titles={['收費詳情', '其他']} pricemodel_id={pricemodel_id} />
|
|
|
</View>
|
|
|
</ScrollView>
|
|
|
</SafeAreaView>
|
|
|
@@ -317,5 +338,12 @@ const styles = StyleSheet.create({
|
|
|
text: {
|
|
|
fontWeight: 300,
|
|
|
color: '#000000'
|
|
|
- }
|
|
|
+ },
|
|
|
+ leftLable: {
|
|
|
+ fontSize: 17,
|
|
|
+ color:'#000000',
|
|
|
+ },
|
|
|
+ rightLable: {
|
|
|
+ fontSize: 17
|
|
|
+ },
|
|
|
});
|
