Modificaciones

Reviewed-on: #1

components/Login.vue

@@ -1,28 +1,23 @@
+<!--
 <template>
   <div class="full-h is-flex is-justify-content-center is-align-items-center">
     <form class="box">
       <div class="has-text-centered">
         <h2 class="is-size-4">
-          <strong
-            >Inscripción para el uso de mesas para dispositivos móviles
-            personales</strong
-          >
+          <strong>Inscripción a servicios de CeDeTec</strong>
         </h2>
       </div>
 
       <b-field label="Número de cuenta" :type="error">
         <b-input
           type="text"
+          placeholder="Número de cuenta"
           @keyup.enter.native="login()"
           v-model="numeroCuenta"
         />
       </b-field>
 
-      <b-field
-        label="Contraseña"
-        message="Recuerda que tu contraseña es tu NIP de escolares"
-        :type="error"
-      >
+      <b-field label="Contraseña" :type="error">
         <b-input
           type="password"
           placeholder="NIP de escolares"
@@ -32,6 +27,13 @@
         />
       </b-field>
 
+      <p class="font" :class="colorSize">
+        Si no recuerdas tu NIP de escolares, ingresa:
+        <a href="https://sistemas.acatlan.unam.mx/recuperanip/" target="_blanc"
+          >aquí</a
+        >
+      </p>
+
       <div class="has-text-centered">
         <b-button
           @click="login()"
@@ -42,6 +44,10 @@
         </b-button>
       </div>
     </form>
+    <b-button @click="$router.push('/profesor/registro-profesor')">
+      Ir al registro de profesor
+    </b-button>
+
   </div>
 </template>
 
@@ -69,25 +75,23 @@ export default {
           numeroCuenta: this.numeroCuenta,
           passwordUser: this.password,
         }
-
         this.updateIsLoading(true)
         axios
-          .post(`${process.env.api}/usuario/login`, data)
+          .post(`${process.env.api}/Usuario/login`, data)
           .then((res) => {
             const info = res.data.Usuario
 
             localStorage.setItem('token', res.data.token)
             localStorage.setItem('idUsuario', info.idUsuario)
             localStorage.setItem('nombre', info.nombre)
-            localStorage.setItem('numeroCuenta', info.numeroCuenta)
+            localStorage.setItem('generacion', info.generacion)
+            localStorage.setItem('usuario', info.numeroCuenta)
             localStorage.setItem('idCarrera', info.idCarrera)
             localStorage.setItem('carrera', info.carrera)
 
-            this.updateIsLoading(false)
-            this.$router.push(`/registro`)
+            this.$router.push('/registro')
           })
           .catch((err) => {
-            console.log(err)
             this.error = 'is-danger'
             this.updateIsLoading(false)
             this.imprimirError(err.response.data)
@@ -103,10 +107,24 @@ export default {
       if (this.error) this.error = ''
     },
   },
+  computed: {
+    colorSize() {
+      return { fontColor: this.error == 'is-danger' }
+    },
+  },
 }
 </script>
 
 <style scoped>
+.font {
+  font-size: 12px;
+  padding-bottom: 10px;
+}
+
+.fontColor {
+  color: red;
+}
+
 .full-h {
   height: 75vh;
 }
@@ -115,3 +133,133 @@ form {
   width: 30rem;
 }
 </style>
+-->
+
+<template>
+  <div class="full-h is-flex is-justify-content-center is-align-items-center">
+    <form class="box">
+      <div class="has-text-centered">
+        <div class="titulo">
+          <h2 class="is-size-4">Sistema de Inscripciones a CEDETEC</h2>
+          <h2 class="is-size-4">para Profesores</h2>
+        </div>
+      </div>
+
+      <b-field label="Número de trabajador" :type="error">
+        <b-input
+          type="text"
+          placeholder="Ingresa tu número de trabajador"
+          @keyup.enter.native="buscarProfesor()"
+          v-model="numeroTrabajador"
+        />
+      </b-field>
+
+      <div class="has-text-centered">
+        <b-button class="is-primary "
+          @click="buscarProfesor"
+          type="is-primary"
+          :disabled="!numeroTrabajador"
+        >
+          Buscar
+        </b-button>
+      </div>
+
+      
+      <p v-if="mensaje" class="has-text-centered mt-4">{{ mensaje }}</p>
+    </form>
+  </div>
+</template>
+
+<script >
+import axios from 'axios'
+import { errorBuscar, profesorYaInscrito } from '~/utils/alerts'
+
+export default {
+  props: {
+    imprimirMensaje: { type: Function, required: true },
+    imprimirWarning: { type: Function, required: true },
+    imprimirError: { type: Function, required: true },
+    updateIsLoading: { type: Function, required: false, default: () => {} },
+  },
+  data() {
+    return {
+      numeroTrabajador: '',
+      profesor: null,
+      mensaje: '',
+      error: '',
+    }
+  },
+  methods: {
+    buscarProfesor() {
+      this.updateIsLoading(true)
+      axios
+        .get(`${process.env.VUE_APP_API}/api/profesores/${this.numeroTrabajador}`)
+        .then((res) => {
+          this.profesor = res.data;
+          const { id_cuenta, nombre } = res.data;
+
+          if (nombre  && id_cuenta ) {
+            // Guardar en localStorage
+            localStorage.setItem('profesorId', id_cuenta);
+            localStorage.setItem('profesorNombre', nombre);
+            
+            this.$router.replace({
+              path: '/profesor/bienvenida'
+              //query: { nombre, idUsuario, numeroCuenta }
+            })
+          } 
+          else {
+            //Borrar
+            /*
+            this.profesor = null
+            this.error = 'is-danger'
+            this.mensaje = 'Profesor no encontrado o sin nombre registrado.'
+            this.imprimirWarning('No se encontró al profesor.')
+            */
+            errorBuscar();
+          }
+            
+        })
+        .catch((err) => {
+          //this.profesor = null
+          //this.error = 'is-danger'
+          //this.mensaje = 'Solo está permitido el acceso a profesores inscritos en la universidad.'
+          //this.imprimirWarning(err.response?.data?.message || 'Error al buscar')
+          //errorBuscar();
+          const status = err.response?.status;
+
+          if (status === 409) {
+            profesorYaInscrito();
+          } else {
+            errorBuscar();
+          }
+        })
+        .finally(() => {
+          this.updateIsLoading(false)
+        })
+    },
+    
+  },
+}
+
+</script>
+
+<style scoped>
+.full-h {
+  height: 75vh;
+}
+
+.is-primary {
+  background-color: green;
+}
+
+.titulo {
+  margin-bottom: 25px;
+  color: goldenrod;
+}
+
+form {
+  width: 30rem;
+}
+</style>
+

components/admin/datosTicket.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="box">
+    <p class="pb-2"><b>Número de cuenta: </b> {{ numeroCuenta }}</p>
+
+    <b-field label="Ticket" horizontal grouped>
+      <b-input v-model="folioA" :disabled="switchFolio" maxlength="6"></b-input>
+      <p class="control">
+        <b-button
+          type="is-primary"
+          icon-left="pencil"
+          @click="habilitar('folio')"
+        >
+        </b-button>
+      </p>
+    </b-field>
+
+    <b-field label="Cantidad" horizontal>
+      <b-input class="pb-5 px-4" expanded v-model="montoA" :disabled="switchMonto" type="number" step="0.01"/>
+      <p class="control">
+        <b-button
+          type="is-primary"
+          icon-left="pencil"
+          @click="habilitar('monto')"
+        >
+        </b-button>
+      </p>
+    </b-field>
+
+    <b-field label="Fecha del ticket" horizontal>
+      <b-datepicker
+        v-model="fechaTicketA"
+        :disabled="switchFecha"
+        :max-date="maxDate"
+        icon="calendar-today"
+      >
+      </b-datepicker>
+      <p class="control">
+        <b-button
+          type="is-primary"
+          icon-left="pencil"
+          @click="habilitar('fecha')"
+        >
+        </b-button>
+      </p>
+    </b-field>
+
+    <div class="has-text-centered pb-2">
+      <b-button
+        type="is-success"
+        @click="
+          imprimirWarning(
+            '¿Estas seguro de querer actualizar esta información?',
+            actualizarTicket
+          )
+        "
+        >Actualizar datos</b-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  props: {
+    imprimirMensaje: { type: Function, required: true },
+    imprimirError: { type: Function, required: true },
+    imprimirWarning: { type: Function, required: true },
+    updateIsLoading: { type: Function, require: true },
+    folio: { type: String, required: true },
+    monto: { type: String, required: true },
+    token: { type: Object, required: true },
+    fechaTicket: { type: Date, required: true },
+  },
+  data() {
+    return {
+      numeroCuenta: localStorage.getItem('noCuenta'),
+
+      switchFolio: true,
+      switchMonto: true,
+      switchFecha: true,
+
+      folioA: '',
+      montoA: '',
+      fechaTicketA: null,
+      maxDate: new Date(),
+    }
+  },
+  methods: {
+    habilitar(tipo) {
+      tipo == 'folio' && this.switchFolio == true
+        ? (this.switchFolio = false)
+        : (this.switchFolio = true)
+
+      tipo == 'monto' && this.switchMonto == true
+        ? (this.switchMonto = false)
+        : (this.switchMonto = true)
+
+      tipo == 'fecha' && this.switchFecha == true
+        ? (this.switchFecha = false)
+        : (this.switchFecha = true)
+    },
+    actualizarTicket() {
+      const data = {
+        idInscripcion: Number(localStorage.getItem('inscripcion')),
+        folio: this.folioA,
+        monto: this.montoA,
+        fechaTicket: this.fechaTicketA,
+      }
+
+      this.updateIsLoading(true)
+      axios
+        .put(`${process.env.api}/admin/actualizar_ticket`, data, this.token)
+        .then((res) => {
+          this.updateIsLoading(false)
+          this.imprimirMensaje(res.data.message)
+          this.bloquearBotones()
+          localStorage.setItem('monto', this.montoA)
+          localStorage.setItem('folio', this.folioA)
+          localStorage.setItem('fechaTicket', this.fechaTicketA)
+          this.$emit('actualizarFolio')
+        })
+        .catch((err) => {
+          this.updateIsLoading(false)
+          this.imprimirError(err.response.data)
+        })
+    },
+    bloquearBotones() {
+      this.switchFolio = true
+      this.switchMonto = true
+      this.switchFecha = true
+    },
+    diaMin(today) {
+      return new Date(
+        today.getFullYear(),
+        today.getMonth(),
+        today.getDate() - today.getDate() + 1
+      )
+    },
+  },
+  created() {
+    ;(this.folioA = this.folio),
+      (this.montoA = this.monto),
+      (this.fechaTicketA = this.fechaTicket)
+  },
+}
+</script>

