Untitled

mail@pastecode.io avatar
unknown
plain_text
3 years ago
16 kB
2
Indexable
Never
import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Alert, Image, TextInput ,AsyncStorage,FlatList} from 'react-native';
import Icon5 from 'react-native-vector-icons/SimpleLineIcons';
import { Header, Left, Right, Body, Footer, Container } from 'native-base';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { KeyboardAvoidingView } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { Dropdown } from 'react-native-material-dropdown';
import DatePicker from 'react-native-datepicker';
import { lan_en, lan_ch } from '../Component/Language';
import Ecom_service from '../Service/Ecom_service';
import { ScrollView } from 'react-native-gesture-handler';
import Loader from '../Component/Loader';
import moment from 'moment';
import { ProgressDialog } from 'react-native-simple-dialogs';
const sv = new Ecom_service();
var obj=[];
export default class Ecom_Bookingdetails extends Component {

  constructor() {
    super()
    this.state = {
      textInputHolder: 0,
      sumHolder: 0,
      randomNumberOne: 0,
      randomNumberTwo: 0,
      bookingsummary:[],
      progressVisible: false,
      isLoading: false,
    }
  }

  componentDidMount() {

    this.setState({ isLoading: true});
    AsyncStorage.getItem('custcode').then(value => {
              console.log("----custcode---", value)
              this.setState({custcode:value})
              // custcode = value;=
              sv.getecombooking(this.func2.bind(this),value);
            })
    
    // sv.getecom_booking1(this.func2.bind(this));
  }

  func2(response)
  {
    obj = JSON.parse(response.output);
   this.setState({bookingsummary :obj})

   this.setState({ isLoading: false});
  //  console.log("Booking summary....",obj);
  }

  renderRow = (item) => {
    console.log("inside the render row...",item.submitdate);
    return (
      <View style={{flexDirection: 'column'}} >
        < View style={{flexDirection: 'column',borderRadius:10,marginHorizontal:"1%",width:"95%",backgroundColor:'#fff' , shadowColor: '#000',
    shadowOffset: { width: 1, height: 1 },
    shadowOpacity:  0.4,
    shadowRadius: 3,
    elevation: 10}}>
          <View  style={{flexDirection: 'row',marginHorizontal:"1%",marginVertical:"5%"}}>
          <View  style={{flexDirection: 'column'}}>
          <Image resizeMode="contain" source={require('../Images/Ecom/Booking_citrle.png')} style={{ height: 30, width: 40, }} />
                </View>
          <View  style={{flexDirection: 'column',marginHorizontal:"3%"}}>
          <Text  style={{ fontFamily: 'Montserrat',color:"grey",fontSize:14}}>Booking No.</Text>
    <Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>{item.bookNo}</Text>
                </View>
                <View  style={{flexDirection: 'column',marginHorizontal:"5%"}}>
                <Text  style={{fontFamily: 'Montserrat',color:"grey",fontSize:14}}>Online Reference No.</Text>
    <Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>{item.trust_book_no}</Text>
              </View>  
              {/* <View  style={{flexDirection: 'column',marginHorizontal:"3%"}}>
          <Image resizeMode="contain" source={require('../Images/Ecom/Threedots.png')} style={{ height: 20, width: 25,right:25, tintColor: '#000000' }} />
                </View>             */}
               </View>
               < View style={{flexDirection: 'row',marginHorizontal:"5%",marginVertical:"2%"}}> 
               <View style={{ flexDirection: 'column' ,bottom:1}}>
                  <Image resizeMode="contain" source={require('../Images/menu_img/pin.png')} style={{ height: 30, width: 25, tintColor: '#000000' }} />
               </View>
               < View style={{flexDirection: 'column',marginHorizontal:"5%"}}> 
    <Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>{item.originPortId}</Text>
                </View>
               
                < View style={{flexDirection: 'column',marginHorizontal:"10%"}}> 
               
                </View> 
                <View style={{ flexDirection: 'column' ,bottom:1}}>
                <Image resizeMode="contain" source={require('../Images/arrow11.png')} style={{ height: 30, width: 50, right: 60, tintColor: '#000000' }} />
               </View>
                <View style={{ flexDirection: 'column' ,bottom:1}}>
                  <Image resizeMode="contain" source={require('../Images/menu_img/pin.png')} style={{ height: 30, width: 25,right: 50, tintColor: '#000000' }} />
               </View>
                 < View style={{flexDirection: 'column',marginHorizontal:"5%"}}>
    <Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",right: 50,fontSize:14}}>{item.finalPortId}</Text>
           </View>
           </View>

           <View  style={{flexDirection: 'row',marginVertical:"3%"}}>
           < View  style={{flexDirection: 'column',marginHorizontal:"5%"}}>  
           <Text style={{fontFamily: 'Montserrat',color:"grey",fontSize:14}}>Created Date</Text> 
           {item.crdate == null || item.crdate == undefined || item.crdate == [] ?
    <Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}></Text>
         : <Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>{moment([item.crdate], 'YYYY/MM/DD mm:ss').format('DD-MMM-YYYY ')}</Text>
              }
    </View>
           </View>

           <View  style={{flexDirection: 'row',marginVertical:"3%"}}>
           < View  style={{flexDirection: 'column',marginHorizontal:"5%"}}>
           <Text style={{fontFamily: 'Montserrat',color:"grey",fontSize:14,}}>Submitted Date</Text> 
           {item.submitdate == null || item.submitdate == undefined || item.submitdate == [] ?
    <Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}></Text>
         : <Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>{moment([item.submitdate], 'YYYY/MM/DD mm:ss').format('DD-MMM-YYYY ')}</Text>
              }
   
