consultoria-as
9641b0af80
- Replace customers.html with design system clientes page, add slide panel + wire to customers.js - Replace inventory.html with design system inventario page, load inventory.js - Add empty state component to catalog product grid (hidden, shown when no results) - Add offline banner HTML/CSS to all three pages - Create offline-banner.js: listens online/offline events, auto-dismisses restored banner after 3s Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
47 lines
1.5 KiB
JavaScript
47 lines
1.5 KiB
JavaScript
// /home/Autopartes/pos/static/js/offline-banner.js
|
|
// Global offline/online banner controller.
|
|
// Include this script in any page that has an #offlineBanner element.
|
|
|
|
(function () {
|
|
'use strict';
|
|
|
|
var banner = document.getElementById('offlineBanner');
|
|
var bannerText = document.getElementById('offlineBannerText');
|
|
if (!banner || !bannerText) return;
|
|
|
|
var dismissTimer = null;
|
|
|
|
function showOffline() {
|
|
clearTimeout(dismissTimer);
|
|
banner.className = 'banner banner--error';
|
|
banner.style.display = 'flex';
|
|
banner.style.animation = 'slideDown 0.35s ease-out forwards';
|
|
bannerText.innerHTML = '<strong>Conexion perdida</strong> — Intentando reconectar...';
|
|
}
|
|
|
|
function showOnline() {
|
|
clearTimeout(dismissTimer);
|
|
banner.className = 'banner banner--success';
|
|
banner.style.display = 'flex';
|
|
banner.style.animation = 'slideDown 0.35s ease-out forwards';
|
|
bannerText.innerHTML = '<strong>Conexion restaurada</strong> — Sincronizando datos...';
|
|
|
|
// Auto-dismiss after 3 seconds
|
|
dismissTimer = setTimeout(function () {
|
|
banner.style.animation = 'slideUp 0.3s ease-in forwards';
|
|
banner.addEventListener('animationend', function onEnd() {
|
|
banner.style.display = 'none';
|
|
banner.removeEventListener('animationend', onEnd);
|
|
}, { once: true });
|
|
}, 3000);
|
|
}
|
|
|
|
// Show warning immediately if already offline
|
|
if (!navigator.onLine) {
|
|
showOffline();
|
|
}
|
|
|
|
window.addEventListener('offline', showOffline);
|
|
window.addEventListener('online', showOnline);
|
|
})();
|