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

Actualizar configuracion.html

Browse Source
This commit is contained in:
marsalva
2026-02-11 07:45:39 +00:00
parent 89fc085e30
commit 25fd495f4a
1 changed files with 84 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
configuracion.html
View File

@@ -79,30 +79,49 @@
<div id="view-others" class="tab-content hidden h-full fade-in flex flex-col">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white rounded-xl shadow border border-gray-100 flex flex-col h-[500px]">
<div class="p-4 bg-gray-50 border-b border-gray-200 shrink-0">
<h3 class="font-bold text-gray-700 flex items-center gap-2">
<i data-lucide="shield" class="w-4 h-4 text-blue-600"></i> Compañías de Seguros
</h3>
</div>
<div class="p-4 border-b border-gray-100 bg-white">
<div class="flex gap-2">
<input type="text" id="newCompanyInput" placeholder="Nombre de la compañía..." class="flex-1 border rounded-lg px-3 py-2 text-sm outline-none focus:border-blue-500">
<button onclick="addCompany()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-xs font-bold transition-colors">
Añadir
</button>
<button onclick="addCompany()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-xs font-bold transition-colors">Añadir</button>
</div>
</div>
<div id="listCompanies" class="flex-1 overflow-y-auto scroller p-2 space-y-1">
<p class="text-center text-xs text-gray-400 mt-10">Cargando...</p>
</div>
</div>
<div class="bg-white rounded-xl shadow border border-gray-100 p-6 flex items-center justify-center text-gray-400 text-sm">
<p>Más configuraciones próximamente...</p>
<div class="bg-white rounded-xl shadow border border-gray-100 flex flex-col h-[500px]">
<div class="p-4 bg-gray-50 border-b border-gray-200 shrink-0">
<h3 class="font-bold text-gray-700 flex items-center gap-2">
<i data-lucide="activity" class="w-4 h-4 text-blue-600"></i> Estados del Servicio
</h3>
</div>
<div class="p-4 border-b border-gray-100 bg-white">
<div class="flex gap-2">
<input type="text" id="newStatusInput" placeholder="Nuevo estado..." class="flex-1 border rounded-lg px-3 py-2 text-sm outline-none focus:border-blue-500">
<select id="newStatusColor" class="border rounded-lg px-2 text-sm text-gray-600 outline-none focus:border-blue-500">
<option value="gray">Gris</option>
<option value="blue">Azul</option>
<option value="green">Verde</option>
<option value="red">Rojo</option>
<option value="yellow">Amarillo</option>
<option value="purple">Morado</option>
</select>
<button onclick="addStatus()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-xs font-bold transition-colors">Añadir</button>
</div>
</div>
<div id="listStatuses" class="flex-1 overflow-y-auto scroller p-2 space-y-1">
<p class="text-center text-xs text-gray-400 mt-10">Cargando...</p>
</div>
</div>
</div>
</div>
@@ -117,7 +136,7 @@
<script>
document.addEventListener("DOMContentLoaded", () => {
if (!localStorage.getItem("token")) window.location.href = "index.html";
showTab('templates'); // Pestaña por defecto
showTab('templates');
});
function showTab(tabId) {
@@ -132,9 +151,9 @@
btn.classList.add('text-blue-600', 'border-b-2', 'border-blue-600', 'font-bold');
btn.classList.remove('text-gray-500', 'font-medium');
// Cargar datos si entramos en "Otras Configuraciones"
if(tabId === 'others') {
loadCompanies();
loadStatusesConfig();
}
}
@@ -142,47 +161,82 @@
async function loadCompanies() {
const list = document.getElementById('listCompanies');
list.innerHTML = '<p class="text-center text-xs text-gray-400 mt-10">Cargando...</p>';
try {
const res = await fetch(`${API_URL}/companies`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
const data = await res.json();
list.innerHTML = "";
if(data.companies.length === 0) {
list.innerHTML = '<p class="text-center text-xs text-gray-400 mt-4">No hay compañías registradas.</p>';
return;
}
if(data.companies.length === 0) { list.innerHTML = '<p class="text-center text-xs text-gray-400 mt-4">Sin compañías.</p>'; return; }
data.companies.forEach(c => {
const div = document.createElement('div');
div.className = "p-3 border border-gray-100 rounded-lg bg-gray-50 flex justify-between items-center group hover:border-blue-200 transition-colors";
div.innerHTML = `
<span class="font-bold text-gray-700 text-sm">${c.name}</span>
<i data-lucide="building-2" class="w-4 h-4 text-gray-300"></i>
`;
div.innerHTML = `<span class="font-bold text-gray-700 text-sm">${c.name}</span><button onclick="deleteCompany(${c.id})" class="text-gray-300 hover:text-red-500"><i data-lucide="trash-2" class="w-4 h-4"></i></button>`;
list.appendChild(div);
});
lucide.createIcons();
} catch(e) { list.innerHTML = '<p class="text-red-500 text-xs text-center">Error al cargar</p>'; }
} catch(e) { list.innerHTML = '<p class="text-red-500 text-xs text-center">Error</p>'; }
}
async function addCompany() {
const input = document.getElementById('newCompanyInput');
const name = input.value.trim();
if(!name) return;
try {
const res = await fetch(`${API_URL}/companies`, {
method: 'POST',
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
body: JSON.stringify({ name: name })
});
if(res.ok) {
showToast("Compañía añadida");
input.value = "";
if(res.ok) { showToast("Compañía añadida"); input.value = ""; loadCompanies(); }
} catch(e) { showToast("Error", true); }
}
async function deleteCompany(id) {
if(!confirm("¿Borrar compañía?")) return;
await fetch(`${API_URL}/companies/${id}`, { method: 'DELETE', headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
loadCompanies();
} else { showToast("Error al añadir", true); }
} catch(e) { showToast("Error de conexión", true); }
}
// --- GESTIÓN DE ESTADOS (NUEVO) ---
async function loadStatusesConfig() {
const list = document.getElementById('listStatuses');
list.innerHTML = '<p class="text-center text-xs text-gray-400 mt-10">Cargando...</p>';
try {
const res = await fetch(`${API_URL}/statuses`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
const data = await res.json();
list.innerHTML = "";
data.statuses.forEach(s => {
const div = document.createElement('div');
div.className = "p-3 border border-gray-100 rounded-lg bg-gray-50 flex justify-between items-center group hover:border-blue-200 transition-colors";
div.innerHTML = `
<div class="flex items-center gap-3">
<div class="w-3 h-3 rounded-full bg-${s.color}-500"></div>
<span class="font-bold text-gray-700 text-sm">${s.name}</span>
</div>
<button onclick="deleteStatus(${s.id})" class="text-gray-300 hover:text-red-500"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
`;
list.appendChild(div);
});
lucide.createIcons();
} catch(e) { list.innerHTML = '<p class="text-red-500 text-xs text-center">Error</p>'; }
}
async function addStatus() {
const input = document.getElementById('newStatusInput');
const color = document.getElementById('newStatusColor').value;
const name = input.value.trim();
if(!name) return;
try {
const res = await fetch(`${API_URL}/statuses`, {
method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
body: JSON.stringify({ name: name, color: color })
});
if(res.ok) { showToast("Estado añadido"); input.value = ""; loadStatusesConfig(); }
} catch(e) { showToast("Error", true); }
}
async function deleteStatus(id) {
if(!confirm("¿Borrar estado? Los servicios con este estado podrían verse afectados.")) return;
await fetch(`${API_URL}/statuses/${id}`, { method: 'DELETE', headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
loadStatusesConfig();
}
function showToast(msg, isError = false) {