From dd41fe7cddf5314806890a2ce1b3e7f735feefdd Mon Sep 17 00:00:00 2001
From: marcorv6 <yosoymarco3@gmail.com>
Date: Wed, 11 May 2022 00:45:13 -0500
Subject: [PATCH] avance profesor, inicio qr

---
 components/Login.vue                  |   2 +
 components/layouts/LogoutProfesor.vue |   6 +-
 components/operador/Scanner.vue       |  84 +++++++++++++++
 package-lock.json                     | 142 +++++++++++++++++++++++++-
 package.json                          |   3 +-
 pages/Admin/index.vue                 |  18 ++--
 pages/Operador/index.vue              | 113 ++++++++++++++++++++
 pages/Profesor/index.vue              | 134 ++++++++++++++++++++++++
 8 files changed, 489 insertions(+), 13 deletions(-)
 create mode 100644 components/operador/Scanner.vue
 create mode 100644 pages/Operador/index.vue
 create mode 100644 pages/Profesor/index.vue

diff --git a/components/Login.vue b/components/Login.vue
index d67ac3a..49ffaa3 100644
--- a/components/Login.vue
+++ b/components/Login.vue
@@ -179,6 +179,8 @@ export default {
 
             localStorage.setItem('token', info.token)
             localStorage.setItem('idProfesor', info.Profesor.idProfesor)
+            localStorage.setItem('nombre', info.Profesor.nombre)
+            localStorage.setItem('adscripcion', info.Profesor.adscripcion)
             localStorage.setItem('numeroTrabajador', info.Profesor.numeroTrabajador)
             this.updateIsLoading(false)
             this.$router.push(`/${'profesor'}`)
diff --git a/components/layouts/LogoutProfesor.vue b/components/layouts/LogoutProfesor.vue
index e548774..69d2415 100644
--- a/components/layouts/LogoutProfesor.vue
+++ b/components/layouts/LogoutProfesor.vue
@@ -23,9 +23,9 @@
 
 <script>
 export default {
-  // data() {
-  //   return { numeroTrabajador: localStorage.getItem('numeroTrabajador') }
-  // },
+  data() {
+    return { numeroTrabajador: localStorage.getItem('numeroTrabajador') }
+  },
   methods: {
     cerrarSesion() {
       localStorage.clear()
diff --git a/components/operador/Scanner.vue b/components/operador/Scanner.vue
new file mode 100644
index 0000000..5816acf
--- /dev/null
+++ b/components/operador/Scanner.vue
@@ -0,0 +1,84 @@
+<template>
+  <StreamBarcodeReader @decode="onDecode"> </StreamBarcodeReader>
+</template>
+
+<script>
+import axios from 'axios'
+import { StreamBarcodeReader } from 'vue-barcode-reader'
+
+export default {
+  components: { StreamBarcodeReader },
+  data() {
+    return {
+      idAlumno: '',
+      idAlumnoAnterior: '',
+      leyendo: false,
+      isLoading: false,
+    }
+  },
+  props: {
+    imprimirWarning: { type: Function, required: true },
+    imprimirError: { type: Function, required: true },
+    imprimirMensaje: { type: Function, required: true },
+    actualizarIsLoading: { type: Function, required: true },
+    actualizarUpdateTabla: { type: Function, required: true },
+  },
+  methods: {
+    resetear() {
+      this.idAlumno = ''
+      this.leyendo = false
+    },
+    noSeguir() {
+      this.resetear()
+      this.idAlumnoAnterior = ''
+    },
+    confirmarAsistencia() {
+      const data = { idAlumno: this.idAlumno }
+
+      this.actualizarIsLoading(true)
+      axios
+        .put(`${process.env.api}/alumno/pasar_lista`, data)
+        .then((res) => {
+          this.resetear()
+          this.actualizarUpdateTabla(true)
+          this.actualizarIsLoading(false)
+          this.imprimirMensaje(res.data.message)
+        })
+        .catch((err) => {
+          this.actualizarIsLoading(false)
+          this.imprimirError(err.response.data)
+        })
+    },
+    onDecode(decodedString) {
+      try {
+        this.idAlumno = JSON.parse(decodedString).idAlumno
+      } catch (err) {
+        this.idAlumno = ''
+        this.imprimirError({ message: 'Este QR no es valido.' })
+      }
+      if (!this.leyendo) {
+        if (this.idAlumno && this.idAlumno != this.idAlumnoAnterior) {
+          this.leyendo = true
+          this.idAlumnoAnterior = this.idAlumno
+          this.imprimirWarning(
+            'Estas a punto de pasar asistencia a este alumno ¿Esta seguro de querer realizar esta acción?',
+            this.confirmarAsistencia,
+            this.noSeguir
+          )
+        }
+      }
+    },
+  },
+}
+</script>
+
+<style>
+video {
+  width: 100%;
+}
+
+.laser,
+.overlay-element {
+  display: none;
+}
+</style>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index c07e747..9ca7847 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,8 @@
         "nuxt-sweetalert2": "^1.0.0",
         "validator": "^13.6.0",
         "vue-barcode-reader": "^1.0.2",
-        "vue-json-csv": "^1.2.12"
+        "vue-json-csv": "^1.2.12",
+        "vue-qrcode-reader": "^3.1.0"
       },
       "devDependencies": {
         "eslint-config-prettier": "^8.1.0",
@@ -2809,6 +2810,29 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/barcode-detector": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/barcode-detector/-/barcode-detector-1.0.0.tgz",
+      "integrity": "sha512-LZSyqjumoq2WmMOeQZ2BiYYAqwnTlkXgqKOTcJlathpFS6IejsdSb6aIGmoSyOCjBgFNATzLgMJ9shNfklnz6A==",
+      "dependencies": {
+        "@zxing/library": "^0.18.4",
+        "jsqr": "^1.3.1"
+      }
+    },
+    "node_modules/barcode-detector/node_modules/@zxing/library": {
+      "version": "0.18.6",
+      "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.18.6.tgz",
+      "integrity": "sha512-bulZ9JHoLFd9W36pi+7e7DnEYNJhljYjZ1UTsKPOoLMU3qtC+REHITeCRNx40zTRJZx18W5TBRXt5pq2Uopjsw==",
+      "dependencies": {
+        "ts-custom-error": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.4.0"
+      },
+      "optionalDependencies": {
+        "@zxing/text-encoding": "~0.9.0"
+      }
+    },
     "node_modules/base": {
       "version": "0.11.2",
       "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
@@ -3347,6 +3371,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/callforth": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/callforth/-/callforth-0.3.1.tgz",
+      "integrity": "sha512-Q2zPfqnwoKsb1DTVCr4lmhe49wKNBsMmNlbudjleu3/co+Nw1pOqFHYJHrW3VZ253ou9AAr+xauQR0C55NPdzA=="
+    },
     "node_modules/callsites": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
@@ -6755,6 +6784,11 @@
         "universalify": "^2.0.0"
       }
     },
+    "node_modules/jsqr": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.4.0.tgz",
+      "integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A=="
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -9746,6 +9780,18 @@
         "inherits": "^2.0.1"
       }
     },
