66 lines
No EOL
3.4 KiB
JavaScript
66 lines
No EOL
3.4 KiB
JavaScript
import { Dimensions, Image, Linking, Platform, Pressable, StyleSheet, Text, View } from 'react-native'
|
|
import React from 'react'
|
|
import GlobalApi from '@/app/misc/GlobalApi'
|
|
import AntDesign from '@expo/vector-icons/AntDesign';
|
|
import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
|
|
import { getFirestore } from "firebase/firestore";
|
|
import { app } from "../../misc/FirebaseConfig";
|
|
import { doc, setDoc, deleteDoc} from "firebase/firestore";
|
|
import { useUser } from '@clerk/clerk-expo';
|
|
|
|
const ItemList = ({place, isSave, markedSave}) => {
|
|
const placePhoto_Base_Url = 'https://places.googleapis.com/v1/'
|
|
const {user} = useUser();
|
|
const db = getFirestore(app);
|
|
const onSave = async(place) => {
|
|
await setDoc(doc(db, 'ev-save', (place.id).toString()), {
|
|
place: place,
|
|
email: user?.primaryEmailAddress?.emailAddress
|
|
});
|
|
markedSave();
|
|
};
|
|
const onRemoveSave = async(placeId) => {
|
|
await deleteDoc(doc(db, 'ev-save', placeId.toString()));
|
|
markedSave();
|
|
}
|
|
|
|
const onStartClick = () => {
|
|
const url = Platform.select({
|
|
ios: "maps:"+place?.location?.latitude+","+place?.location?.longitude+"?q="+place?.formattedAddress,
|
|
});
|
|
Linking.openURL(url);
|
|
}
|
|
|
|
|
|
return (
|
|
<View style={{width: Dimensions.get('screen').width *0.92, height: 280, backgroundColor: 'white', marginLeft: 10, marginVertical: 5 ,borderRadius: 5, flexDirection: 'column', justifyContent: 'space-between'}}>
|
|
{!isSave?
|
|
<Pressable onPress={() => onSave(place)}
|
|
style={{position: 'absolute', zIndex: 20, right: 0, margin: 10, width: 40, height: 40, backgroundColor: '#379777', alignItems: 'center', justifyContent: 'center', borderRadius: '50%'}}>
|
|
<AntDesign name="pluscircleo" size={30} color="white" />
|
|
</Pressable> :
|
|
<Pressable onPress={() => onRemoveSave(place.id)}
|
|
style={{position: 'absolute', zIndex: 20, right: 0, margin: 10, width: 40, height: 40, backgroundColor: '#379777', alignItems: 'center', justifyContent: 'center', borderRadius: '50%'}}>
|
|
<MaterialCommunityIcons name="map-marker-star" size={30} color="white" />
|
|
</Pressable>
|
|
}
|
|
<Image source={place?.photos?{uri:placePhoto_Base_Url+place.photos[0].name+"/media?key="+GlobalApi.API_KEY+"&maxHeightPx=500&maxWidthPx=500"}
|
|
: require('../../../assets/images/ev_images/EV.png')} style={{width: '100%', height: 120, objectFit: 'cover', borderTopLeftRadius: 5, borderTopRightRadius: 5}}/>
|
|
<View style={{padding: 10, flexDirection: 'column', justifyContent: 'space-between'}}>
|
|
<View>
|
|
<Text style={{fontSize: 20, fontWeight: 600, color: '#379777'}}>{place.displayName.text}</Text>
|
|
<Text style={{marginTop: 5, color: '#45474B', fontWeight: 600, fontSize: 15}}>Total chargers: {place?.evChargeOptions?.connectorCount}</Text>
|
|
<Text style={{marginVertical: 5, color: '#45474B', fontSize: 15}}>{place?.formattedAddress}</Text>
|
|
</View>
|
|
<Pressable onPress={() => onStartClick()}
|
|
style={{backgroundColor: '#379777', alignItems: 'center', justifyContent: 'center', padding: 5, marginTop: 10, borderRadius: 5}}>
|
|
<Text style={{color: 'white', fontSize: 18, fontWeight: 500}}>Start</Text>
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default ItemList
|
|
|
|
const styles = StyleSheet.create({}) |