|
|
@@ -1,112 +1,122 @@
|
|
1
|
1
|
import React, { useState, useEffect } from 'react';
|
|
2
|
2
|
import UpdateIcon from '@mui/icons-material/Update';
|
|
3
|
|
-
|
|
4
|
3
|
import { Typography, Pagination, Stack, } from '@mui/material'
|
|
5
|
|
-
|
|
6
|
4
|
import { Row, Col } from 'react-bootstrap';
|
|
7
|
|
-
|
|
8
|
5
|
import { Candidato, Preview } from './Candidato'
|
|
9
|
|
-// const USER_LENGTH = 14
|
|
10
|
|
-const USER_LENGTH = 120
|
|
11
|
6
|
|
|
|
7
|
+function Divide(arregloOriginal) {
|
|
12
|
8
|
|
|
13
|
|
-function Divide(arregloOriginal){
|
|
|
9
|
+ const LONGITUD_PEDAZOS = 8;
|
|
|
10
|
+ let arregloDeArreglos = [];
|
|
|
11
|
+ for (let i = 0; i < arregloOriginal.length; i += LONGITUD_PEDAZOS) {
|
|
|
12
|
+ let pedazo = arregloOriginal.slice(i, i + LONGITUD_PEDAZOS);
|
|
|
13
|
+ arregloDeArreglos.push(pedazo);
|
|
|
14
|
+ }
|
|
|
15
|
+ return arregloDeArreglos
|
|
|
16
|
+}
|
|
14
|
17
|
|
|
15
|
|
- const LONGITUD_PEDAZOS = 8;
|
|
16
|
|
- let arregloDeArreglos = [];
|
|
17
|
|
- for (let i = 0; i < arregloOriginal.length; i += LONGITUD_PEDAZOS) {
|
|
18
|
|
- let pedazo = arregloOriginal.slice(i, i + LONGITUD_PEDAZOS);
|
|
19
|
|
- arregloDeArreglos.push(pedazo);
|
|
20
|
|
- }
|
|
21
|
|
- return arregloDeArreglos
|
|
|
18
|
+function fromBase64(text) {
|
|
|
19
|
+ try {
|
|
|
20
|
+ return atob(text)
|
|
|
21
|
+ } catch (_e) {
|
|
|
22
|
+ return text
|
|
|
23
|
+ }
|
|
22
|
24
|
}
|
|
23
|
25
|
|
|
24
|
|
-export default function Candidatos () {
|
|
25
|
|
-
|
|
26
|
|
- const [page, setPage] = useState(1);
|
|
27
|
|
- const [users, setUser] = useState([]);
|
|
28
|
|
-
|
|
29
|
|
- const changePage = ( _ , value) => {
|
|
30
|
|
- let page_numer = value;
|
|
31
|
|
- Divide(users)
|
|
32
|
|
- setPage(page_numer);
|
|
33
|
|
- };
|
|
34
|
|
-
|
|
35
|
|
- useEffect(() => {
|
|
36
|
|
-
|
|
37
|
|
- setTimeout(() => {
|
|
38
|
|
- let list = [{
|
|
39
|
|
- password : 'tester',
|
|
40
|
|
- puesto : "Piloto Repartidor",
|
|
41
|
|
- DPI : 0,
|
|
42
|
|
- // aplicacion : "27/12/2018 12:02 PM",
|
|
43
|
|
- aplicacion : new Date().toUTCString(),
|
|
44
|
|
- pendientes : "No"
|
|
45
|
|
- }]
|
|
46
|
|
-
|
|
47
|
|
- let a = 1;
|
|
48
|
|
- for( let _ of new Array(USER_LENGTH) ){
|
|
49
|
|
- if(_) break
|
|
50
|
|
-
|
|
51
|
|
- let temp = {
|
|
52
|
|
- ...list[0],
|
|
53
|
|
- DPI : a * 1000,
|
|
54
|
|
- password : Math.random().toString(36).slice(5),
|
|
55
|
|
- aplicacion : new Date(10,12,a).toUTCString(),
|
|
56
|
|
- }
|
|
57
|
|
-
|
|
58
|
|
- a=a+1;
|
|
59
|
|
- list.push(temp)
|
|
60
|
|
- }
|
|
61
|
|
-
|
|
62
|
|
- let divided = Divide(list);
|
|
63
|
|
-
|
|
64
|
|
- setUser(divided)
|
|
65
|
|
-
|
|
66
|
|
- },3000)
|
|
67
|
|
-
|
|
68
|
|
- }, [])
|
|
69
|
|
-
|
|
70
|
|
-
|
|
71
|
|
-
|
|
72
|
|
- return (
|
|
73
|
|
- <div className="body_historial">
|
|
74
|
|
- <div className="header_historial">
|
|
75
|
|
- <UpdateIcon style={{ color : "white", fontSize : 25, margin : 0, marginRight: 15, marginLeft :15 }}/>
|
|
76
|
|
- <p className="titlie_main">HISTORIAL DE ACCESO DE CANDIDATOS</p>
|
|
77
|
|
- </div>
|
|
78
|
|
- <div className="content_historial">
|
|
79
|
|
- <p>Últimos candidatos que han ingresado al sistema:</p>
|
|
80
|
|
- <div className="cabeceras">
|
|
81
|
|
- <Row>
|
|
82
|
|
- <div className="col20"><p>Contraseña</p></div>
|
|
83
|
|
- <div className="col20"><p>Puesto</p> </div>
|
|
84
|
|
- <div className="col20"><p>No. Identificación</p></div>
|
|
85
|
|
- <div className="col20"><p>Fecha de aplicación</p></div>
|
|
86
|
|
- <div className="col20"><p>Pruebas Pendientes</p></div>
|
|
87
|
|
- </Row>
|
|
88
|
|
- </div>
|
|
89
|
|
- {
|
|
90
|
|
- users.length
|
|
91
|
|
- ? users[page - 1].map( user => (<Candidato key={user.DPI} user={user}/>))
|
|
92
|
|
- : <Preview style={{ paddingTop:10}} lenght={10}/>
|
|
93
|
|
- }
|
|
94
|
|
- <Row style={{ padding : 5 }}>
|
|
95
|
|
- <Col>
|
|
96
|
|
- <Stack style={{ display : 'flex', flexDirection : 'row', alignItems: 'baseline' }} spacing={2}>
|
|
97
|
|
- <Typography style={{ paddingTop : 15, paddingRight : 10 }}>Página: {page}</Typography>
|
|
98
|
|
- <Pagination
|
|
99
|
|
- siblingCount={1}
|
|
100
|
|
- boundaryCount={1}
|
|
101
|
|
- shape='rounded'
|
|
102
|
|
- count={users.length}
|
|
103
|
|
- page={page}
|
|
104
|
|
- onChange={changePage}
|
|
105
|
|
- />
|
|
106
|
|
- </Stack>
|
|
107
|
|
- </Col>
|
|
108
|
|
- </Row>
|
|
109
|
|
- </div>
|
|
|
26
|
+export default function Candidatos(props) {
|
|
|
27
|
+
|
|
|
28
|
+ let { passwords } = props;
|
|
|
29
|
+ const [page, setPage] = useState(1);
|
|
|
30
|
+ const [users, setUser] = useState([]);
|
|
|
31
|
+
|
|
|
32
|
+
|
|
|
33
|
+ const changePage = (_, value) => {
|
|
|
34
|
+ let page_numer = value;
|
|
|
35
|
+ Divide(users)
|
|
|
36
|
+ setPage(page_numer);
|
|
|
37
|
+ };
|
|
|
38
|
+
|
|
|
39
|
+ useEffect(() => {
|
|
|
40
|
+
|
|
|
41
|
+ let list = passwords.map(pwd => {
|
|
|
42
|
+ let { candidatospwds } = pwd
|
|
|
43
|
+ console.log(candidatospwds)
|
|
|
44
|
+ // let candi_info = candidatospwds.map( ({candi}) => candi?.nombre +" "+ candi?.apellidos )
|
|
|
45
|
+ return {
|
|
|
46
|
+ password: fromBase64(pwd.pwd),
|
|
|
47
|
+ candidatos: candidatospwds
|
|
|
48
|
+ }
|
|
|
49
|
+ })
|
|
|
50
|
+
|
|
|
51
|
+ /*
|
|
|
52
|
+ let list = [{
|
|
|
53
|
+ password: 'tester',
|
|
|
54
|
+ puesto: "Piloto Repartidor",
|
|
|
55
|
+ DPI: 0,
|
|
|
56
|
+ // aplicacion : "27/12/2018 12:02 PM",
|
|
|
57
|
+ aplicacion: new Date().toUTCString(),
|
|
|
58
|
+ pendientes: "No"
|
|
|
59
|
+ }]
|
|
|
60
|
+
|
|
|
61
|
+ let a = 1;
|
|
|
62
|
+ for (let _ of new Array(USER_LENGTH)) {
|
|
|
63
|
+ if (_) break
|
|
|
64
|
+
|
|
|
65
|
+ let temp = {
|
|
|
66
|
+ ...list[0],
|
|
|
67
|
+ DPI: a * 1000,
|
|
|
68
|
+ password: Math.random().toString(36).slice(5),
|
|
|
69
|
+ aplicacion: new Date(10, 12, a).toUTCString(),
|
|
|
70
|
+ }
|
|
|
71
|
+
|
|
|
72
|
+ a = a + 1;
|
|
|
73
|
+ list.push(temp)
|
|
|
74
|
+ }
|
|
|
75
|
+
|
|
|
76
|
+*/
|
|
|
77
|
+
|
|
|
78
|
+ let divided = Divide(list);
|
|
|
79
|
+
|
|
|
80
|
+ setUser(divided)
|
|
|
81
|
+
|
|
|
82
|
+
|
|
|
83
|
+ }, [passwords])
|
|
|
84
|
+
|
|
|
85
|
+ return (
|
|
|
86
|
+ <div className="body_historial">
|
|
|
87
|
+ <div className="header_historial">
|
|
|
88
|
+ <UpdateIcon style={{ color: "white", fontSize: 25, margin: 0, marginRight: 15, marginLeft: 15 }} />
|
|
|
89
|
+ <p className="titlie_main">HISTORIAL DE ACCESO DE CANDIDATOS</p>
|
|
|
90
|
+ </div>
|
|
|
91
|
+ <div className="content_historial">
|
|
|
92
|
+ <p>Últimos candidatos que han ingresado al sistema:</p>
|
|
|
93
|
+ <div className="cabeceras">
|
|
|
94
|
+ <Row>
|
|
|
95
|
+ <div className="col20"><p>Contraseña</p></div>
|
|
|
96
|
+ <div className="col20"><p>Detalle</p> </div>
|
|
|
97
|
+ </Row>
|
|
110
|
98
|
</div>
|
|
111
|
|
- )
|
|
|
99
|
+ {
|
|
|
100
|
+ users.length
|
|
|
101
|
+ ? users[page - 1].map((user,i) => (<Candidato key={i} user={user} />))
|
|
|
102
|
+ : <Preview style={{ paddingTop: 10 }} lenght={10} />
|
|
|
103
|
+ }
|
|
|
104
|
+ <Row style={{ padding: 5 }}>
|
|
|
105
|
+ <Col>
|
|
|
106
|
+ <Stack style={{ display: 'flex', flexDirection: 'row', alignItems: 'baseline' }} spacing={2}>
|
|
|
107
|
+ <Typography style={{ paddingTop: 15, paddingRight: 10 }}>Página: {page}</Typography>
|
|
|
108
|
+ <Pagination
|
|
|
109
|
+ siblingCount={1}
|
|
|
110
|
+ boundaryCount={1}
|
|
|
111
|
+ shape='rounded'
|
|
|
112
|
+ count={users.length}
|
|
|
113
|
+ page={page}
|
|
|
114
|
+ onChange={changePage}
|
|
|
115
|
+ />
|
|
|
116
|
+ </Stack>
|
|
|
117
|
+ </Col>
|
|
|
118
|
+ </Row>
|
|
|
119
|
+ </div>
|
|
|
120
|
+ </div>
|
|
|
121
|
+ )
|
|
112
|
122
|
}
|
amenpunk