+    "node_modules/rtcpeerconnection-shim": {
+      "version": "1.2.15",
+      "resolved": "https://registry.npmjs.org/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz",
+      "integrity": "sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==",
+      "dependencies": {
+        "sdp": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
     "node_modules/run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@@ -9827,6 +9873,11 @@
       "resolved": "https://registry.npmjs.org/scule/-/scule-0.1.1.tgz",
       "integrity": "sha512-1j2RlmUNADEprCkzDaeo8w2tdum/mvQWAKdRaS2raud7IOnPaDbLSFKhcY5xXPbAFYWk4ZQ0BUnfmg0ZUcI+Pg=="
     },
+    "node_modules/sdp": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-2.12.0.tgz",
+      "integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw=="
+    },
     "node_modules/semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -11374,6 +11425,18 @@
       "resolved": "https://registry.npmjs.org/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz",
       "integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g=="
     },
+    "node_modules/vue-qrcode-reader": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vue-qrcode-reader/-/vue-qrcode-reader-3.1.0.tgz",
+      "integrity": "sha512-k2uoUjibxzdHJPfmsL1T9KVNzKPG/xIzKWMgBTXExoJlvZ5VKrBIFpP3P+rXNylfL3yw5AftE3K1yf4CoTkfkQ==",
+      "dependencies": {
+        "barcode-detector": "^1.0.0",
+        "callforth": "^0.3.1",
+        "core-js": "^3.6.5",
+        "vue": "^2.6.11",
+        "webrtc-adapter": "7.7.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz",
@@ -12367,6 +12430,19 @@
         "node": ">= 8.0.0"
       }
     },
