Cruces.js

import React, {Component, useState} from 'react';
import {StyleSheet, Text, View, FlatList, StatusBar, Image} from 'react-native';
import { withNavigation } from 'react-navigation';
import ModalSelector from 'react-native-modal-selector';
import { FontAwesome } from '@expo/vector-icons'; 
import RNDatePicker from '@react-native-community/datetimepicker';

import ListaItem from './Lista';
import Header from './Header';
import Footer from './Footer';
import ApiCruces from './src/apis/apiCrucesF';
import DatePicker from 'react-native-datepicker';

type Props = {};

class Cruces extends Component <Props> {
  
  state = {
    loscruces : []
  }
  async componentDidMount(){
    var day = new Date().getDate();
    var month = new Date().getMonth() + 1;
    var year = new Date().getFullYear();
    let today =year + "-" + month + "-" + day;

    const cruces= await ApiCruces.getCrucesPorFecha(today);

    if(cruces.info.resultados > 0){
      const embarcaderos= await ApiCruces.getEmbarcaderos(today);
      let   listaembarca = [];

      for (x=0; x<embarcaderos.length ; x++){
        listaembarca.push({ key: x, label: embarcaderos[x] });
      }

      this.setState({
        resultados : cruces.info.resultados,
        loscruces : cruces.data,
        crucesFiltrados: cruces.data,
        date: today,
        embarcaderos :listaembarca
      });

    }else{
      this.setState({
        resultados : 0,
        loscruces : [],
        crucesFiltrados: [],
        date : today,
        embarcaderos: [],
      });
    }
  }

  async filtrarCruces(label){
    console.log("It Worked");
    const filtrados = this.state.loscruces.filter(function(v){
      return v.nombre_embarcadero===label;
    });
    this.setState({
      crucesFiltrados : filtrados
    });
    console.log(this.state.loscruces);
  }

  async cambiarfecha(fecha){

    this.setState({
      resultados : 1,
      loscruces : [],
      crucesFiltrados: [],
      embarcaderos: [],
      date : fecha,
    });


    let crucesfecha= await ApiCruces.getCrucesPorFecha(fecha);
    if(crucesfecha.info.resultados > 0){
      let embarcaderos= await ApiCruces.getEmbarcaderos(fecha);
      let listaembarca = [];
        for (x=0;x<embarcaderos.length;x++){
          listaembarca.push({ key: x, label: embarcaderos[x] });
        }
      this.setState({
        resultados : crucesfecha.info.resultados,
        loscruces : crucesfecha.data,
        crucesFiltrados: crucesfecha.data,
        date : fecha,
        embarcaderos : listaembarca
      });
    }else{
      this.setState({
        resultados : 0,
        loscruces : [],
        crucesFiltrados: [],
        date : fecha,
        embarcaderos: [],
      });
    }

  }

  cruceatexto(codigo){
    switch(codigo){
      case 0: return 'Cancelado'
              break;
      case 2: return 'Cancelado'
              break;
      case 4: return 'Suspendido'
              break;
      case 8: return 'Normal'
              break;
    }
  }

  ListEmpty = () => {
    if(this.state.resultados == 0){
      return(
        <View>
            <Text style={styles.sinresultados}>No hay Cruces para la fecha seleccionada</Text>
        </View>
      )
    }else{
      return (
        <View style={styles.MainContainer}>
          <Image source={require('./src/assets/loader.gif')} style={styles.logo}/>
        </View>
      );
    }
  };

