Actualizar configuracion.html
This commit is contained in:
@@ -6,29 +6,441 @@
|
|||||||
<title>Configuración - IntegraRepara</title>
|
<title>Configuración - IntegraRepara</title>
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<script src="https://unpkg.com/lucide@latest"></script>
|
<script src="https://unpkg.com/lucide@latest"></script>
|
||||||
<style>.fade-in { animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }</style>
|
<style>
|
||||||
|
.fade-in { animation: fadeIn 0.3s ease-in-out; }
|
||||||
|
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||||
|
/* Scrollbar fina */
|
||||||
|
.scroller::-webkit-scrollbar { width: 6px; }
|
||||||
|
.scroller::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-gray-50 text-gray-800 font-sans antialiased">
|
<body class="bg-gray-50 text-gray-800 font-sans h-screen overflow-hidden">
|
||||||
<div class="flex h-screen overflow-hidden">
|
|
||||||
|
<div class="flex h-full">
|
||||||
<div id="sidebar-container" class="h-full"></div>
|
<div id="sidebar-container" class="h-full"></div>
|
||||||
<div class="flex-1 flex flex-col overflow-hidden relative">
|
|
||||||
|
<div class="flex-1 flex flex-col h-full relative">
|
||||||
<div id="header-container"></div>
|
<div id="header-container"></div>
|
||||||
<main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-50 p-8 fade-in">
|
|
||||||
|
|
||||||
<h2 class="text-2xl font-bold text-gray-800 mb-8">Configuración General</h2>
|
<main class="flex-1 overflow-hidden flex flex-col p-6 fade-in">
|
||||||
|
|
||||||
<div class="bg-white p-12 rounded-xl shadow-sm border border-gray-100 text-center">
|
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-2">
|
||||||
<div class="inline-flex p-4 bg-gray-100 rounded-full mb-4 text-gray-400">
|
<i data-lucide="settings" class="text-blue-600"></i> Configuración del Sistema
|
||||||
<i data-lucide="settings" class="w-8 h-8"></i>
|
</h2>
|
||||||
</div>
|
|
||||||
<h3 class="text-lg font-bold text-gray-800">Ajustes Generales</h3>
|
<div class="flex border-b border-gray-200 mb-6">
|
||||||
<p class="text-gray-500 mt-2">Próximamente aquí podrás configurar facturación, notificaciones y más.</p>
|
<button onclick="showTab('users')" id="tab-users" class="tab-btn px-6 py-3 text-sm font-bold text-blue-600 border-b-2 border-blue-600 hover:bg-gray-50 transition">
|
||||||
<p class="text-sm text-blue-600 mt-4 font-medium">La gestión de usuarios y gremios se ha movido al menú "Usuarios".</p>
|
<i data-lucide="users" class="inline w-4 h-4 mr-1"></i> Equipo
|
||||||
|
</button>
|
||||||
|
<button onclick="showTab('guilds')" id="tab-guilds" class="tab-btn px-6 py-3 text-sm font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50 transition">
|
||||||
|
<i data-lucide="hammer" class="inline w-4 h-4 mr-1"></i> Gremios
|
||||||
|
</button>
|
||||||
|
<button onclick="showTab('zones')" id="tab-zones" class="tab-btn px-6 py-3 text-sm font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50 transition">
|
||||||
|
<i data-lucide="map" class="inline w-4 h-4 mr-1"></i> Zonas
|
||||||
|
</button>
|
||||||
|
<button onclick="showTab('statuses')" id="tab-statuses" class="tab-btn px-6 py-3 text-sm font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50 transition">
|
||||||
|
<i data-lucide="activity" class="inline w-4 h-4 mr-1"></i> Estados
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-1 overflow-hidden relative">
|
||||||
|
|
||||||
|
<div id="view-users" class="tab-content h-full flex flex-col">
|
||||||
|
<div class="flex justify-end mb-4">
|
||||||
|
<button onclick="openUserModal()" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 flex items-center gap-2 text-sm shadow">
|
||||||
|
<i data-lucide="user-plus" class="w-4 h-4"></i> Nuevo Empleado
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-xl shadow border border-gray-100 flex-1 overflow-auto scroller">
|
||||||
|
<table class="w-full text-left">
|
||||||
|
<thead class="bg-gray-50 text-gray-500 text-xs uppercase sticky top-0">
|
||||||
|
<tr>
|
||||||
|
<th class="p-4">Nombre</th>
|
||||||
|
<th class="p-4">Rol</th>
|
||||||
|
<th class="p-4">Contacto</th>
|
||||||
|
<th class="p-4 text-right">Acciones</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="usersTableBody" class="divide-y divide-gray-100 text-sm"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="view-guilds" class="tab-content hidden h-full flex flex-col">
|
||||||
|
<div class="flex gap-4 mb-4">
|
||||||
|
<input type="text" id="newGuildName" placeholder="Nombre del gremio (Ej: Fontanería)" class="flex-1 border rounded-lg px-4 outline-none focus:border-blue-500">
|
||||||
|
<button onclick="addGuild()" class="bg-blue-600 text-white px-6 rounded-lg hover:bg-blue-700">Añadir</button>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-xl shadow border border-gray-100 flex-1 overflow-auto scroller p-4">
|
||||||
|
<div id="guildsList" class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="view-zones" class="tab-content hidden h-full flex flex-col">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 h-full">
|
||||||
|
|
||||||
|
<div class="bg-white rounded-xl shadow border border-gray-100 flex flex-col h-full overflow-hidden">
|
||||||
|
<div class="p-3 bg-gray-50 border-b border-gray-200 font-bold text-sm text-gray-700">1. Selecciona Provincia</div>
|
||||||
|
<div class="p-2 border-b"><input type="text" id="searchProv" placeholder="Filtrar..." class="w-full text-xs p-2 border rounded" onkeyup="filterProvinces()"></div>
|
||||||
|
<div id="listProvinces" class="flex-1 overflow-y-auto scroller p-2 space-y-1"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-xl shadow border border-gray-100 flex flex-col h-full overflow-hidden opacity-50 pointer-events-none transition-opacity" id="colZones">
|
||||||
|
<div class="p-3 bg-gray-50 border-b border-gray-200 font-bold text-sm text-gray-700 flex justify-between items-center">
|
||||||
|
<span>2. Crear/Elegir Zona</span>
|
||||||
|
<button onclick="addZonePrompt()" class="text-blue-600 hover:bg-blue-100 p-1 rounded"><i data-lucide="plus" class="w-4 h-4"></i></button>
|
||||||
|
</div>
|
||||||
|
<div id="listZones" class="flex-1 overflow-y-auto scroller p-2 space-y-1 text-sm">
|
||||||
|
<p class="text-center text-gray-400 mt-10">Selecciona una provincia</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-xl shadow border border-gray-100 flex flex-col h-full overflow-hidden opacity-50 pointer-events-none transition-opacity" id="colOperators">
|
||||||
|
<div class="p-3 bg-gray-50 border-b border-gray-200 font-bold text-sm text-gray-700 flex justify-between items-center">
|
||||||
|
<span>3. Asignar Operarios</span>
|
||||||
|
<button onclick="saveZoneAssignment()" class="bg-green-600 text-white text-xs px-3 py-1 rounded hover:bg-green-700 shadow">Guardar</button>
|
||||||
|
</div>
|
||||||
|
<div id="listOperators" class="flex-1 overflow-y-auto scroller p-2 space-y-1">
|
||||||
|
<p class="text-center text-gray-400 mt-10">Selecciona una zona</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="view-statuses" class="tab-content hidden h-full">
|
||||||
|
<div class="bg-white rounded-xl shadow border border-gray-100 p-6">
|
||||||
|
<h3 class="font-bold text-gray-700 mb-4">Estados del Servicio</h3>
|
||||||
|
<div id="statusList" class="space-y-2">
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-400 mt-4">* Los estados se gestionan automáticamente por ahora.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="userModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center backdrop-blur-sm">
|
||||||
|
<div class="bg-white rounded-xl shadow-2xl w-full max-w-lg p-6 animate-slide-in">
|
||||||
|
<h3 class="text-xl font-bold mb-4">Nuevo Empleado</h3>
|
||||||
|
<form onsubmit="createUser(event)" class="space-y-4">
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<input type="text" id="uName" placeholder="Nombre Completo" required class="w-full border p-2 rounded">
|
||||||
|
<input type="tel" id="uPhone" placeholder="Teléfono" required class="w-full border p-2 rounded">
|
||||||
|
</div>
|
||||||
|
<input type="email" id="uEmail" placeholder="Email" required class="w-full border p-2 rounded">
|
||||||
|
<input type="password" id="uPass" placeholder="Contraseña" required class="w-full border p-2 rounded">
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<select id="uRole" class="w-full border p-2 rounded bg-white">
|
||||||
|
<option value="operario">Operario</option>
|
||||||
|
<option value="admin">Administrador</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border p-3 rounded max-h-32 overflow-y-auto">
|
||||||
|
<p class="text-xs font-bold text-gray-500 mb-2">Asignar Gremios (Si es operario)</p>
|
||||||
|
<div id="uGuildsList" class="grid grid-cols-2 gap-2 text-sm">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-end gap-2 mt-4">
|
||||||
|
<button type="button" onclick="document.getElementById('userModal').classList.add('hidden')" class="px-4 py-2 text-gray-500 hover:text-gray-700">Cancelar</button>
|
||||||
|
<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Guardar</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</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">Msg</span></div>
|
||||||
|
|
||||||
<script src="js/layout.js"></script>
|
<script src="js/layout.js"></script>
|
||||||
|
<script>
|
||||||
|
// VARIABLES GLOBALES
|
||||||
|
let provinces = [], currentProvId = null, currentZoneId = null;
|
||||||
|
let allOperators = [];
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
if (!localStorage.getItem("token")) window.location.href = "index.html";
|
||||||
|
// Cargar datos iniciales
|
||||||
|
loadUsers();
|
||||||
|
loadGuilds();
|
||||||
|
loadProvinces();
|
||||||
|
loadStatuses();
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- SISTEMA DE PESTAÑAS ---
|
||||||
|
function showTab(tabId) {
|
||||||
|
document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
|
||||||
|
document.getElementById(`view-${tabId}`).classList.remove('hidden');
|
||||||
|
|
||||||
|
document.querySelectorAll('.tab-btn').forEach(el => {
|
||||||
|
el.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600');
|
||||||
|
el.classList.add('text-gray-500');
|
||||||
|
});
|
||||||
|
const btn = document.getElementById(`tab-${tabId}`);
|
||||||
|
btn.classList.add('text-blue-600', 'border-b-2', 'border-blue-600');
|
||||||
|
btn.classList.remove('text-gray-500');
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================
|
||||||
|
// 1. LÓGICA DE USUARIOS
|
||||||
|
// ============================
|
||||||
|
async function loadUsers() {
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${API_URL}/admin/users`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
|
||||||
|
const data = await res.json();
|
||||||
|
const tbody = document.getElementById('usersTableBody');
|
||||||
|
tbody.innerHTML = "";
|
||||||
|
data.users.forEach(u => {
|
||||||
|
tbody.innerHTML += `
|
||||||
|
<tr class="hover:bg-gray-50">
|
||||||
|
<td class="p-4 font-medium">${u.full_name}</td>
|
||||||
|
<td class="p-4"><span class="px-2 py-1 rounded text-xs uppercase font-bold ${u.role==='admin'?'bg-purple-100 text-purple-700':'bg-blue-100 text-blue-700'}">${u.role}</span></td>
|
||||||
|
<td class="p-4 text-gray-500">${u.phone}<br><span class="text-xs">${u.email}</span></td>
|
||||||
|
<td class="p-4 text-right">
|
||||||
|
<button onclick="deleteUser(${u.id})" class="text-red-500 hover:bg-red-50 p-2 rounded"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
lucide.createIcons();
|
||||||
|
} catch(e) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function openUserModal() {
|
||||||
|
// Cargar gremios en el modal
|
||||||
|
const res = await fetch(`${API_URL}/guilds`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
|
||||||
|
const data = await res.json();
|
||||||
|
const container = document.getElementById('uGuildsList');
|
||||||
|
container.innerHTML = "";
|
||||||
|
data.guilds.forEach(g => {
|
||||||
|
container.innerHTML += `<label class="flex items-center gap-2"><input type="checkbox" value="${g.id}" class="guild-check text-blue-600 rounded"> ${g.name}</label>`;
|
||||||
|
});
|
||||||
|
document.getElementById('userModal').classList.remove('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function createUser(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const guilds = Array.from(document.querySelectorAll('.guild-check:checked')).map(cb => cb.value);
|
||||||
|
const body = {
|
||||||
|
fullName: document.getElementById('uName').value,
|
||||||
|
phone: document.getElementById('uPhone').value,
|
||||||
|
email: document.getElementById('uEmail').value,
|
||||||
|
password: document.getElementById('uPass').value,
|
||||||
|
role: document.getElementById('uRole').value,
|
||||||
|
guilds: guilds
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${API_URL}/admin/users`, {
|
||||||
|
method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
|
||||||
|
body: JSON.stringify(body)
|
||||||
|
});
|
||||||
|
const json = await res.json();
|
||||||
|
if(json.ok) {
|
||||||
|
showToast("Usuario creado");
|
||||||
|
document.getElementById('userModal').classList.add('hidden');
|
||||||
|
e.target.reset();
|
||||||
|
loadUsers();
|
||||||
|
} else { showToast(json.error, true); }
|
||||||
|
} catch(e) { showToast("Error", true); }
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteUser(id) {
|
||||||
|
if(!confirm("¿Borrar usuario?")) return;
|
||||||
|
await fetch(`${API_URL}/admin/users/${id}`, { method: 'DELETE', headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
|
||||||
|
loadUsers();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================
|
||||||
|
// 2. LÓGICA DE GREMIOS
|
||||||
|
// ============================
|
||||||
|
async function loadGuilds() {
|
||||||
|
const res = await fetch(`${API_URL}/guilds`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
|
||||||
|
const data = await res.json();
|
||||||
|
const list = document.getElementById('guildsList');
|
||||||
|
list.innerHTML = "";
|
||||||
|
data.guilds.forEach(g => {
|
||||||
|
list.innerHTML += `
|
||||||
|
<div class="flex justify-between items-center p-3 border rounded-lg bg-gray-50">
|
||||||
|
<span class="font-medium">${g.name}</span>
|
||||||
|
<button onclick="deleteGuild(${g.id})" class="text-red-400 hover:text-red-600"><i data-lucide="trash" class="w-4 h-4"></i></button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
lucide.createIcons();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function addGuild() {
|
||||||
|
const name = document.getElementById('newGuildName').value;
|
||||||
|
if(!name) return;
|
||||||
|
await fetch(`${API_URL}/guilds`, {
|
||||||
|
method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
|
||||||
|
body: JSON.stringify({ name: name.toUpperCase() })
|
||||||
|
});
|
||||||
|
document.getElementById('newGuildName').value = "";
|
||||||
|
loadGuilds();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteGuild(id) {
|
||||||
|
if(!confirm("¿Borrar gremio?")) return;
|
||||||
|
await fetch(`${API_URL}/guilds/${id}`, { method: 'DELETE', headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
|
||||||
|
loadGuilds();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================
|
||||||
|
// 3. LÓGICA DE ZONAS (Compleja)
|
||||||
|
// ============================
|
||||||
|
async function loadProvinces() {
|
||||||
|
const res = await fetch(`${API_URL}/provinces`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
|
||||||
|
const data = await res.json();
|
||||||
|
provinces = data.provinces;
|
||||||
|
renderProvinces(provinces);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderProvinces(list) {
|
||||||
|
const cont = document.getElementById('listProvinces');
|
||||||
|
cont.innerHTML = "";
|
||||||
|
list.forEach(p => {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.className = "p-2 hover:bg-blue-50 rounded cursor-pointer text-sm flex justify-between items-center group prov-item";
|
||||||
|
div.innerHTML = `<span>${p.name}</span><i data-lucide="chevron-right" class="w-4 h-4 text-gray-300"></i>`;
|
||||||
|
div.onclick = () => selectProvince(p.id, div);
|
||||||
|
cont.appendChild(div);
|
||||||
|
});
|
||||||
|
lucide.createIcons();
|
||||||
|
}
|
||||||
|
|
||||||
|
function filterProvinces() {
|
||||||
|
const term = document.getElementById('searchProv').value.toLowerCase();
|
||||||
|
renderProvinces(provinces.filter(p => p.name.toLowerCase().includes(term)));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function selectProvince(id, el) {
|
||||||
|
currentProvId = id;
|
||||||
|
document.querySelectorAll('.prov-item').forEach(d => d.classList.remove('bg-blue-100', 'font-bold'));
|
||||||
|
el.classList.add('bg-blue-100', 'font-bold');
|
||||||
|
|
||||||
|
document.getElementById('colZones').classList.remove('opacity-50', 'pointer-events-none');
|
||||||
|
document.getElementById('colOperators').classList.add('opacity-50', 'pointer-events-none');
|
||||||
|
loadZones(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadZones(provId) {
|
||||||
|
const res = await fetch(`${API_URL}/zones?province_id=${provId}`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
|
||||||
|
const data = await res.json();
|
||||||
|
const list = document.getElementById('listZones');
|
||||||
|
list.innerHTML = "";
|
||||||
|
|
||||||
|
data.zones.forEach(z => {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.className = "p-3 border border-gray-100 rounded hover:border-blue-300 cursor-pointer bg-white mb-2 flex justify-between items-center zone-item";
|
||||||
|
div.innerHTML = `<span class="font-medium text-gray-700">${z.name}</span>`;
|
||||||
|
|
||||||
|
if (z.owner_id) { // Solo borrar mis zonas
|
||||||
|
const btn = document.createElement('button');
|
||||||
|
btn.innerHTML = '<i data-lucide="trash" class="w-3 h-3"></i>';
|
||||||
|
btn.className = "text-red-300 hover:text-red-500";
|
||||||
|
btn.onclick = (e) => { e.stopPropagation(); deleteZone(z.id); };
|
||||||
|
div.appendChild(btn);
|
||||||
|
}
|
||||||
|
div.onclick = () => selectZone(z.id, div);
|
||||||
|
list.appendChild(div);
|
||||||
|
});
|
||||||
|
lucide.createIcons();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function addZonePrompt() {
|
||||||
|
const name = prompt("Nombre de la nueva zona (ej: Zona Norte):");
|
||||||
|
if(!name) return;
|
||||||
|
await fetch(`${API_URL}/zones`, {
|
||||||
|
method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
|
||||||
|
body: JSON.stringify({ province_id: currentProvId, name })
|
||||||
|
});
|
||||||
|
loadZones(currentProvId);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteZone(id) {
|
||||||
|
if(!confirm("¿Borrar zona?")) return;
|
||||||
|
await fetch(`${API_URL}/zones/${id}`, { method: 'DELETE', headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
|
||||||
|
loadZones(currentProvId);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function selectZone(id, el) {
|
||||||
|
currentZoneId = id;
|
||||||
|
document.querySelectorAll('.zone-item').forEach(d => d.classList.remove('border-blue-500', 'bg-blue-50'));
|
||||||
|
el.classList.add('border-blue-500', 'bg-blue-50');
|
||||||
|
document.getElementById('colOperators').classList.remove('opacity-50', 'pointer-events-none');
|
||||||
|
loadOperatorsForZone(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadOperatorsForZone(zoneId) {
|
||||||
|
// 1. Cargar todos los operarios
|
||||||
|
const resOps = await fetch(`${API_URL}/operators`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
|
||||||
|
const dataOps = await resOps.json();
|
||||||
|
|
||||||
|
// 2. Cargar asignados
|
||||||
|
const resAssigned = await fetch(`${API_URL}/zones/${zoneId}/operators`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
|
||||||
|
const dataAssigned = await resAssigned.json(); // returns { assignedIds: [1, 5] }
|
||||||
|
const assignedSet = new Set(dataAssigned.assignedIds);
|
||||||
|
|
||||||
|
const list = document.getElementById('listOperators');
|
||||||
|
list.innerHTML = "";
|
||||||
|
|
||||||
|
dataOps.operators.forEach(op => {
|
||||||
|
const checked = assignedSet.has(op.id) ? 'checked' : '';
|
||||||
|
list.innerHTML += `
|
||||||
|
<label class="flex items-center p-2 hover:bg-gray-50 rounded cursor-pointer">
|
||||||
|
<input type="checkbox" value="${op.id}" class="op-zone-check w-4 h-4 text-green-600 rounded mr-3" ${checked}>
|
||||||
|
<span class="text-sm font-medium text-gray-700">${op.full_name}</span>
|
||||||
|
</label>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveZoneAssignment() {
|
||||||
|
const checkboxes = document.querySelectorAll('.op-zone-check:checked');
|
||||||
|
const ids = Array.from(checkboxes).map(c => c.value);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await fetch(`${API_URL}/zones/${currentZoneId}/assign`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
|
||||||
|
body: JSON.stringify({ operator_ids: ids })
|
||||||
|
});
|
||||||
|
showToast("Asignación guardada ✅");
|
||||||
|
} catch(e) { showToast("Error al guardar", true); }
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================
|
||||||
|
// 4. LÓGICA DE ESTADOS
|
||||||
|
// ============================
|
||||||
|
async function loadStatuses() {
|
||||||
|
const res = await fetch(`${API_URL}/statuses`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
|
||||||
|
const data = await res.json();
|
||||||
|
const list = document.getElementById('statusList');
|
||||||
|
list.innerHTML = "";
|
||||||
|
data.statuses.forEach(s => {
|
||||||
|
list.innerHTML += `
|
||||||
|
<div class="flex items-center gap-3 p-3 border rounded bg-white">
|
||||||
|
<div class="w-4 h-4 rounded-full bg-${s.color}-500"></div>
|
||||||
|
<span class="font-bold text-gray-700">${s.name}</span>
|
||||||
|
${s.is_default ? '<span class="text-xs bg-gray-200 px-2 rounded">Default</span>' : ''}
|
||||||
|
${s.is_final ? '<span class="text-xs bg-black text-white px-2 rounded">Final</span>' : ''}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function showToast(msg, isError = false) {
|
||||||
|
const t = document.getElementById('toast'), m = document.getElementById('toastMsg');
|
||||||
|
t.className = `fixed bottom-5 right-5 px-6 py-3 rounded-lg shadow-2xl transition-all duration-300 z-50 flex items-center gap-3 ${isError ? 'bg-red-600' : 'bg-slate-800'} text-white`;
|
||||||
|
m.innerText = msg; t.classList.remove('translate-y-20', 'opacity-0');
|
||||||
|
setTimeout(() => t.classList.add('translate-y-20', 'opacity-0'), 3000);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user