+    "node_modules/webrtc-adapter": {
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-7.7.0.tgz",
+      "integrity": "sha512-7Bp9OBnx642oJRkom1tNAbeJjUadAq2rh5xLL9YXPw5hVyt2h4hHr5bcoPYDs1stp/mZHSPSQA34YISdnr0DBQ==",
+      "dependencies": {
+        "rtcpeerconnection-shim": "^1.2.15",
+        "sdp": "^2.12.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -15170,6 +15246,26 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "barcode-detector": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/barcode-detector/-/barcode-detector-1.0.0.tgz",
+      "integrity": "sha512-LZSyqjumoq2WmMOeQZ2BiYYAqwnTlkXgqKOTcJlathpFS6IejsdSb6aIGmoSyOCjBgFNATzLgMJ9shNfklnz6A==",
+      "requires": {
+        "@zxing/library": "^0.18.4",
+        "jsqr": "^1.3.1"
+      },
+      "dependencies": {
+        "@zxing/library": {
+          "version": "0.18.6",
+          "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.18.6.tgz",
+          "integrity": "sha512-bulZ9JHoLFd9W36pi+7e7DnEYNJhljYjZ1UTsKPOoLMU3qtC+REHITeCRNx40zTRJZx18W5TBRXt5pq2Uopjsw==",
+          "requires": {
+            "@zxing/text-encoding": "~0.9.0",
+            "ts-custom-error": "^3.0.0"
+          }
+        }
+      }
+    },
     "base": {
       "version": "0.11.2",
       "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
@@ -15616,6 +15712,11 @@
         "caller-callsite": "^2.0.0"
       }
     },
+    "callforth": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/callforth/-/callforth-0.3.1.tgz",
+      "integrity": "sha512-Q2zPfqnwoKsb1DTVCr4lmhe49wKNBsMmNlbudjleu3/co+Nw1pOqFHYJHrW3VZ253ou9AAr+xauQR0C55NPdzA=="
+    },
     "callsites": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
@@ -18415,6 +18516,11 @@
         "universalify": "^2.0.0"
       }
     },
+    "jsqr": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.4.0.tgz",
+      "integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A=="
+    },
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -20913,6 +21019,14 @@
         "inherits": "^2.0.1"
       }
     },
+    "rtcpeerconnection-shim": {
+      "version": "1.2.15",
+      "resolved": "https://registry.npmjs.org/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz",
+      "integrity": "sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==",
+      "requires": {
+        "sdp": "^2.6.0"
+      }
+    },
     "run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@@ -20987,6 +21101,11 @@
       "resolved": "https://registry.npmjs.org/scule/-/scule-0.1.1.tgz",
       "integrity": "sha512-1j2RlmUNADEprCkzDaeo8w2tdum/mvQWAKdRaS2raud7IOnPaDbLSFKhcY5xXPbAFYWk4ZQ0BUnfmg0ZUcI+Pg=="
     },
+    "sdp": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-2.12.0.tgz",
+      "integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw=="
+    },
     "semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -22298,6 +22417,18 @@
       "resolved": "https://registry.npmjs.org/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz",
       "integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g=="
     },
+    "vue-qrcode-reader": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vue-qrcode-reader/-/vue-qrcode-reader-3.1.0.tgz",
+      "integrity": "sha512-k2uoUjibxzdHJPfmsL1T9KVNzKPG/xIzKWMgBTXExoJlvZ5VKrBIFpP3P+rXNylfL3yw5AftE3K1yf4CoTkfkQ==",
+      "requires": {
+        "barcode-detector": "^1.0.0",
+        "callforth": "^0.3.1",
+        "core-js": "^3.6.5",
+        "vue": "^2.6.11",
+        "webrtc-adapter": "7.7.0"
+      }
+    },
     "vue-router": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz",
@@ -23136,6 +23267,15 @@
         "wrap-ansi": "^6.0.0"
       }
     },
