-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
150 lines (136 loc) · 4.32 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gestión de Tickets</title>
<style>
body { font-family: Arial, sans-serif; }
.container { width: 80%; margin: auto; }
form { margin-bottom: 20px; }
input, button { margin: 5px; }
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div class="container">
<h1>Gestión de Tickets</h1>
<!-- Formulario para crear un nuevo ticket -->
<form id="newTicketForm">
<input type="text" id="user" placeholder="Usuario" required>
<select id="status" title="Seleccionar Estatus" required>
<option value="">Seleccionar estatus</option>
<option value="abierto">Abierto</option>
<option value="cerrado">Cerrado</option>
</select>
<button type="submit">Crear Ticket</button>
</form>
<!-- Formulario para filtrar tickets por usuario -->
<form id="filterForm">
<input type="text" id="filterUser" placeholder="Filtrar por usuario">
<button type="button" onclick="filterTickets()">Filtrar</button>
</form>
<!-- Lista de tickets -->
<div id="ticketsList"></div>
<!-- Paginación -->
<div id="pagination">
<button onclick="changePage(-1)">Anterior</button>
<span id="currentPage">1</span>
<button onclick="changePage(1)">Siguiente</button>
</div>
</div>
<script>
let currentPage = 1;
let totalPages = 1; // total de páginas que retorna el get
const limit = 10; // Cantidad de registros en el paginador
document.getElementById('newTicketForm').addEventListener('submit', function(event) {
event.preventDefault();
const user = document.getElementById('user').value;
const status = document.getElementById('status').value;
createTicket({ user, status });
});
async function createTicket(ticketData) {
try {
const response = await fetch('/tickets', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(ticketData)
});
const newTicket = await response.json();
console.log('Ticket creado:', newTicket);
loadTickets();
} catch (error) {
console.error('Error al crear el ticket:', error);
}
}
async function loadTickets(userId = '') {
try {
const response = await fetch(`/tickets?page=${currentPage}&limit=${limit}&userId=${userId}`);
const data = await response.json();
totalPages = data.totalPages; // Actualizar el total de páginas
displayTickets(data.tickets);
document.getElementById('currentPage').textContent = currentPage;
// Actualizar la visibilidad de los botones de paginación
document.querySelector('#pagination button[onclick="changePage(-1)"]').disabled = currentPage === 1;
document.querySelector('#pagination button[onclick="changePage(1)"]').disabled = currentPage >= totalPages;
} catch (error) {
console.error('Error al cargar los tickets:', error);
}
}
function displayTickets(tickets) {
const list = document.getElementById('ticketsList');
list.innerHTML = '';
// Crear la tabla y el encabezado
const table = document.createElement('table');
table.innerHTML = `
<tr>
<th>ID</th>
<th>Usuario</th>
<th>Estatus</th>
<th>Fecha de Creación</th>
<th>Fecha de Actualización</th>
</tr>
`;
// Agregar una fila por cada ticket
tickets.forEach(ticket => {
const row = table.insertRow();
row.innerHTML = `
<td>${ticket._id}</td>
<td>${ticket.user}</td>
<td>${ticket.status}</td>
<td>${new Date(ticket.createdAt).toLocaleString()}</td>
<td>${new Date(ticket.updatedAt).toLocaleString()}</td>
`;
});
// Agregar la tabla al DOM
list.appendChild(table);
}
function filterTickets() {
const user = document.getElementById('filterUser').value;
loadTickets(user);
}
function changePage(step) {
const newPage = currentPage + step;
if (newPage > 0 && newPage <= totalPages) {
currentPage = newPage;
loadTickets();
}
}
// Cargar tickets inicialmente
loadTickets();
</script>
</body>
</html>