Untitled
unknown
plain_text
4 years ago
15 kB
4
Indexable
import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Alert, Image, TextInput ,AsyncStorage,FlatList} from 'react-native';
import Icon5 from 'react-native-vector-icons/SimpleLineIcons';
import { Header, Left, Right, Body, Footer, Container } from 'native-base';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { KeyboardAvoidingView } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { Dropdown } from 'react-native-material-dropdown';
import DatePicker from 'react-native-datepicker';
import { lan_en, lan_ch } from '../Component/Language';
import Ecom_service from '../Service/Ecom_service';
import { ScrollView } from 'react-native-gesture-handler';
import Loader from '../Component/Loader';
import moment from 'moment';
import { ProgressDialog } from 'react-native-simple-dialogs';
const sv = new Ecom_service();
var obj=[];
export default class Ecom_Bookingdetails extends Component {
constructor() {
super()
this.state = {
textInputHolder: 0,
sumHolder: 0,
randomNumberOne: 0,
randomNumberTwo: 0,
bookingsummary:[],
progressVisible: false,
isLoading: false,
}
}
componentDidMount() {
this.setState({ isLoading: true});
AsyncStorage.getItem('custcode').then(value => {
console.log("----custcode---", value)
this.setState({custcode:value})
// custcode = value;=
sv.getecombooking(this.func2.bind(this),value);
})
// sv.getecom_booking1(this.func2.bind(this));
}
func2(response)
{
obj = JSON.parse(response.output);
this.setState({bookingsummary :obj})
this.setState({ isLoading: false});
// console.log("Booking summary....",obj);
}
renderRow = (item) => {
console.log("inside the render row...",item);
return (
<View style={{flexDirection: 'column'}} >
< View style={{flexDirection: 'column',borderRadius:10,marginHorizontal:"1%",width:"95%",backgroundColor:'#fff' , shadowColor: '#000',
shadowOffset: { width: 1, height: 1 },
shadowOpacity: 0.4,
shadowRadius: 3,
elevation: 10}}>
<View style={{flexDirection: 'row',marginHorizontal:"1%",marginVertical:"5%"}}>
<View style={{flexDirection: 'column'}}>
<Image resizeMode="contain" source={require('../Images/Ecom/Booking_citrle.png')} style={{ height: 30, width: 40, }} />
</View>
<View style={{flexDirection: 'column',marginHorizontal:"3%"}}>
<Text style={{ fontFamily: 'Montserrat',color:"grey",fontSize:14}}>Booking No.</Text>
<Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>{item.bookNo}</Text>
</View>
<View style={{flexDirection: 'column',marginHorizontal:"5%"}}>
<Text style={{fontFamily: 'Montserrat',color:"grey",fontSize:14}}>Online Reference No.</Text>
<Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>{item.trust_book_no}</Text>
</View>
{/* <View style={{flexDirection: 'column',marginHorizontal:"3%"}}>
<Image resizeMode="contain" source={require('../Images/Ecom/Threedots.png')} style={{ height: 20, width: 25,right:25, tintColor: '#000000' }} />
</View> */}
</View>
< View style={{flexDirection: 'row',marginHorizontal:"5%",marginVertical:"2%"}}>
<View style={{ flexDirection: 'column' ,bottom:1}}>
<Image resizeMode="contain" source={require('../Images/menu_img/pin.png')} style={{ height: 30, width: 25, tintColor: '#000000' }} />
</View>
< View style={{flexDirection: 'column',marginHorizontal:"5%"}}>
<Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>{item.originPortId}</Text>
</View>
< View style={{flexDirection: 'column',marginHorizontal:"10%"}}>
</View>
<View style={{ flexDirection: 'column' ,bottom:1}}>
<Image resizeMode="contain" source={require('../Images/arrow11.png')} style={{ height: 30, width: 50, right: 60, tintColor: '#000000' }} />
</View>
<View style={{ flexDirection: 'column' ,bottom:1}}>
<Image resizeMode="contain" source={require('../Images/menu_img/pin.png')} style={{ height: 30, width: 25,right: 50, tintColor: '#000000' }} />
</View>
< View style={{flexDirection: 'column',marginHorizontal:"5%"}}>
<Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",right: 50,fontSize:14}}>{item.finalPortId}</Text>
</View>
</View>
<View style={{flexDirection: 'row',marginVertical:"3%"}}>
< View style={{flexDirection: 'column',marginHorizontal:"5%"}}>
<Text style={{fontFamily: 'Montserrat',color:"grey",fontSize:14}}>Created Date</Text>
<Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>{moment([item.crdate], 'YYYY/MM/DD mm:ss').format('DD-MMM-YYYY ')}</Text>
</View>
</View>
<View style={{flexDirection: 'row',marginVertical:"3%"}}>
< View style={{flexDirection: 'column',marginHorizontal:"5%"}}>
<Text style={{fontFamily: 'Montserrat',color:"grey",fontSize:14,}}>Submitted Date</Text>
<Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>{moment([item.submitdate], 'YYYY/MM/DD mm:ss').format('DD-MMM-YYYY ')}</Text>
</View>
< View style={{flexDirection: 'column',marginHorizontal:"3%"}}>
<Text style={{fontFamily: 'Montserrat',color:"grey",fontSize:14,}}>Status</Text>
<Text style={{ fontFamily: 'Montserrat-Bold',color:"green",fontSize:14,backgroundColor:"white"}}>{item.statusDesc}</Text>
</View>
</View>
<View style={{flexDirection: 'row',marginVertical:"3%"}}>
< View style={{flexDirection: 'column',marginHorizontal:"5%"}}>
<Text style={{fontFamily: 'Montserrat',color:"grey",fontSize:14}}>Submitted By</Text>
<Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>{item.cruser}</Text>
</View>
</View>
{/* <View style={{flexDirection: 'column',marginVertical:"1%"}}>
</View> */}
<View style={{flexDirection: 'row',marginVertical:"3%"}}>
< View style={{flexDirection: 'column',marginHorizontal:"5%"}}>
<Text style={{fontFamily: 'Montserrat',color:"grey",fontSize:14}}>Confirmed Date</Text>
<Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>{moment([item.confirmedDate], 'YYYY/MM/DD mm:ss').format('DD-MMM-YYYY ')}</Text>
</View>
< View style={{flexDirection: 'column',marginHorizontal:"5%"}}>
<Text style={{fontFamily: 'Montserrat',color:"grey",fontSize:14}}>DG Status</Text>
<Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>{item.dgStatus}</Text>
</View>
< View style={{flexDirection: 'column',marginHorizontal:"1%"}}>
<Text style={{fontFamily: 'Montserrat',color:"grey",fontSize:14}}>Tues count</Text>
<Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>{item.tuesCount}</Text>
</View>
</View>
<View style={{flexDirection: 'row',marginVertical:"3%",marginHorizontal:"5%"}}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Ecom_BookingView',{bookno:item.bookNo,origin:item.originPortId,delivery:item.finalPortId,status:item.status,lrpbookno:item.trust_book_no,lrpecombookno:item.lrpEcomStatus,appversion:item.appVersion})} style={{flexDirection: 'row'}}>
< View style={{flexDirection: 'column'}}>
<Image resizeMode="contain" source={require('../Images/Ecom/View.png')} style={{ height: 20, width: 25,tintColor: 'green' }} />
</View>
< View style={{flexDirection: 'column'}}>
<Text style={{fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>View</Text>
</View>
</TouchableOpacity>
<View style={{marginHorizontal:"6%"}}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Ecom_BookingView',{bookno:item.bookNo,origin:item.originPortId,delivery:item.finalPortId,status:item.status,lrpbookno:item.trust_book_no,lrpecombookno:item.lrpEcomStatus,appversion:item.appVersion})} style={{flexDirection: 'row'}}>
< View style={{flexDirection: 'column'}}>
<Image resizeMode="contain" source={require('../Images/Ecom/reuse.png')} style={{ height: 20, width: 25,tintColor: 'green' }} />
</View>
< View style={{flexDirection: 'column'}}>
<Text style={{fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>Reuse</Text>
</View>
</TouchableOpacity>
</View>
<View style={{}}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Ecom_BookingView',{bookno:item.bookNo,origin:item.originPortId,delivery:item.finalPortId,status:item.status,lrpbookno:item.trust_book_no,lrpecombookno:item.lrpEcomStatus,appversion:item.appVersion})} style={{flexDirection: 'row'}}>
< View style={{flexDirection: 'column'}}>
<Image resizeMode="contain" source={require('../Images/Ecom/print.png')} style={{ height: 20, width: 25}} />
</View>
< View style={{flexDirection: 'column'}}>
<Text style={{fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>Print</Text>
</View>
</TouchableOpacity>
</View>
{/* < View style={{flexDirection: 'column',}}>
<Image resizeMode="contain" source={require('../Images/Ecom/reuse.png')} style={{ height: 20, width: 25,tintColor: 'green' }} />
</View>
< View style={{flexDirection: 'column',marginVertical:"1%",marginHorizontal:"1%"}}>
<Text style={{fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>Reuse</Text>
</View>
< View style={{flexDirection: 'column',}}>
<Image resizeMode="contain" source={require('../Images/Ecom/print.png')} style={{ height: 20, width: 25 }} />
</View>
< View style={{flexDirection: 'column',marginVertical:"1%",marginHorizontal:"1%"}}>
<Text style={{fontFamily: 'Montserrat-Bold',color:"black",fontSize:14}}>Print</Text>
</View> */}
<View style={{flexDirection:'column'}}>
<Image resizeMode="stretch" source={require('../Images/menu_img/orange.png')} style={{ left:"3%",top:5,height: 50, width: 100,tintColor:'#5fbf64'}} />
</View>
</View>
</ View>
<View style={{flexDirection: 'column',marginVertical:"1%"}}>
</View>
</ View>
)
}
render() {
return (
<View style={{flex:1,backgroundColor:'#fff'}}>
<Header androidStatusBarColor="#112d51"
style={{
marginHorizontal: -2,
marginTop: -2,
backgroundColor: '#112d51',
height: 60,
bottom: 25
}}>
<Left>
<View style={{ flexDirection: 'row' }}>
<View style={{ flexDirection: 'column' }}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Ecom_Booking')} style={{
position: 'relative',
width: "100%",
height: "100%",
right: "5%",
}} >
<Icon style={{ fontSize: 30, top: "20%", color: '#ffffff' }} name="arrow-back" />
</TouchableOpacity>
</View>
<View style={{ flexDirection: 'column' ,top:"15%"}}>
{/* <Image resizeMode="contain"
source={require('../Images/Ecom/Tariff.png')} style={{ width: 35, height: 35}}
/> */}
</View>
</View>
</Left>
<Body >
<Text style={{ fontSize: 15, color: '#ffffff', fontFamily: 'Montserrat-Bold', alignItems: "center",right: Platform.OS == 'ios' ? "30%":15,width:"120%" }}>BOOKING</Text>
</Body>
<Right>
{/* <Image resizeMode="contain"
source={require('../Images/icons/customerlogin.png')} style={{ width: 35, height: 35,tintColor:'#bbb'}}
/> */}
</Right>
</Header>
{/* <ProgressDialog
visible={this.state.progressVisible}
title="Loading"
message="Please, wait..."
titleStyle={{ fontFamily: 'Montserrat' }}
/> */}
<Loader isLoading={this.state.isLoading} />
<ScrollView>
<View style={{flex:0.6,marginVertical:'5%',elevation:0,backgroundColor:'#ffff',borderRadius:10,justifyContent:'center'}} >
<View style={{ flexDirection: 'row', paddingVertical: 5 ,left:10,}}>
<FlatList
data={this.state.bookingsummary}
renderItem={({ item }) => this.renderRow(item)}
/>
</View>
</View>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
Container: {
flex: 0.3,
justifyContent: 'center',
alignItems: 'center',
},
text: {
color: '#FFF',
fontSize: 18,
textAlign: 'center',
padding: 5,
fontFamily: 'Montserrat-Bold',
},
captchaContainerView: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
margin: 10,
borderColor: '#ffff',
width: '90%',
height: 100,
// elevation:5,
borderWidth: 1,
padding: 5,
backgroundColor: '#F5F1F1'
},
textInputStyle: {
textAlign: 'center',
height: 40,
width: 150,
borderWidth: 1,
borderColor: '#4CAF50',
borderRadius: 7,
},
button: {
width: '80%',
height:40,
borderRadius: 10,
},
calenderbox: {
width: '100%',
backgroundColor: '#ffff',
height: 37,
borderRadius: 5,
borderColor: '#ffff',
borderWidth: 0,
zIndex: -1,
},
});Editor is loading...