marsalva/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actualizar usuarios.html

Browse Source
This commit is contained in:
marsalva
2026-02-15 18:27:20 +00:00
parent fd8cd2af29
commit 4ee11d5cbf
1 changed files with 64 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
usuarios.html
View File

@@ -147,8 +147,8 @@
</div> </div>
<div id="toast" class="fixed bottom-5 right-5 bg-slate-800 text-white px-6 py-3 rounded-lg shadow-2xl transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center gap-3"><span id="toastMsg">Mensaje</span></div> <div id="toast" class="fixed bottom-5 right-5 bg-slate-800 text-white px-6 py-3 rounded-lg shadow-2xl transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center gap-3"><span id="toastMsg">Mensaje</span></div>
<script src="js/layout.js"></script>
<script src="js/layout.js"></script>
<script> <script>
let availableGuilds = []; let availableGuilds = [];
let currentUsers = []; let currentUsers = [];
@@ -238,7 +238,7 @@
if (!prov || !munName) { showToast("Selecciona Provincia y Municipio", true); return; } if (!prov || !munName) { showToast("Selecciona Provincia y Municipio", true); return; }
if (munName === "OTRO" || selMun.options[selMun.selectedIndex].text.includes("MANUAL")) { if (munName === "OTRO" || (selMun.options[selMun.selectedIndex] && selMun.options[selMun.selectedIndex].text.includes("MANUAL"))) {
const manualCP = document.getElementById('cpInput').value.trim(); const manualCP = document.getElementById('cpInput').value.trim();
if(!manualCP) { showToast("Escribe el CP manual", true); return; } if(!manualCP) { showToast("Escribe el CP manual", true); return; }
tempUserZones.push({ province: prov, city: munName === "OTRO" ? "MANUAL" : munName, cps: manualCP }); tempUserZones.push({ province: prov, city: munName === "OTRO" ? "MANUAL" : munName, cps: manualCP });
@@ -262,6 +262,7 @@
function renderTempZones() { function renderTempZones() {
const area = document.getElementById('userZonesArea'); const area = document.getElementById('userZonesArea');
if(!area) return;
area.innerHTML = tempUserZones.length === 0 ? '<p class="text-[10px] text-gray-300 italic p-1">Sin zonas añadidas...</p>' : ""; area.innerHTML = tempUserZones.length === 0 ? '<p class="text-[10px] text-gray-300 italic p-1">Sin zonas añadidas...</p>' : "";
const visualGroup = tempUserZones.reduce((acc, curr) => { const visualGroup = tempUserZones.reduce((acc, curr) => {
@@ -404,15 +405,12 @@
function renderUsersTable() { function renderUsersTable() {
const tbody = document.getElementById('usersListBody'); const tbody = document.getElementById('usersListBody');
if (!tbody) return; if (!tbody) return;
tbody.innerHTML = currentUsers.length === 0 ? `<tr><td colspan="5" class="p-8 text-center text-gray-300 font-bold uppercase tracking-widest text-left">Cargando equipo...</td></tr>` : ""; tbody.innerHTML = currentUsers.length === 0 ? `<tr><td colspan="5" class="p-8 text-center text-gray-300 font-bold uppercase tracking-widest text-left">Cargando equipo...</td></tr>` : "";
currentUsers.forEach(u => { currentUsers.forEach(u => {
// Detectamos si el operario está activo o de baja
const isActive = u.status === 'active'; const isActive = u.status === 'active';
const uGuildNames = (u.guilds || []).map(gid => availableGuilds.find(ag => ag.id === gid)?.name).filter(Boolean).join(", "); const uGuildNames = (u.guilds || []).map(gid => availableGuilds.find(ag => ag.id === gid)?.name).filter(Boolean).join(", ");
// Agrupación visual de zonas
const groupedZones = (u.zones || []).reduce((acc, curr) => { const groupedZones = (u.zones || []).reduce((acc, curr) => {
if (!acc[curr.city]) acc[curr.city] = []; if (!acc[curr.city]) acc[curr.city] = [];
if (!acc[curr.city].includes(curr.cps)) acc[curr.city].push(curr.cps); if (!acc[curr.city].includes(curr.cps)) acc[curr.city].push(curr.cps);
@@ -420,13 +418,9 @@
}, {}); }, {});
const uZonesHtml = Object.keys(groupedZones).map(city => { const uZonesHtml = Object.keys(groupedZones).map(city => {
return `<div class="mb-1 last:mb-0"> return `<div class="mb-1 last:mb-0"><span class="font-black ${isActive ? 'text-blue-600' : 'text-gray-400'} text-[10px] uppercase">📍 ${city}</span> <span class="text-gray-500 text-[9px]">(${groupedZones[city].join(", ")})</span></div>`;
<span class="font-black ${isActive ? 'text-blue-600' : 'text-gray-400'} text-[10px] uppercase">📍 ${city}</span>
<span class="text-gray-500 text-[9px]">(${groupedZones[city].join(", ")})</span>
</div>`;
}).join("") || '<span class="text-[9px] text-gray-300 italic">Sin zona</span>'; }).join("") || '<span class="text-[9px] text-gray-300 italic">Sin zona</span>';
// Aplicamos el estilo gris y opacidad si es baja temporal
tbody.innerHTML += ` tbody.innerHTML += `
<tr class="${isActive ? 'bg-white' : 'bg-gray-100 opacity-60'} hover:bg-gray-50 transition border-b"> <tr class="${isActive ? 'bg-white' : 'bg-gray-100 opacity-60'} hover:bg-gray-50 transition border-b">
<td class="p-4"> <td class="p-4">
@@ -436,32 +430,25 @@
<span class="font-black ${isActive ? 'text-slate-800' : 'text-gray-500'} uppercase">${u.full_name}</span> <span class="font-black ${isActive ? 'text-slate-800' : 'text-gray-500'} uppercase">${u.full_name}</span>
</div> </div>
<span class="text-[9px] text-gray-400 font-bold">${u.email}</span> <span class="text-[9px] text-gray-400 font-bold">${u.email}</span>
${!isActive ? '<span class="text-[8px] font-black text-red-500 mt-1 uppercase">[ Baja Temporal ]</span>' : ''} ${!isActive ? '<span class="text-[8px] font-black text-red-500 mt-1 uppercase tracking-tighter">[ Baja Temporal ]</span>' : ''}
</div> </div>
</td> </td>
<td class="p-4 font-black ${isActive ? 'text-green-600' : 'text-gray-400'}">${u.phone}</td> <td class="p-4 font-black ${isActive ? 'text-green-600' : 'text-gray-400'}">${u.phone}</td>
<td class="p-4"> <td class="p-4"><span class="${isActive ? 'bg-slate-100 text-slate-600' : 'bg-gray-200 text-gray-400'} px-2 py-0.5 rounded text-[10px] font-black uppercase">${u.role}</span><p class="text-[9px] text-gray-400 mt-1 uppercase font-bold">${uGuildNames || '-'}</p></td>
<span class="${isActive ? 'bg-slate-100 text-slate-600' : 'bg-gray-200 text-gray-400'} px-2 py-0.5 rounded text-[10px] font-black uppercase">${u.role}</span>
<p class="text-[9px] text-gray-400 mt-1 uppercase font-bold">${uGuildNames || '-'}</p>
</td>
<td class="p-4 text-left"><div class="max-h-24 overflow-y-auto no-scrollbar">${uZonesHtml}</div></td> <td class="p-4 text-left"><div class="max-h-24 overflow-y-auto no-scrollbar">${uZonesHtml}</div></td>
<td class="p-4 text-right space-x-2"> <td class="p-4 text-right space-x-2">
<button onclick="editUser(${u.id})" class="text-blue-500 hover:text-blue-700 font-black text-[10px] uppercase">Editar</button> <button onclick="editUser(${u.id})" class="text-blue-500 hover:text-blue-700 font-black text-[10px] uppercase">Editar</button>
<button onclick="toggleUserStatus(${u.id}, '${u.status || 'active'}')" class="${isActive ? 'text-amber-500 hover:text-amber-700' : 'text-green-500 hover:text-green-700'} font-black text-[10px] uppercase">
<button onclick="toggleUserStatus(${u.id}, '${u.status || 'active'}')"
class="${isActive ? 'text-amber-500 hover:text-amber-700' : 'text-green-500 hover:text-green-700'} font-black text-[10px] uppercase">
${isActive ? 'Baja' : 'Activar'} ${isActive ? 'Baja' : 'Activar'}
</button> </button>
<button onclick="deleteUser(${u.id})" class="text-red-400 hover:text-red-700 font-black text-[10px] uppercase">Borrar</button> <button onclick="deleteUser(${u.id})" class="text-red-400 hover:text-red-700 font-black text-[10px] uppercase">Borrar</button>
</td> </td>
</tr>`; </tr>`;
}); });
lucide.createIcons(); // Importante para que se vea el candado lucide.createIcons();
} }
// Nueva función para el botón de Baja/Activar async function toggleUserStatus(id, currentStatus) {
async function toggleUserStatus(id, currentStatus) {
const newStatus = currentStatus === 'active' ? 'inactive' : 'active'; const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
const msg = newStatus === 'active' ? "¿Reactivar operario?" : "¿Dar de baja temporal?"; const msg = newStatus === 'active' ? "¿Reactivar operario?" : "¿Dar de baja temporal?";
if(!confirm(msg)) return; if(!confirm(msg)) return;
@@ -481,28 +468,7 @@ async function toggleUserStatus(id, currentStatus) {
fetchUsers(); fetchUsers();
} }
} catch(e) { showToast("Error de conexión", true); } } catch(e) { showToast("Error de conexión", true); }
}
// Asegúrate de tener también esta función para que los botones de la tabla funcionen
async function toggleUserStatus(id, currentStatus) {
const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
if(!confirm(`¿Deseas cambiar el estado de este operario?`)) return;
try {
const res = await fetch(`${API_URL}/admin/users/${id}/status`, {
method: 'PATCH',
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${localStorage.getItem("token")}`
},
body: JSON.stringify({ status: newStatus })
});
if(await res.json()) {
showToast(newStatus === 'active' ? "Operario activado" : "Operario en baja temporal");
fetchUsers();
} }
} catch(e) { showToast("Error", true); }
}
function showToast(msg, err=false){ function showToast(msg, err=false){
const t=document.getElementById('toast'), m=document.getElementById('toastMsg'); const t=document.getElementById('toast'), m=document.getElementById('toastMsg');