components/admin/fechasInscripcion.vue

@@ -1,31 +0,0 @@
-<template>
-  <div>
-    <div class="columns">
-      <b-field class="column" label="Apertura de inscripciones">
-        <b-datepicker
-          placeholder="Type or select a date..."
-          icon="calendar-today"
-          editable
-        >
-        </b-datepicker>
-      </b-field>
-
-      <b-field class="column" label="Termino de inscripciones">
-        <b-datepicker
-          placeholder="Type or select a date..."
-          icon="calendar-today"
-          editable
-        >
-        </b-datepicker>
-      </b-field>
-    </div>
-
-    <div class="has-text-centered">
-      <b-button class="is-success"> Asignar Fechas </b-button>
-    </div>
-  </div>
-</template>
-
-<script></script>
-
-<style scoped></style>

components/admin/isCancelacion.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="block pt-5" v-if="motivo">
+    <div class="has-text-centered pb-4">
+      <b-tag type="is-danger" size="is-medium">Ticket declinado</b-tag>
+    </div>
+    <p class="box"><b>Motivo: </b>{{ motivo }}</p>
+  </div>
+</template>
+<script>
+import axios from 'axios'
+
+export default {
+  props: {
+    folio: { type: String, required: true },
+    token: { type: Object, required: true },
+  },
+  data() {
+    return {
+      motivo: '',
+    }
+  },
+  methods: {
+    traerMotivo() {
+      axios
+        .get(`${process.env.api}/admin/motivo?folio=${this.folio}`, this.token)
+        .then((res) => {
+          this.motivo = res.data.motivo
+        })
+        .catch((err) => {
+          console.log(err.response.data)
+        })
+    },
+  },
+  created() {
+    this.traerMotivo()
+  },
+}
+</script>

components/admin/login.vue