+    "webrtc-adapter": {
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-7.7.0.tgz",
+      "integrity": "sha512-7Bp9OBnx642oJRkom1tNAbeJjUadAq2rh5xLL9YXPw5hVyt2h4hHr5bcoPYDs1stp/mZHSPSQA34YISdnr0DBQ==",
+      "requires": {
+        "rtcpeerconnection-shim": "^1.2.15",
+        "sdp": "^2.12.0"
+      }
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 2c1b83c..9f42263 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
     "nuxt-sweetalert2": "^1.0.0",
     "validator": "^13.6.0",
     "vue-barcode-reader": "^1.0.2",
-    "vue-json-csv": "^1.2.12"
+    "vue-json-csv": "^1.2.12",
+    "vue-qrcode-reader": "^3.1.0"
   },
   "devDependencies": {
     "eslint-config-prettier": "^8.1.0",
diff --git a/pages/Admin/index.vue b/pages/Admin/index.vue
index e3177ac..f8639dc 100644
--- a/pages/Admin/index.vue
+++ b/pages/Admin/index.vue
@@ -12,7 +12,7 @@
         drag-drop
         expanded
       >
-        <div class="section has-text-centered">
+        <div class="section has-text-centered m-3">
           <b-icon icon="upload" size="is-large" class="mb-2" />
 
           <p class="is-size-5">
@@ -22,11 +22,6 @@
           </p>
 
           <p class="is-size-6">Tamaño máximo 20MB</p>
-
-          <p class="is-size-7">
-            Si al momento de elegir un archivo este no se selecciona, haga click
-            en cancelar en la ventana emergente e intente de nuevo.
-          </p>
         </div>
       </b-upload>
     </b-field>
@@ -36,7 +31,7 @@
       </b-button>
     </div>
     <p class="is-size-4 my-3">Descargar base de datos invitados:</p>
-    <div class="has-text-centered">
+    <div class="boton has-text-centered">
       <b-button class="is-info">
         <JsonCSV
           class="btn btn-default"
@@ -55,7 +50,6 @@
 <script>
 import JsonCSV from 'vue-json-csv'
 import axios from 'axios'
-import sweetalert2 from 'sweetalert2'
 
 export default {
   components: {
@@ -155,4 +149,12 @@ export default {
 .full-h {
   height: 75vh;
 }
+@media (max-width: 768px) {
+  .container {
+    margin: 0 15px !important;
+  }
+  .full-h {
+  height: 80vh;
+}
+}
 </style>
diff --git a/pages/Operador/index.vue b/pages/Operador/index.vue
new file mode 100644
index 0000000..4405a0f
--- /dev/null
+++ b/pages/Operador/index.vue
@@ -0,0 +1,113 @@
+<template>
+  <section class="container full-h">
+    <div class="my-3 has-text-centered">
+      <p class="is-size-2">Lector de códigos QR</p>
+    </div>
+    <!-- <p class="is-size-4 my-3">Subir base de datos de los profesores:</p> -->
+    <div v-if="!isReading" class="has-text-centered mb-4">
+      <b-button type="is-info" @click="() => this.isReading = true">
+        Leer QR
+      </b-button>
+    </div>
+    <StreamBarcodeReader @decode="onDecode"> </StreamBarcodeReader>
+    <b-loading :is-full-page="true" v-model="isLoading" :can-cancel="false" />
+  </section>
+</template>
+
+<script>
+import { StreamBarcodeReader } from 'vue-barcode-reader'
+import axios from 'axios'
+
+
+export default {
+  components: { StreamBarcodeReader },
+  data() {
+    return {
+      isLoading: false,
+      isReading: false,
+      idProfesor: ''
+    }
+  },
+  methods: {
+    resetear() {
+      if (this.idProfesor) this.idProfesor = ''
+    },
+    onDecode(decodedString) {
+      let decodedData = {}
+
+      try {
+        decodedData = JSON.parse(decodedString)
+      } catch (err) {
+        this.resetear()
+      }
+      if (decodedData.idProfesor) {
+        if (typeof decodedData.idProfesor === 'number')
+          this.idProfesor = decodedData.idProfesor.toString()
+        else this.idProfesor = decodedData.idProfesor
+      }
+      if (this.idProfesor)
+        this.enviar(this.idProfesor)
+    },
+    // confirmarEnviar() {
+    //   this.$swal({
+    //     title: '¿Estás seguro de querer registrar este invitado?',
+    //     type: 'question',
+    //     timer: 9000,
+    //     showCancelButton: true,
+    //     cancelButtonColor: '#d33',
+    //     confirmButtonText: 'Aceptar',
+    //     confirmButtonColor: '#1e3c70',
+    //   }).then((res) => {
+    //     if (res.value) {
+    //       this.enviar()
+    //     }
+    //   })
+    // },
+    enviar(idProfesor) {
+      console.log(`Se ha enviado el qr con id ${idProfesor}`)
+      // const formData = new FormData()
+
+      // this.isLoading = true
+      // formData.append('file', this.csv)
+
+      // axios
+      //   .post(`${process.env.api}/profesor/cargarDatos`, formData)
+      //   .then((res) => {
+      //     this.isLoading = false
+      //     this.csv = {}
+      //     this.successUpload()
+      //   }).catch(err => {
+      //     this.isLoading = false
+      //     this.csv = {}
+      //     console.log(err)
+      //     this.errorMessage()
+      //   })
+    },
+    // successUpload() {
+    //   this.$swal({
+    //     title: 'Se ha subido el archivo con éxito.',
+    //     type: 'success',
+    //     timer: 5000,
+    //     confirmButtonText: 'Aceptar',
+    //     confirmButtonColor: '#1e3c70',
+    //   })
+    // },
+    // errorMessage(){
+    //   this.$swal({
+    //     title: 'Ha ocurrido un error al subir el archivo.',
+    //     type: 'error',
+    //     timer: 5000,
+    //     confirmButtonText: 'Aceptar',
+    //     confirmButtonColor: '#1e3c70',
+    //   })
+    // }
+  },
+  layout: 'default',
+}
+</script>
+
+<style scoped>
+.full-h {
+  height: 75vh;
+}
+</style>
diff --git a/pages/Profesor/index.vue b/pages/Profesor/index.vue
new file mode 100644
index 0000000..ac79fab
--- /dev/null
+++ b/pages/Profesor/index.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="container full-h">
+    <div class="my-3 has-text-centered">
+      <p class="is-size-2 my-5">
+        REGISTRO DE PROFESORES PARA LA OBTENCIÓN DE MEDALLA
+      </p>
+    </div>
+    <div class="is-flex is-justify-content-center box">
+      <div>
+        <p class="is-size-4 block"><b>Nombre:</b> {{ `${Profesor.nombre}` }}</p>
+        <p class="is-size-4 block">
+          <b>Número de trabajador: </b>{{ `${Profesor.numeroTrabajador}` }}
+        </p>
+        <p class="is-size-4 block">
+          <b>Adscripción:</b> {{ `${Profesor.adscripcion}` }}
+        </p>
+        <div class="is-flex">
+          <p class="is-size-4 block mr-4"><b>Cantidad de invitados: </b></p>
+          <b-select
+            v-model="numeroInvitados"
+            placeholder="Seleccione"
+            class="is-size-4 block mx-0"
+          >
+            <option value="0">0</option>
+            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+          </b-select>
+        </div>
+      </div>
+    </div>
+    <p v-if="flag" class="is-size-3 my-5">Información de los invitados:</p>
+    <div
+      v-for="(item, index) in invitados"
+      v-bind:key="index"
+      class="is-flex is-justify-content-center box"
+    >
+      <div>
+        <p class="is-size-3 has-text-centered block">
+          {{ `Invitado ${index + 1}` }}
+        </p>
+        <div class="columns">
+          <div class="column">
+            <p class="is-size-4 block has-text-weight-bold">Nombre(s):</p>
+            <p class="is-size-4 block has-text-weight-bold">Apellidos:</p>
+            <p class="is-size-4 block has-text-weight-bold">Edad:</p>
+          </div>
+          <div class="column">
+            <b-input
+              expanded
+              class="block"
+              type="text"
+              v-model="invitados[index].nombre"
+            ></b-input>
+            <b-input
+              expanded
+              class="block"
+              type="text"
+              v-model="invitados[index].apellido"
+            ></b-input>
+            <b-input
+              expanded
+              class="block"
+              type="number"
+              min="0"
+              v-model="invitados[index].edad"
+            ></b-input>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="has-text-centered">
+      <b-button
+        v-if="mostrarBoton()"
+        class="is-success mb-5"
+        @click="enviar()"
+        >Enviar</b-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      Profesor: {},
+      numeroInvitados: null,
+      invitados: [],
+      flag: false,
+      isDisabled: false,
+    }
+  },
+  methods: {
+    enviar() {
+      console.log(this.invitados)
+    },
+    mostrarBoton(){
+      console.log("validando")
+      console.log(this.numeroInvitados)
+      if(this.numeroInvitados === 0) return true
+      let counter = 0
+      this.invitados.forEach(item => {
+        if(item.nombre && item.apellido && item.edad) counter += 1
+      });
+      if(counter == this.numeroInvitados) return true
+      this.isDisabled = true
+    }
+  },
+  created() {
+    this.Profesor.idProfesor = localStorage.getItem('idProfesor')
+    this.Profesor.nombre = localStorage.getItem('nombre')
+    this.Profesor.adscripcion = localStorage.getItem('adscripcion')
+    this.Profesor.numeroTrabajador = localStorage.getItem('numeroTrabajador')
+  },
+  watch: {
+    numeroInvitados() {
+      this.invitados = []
+      if (this.numeroInvitados > 0) this.flag = true
+      else this.flag = false
+      for (let i = 0; i < this.numeroInvitados; i++) {
+        this.invitados[i] = {}
+      }
+    },
+  },
+  layout: 'profesor',
+}
+</script>
+
+<style scoped>
+/* .full-h {
+  height: 75vh;
+} */
+</style>