dieg
/
registro-escuelas
Sledovat 1
Oblíbit 0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
Procházet zdrojové kódy

pantallas base terminadas

master
dieg před 3 roky
rodič
8d270fb631
revize
7c8165fa72
5 změnil soubory, kde provedl 107 přidání a 17 odebrání
Jednotný pohled Ukázat statistiku rozdílových dat
  1. 1
    1
      public/index.html
  2. 8
    0
      src/App.js
  3. 42
    15
      src/Screens/Confirmacion.js
  4. 55
    0
      src/Screens/Finalizado.js
  5. 1
    1
      src/Screens/Inicio.js

+ 1
- 1
public/index.html Zobrazit soubor

24 
       work correctly both with client-side routing and a non-root public URL.
 24 
       work correctly both with client-side routing and a non-root public URL.
25 
       Learn how to configure a non-root public URL by running `npm run build`.
 25 
       Learn how to configure a non-root public URL by running `npm run build`.
26 
     -->
 26 
     -->
27 
-    <title>GOAHEAD</title>
27 
+    <title>Registro escolar</title>
28 
   </head>
 28 
   </head>
29 
   <body>
 29 
   <body>
30 
     <noscript>You need to enable JavaScript to run this app.</noscript>
 30 
     <noscript>You need to enable JavaScript to run this app.</noscript>

+ 8
- 0
src/App.js Zobrazit soubor

6
6
7 
 import Inicio from './Screens/Inicio'
 7 
 import Inicio from './Screens/Inicio'
8 
 import Formulario from './Screens/Formulario'
 8 
 import Formulario from './Screens/Formulario'
