CIDWA/premiaciones_front
12
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

Alerta código QR

Browse Source
This commit is contained in:
Gabriela Gómez Hernández
2022-04-29 18:08:41 -05:00
parent fc85e0b6da
commit 0bd6809aa1
15 changed files with 267 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/operador/qr.js
+19 -2
View File
@@ -1,23 +1,40 @@
import React, { useState } from 'react';
import { QrReader } from 'react-qr-reader';
import swal from 'sweetalert';
function Qr(props){
const [data, setData] = useState('No result');
const alerta = () =>{
swal({
title: "Invitado registrado",
button: "Aceptar",
timer:10000
}).then(() => {
window.location.reload(false);
});
}
return (
<>
<QrReader
onResult={(result, error) => {
if (!!result) {
setData(result?.text);
data;
}
if (!!error) {
console.info(error);
}
}}
style={{ width: '100%' }}
/>
{(() => {
if(data!='No result'){
return alerta();
}
})()}
</>
);
}
};
export default Qr;
components/profesores_registro/invitado.js
+73 -10
View File
@@ -1,12 +1,47 @@
import styles from "../../styles/invitado.module.css";
import { Container, Row, Col,InputGroup,FormControl} from "react-bootstrap";
import { Container, Row, Col,InputGroup,FormControl,Button} from "react-bootstrap";
import { useInvitado } from "./useInvitado";
const initialForm= {
nombre:"",
apellidos:"",
edad:18
}
const validationsForm=(form) =>{
let errors={};
if(!form.nombre.trim()){
errors.nombre="El campo 'Nombre' es requerido"
}
if(!form.apellidos.trim()){
errors.apellidos="El campo 'Apellidos' es requerido"
}
return errors
}
function Invitado(props){
const {
form,
errors,
loading,
response,
handleChange,
handleBlur,
handleSubmit}
= useInvitado (initialForm,validationsForm);
return(
<Container>
<form onSubmit={handleSubmit} >
<div className={`${styles.container}`}>
<Row>
<p class="text-center">INVITADO {props.numero}</p>
</Row>
<Row className="justify-content-md-center">
<Col xs={3}>
<p className="text-center">INVITADO {props.numero}</p>
</Col></Row>
<Row>
<Col xs={5}>
<p className="text-end">Nombre(s):</p>
@@ -14,12 +49,16 @@ function Invitado(props){
<p className="text-end">Edad:</p>
</Col>
<Col xs={4}>
<form>
<InputGroup className="mb-3">
<FormControl
placeholder="Nombre"
aria-label="nombre"
aria-describedby="basic-addon2"
name="nombre"
onChange={handleChange}
onBlur={handleBlur}
value={form.nombre}
required
/>
</InputGroup>
<InputGroup className="mb-3">
@@ -27,16 +66,26 @@ function Invitado(props){
placeholder="Apellidos"
aria-label="apellidos"
aria-describedby="basic-addon2"
name="apellidos"
onChange={handleChange}
onBlur={handleBlur}
value={form.apellidos}
required
/>
</InputGroup>
<InputGroup className="mb-3">
<Container>
<Container
name="edad"
onChange={handleChange}
onBlur={handleBlur}
value={form.edad}
required
>
<div className="row justify-content-start">
<div className="col-4">
<div className="input-group mb-3 ">
<select class="form-select" id="inputGroupSelect02">
<option selected>...</option>
<option value="18">18</option>
<option selected value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
@@ -125,11 +174,25 @@ function Invitado(props){
</div>
</Container>
</InputGroup>
</form>
{errors.nombre && <p style={styles}>{errors.nombre}</p>}
{errors.apellidos && <p style={styles}>{errors.apellidos}</p>}
</Col>
</Row>
</div>
</form>
</Container>
)
}
export default Invitado;
export default Invitado;
/*
<Row className="justify-content-md-center">
<Col xs={1}>
<Button variant="primary" type="submit" className={`${styles.boton}`}>
Registrar
</Button>
</Col>
</Row>*/
components/profesores_registro/profesores.js
+9 -3
View File
@@ -6,7 +6,9 @@ function Registro(){
const[select,setSelect]=useState("0");
return(
<Container>
<Row className="justify-content-md-center"><Col>
<div className={`${styles.titulo}`}>REGISTRO DE PROFESORES PARA LA OBTENCIÓN DE MEDALLAS</div>
</Col></Row>
<Container className={`${styles.container}`}>
<Row>
<Col className={`${styles.texto1}`}>
@@ -39,9 +41,10 @@ function Registro(){
</Row>
</Container>
<form>
{(() => {
switch(select){
case "1": return <Invitado numero="1" ></Invitado>;
case "1": return (<><Invitado numero="1" ></Invitado></>);
case "2": return (<><Invitado numero="1"></Invitado><Invitado numero="2"></Invitado></>
);
case "3": return (<><Invitado numero="1"></Invitado><Invitado numero="2"></Invitado><Invitado numero="3"></Invitado></>
@@ -52,11 +55,14 @@ function Registro(){
<Row className="justify-content-md-center">
<Col xs={1}>
<a href="./registro-exitoso">
<Button className={`${styles.boton1}`} size="lg">Registrar</Button>
<Button className={`${styles.boton1}`}>Siguiente</Button>
</a>
</Col>
</Row>
</form>
</Container>
);
}
export default Registro;
export default Registro;
//tiene que ser un boton de tipo submit?
components/profesores_registro/useInvitado.js
+29
View File
@@ -0,0 +1,29 @@
import {useState} from 'react';
export const useInvitado = (initialForm,validateForm) => {
const [form, setForm] = useState(initialForm);
const [errors, setErrors] = useState({});
const [loading, setLoading] = useState(false);
const [response, setResponse] = useState(null);
const handleChange = (e) =>{
const {name,value}=e.target;
setForm({
...form,
[name]:value
});
}
const handleBlur = (e) =>{
handleChange(e);
setErrors(validateForm(form));
}
const handleSubmit = (e) =>{
e.preventDefault();
setErrors(validateForm(form));
}
return{
form,errors,loading,response,handleChange,handleBlur,handleSubmit
}
};
package-lock.json
Generated
+99 -1
View File
@@ -12,11 +12,14 @@
"bootstrap": "^5.1.3",
"moment": "^2.29.2",
"next": "12.1.4",
"prop-types": "^15.8.1",
"react": "18.0.0",
"react-bootstrap": "^2.2.3",
"react-dom": "18.0.0",
"react-qr-reader": "^3.0.0-beta-1",
"reactstrap": "^9.0.2"
"react-router-dom": "^6.3.0",
"reactstrap": "^9.0.2",
"sweetalert": "^2.1.2"
},
"devDependencies": {
"eslint": "8.12.0",
@@ -1011,6 +1014,11 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/es6-object-assign": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
"integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw="
},
"node_modules/escape-string-regexp": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -1767,6 +1775,14 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/history": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
"integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
"dependencies": {
"@babel/runtime": "^7.7.6"
}
},
"node_modules/ignore": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@@ -2541,6 +2557,11 @@
"node": ">= 0.8.0"
}
},
"node_modules/promise-polyfill": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz",
"integrity": "sha1-36lpQ+qcEh/KTem1hoyznTRy4Fc="
},
"node_modules/prop-types": {
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -2671,6 +2692,30 @@
"react-dom": "^16.8.0 || ^17.0.0"
}
},
"node_modules/react-router": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
"integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
"dependencies": {
"history": "^5.2.0"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
"integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
"dependencies": {
"history": "^5.2.0",
"react-router": "6.3.0"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/react-transition-group": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
@@ -3033,6 +3078,15 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/sweetalert": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz",
"integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==",
"dependencies": {
"es6-object-assign": "^1.1.0",
"promise-polyfill": "^6.0.2"
}
},
"node_modules/text-table": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -3899,6 +3953,11 @@
"is-symbol": "^1.0.2"
}
},
"es6-object-assign": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
"integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw="
},
"escape-string-regexp": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -4476,6 +4535,14 @@
"has-symbols": "^1.0.2"
}
},
"history": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
"integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
"requires": {
"@babel/runtime": "^7.7.6"
}
},
"ignore": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@@ -5025,6 +5092,11 @@
"integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
"dev": true
},
"promise-polyfill": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz",
"integrity": "sha1-36lpQ+qcEh/KTem1hoyznTRy4Fc="
},
"prop-types": {
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -5121,6 +5193,23 @@
"rollup": "^2.67.2"
}
},
"react-router": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
"integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
"requires": {
"history": "^5.2.0"
}
},
"react-router-dom": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
"integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
"requires": {
"history": "^5.2.0",
"react-router": "6.3.0"
}
},
"react-transition-group": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
@@ -5358,6 +5447,15 @@
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
"dev": true
},
"sweetalert": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz",
"integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==",
"requires": {
"es6-object-assign": "^1.1.0",
"promise-polyfill": "^6.0.2"
}
},
"text-table": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
package.json
+4 -1
View File
@@ -13,11 +13,14 @@
"bootstrap": "^5.1.3",
"moment": "^2.29.2",
"next": "12.1.4",
"prop-types": "^15.8.1",
"react": "18.0.0",
"react-bootstrap": "^2.2.3",
"react-dom": "18.0.0",
"react-qr-reader": "^3.0.0-beta-1",
"reactstrap": "^9.0.2"
"react-router-dom": "^6.3.0",
"reactstrap": "^9.0.2",
"sweetalert": "^2.1.2"
},
"devDependencies": {
"eslint": "8.12.0",
pages/admin.js
+6 -1
View File
@@ -6,9 +6,14 @@ import Head from 'next/head';
import { Container, Row, Col,Button} from "react-bootstrap";
import SubirArchivo from "../components/administrador/admin";
import React, { useState } from 'react';
import axios from "axios";
export default function Admin(){
const [archive, setArchive] = useState('');//este se
const [archive2, setArchive2] = useState('Subir base de datos de profesores');
const handleFile = () => {
// axios.get()
}
const setArchiveOn = () => {
if(archive==""){
setArchive(<SubirArchivo></SubirArchivo>);
@@ -35,7 +40,7 @@ export default function Admin(){
{archive2}
</Button>
{archive}
<Button size="lg" className={`${styles.boton}`}>
<Button size="lg" className={`${styles.boton}`} onClick={handleFile}>
Descargar base de datos de invitados
</Button>
</div>
pages/operador.js
+1 -1
View File
@@ -32,7 +32,7 @@ export default function Register(){
<Col><p>Operador</p></Col>
</Row>
</Container>
<Container className={`${styles.contenido}`}>
<Container className={`${styles.operador}`}>
<Row className="justify-content-md-center">
<Col lg="4" sm="10" xs="12">
<h2>{data}</h2>
styles/admin.module.css
+11 -4
View File
@@ -1,10 +1,17 @@
.contenido{
font-family: 'Vollkorn', serif;
font-family: 'Calibri','Ginebra','Verdana', serif;
min-height: 350px;
margin-top: 130px;
}
.operador{
font-family: 'Calibri','Ginebra','Verdana', serif;
min-height: 350px;
margin-top: 3%;
margin-bottom:3%
}
.subtitulo{
font-family: 'Vollkorn', serif;
font-family: 'Calibri','Ginebra','Verdana', serif;
color:#1B3D70;
font-weight: bold;
font-size: x-large;
@@ -24,7 +31,7 @@
margin-top: 15px;
color:white;
background-color: #1B3D70;
font-family: 'Vollkorn', serif;
font-family: 'Calibri','Ginebra','Verdana', serif;
font-size: x-large;
font-weight: bold;
border:0;
@@ -32,7 +39,7 @@
.salir{
color:white;
background-color: #1B3D70;
font-family: 'Vollkorn', serif;
font-family: 'Calibri','Ginebra','Verdana', serif;
font-size: x-large;
font-weight: bold;
border:0;
styles/default.module.css
+1 -1
View File
@@ -34,7 +34,7 @@
.boton{
color:white;
background-color: #2c56a0;
font-family: 'Vollkorn', serif;
font-family: 'Calibri','Ginebra','Verdana', serif;
font-size: x-large;
font-weight: bold;
border:0px;
styles/exito.module.css
+2 -2
View File
@@ -2,7 +2,7 @@
min-height: 500px;
margin-bottom: 30px;
color:#644F0C;
font-family: 'Vollkorn', serif;
font-family: 'Calibri','Ginebra','Verdana', serif;
font-size:xx-large;
font-weight: bold;
padding: 8%;
@@ -12,7 +12,7 @@
.salir{
color:white;
background-color: #1B3D70;
font-family: 'Vollkorn', serif;
font-family: 'Calibri','Ginebra','Verdana', serif;
font-size: x-large;
font-weight: bold;
border:0;
styles/globals.css
+2 -2
View File
@@ -24,7 +24,7 @@ a {
margin-left: 7%;
margin-right: 7%;
padding-top: 30px;
font-family: 'Vollkorn', serif;
font-family: 'Calibri','Ginebra','Verdana', serif;
border-width: 0px;
font-size: large;
}
@@ -32,7 +32,7 @@ a {
#subtitulo{
color:#1B3D70;
font-family: 'Vollkorn', serif;
font-family: 'Calibri','Ginebra','Verdana', serif;
font-size:X-large;
text-align: center;
font-weight: bold;
styles/invitado.module.css
+3
View File
@@ -10,4 +10,7 @@
border-width: 1px;
border-color: black;
border-style: solid;
}
.boton{
margin-bottom: 15px;
}
styles/login.module.css
+2 -2
View File
@@ -11,7 +11,7 @@
font-weight: normal;
}
.contenido{
font-family: 'Vollkorn', serif;
font-family: 'Calibri','Ginebra','Verdana', serif;
min-height: 500px;
margin-top: 30px;
color:#1B3D70;
@@ -23,7 +23,7 @@
margin-top: 15px;
color:white;
background-color: #1B3D70;
font-family: 'Vollkorn', serif;
font-family: 'Calibri','Ginebra','Verdana', serif;
font-size: x-large;
font-weight: bold;
border:0;
styles/profesores.module.css
+6 -5
View File
@@ -4,7 +4,7 @@
min-height: 400px;
margin-bottom: 30px;
color:#644F0C;
font-family: 'Vollkorn', serif;
font-family: 'Calibri','Ginebra','Verdana', serif;
font-size:xx-large;
font-weight: bold;
padding: 5%;
@@ -14,7 +14,7 @@
}
.titulo{
color:#644F0C;
font-family: 'Vollkorn', serif;
font-family: 'Calibri','Ginebra','Verdana', serif;
text-align: center;
font-size:xx-large;
font-weight: bolder;
@@ -30,11 +30,12 @@
}
.boton1{
color:white;
font-family: 'Vollkorn', serif;
font-size: x-large;
font-family: 'Calibri','Ginebra','Verdana', serif;
font-size: large;
font-weight: bold;
background-color: rgb(100,79,12,76%);
border:0;
margin-bottom: 15px;
}
.boton1:hover{
background-color: rgb(100,79,12,50%);
@@ -42,7 +43,7 @@
.boton2{
color:white;
background-color: #1B3D70;
font-family: 'Vollkorn', serif;
font-family: 'Calibri','Ginebra','Verdana', serif;
font-size: x-large;
font-weight: bold;
border:0;