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

Actualizar asignados.html

Browse Source
This commit is contained in:
marsalva
2026-02-22 22:09:18 +00:00
parent 9ec1fc64d2
commit 2ead395820
1 changed files with 69 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
asignados.html
View File

@@ -7,19 +7,31 @@
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
body { background-color: #f4f7f9; -webkit-tap-highlight-color: transparent; }
/* VARIABLES CORPORATIVAS DINÁMICAS */
:root {
--primary: #f59e0b; /* En asignados.html predomina el ambar por defecto */
--secondary: #2563eb;
--app-bg: #f4f7f9;
}
body { background-color: var(--app-bg); -webkit-tap-highlight-color: transparent; }
.fade-in { animation: fadeIn 0.3s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.bottom-nav-safe { padding-bottom: env(safe-area-inset-bottom); }
/* Clases dinámicas */
.text-primary-dynamic { color: var(--primary) !important; }
.bg-primary-dynamic { background-color: var(--primary) !important; }
.border-primary-dynamic { border-color: var(--primary) !important; }
</style>
</head>
<body class="text-slate-800 font-sans antialiased h-screen flex flex-col overflow-hidden relative">
<header class="bg-white px-5 pt-8 pb-4 shadow-sm z-20 shrink-0 border-b border-slate-100 flex justify-between items-center">
<div>
<p class="text-[10px] font-black text-amber-500 uppercase tracking-widest mb-0.5">Por Agendar</p>
<p class="text-[10px] font-black text-primary-dynamic uppercase tracking-widest mb-0.5">Por Agendar</p>
<h1 class="text-2xl font-black tracking-tight text-slate-800 leading-none">Sin Cita</h1>
</div>
<a href="menu.html" class="w-10 h-10 bg-slate-50 rounded-full flex items-center justify-center text-slate-600 border border-slate-200 active:bg-slate-100 transition-colors">
@@ -29,7 +41,7 @@
<main class="flex-1 overflow-y-auto no-scrollbar p-5 relative z-10" id="mainArea">
<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-amber-500 mb-2"></i>
<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">Buscando pendientes...</p>
</div>
@@ -39,15 +51,15 @@
<nav class="bg-white border-t border-slate-200 shrink-0 pb-safe z-20 absolute bottom-0 w-full shadow-[0_-10px_30px_rgba(0,0,0,0.05)] rounded-t-3xl">
<div class="flex justify-around items-center p-3 bottom-nav-safe">
<a href="menu.html" class="flex flex-col items-center p-2 text-slate-400 hover:text-amber-600 transition-transform active:scale-95">
<a href="menu.html" class="flex flex-col items-center p-2 text-slate-400 hover:text-primary-dynamic transition-transform active:scale-95">
<i data-lucide="layout-grid" class="w-6 h-6 mb-1"></i>
<span class="text-[9px] font-black uppercase tracking-widest">Inicio</span>
</a>
<a href="calendario.html" class="flex flex-col items-center p-2 text-slate-400 hover:text-amber-600 transition-transform active:scale-95">
<a href="calendario.html" class="flex flex-col items-center p-2 text-slate-400 hover:text-primary-dynamic transition-transform active:scale-95">
<i data-lucide="calendar-days" class="w-6 h-6 mb-1"></i>
<span class="text-[9px] font-black uppercase tracking-widest">Agenda</span>
</a>
<button onclick="refreshData()" class="flex flex-col items-center p-2 text-amber-600 transition-transform active:scale-95">
<button onclick="refreshData()" class="flex flex-col items-center p-2 text-primary-dynamic transition-transform active:scale-95">
<i data-lucide="refresh-cw" class="w-6 h-6 mb-1"></i>
<span class="text-[9px] font-black uppercase tracking-widest">Recargar</span>
</button>
@@ -86,13 +98,32 @@
<hr class="border-slate-100 mb-6">
<p class="text-[10px] font-black text-amber-500 uppercase tracking-widest mb-3">Establecer Cita</p>
<div class="grid grid-cols-2 gap-3 mb-4">
<p class="text-[10px] font-black text-primary-dynamic uppercase tracking-widest mb-3 flex items-center gap-1.5"><i data-lucide="calendar-clock" class="w-4 h-4"></i> Establecer Cita</p>
<div class="grid grid-cols-2 gap-3 mb-3">
<input type="date" id="dateInput" class="w-full bg-white border border-slate-200 p-4 rounded-2xl text-sm font-bold text-slate-700 shadow-inner outline-none focus:ring-2 focus:ring-amber-500 transition-all">
<input type="time" id="timeInput" class="w-full bg-white border border-slate-200 p-4 rounded-2xl text-sm font-bold text-slate-700 shadow-inner outline-none focus:ring-2 focus:ring-amber-500 transition-all">
</div>
<button onclick="saveAppointment()" id="btnSaveAppt" class="w-full bg-amber-500 text-white font-black py-4 rounded-2xl shadow-lg shadow-amber-200 active:scale-95 transition-transform flex items-center justify-center gap-2 uppercase tracking-widest text-xs">
<div class="mb-6 relative">
<select id="durationInput" class="w-full bg-white border border-slate-200 p-4 rounded-2xl text-sm font-bold text-slate-700 shadow-inner outline-none focus:ring-2 focus:ring-amber-500 transition-all appearance-none pr-10 cursor-pointer">
<option value="15">15 minutos</option>
<option value="30">30 minutos</option>
<option value="45">45 minutos</option>
<option value="60" selected>1 hora</option>
<option value="75">1 hora 15 min</option>
<option value="90">1 hora 30 min</option>
<option value="105">1 hora 45 min</option>
<option value="120">2 horas</option>
<option value="150">2 horas 30 min</option>
<option value="180">3 horas</option>
<option value="210">3 horas 30 min</option>
<option value="240">4 horas (Máx)</option>
</select>
<i data-lucide="clock" class="w-5 h-5 absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"></i>
</div>
<button onclick="saveAppointment()" id="btnSaveAppt" class="w-full bg-primary-dynamic text-white font-black py-4 rounded-2xl shadow-lg active:scale-95 transition-transform flex items-center justify-center gap-2 uppercase tracking-widest text-xs">
<i data-lucide="check-circle" class="w-5 h-5"></i> Confirmar Cita
</button>
@@ -112,10 +143,33 @@
let localServices = [];
let systemStatuses = [];
document.addEventListener("DOMContentLoaded", () => {
// --- SISTEMA DE TEMA DINÁMICO ---
async function applyTheme() {
try {
let theme = JSON.parse(localStorage.getItem('app_theme'));
const res = await fetch(`${API_URL}/config/company`, {
headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
});
const data = await res.json();
if(data.ok && data.config && data.config.portal_settings && data.config.portal_settings.app_settings) {
theme = data.config.portal_settings.app_settings;
localStorage.setItem('app_theme', JSON.stringify(theme));
}
if(theme) {
// En asignados solemos destacar el secundario o primary, lo adaptamos:
document.documentElement.style.setProperty('--primary', theme.primary);
document.documentElement.style.setProperty('--secondary', theme.secondary);
document.documentElement.style.setProperty('--app-bg', theme.bg);
}
} catch (e) { console.warn("Usando tema por defecto"); }
}
document.addEventListener("DOMContentLoaded", async () => {
if (!localStorage.getItem("token") || localStorage.getItem("role") !== 'operario') {
window.location.href = "index.html"; return;
}
await applyTheme();
lucide.createIcons();
loadStatuses();
refreshData();
@@ -234,9 +288,10 @@
const matchPhone = rawPhone.toString().match(/[6789]\d{8}/);
document.getElementById('detPhoneRaw').value = matchPhone ? matchPhone[0] : "";
// Limpiar inputs de fecha
// Limpiar inputs de fecha y poner duración por defecto
document.getElementById('dateInput').value = "";
document.getElementById('timeInput').value = "";
document.getElementById('durationInput').value = "60";
// Mostrar modal con animación
const modal = document.getElementById('actionModal');
@@ -278,6 +333,7 @@
const id = document.getElementById('detId').value;
const date = document.getElementById('dateInput').value;
const time = document.getElementById('timeInput').value;
const duration = document.getElementById('durationInput').value;
if (!date || !time) return alert("Selecciona fecha y hora para agendar.");
@@ -295,13 +351,13 @@
const res = await fetch(`${API_URL}/services/set-appointment/${id}`, {
method: 'PUT',
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
body: JSON.stringify({ date: date, time: time, status_operativo: statusToSave })
body: JSON.stringify({ date: date, time: time, duration_minutes: duration, status_operativo: statusToSave })
});
if (res.ok) {
showToast("Cita guardada correctamente");
closeModal();
// Como ahora tiene fecha, desaparecerá de esta lista
// Como ahora tiene fecha, desaparecerá de esta lista y se irá al calendario
refreshData();
} else {
alert("Error al guardar la cita.");