392 lines
13 KiB
JavaScript
392 lines
13 KiB
JavaScript
import * as React from 'react';
|
|
import { useState, useEffect } from 'react';
|
|
import { connect } from "react-redux";
|
|
import { SafeAreaView, TouchableOpacity, ImageBackground, Button, View, Text, TextInput, Alert } from 'react-native';
|
|
import CustomHeader from '../../components/header.js';
|
|
import Assets from '../../components/assets.manager.js';
|
|
import Theme from '../../components/theme.style.js';
|
|
import Elements from '../../components/elements.js';
|
|
import CustomIcon from '../../components/icons.js';
|
|
import DB from '../../components/storage';
|
|
import CustomForm from './customform';
|
|
import { Container } from 'native-base';
|
|
import moment from 'moment';
|
|
import CustomSafeArea from '../../components/safeArea.component.js';
|
|
|
|
|
|
const Tracker = (navigation) => {
|
|
|
|
const [focus, setfocus] = useState(false);
|
|
const [activeInput, setActiveInput] = useState(false);
|
|
const [datepicker, setdatepicker] = useState(false);
|
|
|
|
const params = navigation.route ? navigation.route.params : null
|
|
const [date, setdate] = useState(null);
|
|
const [fueltype, setfueltype] = useState(null);
|
|
const [distance, setdistance] = useState(null);
|
|
const [liters, setliters] = useState(null);
|
|
|
|
const [update, setupdate] = useState(false);
|
|
|
|
if(params.edit && !update){
|
|
setdate(params.edit.date)
|
|
setfueltype(params.edit.fueltype)
|
|
setdistance(params.edit.distance)
|
|
setliters(params.edit.liters)
|
|
setupdate(true)
|
|
}
|
|
|
|
const isFocused = (index) => {
|
|
return focus && activeInput == index
|
|
}
|
|
|
|
const DeleteTracker = async () => {
|
|
let TRACKS = await DB.get("tracker")
|
|
let tracks = TRACKS ? JSON.parse(TRACKS) : []
|
|
let result = []
|
|
for(var x=0;x<tracks.length;x++){
|
|
if(params.edit.id == tracks[x].id){
|
|
continue
|
|
}else{
|
|
result.push(tracks[x])
|
|
}
|
|
}
|
|
DB.set("tracker", JSON.stringify(result), function(){
|
|
onDone("deleted")
|
|
}, function(error){
|
|
console.log(error)
|
|
})
|
|
}
|
|
|
|
const Update = async () => {
|
|
let TRACKS = await DB.get("tracker")
|
|
let tracks = TRACKS ? JSON.parse(TRACKS) : []
|
|
for(var x=0;x<tracks.length;x++){
|
|
if(params.edit.id == tracks[x].id){
|
|
tracks[x].date = date,
|
|
tracks[x].fueltype = fueltype,
|
|
tracks[x].distance = distance,
|
|
tracks[x].liters = liters
|
|
}
|
|
}
|
|
await DB.set("tracker", JSON.stringify(tracks), function(){
|
|
onDone("updated")
|
|
}, function(error){
|
|
console.log("Failed to add:", error)
|
|
})
|
|
}
|
|
|
|
const onDone = (task) => {
|
|
navigation.route.params?.reload(task)
|
|
navigation.navigation.goBack()
|
|
}
|
|
|
|
return (
|
|
<CustomSafeArea>
|
|
<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)}/>
|
|
<CustomHeader
|
|
title="Edit Tracker"
|
|
menu={false}
|
|
back={true}
|
|
backscreen="Tracker"
|
|
navigation={navigation}
|
|
rightMenu={
|
|
<TouchableOpacity onPress={() => Alert.alert("Fuel Tracker", "Do you want to delete this fuel tracker?",
|
|
[{
|
|
text: 'Cancel',
|
|
style: 'cancel',
|
|
},{
|
|
text: 'OK', onPress: () => DeleteTracker()
|
|
},],
|
|
{cancelable: true}
|
|
)} style={{alignSelf: 'flex-end', right: 10}}>
|
|
<CustomIcon.MaterialIcons name="delete" size={25} color="#fff" />
|
|
</TouchableOpacity>
|
|
}/>
|
|
|
|
<Container style={{flex: 1}}>
|
|
<View style={{marginTop: 20, padding: 0}}>
|
|
<CustomForm
|
|
items={
|
|
[
|
|
{
|
|
name: "Date",
|
|
value: date,
|
|
disabled: true,
|
|
onClick: () => setdatepicker(true),
|
|
onChangeText: (val) => setdate(val)
|
|
},
|
|
{
|
|
name: "Fuel Type",
|
|
value: fueltype,
|
|
disabled: true,
|
|
onClick: () => navigation.navigation.navigate("AddFuelType", {get: (val) => setfueltype(val)})
|
|
},
|
|
{
|
|
kb: "numeric",
|
|
name: "Distance Travelled",
|
|
icon: 'information-circle',
|
|
value: distance,
|
|
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,
|
|
onFocus: () => liters ? setliters(liters.includes(" km") ? liters.replace(" km", "") : liters) : null,
|
|
onBlur: () => liters ? setliters(liters + " L") : null,
|
|
onChangeText: (val) => setliters(val)
|
|
}
|
|
]}/>
|
|
</View>
|
|
<TouchableOpacity
|
|
onPress={Update}
|
|
style={{marginTop: '80%', width: '90%', marginLeft: '5%', borderRadius: 10, padding: 15, backgroundColor: Theme.colors.primary}}>
|
|
<Text style={{alignSelf: 'center', color: '#fff', fontSize: 16, fontFamily: 'Arial'}}>Save Tracker</Text>
|
|
</TouchableOpacity>
|
|
</Container>
|
|
</CustomSafeArea>
|
|
);
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(Tracker)
|
|
|
|
// export default function Tracker(navigation) {
|
|
|
|
// const [focus, setfocus] = useState(false);
|
|
// const [activeInput, setActiveInput] = useState(false);
|
|
// const [datepicker, setdatepicker] = useState(false);
|
|
|
|
// const params = navigation.route ? navigation.route.params : null
|
|
// const [date, setdate] = useState(null);
|
|
// const [fueltype, setfueltype] = useState(null);
|
|
// const [distance, setdistance] = useState(null);
|
|
// const [liters, setliters] = useState(null);
|
|
|
|
// const [update, setupdate] = useState(false);
|
|
|
|
// if(params.edit && !update){
|
|
// setdate(params.edit.date)
|
|
// setfueltype(params.edit.fueltype)
|
|
// setdistance(params.edit.distance)
|
|
// setliters(params.edit.liters)
|
|
// setupdate(true)
|
|
// }
|
|
|
|
// // console.log(params);
|
|
|
|
// const isFocused = (index) => {
|
|
// return focus && activeInput == index
|
|
// }
|
|
|
|
// const DeleteTracker = async () => {
|
|
// let TRACKS = await DB.get("tracker")
|
|
// let tracks = TRACKS ? JSON.parse(TRACKS) : []
|
|
// let result = []
|
|
// for(var x=0;x<tracks.length;x++){
|
|
// if(params.edit.id == tracks[x].id){
|
|
// continue
|
|
// }else{
|
|
// result.push(tracks[x])
|
|
// }
|
|
// }
|
|
// DB.set("tracker", JSON.stringify(result), function(){
|
|
// // navigation.navigation.navigate("Tracker", {activity: 3})
|
|
// onDone("deleted")
|
|
// }, function(error){
|
|
// console.log(error)
|
|
// })
|
|
// }
|
|
|
|
// const Update = async () => {
|
|
// let TRACKS = await DB.get("tracker")
|
|
// let tracks = TRACKS ? JSON.parse(TRACKS) : []
|
|
// for(var x=0;x<tracks.length;x++){
|
|
// if(params.edit.id == tracks[x].id){
|
|
// // tracks[x] = {
|
|
// // id: tracks[x].id,
|
|
// // date: date,
|
|
// // fueltype: fueltype,
|
|
// // distance: distance,
|
|
// // liters: liters
|
|
// // }
|
|
// tracks[x].date = date,
|
|
// tracks[x].fueltype = fueltype,
|
|
// tracks[x].distance = distance,
|
|
// tracks[x].liters = liters
|
|
// }
|
|
// }
|
|
// await DB.set("tracker", JSON.stringify(tracks), function(){
|
|
// // navigation.navigation.navigate("Tracker", {activity: 2})
|
|
// onDone("updated")
|
|
// }, function(error){
|
|
// console.log("Failed to add:", error)
|
|
// })
|
|
// }
|
|
|
|
// const onDone = (task) => {
|
|
// navigation.route.params?.reload(task)
|
|
// navigation.navigation.goBack()
|
|
// }
|
|
|
|
// return (
|
|
// <SafeAreaView style={{flex: 1}}>
|
|
|
|
// <Elements.CustomDatePicker
|
|
// visible={datepicker}
|
|
// date={date ? new Date(date) : new Date(Date.now())}
|
|
// onConfirm={(selectedDate) => {
|
|
// setdate(selectedDate ? moment(selectedDate).format("DD MMM YYYY") : date != null ? date : null)
|
|
// setdatepicker(false)
|
|
// }}
|
|
// onCancel={() => setdatepicker(false)}
|
|
// />
|
|
|
|
// <CustomHeader
|
|
// title="Edit Tracker"
|
|
// menu={false}
|
|
// back={true}
|
|
// backscreen="Tracker"
|
|
// navigation={navigation}
|
|
// rightMenu={
|
|
// <TouchableOpacity onPress={() => Alert.alert("Fuel Tracker", "Do you want to delete this fuel tracker?",
|
|
// [{
|
|
// text: 'Cancel',
|
|
// style: 'cancel',
|
|
// },{
|
|
// text: 'OK', onPress: () => DeleteTracker()
|
|
// },],
|
|
// {cancelable: true}
|
|
// )} style={{alignSelf: 'flex-end', right: 10}}>
|
|
// <CustomIcon.MaterialIcons name="delete" size={25} color="#fff" />
|
|
// </TouchableOpacity>
|
|
// }
|
|
// />
|
|
|
|
// <Content>
|
|
// <View style={{marginTop: 20, padding: 0}}>
|
|
|
|
// <CustomForm
|
|
// items={
|
|
// [
|
|
// {
|
|
// name: "Date",
|
|
// value: date,
|
|
// disabled: true,
|
|
// onClick: () => setdatepicker(true),
|
|
// onChangeText: (val) => setdate(val)
|
|
// },
|
|
// {
|
|
// name: "Fuel Type",
|
|
// value: fueltype,
|
|
// disabled: true,
|
|
// onClick: () => navigation.navigation.navigate("AddFuelType", {get: (val) => setfueltype(val)})
|
|
// },
|
|
// {
|
|
// kb: "numeric",
|
|
// name: "Distance Travelled",
|
|
// icon: 'information-circle',
|
|
// value: distance,
|
|
// 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,
|
|
// onFocus: () => liters ? setliters(liters.includes(" km") ? liters.replace(" km", "") : liters) : null,
|
|
// onBlur: () => liters ? setliters(liters + " L") : null,
|
|
// onChangeText: (val) => setliters(val)
|
|
// }
|
|
// ]}
|
|
// />
|
|
|
|
// </View>
|
|
|
|
// <TouchableOpacity
|
|
// onPress={Update}
|
|
// style={{marginTop: '80%', width: '90%', marginLeft: '5%', borderRadius: 10, padding: 15, backgroundColor: Theme.colors.primary}}>
|
|
// <Text style={{alignSelf: 'center', color: '#fff', fontSize: 16, fontFamily: 'Arial'}}>Save Tracker</Text>
|
|
// </TouchableOpacity>
|
|
|
|
// </Content>
|
|
|
|
// {/* <View style={{marginTop: 20, padding: 15}}>
|
|
|
|
// <DateInput
|
|
// focus={isFocused(1)}
|
|
// value={date}
|
|
// onPress={() => {
|
|
// setActiveInput(1)
|
|
// setfocus(true)
|
|
// setdatepicker(true)
|
|
// }}
|
|
// />
|
|
|
|
// <FuelTypeInput
|
|
// focus={isFocused(2)}
|
|
// value={fueltype}
|
|
// onPress={() => navigation.navigation.navigate("AddFuelType")}
|
|
// />
|
|
|
|
// <DistanceTravelledInput
|
|
// focus={isFocused(3)}
|
|
// value={distance}
|
|
// onFocus={() => {
|
|
// setActiveInput(3)
|
|
// setfocus(true)
|
|
// distance ? setdistance(distance.includes(" km") ? distance.replace(" km", "") : distance) : null
|
|
// }}
|
|
// onBlur={() => distance ? setdistance(distance + " km") : null }
|
|
// onShowInfo={() => {
|
|
// setinfodialog(true)
|
|
// }}
|
|
// onChangeText={(value) => {
|
|
// setdistance(value)
|
|
// }}
|
|
// />
|
|
|
|
// <LitersFueledInput
|
|
// focus={isFocused(4)}
|
|
// value={liters}
|
|
// onFocus={() => {
|
|
// setActiveInput(4)
|
|
// setfocus(true)
|
|
// }}
|
|
// onChangeText={(value) => {
|
|
// setliters(value)
|
|
// }}
|
|
// />
|
|
|
|
// <TouchableOpacity
|
|
// onPress={Update}
|
|
// style={{marginTop: '80%', width: '90%', marginLeft: '5%', borderRadius: 10, padding: 15, backgroundColor: Theme.colors.primary}}>
|
|
// <Text style={{alignSelf: 'center', color: '#fff', fontSize: 16, fontFamily: 'Arial'}}>Save Tracker</Text>
|
|
// </TouchableOpacity>
|
|
|
|
// </View> */}
|
|
|
|
// </SafeAreaView>
|
|
// );
|
|
// }
|