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 ( ) }) return ( {station.name} {station.address} {stars} ) }) } render() { return ( this.setState({ panel: c })} backdropOpacity={1} allowDragging={true} showBackdrop={false} draggableRange={{top: Theme.screen.h / 2.35, bottom: Theme.screen.h / 1.96}}> this.setState({ showPanel: true })} style={{ width: '100%', height: 60, top: -70}}> Unioil Stations found: {this.state.stations.length} {this.state.loading ? : null} {this.renderStations(this.state.stations)} ); } } export default Stations 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 } });