@@ -51,7 +51,6 @@ export default {
   methods: {
     login() {
       if (this.usuario && this.password && !this.error) {
-        console.log(typeof this.usuario)
         const data = {
           usuario: this.usuario,
           password: this.password,
@@ -61,13 +60,12 @@ export default {
         axios
           .post(`${process.env.api}/admin/login`, data)
           .then((res) => {
-            const info = res.data
+            localStorage.setItem('usuario', res.data.Usuario.usuario)
             localStorage.setItem('token', res.data.token)
             this.updateIsLoading(false)
             this.$router.push(`/${'admin'}`)
           })
           .catch((err) => {
-            console.log(err)
             this.error = 'is-danger'
             this.updateIsLoading(false)
             this.imprimirError(err.response.data)

components/admin/modalDeclinar.vue

@@ -0,0 +1,79 @@
+<template>
+  <form class="modal-card">
+    <header class="modal-card-head">
+      <h5 class="modal-card-title">
+        ¿Estás seguro de querer declinar este ticket?
+      </h5>
+    </header>
+
+    <section class="modal-card-body">
+      <b-field label="Motivo por el cual vas a declinar el ticket">
+        <b-input type="textarea" maxlength="100" v-model="motivo" expanded />
+      </b-field>
+    </section>
+
+    <footer
+      class="modal-card-foot"
+      style="display: flex; justify-content: space-between"
+    >
+      <b-button type="is-danger" @click="$emit('close')"> Cancelar </b-button>
+
+      <b-button
+        type="is-success"
+        @click="declinarInscripcion(), $emit('close')"
+        :disabled="!motivo"
+      >
+        Enviar
+      </b-button>
+    </footer>
+  </form>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  props: {
+    token: { type: Object, required: true },
+    folio: { type: String, required: true },
+    numeroCuenta: { type: String, required: true },
+    fechaTicket: { type: Date, required: true },
+    idArea: { type: Number, required: true },
+    monto: { type: Number, required: true },
+    imprimirError: { type: Function, required: true },
+    imprimirMensaje: { type: Function, required: true },
+    updateIsLoading: { type: Function, required: true },
+  },
+  data() {
+    return {
+      motivo: '',
+    }
+  },
+  methods: {
+    declinarInscripcion() {
+      const data = {
+        numeroCuenta: this.numeroCuenta,
+        idArea: this.idArea,
+        folio: this.folio,
+        motivo: this.motivo,
+        validacion: 0,
+      }
+
+      this.updateIsLoading(true)
+      axios
+        .put(`${process.env.api}/admin/validar`, data, this.token)
+        .then((res) => {
+          this.updateIsLoading(false)
+          this.imprimirMensaje(res.data.message)
+        })
+        .catch((err) => {
+          this.updateIsLoading(false)
+          this.imprimirError(err.response.data)
+        })
+        .finally(() => {
+          this.$router.go(-1)
+        })
+    },
+  },
+}
+</script>

components/admin/reporte.vue

@@ -4,7 +4,7 @@
       <b-field class="column" label="Fecha inicio">
         <b-datepicker
           v-model="inicio"
-          :min-date="minDate1"
+          :min-date="minDate"
           :max-date="maxDate"
           icon="calendar-today"
           rounded
@@ -15,7 +15,7 @@
       <b-field class="column" label="Fecha fin">
         <b-datepicker
           v-model="fin"
-          :min-date="minDate2"
+          :min-date="inicio"
           :max-date="maxDate"
           icon="calendar-today"
           rounded
@@ -36,15 +36,13 @@ import fileDownload from 'js-file-download'
 
 export default {
   props: {
-    updateIsLoading: { type: Function, require: true },
-    tipo: { type: String, require: true },
+    updateIsLoading: { type: Function, required: true },
   },
   data() {
     return {
       token: '',
 
-      minDate1: new Date('2022-01-01'),
-      minDate2: new Date(),
+      minDate: new Date('2022-01-01'),
       maxDate: new Date(),
 
       inicio: new Date(),
@@ -57,17 +55,15 @@ export default {
       this.updateIsLoading(true)
       axios
         .get(
-          `${process.env.api}/admin/reporte?inicio=${this.inicio}&fin=${this.fin}&tipo=${this.tipo}`,
+          `${process.env.api}/admin/reporte?inicio=${this.inicio}&fin=${this.fin}`,
           this.token
         )
         .then((res) => {
-          fileDownload(res.data, `reporte.csv`)
+          fileDownload(res.data, `inscripcionesCEDETEC.csv`)
           this.updateIsLoading(false)
         })
         .catch((err) => {
-          console.log(err)
           this.updateIsLoading(false)
-          //   this.imprimirError(err.response.data)
         })
     },
   },

components/admin/tableTickets.vue

@@ -39,7 +39,7 @@
         {{ props.row.Usuario.numeroCuenta }}
       </b-table-column>
 
-      <b-table-column field="folio" label="Folio" centered v-slot="props"
+      <b-table-column field="ticket" label="Ticket" centered v-slot="props"
         >{{ props.row.folio }}
       </b-table-column>
 
@@ -48,22 +48,56 @@
       </b-table-column>
 
       <b-table-column
-        field="confirmacion"
-        label="Confirmación"
+        field="Fecha"
+        label="Fecha y hora"
+        centered
+        v-slot="props"
+        >{{ hora(props.row.fechaInscripcion) }}</b-table-column
+      >
+
+      <b-table-column
+        field="inscripcion"
+        label="Inscripción"
         centered
         v-slot="props"
       >
-        <b-tag :type="types(props.row.confirmacion)">
-          {{ props.row.confirmacion }}
-        </b-tag>
+        <b-button
+          type="is-success"
+          v-if="!props.row.folio && !props.row.monto && !props.row.fechaTicket"
+          @click="
+            usuario(
+              props.row.Usuario.numeroCuenta,
+              props.row.Usuario.idUsuario,
+              props.row.idArea
+            ),
+              imprimirWarning(
+                '¿Estas seguro de querer validar esta inscripción ?',
+                validarSinTicket
+              )
+          "
+          >Validar</b-button
+        >
       </b-table-column>
 
-      <b-table-column field="cantidad" label="Cantidad" centered v-slot="props">
-        {{ props.row.monto }}
+      <b-table-column centered v-slot="props">
+        <b-button
+          type="is-danger"
+          @click="
+            inscripcion(props.row.idInscripcion),
+              imprimirWarning(
+                '¿Estas seguro de querer cancelar esta inscripción ?',
+                cancelarInscripcion
+              )
+          "
+          >Cancelar</b-button
+        >
       </b-table-column>
 
-      <b-table-column field="ticket" label="Ticket" centered v-slot="props">
-        <b-button type="is-info" @click="verTicket(props.row)"
+      <b-table-column centered v-slot="props">
+        <b-button
+          type="is-info"
+          v-if="props.row.folio"
+          @click="verTicket(props.row)"
           >Ver ticket</b-button
         >
       </b-table-column>
@@ -73,8 +107,15 @@
 
 <script>
 import axios from 'axios'
+import moment from 'moment'
 
 export default {
+  props: {
+    updateIsLoading: { type: Function, required: true },
+    imprimirError: { type: Function, required: true },
+    imprimirMensaje: { type: Function, required: true },
+    imprimirWarning: { type: Function, required: true },
+  },
   data() {
     return {
       token: '',
@@ -82,40 +123,87 @@ export default {
       inscripciones: [],
       isPaginated: true,
       currentPage: 1,
-      perPage: 5,
+      perPage: 10,
 
+      data: {},
+      dataIns: {},
       validacion: '2',
       numeroCuenta: '',
     }
   },
   methods: {
-    types(value) {
-      return value === true ? 'is-success' : 'is-danger'
-    },
     todasInscripciones() {
+      this.updateIsLoading(true)
       axios
         .get(
           `${process.env.api}/admin/todas_inscripciones?validacion=${this.validacion}&numeroCuenta=${this.numeroCuenta}`,
           this.token
         )
         .then((res) => {
+          this.updateIsLoading(false)
           this.inscripciones = res.data
         })
         .catch((err) => {
-          console.log(err)
-          // this.imprimirError(err.response.data)
+          this.updateIsLoading(false)
+          this.imprimirError(err.response.data)
         })
     },
     verTicket(value) {
-      console.log(value)
-      this.$router.push({
-        path: '/admin/ticket/',
-        query: {
-          folio: value.folio,
-          monto: value.monto,
-          fecha: value.fechaTicket,
-        },
-      })
+      this.$router.push('/admin/ticket')
+      localStorage.setItem('idArea', value.idArea)
+      localStorage.setItem('monto', value.monto)
+      localStorage.setItem('folio', value.folio)
+      localStorage.setItem('fechaTicket', value.fechaTicket)
+      localStorage.setItem('noCuenta', value.Usuario.numeroCuenta)
+      localStorage.setItem('inscripcion', value.idInscripcion)
+      localStorage.setItem('validacion', this.validacion)
+    },
+    usuario(noCuenta, usuario, idArea) {
+      this.data.numeroCuenta = noCuenta
+      this.data.idUsuario = usuario
+      this.data.idArea = idArea
+    },
+    validarSinTicket() {
+      this.updateIsLoading(true)
+      axios
+        .put(
+          `${process.env.api}/admin/validar_sin_ticket`,
+          this.data,
+          this.token
+        )
+        .then((res) => {
+          this.updateIsLoading(false)
+          this.imprimirMensaje(res.data.message)
+          this.todasInscripciones()
+        })
+        .catch((err) => {
+          this.updateIsLoading(false)
+          this.imprimirError(err.response.data)
+        })
+    },
+    inscripcion(inscripcion) {
+      this.dataIns.idInscripcion = inscripcion
+    },
+    cancelarInscripcion() {
+      this.updateIsLoading(true)
+      axios
+        .put(
+          `${process.env.api}/admin/cancelar_inscripcion`,
+          this.dataIns,
+          this.token
+        )
+        .then((res) => {
+          this.imprimirMensaje(res.data.message)
+          this.updateIsLoading(false)
+          this.todasInscripciones()
+        })
+        .catch((err) => {
+          this.imprimirError(err.response.data)
+          this.updateIsLoading(false)
+        })
+    },
+    hora(value) {
+      return moment(value).format('LLL')
     },
   },
   watch: {

components/admin/ticket.vue

@@ -1,46 +1,47 @@
 <template>
-  <div class="columns">
-    <div class="column py-5">
-      <b-image
-        class="img"
-        :src="this.urlTicket"
-        alt="Imagen del ticket"
-      ></b-image>
+  <div class="columns px-2">
+    <div class="column is-one-third py-5">
+      <figure class="containerImg">
+        <b-image class="zoom" :src="urlTicket" alt="Imagen del ticket">
+        </b-image>
+      </figure>
     </div>
+
+    <div class="column is-1"></div>
+
     <div class="column mt-6">
       <p>
         Administrador por favor revisa que todos los datos sean correctos, en
-        caso de ser así valida el ticket
+        caso de ser así valida el ticket y la inscripción.
       </p>
 
-      <div class="box">
-        <p><b>Folio:</b> {{ $route.query.folio }}</p>
-        <p><b>Cantidad: </b> {{ $route.query.monto }}</p>
-        <p><b>Fecha del ticket:</b> {{ fecha($route.query.fecha) }}</p>
-      </div>
+      <IsCancelacion :folio="folio" :token="token" v-if="validacion === 0" />
+
+      <DatosTicket
+        :imprimirMensaje="imprimirMensaje"
+        :imprimirError="imprimirError"
+        :imprimirWarning="imprimirWarning"
+        :updateIsLoading="updateIsLoading"
+        :folio="folio"
+        :monto="monto"
+        :fechaTicket="fechaTicket"
+        :token="token"
+        @actualizarFolio="actualizarFolio"
+      />
+
       <div class="has-text-centered pb-5">
         <b-button
           type="is-success"
           @click="
-            validacion(1),
-              imprimirWarning(
-                '¿ Estas seguro que los datos son correctos y quieres validar este ticekt ?',
-                validar
-              )
+            imprimirWarning(
+              '¿ Estas seguro que los datos son correctos y quieres validar este ticket ?',
+              validar
+            )
           "
           >Validar</b-button
         >
-        <b-button
-          type="is-danger"
-          @click="
-            validacion(0),
-              imprimirWarning(
-                '¿ Estas seguro que los datos son incorrectos y quieres declinar el ticket ?',
-                validar
-              )
-          "
-          >Denegar</b-button
-        >
+        <b-button label="Declinar" type="is-danger" @click="declinarTicket()" />
+
         <b-button type="is-info" @click="regresar()">Regresar</b-button>
       </div>
     </div>
@@ -49,41 +50,58 @@
 
 <script>
 import axios from 'axios'
-import moment from 'moment'
+import DatosTicket from './datosTicket.vue'
+import ModalDeclinar from './modalDeclinar.vue'
+import IsCancelacion from './isCancelacion.vue'
 
 export default {
+  components: {
+    DatosTicket,
+    ModalDeclinar,
+    IsCancelacion,
+  },
   props: {
-    imprimirMensaje: { type: Function, require: true },
-    imprimirError: { type: Function, require: true },
+    imprimirMensaje: { type: Function, required: true },
+    imprimirError: { type: Function, required: true },
     imprimirWarning: { type: Function, required: true },
-    updateIsLoading: { type: Function, require: true },
+    updateIsLoading: { type: Function, required: true },
   },
   data() {
     return {
       token: '',
 
+      numeroCuenta: localStorage.getItem('noCuenta'),
+      fechaTicket: new Date(localStorage.getItem('fechaTicket')),
+      folio: localStorage.getItem('folio'),
+      monto: localStorage.getItem('monto'),
+
+      isFullPage: true,
       urlTicket: '',
-      validado: null,
+      validacion: localStorage.getItem('validacion'),
+
+      zoom: 1,
     }
   },
   methods: {
     traerTicket() {
+      this.updateIsLoading(true)
       axios
-        .get(`${process.env.api}/admin/ticket?folio=${this.$route.query.folio}`)
+        .get(`${process.env.api}/admin/ticket?folio=${this.folio}`)
         .then((res) => {
+          this.updateIsLoading(false)
           this.urlTicket = res.config.url
         })
         .catch((err) => {
+          this.updateIsLoading(false)
           this.imprimirError(err.response.data)
         })
     },
-    validacion(value) {
-      this.validado = value
-    },
     validar() {
       const data = {
-        folio: this.$route.query.folio,
-        validacion: this.validado,
+        numeroCuenta: localStorage.getItem('noCuenta'),
+        folio: this.folio,
+        idArea: localStorage.getItem('idArea'),
+        validacion: 1,
       }
 
       this.updateIsLoading(true)
@@ -94,7 +112,6 @@ export default {
           this.imprimirMensaje(res.data.message)
         })
         .catch((err) => {
-          console.log(err)
           this.updateIsLoading(false)
           this.imprimirError(err.response.data)
         })
@@ -102,11 +119,33 @@ export default {
           this.$router.go(-1)
         })
     },
-    fecha(fecha) {
-      return moment(fecha).format('L')
+    declinarTicket() {
+      const modalProps = {
+        token: this.token,
+        folio: this.folio,
+        numeroCuenta: this.numeroCuenta,
+        fechaTicket: this.fechaTicket,
+        monto: Number(localStorage.getItem('monto')),
+        idArea: Number(localStorage.getItem('idArea')),
+        imprimirError: this.imprimirError,
+        imprimirMensaje: this.imprimirMensaje,
+        updateIsLoading: this.updateIsLoading,
+      }
+
+      this.$buefy.modal.open({
+        props: modalProps,
+        parent: this,
+        component: ModalDeclinar,
+        hasModalCard: true,
+        customClass: 'custom-class custom-class-2',
+        trapFocus: true,
+      })
+    },
+    actualizarFolio() {
+      this.folio = localStorage.getItem('folio')
     },
     regresar() {
-      this.$router.go(-1)
+      this.$router.push('/admin')
     },
   },
   created() {
@@ -123,4 +162,19 @@ export default {
   width: 350px;
   padding-bottom: 470px;
 }
+
+.zoom {
+  transition: transform 0.2s;
+}
+
+.zoom:hover {
+  transform: scale(2);
+  position: relative;
+  display: flex;
+  height: 300px;
+  margin-top: 55%;
+  margin-bottom: 55%;
+  margin-left: 10%;
+  margin-right: 10%;
+}
 </style>

components/informacion/tablaCostos.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <b-table :data="data" :columns="columns"></b-table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: { data: { type: Array, required: true } },
+  data() {
+    return {
+      columns: [
+        { field: 'color', label: 'Color' },
+        { field: 'tamaño', label: 'Tamaño' },
+        { field: 'costo', label: 'Costo' },
+      ],
+    }
+  },
+}
+</script>

components/layouts/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <header>
+  <header v-if="!isInIframe">
     <div class="container py-3">
       <div
         class="
@@ -31,7 +31,17 @@
 </template>
 
 <script>
-export default {}
+export default {
+  data() {
+    return {
+      isInIframe: false,
+    };
+  },
+  mounted() {
+    // Detecta si se está mostrando dentro de un iframe
+    this.isInIframe = window.self !== window.top;
+  },
+};
 </script>
 
 <style scoped>

components/layouts/Logout.vue

@@ -1,13 +1,9 @@
 <template>
   <section>
-    <div class="container is-flex is-justify-content-flex-end">
-      <!-- <div
-      class="
-        container
-        is-flex is-justify-content-space-between is-align-items-center
-      "
+    <div
+      class="container is-flex is-justify-content-space-between is-align-items-center"
     >
-      <h2 class="m-2 has-text-white">{{ usuario }}</h2> -->
+      <h2 class="m-2 has-text-white">{{ usuario }}</h2>
 
       <b-button
         type="is-danger"
@@ -23,19 +19,15 @@
 
 <script>
 export default {
-  // data() {
-  //   return { usuario: localStorage.getItem('usuario') }
-  // },
+  data() {
+    return { usuario: localStorage.getItem('usuario') }
+  },
   methods: {
     cerrarSesion() {
       localStorage.clear()
       this.$router.replace('/')
     },
   },
-  created() {
-    // if (!localStorage.getItem(''))
-    //   this.cerrarSesion()
-  },
 }
 </script>
 

components/registro/CapturaDatos.vue

@@ -1,23 +1,5 @@
 <template>
   <div>
-    <!-- <p class="subtitle is-4"><b>Seleccione el área.</b></p>
-
-    <div class="block">
-      <b-radio v-model="idArea" v-if="area1" native-value="1"
-        ><b-icon icon="microsoft-windows" size="is-small"></b-icon>
-        Windows</b-radio
-      >
-      <b-radio v-model="idArea" v-if="areaMac && area2" native-value="2"
-        ><b-icon icon="apple" size="is-small"></b-icon> Macintosh</b-radio
-      >
-      <b-radio v-model="idArea" v-if="area3" native-value="3"
-        ><b-icon icon="linux" size="is-small"></b-icon> Linux</b-radio
-      >
-      <b-radio v-model="idArea" v-if="area4" native-value="4"
-        ><b-icon icon="laptop" size="is-small"></b-icon> Mesa para Lap</b-radio
-      >
-    </div> -->
-
     <p class="subtitle is-4">
       <b
         >Captura la siguiente información tal cual se muestra en tu ticket de
@@ -27,18 +9,41 @@
 
     <p class="subtitle is-5">
       Recuerda que la aportación es voluntaria y el área destinada debe ser
-      CEDETEC
+      CEDETEC.
+    </p>
+
+    <div class="block">
+      <b-radio v-model="idArea" v-if="area1" native-value="1"
+        ><b-icon icon="microsoft-windows" size="is-small"></b-icon>
+        Windows</b-radio
+      >
+      <b-radio v-model="idArea" v-if="areaMac && area2" native-value="2"
+        ><b-icon icon="apple" size="is-small"></b-icon> Mac</b-radio
+      >
+      <b-radio v-model="idArea" v-if="area3" native-value="3"
+        ><b-icon icon="linux" size="is-small"></b-icon> Linux</b-radio
+      >
+    </div>
+
+    <p class="pb-5">
+      Por favor captura los siguientes datos que se encuentran en tu ticket que
+      se te entregó en cajas.
     </p>
 
     <div class="columns">
+      <b-image
+        class="column mx-2"
+        :src="require('@/assets/ticket.jpeg')"
+        alt="Ticket Acatlán"
+        ratio="16by10"
+      ></b-image>
+
       <div class="column pr-5">
-        <b-field label="Folio">
-          <b-input type="text" maxlength="5" v-model="folio"></b-input>
-        </b-field>
         <b-field label="Monto">
-          <b-input v-model="monto" type="number" maxlength="5"></b-input>
+          <b-input v-model="monto" type="number" step="0.01"></b-input>
         </b-field>
-        <b-field label="Fecha">
+
+        <b-field label="Fecha de Ticket">
           <b-datepicker
             v-model="fechaTicket"
             placeholder="Selecciona la fecha"
@@ -49,6 +54,10 @@
           </b-datepicker>
         </b-field>
 
+        <b-field label="Ticket">
+          <b-input maxlength="6" v-model="folio"></b-input>
+        </b-field>
+
         <b-field>
           <b-upload
             v-model="dropFiles"
@@ -83,13 +92,6 @@
           </span>
         </div>
       </div>
-
-      <b-image
-        class="column pl-5"
-        :src="require('@/assets/ticket.jpeg')"
-        alt="Ticket Acatlán"
-        ratio="16by9"
-      ></b-image>
     </div>
 
     <b-field>
@@ -101,10 +103,10 @@
 
     <div class="has-text-centered pb-5">
       <b-button
-        :disabled="!(idArea !== '' && terminos)"
+        :disabled="!(idArea !== '' && terminos) || disabledError"
         @click="
           imprimirWarning(
-            '¿Estas seguro de querer inscribirte a esta área?',
+            '¿Los datos para la inscripción a CEDETEC son correctos?',
             inscribir
           )
         "
@@ -125,47 +127,60 @@ export default {
     imprimirError: { type: Function, required: true },
     updateIsLoading: { type: Function, required: true },
     inscripcionesUsuario: { type: Array, required: true },
+    idUsuario: { type: Number, required: true },
   },
 
   data() {
     const today = new Date()
     return {
-      datosUsuario: {},
-
+      idArea: '',
       areaMac: false,
       area1: true,
       area2: true,
       area3: true,
-      area4: true,
 
       error: false,
+      disabledError: false,
 
-      idArea: '4',
       folio: '',
       monto: '',
+      fechaTicket: null,
+      dropFiles: [],
       terminos: false,
 
-      fechaTicket: '',
-      dia: 10,
+      idCarrera: '',
+      usuario: '',
+      generacion: 0,
+
+      token: '',
       minDate: this.diaMin(today),
       maxDate: new Date(),
-
-      dropFiles: [],
     }
   },
   methods: {
     async inscribir() {
-      let formData = new FormData()
-      if (
-        this.monto &&
-        this.monto <= 20 &&
-        this.inscripcionesUsuario.length > 0
-      )
+      if (this.dropFiles.length > 0 && !this.folio) {
+        if (!this.fechaTicket) {
+          return this.imprimirError({
+            message: 'Por favor ingresa la fecha del ticket.',
+          })
+        } else {
+          return this.imprimirError({
+            message: 'Por favor ingresa el campo de monto.',
+          })
+        }
+      }
+
+      if (this.monto && this.monto < 20 && this.inscripcionesUsuario.length > 0)
         this.error = true
       else this.error = false
+
+      let formData = new FormData()
       if (this.error === false) {
-        formData.append('idUsuario', this.datosUsuario.idUsuario)
+        formData.append('idUsuario', this.idUsuario)
+        formData.append('numeroCuenta', this.usuario)
         formData.append('folio', this.folio)
+        if (this.monto === '') this.monto = 0
         formData.append('monto', this.monto)
         formData.append('idArea', this.idArea)
         formData.append('fechaTicket', this.fechaTicket)
@@ -176,22 +191,18 @@ export default {
           .post(
             `${process.env.api}/usuario/inscripcionUsuario`,
             formData,
-            this.datosUsuario.token
+            this.token
           )
           .then((res) => {
-            this.$emit('pedirInscripciones')
             this.updateIsLoading(false)
+            this.$emit('pedirInscripciones')
             this.imprimirMensaje(res.data.message)
             this.clear()
           })
           .catch((err) => {
-            console.log(err)
             this.updateIsLoading(false)
             this.imprimirError(err.response.data)
           })
-          .finally((res) => {
-            this.areaPermitida()
-          })
       } else {
         this.imprimirError({
           message: 'El monto mínimo para esta inscripción es de $20 pesos.',
@@ -200,8 +211,8 @@ export default {
     },
     areaPermitida() {
       if (
-        this.datosUsuario.idCarrera === 11122 ||
-        this.datosUsuario.idCarrera === 20226
+        (this.idCarrera === 20425 || this.idCarrera === 20226) &&
+        this.generacion < 2022
       )
         this.areaMac = true
 
@@ -209,7 +220,6 @@ export default {
         if (this.inscripcionesUsuario[i].idArea === 1) this.area1 = false
         if (this.inscripcionesUsuario[i].idArea === 2) this.area2 = false
         if (this.inscripcionesUsuario[i].idArea === 3) this.area3 = false
-        if (this.inscripcionesUsuario[i].idArea === 4) this.area4 = false
       }
     },
     diaMin(today) {
@@ -223,20 +233,15 @@ export default {
       this.idArea = ''
       this.folio = ''
       this.monto = ''
-      this.fechaTicket = ''
-      this.terminos = false
+      ;(this.fechaTicket = null), (this.terminos = false)
       this.dropFiles = []
     },
     deleteDropFile(index) {
       this.dropFiles.splice(index, 1)
     },
     getLocalhostInfo() {
-      this.datosUsuario.idUsuario = Number(localStorage.getItem('idUsuario'))
-      this.datosUsuario.numeroCuenta = localStorage.getItem('numeroCuenta')
-      this.datosUsuario.nombre = localStorage.getItem('idnombre')
-      this.datosUsuario.carrera = localStorage.getItem('carrera')
-      this.datosUsuario.idCarrera = localStorage.getItem('idCarrera')
-      this.datosUsuario.token = {
+      this.idCarrera = Number(localStorage.getItem('idCarrera'))
+      this.token = {
         headers: {
           token: localStorage.getItem('token'),
         },
@@ -244,16 +249,25 @@ export default {
     },
   },
   watch: {
-    inscripcionesUsuario() {
+    inscripcionesUsuario(value) {
+      if (value.length > 0) this.idArea = ''
       this.areaPermitida()
     },
+
     dropFiles(value) {
       if (value.length > 1) this.deleteDropFile(0)
     },
+
+    fechaTicket(fechaT) {
+      if (fechaT > this.maxDate) this.disabledError = true
+      else this.disabledError = false
+    },
   },
   created() {
-    this.areaPermitida()
+    this.usuario = localStorage.getItem('usuario')
+    this.generacion = localStorage.getItem('generacion')
     this.getLocalhostInfo()
+    this.areaPermitida()
   },
 }
 </script>

components/registro/DatosUsuario.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="columns">
-    <div class="column box mr-5">
+    <div class="column box mx-2">
       <p>Cuenta: {{ datosUsuario.numeroCuenta }}</p>
       <p>Nombre: {{ datosUsuario.nombre }}</p>
       <p>Correo: {{ datosUsuario.numeroCuenta }}@pcpuma.unam.acatlan.mx</p>
@@ -22,17 +22,8 @@
         {{ area(props.row.idArea) }}
       </b-table-column>
 
-      <b-table-column
-        field="tiempo"
-        label="Tiempo disponible"
-        centered
-        v-slot="props"
-      >
-        {{ props.row.tiempo }} minutos(s)
-      </b-table-column>
-
-      <b-table-column field="status" label="Confirmo" centered v-slot="props">
-        {{ confirmacion(props.row.status) }}
+      <b-table-column field="tiempo" label="Tiempo asignado" centered>
+        3600 minutos(s)
       </b-table-column>
     </b-table>
   </div>
@@ -42,7 +33,7 @@
 export default {
   props: {
     inscripcionesUsuario: { type: Array, required: true },
-    area: { type: Function, require: true },
+    area: { type: Function, required: true },
   },
   data() {
     return {
@@ -52,7 +43,7 @@ export default {
   methods: {
     icono(idArea) {
       if (idArea === 1) return 'microsoft-windows'
-      if (idArea === 2) return 'mac'
+      if (idArea === 2) return 'apple'
       return idArea === 3 ? 'linux' : 'laptop'
     },
     confirmacion(status) {
@@ -60,7 +51,7 @@ export default {
     },
     getLocalhostInfo() {
       this.datosUsuario.idUsuario = localStorage.getItem('idUsuario')
-      this.datosUsuario.numeroCuenta = localStorage.getItem('numeroCuenta')
+      this.datosUsuario.numeroCuenta = localStorage.getItem('usuario')
       this.datosUsuario.nombre = localStorage.getItem('nombre')
       this.datosUsuario.carrera = localStorage.getItem('carrera')
       this.token = {

components/registro/Steps.vue

@@ -18,14 +18,6 @@
 
       <b-step-item
         step="2"
-        label="Confirmación"
-        type="is-success"
-        :clickable="isStepsClickable"
-      >
-      </b-step-item>
-
-      <b-step-item
-        step="3"
         label="Validación"
         type="is-success"
         :clickable="isStepsClickable"
@@ -38,8 +30,8 @@
 <script>
 export default {
   props: {
-    inscripcion: { type: Object, require: true },
-    area: { type: Function, require: true },
+    inscripcion: { type: Object, required: true },
+    area: { type: Function, required: true },
   },
   data() {
     return {
@@ -55,8 +47,7 @@ export default {
   },
   methods: {
     step() {
-      if (this.inscripcion.confirmacion === true) this.activeStep = 1
-      if (this.inscripcion.validacion === 1) this.activeStep = 2
+      if (this.inscripcion.validacion === 1) this.activeStep = 1
     },
   },
   created() {

layouts/default.vue

@@ -3,8 +3,9 @@
     <Header />
 
     <Logout />
-
-    <nuxt />
+    <div class="full-h container px-4">
+      <nuxt />
+    </div>
 
     <Footer />
   </div>
@@ -24,4 +25,8 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style>
+.full-h {
+  min-height: 75vh;
+}
+</style>

nuxt.config.js

@@ -1,8 +1,6 @@
 export default {
   ssr: false,
-  /* Server de pruebas */
-  // server: { port:  },
-  server: { port: 3136 },
+  server: { port: 3131 },
   target: 'static',
   head: {
     title: 'Inscripciones CEDETEC',
@@ -24,9 +22,9 @@ export default {
   axios: {},
   build: {},
   env: {
-    api: 'http://localhost:3000',
-    // api: "https://890af9d598a4.ngrok.io"
-    // api: 'https://venus.acatlan.unam.mx/inscripciones_test',
-    // api: "https://venus.acatlan.unam.mx/produccion",
+    // api: 'http://localhost:3000',
+    //api: 'https://venus.acatlan.unam.mx/inscripciones_test',  Esta es la que tenia
+    // api: 'https://venus.acatlan.unam.mx/inscripciones',
+    VUE_APP_API: process.env.VUE_APP_API
   },
 }

package.json

@@ -5,16 +5,18 @@
   "scripts": {
     "dev": "nuxt",
     "build": "nuxt build",
-    "start": "nuxt start",
+    "start": "source ~/.nvm/nvm.sh && nvm use 16.15.1 && npm install && nuxt build && nuxt generate && nuxt start -p 3136",
     "generate": "nuxt generate"
   },
   "dependencies": {
+    "@nuxt/components": "^2.2.1",
     "@nuxtjs/axios": "^5.13.1",
     "core-js": "^3.9.1",
     "js-file-download": "^0.4.12",
     "moment": "^2.29.1",
-    "nuxt": "^2.15.3",
+    "nuxt": "2.17.2",
     "nuxt-buefy": "^0.4.4",
+    "sweetalert2": "^11.22.2",
     "validator": "^13.6.0"
   },
   "devDependencies": {

pages/admin/index.vue

@@ -2,22 +2,19 @@
   <div class="container">
     <b-tabs v-model="activeTab">
       <b-tab-item label="Tabla de tickets">
-        <TableTickets />
+        <TableTickets
+          :updateIsLoading="updateIsLoading"
+          :imprimirError="imprimirError"
+          :imprimirMensaje="imprimirMensaje"
+          :imprimirWarning="imprimirWarning"
+        />
       </b-tab-item>
 
       <b-tab-item label="Reportes">
         <p class="title is-5">
           Selecciona el periodo del que quieres obtener un reporte.
         </p>
-        <Reporte :updateIsLoading="updateIsLoading" :tipo="'reporte'" />
-      </b-tab-item>
-
-      <b-tab-item label="Generar CSV">
-        <p class="title is-5">
-          Selecciona el periodo para generar un archivo CSV y alimnetar la base
-          del AT.
-        </p>
-        <GenerarCSV :updateIsLoading="updateIsLoading" :tipo="'CSV'" />
+        <Reporte :updateIsLoading="updateIsLoading" />
       </b-tab-item>
     </b-tabs>
   </div>
@@ -26,15 +23,11 @@
 <script>
 import TableTickets from '~/components/admin/tableTickets.vue'
 import Reporte from '~/components/admin/reporte.vue'
-import GenerarCSV from '~/components/admin/reporte.vue'
-import FechasInscripcion from '~/components/admin/fechasInscripcion.vue'
 
 export default {
   components: {
     TableTickets,
     Reporte,
-    GenerarCSV,
-    FechasInscripcion,
   },
   data() {
     return {
@@ -45,6 +38,60 @@ export default {
     updateIsLoading(booleanValue) {
       this.isLoading = booleanValue
     },
+    imprimirError(err = {}, title = '¡Hubo un error!', onConfirm = () => {}) {
+      this.$buefy.dialog.alert({
+        ariaRole: 'alertdialog',
+        ariaModal: true,
+        type: 'is-danger',
+        title,
+        message: err.message,
+        confirmText: 'Entendido',
+        hasIcon: true,
+        iconPack: 'mdi',
+        icon: 'alert-octagon',
+        onConfirm: () => onConfirm(),
+      })
+      if (err.err && err.err === 'token error') {
+        localStorage.clear()
+        this.$router.push('/')
+      }
+    },
+    imprimirMensaje(message, title = '¡Felicidades!', onConfirm = () => {}) {
+      this.$buefy.dialog.alert({
+        ariaRole: 'alertdialog',
+        ariaModal: true,
+        type: 'is-success',
+        title,
+        message,
+        confirmText: 'Ok',
+        hasIcon: true,
+        iconPack: 'mdi',
+        icon: 'check-circle',
+        onConfirm: () => onConfirm(),
+      })
+    },
+    imprimirWarning(
+      message,
+      onConfirm = () => {},
+      title = '¡Espera un minuto!',
+      onCancel = () => {}
+    ) {
+      this.$buefy.dialog.alert({
+        ariaRole: 'alertdialog',
+        ariaModal: true,
+        type: 'is-warning',
+        title,
+        message,
+        confirmText: 'Confirmar',
+        canCancel: true,
+        cancelText: 'Cancelar',
+        hasIcon: true,
+        iconPack: 'mdi',
+        icon: 'help-circle',
+        onConfirm: () => onConfirm(),
+        onCancel: () => onCancel(),
+      })
+    },
   },
 }
 </script>

pages/admin/ticket.vue

@@ -6,6 +6,8 @@
       :imprimirWarning="imprimirWarning"
       :updateIsLoading="updateIsLoading"
     />
+
+    <b-loading :is-full-page="true" v-model="isLoading" :can-cancel="false" />
   </div>
 </template>
 
@@ -17,7 +19,9 @@ export default {
     Ticket,
   },
   data() {
-    return {}
+    return {
+      isLoading: false,
+    }
   },
   methods: {
     updateIsLoading(booleanValue) {
@@ -41,7 +45,11 @@ export default {
         this.$router.push('/')
       }
     },
-    imprimirMensaje(message, title = '¡Felicidades!', onConfirm = () => {}) {
+    imprimirMensaje(
+      message,
+      title = '¡Acción confirmada!',
+      onConfirm = () => {}
+    ) {
       this.$buefy.dialog.alert({
         ariaRole: 'alertdialog',
         ariaModal: true,

pages/index.vue

@@ -1,5 +1,7 @@
 <template>
   <section class="container">
+    <RegistroProfesor ></RegistroProfesor>
+
     <LoginUser
       v-if="type === 'User'"
       :imprimirMensaje="imprimirMensaje"
@@ -8,6 +10,8 @@
       :updateIsLoading="updateIsLoading"
     />
 
+    
+
     <LoginAdmin
       v-if="type === 'Admin'"
       :imprimirMensaje="imprimirMensaje"
@@ -16,6 +20,8 @@
       :updateIsLoading="updateIsLoading"
     />
 
+    
+
     <div class="has-text-centered">
       <b-button @click="types()">{{ type }}</b-button>
     </div>
@@ -27,6 +33,7 @@
 <script>
 import LoginUser from '@/components/Login'
 import LoginAdmin from '@/components/admin/login'
+import RegistroProfesor from '@/pages/profesor/registro-profesor.vue'
 
 export default {
   components: { LoginUser, LoginAdmin },

pages/profesor/bienvenida.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <div class="has-text-centered mt-6">
+      <h1 class="title is-3">¡Bienvenido al sistema de inscripciones CEDETEC!</h1>
+    </div>
+
+    <div class="content mt-4 px-5 card">
+      <p class="text1">
+        Profesor(a): <strong>{{ nombre }}</strong>, al realizar su inscripción tendrá acceso a los siguientes servicios que ofrece el CEDETEC en el área de profesores:
+      </p>
+
+      <ol>
+        <li>Préstamo de equipo de cómputo.</li>
+        <li>Mesas para trabajar con sus dispositivos móviles personales o con los módulos de PC PUMA.</li>
+      </ol>
+
+      <p>
+        Adicionalmente, y bajo disponibilidad del espacio, su programa podrá reservar la sala de usos múltiples para que usted pueda utilizarla con los alumnos.
+      </p>
+
+      <p><strong>Nota:</strong> La inscripción se realiza cada semestre.</p>
+
+      <div class="btn-ins">
+        <button class="btn-first" type="button" @click="realizarInscripcion">Realizar Inscripcion</button>
+      </div>
+    </div>
+
+    
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+import { errorAlInscribir, inscripcionExitosa } from '~/utils/alerts';
+
+export default {
+  data() {
+    return {
+      nombre: '',
+      correo: '',
+      idUsuario: null,
+      numeroCuenta: null
+    };
+  },
+  mounted() {
+    this.idUsuario = localStorage.getItem('profesorId');
+    this.nombre = localStorage.getItem('profesorNombre');
+    //this.numeroCuenta = localStorage.getItem('profesorNumeroCuenta');
+  },
+  methods: {
+    realizarInscripcion() {
+      const payload = {
+        id_cuenta: this.idUsuario,
+        nombre: this.nombre,
+        //correo: 'smtrabajos5@gmail.com'  
+        correo: `${this.idUsuario}@pcpuma.acatlan.unam.mx` // esta es el codigo para produccion
+      }
+
+      axios.post(`${process.env.VUE_APP_API}/api/profesores/inscripcion`,payload)
+      .then(() => {
+        inscripcionExitosa(payload.correo);
+        this.$router.push('/'); //Redirige a la pantalla original despues de la inscripcion
+      })
+      .catch((err) => {
+        //this.imprimirError('No se pudo enviar el correo.');
+        console.error(err);
+        errorAlInscribir();
+      });
+    }
+  }
+
+  }
+
+</script>
+
+<style scoped>
+h1 {
+  color: goldenrod;
+  padding-bottom: 20px;
+}
+
+ol {
+  padding-left: 50px;
+}
+
+.btn-ins {
+  text-align: center;
+  padding-bottom: 20px;
+}
+
+.text1 {
+  padding-top: 20px;
+}
+
+/*
+.btn-first {
+  background-color: goldenrod;  #1d3d6f
+  width: 350px;
+  height: 50px;
+  color: white;
+  box-shadow: 0px 4px 20px rgba(40, 35, 97, 0.5);
+}
+*/
+
+</style>

pages/profesor/correo.vue

@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <div>
+            <ol>
+                <li><strong>Asunto</strong>: Inscripción CEDETEC</li>
+                <li>Estimado profesor(a) {{ nombre }}</li>
+                <li>Informo que su inscripción fue realizad con éxito.</li>
+            </ol>
+        </div>
+        <div>
+            <h3><strong>¿Cómo puede hacer uso de los servicios?</strong></h3>
+            Es necesario revise los siguientes videos para solicitar equipo en el área de profesores.
+        </div>
+        <div>
+            <strong>Nota</strong>:
+            <p>Es importante revisar los <strong>lineamientos de uso</strong> para hacer uso de los servicios que ofrece el CEDETEC. </p>
+        </div>
+    </div>
+</template>
+

pages/registro/index.vue

@@ -1,110 +1,298 @@
 <template>
-  <div class="container">
-    <h2 class="title is-5">Mesa para dispositivos moviles</h2>
-    <ol>
-      <li>
-        El servicio solo esta disponible para alumnos vigentes de licenciatura
-      </li>
-      <li>
-        Este servicio requiere de una aportación voluntaria que podrás realizar
-        en cajas (planta baja del edificio A4)
-      </li>
-      <li>
-        Al realizar tu inscripción se te otorgan 60 hrs, en caso de acabarse,
-        podrás adquirir más tiempo, realizando nuevamente una aportación
-        voluntaria.
-      </li>
-      <li>
-        Esta inscripción es válida para hacer uso de mesas dentro del CEDETEC
-        donde podrás trabajar con tus dispositivos móviles solo actividades
-        académicas
-      </li>
-      <li>
-        <p>El servicio se realiza de la siguiente manera:</p>
-        <ul class="pl-5">
-          <li>
-            a. Ingresar al Departamento de Servicios de para verificar la
-            disponibilidad de espacio que se muestra en la pantalla que se
-            encuentra en la entrada
-          </li>
-          <li>
-            b. Dirigirse al Departamento de Servicios de Cómputo (planta baja
-            del CEDETEC)
-          </li>
-          <li>
-            c. Desinfectar tus manos con gel antes de utilizar los equipos para
-            la asignación de tiempo
-          </li>
-          <li>
-            d. Indicar en el sistema
-            <ul class="pl-5">
-              <li>l. Número de cuenta</li>
-              <li>ll. Elegir mesa para laptop</li>
-              <li>lll. Elegir tiempo (15, 30, 45, 60, 90, 120 min)</li>
-              <li>lV. El sistema te indicará la mesa a utilizar</li>
-              <li>
-                V. En caso de terminar tu tiempo y deseas renovar, tendrás que
-                ir solicitarlo nuevamente en los equipos de asignación de
-                tiempo.
+  <div class="container px-2">
+    <section>
+      <p class="title is-3 has-text-centered color">
+        Los servicios que ofrece el Centro de Desarrollo Tecnológico (CeDeTec)
+        son:
+      </p>
+
+      <ul class="pb-5">
+        <li class="pl-3">a) Préstamo de equipo de cómputo</li>
+        <li class="pl-3">b) Préstamo de mesas para dispositivos móviles</li>
+        <li class="pl-3">c) Impresión</li>
+        <li class="pl-3">d) Ploteo</li>
+        <li class="pl-3">e) Escaneo</li>
+      </ul>
+
+      <b-collapse
+        class="card"
+        animation="slide"
+        :open="isOpen == 1"
+        @open="isOpen = index1"
+        :aria-id="'contentIdForA11y5-' + index1"
+      >
+        <template #trigger="props">
+          <div
+            class="card-header"
+            role="button"
+            :aria-controls="'contentIdForA11y5-' + index1"
+            :aria-expanded="props.open"
+          >
+            <p class="card-header-title">
+              Servicios que requieren inscripción y confirmación
+            </p>
+            <a class="card-header-icon">
+              <b-icon :icon="props.open ? 'menu-down' : 'menu-up'"> </b-icon>
+            </a>
+          </div>
+        </template>
+        <div class="card-content">
+          <div class="content">
+            <ol>
+              <li class="pl-3">
+                <b>Préstamo de equipos de cómputo:</b> Con Sistemas Operativos
+                Windows, MacOS, Linux y el software sugerido por la
+                licenciatura.
+              </li>
+
+              <li class="pl-3">
+                <b>Mesas para trabajar con dispositivos móviles:</b> Los
+                dispositivos deberán estar configurados a la red de pcpuma.
+              </li>
+            </ol>
+
+            <p class="pt-5">
+              <b
+                >Para hacer uso de estos servicios es necesario hacer los
+                siguientes pasos:</b
+              >
+            </p>
+
+            <p class="pt-5"><b>Paso 1: Registro</b></p>
+
+            <p>
+              Solo podran ingresar alumnos vigentes de licenciatura al sitio
+              <a href="https://inscripcion-cedetec.acatlan.unam.mx/">
+                https://inscripcion-cedetec.acatlan.unam.mx/</a
+              >
+              con su numero de cuenta y NIP de escolares para:
+            </p>
+
+            <ul>
+              <li class="pl-3">
+                Elegir área (PCNET, Macintosh o Linux) según la carrera y el
+                semestre
+              </li>
+              <li class="pl-3">
+                Agregar datos (monto, fecha, número de ticket de la aportación
+                voluntaria que hiciste en cajas).
               </li>
             </ul>
-          </li>
-        </ul>
-      </li>
-      <li>
-        El servicio está sujeto a lineamientos de uso que deberás tener
-        presentes para cualquier usuario
 
-        <ul class="pl-5">
-          <li>a. Traer su propio cargador</li>
-          <li>b. No permite mover mobiliario o multicontactos</li>
-          <li>
-            c. La red de PCPUMA del equipo personal deberá estar previamente
-            configurada
-          </li>
-          <li>d. Solo podrá estar una persona por mesa</li>
-          <li>e. Deberás portar todo el tiempo el cubrebocas</li>
-          <li>f. No podrás ingresar e ingerir alimentos o bebidas</li>
-          <li>g. Deberás permanecer en orden y en silencio</li>
-          <li>
-            h. El espacio deberá estar limpio al terminar el tiempo asignado
-          </li>
-          <li>
-            i. Las mesas no podrán utilizarse para actividades de recortes,
-            armado, pegado de piezas o apuntes
-          </li>
-        </ul>
-      </li>
-    </ol>
+            <p class="pt-5"><b>Paso 2 Confirmación</b></p>
 
-    <p class="py-4">
-      Nota: En caso de no respetar estos lineamientos básicos será suspendida su
-      inscripción a este servicio
-    </p>
+            <p>
+              Es indispensable ingresar al sitio
+              <a
+                href=" https://kalinga.acatlan.unam.mx/cedetec/"
+                target="_blanc"
+              >
+                https://kalinga.acatlan.unam.mx/cedetec/
+              </a>
+              para conocer:
+            </p>
 
-    <b-field>
-      <b-checkbox v-model="lineamientos">
-        Acepto que todos los datos ingresados en esta aplicación son verdaderos,
-        de no ser así mi inscripción será cancelada.
-      </b-checkbox>
-    </b-field>
+            <ul>
+              <li class="pl-3">La forma de usar los servicios</li>
+              <li class="pl-3">Lineamientos y sanciones</li>
+            </ul>
 
-    <div class="has-text-centered pb-5">
-      <b-button
-        :disabled="!lineamientos"
-        @click="pushRegistro"
-        type="is-success"
-        >Aceptar</b-button
+            <p class="pt-5">
+              Después de haber visto los videos y leído los lineamientos y
+              sanciones, tendrás que aceptar que has leído y entendido los
+              puntos anteriores al ingresar tu número de cuenta y correo
+              institucional(pcpuma).
+            </p>
+
+            <p class="pt-5"><b>Notas:</b></p>
+
+            <ul class="pt-5">
+              <li class="pl-3">Cupo limitado</li>
+              <li class="pl-3">
+                El aforo dependerá del color del semáforo de riesgo epidémico.
+              </li>
+              <li class="pl-3">
+                Solo podrás hacer uso de los servicios si realizas la
+                confirmación
+              </li>
+              <li class="pl-3">
+                La inscripción te habilita 60 hrs. para ambos servicios, que
+                podrás hacer uso de lunes a viernes en el horario de 9:00 a
+                19:45 En caso de terminarse las horas asignadas, podrás
+                renovarse realizando una aportación voluntaria e ingresar al
+                sitio:
+                <a href="https://inscripcion-cedetec.acatlan.unam.mx"
+                  >https://inscripcion-cedetec.acatlan.unam.mx</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </b-collapse>
+
+      <b-collapse
+        class="card"
+        animation="slide"
+        :open="isOpen == 1"
+        @open="isOpen = index1"
+        :aria-id="'contentIdForA11y5-' + index1"
       >
+        <template #trigger="props">
+          <div
+            class="card-header"
+            role="button"
+            :aria-controls="'contentIdForA11y5-' + index1"
+            :aria-expanded="props.open"
+          >
+            <p class="card-header-title">Ingreso al CeDeTec:</p>
+            <a class="card-header-icon">
+              <b-icon :icon="props.open ? 'menu-down' : 'menu-up'"> </b-icon>
+            </a>
+          </div>
+        </template>
+        <div class="card-content">
+          <div class="content">
+            <ul>
+              <li class="pl-3">
+                Revisar la <b>disponibilidad</b> de equipos de cómputo y mesas
+                para dispositivos,
+                <b>en la pantalla ubicada en la entrada principal.</b> Es
+                importante este punto para evitar aglomeraciones y respetar el
+                aforo.
+              </li>
+
+              <li class="pl-3">
+                Dirigirse a los equipos de asignación de tiempo para hacer la
+                solicitud de equipo o mesa para dispositivos móviles.
+              </li>
+            </ul>
+          </div>
+        </div>
+      </b-collapse>
+
+      <b-collapse
+        class="card"
+        animation="slide"
+        :open="isOpen == 1"
+        @open="isOpen = index1"
+        :aria-id="'contentIdForA11y5-' + index1"
+      >
+        <template #trigger="props">
+          <div
+            class="card-header"
+            role="button"
+            :aria-controls="'contentIdForA11y5-' + index1"
+            :aria-expanded="props.open"
+          >
+            <p class="card-header-title">
+              Servicios que NO requieren inscripción y confirmación
+            </p>
+            <a class="card-header-icon">
+              <b-icon :icon="props.open ? 'menu-down' : 'menu-up'"> </b-icon>
+            </a>
+          </div>
+        </template>
+        <div class="card-content">
+          <div class="content">
+            <ul>
+              <li class="pl-3">
+                Los servicios de impresión, escaneo y ploteo
+                <b>requieren de un pago que se realiza en cajas</b> (planta baja
+                edificio A4).
+              </li>
+              <p class="pl-3 pt-4">
+                Al realizar el pago en cajas indicar pago a CEDETEC y monto.
+              </p>
+              <p class="pl-3">
+                Solo se permiten ticket cuyo concepto sea CEDETEC.
+              </p>
+              <p class="pl-3">
+                El ticket debe ser del mes en que se realiza la impresión.
+              </p>
+            </ul>
+
+            <p class="subtitle is-2 pt-5">Impresión</p>
+            <p>De acuerdo al tamaño y color se tienen los siguientes costos</p>
+
+            <Tabla :data="dataImpresion" />
+
+            <p class="subtitle is-2">Ploteo</p>
+            <p>De acuerdo al tamaño y color se tienen los siguientes costos</p>
+
+            <Tabla :data="dataPloteo" />
+
+            <p class="subtitle is-2">Escaneo:</p>
+            <p>Precio por tamaño:</p>
+
+            <ul class="pb-5">
+              <li class="pl-3">Carta y oficio <b>$ 1.00</b></li>
+              <li class="pl-3">Doble Carta <b>$ 2.00</b></li>
+              <li class="pl-3">60 x 45 cms. ó 90 x 60 cms. <b>$ 5.00</b></li>
+              <li class="pl-3">Trae USB</li>
+            </ul>
+          </div>
+        </div>
+      </b-collapse>
+    </section>
+
+    <p class="subtitle is-4 has-text-centered pt-5">
+      ¿Desear continuar con la inscripción ?
+    </p>
+    <div class="has-text-centered pb-5">
+      <b-button type="is-info" @click="pushRegistro">Continuar</b-button>
     </div>
   </div>
 </template>
 
 <script>
+import Tabla from '@/components/informacion/tablaCostos.vue'
+
 export default {
+  components: {
+    Tabla,
+  },
   data() {
     return {
-      lineamientos: false,
+      isOpen: 0,
+      index1: 0,
+      index2: 1,
+      index3: 2,
+      dataImpresion: [
+        {
+          color: 'Negro',
+          tamaño: 'carta/oficio',
+          costo: '$ 1.00 por cada página',
+        },
+        {
+          color: 'Negro',
+          tamaño: 'doble carta',
+          costo: '$ 2.00 por cada página',
+        },
+        {
+          color: 'Color',
+          tamaño: 'diferentes tamaños',
+          costo:
+            '1) El usuario presenta el archivo en el área de impresión (planta baja del CeDeTec) para que el operador le indique el costo <br/> 2) Ir cajas a pagar <br/> 3) Regresar a CeDeTec para entregar ticket y hacer la impresión',
+        },
+      ],
+      dataPloteo: [
+        {
+          color: 'Negro',
+          tamaño: '60x45 cm',
+          costo: '$14.00',
+        },
+        {
+          color: 'Negro',
+          tamaño: '90x60 cm',
+          costo: '$16.50',
+        },
+        {
+          color: 'Color',
+          tamaño: '60x45 cm o  90x60 cm',
+          costo:
+            '1) El usuario presenta el archivo en el área de impresión (planta baja del CeDeTec) para que el operador le indique el costo. <br /> 2) Ir cajas a pagar <br/> 3) Regresar a CeDeTec para entregar ticket y hacer la impresión',
+        },
+      ],
     }
   },
   methods: {
@@ -114,3 +302,9 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+.color {
+  color: #1d3d6f;
+}
+</style>

pages/registro/inscripcion.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="container">
-    <p class="title is-3">
+  <div class="container py-2 px-2">
+    <p class="title is-3 has-text-centered">
       Inscripción para hacer uso de mesa para dispositivos móviles
     </p>
 
@@ -18,8 +18,11 @@
       :imprimirError="imprimirError"
       :updateIsLoading="updateIsLoading"
       :inscripcionesUsuario="inscripcionesUsuario"
+      :idUsuario="idUsuario"
       @pedirInscripciones="pedirInscripciones"
     />
+
+    <b-loading :is-full-page="true" v-model="isLoading" :can-cancel="false" />
   </div>
 </template>
 
@@ -38,16 +41,17 @@ export default {
   },
   data() {
     return {
-      datosUsuario: {},
+      idUsuario: '',
       inscripcionesUsuario: [],
+      isLoading: false,
     }
   },
   methods: {
     async pedirInscripciones() {
       await axios
         .get(
-          `${process.env.api}/usuario/inscripciones?idUsuario=${this.datosUsuario.idUsuario}`,
-          this.datosUsuario.token
+          `${process.env.api}/usuario/inscripciones?idUsuario=${this.idUsuario}`,
+          this.token
         )
         .then((res) => {
           this.inscripcionesUsuario = res.data
@@ -94,7 +98,10 @@ export default {
         hasIcon: true,
         iconPack: 'mdi',
         icon: 'check-circle',
-        onConfirm: () => onConfirm(),
+        onConfirm: () => {
+          this.$router.push(`/`)
+          localStorage.clear()
+        },
       })
     },
     imprimirWarning(
@@ -109,9 +116,9 @@ export default {
         type: 'is-warning',
         title,
         message,
-        confirmText: 'Confirmar',
+        confirmText: 'Si',
         canCancel: true,
-        cancelText: 'Cancelar',
+        cancelText: 'No',
         hasIcon: true,
         iconPack: 'mdi',
         icon: 'help-circle',
@@ -121,8 +128,8 @@ export default {
     },
   },
   created() {
-    this.datosUsuario.idUsuario = Number(localStorage.getItem('idUsuario'))
-    this.datosUsuario.token = {
+    this.idUsuario = Number(localStorage.getItem('idUsuario'))
+    this.token = {
       headers: { token: localStorage.getItem('token') },
     }
     this.pedirInscripciones()

utils/alerts.js

@@ -0,0 +1,46 @@
+// src/utils/alerts.js
+import Swal from 'sweetalert2';
+
+export const inscripcionExitosa = (correo) => {
+    Swal.fire({
+        title: '¡Inscripción exitosa!',
+        html: `Hemos enviado un correo a<br><strong>${correo}</strong> por favor revisar su correo.`,
+        icon: 'success',
+        confirmButtonText: 'Aceptar',
+        confirmButtonColor: '#28a745',
+        backdrop: true,
+        allowOutsideClick: false,
+    });
+};
+
+export const errorAlInscribir = () => {
+    Swal.fire({
+        title: 'Error',
+        text: 'No se pudo completar la inscripción. Intenta más tarde.',
+        icon: 'error',
+        confirmButtonText: 'Aceptar',
+        confirmButtonColor: '#d33',
+    });
+};
+
+//Por favor confirme que la informacion enviada es correcta en caso contrario redirigirse a su programa academico
+
+export const errorBuscar = () => {
+    Swal.fire({
+        title: 'Error',
+        text: 'Su número de trabajador no fue encontrado en nuestro sistema. Por favor, acudir a su Programa Académico para que reporte el problema al DSC.',
+        icon: 'error',
+        confirmButtonText: 'Aceptar',
+        confirmButtonColor: '#d33',
+    });
+};
+
+export const profesorYaInscrito = () => {
+    Swal.fire({
+        title: 'Error',
+        text: 'El profesor ya esta inscrito, por favor verificar el correo enviado anteriormente.',
+        icon: 'error',
+        confirmButtonText: 'Aceptar',
+        confirmButtonColor: '#d33',
+    })
+}