97 lines
3.4 KiB
JavaScript
97 lines
3.4 KiB
JavaScript
import React from 'react';
|
|
import {useState, useEffect} from 'react';
|
|
import {SafeAreaView, ScrollView, StyleSheet, Text, View, Dimensions, Button, Image, TextInput, TouchableOpacity, ActivityIndicator, Platform} from 'react-native';
|
|
import Theme from '../../../components/theme.style.js';
|
|
import CustomHeader from '../../../components/header.js';
|
|
import DB from '../../../components/storage';
|
|
import REQUEST from '../../../components/api';
|
|
import Elements from '../../../components/elements';
|
|
import Geolocation from '@react-native-community/geolocation';
|
|
import SlidingUpPanel from 'rn-sliding-up-panel';
|
|
import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';
|
|
import MapFragment from './fragments/map.js';
|
|
import PanelFragment from './fragments/stationdetailspanel.js';
|
|
import CustomSafeArea from '../../../components/safeArea.component.js';
|
|
|
|
export default function StationDetails(navigation){
|
|
|
|
const [loading, setloading] = useState(true)
|
|
const [station, setstation] = useState({
|
|
contact_numbers: [],
|
|
name: '',
|
|
fuel_prices: [],
|
|
address: '',
|
|
stars: 0
|
|
})
|
|
const [markers, setmarkers] = useState([])
|
|
const [initialRegion, setinitialRegion] = useState(null)
|
|
|
|
const init = async () => {
|
|
setmarkers(navigation.route.params?.markers)
|
|
setinitialRegion({
|
|
latitude: navigation.route.params?.data.latitude,
|
|
longitude: navigation.route.params?.data.longitude,
|
|
latitudeDelta: 0.0922,
|
|
longitudeDelta: 0.0421
|
|
})
|
|
getStationDetails(navigation.route.params?.data.station_uuid)
|
|
}
|
|
|
|
const getStationDetails = async (uuid) => {
|
|
const SESSION = await DB.session()
|
|
console.log("TOKEN", SESSION.token, uuid)
|
|
await REQUEST("gas_station_fuel", "get", {Authorization: SESSION.token}, {noID: true, value: uuid}, {},
|
|
async (res) => {
|
|
setloading(false)
|
|
if(res.status == 1){
|
|
setstation(res.data)
|
|
}
|
|
}, (err) => {
|
|
setloading(false)
|
|
console.log(err)
|
|
})
|
|
}
|
|
|
|
useEffect(() => {
|
|
init()
|
|
}, [])
|
|
|
|
const navigate = (data) => {
|
|
navigation.navigation.navigate('StationDetails', {markers: markers, data: data, onBackPress: () => init()})
|
|
}
|
|
|
|
return (
|
|
<CustomSafeArea>
|
|
<Elements.loader visible={loading} />
|
|
<View style={{flex: 1}}>
|
|
<CustomHeader title="" back={true} onBackPress={() => {
|
|
navigation.route.params?.onBackPress()
|
|
navigation.navigation.goBack()
|
|
|
|
}} 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) => navigate(data)}
|
|
onMapReady={() => init()}
|
|
onMarkerClick={(data) => navigate(data)}
|
|
pinSelected={true}
|
|
/>
|
|
</View>
|
|
<PanelFragment
|
|
visible={false}
|
|
data={station}
|
|
onload={setloading}
|
|
stationId={navigation.route.params?.data.station_uuid}
|
|
loading={false}
|
|
error={null}
|
|
snapPoints={['35', '8', '0']}
|
|
onError={() => init()}
|
|
lat={navigation.route.params?.location.latitude}
|
|
lon={navigation.route.params?.location.longitude}
|
|
/>
|
|
</View>
|
|
</CustomSafeArea>
|
|
)
|
|
} |