`
)
.join('')
);
}
function render() {
if (loading && view === 'home') {
appEl.innerHTML = `
Cargando…
`;
return;
}
let html = '';
if (view === 'register') html = renderRegister();
else if (view === 'home') html = renderHome();
else if (view === 'agendar') html = renderAgendar();
else if (view === 'citas') html = `
Mis citas
Cargando…
`;
else if (view === 'precios') html = `
Cargando…
`;
else if (view === 'info') html = `
Cargando…
`;
else if (view === 'calificar') html = `
Cargando…
`;
else if (view === 'comprobantes') {
html = `
Comprobantes
Por ahora usa el bot de Telegram para enviar la foto del comprobante. Próximamente aquí.
`;
}
appEl.innerHTML = html + navHtml();
bindNav();
bindRegister();
bindHome();
bindAgendar();
if (view === 'citas') {
void renderCitasAsync('
Mis citas
Tus reservas
').then((h) => {
appEl.innerHTML = h + navHtml();
bindNav();
bindCancelar();
});
}
if (view === 'precios') {
void renderPreciosAsync().then((h) => {
appEl.innerHTML = h + navHtml();
bindNav();
});
}
if (view === 'info') {
void renderInfoAsync().then((h) => {
appEl.innerHTML = h + navHtml();
bindNav();
});
}
if (view === 'calificar') {
void renderCalificarAsync().then((h) => {
appEl.innerHTML = h + navHtml();
bindNav();
bindCalificar();
});
}
}
function bindNav() {
document.querySelectorAll('[data-nav]').forEach((el) => {
el.addEventListener('click', () => {
const v = (el as HTMLElement).dataset.nav as View;
haptic();
if (v === 'agendar') {
agendar.step = 0;
agendar.idSucursal = 0;
agendar.servicios = [];
void loadAgendarCatalogo().then(() => setView('agendar'));
} else {
setView(v);
}
});
});
document.querySelectorAll('[data-go]').forEach((el) => {
el.addEventListener('click', () => {
const v = (el as HTMLElement).dataset.go as View;
haptic();
if (v === 'agendar') {
void loadAgendarCatalogo().then(() => setView('agendar'));
} else {
setView(v);
}
});
});
}
function bindRegister() {
document.getElementById('btn-registrar')?.addEventListener('click', async () => {
const nombre = (document.getElementById('inp-nombre') as HTMLInputElement)?.value?.trim();
if (!nombre || nombre.length < 3) {
error = 'Nombre muy corto';
render();
return;
}
loading = true;
render();
try {
bootstrap = await api.registrar(nombre);
view = 'home';
} catch (e) {
error = e instanceof Error ? e.message : 'Error';
} finally {
loading = false;
render();
}
});
}
function bindHome() {
/* data-go en bindNav */
}
function bindAgendar() {
document.querySelectorAll('[data-sucursal]').forEach((el) => {
el.addEventListener('click', () => {
agendar.idSucursal = Number((el as HTMLElement).dataset.sucursal);
haptic();
render();
});
});
document.querySelectorAll('[data-servicio]').forEach((el) => {
el.addEventListener('click', () => {
const id = Number((el as HTMLElement).dataset.servicio);
const i = agendar.servicios.indexOf(id);
if (i >= 0) agendar.servicios.splice(i, 1);
else agendar.servicios.push(id);
haptic();
render();
});
});
document.querySelectorAll('[data-colab]').forEach((el) => {
el.addEventListener('click', () => {
agendar.idColaborador = Number((el as HTMLElement).dataset.colab);
haptic();
render();
});
});
document.querySelectorAll('[data-dia]').forEach((el) => {
el.addEventListener('click', () => {
agendar.dia = (el as HTMLElement).dataset.dia ?? '';
haptic();
render();
});
});
document.querySelectorAll('[data-hora]').forEach((el) => {
el.addEventListener('click', () => {
agendar.hora = (el as HTMLElement).dataset.hora ?? '';
haptic();
render();
});
});
document.getElementById('btn-agendar-siguiente')?.addEventListener('click', () => void agendarNext());
document.getElementById('btn-agendar-atras')?.addEventListener('click', () => {
if (agendar.step > 0) agendar.step--;
render();
});
document.getElementById('btn-confirmar-cita')?.addEventListener('click', () => void confirmarCita());
}
function bindCancelar() {
document.querySelectorAll('.btn-cancelar').forEach((el) => {
el.addEventListener('click', async () => {
const id = Number((el as HTMLElement).dataset.id);
if (!confirm('¿Cancelar esta cita?')) return;
try {
await api.cancelar(id);
setView('citas');
} catch (e) {
alert(e instanceof Error ? e.message : 'Error');
}
});
});
}
function bindCalificar() {
document.querySelectorAll('[data-calificar]').forEach((el) => {
el.addEventListener('click', () => {
calificarCitaId = Number((el as HTMLElement).dataset.calificar);
calificarStars = 0;
render();
});
});
document.querySelectorAll('.star-btn').forEach((el) => {
el.addEventListener('click', () => {
calificarStars = Number((el as HTMLElement).dataset.star);
render();
});
});
document.getElementById('btn-enviar-calificacion')?.addEventListener('click', async () => {
if (calificarStars < 1) {
alert('Elige una calificación');
return;
}
const comentario = (document.getElementById('inp-comentario') as HTMLTextAreaElement)?.value ?? '';
try {
await api.calificar(calificarCitaId, calificarStars, comentario);
calificarCitaId = 0;
alert('¡Gracias!');
setView('home');
} catch (e) {
alert(e instanceof Error ? e.message : 'Error');
}
});
}
function escapeHtml(s: string): string {
return s
.replace(/&/g, '&')
.replace(//g, '>')
.replace(/"/g, '"');
}
function formatHora(h: string): string {
const parts = h.split(':').map(Number);
const hh = parts[0] ?? 0;
const mm = parts[1] ?? 0;
const ampm = hh >= 12 ? 'PM' : 'AM';
const h12 = hh % 12 || 12;
return `${h12}:${String(mm).padStart(2, '0')} ${ampm}`;
}
void loadBootstrap();