123 lines
4.6 KiB
JavaScript
123 lines
4.6 KiB
JavaScript
import React from 'react';
|
|
import {useState, useEffect} from 'react';
|
|
import {ScrollView, StyleSheet, Text, View, Dimensions, Button, Image, TextInput, TouchableOpacity, ActivityIndicator} from 'react-native';
|
|
import Theme from '../../../../components/theme.style.js';
|
|
import Assets from '../../../../components/assets.manager.js';
|
|
import Icon from '../../../../components/icons';
|
|
import DB from '../../../../components/storage';
|
|
import REQUEST from '../../../../components/api';
|
|
import {Divider} from 'react-native-elements';
|
|
import BottomSheet from 'reanimated-bottom-sheet'
|
|
|
|
import Geolocation from '@react-native-community/geolocation';
|
|
import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';
|
|
|
|
const styles = {
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#f8f9fa',
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
},
|
|
panel: {
|
|
flex: 1,
|
|
backgroundColor: 'white',
|
|
position: 'relative'
|
|
},
|
|
panelHeader: {
|
|
height: 60,
|
|
backgroundColor: Theme.colors.lightGray,
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
}
|
|
}
|
|
|
|
const {height} = Dimensions.get('window')
|
|
|
|
const renderStations = (data, onPress, onUpdateFavorite) => {
|
|
return data.map((station, index) => {
|
|
let stars = [1,2,3,4,5].map((star, i) => {
|
|
let name = station.stars >= star ? "star" : "staro"
|
|
let mgn = index > 0 ? 5 : 0
|
|
return (
|
|
<TouchableOpacity key={i}>
|
|
<Icon.AntDesign name={name} style={{marginLeft: mgn}} color={Theme.colors.yellow} size={20} />
|
|
</TouchableOpacity>)
|
|
})
|
|
return (
|
|
<TouchableOpacity key={index} activeOpacity={1} onPress={() => onPress(station) || null} key={index} style={{}}><View style={{flex: 0, padding: 15, flexDirection: 'row'}}>
|
|
<View style={{flex: 5}}>
|
|
<Text style={{fontSize: 16, padding: 5, color: Theme.colors.textPrimary}}>{station.name}</Text>
|
|
<Text style={{color: Theme.colors.textPrimary, padding: 5, width: '90%', fontSize: 13}}>{station.address}</Text>
|
|
<View style={{flexDirection: 'row', paddingTop: 7}}>
|
|
{stars}
|
|
</View>
|
|
</View>
|
|
<TouchableOpacity onPress={() => updateFavorite(station, index, onUpdateFavorite)} style={{flex: 0, justifyContent: 'center'}}>
|
|
<Icon.Ionicons name={station.favorite ? "md-heart" : "ios-heart-empty"} size={28} color={station.favorite ? "red" : Theme.colors.darkGray} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
<Divider style={{marginTop: 5, padding: 0, margin:0, width: Theme.screen.w}} /></TouchableOpacity>
|
|
)
|
|
})
|
|
}
|
|
|
|
const updateFavorite = async (city, index, callback) => {
|
|
let session = await DB.session()
|
|
let urlTask = city.favorite ? "station_delete_favorite" : "station_add_favorite"
|
|
let method = city.favorite ? "delete" : "get"
|
|
console.log(urlTask, method)
|
|
REQUEST(urlTask, method, {
|
|
Authorization: session.token
|
|
}, {
|
|
noID: true,
|
|
value: city.station_uuid
|
|
}, {}, function(res){
|
|
console.log(res.message)
|
|
callback(index, city.favorite ? false : true)
|
|
}, function(error){
|
|
console.log(error)
|
|
})
|
|
}
|
|
|
|
export default function renderStationPanel(props){
|
|
|
|
const [panel, setpanel] = useState(null)
|
|
const [updatedFavorite, setupdatedfavorite] = useState(false)
|
|
const [updatedFavoriteIndex, setupdatedfavoriteindex] = useState(null)
|
|
|
|
useEffect(() => {
|
|
// console.log("Error has", props.error)
|
|
if(props.visible){
|
|
panel.show()
|
|
}
|
|
return setpanel(null)
|
|
}, [props.visible])
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<BottomSheet
|
|
snapPoints = {[450, 300, 0]}
|
|
renderContent = {() => renderStations(props.data, props.onClick, props.onUpdateFavorite)}
|
|
renderHeader = {() => {
|
|
return (
|
|
<View style={styles.panelHeader}>
|
|
<View style={{flexDirection: 'row', justifyContent: 'center', padding: 15}}>
|
|
<Text style={{flex: 4, padding: 5, color: Theme.colors.textPrimary, fontSize: 15}}>
|
|
{props.error ? "There was an error" : props.loading || props.data.length == 0 ? "Getting Nearby Stations" : "Unioil Stations found: " + props.data.length}
|
|
</Text>
|
|
<View style={{flex: 0, justifyContent: 'center'}}>
|
|
{props.error ?
|
|
<TouchableOpacity onPress={props.onError} activeOpacity={1}>
|
|
<Text style={{color: '#fff'}}>Try Again</Text>
|
|
</TouchableOpacity> : props.loading || props.data.length == 0 ? <ActivityIndicator color="gray" size={25} /> : null}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
}}
|
|
/>
|
|
</View>
|
|
)
|
|
}
|