9 
+import Finalizado from './Screens/Finalizado'
10 
+import Confirmacion from './Screens/Confirmacion'
9
11
10 
 function App() {
 12 
 function App() {
11 
 	const history = useHistory()
 13 
 	const history = useHistory()
48 
 	return (
 50 
 	return (
49 
 		<ThemeProvider theme={theme}>
 51 
 		<ThemeProvider theme={theme}>
50 
 			<Switch>
 52 
 			<Switch>
53 
+                <Route path='/pendiente'>
54 
+                    <Confirmacion/>
55 
+                </Route>
56 
+                <Route path='/finalizado'>
57 
+                    <Finalizado/>
58 
+                </Route>
51 
                 <Route path='/formulario'>
 59 
                 <Route path='/formulario'>
52 
                     <Formulario/>
 60 
                     <Formulario/>
53 
                 </Route>
 61 
                 </Route>

+ 42
- 15
src/Screens/Confirmacion.js Zobrazit soubor

1 
-import React, { useState } from 'react'
1 
+import React, { useEffect, useState } from 'react'
2 
 import {
 2 
 import {
3 
 	Box,
 3 
 	Box,
4 
 	Button,
 4 
 	Button,
8 
 	Typography,
 8 
 	Typography,
9 
 	CardHeader,
 9 
 	CardHeader,
10 
 	CardActions,
 10 
 	CardActions,
11 
-	CardContent
11 
+	CardContent,
12 
+	TextField
12 
 } from '@material-ui/core'
 13 
 } from '@material-ui/core'
13 
 import { useHistory } from 'react-router-dom'
 14 
 import { useHistory } from 'react-router-dom'
14
15
37 
 export default function Confirmacion() {
 38 
 export default function Confirmacion() {
38 
 	const classes = useStyles()
 39 
 	const classes = useStyles()
39 
 	const [ intervalId, setIntervalId ] = useState(-1)
 40 
 	const [ intervalId, setIntervalId ] = useState(-1)
40 
-	const [ min, seg, setRestante ] = useState({min: 0, seg:0})
41 
-	const enviado = localStorage.getItem('enviado') || new Date()
41 
+	const [ codigo, setCodigo ] = useState('')
42 
+	const [ { min, seg }, setRestante ] = useState({ min: 0, seg: 0 })
42
43
43 
 	const history = useHistory()
 44 
 	const history = useHistory()
44
45
45 
-	const calcularRestante = () => {
46 
-		const res = enviado.getTime() - new Date().getTime()
47 
-		setRestante({min: 0, seg: Math.round(res / (1000 * 60 * 60))})
46 
+	const calcularRestante = limite => {
47 
+		const res = limite.getTime() - new Date().getTime()
48 
+		setRestante({ min: Math.floor(res / 1000 / 60), seg: Math.round((res / 1000) % 60) })
48 
 	}
 49 
 	}
49
50
51 
+	useEffect(
52 
+		() => {
53 
+			reenviar()
54 
+		},
55 
+		// eslint-disable-next-line react-hooks/exhaustive-deps
56 
+		[]
57 
+	)
58 
+
59 
+	if (seg <= 0 && min <= 0) clearInterval(intervalId)
60 
+
50 
 	const validar = () => {
 61 
 	const validar = () => {
51 
-		history.push('/finalizado')
62 
+        if (codigo) history.push('/finalizado')
52 
 	}
 63 
 	}
53
64
54 
 	const reenviar = () => {
 65 
 	const reenviar = () => {
55 
-        setIntervalId(setInterval(calcularRestante, 1000))
56 
-    }
57 
-
58 
-    if (seg < 0 && min <0) clearInterval(intervalId)
66 
+		clearInterval(intervalId)
67 
+		const ahora = new Date()
68 
+		ahora.setMinutes(new Date().getMinutes() + 5)
69 
+		console.log(ahora)
70 
+		calcularRestante(ahora)
71 
+		setIntervalId(setInterval(() => calcularRestante(ahora), 1000))
72 
+	}
59
73
60 
 	return (
 74 
 	return (
61 
 		<Box className={classes.root}>
 75 
 		<Box className={classes.root}>
73 
 					<Typography paragraph variant='h6'>
 87 
 					<Typography paragraph variant='h6'>
74 
 						Para finalizar con el registro, ingrese el codigo que recibió en su casilla de correo
 88 
 						Para finalizar con el registro, ingrese el codigo que recibió en su casilla de correo
75 
 					</Typography>
 89 
 					</Typography>
90 
+					<TextField
91 
+						name='codigo'
92 
+						value={codigo}
93 
+						onChange={({ target: { value } }) => setCodigo(value)}
94 
+                        variant='outlined'
95 
+                        fullWidth
96 
+                        label='Codigo de confirmacion'
97 
+                        margin='normal'
98 
+					/>
76 
 				</CardContent>
 99 
 				</CardContent>
77 
 				<Divider />
 100 
 				<Divider />
78 
 				<CardActions className={classes.actions}>
 101 
 				<CardActions className={classes.actions}>
79 
-					<Button variant='contained' color='primary' onClick={reenviar} disabled={true}>
80 
-						Reenviar ({min}:{seg})
102 
+					<Button variant='contained' color='primary' onClick={reenviar} disabled={seg > 0 || min > 0}>
103 
+						{seg > 0 || min > 0 ? (
104 
+							`Reenviar (${min < 10 ? '0' : ''}${min}:${seg < 10 ? '0' : ''}${seg})`
105 
+						) : (
106 
+							'Reenviar'
107 
+						)}
81 
 					</Button>
 108 
 					</Button>
82 
-					<Button variant='contained' color='primary' onClick={validar}>
109 
+					<Button variant='contained' color='primary' onClick={validar} disabled={!codigo}>
83 
 						Validar
 110 
 						Validar
84 
 					</Button>
 111 
 					</Button>
85 
 				</CardActions>
 112 
 				</CardActions>

+ 55
- 0
src/Screens/Finalizado.js Zobrazit soubor

1 
+import React from 'react'
2 
+import {
3 
+	Box,
4 
+	Divider,
5 
+	makeStyles,
6 
+	Card,
7 
+	Typography,
8 
+	CardHeader,
9 
+    CardContent
10 
+} from '@material-ui/core'
11 
+
12 
+const useStyles = makeStyles(theme => ({
13 
+	root: {
14 
+		display: 'flex',
15 
+		flexDirection: 'column',
16 
+		alignItems: 'center',
17 
+		justifyContent: 'center',
18 
+		height: '100vh',
19 
+		backgroundColor: theme.palette.background.default
20 
+	},
21 
+	card: {
22 
+		display: 'flex',
23 
+		flexDirection: 'column',
24 
+		alignItems: 'center',
25 
+		justifyContent: 'center',
26 
+        padding: '0px 30px',
27 
+        minHeight: '20vh'
28 
+    },
29 
+    actions: {
30 
+        justifyContent: 'center'
31 
+    }
32 
+}))
33 
+
34 
+export default function Finalizado() {
35 
+	const classes = useStyles()
36 
+
37 
+	return (
38 
+		<Box className={classes.root}>
39 
+			<Card>
40 
+				<CardHeader
41 
+					disableTypography
42 
+					title={
43 
+						<Typography variant='h5' align='center'>
44 
+							Finalizado
45 
+						</Typography>
46 
+					}
47 
+				/>
48 
+				<Divider />
49 
+				<CardContent>
50 
+					<Typography variant='h6'>Registro completado exitosamente</Typography>
51 
+				</CardContent>
52 
+			</Card>
53 
+		</Box>
54 
+	)
55 
+}

+ 1
- 1
src/Screens/Inicio.js Zobrazit soubor

65 
 			</Card>
 65 
 			</Card>
66 
 		</Box>
 66 
 		</Box>
67 
 	)
 67 
 	)
68 
-}
68 
+}

Zapsat Náhled
Načítá se…
Zrušit
Uložit