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

Actualizar fconfiguracion.html

Browse Source
This commit is contained in:
marsalva
2026-02-08 22:41:50 +00:00
parent 0e51215fd3
commit 16eb587eae
1 changed files with 68 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
configuracion.html → fconfiguracion.html
View File

@@ -24,7 +24,7 @@
<main class="flex-1 overflow-hidden flex flex-col p-6 fade-in">
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-2">
<i data-lucide="settings" class="text-blue-600"></i> Configuración
<i data-lucide="settings" class="text-blue-600"></i> Configuración Avanzada
</h2>
<div class="flex border-b border-gray-200 mb-6 overflow-x-auto">
@@ -56,17 +56,17 @@
</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="openZoneModal()" class="text-blue-600 hover:bg-blue-100 p-1 rounded font-bold flex items-center gap-1 text-xs"><i data-lucide="plus" class="w-3 h-3"></i> Nueva</button>
<span>2. Zonas Definidas</span>
<button onclick="openZoneModal()" class="text-blue-600 hover:bg-blue-100 p-1 rounded font-bold flex items-center gap-1 text-xs transition-colors"><i data-lucide="plus" class="w-3 h-3"></i> Nueva</button>
</div>
<div id="listZones" class="flex-1 overflow-y-auto scroller p-2 space-y-1 text-sm">
<div id="listZones" class="flex-1 overflow-y-auto scroller p-2 space-y-2 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>
<button onclick="saveZoneAssignment()" class="bg-green-600 text-white text-xs px-3 py-1 rounded hover:bg-green-700 shadow transition-colors">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>
@@ -123,7 +123,7 @@
<div class="flex justify-end gap-2 mt-4 pt-4 border-t">
<button onclick="document.getElementById('zoneModal').classList.add('hidden')" class="px-4 py-2 text-gray-500 hover:text-gray-700">Cancelar</button>
<button onclick="createZone()" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Crear Zona</button>
<button onclick="createZone()" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 font-bold">Crear Zona</button>
</div>
</div>
</div>
@@ -168,8 +168,8 @@
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.className = "p-2 hover:bg-blue-50 rounded cursor-pointer text-sm flex justify-between items-center group prov-item transition-colors";
div.innerHTML = `<span>${p.name}</span><i data-lucide="chevron-right" class="w-4 h-4 text-gray-300 group-hover:text-blue-500"></i>`;
div.onclick = () => selectProvince(p.id, div);
cont.appendChild(div);
});
@@ -183,11 +183,12 @@
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.querySelectorAll('.prov-item').forEach(d => d.classList.remove('bg-blue-100', 'font-bold', 'text-blue-700'));
el.classList.add('bg-blue-100', 'font-bold', 'text-blue-700');
document.getElementById('colZones').classList.remove('opacity-50', 'pointer-events-none');
document.getElementById('colOperators').classList.add('opacity-50', 'pointer-events-none');
document.getElementById('listOperators').innerHTML = '<p class="text-center text-gray-400 mt-10">Selecciona una zona</p>';
loadZones(id);
}
@@ -197,19 +198,19 @@
const list = document.getElementById('listZones');
list.innerHTML = "";
if(data.zones.length === 0) list.innerHTML = '<p class="text-center text-xs text-gray-400 p-4">No hay zonas. Crea una.</p>';
if(data.zones.length === 0) list.innerHTML = '<p class="text-center text-xs text-gray-400 p-4">No hay zonas definidas en esta provincia.</p>';
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 zone-item";
let townsText = z.towns_names && z.towns_names.length > 0 ? z.towns_names.join(", ") : "Sin poblaciones";
div.className = "p-3 border border-gray-100 rounded hover:border-blue-300 hover:shadow-sm cursor-pointer bg-white zone-item transition-all";
let townsText = z.towns_names && z.towns_names.length > 0 ? z.towns_names.join(", ") : "Sin poblaciones asignadas";
div.innerHTML = `
<div class="flex justify-between items-start">
<span class="font-bold text-gray-700 block">${z.name}</span>
${z.owner_id ? `<button onclick="event.stopPropagation(); deleteZone(${z.id})" class="text-red-300 hover:text-red-500"><i data-lucide="trash" class="w-3 h-3"></i></button>` : ''}
<div class="flex justify-between items-start mb-1">
<span class="font-bold text-gray-800 text-sm">${z.name}</span>
${z.owner_id ? `<button onclick="deleteZone(event, ${z.id})" class="text-gray-400 hover:text-red-500 transition-colors p-1" title="Borrar Zona"><i data-lucide="trash-2" class="w-4 h-4"></i></button>` : ''}
</div>
<p class="text-xs text-gray-400 mt-1 truncate">${townsText}</p>
<p class="text-xs text-gray-500 truncate leading-relaxed bg-gray-50 p-1 rounded">${townsText}</p>
`;
div.onclick = () => selectZone(z.id, div);
list.appendChild(div);
@@ -221,16 +222,15 @@
if(!currentProvId) return;
document.getElementById('newZoneName').value = "";
// Cargar pueblos
const res = await fetch(`${API_URL}/provinces/${currentProvId}/towns`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
const data = await res.json();
const list = document.getElementById('townsList');
list.innerHTML = "";
if(data.towns.length === 0) list.innerHTML = '<p class="col-span-2 text-center text-gray-400">No hay poblaciones cargadas.</p>';
if(data.towns.length === 0) list.innerHTML = '<p class="col-span-2 text-center text-gray-400 py-4">No hay poblaciones disponibles para esta provincia.</p>';
data.towns.forEach(t => {
list.innerHTML += `<label class="flex items-center gap-2 p-1 hover:bg-blue-50 rounded"><input type="checkbox" value="${t.id}" class="town-check text-blue-600 rounded"> <span class="truncate">${t.name}</span></label>`;
list.innerHTML += `<label class="flex items-center gap-2 p-1.5 hover:bg-blue-50 rounded cursor-pointer"><input type="checkbox" value="${t.id}" class="town-check text-blue-600 rounded"> <span class="truncate text-gray-700">${t.name}</span></label>`;
});
document.getElementById('zoneModal').classList.remove('hidden');
}
@@ -240,33 +240,52 @@
const checks = document.querySelectorAll('.town-check:checked');
const townIds = Array.from(checks).map(c => c.value);
if(!name) { alert("Pon un nombre"); return; }
if(!name) { alert("Debes poner un nombre a la zona"); 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, town_ids: townIds })
});
document.getElementById('zoneModal').classList.add('hidden');
loadZones(currentProvId);
try {
const res = await fetch(`${API_URL}/zones`, {
method: 'POST',
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
body: JSON.stringify({ province_id: currentProvId, name, town_ids: townIds })
});
if(res.ok) {
showToast("Zona creada correctamente");
document.getElementById('zoneModal').classList.add('hidden');
loadZones(currentProvId);
} else { showToast("Error al crear zona", true); }
} catch(e) { showToast("Error de conexión", true); }
}
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 deleteZone(event, id) {
event.stopPropagation(); // Evita seleccionar la zona al borrar
if(!confirm("¿Estás seguro de borrar esta zona? Esta acción no se puede deshacer.")) return;
try {
const res = await fetch(`${API_URL}/zones/${id}`, { method: 'DELETE', headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
if(res.ok) {
showToast("Zona eliminada");
loadZones(currentProvId);
// Resetear panel de operarios si estaba seleccionada esa zona
if(currentZoneId === id) {
document.getElementById('colOperators').classList.add('opacity-50', 'pointer-events-none');
document.getElementById('listOperators').innerHTML = '<p class="text-center text-gray-400 mt-10">Selecciona una zona</p>';
}
} else { showToast("No se pudo borrar", true); }
} catch(e) { showToast("Error de conexión", true); }
}
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.querySelectorAll('.zone-item').forEach(d => d.classList.remove('border-blue-500', 'bg-blue-50', 'ring-1', 'ring-blue-500'));
el.classList.add('border-blue-500', 'bg-blue-50', 'ring-1', 'ring-blue-500');
document.getElementById('colOperators').classList.remove('opacity-50', 'pointer-events-none');
loadOperatorsForZone(id);
}
async function loadOperatorsForZone(zoneId) {
const list = document.getElementById('listOperators');
list.innerHTML = '<p class="text-center text-xs text-gray-400 p-4">Cargando operarios...</p>';
const resOps = await fetch(`${API_URL}/operators`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
const dataOps = await resOps.json();
@@ -274,12 +293,21 @@
const dataAssigned = await resAssigned.json();
const assignedSet = new Set(dataAssigned.assignedIds);
const list = document.getElementById('listOperators');
list.innerHTML = "";
if(dataOps.operators.length === 0) {
list.innerHTML = '<p class="text-center text-xs text-gray-400 p-4">No hay operarios registrados en el sistema.</p>';
return;
}
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>`;
list.innerHTML += `
<label class="flex items-center p-2.5 hover:bg-gray-50 rounded cursor-pointer border-b border-gray-50 last:border-0 transition-colors">
<input type="checkbox" value="${op.id}" class="op-zone-check w-4 h-4 text-green-600 rounded mr-3 focus:ring-green-500" ${checked}>
<span class="text-sm font-medium text-gray-700">${op.full_name}</span>
</label>
`;
});
}
@@ -292,8 +320,8 @@
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); }
showToast("Asignación guardada correctamente ✅");
} catch(e) { showToast("Error al guardar asignación", true); }
}
function showToast(msg, isError = false) {