  render(){

    let index = 0;
      return(
        <View style={styles.container}>
          <StatusBar
           barStyle="light-content"
          />
        <Header navigation={this.props.navigation}></Header>
          <View style={styles.picker}>
            <DatePicker
                iOSDatePickerComponent={(props) => (<RNDatePicker {...props} display={Platform.OS === 'ios' ? 'spinner' : 'default' } themeVariant="light"/>)}
                display="spinner"
                style={styles.datepicker}
                date={this.state.date}
                mode="date"
                placeholder="Fecha"
                format="YYYY-MM-DD"
                minDate="2019-12-01"
                maxDate="2030-12-31"
                confirmBtnText="Confirmar"
                cancelBtnText="Cancelar"
                locale="es"
                customStyles={{
                  dateIcon: {
                    position: 'absolute',
                    left: 0,
                    top: 9,
                    marginLeft: 0,
                    height:37
                  },
                  dateInput: {
                    backgroundColor:'#fafafa',
                    marginLeft: 36,
                    marginRight: 5,
                    marginTop:13,
                    height: 37,
                    borderRadius: 5,
                    borderColor: '#cccccc'
                  }
                }}
                onDateChange={(date) => {this.cambiarfecha(date)}}
                
              />

            <ModalSelector
              style={styles.modal}
              cancelButtonAccessibilityLabel={'Cancelar'}
              cancelText = {'Cancelar'}
              animationType={'fade'}
              overlayStyle={{backgroundColor: 'rgba(0,0,0,0.9)'}}
              data={this.state.embarcaderos}
              initValue="Seleccionar Embarcadero"
              onModalClose={(option)=>{ this.filtrarCruces(option.label) }} 
            />

          </View>
          {/* ORIGINAL */}
          <FlatList
            style={styles.flatlist}
            data={this.state.crucesFiltrados}
            keyExtractor={(item, index) => 'id'+index}
            ListEmptyComponent={this.ListEmpty}
            renderItem={({item}) => {
            if(item.lugar == "Primera Angostura"){
              return(
                <ListaItem  colorEstado={item.estado}>
                  <View style={styles.origen}>
                      <View style={styles.ruta}>
                        <FontAwesome
                        name='map-marker'
                        color='#001173'
                        size = {17}
                        />
                        <Text style={styles.tipo}>
                        {item.lugar}
                        </Text>
                      </View>
                  </View>
                  <View style={styles.estado}>
                    <Text style={styles.estadoText}>Estado del Cruce: {this.cruceatexto(item.estado)}</Text>
                  </View>

                </ListaItem>
              )
            }else{
              return(
              <ListaItem  colorEstado={item.estado}>
              <View style={styles.estado}>
                <Text style={styles.estadoText}>Estado del Cruce: {this.cruceatexto(item.estado)}</Text>
              </View>
              <View style={styles.origen}>
                  <View style={styles.ruta}>
                    
                    <FontAwesome
                    name='map-marker'
                    color='#001173'
                    size = {17}
                    />
                    <Text style={styles.tipo}>
                     {item.origen}
                    </Text>
                    <FontAwesome
                      name='long-arrow-right'
                      color='#b7b7b7'
                      size = {17}
                      style= {styles.arrow}
                    />
                     <FontAwesome
                       name='map-marker'
                       color='#001173'
                       size = {17}
                     />
                    <Text style={styles.tipo}>
                      {item.destino}
                    </Text>
                  </View>
              </View>
              <View style={styles.horarios}>
                  <View style={styles.datacruce}>
                    <Text style={styles.bulletText}>{item.nombre_embarcadero}</Text>

                    <View><Text style={styles.bulletText}>{item.embarcacion}</Text></View>
                  </View>
                  <View style={styles.horacontainer}>
                      <View style={styles.bullet}><Text style={styles.bulletiText}>Presentación</Text></View>
                      <Text style={styles.hora}>{item.presentacion.split(' ')[1].substring(0,5)} hrs.</Text>
                  </View>
                  <View style={styles.horacontainer}>
                      <View style={styles.bullet}><Text style={styles.bulletiText}>Zarpe</Text></View>
                    <Text style={styles.hora}>{item.zarpeOriginal.split(' ')[1].substring(0,5)} hrs.</Text>
                  </View>
              </View>
            </ListaItem>
              )
            }            
            }
            }
          />
        <Footer></Footer>
        </View>
      )
  }
}

const styles = StyleSheet.create({
  container:{
    backgroundColor: '#f7f0f0',
    width: '100%',
    flexDirection: 'column',
    justifyContent: 'flex-start',
    alignItems: 'center',
    flex:1,
  },
  flatlist:{
    width: '95%',
    paddingTop: 15,
    flexGrow: .95,
    marginBottom: 20
  },
  tipo: {
    fontFamily: 'Branding',
    fontSize: 20,
    fontWeight: 'bold',
    color: '#001173',
    marginBottom: 8,
    marginLeft: 4,
  },
  bullet:{
    backgroundColor: '#001173',
    padding: .7,
    width: '80%',
    borderRadius: 7,
    marginTop: 5,
    flexWrap: 'nowrap',
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center',
    width: '95%'
  },
  bulletText:{
    color: '#7c7c7c',
    fontSize: 13,
    marginVertical: 3,
  },
  sinresultados: {
    fontFamily: 'Branding',
    fontSize: 20,
    fontWeight: 'bold',
    color: '#7c7c7c',
    marginBottom: 8,
    marginLeft: 4,
    textAlign: 'center'
  },
  bulletiText:{
    color: 'white',
    fontSize: 13,
    marginVertical: 3,
  },
  origen:{
    flexDirection:'row',
    // flex: .5,
    flexWrap: 'nowrap',
  },
  horarios:{
    flexDirection: 'row',
    alignItems: 'flex-end',
    justifyContent: 'flex-end',
    width: '100%'
    // flex:.5,
  },
  ruta: {
    flexDirection: 'row',
    alignItems: 'baseline',
    // marginBottom: 10,
  },
  arrow:{
    marginHorizontal: 10,
  },
  MainContainer:{
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column',
    height: '100%'
  },
  hora:{
    textAlign: 'center',
    fontSize: 21,
    fontWeight: 'bold',
    color: '#7c7c7c',
    fontFamily: 'Branding',
    width: '100%',
  },
  horacontainer:{
    textAlign: 'center',
    justifyContent: 'center',
    alignItems: 'flex-end',
    width: '35%'
  },
  picker:{
    zIndex: 999,
    flexDirection: 'row',
    justifyContent: 'center'
  },
  modal:{
    marginTop: 8,
    backgroundColor: '#fafafa'
  },
  datacruce:{
    textAlign: 'left',
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    width: '30%',
  },
  containerlista: {
    flexDirection: 'row',
    borderWidth: 3,
    borderColor: '#aaafff',
    backgroundColor: '#333333',
  },
  datepicker: {
    width: 150,
  },
  estado :{
    flexDirection: 'row',
    alignItems: 'baseline',
    width: '100%',
  },
  estadoText: {
    color: '#7c7c7c',
    fontFamily: 'Branding'
  }
});


export default withNavigation(Cruces)