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

92
configuracion.html → fconfiguracion.html
View File

@@ -24,7 +24,7 @@
<main class="flex-1 overflow-hidden flex flex-col p-6 fade-in"> <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"> <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> </h2>
<div class="flex border-b border-gray-200 mb-6 overflow-x-auto"> <div class="flex border-b border-gray-200 mb-6 overflow-x-auto">
@@ -56,17 +56,17 @@
</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="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"> <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> <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"><i data-lucide="plus" class="w-3 h-3"></i> Nueva</button> <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>
<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> <p class="text-center text-gray-400 mt-10">Selecciona una provincia</p>
</div> </div>
</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="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"> <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> <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>
<div id="listOperators" class="flex-1 overflow-y-auto scroller p-2 space-y-1"> <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> <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"> <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="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> </div>
</div> </div>
@@ -168,8 +168,8 @@
cont.innerHTML = ""; cont.innerHTML = "";
list.forEach(p => { list.forEach(p => {
const div = document.createElement('div'); 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.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"></i>`; 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); div.onclick = () => selectProvince(p.id, div);
cont.appendChild(div); cont.appendChild(div);
}); });
@@ -183,11 +183,12 @@
async function selectProvince(id, el) { async function selectProvince(id, el) {
currentProvId = id; currentProvId = id;
document.querySelectorAll('.prov-item').forEach(d => d.classList.remove('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'); el.classList.add('bg-blue-100', 'font-bold', 'text-blue-700');
document.getElementById('colZones').classList.remove('opacity-50', 'pointer-events-none'); document.getElementById('colZones').classList.remove('opacity-50', 'pointer-events-none');
document.getElementById('colOperators').classList.add('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); loadZones(id);
} }
@@ -197,19 +198,19 @@
const list = document.getElementById('listZones'); const list = document.getElementById('listZones');
list.innerHTML = ""; 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 => { data.zones.forEach(z => {
const div = document.createElement('div'); 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"; 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"; let townsText = z.towns_names && z.towns_names.length > 0 ? z.towns_names.join(", ") : "Sin poblaciones asignadas";
div.innerHTML = ` div.innerHTML = `
<div class="flex justify-between items-start"> <div class="flex justify-between items-start mb-1">
<span class="font-bold text-gray-700 block">${z.name}</span> <span class="font-bold text-gray-800 text-sm">${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>` : ''} ${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> </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); div.onclick = () => selectZone(z.id, div);
list.appendChild(div); list.appendChild(div);
@@ -221,16 +222,15 @@
if(!currentProvId) return; if(!currentProvId) return;
document.getElementById('newZoneName').value = ""; document.getElementById('newZoneName').value = "";
// Cargar pueblos
const res = await fetch(`${API_URL}/provinces/${currentProvId}/towns`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } }); const res = await fetch(`${API_URL}/provinces/${currentProvId}/towns`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
const data = await res.json(); const data = await res.json();
const list = document.getElementById('townsList'); const list = document.getElementById('townsList');
list.innerHTML = ""; 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 => { 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'); document.getElementById('zoneModal').classList.remove('hidden');
} }
@@ -240,33 +240,52 @@
const checks = document.querySelectorAll('.town-check:checked'); const checks = document.querySelectorAll('.town-check:checked');
const townIds = Array.from(checks).map(c => c.value); 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`, { try {
const res = await fetch(`${API_URL}/zones`, {
method: 'POST', method: 'POST',
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` }, headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
body: JSON.stringify({ province_id: currentProvId, name, town_ids: townIds }) body: JSON.stringify({ province_id: currentProvId, name, town_ids: townIds })
}); });
if(res.ok) {
showToast("Zona creada correctamente");
document.getElementById('zoneModal').classList.add('hidden'); document.getElementById('zoneModal').classList.add('hidden');
loadZones(currentProvId); loadZones(currentProvId);
} else { showToast("Error al crear zona", true); }
} catch(e) { showToast("Error de conexión", true); }
} }
async function deleteZone(id) { async function deleteZone(event, id) {
if(!confirm("¿Borrar zona?")) return; event.stopPropagation(); // Evita seleccionar la zona al borrar
await fetch(`${API_URL}/zones/${id}`, { method: 'DELETE', headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } }); 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); 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) { async function selectZone(id, el) {
currentZoneId = id; currentZoneId = id;
document.querySelectorAll('.zone-item').forEach(d => d.classList.remove('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'); el.classList.add('border-blue-500', 'bg-blue-50', 'ring-1', 'ring-blue-500');
document.getElementById('colOperators').classList.remove('opacity-50', 'pointer-events-none'); document.getElementById('colOperators').classList.remove('opacity-50', 'pointer-events-none');
loadOperatorsForZone(id); loadOperatorsForZone(id);
} }
async function loadOperatorsForZone(zoneId) { 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 resOps = await fetch(`${API_URL}/operators`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
const dataOps = await resOps.json(); const dataOps = await resOps.json();
@@ -274,12 +293,21 @@
const dataAssigned = await resAssigned.json(); const dataAssigned = await resAssigned.json();
const assignedSet = new Set(dataAssigned.assignedIds); const assignedSet = new Set(dataAssigned.assignedIds);
const list = document.getElementById('listOperators');
list.innerHTML = ""; 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 => { dataOps.operators.forEach(op => {
const checked = assignedSet.has(op.id) ? 'checked' : ''; 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")}` }, headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
body: JSON.stringify({ operator_ids: ids }) body: JSON.stringify({ operator_ids: ids })
}); });
showToast("Asignación guardada ✅"); showToast("Asignación guardada correctamente ✅");
} catch(e) { showToast("Error al guardar", true); } } catch(e) { showToast("Error al guardar asignación", true); }
} }
function showToast(msg, isError = false) { function showToast(msg, isError = false) {