Añadir aceptar.html
This commit is contained in:
165
aceptar.html
Normal file
165
aceptar.html
Normal file
@@ -0,0 +1,165 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nuevo Servicio Disponible - IntegraRepara</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
.btn-animate { transition: all 0.2s; }
|
||||
.btn-animate:active { transform: scale(0.95); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-slate-50 text-slate-800 font-sans antialiased">
|
||||
|
||||
<div class="max-w-md mx-auto min-h-screen flex flex-col p-4">
|
||||
|
||||
<div class="text-center py-6">
|
||||
<div class="bg-blue-600 w-16 h-16 rounded-2xl flex items-center justify-center mx-auto shadow-lg shadow-blue-200 mb-4">
|
||||
<i data-lucide="briefcase" class="text-white w-8 h-8"></i>
|
||||
</div>
|
||||
<h1 class="text-xl font-black uppercase tracking-tight text-slate-900">Servicio Disponible</h1>
|
||||
<p id="timer" class="text-sm font-bold text-red-500 mt-1">Cargando datos...</p>
|
||||
</div>
|
||||
|
||||
<div id="content" class="hidden space-y-4">
|
||||
<div class="bg-white rounded-3xl p-6 shadow-sm border border-slate-100 space-y-6">
|
||||
|
||||
<div class="flex justify-between items-start border-b border-slate-50 pb-4">
|
||||
<div>
|
||||
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Gremio</p>
|
||||
<p id="guild" class="font-black text-blue-600 uppercase text-lg">--</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Referencia</p>
|
||||
<p id="ref" class="font-bold text-slate-700">--</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="bg-slate-100 p-2 rounded-lg text-slate-500">
|
||||
<i data-lucide="map-pin" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[10px] font-black text-slate-400 uppercase">Ubicación / CP</p>
|
||||
<p id="location" class="font-bold text-slate-800 uppercase">--</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="bg-slate-100 p-2 rounded-lg text-slate-500">
|
||||
<i data-lucide="align-left" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[10px] font-black text-slate-400 uppercase">Descripción del Daño</p>
|
||||
<p id="desc" class="text-sm text-slate-600 leading-relaxed font-medium">--</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 pt-4">
|
||||
<button onclick="respond('reject')" class="btn-animate bg-white border-2 border-slate-200 text-slate-500 font-black py-4 rounded-2xl uppercase text-xs tracking-widest hover:bg-slate-50">
|
||||
Rechazar
|
||||
</button>
|
||||
<button onclick="respond('accept')" class="btn-animate bg-green-600 text-white font-black py-4 rounded-2xl uppercase text-xs tracking-widest shadow-lg shadow-green-200 hover:bg-green-700">
|
||||
Aceptar Trabajo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="error-screen" class="hidden text-center py-20 px-6">
|
||||
<i data-lucide="clock-alert" class="w-16 h-16 text-slate-300 mx-auto mb-4"></i>
|
||||
<h2 class="text-xl font-black text-slate-800 uppercase">¡Lo sentimos!</h2>
|
||||
<p id="error-msg" class="text-slate-500 text-sm mt-2 font-medium">Este enlace ha caducado o el servicio ya ha sido asignado a otro compañero.</p>
|
||||
<button onclick="window.close()" class="mt-8 text-blue-600 font-bold uppercase text-xs">Cerrar ventana</button>
|
||||
</div>
|
||||
|
||||
<div id="loading" class="flex-1 flex items-center justify-center">
|
||||
<i data-lucide="loader-2" class="w-8 h-8 animate-spin text-blue-600"></i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API_URL = "https://integrarepara-api.integrarepara.es";
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const token = urlParams.get('t');
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async () => {
|
||||
if (!token) {
|
||||
showError("Token de acceso no válido");
|
||||
return;
|
||||
}
|
||||
await loadAssignmentData();
|
||||
lucide.createIcons();
|
||||
});
|
||||
|
||||
async function loadAssignmentData() {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/public/assignment/${token}`);
|
||||
const data = await res.json();
|
||||
|
||||
if (data.ok) {
|
||||
const raw = data.service;
|
||||
document.getElementById('guild').innerText = raw["Gremio"] || "Servicio General";
|
||||
document.getElementById('ref').innerText = raw["Expediente"] || "Sin Ref";
|
||||
document.getElementById('location').innerText = `${raw["Población"] || 'Zona'} (CP: ${raw["Código Postal"] || '---'})`;
|
||||
document.getElementById('desc').innerText = raw["Descripción"] || "Revisar en el lugar.";
|
||||
document.getElementById('timer').innerText = "Responde antes de que caduque el turno";
|
||||
|
||||
document.getElementById('loading').classList.add('hidden');
|
||||
document.getElementById('content').classList.remove('hidden');
|
||||
} else {
|
||||
showError(data.error);
|
||||
}
|
||||
} catch (e) {
|
||||
showError("Error al conectar con el servidor");
|
||||
}
|
||||
}
|
||||
|
||||
async function respond(action) {
|
||||
const btnText = action === 'accept' ? 'ACEPTANDO...' : 'RECHAZANDO...';
|
||||
const originalContent = document.getElementById('content').innerHTML;
|
||||
|
||||
if(!confirm(`¿Seguro que quieres ${action === 'accept' ? 'ACEPTAR' : 'RECHAZAR'} este servicio?`)) return;
|
||||
|
||||
try {
|
||||
document.getElementById('loading').classList.remove('hidden');
|
||||
document.getElementById('content').classList.add('hidden');
|
||||
|
||||
const res = await fetch(`${API_URL}/public/assignment/respond`, {
|
||||
method: 'POST',
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ token, action })
|
||||
});
|
||||
const data = await res.json();
|
||||
|
||||
if (data.ok) {
|
||||
document.getElementById('loading').innerHTML = `
|
||||
<div class="text-center fade-in">
|
||||
<i data-lucide="check-circle-2" class="w-16 h-16 text-green-500 mx-auto mb-4"></i>
|
||||
<h2 class="text-xl font-black uppercase text-slate-800">${action === 'accept' ? '¡Asignado!' : 'Rechazado'}</h2>
|
||||
<p class="text-slate-500 text-sm mt-2">${action === 'accept' ? 'Ya puedes verlo en tu lista de servicios.' : 'Gracias por avisar.'}</p>
|
||||
</div>
|
||||
`;
|
||||
lucide.createIcons();
|
||||
} else {
|
||||
showError(data.error);
|
||||
}
|
||||
} catch (e) {
|
||||
showError("Hubo un problema al procesar tu respuesta.");
|
||||
}
|
||||
}
|
||||
|
||||
function showError(msg) {
|
||||
document.getElementById('loading').classList.add('hidden');
|
||||
document.getElementById('content').classList.add('hidden');
|
||||
document.getElementById('error-screen').classList.remove('hidden');
|
||||
if(msg) document.getElementById('error-msg').innerText = msg;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user