Create Request View

CreateRequest.vue

<template>
  <div class="h-100">
    <div class="row h-100">
      <div class="col-sm-4 steps-container">
        <div class="progressbar-wrapper">
          <ul class="progressbar">
            <li
              :class="{'active': currentStep == 1, 'filled':step1Filled}"
              @click="navigateToStep(1)"
            >Datos del viaje</li>
            <li
              :class="{'active': currentStep == 2, 'filled':step2Filled}"
              @click="navigateToStep(2)"
            >Datos del Pasajero</li>
            <li
              :class="{'active': currentStep == 3, 'filled':step3Filled}"
              @click="navigateToStep(3)"
            >Datos del Vehiculo</li>
          </ul>
        </div>

        <div class="form-wrapper">
          <div v-show="currentStep==1" class="step-1">
            <AddressField :isInvalid=pickupIsValid :withInitData=true labelText="Punto de Recogida." placeholderText="Escribe aqui una dirección" v-on:didSelectAddress="didSelectPickUp"/>
            <AddressField ref="refDropOff" :isInvalid=dropoffIsValid :withInitData=false  labelText="Punto de Destino." placeholderText="Escribe aqui una dirección" v-on:didSelectAddress="didSelectDropOff" />
            <div class="form-group">
              <label for="puntoDeReferencia">Punto de referencia del lugar de recogida.</label>
              <textarea class="form-control" v-model="pickupReference" id="puntoDeReferencia" rows="3"></textarea>
            </div>
            <div>
              <button @click="navigateToStep(2)" type="button" class="btn btn-primary">
                <span class="cui-contrast"></span>Siguiente
              </button>
            </div>
          </div>
          <div v-show="currentStep==2" class="step-2">
            <div class="form-group">
              <label for="firstName">Nombre</label>
              <input v-model="firstName" :class="{'is-invalid': firstNameIsValid}" type="text" class="form-control" id="firstName" placeholder="Escribe el Nombre "
              />
              <div class="invalid-feedback">Este campo no puede estar vacio</div>
            </div>
            <div class="form-group">
              <label for="lastName">Apellido</label>
              <input v-model="lastName" :class="{'is-invalid': lastNameIsValid}" type="text" class="form-control" id="lastName" placeholder="Escribe el Apellido "
              />
              <div class="invalid-feedback">Este campo no puede estar vacio</div>
            </div>
            <div class="form-group">
              <label for="telephone">Teléfono</label>
              <VuePhoneNumberInput v-model="telephone" size="sm" :class="{'is-invalid': telephoneIsValid}"
                default-country-code="HN" color="#515b65" 
                required :translations="translation" :dark-color="darkModeTelephoneInput" 
                :dark="true" :clearable="true"  @update="getDataInputNumberPhone($event)" />
              <!-- <input v-model="telephone" :class="{'is-invalid': telephoneIsValid}" type="number" class="form-control" id="telephone" placeholder="Teléfono " /> -->
              <div class="invalid-feedback">Este campo no puede estar vacio</div>
            </div>
            
            <div class="form-group">
              <label for="telephone">Correo electrónico</label>
              <div class="input-group">
                <span class="input-group-prepend">
                  <span class="input-group-text">
                    <i class="fa fa-envelope"></i>
                  </span>
                </span>
                <input type="email" class="form-control" id="email" placeholder="[email protected]"  v-model="email"  autocomplete="off">
              </div>
              <small class="text-muted">ej. [email protected]</small>
              <div class="invalid-feedback">Este campo no puede estar vacio</div>
            </div>
        
            <div>
              <button @click="navigateToStep(1)" type="button" class="btn btn-secondary spacing">
                <span class="cui-contrast"></span> Atrás
              </button>
              <button @click="navigateToStep(3)" type="button" class="btn btn-primary spacing">
                <span class="cui-contrast"></span>Siguiente
              </button>
            </div>
          </div>
          <div v-show="currentStep==3" class="step-3">
            <div class="form-group">
              <label for="puntoDeReferencia">Selecciona Tipo de Vehiculo</label>
              <div class="scrolling-wrapper-flexbox">
                <VehicleTypeCard v-for="vehicle in vehicleTypeList" v-on:didSelectTypeVehicle="didSelectTypeVehicle" :vehicleType="vehicle" :key="vehicle.id" />
              </div>
              <p class="text-danger" v-if="typeVehicleIsValid">Seleccione un tipo de vehiculo para hacer la solicitud</p>
            </div>
            <div class="form-group">
              <div class="scrolling-wrapper-flexbox">
                <PaymentMethodsBtnRadio :methodPayment="paymentMethods" @didSelectPayment='methodDidSelectPayment($event)' labelName="Seleccione un método de pago" />
              </div>
              <p class="text-danger" v-if="typeVehicleIsValid">Seleccione una forma de pago para pedir el Ryte.</p>
            </div>
            <!-- <div v-if="methodPaymentSelected === 3" class="form-group">
              <div>
                <label for="envio">Seleccione un método de envío</label>
                <select name="envio" id="" v-model="sendRemotePayment" class="form-control">
                  <option value="1" >SMS</option>
                  <option value="2">Email</option>
                </select>
              </div>
              <p class="text-danger" v-if="typeVehicleIsValid">Seleccione una forma de pago para hacer la solicitud</p>
            </div> -->
            <div class="form-group">
              <label for="observation">Observación</label>
              <textarea class="form-control" v-model="observation"  id="observation" rows="3"></textarea>
            </div>
            <div>
              <button @click="navigateToStep(2)" type="button" class="btn btn-secondary spacing">
                <span class="cui-contrast"></span> Atrás
              </button>
              <button @click="requestBooking" type="button" class="btn btn-primary spacing">
                <span class="cui-contrast"></span>Pedir un Ryte
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="d-flex justify-content-center">
          <h2>En espera</h2>
        </div>
        <div class="row" v-if="bookingsArrived.length === 0">
          <div class="col-12 text-center">
              <span>No hay Rytes en espera</span>
          </div>
        </div>
        <div v-else v-for="booking in getBookingsArrived" :key="booking.bookingId">
          <Booking v-on:didRemoveBooking="didRemoveBooking" @click.native="didSelectBooking(booking)" :booking="booking" :key="booking.bookingId" />
        </div>
      </div>
      <div class="col-sm-4 last-column">
        <div class="d-flex justify-content-center">
          <h2>En el Ryte</h2>
        </div>
        <div class="row" v-if="bookingOnTrip.length === 0">
          <div v-if="bookingsArrived" class="col-12 text-center">
              <span>No hay Rytes en curso</span>
          </div>
        </div>
        <div v-else v-for="booking in getBookingOnTrip" :key="booking.bookingId">
          <Booking v-on:didRemoveBooking="didRemoveBooking" @click.native="didSelectBooking(booking)" :booking="booking" :key="booking.bookingId" />
        </div>
      </div>
    </div>
    <BookingDetailsAside v-on:didRemoveBooking="didRemoveBooking" @ocultar="showAside = false" :booking="selectedBooking" class="bookingDetails" v-if="showAside" />
  </div>
