feat(dashboard): redesign UI with smart polling, unified sync card, filter bar
Replace SSE with smart polling (30s idle / 3s when running). Unify sync panel into single two-row card with live progress text. Add unified filter bar (period dropdown, status pills, search) with period-total counts. Add Client/Cont tooltip for different shipping/billing persons. Add SKU mappings pct_total badges + complete/incomplete filter + 409 duplicate check. Add missing SKUs search + rescan progress UX. Migrate SQLite orders schema (shipping_name, billing_name, payment_method, delivery_method). Fix JSON_OUTPUT_DIR path for server running from project root. Fix pagination controls showing top+bottom with per-page selector (25/50/100/250). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,138 +1,215 @@
|
||||
let refreshInterval = null;
|
||||
// ── State ─────────────────────────────────────────
|
||||
let dashPage = 1;
|
||||
let dashFilter = 'all';
|
||||
let dashSearch = '';
|
||||
let dashPerPage = 50;
|
||||
let dashSortCol = 'order_date';
|
||||
let dashSortDir = 'desc';
|
||||
let dashSearchTimeout = null;
|
||||
let dashPeriodDays = 7;
|
||||
let currentQmSku = '';
|
||||
let currentQmOrderNumber = '';
|
||||
let qmAcTimeout = null;
|
||||
let syncEventSource = null;
|
||||
|
||||
// Sync polling state
|
||||
let _pollInterval = null;
|
||||
let _lastSyncStatus = null;
|
||||
let _lastRunId = null;
|
||||
|
||||
// ── Init ──────────────────────────────────────────
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadSchedulerStatus();
|
||||
loadSyncStatus();
|
||||
loadLastSync();
|
||||
loadDashOrders();
|
||||
refreshInterval = setInterval(() => {
|
||||
loadSyncStatus();
|
||||
}, 10000);
|
||||
startSyncPolling();
|
||||
wireFilterBar();
|
||||
});
|
||||
|
||||
// ── Sync Status ──────────────────────────────────
|
||||
// ── Smart Sync Polling ────────────────────────────
|
||||
|
||||
async function loadSyncStatus() {
|
||||
function startSyncPolling() {
|
||||
if (_pollInterval) clearInterval(_pollInterval);
|
||||
_pollInterval = setInterval(pollSyncStatus, 30000);
|
||||
pollSyncStatus(); // immediate first call
|
||||
}
|
||||
|
||||
async function pollSyncStatus() {
|
||||
try {
|
||||
const res = await fetch('/api/sync/status');
|
||||
const data = await res.json();
|
||||
|
||||
const badge = document.getElementById('syncStatusBadge');
|
||||
const status = data.status || 'idle';
|
||||
badge.textContent = status;
|
||||
badge.className = 'badge ' + (status === 'running' ? 'bg-primary' : status === 'failed' ? 'bg-danger' : 'bg-secondary');
|
||||
|
||||
if (status === 'running') {
|
||||
document.getElementById('btnStartSync').classList.add('d-none');
|
||||
document.getElementById('btnStopSync').classList.remove('d-none');
|
||||
document.getElementById('syncProgressText').textContent = data.progress || 'Running...';
|
||||
} else {
|
||||
document.getElementById('btnStartSync').classList.remove('d-none');
|
||||
document.getElementById('btnStopSync').classList.add('d-none');
|
||||
|
||||
const stats = data.stats || {};
|
||||
if (stats.last_run) {
|
||||
const lr = stats.last_run;
|
||||
const started = lr.started_at ? new Date(lr.started_at).toLocaleString('ro-RO') : '';
|
||||
document.getElementById('syncProgressText').textContent =
|
||||
`Ultimul: ${started} | ${lr.imported || 0} ok, ${lr.skipped || 0} nemapate, ${lr.errors || 0} erori`;
|
||||
} else {
|
||||
document.getElementById('syncProgressText').textContent = '';
|
||||
}
|
||||
const data = await fetchJSON('/api/sync/status');
|
||||
updateSyncPanel(data);
|
||||
const isRunning = data.status === 'running';
|
||||
const wasRunning = _lastSyncStatus === 'running';
|
||||
if (isRunning && !wasRunning) {
|
||||
// Switched to running — speed up polling
|
||||
clearInterval(_pollInterval);
|
||||
_pollInterval = setInterval(pollSyncStatus, 3000);
|
||||
} else if (!isRunning && wasRunning) {
|
||||
// Sync just completed — slow down and refresh orders
|
||||
clearInterval(_pollInterval);
|
||||
_pollInterval = setInterval(pollSyncStatus, 30000);
|
||||
loadDashOrders();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('loadSyncStatus error:', err);
|
||||
_lastSyncStatus = data.status;
|
||||
} catch (e) {
|
||||
console.warn('Sync status poll failed:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Last Sync Summary Card ───────────────────────
|
||||
function updateSyncPanel(data) {
|
||||
const dot = document.getElementById('syncStatusDot');
|
||||
const txt = document.getElementById('syncStatusText');
|
||||
const progressArea = document.getElementById('syncProgressArea');
|
||||
const progressText = document.getElementById('syncProgressText');
|
||||
const startBtn = document.getElementById('syncStartBtn');
|
||||
|
||||
async function loadLastSync() {
|
||||
if (dot) {
|
||||
dot.className = 'sync-status-dot ' + (data.status || 'idle');
|
||||
}
|
||||
const statusLabels = { running: 'A ruleaza...', idle: 'Inactiv', completed: 'Finalizat', failed: 'Eroare' };
|
||||
if (txt) txt.textContent = statusLabels[data.status] || data.status || 'Inactiv';
|
||||
if (startBtn) startBtn.disabled = data.status === 'running';
|
||||
|
||||
// Live progress area
|
||||
if (progressArea) {
|
||||
progressArea.style.display = data.status === 'running' ? 'flex' : 'none';
|
||||
}
|
||||
if (progressText && data.phase_text) {
|
||||
progressText.textContent = data.phase_text;
|
||||
}
|
||||
|
||||
// Last run info
|
||||
const lr = data.last_run;
|
||||
if (lr) {
|
||||
_lastRunId = lr.run_id;
|
||||
const d = document.getElementById('lastSyncDate');
|
||||
const dur = document.getElementById('lastSyncDuration');
|
||||
const cnt = document.getElementById('lastSyncCounts');
|
||||
const st = document.getElementById('lastSyncStatus');
|
||||
if (d) d.textContent = lr.started_at ? lr.started_at.replace('T', ' ').slice(0, 16) : '\u2014';
|
||||
if (dur) dur.textContent = lr.duration_seconds ? Math.round(lr.duration_seconds) + 's' : '\u2014';
|
||||
if (cnt) cnt.textContent = '\u2191' + (lr.imported || 0) + ' \u2298' + (lr.skipped || 0) + ' \u2715' + (lr.errors || 0);
|
||||
if (st) {
|
||||
st.textContent = lr.status === 'completed' ? '\u2713' : '\u2715';
|
||||
st.style.color = lr.status === 'completed' ? '#10b981' : '#ef4444';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Wire last-sync-row click → journal
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.getElementById('lastSyncRow')?.addEventListener('click', () => {
|
||||
if (_lastRunId) window.location = '/logs?run=' + _lastRunId;
|
||||
});
|
||||
document.getElementById('lastSyncRow')?.addEventListener('keydown', (e) => {
|
||||
if ((e.key === 'Enter' || e.key === ' ') && _lastRunId) {
|
||||
window.location = '/logs?run=' + _lastRunId;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ── Sync Controls ─────────────────────────────────
|
||||
|
||||
async function startSync() {
|
||||
try {
|
||||
const res = await fetch('/api/sync/history?per_page=1');
|
||||
const res = await fetch('/api/sync/start', { method: 'POST' });
|
||||
const data = await res.json();
|
||||
const runs = data.runs || [];
|
||||
|
||||
if (runs.length === 0) {
|
||||
document.getElementById('lastSyncDate').textContent = '-';
|
||||
if (data.error) {
|
||||
alert(data.error);
|
||||
return;
|
||||
}
|
||||
|
||||
const r = runs[0];
|
||||
document.getElementById('lastSyncDate').textContent = r.started_at
|
||||
? new Date(r.started_at).toLocaleString('ro-RO', {day:'2-digit',month:'2-digit',hour:'2-digit',minute:'2-digit'})
|
||||
: '-';
|
||||
|
||||
const statusClass = r.status === 'completed' ? 'bg-success' : r.status === 'running' ? 'bg-primary' : 'bg-danger';
|
||||
document.getElementById('lastSyncStatus').innerHTML = `<span class="badge ${statusClass}">${esc(r.status)}</span>`;
|
||||
document.getElementById('lastSyncImported').textContent = r.imported || 0;
|
||||
document.getElementById('lastSyncSkipped').textContent = r.skipped || 0;
|
||||
document.getElementById('lastSyncErrors').textContent = r.errors || 0;
|
||||
|
||||
if (r.started_at && r.finished_at) {
|
||||
const sec = Math.round((new Date(r.finished_at) - new Date(r.started_at)) / 1000);
|
||||
document.getElementById('lastSyncDuration').textContent = sec < 60 ? `${sec}s` : `${Math.floor(sec/60)}m ${sec%60}s`;
|
||||
} else {
|
||||
document.getElementById('lastSyncDuration').textContent = '-';
|
||||
}
|
||||
// Polling will detect the running state — just speed it up immediately
|
||||
pollSyncStatus();
|
||||
} catch (err) {
|
||||
console.error('loadLastSync error:', err);
|
||||
alert('Eroare: ' + err.message);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Dashboard Orders Table ───────────────────────
|
||||
|
||||
function debounceDashSearch() {
|
||||
clearTimeout(dashSearchTimeout);
|
||||
dashSearchTimeout = setTimeout(() => {
|
||||
dashSearch = document.getElementById('dashSearchInput').value;
|
||||
dashPage = 1;
|
||||
loadDashOrders();
|
||||
}, 300);
|
||||
async function stopSync() {
|
||||
try {
|
||||
await fetch('/api/sync/stop', { method: 'POST' });
|
||||
pollSyncStatus();
|
||||
} catch (err) {
|
||||
alert('Eroare: ' + err.message);
|
||||
}
|
||||
}
|
||||
|
||||
function dashFilterOrders(filter) {
|
||||
dashFilter = filter;
|
||||
dashPage = 1;
|
||||
async function toggleScheduler() {
|
||||
const enabled = document.getElementById('schedulerToggle').checked;
|
||||
const interval = parseInt(document.getElementById('schedulerInterval').value) || 10;
|
||||
try {
|
||||
await fetch('/api/sync/schedule', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ enabled, interval_minutes: interval })
|
||||
});
|
||||
} catch (err) {
|
||||
alert('Eroare scheduler: ' + err.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Update button styles
|
||||
const colorMap = {
|
||||
'all': 'primary',
|
||||
'IMPORTED': 'success',
|
||||
'SKIPPED': 'warning',
|
||||
'ERROR': 'danger',
|
||||
'UNINVOICED': 'info'
|
||||
};
|
||||
document.querySelectorAll('#dashFilterBtns button').forEach(btn => {
|
||||
const text = btn.textContent.trim().split(' ')[0];
|
||||
let btnFilter = 'all';
|
||||
if (text === 'Importate') btnFilter = 'IMPORTED';
|
||||
else if (text === 'Omise') btnFilter = 'SKIPPED';
|
||||
else if (text === 'Erori') btnFilter = 'ERROR';
|
||||
else if (text === 'Nefacturate') btnFilter = 'UNINVOICED';
|
||||
async function updateSchedulerInterval() {
|
||||
const enabled = document.getElementById('schedulerToggle').checked;
|
||||
if (enabled) {
|
||||
await toggleScheduler();
|
||||
}
|
||||
}
|
||||
|
||||
const color = colorMap[btnFilter] || 'primary';
|
||||
if (btnFilter === filter) {
|
||||
btn.className = `btn btn-sm btn-${color}`;
|
||||
async function loadSchedulerStatus() {
|
||||
try {
|
||||
const res = await fetch('/api/sync/schedule');
|
||||
const data = await res.json();
|
||||
document.getElementById('schedulerToggle').checked = data.enabled || false;
|
||||
if (data.interval_minutes) {
|
||||
document.getElementById('schedulerInterval').value = data.interval_minutes;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('loadSchedulerStatus error:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Filter Bar wiring ─────────────────────────────
|
||||
|
||||
function wireFilterBar() {
|
||||
// Period dropdown
|
||||
document.getElementById('periodSelect')?.addEventListener('change', function () {
|
||||
const cr = document.getElementById('customRangeInputs');
|
||||
if (this.value === 'custom') {
|
||||
cr?.classList.add('visible');
|
||||
} else {
|
||||
btn.className = `btn btn-sm btn-outline-${color}`;
|
||||
cr?.classList.remove('visible');
|
||||
dashPage = 1;
|
||||
loadDashOrders();
|
||||
}
|
||||
});
|
||||
|
||||
loadDashOrders();
|
||||
// Custom range inputs
|
||||
['periodStart', 'periodEnd'].forEach(id => {
|
||||
document.getElementById(id)?.addEventListener('change', () => {
|
||||
const s = document.getElementById('periodStart')?.value;
|
||||
const e = document.getElementById('periodEnd')?.value;
|
||||
if (s && e) { dashPage = 1; loadDashOrders(); }
|
||||
});
|
||||
});
|
||||
|
||||
// Status pills
|
||||
document.querySelectorAll('.filter-pill[data-status]').forEach(btn => {
|
||||
btn.addEventListener('click', function () {
|
||||
document.querySelectorAll('.filter-pill[data-status]').forEach(b => b.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
dashPage = 1;
|
||||
loadDashOrders();
|
||||
});
|
||||
});
|
||||
|
||||
// Search — 300ms debounce
|
||||
document.getElementById('orderSearch')?.addEventListener('input', () => {
|
||||
clearTimeout(dashSearchTimeout);
|
||||
dashSearchTimeout = setTimeout(() => {
|
||||
dashPage = 1;
|
||||
loadDashOrders();
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
|
||||
// ── Dashboard Orders Table ────────────────────────
|
||||
|
||||
function dashSortBy(col) {
|
||||
if (dashSortCol === col) {
|
||||
dashSortDir = dashSortDir === 'asc' ? 'desc' : 'asc';
|
||||
@@ -140,8 +217,6 @@ function dashSortBy(col) {
|
||||
dashSortCol = col;
|
||||
dashSortDir = 'asc';
|
||||
}
|
||||
// Update sort icons
|
||||
document.querySelectorAll('#dashOrdersBody').forEach(() => {}); // noop
|
||||
document.querySelectorAll('.sort-icon').forEach(span => {
|
||||
const c = span.dataset.col;
|
||||
span.textContent = c === dashSortCol ? (dashSortDir === 'asc' ? '\u2191' : '\u2193') : '';
|
||||
@@ -150,39 +225,45 @@ function dashSortBy(col) {
|
||||
loadDashOrders();
|
||||
}
|
||||
|
||||
function dashSetPeriod(days) {
|
||||
dashPeriodDays = days;
|
||||
dashPage = 1;
|
||||
document.querySelectorAll('#dashPeriodBtns button').forEach(btn => {
|
||||
const val = parseInt(btn.dataset.days);
|
||||
btn.className = val === days
|
||||
? 'btn btn-sm btn-secondary'
|
||||
: 'btn btn-sm btn-outline-secondary';
|
||||
});
|
||||
loadDashOrders();
|
||||
}
|
||||
|
||||
async function loadDashOrders() {
|
||||
const params = new URLSearchParams({
|
||||
page: dashPage,
|
||||
per_page: 50,
|
||||
search: dashSearch,
|
||||
status: dashFilter,
|
||||
sort_by: dashSortCol,
|
||||
sort_dir: dashSortDir,
|
||||
period_days: dashPeriodDays
|
||||
});
|
||||
const periodVal = document.getElementById('periodSelect')?.value || '7';
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (periodVal === 'custom') {
|
||||
const s = document.getElementById('periodStart')?.value;
|
||||
const e = document.getElementById('periodEnd')?.value;
|
||||
if (s && e) {
|
||||
params.set('period_start', s);
|
||||
params.set('period_end', e);
|
||||
params.set('period_days', '0');
|
||||
}
|
||||
} else {
|
||||
params.set('period_days', periodVal);
|
||||
}
|
||||
|
||||
const activeStatus = document.querySelector('.filter-pill.active')?.dataset.status;
|
||||
if (activeStatus && activeStatus !== 'all') params.set('status', activeStatus);
|
||||
|
||||
const search = document.getElementById('orderSearch')?.value?.trim();
|
||||
if (search) params.set('search', search);
|
||||
|
||||
params.set('page', dashPage);
|
||||
params.set('per_page', dashPerPage);
|
||||
params.set('sort_by', dashSortCol);
|
||||
params.set('sort_dir', dashSortDir);
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/dashboard/orders?${params}`);
|
||||
const data = await res.json();
|
||||
|
||||
const counts = data.counts || {};
|
||||
document.getElementById('dashCountAll').textContent = counts.total || 0;
|
||||
document.getElementById('dashCountImported').textContent = counts.imported || 0;
|
||||
document.getElementById('dashCountSkipped').textContent = counts.skipped || 0;
|
||||
document.getElementById('dashCountError').textContent = counts.error || 0;
|
||||
document.getElementById('dashCountUninvoiced').textContent = counts.uninvoiced || 0;
|
||||
// Update filter-pill badge counts
|
||||
const c = data.counts || {};
|
||||
const el = (id) => document.getElementById(id);
|
||||
if (el('cntAll')) el('cntAll').textContent = c.total || 0;
|
||||
if (el('cntImp')) el('cntImp').textContent = c.imported || 0;
|
||||
if (el('cntSkip')) el('cntSkip').textContent = c.skipped || 0;
|
||||
if (el('cntErr')) el('cntErr').textContent = c.error || c.errors || 0;
|
||||
if (el('cntNef')) el('cntNef').textContent = c.uninvoiced || c.nefacturate || 0;
|
||||
|
||||
const tbody = document.getElementById('dashOrdersBody');
|
||||
const orders = data.orders || [];
|
||||
@@ -212,7 +293,7 @@ async function loadDashOrders() {
|
||||
return `<tr style="cursor:pointer" onclick="openDashOrderDetail('${esc(o.order_number)}')">
|
||||
<td><code>${esc(o.order_number)}</code></td>
|
||||
<td>${dateStr}</td>
|
||||
<td>${esc(o.customer_name)}</td>
|
||||
${renderClientCell(o)}
|
||||
<td>${o.items_count || 0}</td>
|
||||
<td>${statusBadge}</td>
|
||||
<td>${o.id_comanda || '-'}</td>
|
||||
@@ -223,19 +304,23 @@ async function loadDashOrders() {
|
||||
}
|
||||
|
||||
// Pagination
|
||||
const totalPages = data.pages || 1;
|
||||
document.getElementById('dashPageInfo').textContent = `${data.total || 0} comenzi | Pagina ${dashPage} din ${totalPages}`;
|
||||
const pag = data.pagination || {};
|
||||
const totalPages = pag.total_pages || data.pages || 1;
|
||||
const totalOrders = (data.counts || {}).total || data.total || 0;
|
||||
const pageInfo = `${totalOrders} comenzi | Pagina ${dashPage} din ${totalPages}`;
|
||||
document.getElementById('dashPageInfo').textContent = pageInfo;
|
||||
const pagInfoTop = document.getElementById('dashPageInfoTop');
|
||||
if (pagInfoTop) pagInfoTop.textContent = pageInfo;
|
||||
|
||||
const pagHtml = totalPages > 1 ? `
|
||||
<button class="btn btn-sm btn-outline-secondary" ${dashPage <= 1 ? 'disabled' : ''} onclick="dashGoPage(${dashPage - 1})"><i class="bi bi-chevron-left"></i></button>
|
||||
<small class="text-muted">${dashPage} / ${totalPages}</small>
|
||||
<button class="btn btn-sm btn-outline-secondary" ${dashPage >= totalPages ? 'disabled' : ''} onclick="dashGoPage(${dashPage + 1})"><i class="bi bi-chevron-right"></i></button>
|
||||
` : '';
|
||||
const pagDiv = document.getElementById('dashPagination');
|
||||
if (totalPages > 1) {
|
||||
pagDiv.innerHTML = `
|
||||
<button class="btn btn-sm btn-outline-secondary" ${dashPage <= 1 ? 'disabled' : ''} onclick="dashGoPage(${dashPage - 1})"><i class="bi bi-chevron-left"></i></button>
|
||||
<small class="text-muted">${dashPage} / ${totalPages}</small>
|
||||
<button class="btn btn-sm btn-outline-secondary" ${dashPage >= totalPages ? 'disabled' : ''} onclick="dashGoPage(${dashPage + 1})"><i class="bi bi-chevron-right"></i></button>
|
||||
`;
|
||||
} else {
|
||||
pagDiv.innerHTML = '';
|
||||
}
|
||||
if (pagDiv) pagDiv.innerHTML = pagHtml;
|
||||
const pagDivTop = document.getElementById('dashPaginationTop');
|
||||
if (pagDivTop) pagDivTop.innerHTML = pagHtml;
|
||||
|
||||
// Update sort icons
|
||||
document.querySelectorAll('.sort-icon').forEach(span => {
|
||||
@@ -253,7 +338,44 @@ function dashGoPage(p) {
|
||||
loadDashOrders();
|
||||
}
|
||||
|
||||
// ── Helper functions ─────────────────────────────
|
||||
function dashChangePerPage(val) {
|
||||
dashPerPage = parseInt(val) || 50;
|
||||
dashPage = 1;
|
||||
loadDashOrders();
|
||||
}
|
||||
|
||||
// ── Client cell with Cont tooltip (Task F4) ───────
|
||||
|
||||
function renderClientCell(order) {
|
||||
const shipping = (order.shipping_name || order.customer_name || '').trim();
|
||||
const billing = (order.billing_name || '').trim();
|
||||
const isDiff = order.is_different_person && billing && shipping !== billing;
|
||||
if (isDiff) {
|
||||
return `<td class="tooltip-cont" data-tooltip="Cont: ${escHtml(billing)}">${escHtml(shipping)} <sup style="color:#6b7280;font-size:0.65rem">▲</sup></td>`;
|
||||
}
|
||||
return `<td>${escHtml(shipping || billing || '\u2014')}</td>`;
|
||||
}
|
||||
|
||||
// ── Helper functions ──────────────────────────────
|
||||
|
||||
async function fetchJSON(url) {
|
||||
const res = await fetch(url);
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
function escHtml(s) {
|
||||
if (s == null) return '';
|
||||
return String(s)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
// Alias kept for backward compat with inline handlers in modal
|
||||
function esc(s) { return escHtml(s); }
|
||||
|
||||
function fmtDate(dateStr) {
|
||||
if (!dateStr) return '-';
|
||||
@@ -289,7 +411,7 @@ function renderCodmatCell(item) {
|
||||
).join('');
|
||||
}
|
||||
|
||||
// ── Order Detail Modal ───────────────────────────
|
||||
// ── Order Detail Modal ────────────────────────────
|
||||
|
||||
async function openDashOrderDetail(orderNumber) {
|
||||
document.getElementById('detailOrderNumber').textContent = '#' + orderNumber;
|
||||
@@ -367,7 +489,7 @@ async function openDashOrderDetail(orderNumber) {
|
||||
}
|
||||
}
|
||||
|
||||
// ── Quick Map Modal ──────────────────────────────
|
||||
// ── Quick Map Modal ───────────────────────────────
|
||||
|
||||
function openQuickMap(sku, productName, orderNumber) {
|
||||
currentQmSku = sku;
|
||||
@@ -435,7 +557,7 @@ async function qmAutocomplete(input, dropdown, selectedEl) {
|
||||
|
||||
dropdown.innerHTML = data.results.map(r =>
|
||||
`<div class="autocomplete-item" onmousedown="qmSelectArticle(this, '${esc(r.codmat)}', '${esc(r.denumire)}${r.um ? ' (' + esc(r.um) + ')' : ''}')">
|
||||
<span class="codmat">${esc(r.codmat)}</span> — <span class="denumire">${esc(r.denumire)}</span>${r.um ? ` <small class="text-muted">(${esc(r.um)})</small>` : ''}
|
||||
<span class="codmat">${esc(r.codmat)}</span> — <span class="denumire">${esc(r.denumire)}</span>${r.um ? ` <small class="text-muted">(${esc(r.um)})</small>` : ''}
|
||||
</div>`
|
||||
).join('');
|
||||
dropdown.classList.remove('d-none');
|
||||
@@ -500,126 +622,3 @@ async function saveQuickMapping() {
|
||||
alert('Eroare: ' + err.message);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Sync Controls ────────────────────────────────
|
||||
|
||||
async function startSync() {
|
||||
try {
|
||||
const res = await fetch('/api/sync/start', { method: 'POST' });
|
||||
const data = await res.json();
|
||||
if (data.error) {
|
||||
alert(data.error);
|
||||
return;
|
||||
}
|
||||
if (data.run_id) {
|
||||
const banner = document.getElementById('syncStartedBanner');
|
||||
const link = document.getElementById('syncRunLink');
|
||||
if (banner && link) {
|
||||
link.href = '/logs?run=' + encodeURIComponent(data.run_id);
|
||||
banner.classList.remove('d-none');
|
||||
}
|
||||
// Subscribe to SSE for live progress + auto-refresh on completion
|
||||
listenToSyncStream(data.run_id);
|
||||
}
|
||||
loadSyncStatus();
|
||||
} catch (err) {
|
||||
alert('Eroare: ' + err.message);
|
||||
}
|
||||
}
|
||||
|
||||
function listenToSyncStream(runId) {
|
||||
// Close any previous SSE connection
|
||||
if (syncEventSource) { syncEventSource.close(); syncEventSource = null; }
|
||||
|
||||
syncEventSource = new EventSource('/api/sync/stream');
|
||||
|
||||
syncEventSource.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
|
||||
if (data.type === 'phase') {
|
||||
document.getElementById('syncProgressText').textContent = data.message || '';
|
||||
}
|
||||
|
||||
if (data.type === 'order_result') {
|
||||
// Update progress text with current order info
|
||||
const status = data.status === 'IMPORTED' ? 'OK' : data.status === 'SKIPPED' ? 'OMIS' : 'ERR';
|
||||
document.getElementById('syncProgressText').textContent =
|
||||
`[${data.progress || ''}] #${data.order_number} ${data.customer_name || ''} → ${status}`;
|
||||
}
|
||||
|
||||
if (data.type === 'completed' || data.type === 'failed') {
|
||||
syncEventSource.close();
|
||||
syncEventSource = null;
|
||||
// Refresh all dashboard sections
|
||||
loadLastSync();
|
||||
loadDashOrders();
|
||||
loadSyncStatus();
|
||||
// Hide banner after 5s
|
||||
setTimeout(() => {
|
||||
document.getElementById('syncStartedBanner')?.classList.add('d-none');
|
||||
}, 5000);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('SSE parse error:', e);
|
||||
}
|
||||
};
|
||||
|
||||
syncEventSource.onerror = () => {
|
||||
syncEventSource.close();
|
||||
syncEventSource = null;
|
||||
// Refresh anyway — sync may have finished
|
||||
loadLastSync();
|
||||
loadDashOrders();
|
||||
loadSyncStatus();
|
||||
};
|
||||
}
|
||||
|
||||
async function stopSync() {
|
||||
try {
|
||||
await fetch('/api/sync/stop', { method: 'POST' });
|
||||
loadSyncStatus();
|
||||
} catch (err) {
|
||||
alert('Eroare: ' + err.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleScheduler() {
|
||||
const enabled = document.getElementById('schedulerToggle').checked;
|
||||
const interval = parseInt(document.getElementById('schedulerInterval').value) || 5;
|
||||
|
||||
try {
|
||||
await fetch('/api/sync/schedule', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ enabled, interval_minutes: interval })
|
||||
});
|
||||
} catch (err) {
|
||||
alert('Eroare scheduler: ' + err.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function updateSchedulerInterval() {
|
||||
const enabled = document.getElementById('schedulerToggle').checked;
|
||||
if (enabled) {
|
||||
await toggleScheduler();
|
||||
}
|
||||
}
|
||||
|
||||
async function loadSchedulerStatus() {
|
||||
try {
|
||||
const res = await fetch('/api/sync/schedule');
|
||||
const data = await res.json();
|
||||
document.getElementById('schedulerToggle').checked = data.enabled || false;
|
||||
if (data.interval_minutes) {
|
||||
document.getElementById('schedulerInterval').value = data.interval_minutes;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('loadSchedulerStatus error:', err);
|
||||
}
|
||||
}
|
||||
|
||||
function esc(s) {
|
||||
if (s == null) return '';
|
||||
return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user