validación invitados
This commit is contained in:
Gabriela Gómez Hernández
@@ -1,198 +0,0 @@
|
||||
import styles from "../../styles/invitado.module.css";
|
||||
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 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>
|
||||
<p className="text-end">Apellidos:</p>
|
||||
<p className="text-end">Edad:</p>
|
||||
</Col>
|
||||
<Col xs={4}>
|
||||
<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">
|
||||
<FormControl
|
||||
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
|
||||
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 value="18">18</option>
|
||||
<option value="19">19</option>
|
||||
<option value="20">20</option>
|
||||
<option value="21">21</option>
|
||||
<option value="22">22</option>
|
||||
<option value="23">23</option>
|
||||
<option value="24">24</option>
|
||||
<option value="25">25</option>
|
||||
<option value="26">26</option>
|
||||
<option value="27">27</option>
|
||||
<option value="28">28</option>
|
||||
<option value="29">29</option>
|
||||
<option value="30">30</option>
|
||||
<option value="31">31</option>
|
||||
<option value="32">32</option>
|
||||
<option value="33">33</option>
|
||||
<option value="34">34</option>
|
||||
<option value="35">35</option>
|
||||
<option value="36">36</option>
|
||||
<option value="37">37</option>
|
||||
<option value="38">38</option>
|
||||
<option value="39">39</option>
|
||||
<option value="40">40</option>
|
||||
<option value="41">41</option>
|
||||
<option value="42">42</option>
|
||||
<option value="43">43</option>
|
||||
<option value="44">44</option>
|
||||
<option value="45">45</option>
|
||||
<option value="46">46</option>
|
||||
<option value="47">47</option>
|
||||
<option value="48">48</option>
|
||||
<option value="49">49</option>
|
||||
<option value="50">50</option>
|
||||
<option value="51">51</option>
|
||||
<option value="52">52</option>
|
||||
<option value="53">53</option>
|
||||
<option value="54">54</option>
|
||||
<option value="55">55</option>
|
||||
<option value="56">56</option>
|
||||
<option value="57">57</option>
|
||||
<option value="58">58</option>
|
||||
<option value="59">59</option>
|
||||
<option value="60">60</option>
|
||||
<option value="61">61</option>
|
||||
<option value="62">62</option>
|
||||
<option value="63">63</option>
|
||||
<option value="64">64</option>
|
||||
<option value="65">65</option>
|
||||
<option value="66">66</option>
|
||||
<option value="67">67</option>
|
||||
<option value="68">68</option>
|
||||
<option value="69">69</option>
|
||||
<option value="70">70</option>
|
||||
<option value="71">71</option>
|
||||
<option value="72">72</option>
|
||||
<option value="73">73</option>
|
||||
<option value="74">74</option>
|
||||
<option value="75">75</option>
|
||||
<option value="76">76</option>
|
||||
<option value="77">77</option>
|
||||
<option value="78">78</option>
|
||||
<option value="79">79</option>
|
||||
<option value="80">80</option>
|
||||
<option value="81">81</option>
|
||||
<option value="82">82</option>
|
||||
<option value="83">83</option>
|
||||
<option value="84">84</option>
|
||||
<option value="85">85</option>
|
||||
<option value="86">86</option>
|
||||
<option value="87">87</option>
|
||||
<option value="88">88</option>
|
||||
<option value="89">89</option>
|
||||
<option value="90">90</option>
|
||||
<option value="91">91</option>
|
||||
<option value="92">92</option>
|
||||
<option value="93">93</option>
|
||||
<option value="94">94</option>
|
||||
<option value="95">95</option>
|
||||
<option value="96">96</option>
|
||||
<option value="97">97</option>
|
||||
<option value="98">98</option>
|
||||
<option value="99">99</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</InputGroup>
|
||||
|
||||
{errors.nombre && <p style={styles}>{errors.nombre}</p>}
|
||||
{errors.apellidos && <p style={styles}>{errors.apellidos}</p>}
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
export default Invitado;
|
||||
|
||||
/*
|
||||
<Row className="justify-content-md-center">
|
||||
<Col xs={1}>
|
||||
<Button variant="primary" type="submit" className={`${styles.boton}`}>
|
||||
Registrar
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>*/
|
||||
|
||||
@@ -0,0 +1,694 @@
|
||||
import styles from "../../styles/profesores.module.css";
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import { Container, Row, Col,InputGroup,FormControl,Button,Form,Stack} from "react-bootstrap";
|
||||
import React,{useState} from 'react';
|
||||
|
||||
|
||||
|
||||
export default function Invited(){
|
||||
const[select,setSelect]=useState("0");
|
||||
const[edad,setEdad]=useState("18");
|
||||
|
||||
return(
|
||||
<div>
|
||||
<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}`}>
|
||||
<p className="text-end">Nombre:</p>
|
||||
<p className="text-end">Número de trabajador:</p>
|
||||
<p className="text-end">Adscripción:</p>
|
||||
<p className="text-end">Cantidad de invitados:</p>
|
||||
</Col>
|
||||
<Col className={`${styles.texto2}`}>
|
||||
<form>
|
||||
<p className="text-start">Gabriela Gómez Hernández</p>
|
||||
<p className="text-start">2013050757</p>
|
||||
<p className="text-start">Estudiante</p>
|
||||
<Container>
|
||||
<div className="row justify-content-start">
|
||||
<div className="col-2">
|
||||
<Form.Select as="select" size="lg" onChange={(e)=>{setSelect(e.target.value)}} defaultValue="0">
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
</Form.Select>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</form>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
|
||||
{(() => {
|
||||
switch(select){
|
||||
case "1": return (
|
||||
<Form action="./registro-exitoso">
|
||||
<Container className={`${styles.invitado}`}>
|
||||
<Stack className="col-md-6 mx-auto">
|
||||
<div className={`${styles.texto2}`}><p className="text-center">INVITADO 1</p></div>
|
||||
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
|
||||
<Form.Label>Nombre(s): </Form.Label>
|
||||
<Form.Control type="text" required/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
|
||||
<Form.Label>Apellidos: </Form.Label>
|
||||
<Form.Control type="text" required/>
|
||||
</Form.Group>
|
||||
</Stack>
|
||||
<Stack gap={1} className="col-md-2 mx-auto">
|
||||
<Form.Group className={`${styles.edad}`}>
|
||||
<Form.Label>Edad: </Form.Label>
|
||||
<Form.Select as="edad" defaultValue="18" onChange={(e)=>{setEdad(e.target.value)}} >
|
||||
<option value="18">18</option>
|
||||
<option value="19">19</option>
|
||||
<option value="20">20</option>
|
||||
<option value="21">21</option>
|
||||
<option value="22">22</option>
|
||||
<option value="23">23</option>
|
||||
<option value="24">24</option>
|
||||
<option value="25">25</option>
|
||||
<option value="26">26</option>
|
||||
<option value="27">27</option>
|
||||
<option value="28">28</option>
|
||||
<option value="29">29</option>
|
||||
<option value="30">30</option>
|
||||
<option value="31">31</option>
|
||||
<option value="32">32</option>
|
||||
<option value="33">33</option>
|
||||
<option value="34">34</option>
|
||||
<option value="35">35</option>
|
||||
<option value="36">36</option>
|
||||
<option value="37">37</option>
|
||||
<option value="38">38</option>
|
||||
<option value="39">39</option>
|
||||
<option value="40">40</option>
|
||||
<option value="41">41</option>
|
||||
<option value="42">42</option>
|
||||
<option value="43">43</option>
|
||||
<option value="44">44</option>
|
||||
<option value="45">45</option>
|
||||
<option value="46">46</option>
|
||||
<option value="47">47</option>
|
||||
<option value="48">48</option>
|
||||
<option value="49">49</option>
|
||||
<option value="50">50</option>
|
||||
<option value="51">51</option>
|
||||
<option value="52">52</option>
|
||||
<option value="53">53</option>
|
||||
<option value="54">54</option>
|
||||
<option value="55">55</option>
|
||||
<option value="56">56</option>
|
||||
<option value="57">57</option>
|
||||
<option value="58">58</option>
|
||||
<option value="59">59</option>
|
||||
<option value="60">60</option>
|
||||
<option value="61">61</option>
|
||||
<option value="62">62</option>
|
||||
<option value="63">63</option>
|
||||
<option value="64">64</option>
|
||||
<option value="65">65</option>
|
||||
<option value="66">66</option>
|
||||
<option value="67">67</option>
|
||||
<option value="68">68</option>
|
||||
<option value="69">69</option>
|
||||
<option value="70">70</option>
|
||||
<option value="71">71</option>
|
||||
<option value="72">72</option>
|
||||
<option value="73">73</option>
|
||||
<option value="74">74</option>
|
||||
<option value="75">75</option>
|
||||
<option value="76">76</option>
|
||||
<option value="77">77</option>
|
||||
<option value="78">78</option>
|
||||
<option value="79">79</option>
|
||||
<option value="80">80</option>
|
||||
<option value="81">81</option>
|
||||
<option value="82">82</option>
|
||||
<option value="83">83</option>
|
||||
<option value="84">84</option>
|
||||
<option value="85">85</option>
|
||||
<option value="86">86</option>
|
||||
<option value="87">87</option>
|
||||
<option value="88">88</option>
|
||||
<option value="89">89</option>
|
||||
<option value="90">90</option>
|
||||
<option value="91">91</option>
|
||||
<option value="92">92</option>
|
||||
<option value="93">93</option>
|
||||
<option value="94">94</option>
|
||||
<option value="95">95</option>
|
||||
<option value="96">96</option>
|
||||
<option value="97">97</option>
|
||||
<option value="98">98</option>
|
||||
<option value="99">99</option>
|
||||
<option value="100">100</option>
|
||||
</Form.Select>
|
||||
</Form.Group>
|
||||
</Stack>
|
||||
</Container>
|
||||
<Container><Stack className="col-md-2 mx-auto">
|
||||
<Button className={`${styles.boton2}`} type="submit"> Registrar</Button>
|
||||
</Stack></Container>
|
||||
</Form>
|
||||
);
|
||||
case "2": return (
|
||||
<Form action="./registro-exitoso">
|
||||
<Container className={`${styles.invitado}`}>
|
||||
<Stack className="col-md-6 mx-auto">
|
||||
<div className={`${styles.texto2}`}><p className="text-center">INVITADO 1</p></div>
|
||||
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
|
||||
<Form.Label>Nombre(s): </Form.Label>
|
||||
<Form.Control type="text" required />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
|
||||
<Form.Label>Apellidos: </Form.Label>
|
||||
<Form.Control type="text" required/>
|
||||
</Form.Group>
|
||||
</Stack>
|
||||
<Stack className="col-md-2 mx-auto">
|
||||
<Form.Group className={`${styles.edad}`}>
|
||||
<Form.Label>Edad: </Form.Label>
|
||||
<Form.Select as="edad" size="lg" defaultValue="18" onChange={(e)=>{setEdad(e.target.value)}} >
|
||||
<option value="18">18</option>
|
||||
<option value="19">19</option>
|
||||
<option value="20">20</option>
|
||||
<option value="21">21</option>
|
||||
<option value="22">22</option>
|
||||
<option value="23">23</option>
|
||||
<option value="24">24</option>
|
||||
<option value="25">25</option>
|
||||
<option value="26">26</option>
|
||||
<option value="27">27</option>
|
||||
<option value="28">28</option>
|
||||
<option value="29">29</option>
|
||||
<option value="30">30</option>
|
||||
<option value="31">31</option>
|
||||
<option value="32">32</option>
|
||||
<option value="33">33</option>
|
||||
<option value="34">34</option>
|
||||
<option value="35">35</option>
|
||||
<option value="36">36</option>
|
||||
<option value="37">37</option>
|
||||
<option value="38">38</option>
|
||||
<option value="39">39</option>
|
||||
<option value="40">40</option>
|
||||
<option value="41">41</option>
|
||||
<option value="42">42</option>
|
||||
<option value="43">43</option>
|
||||
<option value="44">44</option>
|
||||
<option value="45">45</option>
|
||||
<option value="46">46</option>
|
||||
<option value="47">47</option>
|
||||
<option value="48">48</option>
|
||||
<option value="49">49</option>
|
||||
<option value="50">50</option>
|
||||
<option value="51">51</option>
|
||||
<option value="52">52</option>
|
||||
<option value="53">53</option>
|
||||
<option value="54">54</option>
|
||||
<option value="55">55</option>
|
||||
<option value="56">56</option>
|
||||
<option value="57">57</option>
|
||||
<option value="58">58</option>
|
||||
<option value="59">59</option>
|
||||
<option value="60">60</option>
|
||||
<option value="61">61</option>
|
||||
<option value="62">62</option>
|
||||
<option value="63">63</option>
|
||||
<option value="64">64</option>
|
||||
<option value="65">65</option>
|
||||
<option value="66">66</option>
|
||||
<option value="67">67</option>
|
||||
<option value="68">68</option>
|
||||
<option value="69">69</option>
|
||||
<option value="70">70</option>
|
||||
<option value="71">71</option>
|
||||
<option value="72">72</option>
|
||||
<option value="73">73</option>
|
||||
<option value="74">74</option>
|
||||
<option value="75">75</option>
|
||||
<option value="76">76</option>
|
||||
<option value="77">77</option>
|
||||
<option value="78">78</option>
|
||||
<option value="79">79</option>
|
||||
<option value="80">80</option>
|
||||
<option value="81">81</option>
|
||||
<option value="82">82</option>
|
||||
<option value="83">83</option>
|
||||
<option value="84">84</option>
|
||||
<option value="85">85</option>
|
||||
<option value="86">86</option>
|
||||
<option value="87">87</option>
|
||||
<option value="88">88</option>
|
||||
<option value="89">89</option>
|
||||
<option value="90">90</option>
|
||||
<option value="91">91</option>
|
||||
<option value="92">92</option>
|
||||
<option value="93">93</option>
|
||||
<option value="94">94</option>
|
||||
<option value="95">95</option>
|
||||
<option value="96">96</option>
|
||||
<option value="97">97</option>
|
||||
<option value="98">98</option>
|
||||
<option value="99">99</option>
|
||||
<option value="100">100</option>
|
||||
</Form.Select>
|
||||
</Form.Group>
|
||||
</Stack>
|
||||
</Container>
|
||||
<Container className={`${styles.invitado}`}>
|
||||
<Stack className="col-md-6 mx-auto">
|
||||
<div className={`${styles.texto2}`}><p className="text-center">INVITADO 2</p></div>
|
||||
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
|
||||
<Form.Label>Nombre(s): </Form.Label>
|
||||
<Form.Control type="text" required/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
|
||||
<Form.Label>Apellidos: </Form.Label>
|
||||
<Form.Control type="text" required/>
|
||||
</Form.Group>
|
||||
</Stack>
|
||||
<Stack className="col-md-2 mx-auto">
|
||||
<Form.Group className={`${styles.edad}`}>
|
||||
<Form.Label>Edad: </Form.Label>
|
||||
<Form.Select as="edad" size="lg" defaultValue="18" onChange={(e)=>{setEdad(e.target.value)}} >
|
||||
<option value="18">18</option>
|
||||
<option value="19">19</option>
|
||||
<option value="20">20</option>
|
||||
<option value="21">21</option>
|
||||
<option value="22">22</option>
|
||||
<option value="23">23</option>
|
||||
<option value="24">24</option>
|
||||
<option value="25">25</option>
|
||||
<option value="26">26</option>
|
||||
<option value="27">27</option>
|
||||
<option value="28">28</option>
|
||||
<option value="29">29</option>
|
||||
<option value="30">30</option>
|
||||
<option value="31">31</option>
|
||||
<option value="32">32</option>
|
||||
<option value="33">33</option>
|
||||
<option value="34">34</option>
|
||||
<option value="35">35</option>
|
||||
<option value="36">36</option>
|
||||
<option value="37">37</option>
|
||||
<option value="38">38</option>
|
||||
<option value="39">39</option>
|
||||
<option value="40">40</option>
|
||||
<option value="41">41</option>
|
||||
<option value="42">42</option>
|
||||
<option value="43">43</option>
|
||||
<option value="44">44</option>
|
||||
<option value="45">45</option>
|
||||
<option value="46">46</option>
|
||||
<option value="47">47</option>
|
||||
<option value="48">48</option>
|
||||
<option value="49">49</option>
|
||||
<option value="50">50</option>
|
||||
<option value="51">51</option>
|
||||
<option value="52">52</option>
|
||||
<option value="53">53</option>
|
||||
<option value="54">54</option>
|
||||
<option value="55">55</option>
|
||||
<option value="56">56</option>
|
||||
<option value="57">57</option>
|
||||
<option value="58">58</option>
|
||||
<option value="59">59</option>
|
||||
<option value="60">60</option>
|
||||
<option value="61">61</option>
|
||||
<option value="62">62</option>
|
||||
<option value="63">63</option>
|
||||
<option value="64">64</option>
|
||||
<option value="65">65</option>
|
||||
<option value="66">66</option>
|
||||
<option value="67">67</option>
|
||||
<option value="68">68</option>
|
||||
<option value="69">69</option>
|
||||
<option value="70">70</option>
|
||||
<option value="71">71</option>
|
||||
<option value="72">72</option>
|
||||
<option value="73">73</option>
|
||||
<option value="74">74</option>
|
||||
<option value="75">75</option>
|
||||
<option value="76">76</option>
|
||||
<option value="77">77</option>
|
||||
<option value="78">78</option>
|
||||
<option value="79">79</option>
|
||||
<option value="80">80</option>
|
||||
<option value="81">81</option>
|
||||
<option value="82">82</option>
|
||||
<option value="83">83</option>
|
||||
<option value="84">84</option>
|
||||
<option value="85">85</option>
|
||||
<option value="86">86</option>
|
||||
<option value="87">87</option>
|
||||
<option value="88">88</option>
|
||||
<option value="89">89</option>
|
||||
<option value="90">90</option>
|
||||
<option value="91">91</option>
|
||||
<option value="92">92</option>
|
||||
<option value="93">93</option>
|
||||
<option value="94">94</option>
|
||||
<option value="95">95</option>
|
||||
<option value="96">96</option>
|
||||
<option value="97">97</option>
|
||||
<option value="98">98</option>
|
||||
<option value="99">99</option>
|
||||
<option value="100">100</option>
|
||||
</Form.Select>
|
||||
</Form.Group>
|
||||
</Stack>
|
||||
</Container>
|
||||
<Container><Stack gap={1} className="col-md-2 mx-auto">
|
||||
<Button className={`${styles.boton2}`} type="submit"> Registrar</Button>
|
||||
</Stack></Container>
|
||||
</Form>
|
||||
);
|
||||
case "3": return (
|
||||
<Form action="./registro-exitoso">
|
||||
<Container className={`${styles.invitado}`}>
|
||||
<Stack className="col-md-6 mx-auto">
|
||||
<div className={`${styles.texto2}`}><p className="text-center">INVITADO 1</p></div>
|
||||
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
|
||||
<Form.Label>Nombre(s): </Form.Label>
|
||||
<Form.Control type="text" required />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
|
||||
<Form.Label>Apellidos: </Form.Label>
|
||||
<Form.Control type="text" required/>
|
||||
</Form.Group>
|
||||
</Stack>
|
||||
<Stack className="col-md-2 mx-auto">
|
||||
<Form.Group className={`${styles.edad}`}>
|
||||
<Form.Label>Edad: </Form.Label>
|
||||
<Form.Select as="edad" defaultValue="18" onChange={(e)=>{setEdad(e.target.value)}} >
|
||||
<option value="18">18</option>
|
||||
<option value="19">19</option>
|
||||
<option value="20">20</option>
|
||||
<option value="21">21</option>
|
||||
<option value="22">22</option>
|
||||
<option value="23">23</option>
|
||||
<option value="24">24</option>
|
||||
<option value="25">25</option>
|
||||
<option value="26">26</option>
|
||||
<option value="27">27</option>
|
||||
<option value="28">28</option>
|
||||
<option value="29">29</option>
|
||||
<option value="30">30</option>
|
||||
<option value="31">31</option>
|
||||
<option value="32">32</option>
|
||||
<option value="33">33</option>
|
||||
<option value="34">34</option>
|
||||
<option value="35">35</option>
|
||||
<option value="36">36</option>
|
||||
<option value="37">37</option>
|
||||
<option value="38">38</option>
|
||||
<option value="39">39</option>
|
||||
<option value="40">40</option>
|
||||
<option value="41">41</option>
|
||||
<option value="42">42</option>
|
||||
<option value="43">43</option>
|
||||
<option value="44">44</option>
|
||||
<option value="45">45</option>
|
||||
<option value="46">46</option>
|
||||
<option value="47">47</option>
|
||||
<option value="48">48</option>
|
||||
<option value="49">49</option>
|
||||
<option value="50">50</option>
|
||||
<option value="51">51</option>
|
||||
<option value="52">52</option>
|
||||
<option value="53">53</option>
|
||||
<option value="54">54</option>
|
||||
<option value="55">55</option>
|
||||
<option value="56">56</option>
|
||||
<option value="57">57</option>
|
||||
<option value="58">58</option>
|
||||
<option value="59">59</option>
|
||||
<option value="60">60</option>
|
||||
<option value="61">61</option>
|
||||
<option value="62">62</option>
|
||||
<option value="63">63</option>
|
||||
<option value="64">64</option>
|
||||
<option value="65">65</option>
|
||||
<option value="66">66</option>
|
||||
<option value="67">67</option>
|
||||
<option value="68">68</option>
|
||||
<option value="69">69</option>
|
||||
<option value="70">70</option>
|
||||
<option value="71">71</option>
|
||||
<option value="72">72</option>
|
||||
<option value="73">73</option>
|
||||
<option value="74">74</option>
|
||||
<option value="75">75</option>
|
||||
<option value="76">76</option>
|
||||
<option value="77">77</option>
|
||||
<option value="78">78</option>
|
||||
<option value="79">79</option>
|
||||
<option value="80">80</option>
|
||||
<option value="81">81</option>
|
||||
<option value="82">82</option>
|
||||
<option value="83">83</option>
|
||||
<option value="84">84</option>
|
||||
<option value="85">85</option>
|
||||
<option value="86">86</option>
|
||||
<option value="87">87</option>
|
||||
<option value="88">88</option>
|
||||
<option value="89">89</option>
|
||||
<option value="90">90</option>
|
||||
<option value="91">91</option>
|
||||
<option value="92">92</option>
|
||||
<option value="93">93</option>
|
||||
<option value="94">94</option>
|
||||
<option value="95">95</option>
|
||||
<option value="96">96</option>
|
||||
<option value="97">97</option>
|
||||
<option value="98">98</option>
|
||||
<option value="99">99</option>
|
||||
<option value="100">100</option>
|
||||
</Form.Select>
|
||||
</Form.Group>
|
||||
</Stack>
|
||||
</Container>
|
||||
<Container className={`${styles.invitado}`}>
|
||||
<Stack className="col-md-6 mx-auto">
|
||||
<div className={`${styles.texto2}`}><p className="text-center">INVITADO 2</p></div>
|
||||
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
|
||||
<Form.Label>Nombre(s): </Form.Label>
|
||||
<Form.Control type="text" required/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
|
||||
<Form.Label>Apellidos: </Form.Label>
|
||||
<Form.Control type="text" required/>
|
||||
</Form.Group>
|
||||
</Stack>
|
||||
<Stack className="col-md-2 mx-auto">
|
||||
<Form.Group className={`${styles.edad}`}>
|
||||
<Form.Label>Edad: </Form.Label>
|
||||
<Form.Select as="edad" size="lg" defaultValue="18" onChange={(e)=>{setEdad(e.target.value)}} >
|
||||
<option value="18">18</option>
|
||||
<option value="19">19</option>
|
||||
<option value="20">20</option>
|
||||
<option value="21">21</option>
|
||||
<option value="22">22</option>
|
||||
<option value="23">23</option>
|
||||
<option value="24">24</option>
|
||||
<option value="25">25</option>
|
||||
<option value="26">26</option>
|
||||
<option value="27">27</option>
|
||||
<option value="28">28</option>
|
||||
<option value="29">29</option>
|
||||
<option value="30">30</option>
|
||||
<option value="31">31</option>
|
||||
<option value="32">32</option>
|
||||
<option value="33">33</option>
|
||||
<option value="34">34</option>
|
||||
<option value="35">35</option>
|
||||
<option value="36">36</option>
|
||||
<option value="37">37</option>
|
||||
<option value="38">38</option>
|
||||
<option value="39">39</option>
|
||||
<option value="40">40</option>
|
||||
<option value="41">41</option>
|
||||
<option value="42">42</option>
|
||||
<option value="43">43</option>
|
||||
<option value="44">44</option>
|
||||
<option value="45">45</option>
|
||||
<option value="46">46</option>
|
||||
<option value="47">47</option>
|
||||
<option value="48">48</option>
|
||||
<option value="49">49</option>
|
||||
<option value="50">50</option>
|
||||
<option value="51">51</option>
|
||||
<option value="52">52</option>
|
||||
<option value="53">53</option>
|
||||
<option value="54">54</option>
|
||||
<option value="55">55</option>
|
||||
<option value="56">56</option>
|
||||
<option value="57">57</option>
|
||||
<option value="58">58</option>
|
||||
<option value="59">59</option>
|
||||
<option value="60">60</option>
|
||||
<option value="61">61</option>
|
||||
<option value="62">62</option>
|
||||
<option value="63">63</option>
|
||||
<option value="64">64</option>
|
||||
<option value="65">65</option>
|
||||
<option value="66">66</option>
|
||||
<option value="67">67</option>
|
||||
<option value="68">68</option>
|
||||
<option value="69">69</option>
|
||||
<option value="70">70</option>
|
||||
<option value="71">71</option>
|
||||
<option value="72">72</option>
|
||||
<option value="73">73</option>
|
||||
<option value="74">74</option>
|
||||
<option value="75">75</option>
|
||||
<option value="76">76</option>
|
||||
<option value="77">77</option>
|
||||
<option value="78">78</option>
|
||||
<option value="79">79</option>
|
||||
<option value="80">80</option>
|
||||
<option value="81">81</option>
|
||||
<option value="82">82</option>
|
||||
<option value="83">83</option>
|
||||
<option value="84">84</option>
|
||||
<option value="85">85</option>
|
||||
<option value="86">86</option>
|
||||
<option value="87">87</option>
|
||||
<option value="88">88</option>
|
||||
<option value="89">89</option>
|
||||
<option value="90">90</option>
|
||||
<option value="91">91</option>
|
||||
<option value="92">92</option>
|
||||
<option value="93">93</option>
|
||||
<option value="94">94</option>
|
||||
<option value="95">95</option>
|
||||
<option value="96">96</option>
|
||||
<option value="97">97</option>
|
||||
<option value="98">98</option>
|
||||
<option value="99">99</option>
|
||||
<option value="100">100</option>
|
||||
</Form.Select>
|
||||
</Form.Group>
|
||||
</Stack>
|
||||
</Container>
|
||||
<Container className={`${styles.invitado}`}>
|
||||
<Stack className="col-md-6 mx-auto">
|
||||
<div className={`${styles.texto2}`}><p className="text-center">INVITADO 3</p></div>
|
||||
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
|
||||
<Form.Label>Nombre(s): </Form.Label>
|
||||
<Form.Control type="text" required/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
|
||||
<Form.Label>Apellidos: </Form.Label>
|
||||
<Form.Control type="text" required/>
|
||||
</Form.Group>
|
||||
</Stack>
|
||||
<Stack className="col-md-2 mx-auto">
|
||||
<Form.Group className={`${styles.edad}`}>
|
||||
<Form.Label>Edad: </Form.Label>
|
||||
<Form.Select as="edad" size="lg" defaultValue="18" onChange={(e)=>{setEdad(e.target.value)}} >
|
||||
<option value="18">18</option>
|
||||
<option value="19">19</option>
|
||||
<option value="20">20</option>
|
||||
<option value="21">21</option>
|
||||
<option value="22">22</option>
|
||||
<option value="23">23</option>
|
||||
<option value="24">24</option>
|
||||
<option value="25">25</option>
|
||||
<option value="26">26</option>
|
||||
<option value="27">27</option>
|
||||
<option value="28">28</option>
|
||||
<option value="29">29</option>
|
||||
<option value="30">30</option>
|
||||
<option value="31">31</option>
|
||||
<option value="32">32</option>
|
||||
<option value="33">33</option>
|
||||
<option value="34">34</option>
|
||||
<option value="35">35</option>
|
||||
<option value="36">36</option>
|
||||
<option value="37">37</option>
|
||||
<option value="38">38</option>
|
||||
<option value="39">39</option>
|
||||
<option value="40">40</option>
|
||||
<option value="41">41</option>
|
||||
<option value="42">42</option>
|
||||
<option value="43">43</option>
|
||||
<option value="44">44</option>
|
||||
<option value="45">45</option>
|
||||
<option value="46">46</option>
|
||||
<option value="47">47</option>
|
||||
<option value="48">48</option>
|
||||
<option value="49">49</option>
|
||||
<option value="50">50</option>
|
||||
<option value="51">51</option>
|
||||
<option value="52">52</option>
|
||||
<option value="53">53</option>
|
||||
<option value="54">54</option>
|
||||
<option value="55">55</option>
|
||||
<option value="56">56</option>
|
||||
<option value="57">57</option>
|
||||
<option value="58">58</option>
|
||||
<option value="59">59</option>
|
||||
<option value="60">60</option>
|
||||
<option value="61">61</option>
|
||||
<option value="62">62</option>
|
||||
<option value="63">63</option>
|
||||
<option value="64">64</option>
|
||||
<option value="65">65</option>
|
||||
<option value="66">66</option>
|
||||
<option value="67">67</option>
|
||||
<option value="68">68</option>
|
||||
<option value="69">69</option>
|
||||
<option value="70">70</option>
|
||||
<option value="71">71</option>
|
||||
<option value="72">72</option>
|
||||
<option value="73">73</option>
|
||||
<option value="74">74</option>
|
||||
<option value="75">75</option>
|
||||
<option value="76">76</option>
|
||||
<option value="77">77</option>
|
||||
<option value="78">78</option>
|
||||
<option value="79">79</option>
|
||||
<option value="80">80</option>
|
||||
<option value="81">81</option>
|
||||
<option value="82">82</option>
|
||||
<option value="83">83</option>
|
||||
<option value="84">84</option>
|
||||
<option value="85">85</option>
|
||||
<option value="86">86</option>
|
||||
<option value="87">87</option>
|
||||
<option value="88">88</option>
|
||||
<option value="89">89</option>
|
||||
<option value="90">90</option>
|
||||
<option value="91">91</option>
|
||||
<option value="92">92</option>
|
||||
<option value="93">93</option>
|
||||
<option value="94">94</option>
|
||||
<option value="95">95</option>
|
||||
<option value="96">96</option>
|
||||
<option value="97">97</option>
|
||||
<option value="98">98</option>
|
||||
<option value="99">99</option>
|
||||
<option value="100">100</option>
|
||||
</Form.Select>
|
||||
</Form.Group>
|
||||
</Stack>
|
||||
</Container>
|
||||
<Container><Stack gap={1} className="col-md-2 mx-auto">
|
||||
<Button className={`${styles.boton2}`} type="submit">Registrar</Button>
|
||||
</Stack></Container>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
})()}
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
import styles from "../../styles/profesores.module.css";
|
||||
import Invitado from './invitado';
|
||||
import React,{useState} from 'react';
|
||||
import { Container, Row, Col,Form,Button } from "react-bootstrap";
|
||||
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}`}>
|
||||
<p className="text-end">Nombre:</p>
|
||||
<p className="text-end">Número de trabajador:</p>
|
||||
<p className="text-end">Adscripción:</p>
|
||||
<p className="text-end">Cantidad de invitados:</p>
|
||||
</Col>
|
||||
<Col className={`${styles.texto2}`}>
|
||||
<form>
|
||||
<p className="text-start">Gabriela Gómez Hernández</p>
|
||||
<p className="text-start">2013050757</p>
|
||||
<p className="text-start">Estudiante</p>
|
||||
<Container>
|
||||
<div className="row justify-content-start">
|
||||
<div className="col-2">
|
||||
<Form.Select as="select" size="lg" custom onChange={(e)=>{setSelect(e.target.value)}} >
|
||||
|
||||
<option selected>...</option>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
</Form.Select>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</form>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
</Container>
|
||||
<form>
|
||||
{(() => {
|
||||
switch(select){
|
||||
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></>
|
||||
);
|
||||
}
|
||||
})()}
|
||||
|
||||
<Row className="justify-content-md-center">
|
||||
<Col xs={1}>
|
||||
<a href="./registro-exitoso">
|
||||
<Button className={`${styles.boton1}`}>Siguiente</Button>
|
||||
</a>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
</form>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
export default Registro;
|
||||
//tiene que ser un boton de tipo submit?
|
||||
@@ -1,29 +0,0 @@
|
||||
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
|
||||
}
|
||||
};
|
||||
+2
-2
@@ -3,7 +3,7 @@ import Layout from '../components/layouts/layout';
|
||||
import Salir from '../components/layouts/layoutSalir';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import Head from 'next/head';
|
||||
import Registro from '../components/profesores_registro/profesores';
|
||||
import Invited from '../components/profesores_registro/invited';
|
||||
|
||||
export default function Register(){
|
||||
return(
|
||||
@@ -13,7 +13,7 @@ export default function Register(){
|
||||
<title>Registro Profesores</title>
|
||||
</Head>
|
||||
<div>
|
||||
<Registro></Registro>
|
||||
<Invited></Invited>
|
||||
</div>
|
||||
</Layout>
|
||||
)
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.container{
|
||||
.invitado{
|
||||
background-color: rgb(144,114,16,19%);
|
||||
border-radius:30px;
|
||||
margin-top: 30px;
|
||||
@@ -11,6 +11,3 @@
|
||||
border-color: black;
|
||||
border-style: solid;
|
||||
}
|
||||
.boton{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
@@ -45,10 +45,25 @@
|
||||
background-color: #1B3D70;
|
||||
font-family: 'Calibri','Ginebra','Verdana', serif;
|
||||
font-size: x-large;
|
||||
font-weight: bold;
|
||||
border:0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.boton2:hover{
|
||||
background-color:rgb(27,61,112,50%);
|
||||
}
|
||||
}
|
||||
.invitado{
|
||||
background-color: rgb(144,114,16,19%);
|
||||
border-radius:30px;
|
||||
margin-top: 30px;
|
||||
margin-bottom:15px;
|
||||
padding-top: 20px;
|
||||
color:#644F0C;
|
||||
font-size: large;
|
||||
border-width: 1px;
|
||||
border-color: black;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.edad{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user