           </View>
           < View  style={{flexDirection: 'column',marginHorizontal:"3%"}}>
           <Text style={{fontFamily: 'Montserrat',color:"grey",fontSize:14,}}>Status</Text> 
    <Text style={{ fontFamily: 'Montserrat-Bold',color:"green",fontSize:14,backgroundColor:"white"}}>{item.statusDesc}</Text>
           </View>
           </View>

           <View  style={{flexDirection: 'row',marginVertical:"3%"}}>
           < View  style={{flexDirection: 'column',marginHorizontal:"5%"}}>  
           <Text style={{fontFamily: 'Montserrat',color:"grey",fontSize:14}}>Submitted By</Text> 
    <Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>{item.cruser}</Text>
           </View>
           
           </View>
           {/* <View  style={{flexDirection: 'column',marginVertical:"1%"}}>
      
           </View> */}
           <View  style={{flexDirection: 'row',marginVertical:"3%"}}>
           < View  style={{flexDirection: 'column',marginHorizontal:"5%"}}>  
           <Text style={{fontFamily: 'Montserrat',color:"grey",fontSize:14}}>Confirmed Date</Text> 
           {item.confirmedDate == null || item.confirmedDate == undefined || item.confirmedDate == [] ?
    <Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}></Text>
         : <Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>{moment([item.confirmedDate], 'YYYY/MM/DD mm:ss').format('DD-MMM-YYYY ')}</Text>
              }
          {/* <Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>{moment([item.confirmedDate], 'YYYY/MM/DD mm:ss').format('DD-MMM-YYYY ')}</Text>    */}
           </View>
           < View  style={{flexDirection: 'column',marginHorizontal:"5%"}}>  
           <Text style={{fontFamily: 'Montserrat',color:"grey",fontSize:14}}>DG Status</Text> 
          <Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>{item.dgStatus}</Text>
           </View>
           < View  style={{flexDirection: 'column',marginHorizontal:"1%"}}>
           <Text style={{fontFamily: 'Montserrat',color:"grey",fontSize:14}}>Tues count</Text> 
          <Text style={{ fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>{item.tuesCount}</Text>
           </View>
           </View>
              <View  style={{flexDirection: 'row',marginVertical:"3%",marginHorizontal:"5%"}}>
                <TouchableOpacity onPress={() => this.props.navigation.navigate('Ecom_BookingView',{bookno:item.bookNo,origin:item.originPortId,delivery:item.finalPortId,status:item.status,lrpbookno:item.trust_book_no,lrpecombookno:item.lrpEcomStatus,appversion:item.appVersion})}  style={{flexDirection: 'row'}}>
              < View  style={{flexDirection: 'column'}}>  
              <Image resizeMode="contain" source={require('../Images/Ecom/View.png')} style={{ height: 20, width: 25,tintColor: 'green' }} />
           </View>
              < View  style={{flexDirection: 'column'}}>  
           <Text style={{fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>View</Text> 
           </View>

  </TouchableOpacity>
  <View  style={{marginHorizontal:"6%"}}>
  <TouchableOpacity onPress={() => this.props.navigation.navigate('Ecom_BookingView',{bookno:item.bookNo,origin:item.originPortId,delivery:item.finalPortId,status:item.status,lrpbookno:item.trust_book_no,lrpecombookno:item.lrpEcomStatus,appversion:item.appVersion})}  style={{flexDirection: 'row'}}>
              < View  style={{flexDirection: 'column'}}>  
              <Image resizeMode="contain" source={require('../Images/Ecom/reuse.png')} style={{ height: 20, width: 25,tintColor: 'green' }} />
           </View>
              < View  style={{flexDirection: 'column'}}>  
           <Text style={{fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>Reuse</Text> 
           </View>

  </TouchableOpacity>
  </View>
  <View  style={{}}>
  <TouchableOpacity onPress={() => this.props.navigation.navigate('Ecom_BookingView',{bookno:item.bookNo,origin:item.originPortId,delivery:item.finalPortId,status:item.status,lrpbookno:item.trust_book_no,lrpecombookno:item.lrpEcomStatus,appversion:item.appVersion})}  style={{flexDirection: 'row'}}>
              < View  style={{flexDirection: 'column'}}>  
              <Image resizeMode="contain" source={require('../Images/Ecom/print.png')} style={{ height: 20, width: 25}} />
           </View>
              < View  style={{flexDirection: 'column'}}>  
           <Text style={{fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>Print</Text> 
           </View>

  </TouchableOpacity>
  </View>

  {/* < View  style={{flexDirection: 'column',}}>  
              <Image resizeMode="contain" source={require('../Images/Ecom/reuse.png')} style={{ height: 20, width: 25,tintColor: 'green' }} />
           </View>
              < View  style={{flexDirection: 'column',marginVertical:"1%",marginHorizontal:"1%"}}>  
           <Text style={{fontFamily: 'Montserrat-Bold',color:"#000",fontSize:14}}>Reuse</Text> 
           </View>
           < View  style={{flexDirection: 'column',}}>  
              <Image resizeMode="contain" source={require('../Images/Ecom/print.png')} style={{ height: 20, width: 25 }} />
           </View>
              < View  style={{flexDirection: 'column',marginVertical:"1%",marginHorizontal:"1%"}}>  
           <Text style={{fontFamily: 'Montserrat-Bold',color:"black",fontSize:14}}>Print</Text> 
           </View> */}
           <View style={{flexDirection:'column'}}>
<Image resizeMode="stretch" source={require('../Images/menu_img/orange.png')} style={{ left:"3%",top:5,height: 50, width: 100,tintColor:'#5fbf64'}} />
  </View>
           </View>
        
           </ View>

           <View  style={{flexDirection: 'column',marginVertical:"1%"}}>
      
      </View>
        </ View>


        
    )
}

  render() {
    return (
        <View style={{flex:1,backgroundColor:'#fff'}}>
              <Header androidStatusBarColor="#112d51"
                    style={{
                        marginHorizontal: -2,
                        marginTop: -2,
                        backgroundColor: '#112d51',
                        height: 60,
                        bottom: 25
                    }}>
                    <Left>
                        <View style={{ flexDirection: 'row' }}>
                        <View style={{ flexDirection: 'column' }}>
                        <TouchableOpacity  onPress={() => this.props.navigation.navigate('Ecom_Booking')} style={{
                            position: 'relative',
                            width: "100%",
                            height: "100%",
                            right: "5%",
                        }} >
                          
                            <Icon style={{ fontSize: 30, top: "20%", color: '#ffffff' }} name="arrow-back" />
                        </TouchableOpacity>
                        </View>
                        <View style={{ flexDirection: 'column' ,top:"15%"}}>
                        {/* <Image resizeMode="contain"
                    source={require('../Images/Ecom/Tariff.png')} style={{ width: 35, height: 35}}
                      /> */}
                      </View>
                    </View>
                    </Left>
                    <Body >
                  
                    <Text style={{ fontSize: 15, color: '#ffffff', fontFamily: 'Montserrat-Bold', alignItems: "center",right:  Platform.OS == 'ios' ? "30%":15,width:"120%" }}>BOOKING</Text>
                     
                    </Body>
                    <Right>
                    {/* <Image resizeMode="contain"
                    source={require('../Images/icons/customerlogin.png')} style={{ width: 35, height: 35,tintColor:'#bbb'}}
                      /> */}
                    </Right>
                </Header>
                {/* <ProgressDialog
                    visible={this.state.progressVisible}
                    title="Loading"
                    message="Please, wait..."
                    titleStyle={{ fontFamily: 'Montserrat' }}
                /> */}
                 <Loader isLoading={this.state.isLoading} />
                <ScrollView>
                <View style={{flex:0.6,marginVertical:'5%',elevation:0,backgroundColor:'#ffff',borderRadius:10,justifyContent:'center'}} >
               
            
                        <View style={{ flexDirection: 'row', paddingVertical: 5 ,left:10,}}>
                         
                        <FlatList
                data={this.state.bookingsummary}
                renderItem={({ item }) => this.renderRow(item)}
              />
               
                                </View>
               
                </View>
                </ScrollView>
        </View>
     
    );
  }
}

const styles = StyleSheet.create({
  Container: {
    flex: 0.3,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#FFF',
    fontSize: 18,
    textAlign: 'center',
    padding: 5,
    fontFamily: 'Montserrat-Bold', 
  },
  captchaContainerView: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10,
    borderColor: '#ffff',
    width: '90%',
    height: 100,
    // elevation:5,
    borderWidth: 1,
    padding: 5,
    backgroundColor: '#F5F1F1'
  },
  textInputStyle: {
    textAlign: 'center',
    height: 40,
    width: 150,
    borderWidth: 1,
    borderColor: '#4CAF50',
    borderRadius: 7,
  },
  button: {
    width: '80%',
    height:40,
    borderRadius: 10,

  },
  calenderbox: {

    width: '100%',
    backgroundColor: '#ffff',
    height: 37,
    borderRadius: 5,
    borderColor: '#ffff',
    borderWidth: 0,
    zIndex: -1,

},
});