Untitled
unknown
plain_text
4 years ago
129 kB
4
Indexable
import React, { Component } from 'react';
import {
Text, TouchableOpacity, Image, View, StyleSheet, TextInput, KeyboardAvoidingView,
FlatList, ScrollView, Dimensions, Modal, Alert, AsyncStorage, Clipboard
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { ProgressDialog } from 'react-native-simple-dialogs';
import { Autocomplete, withKeyboardAwareScrollView } from "react-native-dropdown-autocomplete";
import { Header, Left, Right, Body, Footer, Container } from 'native-base';
import LinearGradient from 'react-native-linear-gradient';
import { Dropdown } from 'react-native-material-dropdown';
import Icon1 from 'react-native-vector-icons/Ionicons';
import { lan_en, lan_ch } from '../Component/Language';
import moment from 'moment';
import Loader from '../Component/Loader';
import Service from '../Service/Service';
import Toast from 'react-native-simple-toast'
import PageFooter from './PageFooter';
const sv = new Service();
const Route = [{ from: 'USPEF', to: 'INDEL', route: 'road' }, { from: 'INDEL', to: 'IMDSD', route: 'ship', service: 'SVC' },
{ from: 'IMDSD', to: 'SGSIN', route: 'rail' }]
const portdatas = [];
var pla1 = "";
var pld1 = "";
var a;
var schedule3;
class Booking extends React.Component {
constructor(props) {
super(props);
this.state = {
custname: '',
polarray: [],
customerdetails: [],
customer: [],
equipmentType: [],
equipment: [],
isLoading: false,
isVisible: false,
orgin: '',
delivery: '',
equipmentType1: [],
argparty: '',
eqptype1: 'Type',
eqptype2: 'Type',
eqptype3: 'Type',
pol: '',
pod: '',
pla: '',
pld: '',
qty1: '1',
qty2: '1',
qty3: '1',
language: '',
generatebookno: '',
statuslabel: '',
recentbooknos: [],
recentbooknos1: [],
customercode: '',
customername: '',
custview: 'N',
cust: '',
agency_code: '',
agency_loginname: '',
agency_country: '',
rateno: '',
itemno: '0',
plarate1: '',
pldrate1: '',
tableData: [],
disable: false,
ratecust: '',
agrcust: '',
disablerates: true,
apcust: '',
accessmenu: [],
restoredArray: [],
raterule: '',
ratetype: '',
routearray: [],
portpair: [],
extradata: false,
ratesscreen: 'N',
ratesscreen1: 'N',
ratesscreen2: 'N',
route_isVisible: false,
route_fromdate: '',
route_todate: '',
etd1: '',
eta1: '',
nor: '',
nor1: '',
nor2: '',
ratetype3: '',
ratetype1: '',
ratetype2: '',
itemno1: '',
itemno2: '',
itemno3: '',
raterule1: '',
raterule2: '',
raterule3: '',
soc1: '',
soc2: '',
soc3: '',
dg1: '',
dg2: '',
dg3: '',
oog1: '',
oog2: '',
oog3: '',
rateflag: "N",
resetview: 'Y',
}
}
onPreviouspage() {
this.props.navigation.navigate('Landing');
}
componentDidMount() {
AsyncStorage.getItem('lang').then((value) => {
console.log("----language---", value)
if (value == 'lang_ch') {
this.setState({ language: "lang_ch" })
} else {
this.setState({ language: "lang_en" })
}
})
AsyncStorage.getItem("screenmenu_cache").then((value) => {
console.log("----------- access screens 1----------", value)
this.setState({ restoredArray: JSON.parse(value) })
for (let i = 0; i < this.state.restoredArray.length; i++) {
this.state.accessmenu.push(this.state.restoredArray[i].module_name)
}
console.log("----------- access screens 2----------", this.state.restoredArray)
console.log("----------- access screens 3----------", this.state.accessmenu)
if (this.state.accessmenu.includes("Booking")) {
} else {
this.props.navigation.navigate('Info', { header: 'Booking', pagename: 'Landing', comments: 'accessdenied' });
}
})
AsyncStorage.getItem('agency_countrycode').then(value => {
// console.log('value---------rrrrrr', value);
this.setState({ agency_country: value })
})
AsyncStorage.getItem('agency_loginname').then(value => {
// console.log('value---------rrrrrr', value);
this.setState({ agency_loginname: value })
})
AsyncStorage.getItem('agency_code').then(value => {
// console.log('value---------rrrrrr', value);
this.setState({ agency_code: value })
})
AsyncStorage.getItem('agency_usertype').then(value => {
// console.log('agency_usertype', value);
this.setState({ agencytype: value })
if ("a" + this.state.agencytype.trim() + "b" == 'aLb') {
this.props.navigation.navigate('Info', { header: 'Booking', pagename: 'Landing' });
} else {
AsyncStorage.getItem('mycust_bb').then(value => {
// console.log('value---------rrrrrr schedule sub ', this.props.navigation.state.params.rateno,this.props.navigation.state.params.eqptype);
this.setState({ rateflag: value });
if (value == 'S') {
AsyncStorage.getItem('rateno').then(value => {
this.setState({ "rateno": value })
})
AsyncStorage.getItem('eqptype').then(value => {
console.log("Value...", value)
this.setState({ "eqptype1": value })
})
this.setState({ custview: 'S' })
AsyncStorage.getItem('mycustomer').then(value => {
// console.log('value---------rrrrrr', value);
this.setState({ argparty: value })
this.setState({ cust: value })
var s = value
var a = s.substring(0, s.indexOf("["));
s = s.substring(s.indexOf("[") + 1);
s = s.substring(0, s.indexOf("]"));
// console.log("**U***",s)
// console.log("**U***",a)
this.setState({ customercode: s })
this.setState({ customername: a })
this.setState({ disablerates: false })
})
}
else {
this.setState({ "rateno": '' })
this.setState({ "eqptype1": 'Type', "eqptype2": 'Type', "eqptype3": 'Type' })
}
})
AsyncStorage.getItem('RecentBookingNO1').then((value) => {
if (value != null) {
// console.log("recent book", value)
var myArray = value.split('+');
for (let i = 0; i < myArray.length; i++) {
if (myArray[i] != null)
this.state.recentbooknos.push({ "rr": myArray[i] });
}
// console.log("recent book", this.state.recentbooknos)
this.setState({ recentbooknos1: this.state.recentbooknos })
}
})
if (this.props.navigation.state.params.previousscreen == "agency") {
// this.setState({ isVisible: !this.state.isVisible })
this.props.navigation.navigate('Schedule');
AsyncStorage.setItem('backnavigate_booking', 'S');
}
else if (this.props.navigation.state.params.previousscreen == "schedule") {
console.log("inside booking routelist >>>>", this.props.navigation.state.params.routelist);
AsyncStorage.setItem('etd', this.props.navigation.state.params.routelist.etd);
a = this.props.navigation.state.params.routelist.portpair.length - 1;
pla1 = this.props.navigation.state.params.routelist.portpair[0].pol_name + "(" + this.props.navigation.state.params.routelist.portpair[0].pol + ")";
pld1 = this.props.navigation.state.params.routelist.portpair[a].pod_name + "(" + this.props.navigation.state.params.routelist.portpair[a].pod + ")";
console.log("inside the logg.....", pla1, pld1, a)
this.setState({ pla: pla1 });
this.setState({ pld: pld1 });
this.setState({ pol: pla1 });
this.setState({ pod: pld1 });
this.setState({ etd1: this.props.navigation.state.params.routelist.etd })
this.setState({ eta1: this.props.navigation.state.params.routelist.eta })
schedule3 = this.state.pod;
var a = schedule3.substring(0, schedule3.indexOf("("));
schedule3 = schedule3.substring(schedule3.indexOf("(") + 1);
schedule3 = schedule3.substring(0, schedule3.indexOf(")"));
console.log("s3333.....", schedule3);
this.setState({ routearray: this.props.navigation.state.params.routelist.portpair })
console.log("inside the routerarray...", this.state.routearray);
this.setState({ extradata: !this.state.extradata });
console.log("routing details----", this.props.navigation.state.params.routelist.portpair[0].pol_name + "(" + this.props.navigation.state.params.routelist.portpair[0].pol + ")");
console.log("routing details----", this.props.navigation.state.params.routelist.portpair[0].pod_name + "(" + this.props.navigation.state.params.routelist.portpair[0].pod + ")");
this.setState({ isLoading: true });
sv.getports(this.func3.bind(this));
// sv.getcustomerdetails(this.getcustomerdetailsResponse.bind(this));
sv.getapcustomers(this.getcustomerdetailsResponse.bind(this), this.state.agency_country);
sv.get_equipmentType(this.getequipmentTypeResponse.bind(this));
var b = this.props.navigation.state.params.routelist.portpair.length - 1;
sv.get_defaultRoute1(this.defaultRoutingResponse.bind(this), this.props.navigation.state.params.routelist.portpair[0].pol, this.props.navigation.state.params.routelist.portpair[b].pod, this.props.navigation.state.params.routelist.service_code);
this.setState({ isLoading: false });
this.setState({ "ratesscreen": 'N', "ratesscreen1": 'N', "ratesscreen2": 'N' })
}
}
})
AsyncStorage.getItem('mycust_rate').then(value => {
console.log("inside the customer >>>>", value);
if (value == 'S') {
this.setState({ isLoading: true });
console.log("=====" + "--------" + this.props.navigation.state.params.ap_cust)
AsyncStorage.getItem('nor').then(value => {
if (value == null) {
this.setState({ "nor": '' })
} else {
this.setState({ "nor": value })
console.log("inside the log", this.state.nor);
}
})
AsyncStorage.getItem('nor1').then(value => {
if (value == null) {
this.setState({ "nor1": '' })
} else {
this.setState({ "nor1": value })
console.log("inside the log", this.state.nor);
}
})
AsyncStorage.getItem('nor2').then(value => {
if (value == null) {
this.setState({ "nor2": '' })
} else {
this.setState({ "nor2": value })
console.log("inside the log", this.state.nor);
}
})
AsyncStorage.getItem('ratetype3').then(value => {
if (value == null) {
this.setState({ "ratetype3": '' })
} else {
this.setState({ ratetype3: value })
console.log("inside the ratetype", this.state.ratetype3);
}
})
AsyncStorage.getItem('ratetype1').then(value => {
if (value == null) {
this.setState({ "ratetype1": '' })
} else {
this.setState({ ratetype1: value })
console.log("inside the ratetype1", this.state.ratetype1);
}
})
AsyncStorage.getItem('ratetype2').then(value => {
if (value == null) {
this.setState({ "ratetype2": '' })
} else {
this.setState({ ratetype2: value })
console.log("inside the ratetype2", this.state.ratetype2);
}
})
AsyncStorage.getItem('itemno1').then(value => {
if (value == null) {
this.setState({ "itemno1": '' })
} else {
this.setState({ itemno1: value })
console.log("inside the itemno1", this.state.itemno1);
}
})
AsyncStorage.getItem('itemno2').then(value => {
if (value == null) {
this.setState({ "itemno2": '' })
} else {
this.setState({ itemno2: value })
console.log("inside the itemno2", this.state.itemno2);
}
})
AsyncStorage.getItem('itemno3').then(value => {
if (value == null) {
this.setState({ "itemno3": '' })
} else {
this.setState({ itemno3: value })
console.log("inside the itemno3", this.state.itemno3);
}
})
AsyncStorage.getItem('raterule1').then(value => {
if (value == null) {
this.setState({ "raterule1": '' })
} else {
this.setState({ raterule1: value })
console.log("inside the raterule1", this.state.raterule1);
}
})
AsyncStorage.getItem('raterule2').then(value => {
if (value == null) {
this.setState({ "raterule2": '' })
} else {
this.setState({ raterule2: value })
console.log("inside the raterule2", this.state.raterule2);
}
})
AsyncStorage.getItem('raterule3').then(value => {
if (value == null) {
this.setState({ "raterule3": '' })
} else {
this.setState({ raterule3: value })
console.log("inside the raterule3", this.state.raterule3);
}
})
AsyncStorage.getItem('soc1').then(value => {
if (value == null) {
this.setState({ "soc1": '' })
} else {
this.setState({ soc1: value })
console.log("inside the soc1", this.state.soc1);
}
})
AsyncStorage.getItem('soc2').then(value => {
if (value == null) {
this.setState({ "soc2": '' })
} else {
this.setState({ soc2: value })
console.log("inside the soc2", this.state.soc2);
}
})
AsyncStorage.getItem('soc3').then(value => {
if (value == null) {
this.setState({ "soc3": '' })
} else {
this.setState({ soc3: value })
console.log("inside the soc3", this.state.soc3);
}
})
AsyncStorage.getItem('dg1').then(value => {
if (value == null) {
this.setState({ "dg1": '' })
} else {
this.setState({ dg1: value })
console.log("inside the soc3", this.state.dg1);
}
})
AsyncStorage.getItem('dg2').then(value => {
if (value == null) {
this.setState({ "dg2": '' })
} else {
this.setState({ dg2: value })
console.log("inside the dg2", this.state.dg2);
}
})
AsyncStorage.getItem('dg3').then(value => {
if (value == null) {
this.setState({ "dg3": '' })
} else {
this.setState({ dg3: value })
console.log("inside the dg3", this.state.dg3);
}
})
AsyncStorage.getItem('oog1').then(value => {
if (value == null) {
this.setState({ "oog1": '' })
} else {
this.setState({ oog1: value })
console.log("inside the oog1", this.state.oog1);
}
})
AsyncStorage.getItem('oog2').then(value => {
if (value == null) {
this.setState({ "oog2": '' })
} else {
this.setState({ oog2: value })
console.log("inside the oog2", this.state.oog2);
}
})
AsyncStorage.getItem('oog3').then(value => {
if (value == null) {
this.setState({ "oog3": '' })
} else {
this.setState({ oog3: value })
console.log("inside the oog3", this.state.oog3);
}
})
AsyncStorage.getItem('rateno').then(value => {
if (value == null) {
console.log("inull value rateno...", value);
this.setState({ "ratesscreen": 'N' })
this.setState({ "rateno": '' })
} else {
this.setState({ "ratesscreen": 'Y' })
this.setState({ "rateno": value })
}
})
AsyncStorage.getItem('rateno1').then(value => {
if (value == null) {
console.log("inull value rateno1...", value);
this.setState({ "ratesscreen1": 'N' })
this.setState({ "rateno1": '' })
} else {
this.setState({ "ratesscreen1": 'Y' })
this.setState({ "rateno1": value })
}
})
AsyncStorage.getItem('rateno2').then(value => {
if (value == null) {
console.log("inull value rateno2...", value);
this.setState({ "ratesscreen2": 'N' })
this.setState({ "rateno2": '' })
} else {
this.setState({ "ratesscreen2": 'Y' })
this.setState({ "rateno2": value })
}
})
AsyncStorage.getItem('eqptype').then(value => {
console.log("Value...eqptype", value)
if (value == null || value == "Type") {
this.setState({ "ratesscreen": 'N' })
this.setState({ "eqptype1": 'Type' })
} else {
this.setState({ "ratesscreen": 'Y' })
this.setState({ "eqptype1": value })
}
})
AsyncStorage.getItem('eqptype1').then(value => {
console.log("Value...eqptype1", value)
if (value == null || value == "Type") {
this.setState({ "ratesscreen1": 'N' })
this.setState({ "eqptype2": 'Type' })
} else {
this.setState({ "ratesscreen1": 'Y' })
this.setState({ "eqptype2": value })
}
})
AsyncStorage.getItem('eqptype2').then(value => {
console.log("eqptype2 Value...", value)
if (value == null || value == "Type") {
this.setState({ "ratesscreen2": 'N' })
this.setState({ "eqptype3": 'Type' })
} else {
this.setState({ "ratesscreen2": 'Y' })
this.setState({ "eqptype3": value })
}
})
AsyncStorage.getItem('ratetype').then(value => {
console.log("ratetype...", value)
if (value == null) {
this.setState({ "ratetype": '' })
} else {
this.setState({ "ratetype": value })
}
})
AsyncStorage.getItem('raterule').then(value => {
console.log("raterule...", value)
if (value == null) {
this.setState({ "raterule": '' })
} else {
this.setState({ "raterule": value })
}
})
this.setState({ isLoading: false });
}
else {
this.setState({ "rateno": '' })
this.setState({ "rateno1": '' })
this.setState({ "rateno2": '' })
this.setState({ "eqptype1": 'Type' })
this.setState({ "eqptype2": 'Type' })
this.setState({ "eqptype3": 'Type' })
}
})
// AsyncStorage.getItem('agrcust').then(value => {
// this.setState({"agrcust":value})
// console.log("inside the agr customer ...",this.state.agrcust);
// // console.log("----customer", item)
// this.setState({ argparty: this.state.agrcust })
// var s=this.state.agrcust;
// var a= s.substring(0,s.indexOf("("));
// s = s.substring(s.indexOf("(") + 1);
// s = s.substring(0, s.indexOf(")"));
// console.log("customer code ...",s)
// console.log("customer name ...",a)
// this.setState({customercode:s})
// this.setState({customername:a})
// })
AsyncStorage.getItem('itemno').then(value => {
console.log("inside the item noo...", value);
if (value == null) {
console.log("inside the item noo...1", value);
this.setState({ "itemno": '0' })
}
else {
console.log("inside the item ", value);
this.setState({ "itemno": value })
}
})
AsyncStorage.getItem('mycust_rate').then(value => {
console.log("inside the customer >>>>", value);
if (value == 'S') {
AsyncStorage.getItem('customer').then(value => {
console.log('value---------rrrrrr', value);
if (value != null) {
this.setState({ custview: 'S' })
this.setState({ argparty: value })
this.setState({ cust: value })
var s = value
var a = s.substring(0, s.indexOf("["));
s = s.substring(s.indexOf("[") + 1);
s = s.substring(0, s.indexOf("]"));
console.log("**U***", s)
console.log("**U***", a)
this.setState({ customercode: s })
this.setState({ customername: a })
sv.getapcustomer(this.apcustomer.bind(this), this.state.customercode);
this.setState({ disablerates: false })
}
else {
this.setState({ custview: 'N' })
}
})
}
})
this.setState({ disable: false })
console.log("inside the state...", this.state.rateno, this.state.itemno);
}
Ratespage() {
this.setState({ isLoading: true });
// AsyncStorage.setItem('customercode',this.state.customercode );
AsyncStorage.setItem('customername', this.state.customername);
var s = this.state.pla;
var a = s.substring(0, s.indexOf("("));
s = s.substring(s.indexOf("(") + 1);
s = s.substring(0, s.indexOf(")"));
this.setState({ "plarate1": s })
var s1 = this.state.pld;
console.log("isnide the code pla...", s1);
var a = s1.substring(0, s1.indexOf("("));
s1 = s1.substring(s1.indexOf("(") + 1);
s1 = s1.substring(0, s1.indexOf(")"));
this.setState({ "pldrate1": s1 })
var s2 = this.state.pol;
var a = s2.substring(0, s2.indexOf("("));
s2 = s2.substring(s2.indexOf("(") + 1);
s2 = s2.substring(0, s2.indexOf(")"));
var s3 = this.state.pod;
console.log("isnide the code pla...", s3);
var a = s3.substring(0, s3.indexOf("("));
s3 = s3.substring(s3.indexOf("(") + 1);
s3 = s3.substring(0, s3.indexOf(")"));
AsyncStorage.setItem('customercode', this.state.customercode);
AsyncStorage.setItem('pla', s);
AsyncStorage.setItem('pld', s1);
AsyncStorage.setItem('pol', s2);
AsyncStorage.setItem('pod', s3);
sv.getquickbookingrates(this.func.bind(this), this.state.customercode, s, s1, s2, s3);
// sv.getquickbookingrates(this.func.bind(this),this.state.customercode,this.state.pla,this.state.pld,this.state.pol,this.state.pod);
console.log("inside the log...", this.state.customercode, s, s1, s2, s3)
// this.props.navigation.navigate('Ratereferencesearch');
}
func(responseJson) {
AsyncStorage.setItem('routeOrigin', this.state.routeOrigin);
AsyncStorage.setItem('routeDelivery', this.state.routeDelivery);
AsyncStorage.setItem('routeService', this.state.routeService);
AsyncStorage.setItem('routepol', this.state.routepol);
AsyncStorage.setItem('routepod', this.state.routepod);
AsyncStorage.setItem('routepolterminal', this.state.routepolterminal);
AsyncStorage.setItem('routepodterminal', this.state.routepodterminal);
AsyncStorage.setItem('routecost', this.state.routecost);
AsyncStorage.setItem('routetranstime', this.state.routetranstime);
AsyncStorage.setItem('routeMode', this.state.routeMode);
AsyncStorage.setItem('route_fromdate', this.state.route_fromdate);
AsyncStorage.setItem('route_todate', this.state.route_todate);
this.setState({
tableData: responseJson.list,
})
console.log("inside the rates table data...", this.state.tableData)
this.props.navigation.navigate('Ratereferencesearch', {
tableData: responseJson.list,
})
this.setState({ isLoading: false });
// for (let i = 0; i < this.state.tableData.length; i++) {
// // this.state.polarray1.push(this.state.polarray[i].portname);
// autorate.push(this.state.tableData[i].srrno );
// console.log("autorate ",autorate);
// }
}
func3(response) {
if (portdatas.length > 0 && portdatas != null) {
console.log("already added ")
} else {
poldata = [];
console.log("---------ports names in func3----" + JSON.stringify(response.ports[0].portname))
this.setState({ polarray: response.ports })
for (let i = 0; i < this.state.polarray.length; i++) {
// this.state.polarray1.push(this.state.polarray[i].portname);
portdatas.push(this.state.polarray[i].portname + "(" + this.state.polarray[i].portcode + ")");
}
console.log("++++++++++++++++", portdatas)
}
}
resetRouting() {
if (this.state.defaultrouting.length != 0) {
this.setState({ route_isVisible: !this.state.route_isVisible })
} else {
Toast.show("No Routes Available")
}
}
defaultRoutingResponse(response,) {
if (response == "Norecord") {
console.log("=----get Default Route ---=", response)
Alert.alert("No Routing Available")
this.setState({ defaultrouting: [] })
this.setState({ routeOrigin: "" })
this.setState({ routeDelivery: "" })
this.setState({ routeService: "" })
this.setState({ routepol: "" })
this.setState({ routepod: "" })
this.setState({ routepolterminal: "" })
this.setState({ routepodterminal: "" })
this.setState({ routecost: "" })
this.setState({ routetranstime: "" })
this.setState({ routeMode: "" })
} else {
console.log("=----else ---=", response)
this.setState({ defaultrouting: response })
this.setState({ routeOrigin: response[0].origin })
this.setState({ routeDelivery: response[0].delivery })
this.setState({ routeService: response[0].mainsvc })
this.setState({ routepol: response[0].blpol })
this.setState({ routepod: response[0].blpod })
this.setState({ routepolterminal: response[0].blpolter })
this.setState({ routepodterminal: response[0].blpodter })
this.setState({ routecost: response[0].cost20 })
this.setState({ routetranstime: response[0].transittime })
this.setState({ routeMode: response[0].mode })
this.setState({ route_fromdate: response[0].fromdate })
this.setState({ route_todate: response[0].todate })
if (response != "Norecord") {
console.log("=----seelsdms ---=", response)
}
this.setState({ surchargeview: true });
}
if (this.props.navigation.state.params.flag == 'rate') {
AsyncStorage.getItem('routeOrigin').then(value => {
if (value == null) {
this.setState({ routeOrigin: '' })
}
else {
this.setState({ routeOrigin: value })
}
})
AsyncStorage.getItem('routeDelivery').then(value => {
if (value == null) {
this.setState({ routeDelivery: '' })
}
else {
this.setState({ routeDelivery: value })
}
})
AsyncStorage.getItem('routeService').then(value => {
if (value == null) {
this.setState({ routeService: '' })
}
else {
this.setState({ routeService: value })
}
})
AsyncStorage.getItem('routepol').then(value => {
if (value == null) {
this.setState({ routepol: '' })
}
else {
this.setState({ routepol: value })
}
})
AsyncStorage.getItem('routepod').then(value => {
if (value == null) {
this.setState({ routepod: '' })
}
else {
this.setState({ routepod: value })
}
})
AsyncStorage.getItem('routepolterminal').then(value => {
if (value == null) {
this.setState({ routepolterminal: '' })
}
else {
this.setState({ routepolterminal: value })
}
})
AsyncStorage.getItem('routepodterminal').then(value => {
if (value == null) {
this.setState({ routepodterminal: '' })
}
else {
this.setState({ routepodterminal: value })
}
})
AsyncStorage.getItem('routecost').then(value => {
if (value == null) {
this.setState({ routecost: '' })
}
else {
this.setState({ routecost: value })
}
})
AsyncStorage.getItem('routetranstime').then(value => {
if (value == null) {
this.setState({ routetranstime: '' })
}
else {
this.setState({ routetranstime: value })
}
})
AsyncStorage.getItem('routeMode').then(value => {
if (value == null) {
this.setState({ routeMode: '' })
}
else {
this.setState({ routeMode: value })
}
})
AsyncStorage.getItem('route_fromdate').then(value => {
if (value == null) {
this.setState({ route_fromdate: '' })
}
else {
this.setState({ route_fromdate: value })
}
})
AsyncStorage.getItem('route_todate').then(value => {
if (value == null) {
this.setState({ route_todate: '' })
}
else {
this.setState({ route_todate: value })
}
})
}
}
selectedRoute(origin, delivery, mainsvc, blpolter, blpodter, mode, cost20, transittime, blpol, blpod, fromdate, todate) {
this.setState({ routeOrigin: origin })
this.setState({ routeDelivery: delivery })
this.setState({ routeService: mainsvc })
this.setState({ routepol: blpol })
this.setState({ routepod: blpod })
this.setState({ routepolterminal: blpolter })
this.setState({ routepodterminal: blpodter })
this.setState({ routecost: cost20 })
this.setState({ routetranstime: transittime })
this.setState({ routeMode: mode })
this.setState({ route_fromdate: fromdate })
this.setState({ route_todate: todate })
AsyncStorage.setItem('routeOrigin', origin);
AsyncStorage.setItem('routeDelivery', delivery);
AsyncStorage.setItem('routeService', mainsvc);
AsyncStorage.setItem('routepol', blpol);
AsyncStorage.setItem('routepod', blpod);
AsyncStorage.setItem('routepolterminal', blpolter);
AsyncStorage.setItem('routepodterminal', blpodter);
AsyncStorage.setItem('routecost', cost20);
AsyncStorage.setItem('routetranstime', transittime);
AsyncStorage.setItem('routeMode', mode);
AsyncStorage.setItem('route_fromdate', fromdate);
AsyncStorage.setItem('route_todate', todate);
this.setState({ route_isVisible: !this.state.route_isVisible })
if (this.state.routeService != '') {
this.setState({ surchargeview: false });
// this.onSurchargeView();
}
// this.setState({ surchargeview: true});
// this.setState({ default: 'N' })
}
getcustomerdetailsResponse(response) {
console.log("----getcustomerdetailsResponse", response);
this.setState({ customerdetails: response })
for (let i = 0; i < this.state.customerdetails.length; i++) {
this.state.customer.push(this.state.customerdetails[i].custname.trim() + "[" + this.state.customerdetails[i].custcode.trim() + "]")
}
}
newbook() {
this.props.navigation.navigate('Schedule');
}
getequipmentTypeResponse(response) {
console.log("----get_equipmentType", response);
this.setState({ equipmentType: response })
for (let i = 0; i < this.state.equipmentType.length; i++) {
this.state.equipment.push("(" + this.state.equipmentType[i].equipdesc + ")" + this.state.equipmentType[i].equiptype)
}
temparray = this.state.equipment.map(item => ({
value: item
}))
this.setState({ equipmentType1: temparray })
}
onschedule() {
this.props.navigation.navigate('Schedule');
AsyncStorage.setItem('Booking', 'S');
}
saveBooking() {
console.log("inside the state save...", this.state.rateno, this.state.rateno1, this.state.rateno2, this.state.eqptype1, this.state.eqptype2, this.state.eqptype3);
console.log("save method-----", this.state.argparty)
if (this.state.argparty != '') {
if (this.state.apcust == 'VAL' || this.state.apcust == 'POT' || this.state.apcust == 'VER') {
if (this.state.pol != '') {
if (this.state.pod != '') {
if (this.state.pla != '') {
if (this.state.pld != '') {
if ((this.state.eqptype1 != 'Type' && this.state.eqptype1 != '') || (this.state.eqptype2 != 'Type' && this.state.eqptype2 != '') || (this.state.eqptype3 != 'Type' && this.state.eqptype3 != '')) {
if ((this.state.eqptype1 != 'Type' && this.state.eqptype1 != '' && this.state.qty1 != '') || (this.state.eqptype2 != 'Type' && this.state.eqptype2 != '' && this.state.qty2 != '') || (this.state.eqptype3 != 'Type' && this.state.eqptype3 != '')) {
if ((this.state.qty1 != '' || this.state.qty2 != '' || this.state.qty3 != '')) {
if ((this.state.qty1 != "0" && this.state.qty2 != "0" && this.state.qty3 != "0")) {
if (this.state.eqptype1 == 'Type' || this.state.eqptype1 == ' ' || this.state.qty1 == '' || this.state.qty1 == '0') {
this.state.eqptype1 = 'Type';
this.state.qty1 = "";
console.log("inside the booking 1...", this.state.eqptype1, this.state.qty1);
}
if (this.state.eqptype2 == 'Type' || this.state.eqptype2 == ' ' || this.state.qty2 == '' || this.state.qty2 == '0') {
this.state.eqptype2 = 'Type';
this.state.qty2 = "";
console.log("inside the booking 2 ...", this.state.eqptype2, this.state.qty2);
}
if (this.state.eqptype3 == 'Type' || this.state.eqptype3 == ' ' || this.state.qty3 == '' || this.state.qty3 == '0') {
this.state.eqptype3 = 'Type';
this.state.qty3 = "";
console.log("inside the booking 3...", this.state.eqptype3, this.state.qty3);
}
// if(this.state.eqptype1 == 'Type' && ( this.state.qty1 == ''||this.state.qty1 =='0'))
// {
// this.state.eqptype1 = 'Type';
// this.state.qty1 = "0";
// console.log("inside the booking 1...",this.state.eqptype1 ,this.state.qty1);
// }
// if(this.state.eqptype2 == 'Type' && ( this.state.qty2 == ''||this.state.qty2 =='0'))
// {
// this.state.eqptype2 = 'Type';
// this.state.qty2 = "0";
// console.log("inside the booking 2 ...",this.state.eqptype2 ,this.state.qty2);
// }
// if(this.state.eqptype3 == 'Type' && ( this.state.qty3 == ''||this.state.qty3 =='0'))
// {
// this.state.eqptype3 = 'Type';
// this.state.qty3 = "0";
// console.log("inside the booking 3...",this.state.eqptype3 ,this.state.qty3);
// }
this.setState({ isLoading: true });
console.log("inside the log .....", this.state.eqptype1.indexOf("("));
if (this.state.eqptype1.indexOf("(") == -1 && this.state.eqptype2.indexOf("(") == -1 && this.state.eqptype3.indexOf("(") == -1) {
var eqp1 = this.state.eqptype1;
var eqp2 = this.state.eqptype2;
var eqp3 = this.state.eqptype3;
}
else if (this.state.eqptype1.indexOf("(") > -1 && this.state.eqptype2.indexOf("(") > -1 && this.state.eqptype3.indexOf("(") == -1) {
var eqp1 = this.state.eqptype1.substring(this.state.eqptype1.indexOf(")") + 1, this.state.eqptype1.length);
var eqp2 = this.state.eqptype2.substring(this.state.eqptype2.indexOf(")") + 1, this.state.eqptype2.length);
var eqp3 = this.state.eqptype3;
}
else if (this.state.eqptype1.indexOf("(") == -1 && this.state.eqptype2.indexOf("(") > -1 && this.state.eqptype3.indexOf("(") > -1) {
var eqp1 = this.state.eqptype1;
var eqp2 = this.state.eqptype2.substring(this.state.eqptype2.indexOf(")") + 1, this.state.eqptype2.length);
var eqp3 = this.state.eqptype3.substring(this.state.eqptype3.indexOf(")") + 1, this.state.eqptype3.length);
}
else if (this.state.eqptype1.indexOf("(") > -1 && this.state.eqptype2.indexOf("(") == -1 && this.state.eqptype3.indexOf("(") > -1) {
var eqp1 = this.state.eqptype1.substring(this.state.eqptype1.indexOf(")") + 1, this.state.eqptype1.length);
var eqp2 = this.state.eqptype2;
var eqp3 = this.state.eqptype3.substring(this.state.eqptype3.indexOf(")") + 1, this.state.eqptype3.length);
}
else if (this.state.eqptype1.indexOf("(") > -1 && this.state.eqptype2.indexOf("(") == -1 && this.state.eqptype3.indexOf("(") == -1) {
var eqp1 = this.state.eqptype1.substring(this.state.eqptype1.indexOf(")") + 1, this.state.eqptype1.length);
var eqp2 = this.state.eqptype2;
var eqp3 = this.state.eqptype3;
}
else if (this.state.eqptype1.indexOf("(") == -1 && this.state.eqptype2.indexOf("(") > -1 && this.state.eqptype3.indexOf("(") == -1) {
var eqp1 = this.state.eqptype1;
var eqp2 = this.state.eqptype2.substring(this.state.eqptype2.indexOf(")") + 1, this.state.eqptype2.length);
var eqp3 = this.state.eqptype3;
}
else if (this.state.eqptype1.indexOf("(") == -1 && this.state.eqptype2.indexOf("(") == -1 && this.state.eqptype3.indexOf("(") > -1) {
var eqp1 = this.state.eqptype1;
var eqp2 = this.state.eqptype2;
var eqp3 = this.state.eqptype3.substring(this.state.eqptype3.indexOf(")") + 1, this.state.eqptype3.length);
}
else {
var eqp1 = this.state.eqptype1.substring(this.state.eqptype1.indexOf(")") + 1, this.state.eqptype1.length);
var eqp2 = this.state.eqptype2.substring(this.state.eqptype2.indexOf(")") + 1, this.state.eqptype2.length);
var eqp3 = this.state.eqptype3.substring(this.state.eqptype3.indexOf(")") + 1, this.state.eqptype3.length);
this.setState({ rateno: "", itemno: "" })
}
console.log("containertype----", eqp1, eqp2, eqp3)
if (this.state.customercode + "[" + this.state.customername + "]" != null) {
this.setState({ custview: 'S' })
this.setState({ argparty: this.state.customername + "[" + this.state.customercode + "]" })
this.setState({ cust: this.state.customername + "[" + this.state.customercode + "]" })
var s = this.state.ratecust
var a = s.substring(0, s.indexOf("["));
s = s.substring(s.indexOf("[") + 1);
s = s.substring(0, s.indexOf("]"));
console.log("**U***", s)
console.log("**U***", a)
this.setState({ customercode: s })
this.setState({ customername: a })
}
console.log("nor >>>>>", this.state.nor);
console.log("nor1 >>>>>", this.state.nor1);
console.log("nor2 >>>>>", this.state.nor2);
console.log("--------service_code=====", this.props.navigation.state.params.routelist.service_code)
console.log("--------route service_code=====", this.state.routeService)
console.log("SAVE BOOKING >>>>>", this.props.navigation.state.params.routelist.portpair[0].pol, this.props.navigation.state.params.routelist.etd, schedule3, this.props.navigation.state.params.routelist.eta, this.props.navigation.state.params.routelist.service_code, this.props.navigation.state.params.vessel, this.props.navigation.state.params.voyage, this.props.navigation.state.params.bound, this.props.navigation.state.params.routelist.load_callid, this.state.ratetype1, this.state.ratetype2, this.state.ratetype3, this.state.itemno1, this.state.itemno2, this.state.itemno3, this.state.raterule1, this.state.raterule2, this.state.raterule3, this.state.soc1, this.state.soc2, this.state.soc3, this.state.dg1, this.state.dg2, this.state.dg3, this.state.oog1, this.state.oog2, this.state.oog3,);
sv.Save_quickbooking(this.bookresponse.bind(this), this.state.customercode, this.state.customername, this.props.navigation.state.params.routelist.portpair[0].pol, this.props.navigation.state.params.routelist.etd, schedule3, this.props.navigation.state.params.routelist.eta, this.props.navigation.state.params.routelist.service_code, this.props.navigation.state.params.vessel, this.props.navigation.state.params.voyage, this.props.navigation.state.params.bound, eqp1, eqp2, eqp3, this.state.qty1, this.state.qty2, this.state.qty3, this.state.agency_code, this.state.agency_loginname, this.state.rateno, this.state.rateno1, this.state.rateno2, this.state.itemno, this.state.ratetype, this.state.raterule, this.props.navigation.state.params.routelist.load_callid, this.state.nor, this.state.nor1, this.state.nor2, this.state.routepol, this.state.routepod, this.state.routepolterminal, this.state.routepodterminal, this.state.ratetype1, this.state.ratetype2, this.state.ratetype3, this.state.itemno1, this.state.itemno2, this.state.itemno3, this.state.raterule1, this.state.raterule2, this.state.raterule3, this.state.soc1, this.state.soc2, this.state.soc3, this.state.dg1, this.state.dg2, this.state.dg3, this.state.oog1, this.state.oog2, this.state.oog3,);
Toast.show("Booking saved successfully");
this.setState({ itemno: "0", disable: "true", disablerates: "true" })
}
else {
Toast.show("Enter Equipment Quantity")
}
}
else {
Toast.show("Enter Equipment Type or Equipment Quantity")
}
}
else {
Toast.show("Enter Equipment Quantity")
}
} else {
Toast.show("Select Equipment Type")
}
} else {
Toast.show("Enter PLD")
}
} else {
Toast.show("Enter PLA")
}
} else {
Toast.show("Enter POD")
}
} else {
Toast.show("Enter POL")
}
} else if (this.state.apcust == 'PRO') {
Toast.show("AP Customer should be validated");
}
} else {
Toast.show("Enter Agr.Party")
}
}
bookresponse(response) {
console.log("---Book No----", response)
var s = response;
s = s.substring(s.indexOf("=") + 1);
s = s.substring(0, s.indexOf("}"));
console.log("**U***", s)
this.setState({ generatebookno: s })
this.setState({ isLoading: false });
this.setState({ statuslabel: 'Draft' })
this.setState({ resetview: 'N' })
AsyncStorage.getItem('RecentBookingNO1').then((value) => {
AsyncStorage.setItem('RecentBookingNO1', this.state.generatebookno + "+" + value)
})
// Alert.alert("Book No: ", s)
}
oncustomer(item) {
console.log("----customer", item)
this.setState({ argparty: item })
console.log("----customer", this.state.argparty)
var s = item;
var a = s.substring(0, s.indexOf("["));
s = s.substring(s.indexOf("[") + 1);
s = s.substring(0, s.indexOf("]"));
console.log("**U***", s)
console.log("**U***", a)
this.setState({ customercode: s })
this.setState({ customername: a })
this.setState({ disablerates: false })
this.setState({ custview: 'N' })
// this.setState({ argparty: '' })
// this.setState({customercode:''})
// this.setState({customername:''})
this.setState({ "rateno": '' })
this.setState({ "eqptype1": 'Type', "eqptype2": 'Type', "eqptype3": 'Type' })
this.setState({ ratesscreen: 'N' })
this.setState({ ratesscreen1: 'N' })
this.setState({ ratesscreen2: 'N' })
sv.getapcustomer(this.apcustomer.bind(this), this.state.customercode);
}
apcustomer(response) {
if (response != [] || response.length != 0) {
console.log("inside the ap customer ...", response, response[0].custposition);
this.setState({ apcust: response[0].custposition })
console.log("ap cust...", this.state.apcust);
} else {
}
}
recentbooking() {
this.setState({ recentbooknos: [] })
AsyncStorage.getItem('RecentBookingNO1').then((value) => {
if (value != null) {
console.log("recent book", value)
var myArray = value.split('+');
for (let i = 0; i < myArray.length; i++) {
if (myArray[i] != 'null' && myArray[i].length >= 5)
this.state.recentbooknos.push({ "rr": myArray[i] });
}
console.log("recent book", this.state.recentbooknos)
this.setState({ recentbooknos1: this.state.recentbooknos })
}
})
this.setState({ isVisible: !this.state.isVisible })
}
modalclose() {
this.setState({ route_isVisible: !this.state.route_isVisible })
}
onTextChanged1(value) {
// code to remove non-numeric characters from text
// console.log("inside the text field",value,value[0])
if (value[0] != "0") {
this.setState({ qty1: value.replace(/[- #*;,.<>\{\}\[\]\\\/]/gi, '') });
} else {
Toast.show("Quantity should not be 0 prefix");
}
}
onTextChanged2(value) {
// code to remove non-numeric characters from text
if (value[0] != "0") {
this.setState({ qty2: value.replace(/[- #*;,.<>\{\}\[\]\\\/]/gi, '') });
} else {
Toast.show("Quantity should not be 0 prefix");
}
}
onTextChanged3(value) {
// code to remove non-numeric characters from text
if (value[0] != "0") {
this.setState({ qty3: value.replace(/[- #*;,.<>\{\}\[\]\\\/]/gi, '') });
} else {
Toast.show("Quantity should not be 0 prefix");
}
}
clearapcust() {
this.setState({ custview: 'N' })
this.setState({ argparty: '' })
this.setState({ customercode: '' })
this.setState({ customername: '' })
this.setState({ "rateno": '' })
this.setState({ "eqptype1": 'Type', "eqptype2": 'Type', "eqptype3": 'Type' })
this.setState({ ratesscreen: 'N' })
this.setState({ ratesscreen1: 'N' })
this.setState({ ratesscreen2: 'N' })
this.setState({ disablerates: true })
}
oneqp1(value) {
console.log("inside rthe oneqp1 >>>", value.eqptype1);
this.setState({ eqptype1: value.eqptype1, rateno: "", itemno: "0" })
}
oneqp2(value) {
console.log("inside rthe oneqp1 >>>", value.eqptype1);
this.setState({ eqptype2: value.eqptype2, rateno1: "", itemno: "0" })
}
oneqp3(value) {
console.log("inside rthe oneqp1 >>>", value.eqptype3);
this.setState({ eqptype3: value.eqptype3, rateno2: "", itemno: "0" })
}
copymethod(item) {
Clipboard.setString(item);
console.log("isnide the copymethod ...", Clipboard.setString(item));
Toast.show("Recent Booking No Copied")
}
render() {
// console.log("render----------",this.state.argparty)
return (
<View style={{ flex: 1, backgroundColor: '#ffff' }}>
{/* <View> */}
<Header androidStatusBarColor="#112d51"
style={{
marginHorizontal: -2,
marginTop: -2,
backgroundColor: '#112d51',
height: 60,
bottom: 25
}}>
<Left>
<TouchableOpacity onPress={this.onPreviouspage.bind(this)} style={{
position: 'relative',
width: "100%",
height: "100%",
right: "5%",
}} >
<Icon style={{ fontSize: 30, top: "20%", color: '#ffffff' }} name="arrow-back" />
</TouchableOpacity>
</Left>
<Body >
{this.state.language != "lang_ch" ? (<Text style={{ fontSize: 15, color: '#ffffff', fontFamily: 'Montserrat-Bold', alignItems: "center", width: '120%', right: Platform.OS == 'ios' ? "30%" : 15, width: "120%" }}>{lan_en[0].quickbooking}</Text>) :
(<Text style={{ fontSize: 15, color: '#ffffff', fontFamily: 'Montserrat-Bold', alignItems: "center", width: '120%', right: Platform.OS == 'ios' ? "30%" : 15, width: "120%" }}>{lan_ch[0].quickbooking}</Text>)}
{/* <Text style={{ fontSize: 15, color: '#ffffff', fontFamily: 'Montserrat-Bold', alignItems: "center", width: '120%' ,right:15}}>QUICK BOOKING</Text> */}
</Body>
<Right>
<TouchableOpacity onPress={this.recentbooking.bind(this)} style={{
position: 'relative',
width: "75%",
height: "100%",
}} >
<Icon style={{ fontSize: 30, color: '#ffff', left: '70%' }} name="history" />
</TouchableOpacity>
</Right>
</Header>
<Modal
transparent={true}
animationType={'none'}
visible={this.state.route_isVisible}
onRequestClose={() => { console.log("Modal has been closed.") }}>
<View style={styles.glasspane}>
<View style={styles.activityIndicatorWrapper} >
<View style={{ height: 40, flexDirection: 'row' }}>
<View style={{ flex: 0.75, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 15, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}> Available Routes</Text>
</View>
<TouchableOpacity onPress={this.modalclose.bind(this)} style={{ flex: 0.25, backgroundColor: '#bbb', justifyContent: 'center', alignItems: 'center', height: 30 }}>
<Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>CLOSE</Text>
</TouchableOpacity>
</View>
{/* <View style={{ flex: 1, flexDirection: 'column', backgroundColor: '#ffff' }}> */}
<FlatList
data={this.state.defaultrouting}
renderItem={({ item, some }) =>
<TouchableOpacity onPress={this.selectedRoute.bind(this, item.origin, item.delivery, item.mainsvc, item.blpolter, item.blpodter, item.mode, item.cost20, item.transittime, item.blpol, item.blpod, item.fromdate, item.todate)}>
<View style={{
flex: 1,
position: 'relative',
flexDirection: 'column',
borderColor: '#dcdcdc',
borderWidth: 3,
padding: 10,
width: 300,
// paddingHorizontal: 20,
// paddingVertical: 20,
elevation: 11,
// height:,
marginHorizontal: '3%',
marginVertical: '2%',
backgroundColor: '#ffff',
borderRadius: 8,
right: 0
}}>
<View style={{ flex: 0.5, flexDirection: 'row', elevation: 0, marginHorizontal: '2%', borderRadius: 10, backgroundColor: '#ffff' }}>
<View style={{ flex: 0.4, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 12, color: '#2052AA', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.origin}</Text>
<Image resizeMode="contain" source={require('../Images/footer_icons/Tracking.png')} style={{ height: 20, width: 30, tintColor: '#6C6666' }} />
<Text style={{ fontSize: 12, color: '#1B4441', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.blpolter}</Text>
{/* <Text style={{ fontSize: 10, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{moment([item.fromdate], 'YYYY/MM/DD mm:ss').format('DD-MMM-YYYY')}</Text> */}
</View>
<View style={{ flex: 0.2, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
<Image resizeMode="contain" source={require('../Images/menu_img/s4.png')} style={{ height: 20, width: 50, tintColor: '#6C6666' }} />
<Text style={{ fontSize: 12, color: '#D62206', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.mainsvc}</Text>
</View>
<View style={{ flex: 0.4, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 12, color: '#2052AA', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.delivery}</Text>
<Image resizeMode="contain" source={require('../Images/footer_icons/Tracking.png')} style={{ height: 20, width: 30, tintColor: '#6C6666' }} />
<Text style={{ fontSize: 12, color: '#1B4441', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.blpodter}</Text>
{/* <Text style={{ fontSize: 10, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{moment([item.todate], 'YYYY/MM/DD mm:ss').format('DD-MMM-YYYY')}</Text> */}
</View>
</View>
<View style={{ flex: 0.1, flexDirection: 'row' }}>
<View style={{ flex: 0.20, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 12, color: '#5A5F62', fontFamily: 'Montserrat-Medium', marginVertical: 5 }}>MODE</Text>
</View>
<View style={{ flex: 0.20, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 12, color: '#5A5F62', fontFamily: 'Montserrat-Medium', marginVertical: 5 }}>POL</Text>
</View>
<View style={{ flex: 0.20, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 12, color: '#5A5F62', fontFamily: 'Montserrat-Medium', marginVertical: 5 }}>POD</Text>
</View>
<View style={{ flex: 0.20, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 12, color: '#5A5F62', fontFamily: 'Montserrat-Medium', marginVertical: 5 }}>COST</Text>
</View>
<View style={{ flex: 0.20, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 12, color: '#5A5F62', fontFamily: 'Montserrat-Medium', marginVertical: 5 }}>T.TIME</Text>
</View>
</View>
<View style={{ flex: 0.15, flexDirection: 'row' }}>
<View style={{ flex: 0.20, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.mode}</Text>
</View>
<View style={{ flex: 0.20, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.blpol}</Text>
</View>
<View style={{ flex: 0.20, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.blpod}</Text>
</View>
<View style={{ flex: 0.20, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.cost20}</Text>
</View>
<View style={{ flex: 0.20, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.transittime}</Text>
</View>
</View>
{/* <View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.20, flexDirection: 'column', justifyContent: 'center' }}>
<Text style={{ fontSize: 12, color: '#5A5F62', fontFamily: 'Montserrat-Medium', marginVertical: 5 }}>MODE</Text>
<Text style={{ fontSize: 12, color: '#5A5F62', fontFamily: 'Montserrat-Medium', marginVertical: 5 }}>POL</Text>
<Text style={{ fontSize: 12, color: '#5A5F62', fontFamily: 'Montserrat-Medium', marginVertical: 5 }}>POD</Text>
</View>
<View style={{ flex: 0.25, flexDirection: 'column', justifyContent: 'center' }}>
<Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.mode}</Text>
<Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.blpol}</Text>
<Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.blpod}</Text>
</View>
<View style={{ flex: 0.3, flexDirection: 'column', justifyContent: 'center' }}>
<Text style={{ fontSize: 12, color: '#5A5F62', fontFamily: 'Montserrat-Medium', marginVertical: 5 }}>COST</Text>
<Text style={{ fontSize: 12, color: '#5A5F62', fontFamily: 'Montserrat-Medium', marginVertical: 5 }}>TRANS.TIME</Text>
<Text style={{ fontSize: 12, color: '#5A5F62', fontFamily: 'Montserrat-Medium', marginVertical: 5 }}></Text>
</View>
<View style={{ flex: 0.2, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.cost20}</Text>
<Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.transittime}</Text>
<Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}></Text>
</View>
</View> */}
</View>
</TouchableOpacity>
}
>
</FlatList>
</View>
</View>
{/* </View> */}
</Modal>
<ProgressDialog
visible={this.state.progressVisible}
title="Loading"
message="Please, wait..."
titleStyle={{ fontFamily: 'Montserrat-Medium' }}
/>
<Modal
transparent={true}
animationType={'none'}
visible={this.state.isVisible}
onRequestClose={() => { console.log("Modal has been closed.") }}>
<View style={styles.glasspane}>
<View style={styles.activityIndicatorWrapper} >
<View style={{ flexDirection: 'row' }}>
<View style={{ flexDirection: 'column', flex: 3 }}>
{this.state.language != "lang_ch" ? (<Text style={{ fontSize: 13, color: '#000000', width: "100%", marginHorizontal: "30%", marginVertical: '1%', marginTop: "5%", justifyContent: 'center', alignItems: 'center', fontFamily: 'Montserrat-Bold' }}>{lan_en[0].recentbookingno}</Text>) :
(<Text style={{ fontSize: 13, color: '#000000', width: "100%", marginHorizontal: "30%", marginVertical: '1%', marginTop: "5%", justifyContent: 'center', alignItems: 'center', fontFamily: 'Montserrat-Bold' }}>{lan_ch[0].recentbookingno}</Text>)}
{/* <Text style={{ fontSize: 13, color: '#000000',width:"100%", marginHorizontal:"30%", marginVertical: '1%',marginTop:"5%", justifyContent: 'center', alignItems: 'center',fontFamily: 'Montserrat-Bold' }}>RECENT BOOKING NO</Text> */}
</View>
<View style={{ flexDirection: 'column', flex: 0.5 }}>
<TouchableOpacity style={{}} onPress={this.recentbooking.bind(this)}>
<Icon style={{ fontSize: 20, color: 'black', marginVertical: '10%', marginHorizontal: "15%", marginTop: "5%" }} name="close" />
</TouchableOpacity>
</View>
</View>
<ScrollView>
<FlatList
data={this.state.recentbooknos1}
renderItem={({ item, some }) =>
<TouchableOpacity onPress={this.copymethod.bind(this, item.rr)} style={{ flex: 1, backgroundColor: '#bfd1dd', padding: 7, flexDirection: 'row', width: '130%', height: '70%', marginVertical: '3%', borderRadius: 0, justifyContent: 'center', alignItems: 'center', }}>
<View style={{ flex: 0.2, flexDirection: 'column', bottom: 5 }}>
<Icon style={{ fontSize: 20, color: '#112d51' }} name="library-books" />
</View>
<View style={{ flex: 0.7, flexDirection: 'column', justifyContent: 'center' }}>
<Text selectable={true} style={{ color: '#112d51', fontSize: 12, fontFamily: 'Montserrat-Bold', bottom: 5 }}>{item.rr}</Text>
</View>
</TouchableOpacity>
}
>
</FlatList>
</ScrollView>
</View>
</View>
</Modal>
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : null}
style={{ flex: 1 }}
>
<Loader isLoading={this.state.isLoading} />
{/* <ScrollView keyboardShouldPersistTaps={true} > */}
<View style={{ backgroundColor: '#112d51', height: 60 }}>
<View style={{ flexDirection: 'row', marginHorizontal: '4.1%', height: 45 }} >
<View style={{ flexDirection: 'column', flex: 0.5, justifyContent: 'center', backgroundColor: '#bfd1dd', alignItems: 'center', marginHorizontal: 0 }} >
{/* <Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 10, alignContent: 'center', justifyContent: 'center', color: 'black' }}>Book No</Text> */}
{this.state.language != "lang_ch" ? (<Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 10, alignContent: 'center', justifyContent: 'center', color: 'black' }}>{lan_en[0].bookno}</Text>) :
(<Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 10, alignContent: 'center', justifyContent: 'center', color: 'black' }}>{lan_ch[0].bookno}</Text>)}
<Text selectable={true} style={{ fontFamily: 'Montserrat-Bold', fontSize: 12, alignContent: 'center', justifyContent: 'center', color: 'black' }}>{this.state.generatebookno}</Text>
</View>
<View style={{ flexDirection: 'column', flex: 0.25, justifyContent: 'center', backgroundColor: '#bfd1dd', alignItems: 'center', marginHorizontal: 1 }} >
{/* <Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 10, alignContent: 'center', justifyContent: 'center', color: 'black' }}>Agency</Text> */}
{this.state.language != "lang_ch" ? (<Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 10, alignContent: 'center', justifyContent: 'center', color: 'black' }}>{lan_en[0].agency}</Text>) :
(<Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 10, alignContent: 'center', justifyContent: 'center', color: 'black' }}>{lan_ch[0].agency}</Text>)}
<Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 12, alignContent: 'center', justifyContent: 'center', color: 'black' }}>{this.state.agency_code}</Text>
</View>
<View style={{ flexDirection: 'column', flex: 0.25, justifyContent: 'center', backgroundColor: '#bfd1dd', alignItems: 'center', marginHorizontal: 1 }} >
{/* <Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 10, alignContent: 'center', justifyContent: 'center', color: 'black' }}>Status</Text> */}
{this.state.language != "lang_ch" ? (<Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 10, alignContent: 'center', justifyContent: 'center', color: 'black' }}>{lan_en[0].status}</Text>) :
(<Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 10, alignContent: 'center', justifyContent: 'center', color: 'black' }}>{lan_ch[0].status}</Text>)}
<Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 12, alignContent: 'center', justifyContent: 'center', color: 'black' }}>{this.state.statuslabel}</Text>
</View>
</View>
</View>
<View style={{ backgroundColor: '#ffff', flex: 0.9 }}>
<View style={{ flexDirection: 'row', marginHorizontal: '4%', marginVertical: '1%', left: 1 }} >
{/* <View style={{ flexDirection: 'column', flex: 0.2, alignItems: 'center', justifyContent: 'center', backgroundColor: '#ecf5f9', height: 41.5, top: 4.7 }} >
<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51' }}>Agr.Party </Text>
</View> */}
{this.state.custview == 'N' ? (<View style={{ flexDirection: 'column', flex: 1, alignItems: 'center', justifyContent: 'center' }} >
<Autocomplete
// nestedScrollEnabled={true}
data={this.state.customer}
valueExtractor={item => item}
minimumCharactersCount={0}
inputContainerStyle={{
zIndex: -1,
flexDirection: "row",
flexWrap: "wrap",
alignItems: "center",
fontFamily: 'Montserrat-Medium', fontSize: 15,
// paddingHorizontal: 10,
// paddingBottom: 10,
width: "100%",
borderColor: '#000000',
justifyContent: "center",
}}
containerStyle={{ position: 'absolute', top: 55, alignItems: 'center', justifyContent: 'center', right: '5%' }}
placeholder="Agr.Party"
initialValue={this.props.navigation.state.params.ap_cust}
// placeholderColor='#6C6666'
handleSelectItem={(item, id) => this.oncustomer(item)}
inputStyle={{ fontFamily: 'Montserrat-Medium', borderRadius: 5, fontSize: 13, borderColor: '#6C6666', right: 3, backgroundColor: '#ffff' }}
/>
</View>) : (
<View style={{ flexDirection: 'column', flex: 1, alignItems: 'center', justifyContent: 'center' }} >
<Autocomplete
// nestedScrollEnabled={true}
data={this.state.customer}
valueExtractor={item => item}
minimumCharactersCount={0}
inputContainerStyle={{
zIndex: -1,
flexDirection: "row",
flexWrap: "wrap",
alignItems: "center",
fontFamily: 'Montserrat-Medium', fontSize: 15,
// paddingHorizontal: 10,
// paddingBottom: 10,
width: "100%",
borderColor: '#000000',
justifyContent: "center",
}}
containerStyle={{ position: 'absolute', top: 55, alignItems: 'center', justifyContent: 'center', right: '5%' }}
placeholder="Agr.Party"
initialValue={this.props.navigation.state.params.ap_cust}
// placeholderColor='#6C6666'
handleSelectItem={(item, id) => this.oncustomer(item)}
inputStyle={{ fontFamily: 'Montserrat-Medium', borderRadius: 5, fontSize: 13, borderColor: '#6C6666', right: 3, backgroundColor: '#ffff' }}
/>
</View>
// <View style={{flexDirection:'row' ,flex: 1,}}>
// <View style={{
// flexDirection: 'column', flex: 0.9, alignItems: 'center', justifyContent: 'center', borderRadius: 0,
// borderColor: '#6C6666',
// backgroundColor: '#ffff',
// borderRadius:5,width:'105%',
// borderWidth: 1,top:5,height:41,
// }} >
// <TextInput
// style={{height: 40,
// width: '88%',
// left: 14,
// fontSize: 13,
// color: '#000000',
// fontFamily: 'Montserrat-Medium',
// }}
// editable={false}
// onChangeText={(cust) => this.oncustomer({ cust })}
// value={this.state.cust}
// />
// </View>
// <TouchableOpacity onPress={this.clearapcust.bind(this)} style={{flexDirection:'column',flex:0.1 ,backgroundColor:'#ffff' ,alignItems:'center',justifyContent:'center',padding:5,borderWidth:0,borderRadius:10}}>
// <Image resizeMode="contain" source={require('../Images/menu_img/pencil.png')} style={{ height:20, width:45,}} />
// </TouchableOpacity>
// </View>
)}
</View>
<ScrollView keyboardShouldPersistTaps="always" style={{ zIndex: -1 }} >
<View style={{ zIndex: -1 }}>
<View style={{ flexDirection: 'row', marginHorizontal: '4%', zIndex: -1, marginVertical: 5 }} >
{/* <View style={{
flexDirection: 'column', flex: 0.2, alignItems: 'center', justifyContent: 'center', borderRadius: 0,
borderColor: '#ecf5f9',
backgroundColor: '#ecf5f9',
borderWidth: 1,
}} >
<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51' }}>PLA </Text>
</View> */}
<View style={{
flexDirection: 'column', flex: 1, alignItems: 'center', justifyContent: 'center', borderRadius: 5,
borderColor: '#6C6666',
backgroundColor: '#ffff',
borderWidth: 1,
}} >
<TextInput
style={styles.input}
editable={false}
onChangeText={(pla) => this.setState({ pla })}
value={this.state.pla}
/>
</View></View>
<View style={{ flexDirection: 'row', marginHorizontal: '4%', zIndex: -1, marginVertical: 5 }} >
{/* <View style={{
flexDirection: 'column', flex: 0.2, alignItems: 'center', justifyContent: 'center', borderRadius: 0,
borderColor: '#ecf5f9',
backgroundColor: '#ecf5f9',
borderWidth: 1,
}} >
<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51' }}>POL </Text>
</View> */}
<View style={{
flexDirection: 'column', flex: 1, alignItems: 'center', justifyContent: 'center', borderRadius: 5,
borderColor: '#6C6666',
backgroundColor: '#ffff',
borderWidth: 1,
}} >
<TextInput
style={styles.input}
editable={false}
onChangeText={(pol) => this.setState({ pol })}
value={this.state.pol}
/>
</View></View>
<View style={{ flexDirection: 'row', marginHorizontal: '4%', zIndex: -1, marginVertical: 5 }} >
{/* <View style={{
flexDirection: 'column', flex: 0.2, alignItems: 'center', justifyContent: 'center', borderRadius: 0,
borderColor: '#ecf5f9',
backgroundColor: '#ecf5f9',
borderWidth: 1,
}} >
<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51' }}>POD</Text>
</View> */}
<View style={{
flexDirection: 'column', flex: 1, alignItems: 'center', justifyContent: 'center', borderRadius: 5,
borderColor: '#6C6666',
backgroundColor: '#ffff',
borderWidth: 1,
}} >
<TextInput
style={styles.input}
editable={false}
onChangeText={(pod) => this.setState({ pod })}
value={this.state.pod}
/>
</View></View>
<View style={{ flexDirection: 'row', marginHorizontal: '4%', zIndex: -1, marginVertical: 5 }} >
{/* <View style={{
flexDirection: 'column', flex: 0.2, alignItems: 'center', justifyContent: 'center', borderRadius: 0,
borderColor: '#ecf5f9',
backgroundColor: '#ecf5f9',
borderWidth: 1,
}} >
<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51' }}>PLD </Text>
</View> */}
<View style={{
flexDirection: 'column', flex: 1, alignItems: 'center', justifyContent: 'center', borderRadius: 5,
borderColor: '#6C6666',
backgroundColor: '#ffff',
borderWidth: 1,
}} >
<TextInput
style={styles.input}
editable={false}
onChangeText={(pld) => this.setState({ pld })}
value={this.state.pld}
/>
</View></View>
<View style={{ flexDirection: 'row', marginHorizontal: '4%', zIndex: -1, marginVertical: 5 }} >
<View style={{
flexDirection: 'column', flex: 0.2, alignItems: 'center', justifyContent: 'center', borderRadius: 0,
borderColor: '#ffff',
// backgroundColor:'#ffff',
borderWidth: 0,
}} >
</View></View>
</View>
<View style={{ flexDirection: 'column', paddingVertical: 5, backgroundColor: '#ffff' }}>
<View style={styles.routingcontainer}>
<View style={{ flex: 0.3, flexDirection: 'row' }}>
<View style={{ flex: 0.2, flexDirection: 'column' }}>
<Image resizeMode="contain" source={require('../Images/footer_icons/routing.png')} style={{ height: 30, width: 40, tintColor: '#112d51', top: 5 }} />
</View>
<View style={{ flex: 0.7, flexDirection: 'column' }}>
{/* <Text style={{ fontSize: 15, color: '#112d51', fontFamily: 'Montserrat-Bold', alignItems: "center", top: 10 }}>Routing</Text> */}
{this.state.language != "lang_ch" ? (<Text style={{ fontSize: 15, color: '#112d51', fontFamily: 'Montserrat-Bold', alignItems: "center", top: 10 }}>{lan_en[0].routing}</Text>) :
(<Text style={{ fontSize: 15, color: '#112d51', fontFamily: 'Montserrat-Bold', alignItems: "center", top: 10 }}>{lan_ch[0].routing}</Text>)}
</View>
</View>
<LinearGradient colors={['#bfd1dd', '#bfd1dd', '#bfd1dd']} style={{ flex: 0.8, borderRadius: 10, }}>
{/* <View style={{ flex: 0.8, flexDirection: 'column', alignItems: 'center' }}>
<FlatList
data={this.state.routearray}
extraData={this.state.extradata}
horizontal={true}
renderItem={({ item }) => (
<View style={{ flexDirection: 'row', top: 10, marginHorizontal: 5 }}>
<View style={{ flexDirection: 'column', marginHorizontal: 5, flexDirection: 'column', alignItems: 'center' }}>
<Text style={{ fontSize: 12, color: '#112d51', fontFamily: 'Montserrat-Bold', bottom: 1 }}>{item.pol}</Text>
<Image resizeMode="contain" source={require('../Images/footer_icons/Tracking.png')} style={{ height: 20, width: 30, tintColor: '#112d51' }} />
<Text style={{ fontSize: 10, color: '#112d51', fontFamily: 'Montserrat-Bold', }}>{moment([item.etd], 'YYYY/MM/DD mm:ss').format('DD-MMM-YYYY mm:ss')}</Text>
</View>
<View style={{ flexDirection: 'column', marginHorizontal: 15, bottom: 3, flexDirection: 'column', alignItems: 'center' }}>
<Text></Text>
{item.schedule_type == 'Mainline' ? (<Image resizeMode="contain" source={require('../Images/menu_img/s4.png')} style={{ height: 20, width: 50, tintColor: '#112d51' }} />) : null}
{item.schedule_type == 'Feeder' ? (<Image resizeMode="contain" source={require('../Images/menu_img/s4.png')} style={{ height: 20, width: 50, tintColor: '#112d51' }} />) : null}
{item.schedule_type == 'Rail' ? (<Image resizeMode="contain" source={require('../Images/footer_icons/train7.png')} style={{ height: 20, width: 50, tintColor: '#112d51' }} />) : null}
{item.schedule_type == 'Road' ? (<Image resizeMode="contain" source={require('../Images/footer_icons/truck.png')} style={{ height: 20, width: 50, tintColor: '#112d51' }} />) : null}
<Text style={{ fontSize: 12, color: '#112d51', fontFamily: 'Montserrat-Bold', bottom: 1 }}>{item.service_code}</Text>
</View>
<View style={{ flexDirection: 'column', marginHorizontal: 5, flexDirection: 'column', alignItems: 'center' }}>
<Text style={{ fontSize: 12, color: '#112d51', fontFamily: 'Montserrat-Bold', bottom: 1 }}>{item.pod}</Text>
<Image resizeMode="contain" source={require('../Images/footer_icons/Tracking.png')} style={{ height: 20, width: 30, tintColor: '#112d51' }} />
<Text style={{ fontSize: 10, color: '#112d51', fontFamily: 'Montserrat-Bold', marginVertical: 0 }}>{moment([item.eta], 'YYYY/MM/DD mm:ss').format('DD-MMM-YYYY mm:ss')}</Text>
</View>
</View>
)}
/>
</View> */}
<View style={{ flex: 0.8, paddingVertical: 10, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
{/* <FlatList
data={Route}
horizontal={true}
renderItem={({ item }) => ( */}
<View style={{ flexDirection: 'row', marginHorizontal: 5, alignItems: 'center', justifyContent: 'center', top: 5 }}>
<View style={{ flexDirection: 'column', marginHorizontal: 5, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 10, color: '#112d51', fontFamily: 'Montserrat-Bold', marginVertical: 3 }}>{this.state.routeOrigin}</Text>
<Image resizeMode="contain" source={require('../Images/footer_icons/Tracking.png')} style={{ height: 20, width: 30, tintColor: '#112d51' }} />
<Text style={{ fontSize: 10, color: '#112d51', fontFamily: 'Montserrat-Bold', marginVertical: 3 }}>{this.state.routepolterminal}</Text>
<Text style={{ fontSize: 10, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 0 }}>{moment([this.state.etd1], 'YYYY/MM/DD mm:ss').format('DD-MMM-YYYY')}</Text>
</View>
<View style={{ flexDirection: 'column', marginHorizontal: 5, marginVertical: 3, alignItems: 'center', justifyContent: 'center' }}>
<Text></Text>
{/* {item.route == 'ship' ? (<Image resizeMode="contain" source={require('../Images/menu_img/s4.png')} style={{ height: 20, width: 50, tintColor: '#ffff' }} />) : null}
{item.route == 'rail' ? (<Image resizeMode="contain" source={require('../Images/footer_icons/train7.png')} style={{ height: 20, width: 50, tintColor: '#ffff' }} />) : null}
{item.route == 'road' ? (<Image resizeMode="contain" source={require('../Images/footer_icons/truck.png')} style={{ height: 20, width: 50, tintColor: '#ffff' }} />) : null} */}
<Image resizeMode="contain" source={require('../Images/menu_img/s4.png')} style={{ height: 20, width: 50, tintColor: '#112d51' }} />
<Text style={{ fontSize: 12, color: '#112d51', fontFamily: 'Montserrat-Bold', marginVertical: 3 }}>{this.state.routeService}</Text>
</View>
<View style={{ flexDirection: 'column', marginHorizontal: 5, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 10, color: '#112d51', fontFamily: 'Montserrat-Bold', marginVertical: 3 }}>{this.state.routeDelivery}</Text>
<Image resizeMode="contain" source={require('../Images/footer_icons/Tracking.png')} style={{ height: 20, width: 30, tintColor: '#112d51' }} />
<Text style={{ fontSize: 10, color: '#112d51', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{this.state.routepodterminal}</Text>
<Text style={{ fontSize: 10, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 0 }}>{moment([this.state.eta1], 'YYYY/MM/DD mm:ss').format('DD-MMM-YYYY')}</Text>
</View>
{this.state.resetview != 'N' ? <TouchableOpacity onPress={this.resetRouting.bind(this)} style={{ flexDirection: 'column', marginHorizontal: 5, alignItems: 'center', justifyContent: 'center', backgroundColor: '#112d51', height: 25, left: 20, borderRadius: 10, width: 70 }}>
<Text style={{ color: '#ffff', fontFamily: 'Montserrat-Medium', }}>Reset</Text>
</TouchableOpacity> : <View style={{ flexDirection: 'column', marginHorizontal: 5, alignItems: 'center', justifyContent: 'center', backgroundColor: '#7D848C', height: 25, left: 20, borderRadius: 10, width: 70 }}>
<Text style={{ color: '#ffff', fontFamily: 'Montserrat-Medium', }}>Reset</Text>
</View>}
</View>
</View>
<View style={{ borderTopColor: '#112d51', borderTopWidth: 1, marginHorizontal: 5, flexDirection: 'column', top: "5%" }}>
</View>
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 13, color: '#112d51', marginBottom: 5, left: 10, top: 10 }}>{this.props.navigation.state.params.vessel} | {this.props.navigation.state.params.voyage} | {this.props.navigation.state.params.bound}</Text>
{/* <TouchableOpacity style={{left:130,top:10}}>
<Text style={{ fontSize: 12, color: '#ffff', fontFamily: 'Montserrat-Bold',textDecorationLine:'underline'}}>Transhipment</Text>
</TouchableOpacity> */}
</View>
</LinearGradient></View>
</View>
{this.state.disablerates == false ?
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 0.75, }}>
{this.state.language != "lang_ch" ? (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_en[0].equipmentdetails}</Text>) :
(<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_ch[0].equipmentdetails}</Text>)}
{/* <Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>EQUIPMENT DETAILS</Text> */}
</View>
<TouchableOpacity style={{ flexDirection: 'row', height: 35, flex: 0.25, justifyContent: 'center', alignItems: 'center', backgroundColor: 'transparent', width: '100%', marginHorizontal: '7%', borderColor: '#112d51', borderWidth: 1, borderRadius: 7 }} onPress={this.Ratespage.bind(this)}>
<View style={{ flex: 0.4, alignItems: 'center', justifyContent: 'center' }}>
<Icon1 style={{ fontSize: 20, color: '#112d51' }} name="ios-pricetags" />
</View>
<View style={{ flex: 0.6, alignItems: 'center', justifyContent: 'center' }}>
{this.state.language != "lang_ch" ? (<Text style={{ fontSize: 13, color: '#112d51', fontFamily: 'Montserrat-Medium' }}>{lan_en[0].rates}</Text>) :
(<Text style={{ fontSize: 13, color: '#112d51', fontFamily: 'Montserrat-Medium' }}>{lan_ch[0].rates}</Text>)}
</View>
</TouchableOpacity>
</View>
:
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 0.75, }}>
{/* <Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>EQUIPMENT DETAILS</Text> */}
{this.state.language != "lang_ch" ? (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_en[0].equipmentdetails}</Text>) :
(<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_ch[0].equipmentdetails}</Text>)}
</View>
<View style={{ flexDirection: 'row', height: 35, flex: 0.25, justifyContent: 'center', alignItems: 'center', backgroundColor: 'transparent', width: '100%', marginHorizontal: '7%', borderColor: '#bbb', borderWidth: 1, borderRadius: 7 }}>
<View style={{ flex: 0.4, alignItems: 'center', justifyContent: 'center' }}>
<Icon1 style={{ fontSize: 20, color: '#bbb' }} name="ios-pricetags" />
</View>
<View style={{ flex: 0.6, alignItems: 'center', justifyContent: 'center' }}>
{this.state.language != "lang_ch" ? (<Text style={{ fontSize: 13, color: '#bbb', fontFamily: 'Montserrat-Medium' }}>{lan_en[0].rates}</Text>) :
(<Text style={{ fontSize: 13, color: '#bbb', fontFamily: 'Montserrat-Medium' }}>{lan_ch[0].rates}</Text>)}
{/* <Text style={{ fontSize: 15, color: '#112d51', fontFamily: 'Montserrat-Medium'}}>Rates</Text> */}
</View>
</View>
</View>
}
{/* <View style={{ flexDirection: 'row'}}>
<View style={{ flex:0.7, }}>
<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>EQUIPMENT DETAILS</Text>
</View>
<TouchableOpacity style={{ flex:0.3, justifyContent: 'center',alignItems:'center',backgroundColor:'#112d51',width:'86%',marginHorizontal:'7%' }} onPress={this.Ratespage.bind(this)}>
<Text style={{ fontSize: 17, color: '#fff' }}>Rates</Text>
</TouchableOpacity>
</View> */}
{this.state.ratesscreen == 'N' ?
<View style={{ flexDirection: 'row', backgroundColor: '#ffff' }} >
<View style={{ flexDirection: 'column', flex: 0.7, alignItems: 'center', justifyContent: 'center', marginHorizontal: '3%' }}>
{/* <Autocomplete
data={this.state.equipment}
valueExtractor={item => item}
minimumCharactersCount={0}
inputContainerStyle={{
zIndex: -1,
flexDirection: "row",
flexWrap: "wrap",
alignItems: "center",
fontFamily: 'Montserrat-Medium', fontSize: 15,
// paddingHorizontal: 10,
// paddingBottom: 10,
width: "100%",
borderColor: '#000000',
justifyContent: "center",
}}
containerStyle={{ position: 'absolute', top: 60, alignItems: 'center', justifyContent: 'center', marginHorizontal: '3%', right: 5 }}
placeholder="Eqp.Type"
placeholderColor='#000000'
handleSelectItem={(item, id) => this.onfromLocation(item)}
inputStyle={{ fontFamily: 'Montserrat-Medium', fontSize: 13, backgroundColor: '#ffff', borderColor: '#bbb' }}
initialValue={this.state.fromLocation}
/> */}
{this.state.disable == false ?
<Dropdown
data={this.state.equipmentType1}
dropdownOffset={{ top: 5 }}
containerStyle={{
borderRadius: 5,
borderColor: '#bbb',
borderWidth: 1,
marginVertical: '1%',
fontSize: 13,
color: '#000000',
width: '100%',
fontFamily: 'Montserrat-Medium',
}}
labelTextStyle={{ labelFontSize: 12, fontFamily: 'Montserrat-Medium' }}
inputContainerStyle={{
fontSize: 10, left: Platform.OS === 'ios' ? 10 : 10,
borderBottomColor: 'transparent', width: Platform.OS === 'ios' ? '80%' : '90%', fontFamily: 'Montserrat-Medium', justifyContent: 'flex-end', alignItems: 'flex-start',
}}
value={this.state.eqptype1}
onChangeText={(eqptype1) => this.oneqp1({ eqptype1 })}
label=''
/>
:
<Dropdown
data={this.state.equipmentType1}
dropdownOffset={{ top: 5 }}
disabled={true}
containerStyle={{
borderRadius: 5,
borderColor: '#bbb',
borderWidth: 1,
marginVertical: '1%',
fontSize: 13,
color: '#000000',
width: '100%',
fontFamily: 'Montserrat-Medium',
}}
labelTextStyle={{ labelFontSize: 12, fontFamily: 'Montserrat-Medium' }}
inputContainerStyle={{
fontSize: 10, left: Platform.OS === 'ios' ? 10 : 10, borderBottomColor: 'transparent', width: Platform.OS === 'ios' ? '80%' : '90%', fontFamily: 'Montserrat-Medium', justifyContent: 'center', alignItems: 'center',
}}
value={this.state.eqptype1}
onChangeText={(eqptype1) => this.oneqp1({ eqptype1 })}
label=''
/>}
</View>
<View style={{
flexDirection: 'column', flex: 0.3, alignItems: 'center', justifyContent: 'center', marginHorizontal: '3%', height: 40, top: 5,
borderRadius: 5,
borderColor: '#bbb',
backgroundColor: '#ffff', borderWidth: 1
}}>
{this.state.disable == false ?
<TextInput
style={styles.input2}
placeholder="QTY"
placeholderTextColor="#000000"
keyboardType='numeric'
maxLength={4}
// onChangeText={(qty1) => this.setState({ qty1 })}
onChangeText={value => this.onTextChanged1(value)}
value={this.state.qty1}
/>
:
<TextInput
style={styles.input1}
editable={false}
placeholder="QTY"
placeholderTextColor="#A9A9A9"
keyboardType='numeric'
maxLength={4}
onChangeText={(qty1) => this.setState({ qty1 })}
value={this.state.qty1}
/>
}
</View>
</View>
:
<View
style={styles.list}
>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 0.75, }}>
<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>Eqptype</Text>
{this.state.language != "lang_ch" ? (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_en[0].eqptype1}</Text>) :
(<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_ch[0].eqptype1}</Text>)}
</View>
<View style={{ flex: 0.75, }}>
<Text style={{ alignContent: 'center', justifyContent: 'center', color: 'black', fontFamily: 'Montserrat-Bold', fontSize: 13, right: 45, marginVertical: '4%' }}>{this.state.eqptype1}</Text>
</View>
<View style={{
flexDirection: 'column', flex: 0.3, alignItems: 'center', justifyContent: 'center', marginHorizontal: '3%', height: 40, top: 5,
borderRadius: 5,
borderColor: '#bbb',
backgroundColor: '#ffff', borderWidth: 1
}}>
{this.state.disable == false ?
<TextInput
style={styles.input2}
placeholder="QTY"
placeholderTextColor="#000000"
keyboardType='numeric'
maxLength={4}
// onChangeText={(qty1) => this.setState({ qty1 })}
onChangeText={value => this.onTextChanged1(value)}
value={this.state.qty1}
/>
:
<TextInput
style={styles.input1}
editable={false}
placeholder="QTY"
placeholderTextColor="#A9A9A9"
keyboardType='numeric'
maxLength={4}
onChangeText={(qty1) => this.setState({ qty1 })}
value={this.state.qty1}
/>
}
</View>
</View>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 0.75, }}>
{this.state.language != "lang_ch" ? (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, bottom: 10 }}>{lan_en[0].rateno}</Text>) :
(<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, bottom: 10 }}>{lan_ch[0].rateno}</Text>)}
</View>
<View style={{ flex: 0.75, }}>
<Text style={{ alignContent: 'center', justifyContent: 'center', color: 'black', fontFamily: 'Montserrat-Bold', fontSize: 13, right: 90, bottom: 10 }}>{this.state.rateno}</Text>
</View>
</View>
</View>
}
<View style={{ flexDirection: 'row' }}>
{/* <View style={{ flex:0.75, }}>
{/* <Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>Rate No.</Text> */}
{/* {this.state.language != "lang_ch" ? (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_en[0].rateno}</Text>) : */}
{/* (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_ch[0].rateno}</Text>)} */}
{/* </View> */}
{/* <View style={{ flex:0.75, }}> */}
{/* <Text style={{ alignContent: 'center', justifyContent: 'center', color: 'black', fontFamily: 'Montserrat-Bold', fontSize: 13, right: 90, marginVertical: '4%' }}>{this.state.rateno}</Text> */}
{/* </View> */}
</View>
{this.state.ratesscreen1 == "N" ?
<View style={{ flexDirection: 'row', backgroundColor: '#ffff' }} >
<View style={{ flexDirection: 'column', flex: 0.7, alignItems: 'center', justifyContent: 'center', marginHorizontal: '3%' }}>
{/* <Autocomplete
data={this.state.equipment}
valueExtractor={item => item}
minimumCharactersCount={0}
inputContainerStyle={{
zIndex: -1,
flexDirection: "row",
flexWrap: "wrap",
alignItems: "center",
fontFamily: 'Montserrat-Medium', fontSize: 15,
// paddingHorizontal: 10,
// paddingBottom: 10,
width: "100%",
borderColor: '#000000',
justifyContent: "center",
}}
containerStyle={{ position: 'absolute', top: 60, alignItems: 'center', justifyContent: 'center', marginHorizontal: '3%', right: 5 }}
placeholder="Eqp.Type"
placeholderColor='#000000'
handleSelectItem={(item, id) => this.onfromLocation(item)}
inputStyle={{ fontFamily: 'Montserrat-Medium', fontSize: 13, backgroundColor: '#ffff', borderColor: '#bbb' }}
initialValue={this.state.fromLocation}
/> */}
{this.state.disable == false ?
<Dropdown
data={this.state.equipmentType1}
dropdownOffset={{ top: 5 }}
containerStyle={{
borderRadius: 5,
borderColor: '#bbb',
borderWidth: 1,
marginVertical: '1%',
fontSize: 13,
color: '#000000',
width: '100%',
fontFamily: 'Montserrat-Medium',
}}
labelTextStyle={{ labelFontSize: 12, fontFamily: 'Montserrat-Medium' }}
inputContainerStyle={{
fontSize: 10, left: Platform.OS === 'ios' ? 10 : 10,
borderBottomColor: 'transparent', width: Platform.OS === 'ios' ? '80%' : '90%', fontFamily: 'Montserrat-Medium', justifyContent: 'center', alignItems: 'center',
}}
value={this.state.eqptype2}
onChangeText={(eqptype2) => this.oneqp2({ eqptype2 })}
label=''
/>
:
<Dropdown
data={this.state.equipmentType1}
dropdownOffset={{ top: 5 }}
disabled={true}
containerStyle={{
borderRadius: 5,
borderColor: '#bbb',
borderWidth: 1,
marginVertical: '1%',
fontSize: 13,
color: '#000000',
width: '100%',
fontFamily: 'Montserrat-Medium',
}}
labelTextStyle={{ labelFontSize: 12, fontFamily: 'Montserrat-Medium' }}
inputContainerStyle={{
fontSize: 10, left: Platform.OS === 'ios' ? 10 : 10,
borderBottomColor: 'transparent', width: Platform.OS === 'ios' ? '80%' : '90%', fontFamily: 'Montserrat-Medium', justifyContent: 'center', alignItems: 'center',
}}
value={this.state.eqptype2}
onChangeText={(eqptype2) => this.setState({ eqptype2 })}
label=''
/>
}
</View>
<View style={{
flexDirection: 'column', flex: 0.3, alignItems: 'center', justifyContent: 'center', marginHorizontal: '3%', height: 40, top: 5,
borderRadius: 5,
borderColor: '#bbb',
backgroundColor: '#ffff', borderWidth: 1
}}>
{this.state.disable == false ?
<TextInput
style={styles.input2}
placeholder="QTY"
placeholderTextColor="#000000"
keyboardType='numeric'
maxLength={4}
// onChangeText={(qty2) => this.setState({ qty2 })}
onChangeText={value => this.onTextChanged2(value)}
value={this.state.qty2}
/>
:
<TextInput
style={styles.input1}
editable={false}
placeholder="QTY"
placeholderTextColor="#A9A9A9"
keyboardType='numeric'
maxLength={4}
onChangeText={(qty2) => this.setState({ qty2 })}
value={this.state.qty2}
/>
}
</View>
</View>
:
<View
style={styles.list}
>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 0.75, }}>
<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>Eqptype</Text>
{this.state.language != "lang_ch" ? (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_en[0].eqptype2}</Text>) :
(<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_ch[0].eqptype2}</Text>)}
</View>
<View style={{ flex: 0.75, }}>
<Text style={{ alignContent: 'center', justifyContent: 'center', color: 'black', fontFamily: 'Montserrat-Bold', fontSize: 13, right: 45, marginVertical: '4%' }}>{this.state.eqptype2}</Text>
</View>
<View style={{
flexDirection: 'column', flex: 0.3, alignItems: 'center', justifyContent: 'center', marginHorizontal: '3%', height: 40, top: 5,
borderRadius: 5,
borderColor: '#bbb',
backgroundColor: '#ffff', borderWidth: 1
}}>
{this.state.disable == false ?
<TextInput
style={styles.input2}
placeholder="QTY"
placeholderTextColor="#000000"
keyboardType='numeric'
maxLength={4}
// onChangeText={(qty1) => this.setState({ qty1 })}
onChangeText={value => this.onTextChanged2(value)}
value={this.state.qty2}
/>
:
<TextInput
style={styles.input1}
editable={false}
placeholder="QTY"
placeholderTextColor="#A9A9A9"
keyboardType='numeric'
maxLength={4}
onChangeText={(qty2) => this.setState({ qty2 })}
value={this.state.qty2}
/>
}
</View>
</View>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 0.75, }}>
{this.state.language != "lang_ch" ? (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, bottom: 10 }}>{lan_en[0].rateno}</Text>) :
(<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, bottom: 10 }}>{lan_ch[0].rateno}</Text>)}
</View>
<View style={{ flex: 0.75, }}>
<Text style={{ alignContent: 'center', justifyContent: 'center', color: 'black', fontFamily: 'Montserrat-Bold', fontSize: 13, right: 90, bottom: 10 }}>{this.state.rateno1}</Text>
</View>
</View>
</View>
}
{/* <View style={{ flexDirection: 'row'}}>
<View style={{ flex:0.75, }}> */}
{/* <Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>Rate No.</Text> */}
{/* {this.state.language != "lang_ch" ? (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_en[0].rateno1}</Text>) :
(<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_ch[0].rateno1}</Text>)} */}
{/* </View>
<View style={{ flex:0.75, }}>
<Text style={{ alignContent: 'center', justifyContent: 'center', color: 'black', fontFamily: 'Montserrat-Bold', fontSize: 13, right: 90, marginVertical: '4%' }}>{this.state.rateno1}</Text>
</View> */}
{/* </View> */}
{this.state.ratesscreen2 == "N" ?
<View style={{ flexDirection: 'row', backgroundColor: '#ffff' }} >
<View style={{ flexDirection: 'column', flex: 0.7, alignItems: 'center', justifyContent: 'center', marginHorizontal: '3%' }}>
{/* <Autocomplete
data={this.state.equipment}
valueExtractor={item => item}
minimumCharactersCount={0}
inputContainerStyle={{
zIndex: -1,
flexDirection: "row",
flexWrap: "wrap",
alignItems: "center",
fontFamily: 'Montserrat-Medium', fontSize: 15,
// paddingHorizontal: 10,
// paddingBottom: 10,
width: "100%",
borderColor: '#000000',
justifyContent: "center",
}}
containerStyle={{ position: 'absolute', top: 60, alignItems: 'center', justifyContent: 'center', marginHorizontal: '3%', right: 5 }}
placeholder="Eqp.Type"
placeholderColor='#000000'
handleSelectItem={(item, id) => this.onfromLocation(item)}
inputStyle={{ fontFamily: 'Montserrat-Medium', fontSize: 13, backgroundColor: '#ffff', borderColor: '#bbb' }}
initialValue={this.state.fromLocation}
/> */}
{this.state.disable == false ?
<Dropdown
data={this.state.equipmentType1}
dropdownOffset={{ top: 5 }}
containerStyle={{
borderRadius: 5,
borderColor: '#bbb',
borderWidth: 1,
marginVertical: '1%',
fontSize: 13,
color: '#000000',
width: '100%',
fontFamily: 'Montserrat-Medium',
}}
labelTextStyle={{ labelFontSize: 12, fontFamily: 'Montserrat-Medium' }}
inputContainerStyle={{
fontSize: 10, left: Platform.OS === 'ios' ? 10 : 10,
borderBottomColor: 'transparent', width: Platform.OS === 'ios' ? '80%' : '90%', fontFamily: 'Montserrat-Medium', justifyContent: 'center', alignItems: 'center',
}}
value={this.state.eqptype3}
onChangeText={(eqptype3) => this.oneqp3({ eqptype3 })}
label=''
/>
:
<Dropdown
data={this.state.equipmentType1}
dropdownOffset={{ top: 5 }}
disabled={true}
containerStyle={{
borderRadius: 5,
borderColor: '#bbb',
borderWidth: 1,
marginVertical: '1%',
fontSize: 13,
color: '#000000',
width: '100%',
fontFamily: 'Montserrat-Medium',
}}
labelTextStyle={{ labelFontSize: 12, fontFamily: 'Montserrat-Medium' }}
inputContainerStyle={{
fontSize: 10, left: Platform.OS === 'ios' ? 10 : 10,
borderBottomColor: 'transparent', width: Platform.OS === 'ios' ? '80%' : '90%', fontFamily: 'Montserrat-Medium', justifyContent: 'center', alignItems: 'center',
}}
value={this.state.eqptype3}
onChangeText={(eqptype3) => this.setState({ eqptype3 })}
label=''
/>
}
</View>
<View style={{
flexDirection: 'column', flex: 0.3, alignItems: 'center', justifyContent: 'center', marginHorizontal: '3%', height: 40, top: 5,
borderRadius: 5,
borderColor: '#bbb',
backgroundColor: '#ffff', borderWidth: 1
}}>
{this.state.disable == false ?
<TextInput
style={styles.input2}
placeholder="QTY"
placeholderTextColor="#000000"
keyboardType='numeric'
// onChangeText={(qty3) => this.setState({ qty3 })}
onChangeText={value => this.onTextChanged3(value)}
maxLength={4}
value={this.state.qty3}
/>
:
<TextInput
style={styles.input1}
editable={false}
placeholder="QTY"
placeholderTextColor="#A9A9A9"
keyboardType='numeric'
onChangeText={(qty3) => this.setState({ qty3 })}
maxLength={4}
value={this.state.qty3}
/>
}
</View>
</View >
:
<View
style={styles.list}
>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 0.75, }}>
<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>Eqptype</Text>
{this.state.language != "lang_ch" ? (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_en[0].eqptype3}</Text>) :
(<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_ch[0].eqptype3}</Text>)}
</View>
<View style={{ flex: 0.75, }}>
<Text style={{ alignContent: 'center', justifyContent: 'center', color: 'black', fontFamily: 'Montserrat-Bold', fontSize: 13, right: 45, marginVertical: '4%' }}>{this.state.eqptype3}</Text>
</View>
<View style={{
flexDirection: 'column', flex: 0.3, alignItems: 'center', justifyContent: 'center', marginHorizontal: '3%', height: 40, top: 5,
borderRadius: 5,
borderColor: '#bbb',
backgroundColor: '#ffff', borderWidth: 1
}}>
{this.state.disable == false ?
<TextInput
style={styles.input2}
placeholder="QTY"
placeholderTextColor="#000000"
keyboardType='numeric'
maxLength={4}
// onChangeText={(qty1) => this.setState({ qty1 })}
onChangeText={value => this.onTextChanged3(value)}
value={this.state.qty3}
/>
:
<TextInput
style={styles.input1}
editable={false}
placeholder="QTY"
placeholderTextColor="#A9A9A9"
keyboardType='numeric'
maxLength={4}
onChangeText={(qty3) => this.setState({ qty3 })}
value={this.state.qty3}
/>
}
</View>
</View>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 0.75, }}>
{this.state.language != "lang_ch" ? (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, bottom: 10 }}>{lan_en[0].rateno}</Text>) :
(<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, bottom: 10 }}>{lan_ch[0].rateno}</Text>)}
</View>
<View style={{ flex: 0.75, }}>
<Text style={{ alignContent: 'center', justifyContent: 'center', color: 'black', fontFamily: 'Montserrat-Bold', fontSize: 13, right: 90, bottom: 10 }}>{this.state.rateno2}</Text>
</View>
</View>
</View>
}
{/* <View style={{ flexDirection: 'row'}}>
<View style={{ flex:0.75, }}> */}
{/* <Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>Rate No.</Text> */}
{/* {this.state.language != "lang_ch" ? (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_en[0].rateno2}</Text>) :
(<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_ch[0].rateno2}</Text>)}
</View> */}
{/* <View style={{ flex:0.75, }}>
<Text style={{ alignContent: 'center', justifyContent: 'center', color: 'black', fontFamily: 'Montserrat-Bold', fontSize: 13, right: 90, marginVertical: '4%' }}>{this.state.rateno2}</Text>
</View> */}
{/* </View> */}
{/* <LinearGradient colors={['#F9C773', '#FDB53B', '#FCA004']} style={{ zIndex: -1, flexDirection: 'column', flex: 0.3, borderRadius: 10, marginHorizontal: 30, marginVertical: 10, paddingVertical: 5 }}> */}
<View style={{ height: "10%", top: "1%" }}>
{this.state.generatebookno.length == '' ? (<TouchableOpacity onPress={this.saveBooking.bind(this)} style={{
flex: 0.5,
flexDirection: 'column',
width: '50%',
backgroundColor: '#4F6878',
height: '100%',
// marginHorizontal:30,
// marginVertical:5,
left: '27%',
top: '2%',
borderRadius: 0,
alignItems: 'center',
justifyContent: 'center'
}}>
{/* <Text style={{ fontSize: 15, color: '#ffff', fontFamily: 'Montserrat-Bold' }}>BOOK</Text> */}
{this.state.language != "lang_ch" ? (<Text style={{ fontSize: 15, color: '#ffff', fontFamily: 'Montserrat-Bold' }}>{lan_en[0].book}</Text>) :
(<Text style={{ fontSize: 15, color: '#ffff', fontFamily: 'Montserrat-Bold' }}>{lan_ch[0].book}</Text>)}
</TouchableOpacity>) : (<TouchableOpacity onPress={this.newbook.bind(this)} style={{
flex: 0.5,
flexDirection: 'column',
width: '50%',
backgroundColor: '#5F8D48',
height: '80%',
// marginHorizontal:30,
// marginVertical:5,
left: '27%',
top: '2%',
borderRadius: 0,
alignItems: 'center',
justifyContent: 'center'
}}>
{/* <Text style={{ fontSize: 15, color: '#ffff', fontFamily: 'Montserrat-Bold' }}>New Book</Text> */}
{this.state.language != "lang_ch" ? (<Text style={{ fontSize: 15, color: '#ffff', fontFamily: 'Montserrat-Bold' }}>{lan_en[0].newbook}</Text>) :
(<Text style={{ fontSize: 15, color: '#ffff', fontFamily: 'Montserrat-Bold' }}>{lan_ch[0].newbook}</Text>)}
</TouchableOpacity>)}
</View>
<View style={{ marginVertical: 50 }}>
<Text> </Text>
</View>
</ScrollView >
</View>
<View style={{ flex: 0.1, flexDirection: 'column' }}>
<PageFooter navigation={this.props.navigation} page={'schedule'}>
</PageFooter>
</View>
{/* </LinearGradient> */}
</KeyboardAvoidingView>
</View>
);
}
}
export default Booking;
const styles = StyleSheet.create({
input: {
height: 41,
width: '90%',
left: 14,
fontSize: 13,
color: '#000000',
fontFamily: 'Montserrat-Medium',
},
input1: {
height: 41,
width: '90%',
left: 14,
fontSize: 13,
color: '#A9A9A9',
borderColor: "lightgrey",
fontFamily: 'Montserrat-Medium',
},
input2: {
height: 41,
width: '90%',
left: 14,
fontSize: 13,
color: '#000000',
fontFamily: 'Montserrat-Medium',
},
list: {
flex: 0.85,
marginHorizontal: '2%',
// width: '90%',
marginVertical: '2%',
elevation: 5,
height: "100%",
paddingVertical: 10,
// backgroundColor: colors[index % colors.length],
backgroundColor: '#fff',
borderRadius: 5,
borderColor: "#000",
height: "100%",
elevation: 10,
shadowColor: '#000',
shadowOffset: { width: 1, height: 1 },
shadowOpacity: 0.4,
shadowRadius: 3,
// borderWidth:1
// left:"2%"
},
calenderbox: {
width: '100%',
backgroundColor: '#ffff',
height: 40,
borderRadius: 5,
borderColor: '#ffff',
borderWidth: 1,
zIndex: -1,
},
container: {
width: '92%',
marginHorizontal: '4%',
// paddingVertical:20
// marginVertical: '1%',
// backgroundColor:'#112d51'
},
routingcontainer: {
zIndex: -1,
backgroundColor: '#ffff',
height: 150,
borderRadius: 10,
borderColor: '#112d51',
borderWidth: 0.5,
marginHorizontal: '3%'
},
glasspane: {
flex: 1,
backgroundColor: 'rgba(52, 52, 52, 0.8)',
width: '100%'
},
activityIndicatorWrapper: {
flex: 0.5,
backgroundColor: '#FFFFFF',
marginHorizontal: '0%',
justifyContent: 'center',
alignItems: 'center',
width: '100%',
height: "100%",
top: "15%",
// borderColor: '#ecf5f9',
borderRadius: 8,
justifyContent: 'center',
},
})
Editor is loading...