874 lines
42 KiB
JavaScript
874 lines
42 KiB
JavaScript
/**
|
|
* pos-utils.js — Shared utility functions for all POS pages.
|
|
*
|
|
* Provides common operations that multiple pages need:
|
|
* - CSV export of any visible table
|
|
* - Print page (PDF via browser print dialog)
|
|
* - Toast notifications (if page doesn't have its own)
|
|
*
|
|
* Load this script in every POS template BEFORE page-specific JS.
|
|
*/
|
|
(function() {
|
|
'use strict';
|
|
|
|
// ── CSV Export ──────────────────────────────────────────────────
|
|
// Finds the first visible <table> on the page and downloads it as CSV.
|
|
// Works on inventory, customers, invoicing, reports, accounting.
|
|
|
|
window.exportVisibleTableCSV = function(prefix) {
|
|
prefix = prefix || 'datos';
|
|
var tables = document.querySelectorAll('table');
|
|
var table = null;
|
|
|
|
// Find first visible table with data rows
|
|
for (var i = 0; i < tables.length; i++) {
|
|
if (tables[i].offsetParent !== null && tables[i].querySelector('tbody tr')) {
|
|
table = tables[i];
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!table) {
|
|
showToast('No hay tabla de datos para exportar en esta vista.', 'warn');
|
|
return;
|
|
}
|
|
|
|
var rows = [];
|
|
|
|
// Header row
|
|
var ths = table.querySelectorAll('thead th');
|
|
if (ths.length) {
|
|
rows.push(Array.from(ths).map(function(th) {
|
|
return '"' + th.textContent.trim().replace(/"/g, '""') + '"';
|
|
}).join(','));
|
|
}
|
|
|
|
// Data rows
|
|
table.querySelectorAll('tbody tr').forEach(function(tr) {
|
|
var cells = tr.querySelectorAll('td');
|
|
rows.push(Array.from(cells).map(function(td) {
|
|
return '"' + td.textContent.trim().replace(/"/g, '""') + '"';
|
|
}).join(','));
|
|
});
|
|
|
|
if (rows.length <= 1) {
|
|
showToast('La tabla está vacía — no hay datos para exportar.', 'warn');
|
|
return;
|
|
}
|
|
|
|
var csv = rows.join('\n');
|
|
// BOM prefix so Excel opens UTF-8 correctly
|
|
var blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' });
|
|
var url = URL.createObjectURL(blob);
|
|
var a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = prefix + '_nexus_' + new Date().toISOString().slice(0, 10) + '.csv';
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
|
|
showToast('CSV descargado: ' + a.download, 'ok');
|
|
};
|
|
|
|
// ── Print (PDF) ────────────────────────────────────────────────
|
|
window.printPage = function() {
|
|
window.print();
|
|
};
|
|
|
|
// ── Toast (enhanced with icons, progress bar, close button, actions) ──
|
|
var _toastIcons = {
|
|
ok: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>',
|
|
error: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
|
|
warn: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
|
|
info: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>'
|
|
};
|
|
var _toastTitles = { ok: 'Éxito', error: 'Error', warn: 'Advertencia', info: 'Información' };
|
|
|
|
window.showToast = function(msg, type, opts) {
|
|
type = type || 'info';
|
|
opts = opts || {};
|
|
var container = document.getElementById('toast-container');
|
|
if (!container) {
|
|
container = document.createElement('div');
|
|
container.id = 'toast-container';
|
|
document.body.appendChild(container);
|
|
}
|
|
|
|
var toast = document.createElement('div');
|
|
toast.className = 'toast toast--' + type;
|
|
|
|
var iconHtml = '<div class="toast__icon">' + (_toastIcons[type] || _toastIcons.info) + '</div>';
|
|
var titleHtml = opts.title ? '<div class="toast__title">' + opts.title + '</div>' : '';
|
|
var actionHtml = '';
|
|
if (opts.action && opts.action.text) {
|
|
actionHtml = '<div class="toast__action"><button onclick="this.closest(\'.toast\').__toastAction()">' + opts.action.text + '</button></div>';
|
|
toast.__toastAction = function() {
|
|
if (opts.action.callback) opts.action.callback();
|
|
_removeToast(toast);
|
|
};
|
|
}
|
|
var progressHtml = '<div class="toast__progress" style="animation-duration:' + (opts.duration || 4000) + 'ms;"></div>';
|
|
|
|
toast.innerHTML = iconHtml +
|
|
'<div class="toast__content">' + titleHtml + '<div class="toast__msg">' + msg + '</div>' + actionHtml + '</div>' +
|
|
'<button class="toast__close" onclick="_removeToast(this.closest(\'.toast\'))">✕</button>' +
|
|
progressHtml;
|
|
|
|
container.appendChild(toast);
|
|
|
|
var timer = setTimeout(function() { _removeToast(toast); }, opts.duration || 4000);
|
|
toast.__toastTimer = timer;
|
|
|
|
toast.addEventListener('mouseenter', function() { clearTimeout(timer); var p = toast.querySelector('.toast__progress'); if (p) p.style.animationPlayState = 'paused'; });
|
|
toast.addEventListener('mouseleave', function() { var p = toast.querySelector('.toast__progress'); if (p) p.style.animationPlayState = 'running'; timer = setTimeout(function() { _removeToast(toast); }, 2000); toast.__toastTimer = timer; });
|
|
};
|
|
|
|
window._removeToast = function(toast) {
|
|
if (!toast || toast.__toastRemoved) return;
|
|
toast.__toastRemoved = true;
|
|
if (toast.__toastTimer) clearTimeout(toast.__toastTimer);
|
|
toast.style.animation = 'toastSlideOut 0.25s ease forwards';
|
|
setTimeout(function() { toast.remove(); }, 260);
|
|
};
|
|
|
|
// ── Skeleton helpers ──────────────────────────────────────────
|
|
window.renderSkeletonRows = function(cols, rows) {
|
|
rows = rows || 6;
|
|
var html = '';
|
|
for (var i = 0; i < rows; i++) {
|
|
html += '<tr class="skeleton--table-row">';
|
|
for (var j = 0; j < cols; j++) {
|
|
html += '<td><div class="skeleton"></div></td>';
|
|
}
|
|
html += '</tr>';
|
|
}
|
|
return html;
|
|
};
|
|
|
|
window.showSkeleton = function(containerSelector, cols, rows) {
|
|
var el = typeof containerSelector === 'string' ? document.querySelector(containerSelector) : containerSelector;
|
|
if (!el) return;
|
|
el.dataset.originalContent = el.innerHTML;
|
|
el.innerHTML = renderSkeletonRows(cols || 6, rows || 6);
|
|
};
|
|
|
|
window.hideSkeleton = function(containerSelector) {
|
|
var el = typeof containerSelector === 'string' ? document.querySelector(containerSelector) : containerSelector;
|
|
if (!el || el.dataset.originalContent === undefined) return;
|
|
el.innerHTML = el.dataset.originalContent;
|
|
delete el.dataset.originalContent;
|
|
};
|
|
|
|
// ── Empty state helper ────────────────────────────────────────
|
|
window.renderEmptyState = function(opts) {
|
|
opts = opts || {};
|
|
var icon = opts.icon || '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="9" y1="9" x2="15" y2="15"/><line x1="15" y1="9" x2="9" y2="15"/></svg>';
|
|
var title = opts.title || 'Sin datos';
|
|
var subtitle = opts.subtitle || 'No hay información disponible en este momento.';
|
|
var action = opts.action ? '<div class="empty-state__action">' + opts.action + '</div>' : '';
|
|
return '<div class="empty-state">' +
|
|
'<div class="empty-state__icon">' + icon + '</div>' +
|
|
'<div class="empty-state__title">' + title + '</div>' +
|
|
'<div class="empty-state__subtitle">' + subtitle + '</div>' +
|
|
action + '</div>';
|
|
};
|
|
|
|
// ── Cmd+K Global Search ───────────────────────────────────────
|
|
(function() {
|
|
var cmdkOverlay = null, cmdkInput = null, cmdkResults = null, cmdkSelected = -1;
|
|
var cmdkItems = [];
|
|
|
|
function buildCmdK() {
|
|
if (cmdkOverlay) return;
|
|
cmdkOverlay = document.createElement('div');
|
|
cmdkOverlay.className = 'cmdk-overlay';
|
|
cmdkOverlay.innerHTML =
|
|
'<div class="cmdk-modal" role="dialog" aria-label="Búsqueda global">' +
|
|
' <div class="cmdk-input-wrap">' +
|
|
' <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="color:var(--color-text-muted);flex-shrink:0;"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>' +
|
|
' <input type="text" class="cmdk-input" placeholder="Buscar módulos, productos, clientes..." autocomplete="off">' +
|
|
' <span class="cmdk-shortcut">ESC</span>' +
|
|
' </div>' +
|
|
' <div class="cmdk-results"></div>' +
|
|
' <div class="cmdk-footer"><span>↑↓ navegar · ↵ seleccionar</span><span>' + cmdkItems.length + ' resultados</span></div>' +
|
|
'</div>';
|
|
document.body.appendChild(cmdkOverlay);
|
|
cmdkInput = cmdkOverlay.querySelector('.cmdk-input');
|
|
cmdkResults = cmdkOverlay.querySelector('.cmdk-results');
|
|
|
|
cmdkOverlay.addEventListener('click', function(e) { if (e.target === cmdkOverlay) closeCmdK(); });
|
|
cmdkInput.addEventListener('input', function() { filterCmdK(this.value); });
|
|
cmdkInput.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') { closeCmdK(); return; }
|
|
if (e.key === 'ArrowDown') { e.preventDefault(); moveCmdK(1); }
|
|
if (e.key === 'ArrowUp') { e.preventDefault(); moveCmdK(-1); }
|
|
if (e.key === 'Enter') { e.preventDefault(); activateCmdK(); }
|
|
});
|
|
}
|
|
|
|
function openCmdK() {
|
|
buildCmdK();
|
|
cmdkOverlay.classList.add('is-open');
|
|
cmdkInput.value = '';
|
|
cmdkInput.focus();
|
|
filterCmdK('');
|
|
}
|
|
|
|
function closeCmdK() {
|
|
if (cmdkOverlay) cmdkOverlay.classList.remove('is-open');
|
|
}
|
|
|
|
function moveCmdK(dir) {
|
|
var items = cmdkResults.querySelectorAll('.cmdk-item');
|
|
if (!items.length) return;
|
|
cmdkSelected += dir;
|
|
if (cmdkSelected < 0) cmdkSelected = items.length - 1;
|
|
if (cmdkSelected >= items.length) cmdkSelected = 0;
|
|
items.forEach(function(it, i) { it.classList.toggle('is-selected', i === cmdkSelected); });
|
|
var sel = items[cmdkSelected];
|
|
if (sel) sel.scrollIntoView({ block: 'nearest' });
|
|
}
|
|
|
|
function activateCmdK() {
|
|
var items = cmdkResults.querySelectorAll('.cmdk-item');
|
|
var sel = items[cmdkSelected];
|
|
if (sel && sel.dataset.href) { closeCmdK(); window.location.href = sel.dataset.href; }
|
|
}
|
|
|
|
function filterCmdK(q) {
|
|
q = (q || '').toLowerCase().trim();
|
|
var groups = {};
|
|
cmdkItems.forEach(function(item) {
|
|
if (!q || item.label.toLowerCase().indexOf(q) !== -1 || (item.keywords || '').toLowerCase().indexOf(q) !== -1) {
|
|
groups[item.group] = groups[item.group] || [];
|
|
groups[item.group].push(item);
|
|
}
|
|
});
|
|
var html = '';
|
|
var total = 0;
|
|
Object.keys(groups).forEach(function(g) {
|
|
html += '<div class="cmdk-group"><div class="cmdk-group__label">' + g + '</div>';
|
|
groups[g].forEach(function(item) {
|
|
total++;
|
|
html += '<div class="cmdk-item" data-href="' + (item.href || '') + '">' +
|
|
'<div class="cmdk-item__icon">' + (item.icon || '→') + '</div>' +
|
|
'<div>' + item.label + '</div>' +
|
|
(item.meta ? '<div class="cmdk-item__meta">' + item.meta + '</div>' : '') +
|
|
'</div>';
|
|
});
|
|
html += '</div>';
|
|
});
|
|
if (!total) html = '<div style="padding:24px;text-align:center;color:var(--color-text-muted);">Sin resultados</div>';
|
|
cmdkResults.innerHTML = html;
|
|
cmdkSelected = 0;
|
|
var first = cmdkResults.querySelector('.cmdk-item');
|
|
if (first) first.classList.add('is-selected');
|
|
var footer = cmdkOverlay.querySelector('.cmdk-footer span:last-child');
|
|
if (footer) footer.textContent = total + ' resultados';
|
|
}
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); openCmdK(); }
|
|
});
|
|
|
|
window.registerCmdKItem = function(item) {
|
|
if (!item || !item.label) return;
|
|
cmdkItems.push(item);
|
|
};
|
|
|
|
window.openCmdK = openCmdK;
|
|
window.closeCmdK = closeCmdK;
|
|
})();
|
|
|
|
// ── Connection indicator helper ───────────────────────────────
|
|
window.ConnectionStatus = {
|
|
online: function() { return navigator.onLine; },
|
|
render: function(containerId) {
|
|
var el = document.getElementById(containerId);
|
|
if (!el) return;
|
|
function update() {
|
|
var isOnline = navigator.onLine;
|
|
el.className = 'connection-indicator' + (isOnline ? '' : ' connection-indicator--offline');
|
|
el.innerHTML = '<span></span>' + (isOnline ? 'En línea' : 'Sin conexión');
|
|
}
|
|
update();
|
|
window.addEventListener('online', update);
|
|
window.addEventListener('offline', update);
|
|
}
|
|
};
|
|
|
|
// ── Bulk toolbar helper ───────────────────────────────────────
|
|
window.renderBulkToolbar = function(count, actionsHtml) {
|
|
return '<div class="bulk-toolbar">' +
|
|
'<div class="bulk-toolbar__count">' + count + ' seleccionado' + (count !== 1 ? 's' : '') + '</div>' +
|
|
'<div class="bulk-toolbar__actions">' + actionsHtml + '</div>' +
|
|
'</div>';
|
|
};
|
|
|
|
// ── Entrance animation helper ─────────────────────────────────
|
|
window.animateEntrance = function(selector, animClass, stagger) {
|
|
animClass = animClass || 'animate-fade-in-up';
|
|
stagger = stagger || 0.05;
|
|
var els = document.querySelectorAll(selector);
|
|
els.forEach(function(el, i) {
|
|
el.style.animationDelay = (i * stagger) + 's';
|
|
el.classList.add(animClass);
|
|
});
|
|
};
|
|
|
|
// ── "Próximamente" placeholder for features not yet built ──────
|
|
window.featureProximamente = function(nombre) {
|
|
showToast((nombre || 'Esta función') + ' estará disponible próximamente.', 'info');
|
|
};
|
|
|
|
// ── Table Filter Panel ────────────────────────────────────────
|
|
// Creates a dropdown filter panel that filters visible table rows
|
|
// client-side. Call toggleFilterPanel(buttonEl, config) where config
|
|
// is an array of {label, column, values} describing each filter.
|
|
//
|
|
// Usage (from onclick):
|
|
// toggleFilterPanel(this, [
|
|
// {label: 'Marca', column: 2, values: ['BOSCH','MONROE','Todas']},
|
|
// {label: 'Status', column: 4, values: ['Activo','Inactivo','Todos']},
|
|
// ])
|
|
|
|
var _activeFilterPanel = null;
|
|
|
|
window.toggleFilterPanel = function(btnEl, filters) {
|
|
// Close existing panel if open
|
|
if (_activeFilterPanel) {
|
|
_activeFilterPanel.remove();
|
|
_activeFilterPanel = null;
|
|
return;
|
|
}
|
|
|
|
var panel = document.createElement('div');
|
|
panel.className = 'filter-panel';
|
|
panel.style.cssText = 'position:absolute;top:100%;right:0;z-index:1000;' +
|
|
'background:var(--glass-bg-strong,#1a1a1a);backdrop-filter:blur(16px);' +
|
|
'border:1px solid var(--glass-border,#333);border-radius:var(--radius-lg,12px);' +
|
|
'padding:16px;min-width:260px;box-shadow:0 8px 32px rgba(0,0,0,0.3);' +
|
|
'display:flex;flex-direction:column;gap:12px;';
|
|
|
|
var title = document.createElement('div');
|
|
title.style.cssText = 'font-weight:700;font-size:14px;display:flex;justify-content:space-between;align-items:center;';
|
|
title.innerHTML = 'Filtros <button onclick="closeFilterPanel()" style="background:none;border:none;color:var(--color-text-muted);cursor:pointer;font-size:18px;">✕</button>';
|
|
panel.appendChild(title);
|
|
|
|
filters.forEach(function(f) {
|
|
var group = document.createElement('div');
|
|
var label = document.createElement('label');
|
|
label.style.cssText = 'display:block;font-size:12px;color:var(--color-text-muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.05em;';
|
|
label.textContent = f.label;
|
|
group.appendChild(label);
|
|
|
|
var select = document.createElement('select');
|
|
select.style.cssText = 'width:100%;padding:8px 10px;background:var(--glass-bg,#222);' +
|
|
'border:1px solid var(--glass-border,#444);border-radius:6px;' +
|
|
'color:var(--color-text-primary,#fff);font-size:13px;';
|
|
select.dataset.filterColumn = f.column;
|
|
|
|
// "Todos" option always first
|
|
var allOpt = document.createElement('option');
|
|
allOpt.value = '';
|
|
allOpt.textContent = f.allLabel || 'Todos';
|
|
select.appendChild(allOpt);
|
|
|
|
(f.values || []).forEach(function(v) {
|
|
if (!v) return;
|
|
var opt = document.createElement('option');
|
|
opt.value = v;
|
|
opt.textContent = v;
|
|
select.appendChild(opt);
|
|
});
|
|
|
|
select.addEventListener('change', function() { applyFilters(panel); });
|
|
group.appendChild(select);
|
|
panel.appendChild(group);
|
|
});
|
|
|
|
// Clear all button
|
|
var clearBtn = document.createElement('button');
|
|
clearBtn.style.cssText = 'padding:8px;background:transparent;border:1px dashed var(--glass-border,#444);' +
|
|
'border-radius:6px;color:var(--color-text-muted);cursor:pointer;font-size:12px;';
|
|
clearBtn.textContent = 'Limpiar filtros';
|
|
clearBtn.addEventListener('click', function() {
|
|
panel.querySelectorAll('select').forEach(function(s) { s.value = ''; });
|
|
applyFilters(panel);
|
|
});
|
|
panel.appendChild(clearBtn);
|
|
|
|
// Position relative to the button
|
|
var wrapper = btnEl.parentElement;
|
|
if (wrapper) wrapper.style.position = 'relative';
|
|
(wrapper || document.body).appendChild(panel);
|
|
_activeFilterPanel = panel;
|
|
|
|
// Close on outside click
|
|
setTimeout(function() {
|
|
document.addEventListener('click', function handler(e) {
|
|
if (!panel.contains(e.target) && e.target !== btnEl) {
|
|
closeFilterPanel();
|
|
document.removeEventListener('click', handler);
|
|
}
|
|
});
|
|
}, 100);
|
|
};
|
|
|
|
window.closeFilterPanel = function() {
|
|
if (_activeFilterPanel) {
|
|
_activeFilterPanel.remove();
|
|
_activeFilterPanel = null;
|
|
}
|
|
};
|
|
|
|
function applyFilters(panel) {
|
|
var selects = panel.querySelectorAll('select[data-filter-column]');
|
|
// Find the nearest visible table
|
|
var tables = document.querySelectorAll('table');
|
|
var table = null;
|
|
for (var i = 0; i < tables.length; i++) {
|
|
if (tables[i].offsetParent !== null) { table = tables[i]; break; }
|
|
}
|
|
if (!table) return;
|
|
|
|
var rows = table.querySelectorAll('tbody tr');
|
|
rows.forEach(function(tr) {
|
|
var show = true;
|
|
selects.forEach(function(sel) {
|
|
var col = parseInt(sel.dataset.filterColumn);
|
|
var val = sel.value.toLowerCase();
|
|
if (!val) return; // "Todos" — no filter
|
|
var cells = tr.querySelectorAll('td');
|
|
if (cells[col]) {
|
|
var cellText = cells[col].textContent.trim().toLowerCase();
|
|
if (cellText.indexOf(val.toLowerCase()) === -1) show = false;
|
|
}
|
|
});
|
|
tr.style.display = show ? '' : 'none';
|
|
});
|
|
|
|
// Update count badge if exists
|
|
var visibleCount = 0;
|
|
rows.forEach(function(tr) { if (tr.style.display !== 'none') visibleCount++; });
|
|
var badge = document.querySelector('.filter-count-badge');
|
|
if (badge) badge.textContent = visibleCount + ' resultados';
|
|
}
|
|
|
|
// ── Auto-extract unique values from a table column ──────────
|
|
// Useful for building filter options dynamically from data.
|
|
window.getUniqueColumnValues = function(tableEl, colIndex, maxValues) {
|
|
maxValues = maxValues || 30;
|
|
var values = {};
|
|
if (!tableEl) return [];
|
|
tableEl.querySelectorAll('tbody tr').forEach(function(tr) {
|
|
var cells = tr.querySelectorAll('td');
|
|
if (cells[colIndex]) {
|
|
var v = cells[colIndex].textContent.trim();
|
|
if (v && v !== '-' && v !== '') values[v] = (values[v] || 0) + 1;
|
|
}
|
|
});
|
|
// Sort by frequency (most common first)
|
|
return Object.keys(values)
|
|
.sort(function(a, b) { return values[b] - values[a]; })
|
|
.slice(0, maxValues);
|
|
};
|
|
|
|
// ── Auto-print polling for WhatsApp quotations ───────────────
|
|
// Polls /quotations/print-queue every 15s. When a confirmed WA quote
|
|
// is found, it fetches the ESC/POS bytes and sends to the connected
|
|
// thermal printer. Falls back to browser print if no thermal is connected.
|
|
|
|
var _autoPrintTimer = null;
|
|
var _autoPrintEnabled = false;
|
|
|
|
window.startAutoPrint = function() {
|
|
if (_autoPrintTimer) return;
|
|
_autoPrintEnabled = true;
|
|
var token = localStorage.getItem('pos_token');
|
|
if (!token) return;
|
|
|
|
_autoPrintTimer = setInterval(function() {
|
|
fetch('/pos/api/quotations/print-queue', {
|
|
headers: { 'Authorization': 'Bearer ' + token }
|
|
})
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(d) {
|
|
if (!d.data || !d.data.length) return;
|
|
d.data.forEach(function(q) {
|
|
console.log('[auto-print] Cotización #' + q.id + ' confirmada por WhatsApp — imprimiendo...');
|
|
showToast('🖨️ Imprimiendo cotización #' + q.id + ' (WhatsApp)', 'ok');
|
|
autoPrintQuote(q.id, token);
|
|
});
|
|
})
|
|
.catch(function() {}); // silent on errors
|
|
}, 15000); // every 15 seconds
|
|
|
|
console.log('[auto-print] Enabled — polling every 15s');
|
|
};
|
|
|
|
window.stopAutoPrint = function() {
|
|
if (_autoPrintTimer) {
|
|
clearInterval(_autoPrintTimer);
|
|
_autoPrintTimer = null;
|
|
}
|
|
_autoPrintEnabled = false;
|
|
};
|
|
|
|
function autoPrintQuote(quoteId, token) {
|
|
// Try thermal printer first (via NexusPrinter if loaded)
|
|
if (typeof NexusPrinter !== 'undefined' && NexusPrinter.isConnected && NexusPrinter.isConnected()) {
|
|
fetch('/pos/api/quotations/' + quoteId + '/print', {
|
|
method: 'POST',
|
|
headers: { 'Authorization': 'Bearer ' + token, 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ printer_type: 'escpos_raw', width: 80 }),
|
|
})
|
|
.then(function(r) { return r.arrayBuffer(); })
|
|
.then(function(buf) {
|
|
NexusPrinter.sendRaw(new Uint8Array(buf));
|
|
markPrinted(quoteId, token);
|
|
})
|
|
.catch(function(e) {
|
|
console.error('[auto-print] Thermal print failed:', e);
|
|
browserPrintQuote(quoteId, token);
|
|
});
|
|
} else {
|
|
browserPrintQuote(quoteId, token);
|
|
}
|
|
}
|
|
|
|
function browserPrintQuote(quoteId, token) {
|
|
// Fallback: open a print-friendly window
|
|
fetch('/pos/api/quotations/' + quoteId + '/print', {
|
|
method: 'POST',
|
|
headers: { 'Authorization': 'Bearer ' + token, 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ printer_type: 'browser' }),
|
|
})
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(q) {
|
|
var html = '<html><head><title>Cotización #' + q.id + '</title>';
|
|
html += '<style>body{font-family:monospace;font-size:12px;width:80mm;margin:0 auto;padding:10px;}';
|
|
html += 'h1{font-size:18px;text-align:center;margin:0;}';
|
|
html += '.center{text-align:center;}.right{text-align:right;}';
|
|
html += 'hr{border:none;border-top:1px dashed #000;}';
|
|
html += 'table{width:100%;border-collapse:collapse;}td{padding:2px 4px;}</style></head><body>';
|
|
html += '<h1>COTIZACIÓN</h1>';
|
|
html += '<p class="center">COT-' + q.id + '</p>';
|
|
html += '<p>Fecha: ' + (q.created_at || '').substring(0, 10) + '</p>';
|
|
if (q.customer_name) html += '<p>Cliente: ' + q.customer_name + '</p>';
|
|
if (q.wa_phone) html += '<p>WhatsApp: ' + q.wa_phone + '</p>';
|
|
html += '<hr><table>';
|
|
(q.items || []).forEach(function(it) {
|
|
html += '<tr><td>' + it.quantity + 'x ' + it.name + '</td><td class="right">$' + it.subtotal.toFixed(2) + '</td></tr>';
|
|
if (it.part_number) html += '<tr><td colspan="2" style="font-size:10px;color:#666;"> #' + it.part_number + '</td></tr>';
|
|
});
|
|
html += '</table><hr>';
|
|
html += '<p class="right">Subtotal: $' + q.subtotal.toFixed(2) + '</p>';
|
|
html += '<p class="right">IVA: $' + q.tax_total.toFixed(2) + '</p>';
|
|
html += '<p class="right" style="font-size:16px;font-weight:bold;">TOTAL: $' + q.total.toFixed(2) + '</p>';
|
|
html += '<hr><p class="center" style="font-size:10px;">Esta cotización no es comprobante fiscal<br>Precios sujetos a disponibilidad</p>';
|
|
html += '</body></html>';
|
|
|
|
var w = window.open('', '_blank', 'width=400,height=600');
|
|
w.document.write(html);
|
|
w.document.close();
|
|
setTimeout(function() { w.print(); }, 500);
|
|
markPrinted(quoteId, token);
|
|
})
|
|
.catch(function(e) {
|
|
console.error('[auto-print] Browser print failed:', e);
|
|
});
|
|
}
|
|
|
|
function markPrinted(quoteId, token) {
|
|
fetch('/pos/api/quotations/' + quoteId + '/mark-printed', {
|
|
method: 'POST',
|
|
headers: { 'Authorization': 'Bearer ' + token },
|
|
}).catch(function() {});
|
|
}
|
|
|
|
// Auto-start polling on pages that are likely to have a printer
|
|
// (POS sale page and quotations page)
|
|
if (window.location.pathname.indexOf('/pos/sale') !== -1 ||
|
|
window.location.pathname.indexOf('/pos/quotation') !== -1 ||
|
|
window.location.pathname.indexOf('/pos/dashboard') !== -1) {
|
|
var _initToken = localStorage.getItem('pos_token');
|
|
if (_initToken) {
|
|
setTimeout(function() { startAutoPrint(); }, 3000);
|
|
}
|
|
}
|
|
|
|
// ── Barcode Scanner Feedback ──────────────────────────────────
|
|
window.BarcodeFeedback = {
|
|
_audioCtx: null,
|
|
success: function() {
|
|
this._beep(800, 0.1, 'sine');
|
|
this._flash('#22c55e');
|
|
if (navigator.vibrate) navigator.vibrate(50);
|
|
},
|
|
error: function() {
|
|
this._beep(200, 0.15, 'square');
|
|
this._flash('#ef4444');
|
|
if (navigator.vibrate) navigator.vibrate([80, 50, 80]);
|
|
},
|
|
_beep: function(freq, duration, type) {
|
|
try {
|
|
if (!this._audioCtx) this._audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
|
var osc = this._audioCtx.createOscillator();
|
|
var gain = this._audioCtx.createGain();
|
|
osc.type = type || 'sine';
|
|
osc.frequency.value = freq;
|
|
gain.gain.value = 0.1;
|
|
osc.connect(gain);
|
|
gain.connect(this._audioCtx.destination);
|
|
osc.start();
|
|
osc.stop(this._audioCtx.currentTime + duration);
|
|
} catch(e) {}
|
|
},
|
|
_flash: function(color) {
|
|
var el = document.createElement('div');
|
|
el.style.cssText = 'position:fixed;inset:0;z-index:99999;opacity:0.3;background:' + color + ';pointer-events:none;transition:opacity 0.2s;';
|
|
document.body.appendChild(el);
|
|
setTimeout(function() { el.style.opacity = '0'; }, 50);
|
|
setTimeout(function() { el.remove(); }, 300);
|
|
}
|
|
};
|
|
|
|
// ── Saved Filters ─────────────────────────────────────────────
|
|
window.SavedFilters = {
|
|
_key: function(page) { return 'pos_filters_' + (page || window.location.pathname); },
|
|
save: function(name, filters) {
|
|
var key = this._key();
|
|
var saved = this.list();
|
|
saved.push({ name: name, filters: filters, created: Date.now() });
|
|
localStorage.setItem(key, JSON.stringify(saved));
|
|
},
|
|
list: function() {
|
|
try { return JSON.parse(localStorage.getItem(this._key()) || '[]'); } catch(e) { return []; }
|
|
},
|
|
remove: function(name) {
|
|
var saved = this.list().filter(function(f) { return f.name !== name; });
|
|
localStorage.setItem(this._key(), JSON.stringify(saved));
|
|
},
|
|
renderChips: function(containerId, onApply) {
|
|
var container = document.getElementById(containerId);
|
|
if (!container) return;
|
|
var saved = this.list();
|
|
if (!saved.length) { container.innerHTML = ''; return; }
|
|
var html = '';
|
|
saved.forEach(function(f) {
|
|
html += '<span class="filter-chip">' + esc(f.name) +
|
|
'<button class="filter-chip__remove" onclick="SavedFilters.remove(\'' + esc(f.name) + '\');SavedFilters.renderChips(\'' + containerId + '\');">×</button></span>';
|
|
});
|
|
container.innerHTML = html;
|
|
container.querySelectorAll('.filter-chip').forEach(function(chip, i) {
|
|
chip.addEventListener('click', function(e) {
|
|
if (e.target.classList.contains('filter-chip__remove')) return;
|
|
if (onApply) onApply(saved[i].filters);
|
|
});
|
|
});
|
|
}
|
|
};
|
|
|
|
// ── Resizable Columns ─────────────────────────────────────────
|
|
window.makeTableResizable = function(tableSelector) {
|
|
var table = document.querySelector(tableSelector);
|
|
if (!table) return;
|
|
var ths = table.querySelectorAll('thead th');
|
|
ths.forEach(function(th, i) {
|
|
if (i >= ths.length - 1) return; // skip last column
|
|
var handle = document.createElement('div');
|
|
handle.className = 'resize-handle';
|
|
th.appendChild(handle);
|
|
|
|
handle.addEventListener('mousedown', function(e) {
|
|
e.preventDefault();
|
|
var startX = e.pageX;
|
|
var startW = th.offsetWidth;
|
|
th.classList.add('is-resizing');
|
|
|
|
function onMove(ev) {
|
|
var newW = Math.max(60, startW + (ev.pageX - startX));
|
|
th.style.width = newW + 'px';
|
|
th.style.minWidth = newW + 'px';
|
|
}
|
|
function onUp() {
|
|
th.classList.remove('is-resizing');
|
|
document.removeEventListener('mousemove', onMove);
|
|
document.removeEventListener('mouseup', onUp);
|
|
}
|
|
document.addEventListener('mousemove', onMove);
|
|
document.addEventListener('mouseup', onUp);
|
|
});
|
|
});
|
|
};
|
|
|
|
// ── Density / Touch Mode Toggles ──────────────────────────────
|
|
window.DensityToggle = {
|
|
set: function(density) {
|
|
document.documentElement.setAttribute('data-density', density);
|
|
localStorage.setItem('pos_density', density);
|
|
},
|
|
init: function() {
|
|
var saved = localStorage.getItem('pos_density') || 'normal';
|
|
document.documentElement.setAttribute('data-density', saved);
|
|
}
|
|
};
|
|
window.TouchModeToggle = {
|
|
set: function(enabled) {
|
|
document.documentElement.setAttribute('data-touch', enabled ? 'true' : 'false');
|
|
localStorage.setItem('pos_touch_mode', enabled ? 'true' : 'false');
|
|
},
|
|
init: function() {
|
|
var saved = localStorage.getItem('pos_touch_mode') === 'true';
|
|
document.documentElement.setAttribute('data-touch', saved ? 'true' : 'false');
|
|
}
|
|
};
|
|
DensityToggle.init();
|
|
TouchModeToggle.init();
|
|
|
|
// ── Notifications Dropdown (functional) ───────────────────────
|
|
window.NotificationsDropdown = {
|
|
_visible: false,
|
|
_el: null,
|
|
toggle: function() {
|
|
if (this._visible) { this.hide(); return; }
|
|
this.show();
|
|
},
|
|
show: function() {
|
|
if (this._el) this._el.remove();
|
|
var btn = document.getElementById('notifDropdownBtn');
|
|
var el = document.createElement('div');
|
|
el.className = 'notif-dropdown';
|
|
el.innerHTML = '<div class="notif-dropdown__header">Notificaciones <button onclick="NotificationsDropdown.hide()" style="background:none;border:none;color:var(--color-text-muted);cursor:pointer;font-size:16px;">✕</button></div>' +
|
|
'<div class="notif-dropdown__list" id="notifDropdownList"><div class="notif-dropdown__empty">Sin notificaciones nuevas</div></div>';
|
|
if (btn) {
|
|
btn.parentElement.style.position = 'relative';
|
|
btn.parentElement.appendChild(el);
|
|
} else {
|
|
document.body.appendChild(el);
|
|
}
|
|
this._el = el;
|
|
this._visible = true;
|
|
this._load();
|
|
setTimeout(function() {
|
|
document.addEventListener('click', function handler(e) {
|
|
if (!el.contains(e.target) && e.target !== btn) {
|
|
NotificationsDropdown.hide();
|
|
document.removeEventListener('click', handler);
|
|
}
|
|
});
|
|
}, 100);
|
|
},
|
|
hide: function() { if (this._el) { this._el.remove(); this._el = null; } this._visible = false; },
|
|
_load: function() {
|
|
// Stub: can be wired to /api/notifications endpoint
|
|
var list = document.getElementById('notifDropdownList');
|
|
if (!list) return;
|
|
// Example: show inventory alerts count if available
|
|
var token = localStorage.getItem('pos_token');
|
|
if (!token) return;
|
|
fetch('/pos/api/inventory/alerts', { headers: { 'Authorization': 'Bearer ' + token } })
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(d) {
|
|
var count = (d.counts || {}).critical || 0;
|
|
if (count > 0) {
|
|
list.innerHTML = '<div class="notif-dropdown__item notif-dropdown__item--unread" onclick="window.location.href=\'/pos/inventory#alertas\'">' +
|
|
'<div class="notif-dropdown__icon">⚠️</div>' +
|
|
'<div class="notif-dropdown__content"><div class="notif-dropdown__title">' + count + ' producto' + (count > 1 ? 's' : '') + ' sin stock</div>' +
|
|
'<div class="notif-dropdown__time">Stock crítico</div></div></div>';
|
|
}
|
|
}).catch(function() {});
|
|
}
|
|
};
|
|
|
|
// ── Ticket Preview Helper ─────────────────────────────────────
|
|
window.previewTicket = function(ticketData) {
|
|
var data = ticketData || {};
|
|
var items = (data.items || []).map(function(it) {
|
|
return '<div class="ticket-preview__row"><span>' + (it.quantity || 1) + 'x ' + esc(it.name) + '</span><span>$' + (it.subtotal || 0).toFixed(2) + '</span></div>';
|
|
}).join('');
|
|
var html = '<div class="ticket-preview">' +
|
|
'<div class="ticket-preview__header"><div class="ticket-preview__title">Nexus Autoparts</div><div class="ticket-preview__meta">' + (data.store || 'Sucursal Centro') + '</div></div>' +
|
|
'<div class="ticket-preview__meta" style="text-align:center;margin-bottom:8px;">' + new Date().toLocaleString('es-MX') + '</div>' +
|
|
'<div class="ticket-preview__row"><span>Ticket #' + (data.id || '---') + '</span></div>' +
|
|
'<hr style="border:none;border-top:1px dashed #ccc;margin:8px 0;">' +
|
|
items +
|
|
'<hr style="border:none;border-top:1px dashed #ccc;margin:8px 0;">' +
|
|
'<div class="ticket-preview__row"><span>Subtotal</span><span>$' + (data.subtotal || 0).toFixed(2) + '</span></div>' +
|
|
'<div class="ticket-preview__row"><span>IVA</span><span>$' + (data.tax || 0).toFixed(2) + '</span></div>' +
|
|
'<div class="ticket-preview__total"><span>TOTAL</span><span>$' + (data.total || 0).toFixed(2) + '</span></div>' +
|
|
'<div style="text-align:center;font-size:10px;color:#666;margin-top:12px;">Gracias por su compra</div>' +
|
|
'</div>';
|
|
return html;
|
|
};
|
|
|
|
// ── Image Comparator Helper ───────────────────────────────────
|
|
window.initImageComparator = function(containerSelector) {
|
|
var container = document.querySelector(containerSelector);
|
|
if (!container) return;
|
|
var overlay = container.querySelector('.img-compare__overlay');
|
|
var handle = container.querySelector('.img-compare__handle');
|
|
if (!overlay || !handle) return;
|
|
|
|
function move(x) {
|
|
var rect = container.getBoundingClientRect();
|
|
var pct = Math.max(0, Math.min(100, ((x - rect.left) / rect.width) * 100));
|
|
overlay.style.width = pct + '%';
|
|
handle.style.left = pct + '%';
|
|
}
|
|
handle.addEventListener('mousedown', function(e) {
|
|
e.preventDefault();
|
|
function onMove(ev) { move(ev.pageX); }
|
|
function onUp() { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); }
|
|
document.addEventListener('mousemove', onMove);
|
|
document.addEventListener('mouseup', onUp);
|
|
});
|
|
handle.addEventListener('touchstart', function(e) {
|
|
function onMove(ev) { move(ev.touches[0].pageX); }
|
|
function onUp() { document.removeEventListener('touchmove', onMove); document.removeEventListener('touchend', onUp); }
|
|
document.addEventListener('touchmove', onMove);
|
|
document.addEventListener('touchend', onUp);
|
|
});
|
|
};
|
|
|
|
// ── Infinite Scroll Helper ────────────────────────────────────
|
|
window.InfiniteScroll = function(opts) {
|
|
opts = opts || {};
|
|
var container = opts.container || window;
|
|
var threshold = opts.threshold || 200;
|
|
var loading = false;
|
|
var observer = new IntersectionObserver(function(entries) {
|
|
if (entries[0].isIntersecting && !loading && opts.onLoad) {
|
|
loading = true;
|
|
opts.onLoad(function() { loading = false; });
|
|
}
|
|
}, { root: container === window ? null : container, rootMargin: threshold + 'px' });
|
|
var sentinel = document.createElement('div');
|
|
sentinel.style.cssText = 'height:1px;';
|
|
(opts.sentinelParent || document.body).appendChild(sentinel);
|
|
observer.observe(sentinel);
|
|
return { disconnect: function() { observer.disconnect(); sentinel.remove(); } };
|
|
};
|
|
|
|
// ── Sparkline Renderer ────────────────────────────────────────
|
|
window.renderSparkline = function(containerSelector, values, opts) {
|
|
opts = opts || {};
|
|
var container = typeof containerSelector === 'string' ? document.querySelector(containerSelector) : containerSelector;
|
|
if (!container || !values || !values.length) return;
|
|
var max = Math.max.apply(null, values) || 1;
|
|
var min = Math.min.apply(null, values);
|
|
var range = max - min || 1;
|
|
var cls = opts.trend === 'up' ? 'sparkline--up' : (opts.trend === 'down' ? 'sparkline--down' : '');
|
|
var html = '<div class="sparkline ' + cls + '">';
|
|
values.forEach(function(v) {
|
|
var h = Math.max(4, Math.round(((v - min) / range) * 100));
|
|
html += '<div class="sparkline__bar" style="height:' + h + '%" title="' + (opts.prefix || '') + v + '"></div>';
|
|
});
|
|
html += '</div>';
|
|
container.innerHTML = html;
|
|
};
|
|
|
|
})();
|