135 lines
4.8 KiB
JavaScript
135 lines
4.8 KiB
JavaScript
import * as React from 'react';
|
|
import { useState } from 'react';
|
|
import {
|
|
TouchableOpacity,
|
|
View,
|
|
Text,
|
|
Alert
|
|
} from 'react-native';
|
|
import { connect } from "react-redux";
|
|
import { Container } from 'native-base';
|
|
import CustomHeader from '../../components/header.js';
|
|
import Theme from '../../components/theme.style.js';
|
|
import Elements from '../../components/elements.js';
|
|
import DB from '../../components/storage';
|
|
import moment from 'moment';
|
|
import CustomForm from './customform';
|
|
import CustomSafeArea from '../../components/safeArea.component.js';
|
|
|
|
const Tracker = (navigation) => {
|
|
|
|
const [fueltype, setfueltype] = useState('');
|
|
const [datepicker, setdatepicker] = useState(false);
|
|
|
|
// const fueltype = params.fuelType ? params.fuelType : "";
|
|
const [date, setdate] = useState(null);
|
|
const [distance, setdistance] = useState(null);
|
|
const [liters, setliters] = useState(null);
|
|
|
|
|
|
const Save = async () => {
|
|
let SESSION = await DB.session()
|
|
let TRACKS = await DB.get("tracker")
|
|
let tracks = TRACKS ? JSON.parse(TRACKS) : []
|
|
let data = {
|
|
card_number: SESSION.user.card_number,
|
|
id: tracks.length == 0 ? tracks.length + 1 : tracks[tracks.length - 1].id + 1,
|
|
date: date,
|
|
fueltype: fueltype,
|
|
distance: distance,
|
|
liters: liters
|
|
}
|
|
tracks.push(data)
|
|
|
|
await DB.set("tracker", JSON.stringify(tracks), function(){
|
|
navigation.route.params?.reload("added")
|
|
navigation.navigation.goBack()
|
|
// navigation.navigation.navigate("Tracker", {activity: 1})
|
|
}, function(error){
|
|
console.log("Failed to add:", error)
|
|
})
|
|
}
|
|
|
|
return (
|
|
<CustomSafeArea>
|
|
<CustomHeader title="Add Tracker" menu={false} back={true} backscreen="Tracker" navigation={navigation} />
|
|
<Container>
|
|
<View style={{marginTop: 20, padding: 0}}>
|
|
<CustomForm
|
|
items={
|
|
[
|
|
{
|
|
name: "Date",
|
|
value: date,
|
|
disabled: true,
|
|
onFocus: () => date ? true : null,
|
|
onClick: () => setdatepicker(true),
|
|
onChangeText: (val) => setdate(val)
|
|
},
|
|
{
|
|
name: "Fuel Type",
|
|
value: fueltype,
|
|
disabled: true,
|
|
onFocus: () => fueltype ? true : null,
|
|
onClick: () => navigation.navigation.navigate("AddFuelType", {get: (val) => setfueltype(val)})
|
|
},
|
|
{
|
|
kb: "numeric",
|
|
name: "Distance Travelled",
|
|
icon: 'information-circle',
|
|
value: distance,
|
|
maxLength: 5,
|
|
onChangeText: (val) => setdistance(val),
|
|
onFocus: () => distance ? setdistance(distance.includes(" km") ? distance.replace(" km", "") : distance) : null,
|
|
onBlur: () => distance ? setdistance(distance + " km") : null,
|
|
onIconClick: () => Alert.alert("Information", "To measure distance travelled, make sure to reset your trip meter every time you gas full tank.")
|
|
},
|
|
{
|
|
kb: "numeric",
|
|
name: "Liters Fueled up",
|
|
value: liters,
|
|
maxLength: 5,
|
|
onBlur: () => liters ? setliters(liters + " L") : null,
|
|
onChangeText: (val) => setliters(val)
|
|
}
|
|
]}
|
|
/>
|
|
</View>
|
|
<TouchableOpacity
|
|
onPress={async () =>
|
|
{
|
|
if(date && fueltype && distance && liters){
|
|
Save()
|
|
}else{
|
|
Alert.alert("Error", "Please fill-up all the fields.")
|
|
}
|
|
}
|
|
}
|
|
style={{ width: '90%', marginLeft: '5%', marginTop: Theme.screen.h / 3, borderRadius: 10, padding: 15, backgroundColor: Theme.colors.primary}}>
|
|
<Text style={{alignSelf: 'center', color: '#fff', fontSize: 16, fontFamily: 'Arial'}}>Save Tracker</Text>
|
|
</TouchableOpacity>
|
|
</Container>
|
|
|
|
<Elements.CustomDatePicker
|
|
visible={datepicker}
|
|
date={date ? new Date(date) : new Date(Date.now())}
|
|
textColor={navigation.app_theme?.theme.colors.text}
|
|
isDarkMode={navigation.app_theme?.theme.dark}
|
|
modalBackgroundColor={navigation.app_theme?.theme.colors.border}
|
|
onConfirm={(selectedDate) => {
|
|
setdate(selectedDate ? moment(selectedDate).format("DD MMM YYYY") : date != null ? date : null)
|
|
setdatepicker(false)
|
|
}}
|
|
onCancel={() => setdatepicker(false)}/>
|
|
</CustomSafeArea>
|
|
);
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(Tracker);
|