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

Actualizar solicitar.html

Browse Source
This commit is contained in:
marsalva
2026-03-14 13:08:29 +00:00
parent b626724e3d
commit 7bddbed4f1
1 changed files with 52 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
solicitar.html
View File

@@ -23,6 +23,7 @@
.text-primary-dynamic { color: var(--primary) !important; }
.bg-primary-dynamic { background-color: var(--primary) !important; }
.border-primary-dynamic { border-color: var(--primary) !important; }
.ring-primary-dynamic { --tw-ring-color: var(--primary) !important; }
</style>
</head>
<body class="text-slate-800 font-sans antialiased h-screen flex flex-col overflow-hidden relative">
@@ -38,6 +39,12 @@
</header>
<main class="flex-1 overflow-y-auto no-scrollbar p-5 relative z-10" id="mainArea">
<div id="searchContainer" class="hidden mb-6 relative">
<i data-lucide="search" class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
<input type="text" id="searchInput" oninput="filterServices()" placeholder="Buscar por cliente, ref, zona, avería..." class="w-full bg-white border border-slate-200 pl-12 pr-4 py-3.5 rounded-2xl text-sm font-bold shadow-sm outline-none focus:ring-2 ring-primary-dynamic transition-all">
</div>
<div id="loader" class="text-center py-10 opacity-50">
<i data-lucide="loader-2" class="w-8 h-8 animate-spin mx-auto text-primary-dynamic mb-2"></i>
<p class="text-xs font-bold uppercase tracking-widest mt-2 text-slate-400">Rastreando tu zona...</p>
@@ -219,7 +226,9 @@
if (isRestricted) return; // Doble seguridad
document.getElementById('servicesList').classList.add('hidden');
document.getElementById('searchContainer').classList.add('hidden');
document.getElementById('loader').classList.remove('hidden');
document.getElementById('searchInput').value = ""; // Limpiamos el buscador al recargar
try {
const res = await fetch(`${API_URL}/providers/scraped`, {
@@ -252,7 +261,11 @@
return false;
});
renderServices();
renderServices(availableServices); // Renderizamos pasando la lista completa inicialmente
if (availableServices.length > 0) {
document.getElementById('searchContainer').classList.remove('hidden');
}
}
} catch (e) {
alert("Error de conexión");
@@ -262,23 +275,53 @@
}
}
function renderServices() {
// 🔥 FUNCIÓN DE FILTRADO (BUSCADOR) 🔥
function filterServices() {
const query = document.getElementById('searchInput').value.toLowerCase().trim();
if (query === "") {
renderServices(availableServices); // Si está vacío, pinta todos
return;
}
const filtered = availableServices.filter(s => {
const raw = s.raw_data || {};
const searchString = `
${s.service_ref || ""}
${raw["Nombre Cliente"] || raw["CLIENTE"] || ""}
${raw["Dirección"] || raw["DOMICILIO"] || ""}
${raw["Población"] || raw["POBLACION-PROVINCIA"] || ""}
${raw["Código Postal"] || raw["C.P."] || ""}
${raw["Descripción"] || raw["DESCRIPCION"] || raw["Averia"] || ""}
${raw["Compañía"] || raw["Procedencia"] || ""}
`.toLowerCase();
return searchString.includes(query);
});
renderServices(filtered);
}
// Se ha modificado para que reciba el array a pintar (filtered o full)
function renderServices(servicesToRender) {
const container = document.getElementById('servicesList');
if (availableServices.length === 0) {
if (!servicesToRender || servicesToRender.length === 0) {
const isSearch = document.getElementById('searchInput').value.trim() !== "";
container.innerHTML = `
<div class="text-center py-16 bg-white rounded-3xl border border-slate-100 shadow-sm mt-4">
<div class="text-center py-16 bg-white rounded-3xl border border-slate-100 shadow-sm mt-4 fade-in">
<div class="w-16 h-16 bg-slate-50 text-slate-300 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="coffee" class="w-8 h-8"></i>
<i data-lucide="${isSearch ? 'search-X' : 'coffee'}" class="w-8 h-8"></i>
</div>
<h3 class="font-black text-slate-800 text-lg uppercase tracking-tight">Bolsa Vacía</h3>
<p class="text-xs text-slate-400 font-medium mt-1">No hay servicios nuevos en tu zona.</p>
<h3 class="font-black text-slate-800 text-lg uppercase tracking-tight">${isSearch ? 'Sin resultados' : 'Bolsa Vacía'}</h3>
<p class="text-xs text-slate-400 font-medium mt-1">${isSearch ? 'Prueba con otra palabra clave.' : 'No hay servicios nuevos en tu zona.'}</p>
</div>`;
lucide.createIcons();
return;
}
container.innerHTML = availableServices.map(s => {
container.innerHTML = servicesToRender.map(s => {
const raw = s.raw_data || {};
const name = raw["Nombre Cliente"] || raw["CLIENTE"] || "Asegurado";
const addr = raw["Dirección"] || "Sin dirección";
@@ -380,7 +423,7 @@
if (res.ok) {
showToast("¡Te lo has quedado!");
closeModal();
loadAvailableServices(); // Recarga la bolsa
loadAvailableServices(); // Recarga la bolsa y limpia el buscador
} else {
alert("Alguien ha sido más rápido o hubo un error.");
}