234 lines
10 KiB
JavaScript
234 lines
10 KiB
JavaScript
import React from 'react';
|
|
import { useState, useEffect, useRef } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import {
|
|
Text,
|
|
View,
|
|
TouchableOpacity,
|
|
Linking,
|
|
Platform,
|
|
Alert
|
|
} from 'react-native';
|
|
import {
|
|
NavigationApps,
|
|
actions,
|
|
googleMapsTravelModes,
|
|
mapsTravelModes
|
|
} from "../../../../components/navigationapps";
|
|
import { AdjustableText } from '../../../../components/text';
|
|
import Theme from '../../../../components/theme.style.js';
|
|
import Icon from '../../../../components/icons';
|
|
import DB from '../../../../components/storage';
|
|
import REQUEST from '../../../../components/api';
|
|
import BottomSheet from '@gorhom/bottom-sheet';
|
|
import { ScrollView } from 'react-native-gesture-handler';
|
|
|
|
const styles = {
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#f8f9fa',
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
},
|
|
panel: {
|
|
flex: 1,
|
|
backgroundColor: 'white',
|
|
position: 'relative'
|
|
},
|
|
panelHeader: {
|
|
height: 90,
|
|
backgroundColor: Theme.colors.lightGray,
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
}
|
|
}
|
|
|
|
const renderStationPanel = (props) => {
|
|
|
|
const [updateFavorite, setUpdateFavorite] = useState(0)
|
|
const [updateFavoriteVal, setUpdateFavoriteVal] = useState(false)
|
|
const bottomSheetRef = useRef(null);
|
|
const snapPoints = ['50%', '60%'];
|
|
|
|
useEffect(() => {
|
|
if (props.visible) {
|
|
bottomSheetRef.current?.expand();
|
|
} else {
|
|
bottomSheetRef.current?.collapse();
|
|
}
|
|
}, [props.visible]);
|
|
|
|
const renderStationDetails = (station, onPress) => {
|
|
let stars = [1, 2, 3, 4, 5].map((star, i) => {
|
|
let name = station.stars >= star ? "star" : "staro"
|
|
let mgn = i > 0 ? 5 : 0
|
|
return (
|
|
<Icon.AntDesign name={name} style={{ marginLeft: mgn }} color={Theme.colors.yellow} size={20} key={i} />
|
|
)
|
|
})
|
|
|
|
return (
|
|
<TouchableOpacity activeOpacity={1} style={{ backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.background : Theme.colors.white }}>
|
|
<View style={{ flex: 0, padding: 15, flexDirection: 'row' }}>
|
|
<View style={{ flex: 5 }}>
|
|
<Text style={{ fontFamily: 'arial', color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, padding: 5, width: '90%', fontSize: 15 }}>{station.address}</Text>
|
|
<View style={{ padding: 5, width: '90%', flexDirection: 'row' }}>
|
|
<Text style={{ fontFamily: 'arial', color: '#6887ed', fontSize: 14 }}>Contact: </Text>
|
|
<View style={{ fontFamily: 'arial', color: Theme.colors.textPrimary, fontSize: 14 }}>
|
|
{station.contact_numbers.map((num, i) => {
|
|
return (
|
|
<TouchableOpacity key={i} onPress={() => {
|
|
let url = Platform.OS == 'ios' ? 'telprompt:' : 'tel:'
|
|
Linking.canOpenURL(url).then(supported => {
|
|
if (!supported) {
|
|
alert("Call Not Supported")
|
|
} else {
|
|
Alert.alert("Call Customer Service", '\n' + "You will be redirected to the dialer to call Unioil Customer Service", [
|
|
{
|
|
text: 'Cancel',
|
|
style: 'cancel',
|
|
}, {
|
|
text: 'OK', onPress: () => Linking.openURL(`${url}${num}`)
|
|
}
|
|
],
|
|
{ cancelable: true })
|
|
return true
|
|
}
|
|
}).catch(err => {
|
|
console.error('An error occurred', err)
|
|
})
|
|
}}>
|
|
<Text style={{ color: "darkblue" }}>{num}</Text>
|
|
</TouchableOpacity>)
|
|
})}
|
|
</View>
|
|
</View>
|
|
<Text style={{ fontFamily: 'arial', color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, padding: 0, width: '90%', fontSize: 13 }}></Text>
|
|
<View style={{ flexDirection: 'row', paddingTop: 7 }}>
|
|
{stars}
|
|
</View>
|
|
</View>
|
|
{updateFavorite == 0 ?
|
|
<TouchableOpacity
|
|
style={{ flex: 0, justifyContent: 'center' }}
|
|
onPress={() => {
|
|
updateFavoriteCall(props.stationId, station, props.onload)
|
|
}}
|
|
>
|
|
<Icon.FontAwesome
|
|
name={station.favorite ? 'heart' : 'heart-o'}
|
|
size={28}
|
|
color={station.favorite ? 'red' : Theme.colors.darkGray}
|
|
/>
|
|
</TouchableOpacity> :
|
|
<TouchableOpacity onPress={() => updateFavoriteCall(props.stationId, station, props.onload)} style={{ flex: 0, justifyContent: 'center' }}>
|
|
<Icon.FontAwesome
|
|
name={updateFavoriteVal ? 'heart' : 'heart-o'}
|
|
size={28}
|
|
color={updateFavoriteVal ? 'red' : Theme.colors.darkGray}
|
|
/>
|
|
</TouchableOpacity>}
|
|
</View>
|
|
|
|
<View style={{ backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkerGray : Theme.colors.lightGray }}>
|
|
<View style={{ flexDirection: 'row', paddingVertical: 15, paddingHorizontal: 15 }}>
|
|
<Text style={{ flex: 1, color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary }}>Fuel Prices</Text>
|
|
<Text style={{ flex: 3, alignItems: 'flex-start', color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontStyle: 'italic', fontSize: 12 }}>Last Update: {station.latest_update}</Text>
|
|
</View>
|
|
</View>
|
|
{
|
|
station.fuel_prices.map((data, index) => {
|
|
return (
|
|
<View key={index} style={{ flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 15, paddingVertical: 15, borderBottomWidth: .3, borderColor: Theme.colors.searchGray }}>
|
|
<AdjustableText style={{ color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary }}>{data ? data.fuel_name : ''}</AdjustableText>
|
|
<AdjustableText style={{ color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, color: Theme.colors.primary }}>₱ {data.price}</AdjustableText>
|
|
</View>
|
|
)
|
|
})
|
|
}
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
|
|
const updateFavoriteCall = async (id, city, onload) => {
|
|
let session = await DB.session()
|
|
let urlTask;
|
|
let method;
|
|
if (updateFavorite == 0) {
|
|
urlTask = city.favorite ? "station_delete_favorite" : "station_add_favorite"
|
|
method = city.favorite ? "delete" : "get"
|
|
} else {
|
|
urlTask = updateFavoriteVal ? "station_delete_favorite" : "station_add_favorite"
|
|
method = updateFavoriteVal ? "delete" : "get"
|
|
}
|
|
onload(true)
|
|
REQUEST(urlTask, method, {
|
|
Authorization: session.token
|
|
}, {
|
|
noID: true,
|
|
value: id
|
|
}, {}, function (res) {
|
|
setUpdateFavorite(1)
|
|
onload(false)
|
|
if (updateFavorite == 0) {
|
|
setUpdateFavoriteVal(city.favorite ? false : true)
|
|
} else {
|
|
setUpdateFavoriteVal(updateFavoriteVal ? false : true)
|
|
}
|
|
}, function (err) {
|
|
Alert.alert("Information", `\n${err.message}`);
|
|
onload(false)
|
|
}, "Favorite", city.favorite ? "Delete" : "Update")
|
|
}
|
|
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<BottomSheet
|
|
ref={bottomSheetRef}
|
|
snapPoints={snapPoints}
|
|
index={0}
|
|
>
|
|
<View style={[styles.panelHeader, { backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkerGray : Theme.colors.lightGray }]}>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'center', padding: 15 }}>
|
|
<Text numberOfLines={1} style={{ flex: 1, paddingRight: 40, paddingTop: 17, justifyContent: 'center', color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.darkGray, fontSize: 16, fontWeight: 'bold' }}>
|
|
{props.data.name}
|
|
</Text>
|
|
<View style={{ flex: 0, justifyContent: 'center' }}>
|
|
<TouchableOpacity onPress={() => { }} activeOpacity={1}>
|
|
<View style={{ width: 60, justifyContent: 'center', alignItems: 'center', height: 60, borderRadius: 30, backgroundColor: Theme.colors.primary, elevation: 5 }}>
|
|
{(props.data && props.data.address != undefined && props.data.address != "") ?
|
|
<NavigationApps
|
|
iconSize={30}
|
|
row
|
|
modalVisible={true}
|
|
viewMode="sheet"
|
|
actionSheetBtnCloseTitle="Cancel"
|
|
actionSheetBtnOpenTitle={<Icon.FontAwesome name="location-arrow" color="#fff" size={25} />}
|
|
actionSheetTitle="Choose an application to view the route"
|
|
address={props.data.address} // address to navigate by for all apps
|
|
waze={{ address: props.data.address, lat: props.data.latitude, lon: props.data.longitude, action: actions.navigateByLatAndLon }} // specific settings for waze
|
|
googleMaps={{ address: props.data.address, lat: props.data.latitude, lon: props.data.longitude, action: actions.navigateByAddress, travelMode: googleMapsTravelModes.driving }} // specific settings for google maps
|
|
maps={{ address: props.data.address, lat: props.data.latitude, lon: props.data.longitude, action: actions.navigateByAddress, travelMode: mapsTravelModes.driving }} // specific settings for maps
|
|
/> : null}
|
|
</View>
|
|
<Text style={{ color: Theme.colors.primary, fontSize: 11, alignSelf: 'center', marginTop: 5, }}>Directions</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<ScrollView style={{ flex: 1 }}>
|
|
{renderStationDetails(props.data, props.onClick)}
|
|
</ScrollView>
|
|
</BottomSheet>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(renderStationPanel);
|