599 lines
20 KiB
JavaScript
599 lines
20 KiB
JavaScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import {
|
|
SafeAreaView,
|
|
Text,
|
|
View,
|
|
Image,
|
|
TouchableOpacity,
|
|
Alert,
|
|
Linking,
|
|
AppState
|
|
} from 'react-native';
|
|
import RNLocation from 'react-native-location';
|
|
import Theme from '../../../components/theme.style.js';
|
|
import CustomHeader from '../../../components/header.js';
|
|
import Elements from '../../../components/elements.js';
|
|
import DB from '../../../components/storage';
|
|
import REQUEST from '../../../components/api';
|
|
import NetInfo from "../../../components/netstatus";
|
|
import MapFragment from './fragments/map.js';
|
|
import PanelFragment from './fragments/stationpanel.js';
|
|
import SearchFragment from './fragments/searchbar.js';
|
|
import Assets from '../../../components/assets.manager.js';
|
|
import CustomSafeArea from '../../../components/safeArea.component.js';
|
|
|
|
|
|
class Station extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
this.dataLoader = null
|
|
}
|
|
|
|
state = {
|
|
connected: false,
|
|
loading: false,
|
|
error: false,
|
|
session: null,
|
|
map: null,
|
|
stationsViaCity: [],
|
|
stations: [],
|
|
markers: [],
|
|
searchValue: "",
|
|
showpanel: null,
|
|
mylocation: {},
|
|
isSearched: false,
|
|
initialRegion: {
|
|
latitude: 14.599512,
|
|
longitude: 120.984222,
|
|
latitudeDelta: 15,
|
|
longitudeDelta: 11,
|
|
},
|
|
appState: AppState.currentState,
|
|
permissionLocation: false
|
|
}
|
|
|
|
componentDidMount() {
|
|
this._isMounted = true;
|
|
AppState.addEventListener('change', this._handleAppStateChange);
|
|
this.startTrackStation()
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
_handleAppStateChange = (nextAppState) => {
|
|
if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
|
|
RNLocation.requestPermission({
|
|
ios: "whenInUse", // or 'always'
|
|
}).then(granted => {
|
|
if(granted) {
|
|
this.init()
|
|
} else {
|
|
this.setState({ permissionLocation: false })
|
|
Alert.alert("Error", "Location GPS is disabled.")
|
|
}
|
|
})
|
|
}
|
|
this.setState({ appState: nextAppState });
|
|
}
|
|
|
|
fetch = async (location, successCallback, errorCallback) => {
|
|
if(!location) return false
|
|
this.setState({ loading: true })
|
|
let SESSION = await DB.session()
|
|
REQUEST('gas_stations', 'post', {
|
|
Authorization: SESSION.token
|
|
}, {}, {
|
|
lcard_uuid: SESSION.user.lcard_uuid,
|
|
longitude: location.longitude,
|
|
latitude: location.latitude
|
|
}, async (res) => {
|
|
successCallback(res)
|
|
}, (error) => {
|
|
errorCallback(error)
|
|
})
|
|
}
|
|
|
|
renderMarkers = (data) => {
|
|
if(data.length > 0) {
|
|
let datamap = data.map((station, index) => {
|
|
return {
|
|
_id: index,
|
|
latlng: {latitude: station.latitude, longitude: station.longitude},
|
|
station_uuid: station.station_uuid,
|
|
name: station.name,
|
|
address:station.address,
|
|
longitude: station.longitude,
|
|
latitude: station.latitude,
|
|
stars: station.stars,
|
|
favorite: station.favorite
|
|
}
|
|
})
|
|
this.setState({ markers: datamap })
|
|
}
|
|
}
|
|
|
|
goToRegion = (data) => {
|
|
if(!data) return
|
|
let initialRegion = {
|
|
latitude: parseFloat(data.latitude),
|
|
longitude: parseFloat(data.longitude),
|
|
latitudeDelta: 0.0922,
|
|
longitudeDelta: 0.0421
|
|
}
|
|
this.setState({ initialRegion: initialRegion })
|
|
}
|
|
|
|
navigate = (data) => {
|
|
console.log(this.props.app_theme)
|
|
this.props.navigation.navigate('StationDetails', {markers: this.state.markers, data: data, theme: this.props.app_theme, onBackPress: () => this.initLocationConfiguration(), location: this.state.mylocation})
|
|
}
|
|
|
|
startTrackStation = () => {
|
|
NetInfo.netstatus(isConnected => {
|
|
if(isConnected){
|
|
this.initLocationConfiguration()
|
|
} else {
|
|
Elements.nointernet2()
|
|
}
|
|
})
|
|
}
|
|
|
|
initLocationConfiguration = () => {
|
|
this.setState({ connected: true })
|
|
RNLocation.configure({
|
|
// iOS Only
|
|
activityType: "other",
|
|
allowsBackgroundLocationUpdates: false,
|
|
headingFilter: 1, // Degrees
|
|
headingOrientation: "portrait",
|
|
pausesLocationUpdatesAutomatically: false,
|
|
showsBackgroundLocationIndicator: false,
|
|
})
|
|
|
|
RNLocation.requestPermission({
|
|
ios: "whenInUse", // or 'always'
|
|
}).then(granted => {
|
|
if(granted) {
|
|
this.init()
|
|
} else {
|
|
this.setState({ permissionLocation: false })
|
|
Alert.alert("Error", "Location GPS is disabled.")
|
|
}
|
|
})
|
|
}
|
|
|
|
init = async () => {
|
|
this.setState({ permissionLocation: true })
|
|
RNLocation.getLatestLocation({ timeout: 20000 }).then(latestLocation => {
|
|
if(latestLocation != undefined) {
|
|
const coords = {longitude: latestLocation.longitude, latitude: latestLocation.latitude}
|
|
this.setState({ mylocation: coords, error: false })
|
|
this.goToRegion(coords)
|
|
this.fetch(coords, success => {
|
|
if(success.data){
|
|
this.setState({ showpanel: true, stations: success.data, loading: false })
|
|
this.renderMarkers(success?.data)
|
|
this.goToRegion(success?.data[0])
|
|
} else alert('Internal server error')
|
|
}, error => {
|
|
this.setState({ error: false })
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
stationViaCity = async (city) => {
|
|
this.setState({ searchValue: city.name, loading: true })
|
|
let SESSION = await DB.session()
|
|
REQUEST("gas_stations_city", "get", {
|
|
Authorization: SESSION.token
|
|
}, {
|
|
noID: true,
|
|
value: city.city_uuid
|
|
}, {}, (res) => {
|
|
if(res.data.length > 0){
|
|
this.setState({ error: false, showpanel: true, isSearched: true, loading: false, stationsViaCity: res.data })
|
|
this.goToRegion(res.data[0])
|
|
} else if(res.message == 'Empty') {
|
|
this.setState({ loading: false, isSearched: true, stationsViaCity: [] })
|
|
} else alert('Internal server error')
|
|
}, (error) => {
|
|
this.setState({ error: false })
|
|
})
|
|
}
|
|
|
|
getFavorites = async () => {
|
|
this.setState({ searchValue: "My Favorites", loading: true })
|
|
let SESSION = await DB.session()
|
|
REQUEST("station_favorites", "get", {
|
|
Authorization: SESSION.token
|
|
}, {}, {}, (res) => {
|
|
if(res.data){
|
|
this.setState({ error: false, showpanel: true, stationsViaCity: res.data, loading: false })
|
|
this.goToRegion(res.data[0])
|
|
} else alert('Internal server error')
|
|
}, (error) => {
|
|
this.setState({ loading: false })
|
|
})
|
|
}
|
|
|
|
render() {
|
|
if(!this.state.connected){
|
|
return (
|
|
<View style={{flex: 1}}>
|
|
<CustomHeader title="Stations" menu={true} navigation={this.props.navigation} />
|
|
<Elements.nointernet
|
|
message="No internet found. Please check your internet connection."
|
|
buttonText="Try Again"
|
|
onPress={() => this.startTrackStation()}
|
|
/>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
if(!this.state.permissionLocation){
|
|
return (
|
|
<View style={{flex: 1}}>
|
|
<CustomHeader title="Stations" menu={true} navigation={this.props.navigation} />
|
|
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', marginHorizontal: 8 }}>
|
|
<Image source={Assets.icons.no_connection} style={{ width: 150, height: 120 }} />
|
|
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
|
|
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 15, padding: 15, textAlign: 'center' }}>This function needs your permission, please allow access.</Text>
|
|
<TouchableOpacity onPress={() => Linking.openSettings()}
|
|
style={{ padding: 15, backgroundColor: Theme.colors.primary, borderRadius: 5 }}>
|
|
<Text style={{ color: Theme.colors.white, fontSize: 15, textAlign: 'center' }}>Allow on settings</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<CustomSafeArea>
|
|
<CustomHeader title="Stations" menu={true} navigation={this.props.navigation} />
|
|
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'center', height: Theme.screen.h, width: Theme.screen.w}}>
|
|
<MapFragment
|
|
region={this.state.initialRegion}
|
|
markers={this.state.markers}
|
|
onMapReady={() => this.goToRegion(this.state.stations.length > 0 ? this.state.stations[0] : null)}
|
|
onMarkerClick={(data) => this.navigate(data)}
|
|
/>
|
|
<SearchFragment
|
|
value={this.state.searchValue}
|
|
clear={this.state.searchValue != ""}
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
searchBackgroundColor={this.props.app_theme?.theme.colors.border}
|
|
onChangeText={(e) => this.setState({ searchValue: e.target.value })}
|
|
onFocus={() => {
|
|
this.props.navigation.navigate("StationSearch", {
|
|
value: this.state.searchValue,
|
|
onBackPress: (value, city, isFavorite) => {
|
|
if(isFavorite){
|
|
this.getFavorites()
|
|
} else {
|
|
this.stationViaCity(city)
|
|
}
|
|
}
|
|
})
|
|
}}
|
|
onClear={() => {
|
|
this.setState({ searchValue: "", stationsViaCity: [] })
|
|
this.goToRegion(this.state.stations[0])
|
|
}}
|
|
/>
|
|
</View>
|
|
<PanelFragment
|
|
visible={this.state.showpanel}
|
|
data={this.state.searchValue ? this.state.stationsViaCity : this.state.stationsViaCity.length > 0 ? this.state.stationsViaCity : this.state.stations}
|
|
loading={this.state.loading}
|
|
isSearched={this.state.isSearched}
|
|
onClick={(data) => this.navigate(data)}
|
|
snapPoints={['8', '8', '8']}
|
|
onUpdateFavorite={(index, update) => {
|
|
let updatedStations = this.state.stations
|
|
updatedStations[index].favorite = update
|
|
this.setState({ loading: true, stations: updatedStations })
|
|
}}
|
|
error={this.state.error && this.state.stations.length == 0 || this.state.error && this.state.stationsViaCity.length == 0}
|
|
onError={() => this.initLocationConfiguration()}
|
|
/>
|
|
</CustomSafeArea>
|
|
)
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(Station)
|
|
|
|
// export default function Station(navigation) {
|
|
|
|
// let dataLoader;
|
|
|
|
// const [connected, setconnected] = useState(false)
|
|
// const [loading, setloading] = useState(false)
|
|
// const [error, seterror] = useState(false)
|
|
// const [session, setsession] = useState(null)
|
|
// const [map, setmap] = useState(null)
|
|
// const [stationsViaCity, setStationsViaCity] = useState([])
|
|
// const [stations, setstations] = useState([])
|
|
// const [markers, setmarkers] = useState([])
|
|
// const [searchValue, setSearchValue] = useState("")
|
|
// const [showpanel, setshowpanel] = useState(null)
|
|
// const [mylocation, setmylocation] = useState({})
|
|
// const [isSearched, setIsSearched] = useState(false)
|
|
// const [initialRegion, setinitialRegion] = useState({
|
|
// latitude: 14.599512,
|
|
// longitude: 120.984222,
|
|
// latitudeDelta: 15,
|
|
// longitudeDelta: 11,
|
|
// })
|
|
|
|
// const fetch = async (location) => {
|
|
// if(!location) return false
|
|
// setloading(true)
|
|
// // console.log('loading...')
|
|
// let SESSION = await DB.session()
|
|
// // await console.log(SESSION.token)
|
|
// REQUEST('gas_stations', 'post', {
|
|
// Authorization: SESSION.token
|
|
// }, {}, {
|
|
// lcard_uuid: SESSION.user.lcard_uuid,
|
|
// longitude: location.longitude,
|
|
// latitude: location.latitude
|
|
// }, async (res) => {
|
|
// console.log("Res", res)
|
|
// if(res.data){
|
|
// setshowpanel(true)
|
|
// setstations(res.data)
|
|
// renderMarkers(res.data)
|
|
// goToRegion(res.data[0], 300)
|
|
// setloading(false)
|
|
// console.log('data loaded...')
|
|
// }
|
|
// else alert('Internal server error')
|
|
// }, function(e){
|
|
// console.log(e)
|
|
// setloading(false)
|
|
// })
|
|
// setloading(false)
|
|
// }
|
|
|
|
// const renderMarkers = (data) => {
|
|
// setmarkers(data.map((station, index) => {
|
|
// return {
|
|
// _id: index,
|
|
// latlng: {latitude: station.latitude, longitude: station.longitude},
|
|
// station_uuid: station.station_uuid,
|
|
// name: station.name,
|
|
// address:station.address,
|
|
// longitude: station.longitude,
|
|
// latitude: station.latitude,
|
|
// stars: station.stars,
|
|
// favorite: station.favorite
|
|
// }
|
|
// }))
|
|
// }
|
|
|
|
// const goToRegion = (data, delay = 700) => {
|
|
// if(!data) return
|
|
// setTimeout(() => {
|
|
// setinitialRegion({
|
|
// latitude: parseFloat(data.latitude),
|
|
// longitude: parseFloat(data.longitude),
|
|
// latitudeDelta: 0.0922,
|
|
// longitudeDelta: 0.0421
|
|
// })
|
|
// }, delay);
|
|
// }
|
|
|
|
// const navigate = (data) => {
|
|
// navigation.navigation.navigate('StationDetails', {markers: markers, data: data, onBackPress: () => init(), location: mylocation})
|
|
// }
|
|
|
|
// const init = async () => {
|
|
// setconnected(true)
|
|
// Geolocation.getCurrentPosition(
|
|
// info => {
|
|
// setmylocation(info.coords)
|
|
// goToRegion(info.coords, 100)
|
|
// seterror(false)
|
|
// fetch(info.coords)
|
|
// },
|
|
// error => {
|
|
// Alert.alert("Error", "Location GPS is disabled.")
|
|
// // alert(error.message)
|
|
// seterror(true)
|
|
// }
|
|
// )
|
|
// }
|
|
|
|
// const setStationViaCity = async (city) => {
|
|
// setSearchValue(city.name)
|
|
// setloading(true)
|
|
// let SESSION = await DB.session()
|
|
// REQUEST("gas_stations_city", "get", {
|
|
// Authorization: SESSION.token
|
|
// }, {
|
|
// noID: true,
|
|
// value: city.city_uuid
|
|
// }, {}, function(res){
|
|
// console.log("RESULT", res)
|
|
// if(res.data.length > 0){
|
|
// seterror(false)
|
|
// setshowpanel(true)
|
|
// setIsSearched(true)
|
|
// setStationsViaCity(res.data)
|
|
// goToRegion(res.data[0], 10)
|
|
// setloading(false)
|
|
// console.log('data loaded...')
|
|
// }else if(res.message == 'Empty'){
|
|
// setloading(false)
|
|
// setIsSearched(true)
|
|
// setStationsViaCity([])
|
|
// }
|
|
// else alert('Internal server error')
|
|
// }, function(error){
|
|
// console.log(error)
|
|
// })
|
|
// }
|
|
|
|
// const getFavorites = async () => {
|
|
// setSearchValue("My Favorites")
|
|
// setloading(true)
|
|
// let SESSION = await DB.session()
|
|
// REQUEST("station_favorites", "get", {
|
|
// Authorization: SESSION.token
|
|
// }, {}, {}, function(res){
|
|
// console.log("RESULT", res)
|
|
// if(res.data){
|
|
// seterror(false)
|
|
// setshowpanel(true)
|
|
// setStationsViaCity(res.data)
|
|
// goToRegion(res.data[0], 10)
|
|
// setloading(false)
|
|
// console.log('data loaded...')
|
|
// }
|
|
// else alert('Internal server error')
|
|
// }, function(error){
|
|
// console.log(error)
|
|
// })
|
|
// }
|
|
|
|
// useEffect(() => {
|
|
// NetInfo.fetch().then(state => {
|
|
// console.log("Connection type", state.type);
|
|
// console.log("Is connected?", state.isConnected);
|
|
// if(state.isConnected){
|
|
// init()
|
|
// }else{
|
|
// setloading(false)
|
|
// Elements.nointernet2()
|
|
// }
|
|
// });
|
|
// }, [])
|
|
|
|
// useEffect(() => {
|
|
// dataLoader = setInterval(() => {
|
|
// // init()
|
|
// }, 1300)
|
|
// return () => {
|
|
// clearInterval(dataLoader)
|
|
// }
|
|
// }, [])
|
|
|
|
// if(!connected){
|
|
// return (
|
|
// <View style={{flex: 1}}>
|
|
// <CustomHeader title="Stations" menu={true} navigation={navigation} />
|
|
// <Elements.nointernet
|
|
// message="No internet found. Please check your internet connection."
|
|
// buttonText="Try Again"
|
|
// onPress={() => {
|
|
// NetInfo.fetch().then(state => {
|
|
// console.log("Connection type", state.type);
|
|
// console.log("Is connected?", state.isConnected);
|
|
// if(state.isConnected){
|
|
// init()
|
|
// }else{
|
|
// setloading(false)
|
|
// Elements.nointernet2()
|
|
// }
|
|
// })
|
|
// }}
|
|
// />
|
|
// </View>
|
|
// )
|
|
// }
|
|
|
|
// return (
|
|
// <SafeAreaView style={{flex: 1}}>
|
|
// <CustomHeader title="Stations" menu={true} navigation={navigation} />
|
|
// <View style={{flex: 1, flexDirection: 'column', justifyContent: 'center', height: Theme.screen.h, width: Theme.screen.w}}>
|
|
// <MapFragment
|
|
// region={initialRegion}
|
|
// markers={markers}
|
|
// // onMarkerClick={(data) => navigation.navigation.navigate("StationDetails", data)}
|
|
// onMapReady={() => goToRegion(stations.length > 0 ? stations[0] : null)}
|
|
// onMarkerClick={(data) => navigate(data)}
|
|
// />
|
|
// <SearchFragment
|
|
// value={searchValue}
|
|
// clear={searchValue != ""}
|
|
// onChangeText={(e) => setSearchValue(e.target.value)}
|
|
// onFocus={() => {
|
|
// // if(searchValue == ""){
|
|
// // navigation.navigation.navigate("StationSearch", {
|
|
// // onBackPress: (value, city, isFavorite) => {
|
|
// // if(isFavorite){
|
|
// // getFavorites()
|
|
// // }else{
|
|
// // setStationViaCity(city)
|
|
// // }
|
|
// // }
|
|
// // })
|
|
// // }
|
|
// navigation.navigation.navigate("StationSearch", {
|
|
// value: searchValue,
|
|
// onBackPress: (value, city, isFavorite) => {
|
|
// if(isFavorite){
|
|
// getFavorites()
|
|
// }else{
|
|
// setStationViaCity(city)
|
|
// }
|
|
// }
|
|
// })
|
|
// }}
|
|
// onClear={() => {
|
|
// setSearchValue("")
|
|
// setStationsViaCity([])
|
|
// goToRegion(stations[0])
|
|
// }}
|
|
// />
|
|
// </View>
|
|
// {/* <BottomSheet
|
|
// visible={showpanel}
|
|
// data={stationsViaCity.length > 0 ? stationsViaCity : stations}
|
|
// loading={loading}
|
|
// onClick={(data) => navigate(data)}
|
|
// onUpdateFavorite={(index, update) => {
|
|
// setloading(true)
|
|
// let stationc = stations
|
|
// stationc[index].favorite = update
|
|
// setstations(stationc)
|
|
// setloading(false)
|
|
// console.log("updated favorites")
|
|
// }}
|
|
// /> */}
|
|
// <PanelFragment
|
|
// visible={showpanel}
|
|
// data={searchValue ? stationsViaCity : stationsViaCity.length > 0 ? stationsViaCity : stations}
|
|
// loading={loading}
|
|
// isSearched={isSearched}
|
|
// onClick={(data) => navigate(data)}
|
|
// snapPoints={['8', '8', '8']}
|
|
// onUpdateFavorite={(index, update) => {
|
|
// setloading(true)
|
|
// let stationc = stations
|
|
// stationc[index].favorite = update
|
|
// setstations(stationc)
|
|
// setloading(false)
|
|
// console.log("updated favorites")
|
|
// }}
|
|
// error={error && stations.length == 0 || error && stationsViaCity.length == 0}
|
|
// onError={() => init()}
|
|
// />
|
|
// </SafeAreaView>
|
|
// )
|
|
// }
|