88 lines
3.2 KiB
JavaScript
88 lines
3.2 KiB
JavaScript
import React from 'react';
|
|
import {useState, useEffect} from 'react';
|
|
import {SafeAreaView, View} 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 REQUEST_POST_PAY from '../../components/api/postpayapi';
|
|
import Elements from '../../components/elements';
|
|
import MapFragment from './fragments/map.js';
|
|
import PanelFragment from './fragments/stationdetailspanel.js';
|
|
|
|
export default function StationDetails(props){
|
|
|
|
const [loading, setloading] = useState(true)
|
|
const [station, setstation] = useState(null)
|
|
const [markers, setmarkers] = useState([])
|
|
const [initialRegion, setinitialRegion] = useState(null)
|
|
|
|
const init = async () => {
|
|
setmarkers(props.route.params?.markers)
|
|
setinitialRegion({
|
|
latitude: props.route.params?.data.geoLocation.latitude,
|
|
longitude: props.route.params?.data.geoLocation.longitude,
|
|
latitudeDelta: 0.0922,
|
|
longitudeDelta: 0.0421
|
|
})
|
|
getStationStoreDetails(props.route.params?.data.storeId)
|
|
}
|
|
|
|
const getStationStoreDetails = async (storeId) => {
|
|
await REQUEST_POST_PAY("getStoreDetails", "get", {}, {
|
|
storeId: storeId
|
|
}, {}, async (response) => {
|
|
setloading(false)
|
|
if(response.success){
|
|
setstation(response.response)
|
|
}
|
|
}, (err) => {
|
|
setloading(false)
|
|
})
|
|
}
|
|
|
|
useEffect(() => {
|
|
init()
|
|
}, [])
|
|
|
|
const navigate = (data) => {
|
|
props.navigation.navigate('PayatpumpStationDetails', {markers: markers, data: data, onBackPress: () => init()})
|
|
}
|
|
|
|
const navigateToPayatpumpTransaction = (response, storeId, selectedPump) => {
|
|
props.navigation.navigate('PayatpumpStationTransactionDetails', { response: response, storeId: storeId, storeName: station.storeName, selectedPump: selectedPump.pumpNumber })
|
|
}
|
|
|
|
return (
|
|
<SafeAreaView style={{flex: 1}}>
|
|
<Elements.loader visible={loading} />
|
|
<View style={{flex: 1}}>
|
|
<CustomHeader title="" back={true} onBackPress={() => {
|
|
props.route.params?.onBackPress()
|
|
props.navigation.goBack()
|
|
}} navigation={props.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={() => {}}
|
|
onMarkerClick={(data) => navigate(data)}
|
|
pinSelected={true}/>
|
|
</View>
|
|
<PanelFragment
|
|
visible={false}
|
|
data={station}
|
|
onload={setloading}
|
|
stationId={props.route.params?.data.storeId}
|
|
loading={false}
|
|
error={null}
|
|
snapPoints={['5', '5', '5']}
|
|
onError={() => init()}
|
|
onTransaction={(response, storeId, selectedPump) => navigateToPayatpumpTransaction(response, storeId, selectedPump)}
|
|
lat={props.route.params?.location.latitude}
|
|
lon={props.route.params?.location.longitude}/>
|
|
</View>
|
|
</SafeAreaView>
|
|
)
|
|
} |