Untitled
unknown
plain_text
4 years ago
65 kB
4
Indexable
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
Button,
FlatList,
TouchableHighlight,
TouchableOpacity,
Image,
ImageBackground,
Linking,
Alert, Modal, AsyncStorage
} from 'react-native';
import Icon1 from 'react-native-vector-icons/Ionicons';
import { lan_en, lan_ch } from '../Component/Language';
import { Header, Left, Right, Body, Footer, Container } from 'native-base';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { ProgressDialog } from 'react-native-simple-dialogs';
import Service from '../Service/Service';
import { ScrollView } from 'react-native-gesture-handler';
import Icon5 from 'react-native-vector-icons/MaterialCommunityIcons'
// import PageFooter from '../View/PageFooter';
import moment from 'moment';
import Loader from '../Component/Loader';
import Ecom_service from '../Service/Ecom_service';
import Ecom_Bookingdetails from './Ecom_Bookingdetails';
const sv = new Ecom_service();
var obj =[];
var obj1 =[];
var obj2 =[];
class Ecom_BookingView extends React.Component {
onLogin1() {
// this.props.navigation.navigate('Home', { parent: 'HoseUsage' });
// this.props.navigation.openDrawer();
this.setState({ isVisible: !this.state.isVisible })
}
onratessidemenu()
{
if(this.state.viewcontent == true){
this.setState({viewcontent : false})
}else{
this.setState({viewcontent : true})
}
}
state = {
searchTerm: '',
newsdetails: [],
isVisible: false,
name: '',
progressVisible: false,
isLoading: false,
language: '',
shipmmentdetails: [],
viewcontent:false,
custcode:'',
custname:'',
bookingview:[],
bookingviewcargo:[],
bookingviewroute:[]
}
componentDidMount() {
console.log("BOOK NO ...",this.props.navigation.state.params.bookno,this.props.navigation.state.params.lrpbookno);
sv.getecom_booking1(this.func2.bind(this),this.props.navigation.state.params.bookno,this.props.navigation.state.params.status,this.props.navigation.state.params.lrpecombookno,this.props.navigation.state.params.lrpbookno,this.props.navigation.state.params.appversion);
// this.setState({ isLoading: true});
}
func2(response)
{
console.log("response view...",response.cargooutput);
obj = JSON.parse(response.bkgoutput);
this.setState({bookingview :obj})
console.log("Booking View....",obj);
obj1 = JSON.parse(response.cargooutput);
this.setState({bookingviewcargo :obj1})
console.log("Booking View....",obj1);
obj2 = JSON.parse(response.routeoutput);
this.setState({bookingviewroute :obj2})
console.log("Booking View....",obj2);
}
render() {
return (
<View style={{ flex: 1, flexDirection: 'column' }}>
<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_Bookingdetails')} 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>
<Loader isLoading={this.state.isLoading} />
<ScrollView>
<View style={{ flex: 1 }}>
<FlatList
data={this.state.bookingview}
renderItem={({ item, some }) =>
<View style={{
position: 'relative',
flexDirection: 'column',
padding: 10,
elevation: 5,
backgroundColor: '#ffff',
marginHorizontal: '3%',
marginVertical: '1.5%',
borderRadius: 0,
borderTopColor: '#167bcd',
borderTopWidth: 50,
shadowOffset: { width: 1, height: 1 },
shadowOpacity: 0.4,
shadowRadius: 3,
elevation: 10,
borderTopLeftRadius:10,
borderTopRightRadius:10,
width:"95%",
}}>
<Text style={{ fontSize: 17, fontFamily: 'Montserrat-Bold', color: '#fff', bottom:50,left:80}}>Master Details</Text>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Online BOOKING NO</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{this.props.navigation.state.params.bookno}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>LRP BOOKING NO</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{this.props.navigation.state.params.lrpbookno}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Agreement Party</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_bookingparty_desc}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Origin</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{this.props.navigation.state.params.origin}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Delivery</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_delivery}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Cargo Ready Date</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{(moment([item.ebook_date], 'YYYY-MM-DD mm:ss').format('DD-MMM-YYYY'))}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Haulage Origin</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>NA</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Haulage Delivery</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>NA</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Carriage Contract</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>CY/CY</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Rate Reference</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_rate_reference}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Agency Ref No.</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_agency_reference}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Ocean Freight</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>Prepaid</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Place of Final Receipt</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.podintransit}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>NAT Code</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebooking_nor}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Haulage Type</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_haulagetype}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Pickup Date</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_pickup_date}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Drop Date</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_drop_date}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Haulier Code</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_haulercode}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Customer PO</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.customerpo}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Release Type</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>Normal</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Export Reference</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.exportref}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Empty Place of Pickup</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.emptyPickup}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Date</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.date}</Text>
</View>
</View>
</View> }
>
</FlatList>
<FlatList
data={this.state.bookingviewroute}
renderItem={({ item, some }) =>
<View style={{
flex: 1,
position: 'relative',
flexDirection: 'column',
padding: 1,
elevation: 5,
backgroundColor: '#ffff',
marginHorizontal: '3%',
marginVertical: '1.5%',
borderRadius: 0,
shadowOffset: { width: 1, height: 1 },
shadowOpacity: 0.4,
shadowRadius: 3,
elevation: 10,
borderTopLeftRadius:1,
borderTopRightRadius:1,
width:"95%",
}}>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#e1ad01',borderBottomWidth:40,bottom:30}}>
<Text style={{ fontSize: 17, fontFamily: 'Montserrat-Bold',top:30, color: '#fff',left:80}}>Vessel Schedule Details</Text>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' ,marginHorizontal:"5%",bottom:20}}>
<View style={{ flex: 0.5, flexDirection: 'column' }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Departure</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', left:"35%"}}>Arrival</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'row',marginHorizontal:"5%",bottom:20 }}>
<View style={{ flex: 0.5, flexDirection: 'column' }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{(moment([item.ETD1], 'YYYY-MM-DD mm:ss').format('DD-MMM-YYYY'))}</Text>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' }}>
<Image resizeMode="contain" source={require('../Images/menu_img/s4.png')} style={{ height: 20, width: 50, tintColor: '#000' }} />
</View>
<View style={{ flex: 0.5, flexDirection: 'column' }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', left:"15%" }}>{(moment([item.ETA1], 'YYYY-MM-DD mm:ss').format('DD-MMM-YYYY'))}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'row',marginHorizontal:"5%",bottom:20 }}>
<View style={{ flex: 0.5, flexDirection: 'column' }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.loadport}</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column'}}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', left:"35%" }}>{item.disport}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' ,marginHorizontal:"5%"}}>
<View style={{ flex: 0.1, flexDirection: 'column' }}>
<Image resizeMode="contain" source={require('../Images/menu_img/b2.png')} style={{ height:17, width:17,tintColor:'#000'}} />
</View>
<View style={{ flex: 0.5, flexDirection: 'column' }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Vessel</Text>
</View>
<View style={{ flex: 0.0, flexDirection: 'column' }}>
<Image resizeMode="contain" source={require('../Images/menu_img/compass.png')} style={{ height:17, width:17,tintColor:'#9e9e9e'}} />
</View>
<View style={{ flex: 0.5, flexDirection: 'column' }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', left:"15%" }}>Transit Time</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'row',marginHorizontal:"10%" }}>
<View style={{ flex: 0.5, flexDirection: 'column' }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.vessel}</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', marginHorizontal:"30%"}}>{Math.abs(new Date(item.ETD1)- new Date(item.ETA1) / (1000 * 60 * 60 * 24))
}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' ,marginHorizontal:"10%",}}>
<View style={{ flex: 0.5, flexDirection: 'column' }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.voyage}{item.bound}</Text>
</View>
</View>
<TouchableOpacity style={{
position: 'relative',
width: "100%",
height: "100%",
left:"25%"
}} >
{item.transhipment == 0 ?
<Text style={{ fontSize: 15, fontFamily: 'Montserrat-Bold', color: 'blue',textDecorationLine:"underline" }}>Direct Shipment</Text>
:<Text style={{ fontSize: 15, fontFamily: 'Montserrat-Bold', color: 'blue',textDecorationLine:"underline" }}>TRANSHIPPMENT(1)</Text>}
</TouchableOpacity>
</View>
}
>
</FlatList>
<FlatList
data={this.state.bookingview}
renderItem={({ item, some }) =>
<View style={{
flex: 1,
position: 'relative',
flexDirection: 'column',
padding: 10,
elevation: 5,
backgroundColor: '#ffff',
marginHorizontal: '3%',
marginVertical: '1.5%',
borderRadius: 0,
borderTopColor: '#167bcd',
borderTopWidth: 50,
shadowOffset: { width: 1, height: 1 },
shadowOpacity: 0.4,
shadowRadius: 3,
elevation: 10,
borderTopLeftRadius:10,
borderTopRightRadius:10,
width:"95%",
}}>
<Text style={{ fontSize: 17, fontFamily: 'Montserrat-Bold', color: '#fff', bottom:50,left:80}}>Customer Details</Text>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#e1ad01',borderBottomWidth:40,bottom:30}}>
<Text style={{ fontSize: 17, fontFamily: 'Montserrat-Bold',top:30, color: '#fff',left:80}}>Booking Party</Text>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Name</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_bookingname}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Address</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_bookingaddress}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Address1</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_bookingaddress1}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>City</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_bookingcity_desc}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Country</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_bookingcountry}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Telephone</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_bookingphone}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Fax</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_bookingfax}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Email</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_bookingemail}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>State</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_bookingstate}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#e1ad01',borderBottomWidth:40,bottom:30}}>
<Text style={{ fontSize: 17, fontFamily: 'Montserrat-Bold',top:30, color: '#fff',left:80}}>Agreement Party</Text>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Name</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_agreename}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Address</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_agreeaddress}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Address1</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_agreeaddress1}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>City</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_agreecity_desc}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Country</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_agreecountry_desc}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Telephone</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_agreephone}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Fax</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_agreefax}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Email</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_agreeemail}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>State</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_agreestate}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#e1ad01',borderBottomWidth:40,bottom:30}}>
<Text style={{ fontSize: 17, fontFamily: 'Montserrat-Bold',top:30, color: '#fff',left:80}}>Shipper</Text>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Name</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_shippername}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Address</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_shipperaddress}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Address1</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_shipperaddress}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>City</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_shippercity}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Country</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_shippercountry}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Telephone</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_shipperphone}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Fax</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_shipperfax}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Email</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_shipperemail}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>State</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_shipperstate}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#e1ad01',borderBottomWidth:40,bottom:30}}>
<Text style={{ fontSize: 17, fontFamily: 'Montserrat-Bold',top:30, color: '#fff',left:80}}>Consignee</Text>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Name</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_consigneename}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Address</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_consigneeaddress}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Address1</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_consigneeaddress1}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>City</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_consigneecity_desc}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Country</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_consigneecountry}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Telephone</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_consigneephone}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Fax</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_consigneefax}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Email</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_consigneeemail}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>State</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_consigneestate}</Text>
</View>
</View>
</View>
}
>
</FlatList>
<FlatList
data={this.state.bookingviewcargo}
renderItem={({ item, some }) =>
<View style={{
flex: 1,
position: 'relative',
flexDirection: 'column',
padding: 10,
elevation: 5,
backgroundColor: '#ffff',
marginHorizontal: '3%',
marginVertical: '1.5%',
borderRadius: 0,
borderTopColor: '#167bcd',
borderTopWidth: 50,
shadowOffset: { width: 1, height: 1 },
shadowOpacity: 0.4,
shadowRadius: 3,
elevation: 10,
borderTopLeftRadius:10,
borderTopRightRadius:10,
width:"95%",
}}>
<Text style={{ fontSize: 17, fontFamily: 'Montserrat-Bold', color: '#fff', bottom:50,left:80}}>Cargo Details</Text>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Equipment</Text>
</View>
{item.ebook_eqp_type == "D" ?
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>DRY</Text>
</View>
:
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_eqp_type}</Text>
</View>}
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Eqp. Qty.</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_eqp_qty}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Eqp. Size.</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_eqp}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Eqp. Status</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_equiptype}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>SOC</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.soc}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Hazardous</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_hazardous}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Cargo Weight</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_cargoweight}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Net Weight</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_netweight}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Tare Weight</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_tareweight}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Gross Weight</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_grossweight}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Package Type</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_eqp_qty}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>No of Packages</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_eqp_qty}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Volume</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_cargovolume}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Commodity</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebooking_commodity}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>HS Code</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.hscode}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
</View>
</View>
}
>
</FlatList>
<FlatList
data={this.state.bookingview}
renderItem={({ item, some }) =>
<View style={{
flex: 1,
position: 'relative',
flexDirection: 'column',
padding: 10,
elevation: 5,
backgroundColor: '#ffff',
marginHorizontal: '3%',
marginVertical: '1.5%',
borderRadius: 0,
borderTopColor: '#167bcd',
borderTopWidth: 50,
shadowOffset: { width: 1, height: 1 },
shadowOpacity: 0.4,
shadowRadius: 3,
elevation: 10,
borderTopLeftRadius:10,
borderTopRightRadius:10,
width:"95%",
}}>
<Text style={{ fontSize: 17, fontFamily: 'Montserrat-Bold', color: '#fff', bottom:50,left:80}}>Addtional Remarks</Text>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Comments on Rates</Text>
</View>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<TextInput
placeholder="Enter Comments"
onChangeText={data => this.setState({ textInputHolder: data })}
keyboardType="number-pad"
style={styles.textInputStyle}
underlineColorAndroid='transparent'
/>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%" }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Additional Information</Text>
</View>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>
<TextInput
placeholder={item.ebook_status_remarks}
onChangeText={data => this.setState({ textInputHolder: data })}
keyboardType="number-pad"
style={styles.textInputStyle}
underlineColorAndroid='transparent'
/>
</View>
</View>
}
>
</FlatList>
</View>
</ScrollView>
</View>
)
}
}
export default Ecom_BookingView
const styles = StyleSheet.create({
textInputStyle: {
textAlign: 'auto',
height: 40,
width: "100%",
borderWidth: 1,
borderColor: '#000',
borderRadius: 7,
},
})
Editor is loading...