312 lines
11 KiB
JavaScript
312 lines
11 KiB
JavaScript
import * as React from 'react';
|
|
import {useState, useEffect} from 'react';
|
|
import { SafeAreaView, ScrollView, Button, View, Text, StyleSheet, TextInput, Modal, TouchableOpacity, ActivityIndicator } from 'react-native';
|
|
import CustomHeader from '../../../components/header.js';
|
|
import Theme from '../../../components/theme.style.js';
|
|
import Icon from '../../../components/icons';
|
|
import DB from '../../../components/storage';
|
|
import REQUEST from '../../../components/api';
|
|
|
|
import {Divider} from 'react-native-elements';
|
|
import SlidingUpPanel from 'rn-sliding-up-panel';
|
|
import Geolocation from '@react-native-community/geolocation';
|
|
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
|
|
|
|
class Stations extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
loading: false,
|
|
panel: null,
|
|
showPanel: false,
|
|
session: null,
|
|
stations: [],
|
|
initialRegion :{
|
|
latitude: 14.599512,
|
|
longitude: 120.984222,
|
|
latitudeDelta: 0.0922,
|
|
longitudeDelta: 0.0421,
|
|
},
|
|
mylocation: {}
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.init()
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
fetch = async (coords, successCallBack, errorCallback) => {
|
|
this.state.panel.hide()
|
|
let session = await DB.session()
|
|
this.setState({ session: session })
|
|
REQUEST('gas_stations', 'post', {
|
|
Authorization: session.token
|
|
}, {}, {
|
|
lcard_uuid: session.user.lcard_uuid,
|
|
longitude: coords.longitude,
|
|
latitude: coords.latitude
|
|
}, (success) => {
|
|
successCallBack(success)
|
|
}, (error) => {
|
|
errorCallback(error)
|
|
})
|
|
}
|
|
|
|
updateRegion = () => {
|
|
if(this.state.stations.length > 0){
|
|
let region = this.state.initialRegion
|
|
region.latitude = parseFloat(this.state.stations[0].latitude)
|
|
region.longitude = parseFloat(this.state.stations[0].longitude)
|
|
region.latitudeDelta = 0.00700
|
|
region.longitudeDelta = 0.00100
|
|
this.setState({ initialRegion: region })
|
|
}
|
|
}
|
|
|
|
init = async () => {
|
|
this.setState({ loading: true })
|
|
Geolocation.getCurrentPosition(info => {
|
|
console.log(info)
|
|
this.fetch(info.coords, success => {
|
|
this.setState({ loading: false, stations: success.data, mylocation: info.coords })
|
|
this.state.panel.show()
|
|
this.state.updateRegion()
|
|
}, error => {
|
|
this.setState({ loading: false })
|
|
})
|
|
}, error => {
|
|
console.log(error)
|
|
this.setState({ loading: false })
|
|
})
|
|
}
|
|
|
|
renderStations = (data) => {
|
|
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 (
|
|
<View key={index}>
|
|
<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>
|
|
<View style={{flex: 0, justifyContent: 'center'}}>
|
|
<Icon.Ionicons name={station.favorite ? "md-heart" : "ios-heart-empty"} size={28} color={station.favorite ? "red" : Theme.colors.darkGray} />
|
|
</View>
|
|
</View>
|
|
<Divider style={{marginTop: 5, padding: 0, margin:0, width: Theme.screen.w}} />
|
|
</View>
|
|
)
|
|
})
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<SafeAreaView style={{flex: 1}}>
|
|
<CustomHeader title="Stations" menu={true} navigation={this.props.navigation} />
|
|
<View style={styles.mapContainer}>
|
|
<MapView
|
|
provider={PROVIDER_GOOGLE}
|
|
loadingEnabled={true}
|
|
style={styles.map}
|
|
showsUserLocation={true}
|
|
region={this.state.initialRegion}/>
|
|
</View>
|
|
<View style={{flex: 0, backgroundColor: '#fff', border: 1, margin: 15, height: 50, padding: 0, justifyContent: 'flex-start', alignItems: 'center', borderRadius: 15, elevation: 10}}>
|
|
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
|
|
<View style={{flex: 0, backgroundColor: '#fff', padding: 10, justifyContent: 'center'}}>
|
|
<Icon.Ionicons name="md-search" size={22} color={Theme.colors.darkGray} />
|
|
</View>
|
|
<View style={{flex: 5, backgroundColor: '#fff', justifyContent: 'center'}}>
|
|
<TextInput style={{fontSize: 17}} placeholder="Search for city" />
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={styles.panelInctiveContainer}>
|
|
<SlidingUpPanel
|
|
ref={c => this.setState({ panel: c })}
|
|
backdropOpacity={1}
|
|
allowDragging={true}
|
|
showBackdrop={false}
|
|
draggableRange={{top: Theme.screen.h / 2.35, bottom: Theme.screen.h / 1.96}}>
|
|
<View style={{flex: 1, alignItems: 'center', justifyContent: 'flex-start', backgroundColor: '#fff'}}>
|
|
<TouchableOpacity activeOpacity={1} onPress={() => this.setState({ showPanel: true })} style={{ width: '100%', height: 60, top: -70}}>
|
|
<View style={{flex: 1, flexDirection: 'row', backgroundColor: Theme.colors.lightGray, justifyContent: 'flex-start', padding: 20, alignItems: 'flex-start'}}>
|
|
<Text style={{flex: 4, color: Theme.colors.textPrimary, fontSize: 14}}>Unioil Stations found: {this.state.stations.length}</Text>
|
|
<View style={{flex: 0}}>{this.state.loading ? <ActivityIndicator color="gray" /> : null}</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
<ScrollView>
|
|
{this.renderStations(this.state.stations)}
|
|
<View style={{height: Theme.screen.h}}></View>
|
|
</ScrollView>
|
|
</View>
|
|
</SlidingUpPanel>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Stations
|
|
|
|
// export default function Stations(navigation) {
|
|
|
|
// const [loading, setloading] = useState(false)
|
|
// const [panel, setpanel] = useState(null)
|
|
// const [showPanel, setshowpanel] = useState(false)
|
|
// const [session, setsession] = useState(null)
|
|
// const [stations, setstations] = useState([])
|
|
// const [initialRegion, setinitialRegion] = useState({
|
|
// latitude: 14.599512,
|
|
// longitude: 120.984222,
|
|
// latitudeDelta: 0.0922,
|
|
// longitudeDelta: 0.0421,
|
|
// })
|
|
// const [mylocation, setmylocation] = useState({})
|
|
|
|
// const fetch = async () => {
|
|
// setloading(true)
|
|
// panel.hide()
|
|
// let session = await DB.session()
|
|
// await setsession(session)
|
|
// REQUEST('gas_stations', 'post', {
|
|
// Authorization: session.token
|
|
// }, {}, {
|
|
// lcard_uuid: session.user.lcard_uuid,
|
|
// longitude: mylocation.longitude,
|
|
// latitude: mylocation.latitude
|
|
// }, function(res){
|
|
// setloading(false)
|
|
// setstations(res.data)
|
|
// panel.show()
|
|
// updateRegion()
|
|
// }, function(e){
|
|
// console.log(e)
|
|
// setloading(false)
|
|
// })
|
|
// setloading(false)
|
|
// }
|
|
|
|
// const updateRegion = () => {
|
|
// if(stations.length > 0){
|
|
// let region = initialRegion
|
|
// region.latitude = parseFloat(stations[0].latitude)
|
|
// region.longitude = parseFloat(stations[0].longitude)
|
|
// region.latitudeDelta = 0.00700
|
|
// region.longitudeDelta = 0.00100
|
|
// setinitialRegion(region)
|
|
// }
|
|
// }
|
|
|
|
// const init = async () => {
|
|
// Geolocation.getCurrentPosition(info => setmylocation(info.coords) );
|
|
// // if(!mylocation.accuracy){
|
|
// // alert("Location is disabled")
|
|
// // return
|
|
// // }
|
|
// fetch()
|
|
// }
|
|
|
|
// useEffect(() => {
|
|
// init()
|
|
// }, [])
|
|
|
|
// return (
|
|
// <SafeAreaView style={{flex: 1}}>
|
|
// <CustomHeader title="Stations" menu={true} navigation={navigation} />
|
|
|
|
// <View style={styles.mapContainer}>
|
|
// <MapView
|
|
// provider={PROVIDER_GOOGLE}
|
|
// loadingEnabled={true}
|
|
// style={styles.map}
|
|
// showsUserLocation={true}
|
|
// region={initialRegion}
|
|
// />
|
|
// </View>
|
|
|
|
// <View style={{flex: 0, backgroundColor: '#fff', border: 1, margin: 15, height: 50, padding: 0, justifyContent: 'flex-start', alignItems: 'center', borderRadius: 15, elevation: 10}}>
|
|
// <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
|
|
// <View style={{flex: 0, backgroundColor: '#fff', padding: 10, justifyContent: 'center'}}>
|
|
// <Icon.Ionicons name="md-search" size={22} color={Theme.colors.darkGray} />
|
|
// </View>
|
|
// <View style={{flex: 5, backgroundColor: '#fff', justifyContent: 'center'}}>
|
|
// <TextInput style={{fontSize: 17}} placeholder="Search for city" />
|
|
// </View>
|
|
// </View>
|
|
// </View>
|
|
|
|
// {/* <View style={ showPanel ? {...styles.panelActiveContainer} : {...styles.panelInctiveContainer}}> */}
|
|
// <View style={styles.panelInctiveContainer}>
|
|
// <SlidingUpPanel
|
|
// ref={c => setpanel(c)}
|
|
// backdropOpacity={1}
|
|
// allowDragging={true}
|
|
// showBackdrop={false}
|
|
// draggableRange={{top: Theme.screen.h / 2.35, bottom: Theme.screen.h / 1.96}}>
|
|
// <View style={{flex: 1, alignItems: 'center', justifyContent: 'flex-start', backgroundColor: '#fff'}}>
|
|
// <TouchableOpacity activeOpacity={1} onPress={() => setshowpanel(true)} style={{ width: '100%', height: 60, top: -70}}>
|
|
// <View style={{flex: 1, flexDirection: 'row', backgroundColor: Theme.colors.lightGray, justifyContent: 'flex-start', padding: 20, alignItems: 'flex-start'}}>
|
|
// <Text style={{flex: 4, color: Theme.colors.textPrimary, fontSize: 14}}>Unioil Stations found: {stations.length}</Text>
|
|
// <View style={{flex: 0}}>{loading ? <ActivityIndicator color="gray" /> : null}</View>
|
|
// </View>
|
|
// </TouchableOpacity>
|
|
// <ScrollView>
|
|
// {renderStations(stations)}
|
|
// <View style={{height: Theme.screen.h}}></View>
|
|
// </ScrollView>
|
|
|
|
// </View>
|
|
// </SlidingUpPanel>
|
|
// </View>
|
|
// </SafeAreaView>
|
|
// );
|
|
// }
|
|
|
|
const styles = StyleSheet.create({
|
|
mapContainer: {
|
|
...StyleSheet.absoluteFillObject,
|
|
flex: 1,
|
|
marginTop: 50,
|
|
height: Theme.screen.h - 15,
|
|
width: Theme.screen.w,
|
|
justifyContent: 'flex-end',
|
|
alignItems: 'center',
|
|
},
|
|
map: {
|
|
...StyleSheet.absoluteFillObject,
|
|
},
|
|
panelActiveContainer: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-end',
|
|
backgroundColor:'transparent',
|
|
top: Theme.screen.h / 2.35
|
|
},
|
|
panelInctiveContainer: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-end',
|
|
backgroundColor:'red',
|
|
height: 40,
|
|
top: Theme.screen.h / 1.9
|
|
}
|
|
});
|