msaldain
f483058c2c
En ./services/app/ Se sirvierons los HTML de la carpeta /pages. Se crearon los endpoints REST para crear y listar roles, usuarios, categorias, productos.
63 lines
1.6 KiB
HTML
63 lines
1.6 KiB
HTML
<!doctype html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Roles</title>
|
|
</head>
|
|
<body>
|
|
<h1>Roles</h1>
|
|
|
|
<h2>Crear rol</h2>
|
|
<form id="form-rol">
|
|
<label>Nombre del rol:
|
|
<input type="text" name="nombre" required />
|
|
</label>
|
|
<button type="submit">Guardar</button>
|
|
</form>
|
|
|
|
<h2>Listado</h2>
|
|
<button id="btn-recargar">Recargar</button>
|
|
<table border="1" cellpadding="6">
|
|
<thead><tr><th>ID</th><th>Nombre</th></tr></thead>
|
|
<tbody id="tbody"></tbody>
|
|
</table>
|
|
|
|
<script>
|
|
const API = '/api/roles';
|
|
|
|
async function listar() {
|
|
const res = await fetch(API);
|
|
const data = await res.json();
|
|
const tbody = document.getElementById('tbody');
|
|
tbody.innerHTML = '';
|
|
data.forEach(r => {
|
|
const tr = document.createElement('tr');
|
|
tr.innerHTML = `<td>${r.id_rol}</td><td>${r.nombre}</td>`;
|
|
tbody.appendChild(tr);
|
|
});
|
|
}
|
|
|
|
document.getElementById('form-rol').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const nombre = e.target.nombre.value.trim();
|
|
if (!nombre) return;
|
|
const res = await fetch(API, {
|
|
method: 'POST',
|
|
headers: {'Content-Type':'application/json'},
|
|
body: JSON.stringify({ nombre })
|
|
});
|
|
if (!res.ok) {
|
|
const err = await res.json().catch(()=>({error:'Error'}));
|
|
alert('Error: ' + (err.error || res.statusText));
|
|
return;
|
|
}
|
|
e.target.reset();
|
|
await listar();
|
|
});
|
|
|
|
document.getElementById('btn-recargar').addEventListener('click', listar);
|
|
listar();
|
|
</script>
|
|
</body>
|
|
</html>
|