pcpuma-front/src/components/inicio/Equipo.vue

<template lang="pug">
  section
    .modal#modal
      .modal-background
      .modal-card
        header.modal-card-head
          p.modal-card-title Multa Usuario : {{multar.idUsuario}}
          button.delete(v-on:click="toggleModal()")
        section.modal-card-body
          table.table
            thead
              tr
                th(width="10%")
                th(width="20%") No Semanas
                th(width="70%") Descripción
            tbody
              tr(v-for="m in multa")
                td
                  .control
                    label.radio
                      input(type='radio' name="multa" v-bind:value="m.semanas" v-model="multar.multa")
                td {{m.semanas}}
                td {{m.nombre}}
        footer.modal-card-foot
          button.button.is-success(v-on:click="SaveMultar()") Guardar
          button.button(v-on:click="toggleModal()") Cancelar
    p.has-text-centered
      span.is-size-6.space(v-for="s in status") {{` ${s.Tipo.nombre.toUpperCase()} : ${s.cuenta}`}}
    br
    .columns
        .column.is-3
          .field
            .control.has-icons-left
              input.input(v-model="search" placeholder="Buscar")
              span.icon.is-small.is-left
                font-awesome-icon(icon="search")
    table.table.is-fullwidth.is-hoverable.is-narrow
      thead
        tr
          th Carrito
          th Equipo
          th Tipo
          th No Inventario
          th Usuario
          th Hora inicio
          th Hora maximo
          th Multar
          th Regresar
      tbody
        tr(v-bind:class="{'warn-time':timeWarn(p.fechaInicio)}" v-for="p in filteredEquipo")
          td  {{p.Equipo.Carrito.alias}}
          td  {{p.Equipo.equipo_carrito}}
          td  {{p.Equipo.Tipo.nombre}}
          td  {{p.Equipo.no_inventario}}
          td  {{p.idUsuario}}
          td  {{fecha(p.fechaInicio)}}
          td  {{maxFecha(p.fechaInicio)}}
          td
            a.button.is-danger.is-outlined(v-on:click="upMultar(p.idUsuario)")
                    span.icon.is-small
                      font-awesome-icon(icon="flag")
          td
            a.button.is-u-blue.is-outlined(v-on:click="regresar(p.idPrestamo, p.idUsuario)")
                    span.icon.is-small
                      font-awesome-icon(icon="undo")
</template>

<script>
import swal from 'sweetalert'
import api from '../../api'
const axios = require('axios')
export default {
  data () {
    return {
      prestamo: [],
      status: [],
      multa: [],
      multar: {},
      time: true,
      search: ''
    }
  },
  mounted () {
    console.log(this.$store.getters.kiosko)
    axios.get(api.url + '/prestamo?kiosko=' + this.$store.getters.kiosko, {
      headers: {
        'token': this.$store.getters.token
      }
    })
      .then(response => {
        this.prestamo = response.data.info
        this.status = response.data.status
        console.log(this.prestamo)
      })
      .catch(error => {
        swal('Error', error.response.data.err, 'error')
      })
    axios.get(api.url + '/multa', {
      headers: {
        'token': this.$store.getters.token
      }
    })
      .then(response => {
        console.log(response.data.data)
        this.multa = response.data
      })
      .catch(error => {
        swal('Error', error.response.data.err, 'error')
      })
  },
  computed: {
    filteredEquipo: function () {
      return this.prestamo.filter(dat => {
        console.log(this.search)
        if (this.search == '') {
            return true
        }
        if (parseInt(this.search) == dat.Equipo.equipo_carrito) {
          return true
        }
        return false
      })
    }
  },
  methods: {
    toggleModal: function () {
      let modal = document.getElementById('modal')
      if (!modal.classList.contains('is-active')) {
        modal.classList.add('is-active')
      } else {
        modal.classList.remove('is-active')
      }
    },
    SaveMultar: function () {
      axios({
        method: 'put',
        url: api.url + '/multar',
        data: this.multar,
        headers: {
          'token': this.$store.getters.token
        }
      })
        .then(response => {
          swal('Exito', 'Multa completa ', 'success')
        })
        .catch(error => {
          console.log(error)
          swal('Error', error.response.data.err, 'error')
        })
    },
    timeWarn: function (date) {
      let dt = new Date(date)
      dt.setHours(dt.getHours() + 2)
      dt.setMinutes(dt.getMinutes() + 15)
      if (dt < new Date()) {
        return true
      }
      return false
    },
    upMultar: function (usr, eq) {
      this.toggleModal()
      this.multar.idUsuario = usr
    },
    fecha: function (date) {
      let dt = new Date(date)
      var options = { year:'numeric', month: 'numeric',day:'numeric' ,hour: 'numeric', minute: '2-digit' }
      return dt.toLocaleString('en-US',options)
    },
    maxFecha: function (date) {
      let dt = new Date(date)
      var options = { year:'numeric', month: 'numeric',day:'numeric' ,hour: 'numeric', minute: '2-digit' }
      dt.setHours(dt.getHours() + 2)
      dt.setMinutes(dt.getMinutes() + 15)
      let cierre = new Date()
      cierre.setHours(20, 0, 0)
      if (dt > cierre) {
        return cierre.toLocaleString('en-US',options)
      }
      return dt.toLocaleString('en-US',options)
    },
    regresar: function (idPrestamo,idUsuario) {
      axios({
        method: 'put',
        url: api.url + '/devolucion',
        data: {
          idPrestamo,
          idUsuario,
          idOperador: this.$store.getters.operador
        },
        headers: {
          'token': this.$store.getters.token
        }
      })
        .then(res => {
          swal('Exito', 'Peticion exitosa ', 'success')
          axios.get(api.url + '/prestamo?kiosko=' + this.$store.getters.kiosko, {
            headers: {
              'token': this.$store.getters.token
            }
          })
            .then(response => {
              this.prestamo = response.data.info
              this.status = response.data.status
              console.log(this.prestamo)
            })
            .catch(error => {
              swal('Error', error.response.data.err, 'error')
            })
        })
        .catch(err => {
          swal('Error', err.response.data.err, 'error')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.warn-time{
  background-color: rgba(255, 56, 96,.2) !important;
}
.warn-time:hover{
  background-color: rgba(255, 56, 96,.6) !important;
}
tr {
  td{
    text-align: center;
  }
  th{
    text-align: center !important;
  }
}
.space{
  margin-left: 20px;
}

</style>