</template>

<script>
  import Booking  from '@/components/Booking.vue';
  import VehicleTypeCard  from '@/components/VehicleTypeCard.vue';
  import GMapGeocoder  from '@/components/GMapGeocoder.vue';
  import AddressField  from '@/components/AddressField.vue';
  import BookingDetailsAside from '@/components/BookingDetailsAside.vue';
  import PaymentMethodsBtnRadio from '@/components/PaymentMethodsBtnRadio.vue'
  import Api from "../services/Api";
  import VuePhoneNumberInput from 'vue-phone-number-input';
  import 'vue-phone-number-input/dist/vue-phone-number-input.css';
  import { getObjectFromLocalStorage, setObjectToLocalStorage, removeFromList, getDateWithFormat, verifyBookingStatus } from "../shared/utils"
  import swal from "sweetalert";

  export default {
    name: 'createRequest',
    components:{
      Booking,
      GMapGeocoder,
      VehicleTypeCard,
      AddressField,
      BookingDetailsAside,
      PaymentMethodsBtnRadio,
      VuePhoneNumberInput
    },
    data() {
      return {
        sendRemotePayment: 1,
        pickupIsValid: false,
        dropoffIsValid: false,
        firstNameIsValid: false,
        lastNameIsValid: false,
        telephoneIsValid: false,
        emailIsValid: false,
        typeVehicleIsValid: false,
        showAside: false,
        bookingsArrived:[],
        bookingOnTrip:[],
        userData: {},
        firstName:null,
        lastName:null,
        telephone:null,
        email: null,
        pickupReference:null,
        observation:null,
        expanded: 0,
        currentStep: 1,
        step1Filled: false,
        step2Filled: false,
        step3Filled: false,
        pickupData: null,
        dropoffData: null,
        vehicleTypeList: [],
        selectedVehicle: null,
        selectedBooking: {},
        dispatchPointId:null,
        methodPaymentSelected:Api._methodPayment,
        paymentMethods : [
              {
                  value: 1,
                  text: "Efectivo"

              },
              {
                  value: 2,
                  text: "Tarjeta de Crédito"
              },
              {
                  value: 3,
                  text: "Pago Remoto"
              }
        ],
        sendRemotePayment:1,
        translation:{
            countrySelectorLabel: 'Código de pais',
            phoneNumberLabel: 'Número de teléfono',
            example: 'Ejemplo :'
        },
        darkModeTelephoneInput : '#515b65',
        countryCodeNumber: null
      }
    },
    methods: {
      initiateMqtt(){
        this.$mqtt.launch((message, topic) => {
          // Si existe un topic, aca devuelve los mensajes de ese topic
          if (topic){
            var booking = message;
            console.log(message);
            booking.textBookingStatus = this.setTextBookingStatus(booking.status)
            this.setBookingToList(booking);
            this.setBookingsOnGoingInStorage(booking);
            this.removeBooking(booking);
          }else{
            console.log('MQTT Conectado Correctamente', message)
            this.getTopicForDispatchPoint(this.$mqtt);
            console.log(this.$mqtt);
          }
        })
      },
      setBookingToList(booking) {
          removeFromList(this.bookingsArrived,booking.bookingId)
          removeFromList(this.bookingOnTrip,booking.bookingId)
          if (booking.status === 1 || booking.status === 2 || booking.status === 6 || booking.status === 7) {
              this.bookingsArrived.push(booking)
          }else if(booking => booking.status === 9 || booking.status === 12 || booking.status === 5){
              this.bookingOnTrip.push(booking)
          }
          this.$toasted.show(booking.textBookingStatus, {
            theme: "toasted-primary",
            position: "top-center",
            duration : 1000
          })
      },
      setBookingsOnGoingInStorage(booking){
        console.log('Booking entrante:: ', booking);
        let currentBookingsOnGoing =  null;
        if(getObjectFromLocalStorage("bookingsOnGoing") != null && getObjectFromLocalStorage("bookingsOnGoing").length >= 0){
          currentBookingsOnGoing = getObjectFromLocalStorage("bookingsOnGoing");
        }else{
          currentBookingsOnGoing = [];
          setObjectToLocalStorage("bookingsOnGoing", currentBookingsOnGoing);
        }
        if (booking.status === 1 || booking.status === 2 ||  booking.status === 6 || booking.status === 7) {
          console.log('desde SetBookingsOnGoingInStorage ====',booking);
          currentBookingsOnGoing.push(booking);
          setObjectToLocalStorage("bookingsOnGoing", currentBookingsOnGoing); 
          // var resp = currentBookingsOnGoing.find(currentBooking => currentBooking.id === booking.bookingId);
          // if(Object.prototype.toString.call(resp) === '[object Object]'){
          //   console.log('Ya esta en localStorage: ',resp);
          // }else if(resp === undefined){
          //   currentBookingsOnGoing.push(resp);
          //   setObjectToLocalStorage("bookingsOnGoing", currentBookingsOnGoing); 
          // }
        }else if(booking => booking.status === 9){
          currentBookingsOnGoing.push(booking);
          setObjectToLocalStorage("bookingsOnGoing", currentBookingsOnGoing);
          // var resp = currentBookingsOnGoing.find(currentBooking => currentBooking.id === booking.bookingId);
          // if(Object.prototype.toString.call(resp) === '[object Object]'){
          //   console.log('Ya esta en localStorage: ',resp);
          // }else if(resp === undefined){
          //   currentBookingsOnGoing.push(resp);
          //   setObjectToLocalStorage("bookingsOnGoing", currentBookingsOnGoing); 
          // }
        }
        //this.getBookingsOnGoingInStorage();
      },

      removeBooking(booking){
        if(!(getObjectFromLocalStorage("bookingsOnGoing") === null) && 
            (getObjectFromLocalStorage("bookingsOnGoing")).length > 0){
              if(booking.status === 12 || booking.status === 30 ){
                let currentBookings = getObjectFromLocalStorage("bookingsOnGoing");
                let indexBookingToDelete = null;
                indexBookingToDelete = currentBookings.findIndex(b => b.status === 12 || booking.status === 30 || booking.status === 5);
                currentBookings.splice(indexBookingToDelete,1);
                setObjectToLocalStorage("bookingsOnGoing",currentBookings); 
              }
        }
      },
      getBookingsOnGoingInStorage(){
        console.log("Booking desde Storage, antes de validacion +++ ",JSON.parse(localStorage.getItem("bookingsOnGoing")));
        if(!(getObjectFromLocalStorage("bookingsOnGoing") === null)){
          if((getObjectFromLocalStorage("bookingsOnGoing")).length > 0){
            Api.getBookingsLogsByDispatchPointId(this.dispatchPoint.dispatchPointId)
            .then(result => {
              let bookingsLogs = result.data;
              console.log('Bookings Logs===== ', bookingsLogs);
              // let bookingsLocal = getObjectFromLocalStorage("bookingsOnGoing");
              let bookingsLocal = JSON.parse(localStorage.getItem("bookingsOnGoing"));
              console.log('bookingsLocal', bookingsLocal)
              let BookingVerificated = {};
              let BookingsLogsUpdated = [];
              bookingsLogs.forEach( item => {
                BookingVerificated = verifyBookingStatus(bookingsLocal, item.bookingLogsBookingId);
                if(BookingVerificated != null){
                  BookingVerificated.status = item.bookingLogsStatus;
                  
                  //console.log('BookingVerificated:  ',BookingVerificated);
                  //BookingsLogsUpdated.push(BookingVerificated)
                  this.setBookingToList(BookingVerificated);
                }
              });
            //this.setBookingsOnGoingInStorage("bookingsOnGoing",BookingsLogsUpdated);
            }).catch(err => console.log(err));
          }else{
            console.log('BookingsOnGoing VACIO >>>>>>>>>');
          }
        }else {
          console.log('BookingsOnGoing No existe >>>>>>>>>');
        }
      },
      setTextBookingStatus(status) {
        if(status === 1){
            return 'Enviando solicitud';
        }else if(status === 2){
          return 'Ryte Aceptado';
        }else if(status === 5){
            return 'Ryte Cancelado por el conductor';
        }else if(status === 6){
            return 'Conductor en camino';
        }else if(status === 7){
            return  'Llegado';
        }else if(status === 9){
            return 'En Ryte';
        }else if(status === 12){
            return 'Ryte completado';
        }
      },
      navigateToStep(step) {
        let _this = this;

        switch (step) {
          case 1:
            _this.step1Filled = true;
            _this.currentStep = step;

            break;
          case 2:
             _this.step1Filled = true;
             _this.step2Filled = true;

             if (this.pickupData && this.dropoffData){
                this.getFareEstimateAll()
                _this.currentStep = step;
             }else{
                this.pickupIsValid = !this.pickupData
                this.dropoffIsValid = !this.dropoffData
             }
            break;
          case 3:
            console.log("3")
             _this.step1Filled = true;
             _this.step2Filled = true;
             _this.step3Filled = true;

             if (this.firstName && this.lastName && this.telephone){
                _this.currentStep = step;
             }else{
                this.firstNameIsValid = !this.firstName
                this.lastNameIsValid = !this.lastName
                this.telephoneIsValid = !this.telephone
             }
            break;
        }
      },
      getFareEstimateAll: function() {
          var pickupLatLong = this.pickupData.latitude+","+this.pickupData.longitude
          var dropLatLong = this.dropoffData.latitude+","+this.dropoffData.longitude

          var formData = new FormData();

          formData.append('pickupLatLong', pickupLatLong);
          formData.append('pickup', this.pickupData.address);
          formData.append('dropLatLong', dropLatLong);
          formData.append('drop', this.dropoffData.address);

          Api.getFareEstimateAll(formData).then(response => {
            this.vehicleTypeList = []
            var fares = response.data
            var vehicleTypes = response.vehicleTypes
            for (var i = 0; i < fares.length; i++) {
              var fare = fares[i];
              var vehicle = vehicleTypes[i];

              var item = {}
              item.typeId = vehicle.typeId;
              item.typeName = vehicle.typeName;
              item.vehicleImgOn = vehicle.vehicleImgOn;
              item.amount = fare.finalAmount;
              item.timeFare = fare.durationCharged;
              item.distFare = fare.distanceCharged;
              item.distance = fare.distance;
              item.duration = fare.duration;
              item.estimateId = fare.estimateId;
              item.currencySymbol = fare.currencySymbol;

              this.vehicleTypeList.push(item)
            }
          }).catch(error => {
            console.log(error)
          }).finally(()=>{

          });
      },
      didSelectTypeVehicle: function(vehicleType){
        //console.log(vehicleType)
        this.selectedVehicle = vehicleType
      },
      didSelectDropOff: function(address){
        console.log(address)
        this.dropoffData = address
      },
      didSelectPickUp: function(address){
        console.log(address)
        this.pickupData = address
      },
      cleanForm: function(){
        var currentDispatchPoint = getObjectFromLocalStorage('_currentDispatchPoint')
        this.currentStep = 1
        this.pickupIsValid = false;
        this.dropoffIsValid = false;
        this.firstNameIsValid = false;
        this.lastNameIsValid = false;
        this.telephoneIsValid = false;
        this.typeVehicleIsValid = false;
        this.firstName = null;
        this.lastName = null;
        this.telephone = null;
        this.pickupReference = null;
        this.observation = null;
        this.currentStep = 1;
        this.step1Filled = false;
        this.step2Filled = false;
        this.step3Filled = false;
        this.pickupData = {
          title : currentDispatchPoint.address,
          latitude : currentDispatchPoint.latitude,
          longitude : currentDispatchPoint.longitude
        };
        this.dropoffData = null;
        this.vehicleTypeList = [];
        this.selectedVehicle = null;
        this.email = null;
        this.$refs.refDropOff.cleanFields();
      },
      requestBooking: function() {
          var formData = new FormData();

          if (!this.selectedVehicle){
              this.typeVehicleIsValid = true
              return
          }
          //"2019-01-29 14:30:56"
          formData.append('vehicleTypeId', this.selectedVehicle.typeId);
          formData.append('bookingDate', getDateWithFormat());
          formData.append('deviceTime', getDateWithFormat());
          formData.append('amount', this.selectedVehicle.amount);
          formData.append('timeFare', this.selectedVehicle.timeFare);
          formData.append('distFare', this.selectedVehicle.distFare);
          formData.append('distance', this.selectedVehicle.distance);
          formData.append('duration',  this.selectedVehicle.duration);

          formData.append('pickupAddress', this.pickupData.address);
          formData.append('pickupLongitude', this.pickupData.longitude);
          formData.append('pickupLatitude', this.pickupData.latitude);

          formData.append('dropAddress', this.dropoffData.address);
          formData.append('dropLongitude', this.dropoffData.longitude);
          formData.append('dropLatitude', this.dropoffData.latitude);

          formData.append('customerName', this.firstName + " " + this.lastName);
          formData.append('customerLastName', this.lastName);
          formData.append('customerNumber', this.telephone);
          //formData.append('customerEmail', this.email);
          formData.append('customerCountryCode', `\+${this.countryCodeNumber}`);
          formData.append('dispatchPointId', this.dispatchPoint.dispatchPointId);
          formData.append('corporateId', this.userData.corporateId);
          formData.append('pickupReference', this.pickupReference);
          formData.append('observation', this.observation);
          formData.append('estimateId',this.selectedVehicle.estimateId);
          if(this.methodPaymentSelected === 2){
            formData.append('paymentMethod', 1);
          }else{
            formData.append('paymentMethod', this.methodPaymentSelected);
          }
          formData.append('sendRemotePayment', this.sendRemotePayment);

          Api.requestBooking(formData).then(response => {
            
            var booking = response.data
            booking.status = 1
            booking.someOne = {"name": this.firstName + " " + this.lastName, "mobile": this.telephone}
            booking.textBookingStatus = this.setTextBookingStatus(booking.status);
            this.setBookingToList(booking)
            swal("Exitoso","Pedido realizado correctamente.","success" ,{
              buttons: false,
              timer: 3000,
            }).then(resp => {
              if(this.methodPaymentSelected === 3){
                swal("Pago remoto",`Para realiza el pago ingrese al siguiente enlace:  <a href="${response.data.tinyUrl}" target="_blank">${response.data.tinyUrl}<a>`, 'success');
              }
            }).catch(err => console.log(err))
            this.cleanForm();
          }).catch(error => {
            swal("Error","No se pudo realizar el pedido","error");
            console.log("Error al pedir Ryte: ",error);
          });
          //window.location.href = "/#/createRequest";
          
      },
      didSelectBooking(booking){
        this.selectedBooking = booking
        if (booking.status == 6 || booking.status == 7 || booking.status === 9){
          if(this.showAside){
            this.showAside = false
          }else{
            this.showAside = true
          }
        }
      },
      getTopicForDispatchPoint: function($mqtt) {

          Api.getTopicForDispatchPoint(this.dispatchPoint.dispatchPointId).then(response => {
            var topicsList = response.data;

            topicsList.forEach(function(topic, index) {
              $mqtt.subscribe(topic)
            })

          }).catch(error => {
            console.log(error)
          }).finally(()=>{

          });
      },
      didRemoveBooking: function(bookingId){
        console.log(bookingId);
        removeFromList(this.bookingsArrived, bookingId)
        removeFromList(this.bookingOnTrip, bookingId)
      },
      methodDidSelectPayment: function(p){
        this.methodPaymentSelected = p;
      },
      getDataInputNumberPhone(payload){
        this.countryCodeNumber = payload.countryCallingCode;
      }
    },

    mounted(){
      this.userData = getObjectFromLocalStorage("_userData")
      this.dispatchPoint = getObjectFromLocalStorage("_currentDispatchPoint");
      this.initiateMqtt();
      console.log('Bookings Arrived++++<desde Mounted >++++ ',this.bookingsArrived);
      console.log('Bookings On trip++++<desde Mounted >++++  ',this.bookingOnTrip);
      console.log(getDateWithFormat());
      this.getBookingsOnGoingInStorage();
      console.log(this.activeMethods);
      //console.log('SURAAA',this.$data)
    },

    computed:{

      getBookingsArrived(){
        return this.bookingsArrived.reverse();
      },

      getBookingOnTrip(){
        return this.bookingOnTrip.reverse();
      }

      // bookingsArrivedIsEmpty(){
      //   return this.bookingsArrived.length == 0
      // },
      // bookingOnTripIsEmpty(){
      //   return this.bookingOnTrip.length == 0
      // }
    }
  }

</script>

<style scoped>
  .bookingDetails{
    position: fixed;
    z-index:2;
    right:0;
    bottom:0;
  }

</style>