200 lines
7.9 KiB
JavaScript
200 lines
7.9 KiB
JavaScript
import * as React from 'react';
|
|
import {
|
|
ScrollView,
|
|
TouchableOpacity,
|
|
ImageBackground,
|
|
View,
|
|
Text
|
|
} from 'react-native';
|
|
import {
|
|
useState,
|
|
useEffect
|
|
} from 'react';
|
|
import { connect } from "react-redux";
|
|
import NetInfo from "@react-native-community/netinfo";
|
|
import CustomHeader from '../../components/header.js';
|
|
import Assets from '../../components/assets.manager.js';
|
|
import Theme from '../../components/theme.style.js';
|
|
import Icon from '../../components/icons.js';
|
|
import Elements from '../../components/elements.js';
|
|
import DB from '../../components/storage/';
|
|
import moment from 'moment';
|
|
import CustomSafeArea from '../../components/safeArea.component.js';
|
|
// import {Toast} from 'native-base';
|
|
|
|
const Banner = (props) => {
|
|
return (<ImageBackground source={Assets.boarding[3]} style={{flex: 1, justifyContent: 'flex-end', alignItems: 'center'}}>
|
|
<View style={{flex: 1, width: '100%', height: '100%', backgroundColor: 'rgba(0,0,0,0.3)', padding: 30, justifyContent: 'flex-end', alignItems: 'center'}}>
|
|
<Text style={{alignSelf:'center', color: '#fff', fontFamily: 'Arial', fontSize: 16, marginBottom: 15}}>Track your gas consumption and mileage</Text>
|
|
<TouchableOpacity onPress={props.onPress} style={{alignSelf:'center', padding: 15, marginBottom: 20, backgroundColor: Theme.colors.primary, borderRadius: 7}}>
|
|
<Text style={{fontSize: 16, fontFamily: 'Arial', color: "#fff"}}>Add Tracker</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</ImageBackground>)
|
|
}
|
|
|
|
const Tracker = (navigation) => {
|
|
|
|
const params = navigation.route ? navigation.route.params : null
|
|
const [connected, setconnected] = useState(false)
|
|
const [popup, setpopup] = useState(false)
|
|
const [loaded, setloaded] = useState(false)
|
|
const [trackers, settrackers] = useState([])
|
|
const [Task, setTask] = useState("")
|
|
|
|
const fetch = (cn, data) => {
|
|
let res = []
|
|
for(var x=0;x<data.length;x++){
|
|
if(data[x].card_number === cn) res.push(data[x])
|
|
}
|
|
return res.sort((a, b) => {
|
|
return new moment(a.date).format('x') - new moment(b.date).format('x')
|
|
})
|
|
}
|
|
|
|
const init = async () => {
|
|
setconnected(true)
|
|
const SESSION = await DB.session()
|
|
const TRACKS = await DB.get("tracker")
|
|
let tracks = TRACKS ? JSON.parse(TRACKS) : []
|
|
// settrackers(tracks)
|
|
settrackers(fetch(SESSION.user.card_number, tracks))
|
|
setloaded(true)
|
|
}
|
|
|
|
useEffect(() => {
|
|
NetInfo.fetch().then(state => {
|
|
console.log("Connection type", state.type);
|
|
console.log("Is connected?", state.isConnected);
|
|
if(state.isConnected){
|
|
init()
|
|
}else{
|
|
Elements.nointernet2()
|
|
}
|
|
})
|
|
}, [])
|
|
|
|
const onReload = (task) => {
|
|
init()
|
|
console.log("TASK", task)
|
|
// Toast.show({
|
|
// text: `Fuel Efficiency tracker ${task}`,
|
|
// buttonText: "",
|
|
// duration: 3000
|
|
// })
|
|
// setTask(task)
|
|
// setpopup(true)
|
|
// setTimeout(function(){
|
|
// setpopup(false)
|
|
// }, 1200)
|
|
}
|
|
|
|
const renderTrackings = () => {
|
|
return trackers.map((data, index) => {
|
|
let estimate = parseFloat(parseInt(data.distance) / parseInt(data.liters)).toFixed(2)
|
|
return (
|
|
<TouchableOpacity onPress={() => navigation.navigation.navigate("EditTracker", {
|
|
edit: data,
|
|
reload: (task) => onReload(task)
|
|
})} key={index} style={{padding: 15, flexDirection: 'column', backgroundColor: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.border : '#fff', borderRadius: 5, borderWidth: 0.5, marginBottom: 5, borderColor: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.border : 'lightgray', elevation: 0.5}}>
|
|
<View style={{flex: 1, alignSelf: 'flex-end', color: Theme.colors.darkGray}}>
|
|
<Text style={{ color: navigation.app_theme?.theme.colors.text }}>{data.date}</Text>
|
|
</View>
|
|
<View style={{flex: 1, flexDirection: 'row'}}>
|
|
<Text style={{flex: 0, fontSize: 8, color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.primary, marginTop: 15, fontWeight: 'bold'}}>km/L</Text>
|
|
<Text style={{flex: 1, fontSize: 24, padding: 5, marginLeft: 5, fontWeight: 'bold', color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.darkerGray}}>
|
|
{estimate}
|
|
</Text>
|
|
</View>
|
|
<View style={{flex: 1, flexDirection: 'row', marginTop: 5}}>
|
|
<Text style={{flex: 0, padding: 5, paddingLeft: 0}}>
|
|
<Icon.MaterialCommunityIcons name="gas-station" size={12} color={Theme.colors.primary} />
|
|
</Text>
|
|
<Text style={{flex: 1, paddingTop: 2, color: navigation.app_theme?.theme.colors.text}}>{data.fueltype}</Text>
|
|
</View>
|
|
<View style={{flex: 1, flexDirection: 'row', marginTop: 5}}>
|
|
<Text style={{flex: 0, padding: 5, paddingLeft: 0}}>
|
|
<Icon.FontAwesome name="dashboard" size={12} color={Theme.colors.primary} />
|
|
</Text>
|
|
<Text style={{flex: 1, paddingTop: 2, color: navigation.app_theme?.theme.colors.text}}>{Theme.formatter.CRNCY(data.distance.split(" ")[0]).replace(".00", "") + " km"}</Text>
|
|
</View>
|
|
<View style={{flex: 1, flexDirection: 'row', marginTop: 5}}>
|
|
<Text style={{flex: 0, padding: 5, paddingLeft: 0}}>
|
|
<Icon.MaterialCommunityIcons name="fuel" size={12} color={Theme.colors.primary} />
|
|
</Text>
|
|
<Text style={{flex: 1, paddingTop: 2, color: navigation.app_theme?.theme.colors.text}}>{Theme.formatter.CRNCY(data.liters.split(" ")[0]).replace(".00", "") + " L"}</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
)
|
|
})
|
|
}
|
|
|
|
if(!connected){
|
|
return (
|
|
<View style={{flex: 1, flexDirection: 'column'}}>
|
|
<CustomHeader title="Fuel Efficiency Tracker" menu={false} navigation={navigation} top={45} />
|
|
<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{
|
|
Elements.nointernet2()
|
|
}
|
|
})
|
|
}}
|
|
/>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<CustomSafeArea>
|
|
<CustomHeader title="Fuel Efficiency Tracker" menu={false} navigation={navigation} />
|
|
{trackers.length == 0 && loaded ?
|
|
<Banner onPress={() => navigation.navigation.navigate("AddTracker", {
|
|
reload: (task) => onReload(task)
|
|
})} /> : null}
|
|
{trackers.length > 0 && loaded ?
|
|
<View style={{flexDirection: 'column', flex: 1}}>
|
|
<ScrollView style={{flex: 1, padding: 10}}>
|
|
{renderTrackings()}
|
|
<View style={{margin: 15}}></View>
|
|
</ScrollView>
|
|
<TouchableOpacity onPress={() => navigation.navigation.navigate("AddTracker", {
|
|
reload: (task) => onReload(task)
|
|
})}
|
|
style={{
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
position: 'absolute',
|
|
bottom: popup ? 65 : 15,
|
|
right: 15,
|
|
width: 60,
|
|
height: 60,
|
|
borderRadius: 30,
|
|
backgroundColor: Theme.colors.primary,
|
|
shadowColor: "#000000",
|
|
elevation: 7
|
|
}}
|
|
>
|
|
<Icon.Feather name="plus" color="#fff" size={25} />
|
|
</TouchableOpacity>
|
|
</View> : null
|
|
}
|
|
{/* <Elements.popup visible={popup} message={`Fuel Efficiency tracker ${Task != "" ? Task : null}.`} /> */}
|
|
</CustomSafeArea>
|
|
);
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(Tracker) |