d3d1905b18
Default to showing problem orders (ERROR/SKIPPED) first. Imported orders collapsed behind "X comenzi importate cu succes" toggle. Reduces noise for operators scanning for issues. Cache-bust: logs.js?v=14, style.css?v=23 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
391 lines
18 KiB
JavaScript
391 lines
18 KiB
JavaScript
// logs.js - Structured order viewer with text log fallback
|
|
|
|
let currentRunId = null;
|
|
let runsPage = 1;
|
|
let logPollTimer = null;
|
|
let currentFilter = 'all';
|
|
let ordersPage = 1;
|
|
let ordersSortColumn = 'order_date';
|
|
let ordersSortDirection = 'desc';
|
|
|
|
function fmtDuration(startedAt, finishedAt) {
|
|
if (!startedAt || !finishedAt) return '-';
|
|
const diffMs = new Date(finishedAt) - new Date(startedAt);
|
|
if (isNaN(diffMs) || diffMs < 0) return '-';
|
|
const secs = Math.round(diffMs / 1000);
|
|
if (secs < 60) return secs + 's';
|
|
return Math.floor(secs / 60) + 'm ' + (secs % 60) + 's';
|
|
}
|
|
|
|
function runStatusBadge(status) {
|
|
switch ((status || '').toLowerCase()) {
|
|
case 'completed': return '<span style="color:var(--success);font-weight:600">completed</span>';
|
|
case 'running': return '<span style="color:var(--info);font-weight:600">running</span>';
|
|
case 'failed': return '<span style="color:var(--error);font-weight:600">failed</span>';
|
|
default: return `<span style="font-weight:600">${esc(status)}</span>`;
|
|
}
|
|
}
|
|
|
|
function logStatusText(status) {
|
|
switch ((status || '').toUpperCase()) {
|
|
case 'IMPORTED': return 'Importat';
|
|
case 'ALREADY_IMPORTED': return 'Deja imp.';
|
|
case 'SKIPPED': return 'Omis';
|
|
case 'ERROR': return 'Eroare';
|
|
default: return esc(status);
|
|
}
|
|
}
|
|
|
|
function logsGoPage(p) { loadRunOrders(currentRunId, null, p); }
|
|
|
|
// ── Runs Dropdown ────────────────────────────────
|
|
|
|
async function loadRuns() {
|
|
// Load all recent runs for dropdown
|
|
try {
|
|
const res = await fetch(`/api/sync/history?page=1&per_page=100`);
|
|
if (!res.ok) throw new Error('HTTP ' + res.status);
|
|
const data = await res.json();
|
|
const runs = data.runs || [];
|
|
|
|
const dd = document.getElementById('runsDropdown');
|
|
if (runs.length === 0) {
|
|
dd.innerHTML = '<option value="">Niciun sync run</option>';
|
|
} else {
|
|
dd.innerHTML = '<option value="">-- Selecteaza un run --</option>' +
|
|
runs.map(r => {
|
|
const started = r.started_at ? new Date(r.started_at).toLocaleString('ro-RO', {day:'2-digit',month:'2-digit',year:'numeric',hour:'2-digit',minute:'2-digit'}) : '?';
|
|
const st = (r.status || '').toUpperCase();
|
|
const statusEmoji = st === 'COMPLETED' ? '✓' : st === 'RUNNING' ? '⟳' : '✗';
|
|
const newImp = r.new_imported || 0;
|
|
const already = r.already_imported || 0;
|
|
const imp = r.imported || 0;
|
|
const skip = r.skipped || 0;
|
|
const err = r.errors || 0;
|
|
const impLabel = already > 0 ? `${newImp} noi, ${already} deja` : `${imp} imp`;
|
|
const label = `${started} — ${statusEmoji} ${r.status} (${impLabel}, ${skip} skip, ${err} err)`;
|
|
const selected = r.run_id === currentRunId ? 'selected' : '';
|
|
return `<option value="${esc(r.run_id)}" ${selected}>${esc(label)}</option>`;
|
|
}).join('');
|
|
}
|
|
const ddMobile = document.getElementById('runsDropdownMobile');
|
|
if (ddMobile) ddMobile.innerHTML = dd.innerHTML;
|
|
} catch (err) {
|
|
const dd = document.getElementById('runsDropdown');
|
|
dd.innerHTML = `<option value="">Eroare: ${esc(err.message)}</option>`;
|
|
}
|
|
}
|
|
|
|
// ── Run Selection ────────────────────────────────
|
|
|
|
async function selectRun(runId) {
|
|
if (logPollTimer) { clearInterval(logPollTimer); logPollTimer = null; }
|
|
|
|
currentRunId = runId;
|
|
currentFilter = 'all';
|
|
ordersPage = 1;
|
|
|
|
const url = new URL(window.location);
|
|
if (runId) { url.searchParams.set('run', runId); } else { url.searchParams.delete('run'); }
|
|
history.replaceState(null, '', url);
|
|
|
|
// Sync dropdown selection
|
|
const dd = document.getElementById('runsDropdown');
|
|
if (dd && dd.value !== runId) dd.value = runId;
|
|
const ddMobile = document.getElementById('runsDropdownMobile');
|
|
if (ddMobile && ddMobile.value !== runId) ddMobile.value = runId;
|
|
|
|
if (!runId) {
|
|
document.getElementById('logViewerSection').style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
document.getElementById('logViewerSection').style.display = '';
|
|
const logRunIdEl = document.getElementById('logRunId'); if (logRunIdEl) logRunIdEl.textContent = runId;
|
|
document.getElementById('logStatusBadge').innerHTML = '...';
|
|
document.getElementById('textLogSection').style.display = 'none';
|
|
|
|
await loadRunOrders(runId, 'all', 1);
|
|
|
|
// Also load text log in background
|
|
fetchTextLog(runId);
|
|
}
|
|
|
|
// ── Per-Order Filtering (R1) ─────────────────────
|
|
|
|
async function loadRunOrders(runId, statusFilter, page) {
|
|
if (statusFilter != null) currentFilter = statusFilter;
|
|
if (page != null) ordersPage = page;
|
|
|
|
// Update filter pill active state
|
|
document.querySelectorAll('#orderFilterPills .filter-pill').forEach(btn => {
|
|
btn.classList.toggle('active', btn.dataset.logStatus === currentFilter);
|
|
});
|
|
|
|
try {
|
|
const res = await fetch(`/api/sync/run/${encodeURIComponent(runId)}/orders?status=${currentFilter}&page=${ordersPage}&per_page=50&sort_by=${ordersSortColumn}&sort_dir=${ordersSortDirection}`);
|
|
if (!res.ok) throw new Error('HTTP ' + res.status);
|
|
const data = await res.json();
|
|
|
|
const counts = data.counts || {};
|
|
document.getElementById('countAll').textContent = counts.total || 0;
|
|
document.getElementById('countImported').textContent = counts.imported || 0;
|
|
document.getElementById('countSkipped').textContent = counts.skipped || 0;
|
|
document.getElementById('countError').textContent = counts.error || 0;
|
|
const alreadyEl = document.getElementById('countAlreadyImported');
|
|
if (alreadyEl) alreadyEl.textContent = counts.already_imported || 0;
|
|
|
|
const tbody = document.getElementById('runOrdersBody');
|
|
const orders = data.orders || [];
|
|
|
|
if (orders.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="9" class="text-center text-muted py-3">Nicio comanda</td></tr>';
|
|
} else {
|
|
const problemOrders = orders.filter(o => ['ERROR', 'SKIPPED'].includes(o.status));
|
|
const okOrders = orders.filter(o => ['IMPORTED', 'ALREADY_IMPORTED'].includes(o.status));
|
|
const otherOrders = orders.filter(o => !['ERROR', 'SKIPPED', 'IMPORTED', 'ALREADY_IMPORTED'].includes(o.status));
|
|
|
|
function orderRow(o, i) {
|
|
const dateStr = fmtDate(o.order_date);
|
|
const orderTotal = o.order_total != null ? Number(o.order_total).toFixed(2) : '-';
|
|
return `<tr style="cursor:pointer" onclick="openOrderDetail('${esc(o.order_number)}')">
|
|
<td>${statusDot(o.status)}</td>
|
|
<td>${(ordersPage - 1) * 50 + i + 1}</td>
|
|
<td class="text-nowrap">${dateStr}</td>
|
|
<td><code>${esc(o.order_number)}</code></td>
|
|
<td class="fw-bold">${esc(o.customer_name)}</td>
|
|
<td>${o.items_count || 0}</td>
|
|
<td class="text-end text-muted">${fmtCost(o.delivery_cost)}</td>
|
|
<td class="text-end text-muted">${fmtCost(o.discount_total)}</td>
|
|
<td class="text-end fw-bold">${orderTotal}</td>
|
|
</tr>`;
|
|
}
|
|
|
|
let html = '';
|
|
// Show problem orders first (always visible)
|
|
problemOrders.forEach((o, i) => { html += orderRow(o, i); });
|
|
otherOrders.forEach((o, i) => { html += orderRow(o, problemOrders.length + i); });
|
|
|
|
// Collapsible OK orders
|
|
if (okOrders.length > 0) {
|
|
const toggleId = 'okOrdersCollapse_' + Date.now();
|
|
html += `<tr><td colspan="9" class="p-0">
|
|
<div class="log-ok-toggle" onclick="this.nextElementSibling.classList.toggle('d-none')">
|
|
▶ ${okOrders.length} comenzi importate cu succes
|
|
</div>
|
|
<div class="d-none">
|
|
<table class="table mb-0">
|
|
<tbody>
|
|
${okOrders.map((o, i) => orderRow(o, problemOrders.length + otherOrders.length + i)).join('')}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</td></tr>`;
|
|
}
|
|
|
|
tbody.innerHTML = html;
|
|
}
|
|
|
|
// Mobile flat rows
|
|
const mobileList = document.getElementById('logsMobileList');
|
|
if (mobileList) {
|
|
if (orders.length === 0) {
|
|
mobileList.innerHTML = '<div class="flat-row text-muted py-3 justify-content-center">Nicio comanda</div>';
|
|
} else {
|
|
const problemOrders = orders.filter(o => ['ERROR', 'SKIPPED'].includes(o.status));
|
|
const okOrders = orders.filter(o => ['IMPORTED', 'ALREADY_IMPORTED'].includes(o.status));
|
|
const otherOrders = orders.filter(o => !['ERROR', 'SKIPPED', 'IMPORTED', 'ALREADY_IMPORTED'].includes(o.status));
|
|
|
|
function mobileRow(o) {
|
|
const d = o.order_date || '';
|
|
let dateFmt = '-';
|
|
if (d.length >= 10) {
|
|
dateFmt = d.slice(8, 10) + '.' + d.slice(5, 7) + '.' + d.slice(2, 4);
|
|
if (d.length >= 16) dateFmt += ' ' + d.slice(11, 16);
|
|
}
|
|
const totalStr = o.order_total ? Number(o.order_total).toFixed(2) : '';
|
|
return `<div class="flat-row" onclick="openOrderDetail('${esc(o.order_number)}')" style="font-size:0.875rem">
|
|
${statusDot(o.status)}
|
|
<span style="color:var(--text-muted)" class="text-nowrap">${dateFmt}</span>
|
|
<span class="grow truncate fw-bold">${esc(o.customer_name || '—')}</span>
|
|
<span class="text-nowrap">x${o.items_count || 0}${totalStr ? ' · <strong>' + totalStr + '</strong>' : ''}</span>
|
|
</div>`;
|
|
}
|
|
|
|
let mobileHtml = '';
|
|
problemOrders.forEach(o => { mobileHtml += mobileRow(o); });
|
|
otherOrders.forEach(o => { mobileHtml += mobileRow(o); });
|
|
|
|
if (okOrders.length > 0) {
|
|
mobileHtml += `<div class="log-ok-toggle" onclick="this.nextElementSibling.classList.toggle('d-none')">
|
|
▶ ${okOrders.length} comenzi importate cu succes
|
|
</div>
|
|
<div class="d-none">
|
|
${okOrders.map(o => mobileRow(o)).join('')}
|
|
</div>`;
|
|
}
|
|
|
|
mobileList.innerHTML = mobileHtml;
|
|
}
|
|
}
|
|
|
|
// Mobile segmented control
|
|
renderMobileSegmented('logsMobileSeg', [
|
|
{ label: 'Toate', count: counts.total || 0, value: 'all', active: currentFilter === 'all', colorClass: 'fc-neutral' },
|
|
{ label: 'Imp.', count: counts.imported || 0, value: 'IMPORTED', active: currentFilter === 'IMPORTED', colorClass: 'fc-green' },
|
|
{ label: 'Deja', count: counts.already_imported || 0, value: 'ALREADY_IMPORTED', active: currentFilter === 'ALREADY_IMPORTED', colorClass: 'fc-blue' },
|
|
{ label: 'Omise', count: counts.skipped || 0, value: 'SKIPPED', active: currentFilter === 'SKIPPED', colorClass: 'fc-yellow' },
|
|
{ label: 'Erori', count: counts.error || 0, value: 'ERROR', active: currentFilter === 'ERROR', colorClass: 'fc-red' }
|
|
], (val) => filterOrders(val));
|
|
|
|
// Orders pagination
|
|
const totalPages = data.pages || 1;
|
|
const infoEl = document.getElementById('ordersPageInfo');
|
|
if (infoEl) infoEl.textContent = `${data.total || 0} comenzi | Pagina ${ordersPage} din ${totalPages}`;
|
|
const pagHtml = `<small class="text-muted me-auto">${data.total || 0} comenzi | Pagina ${ordersPage} din ${totalPages}</small>` + renderUnifiedPagination(ordersPage, totalPages, 'logsGoPage');
|
|
const pagDiv = document.getElementById('ordersPagination');
|
|
if (pagDiv) pagDiv.innerHTML = pagHtml;
|
|
const pagDivTop = document.getElementById('ordersPaginationTop');
|
|
if (pagDivTop) pagDivTop.innerHTML = pagHtml;
|
|
|
|
// Update run status badge
|
|
const runRes = await fetch(`/api/sync/run/${encodeURIComponent(runId)}`);
|
|
const runData = await runRes.json();
|
|
if (runData.run) {
|
|
document.getElementById('logStatusBadge').innerHTML = runStatusBadge(runData.run.status);
|
|
// Update mobile run dot
|
|
const mDot = document.getElementById('mobileRunDot');
|
|
if (mDot) mDot.className = 'sync-status-dot ' + (runData.run.status || 'idle');
|
|
}
|
|
} catch (err) {
|
|
document.getElementById('runOrdersBody').innerHTML =
|
|
`<tr><td colspan="9" class="text-center text-danger">${esc(err.message)}</td></tr>`;
|
|
}
|
|
}
|
|
|
|
function filterOrders(status) {
|
|
loadRunOrders(currentRunId, status, 1);
|
|
}
|
|
|
|
function sortOrdersBy(col) {
|
|
if (ordersSortColumn === col) {
|
|
ordersSortDirection = ordersSortDirection === 'asc' ? 'desc' : 'asc';
|
|
} else {
|
|
ordersSortColumn = col;
|
|
ordersSortDirection = 'asc';
|
|
}
|
|
// Update sort icons
|
|
document.querySelectorAll('#logViewerSection .sort-icon').forEach(span => {
|
|
const c = span.dataset.col;
|
|
span.textContent = c === ordersSortColumn ? (ordersSortDirection === 'asc' ? '\u2191' : '\u2193') : '';
|
|
});
|
|
loadRunOrders(currentRunId, null, 1);
|
|
}
|
|
|
|
// ── Text Log (collapsible) ──────────────────────
|
|
|
|
function toggleTextLog() {
|
|
const section = document.getElementById('textLogSection');
|
|
section.style.display = section.style.display === 'none' ? '' : 'none';
|
|
if (section.style.display !== 'none' && currentRunId) {
|
|
fetchTextLog(currentRunId);
|
|
}
|
|
}
|
|
|
|
async function fetchTextLog(runId) {
|
|
// Clear any existing poll timer to prevent accumulation
|
|
if (logPollTimer) { clearInterval(logPollTimer); logPollTimer = null; }
|
|
|
|
try {
|
|
const res = await fetch(`/api/sync/run/${encodeURIComponent(runId)}/text-log`);
|
|
if (!res.ok) throw new Error('HTTP ' + res.status);
|
|
const data = await res.json();
|
|
|
|
document.getElementById('logContent').textContent = data.text || '(log gol)';
|
|
|
|
if (!data.finished) {
|
|
if (document.getElementById('autoRefreshToggle')?.checked) {
|
|
logPollTimer = setInterval(async () => {
|
|
try {
|
|
const r = await fetch(`/api/sync/run/${encodeURIComponent(runId)}/text-log`);
|
|
const d = await r.json();
|
|
if (currentRunId !== runId) { clearInterval(logPollTimer); return; }
|
|
document.getElementById('logContent').textContent = d.text || '(log gol)';
|
|
const el = document.getElementById('logContent');
|
|
el.scrollTop = el.scrollHeight;
|
|
if (d.finished) {
|
|
clearInterval(logPollTimer);
|
|
logPollTimer = null;
|
|
loadRuns();
|
|
loadRunOrders(runId, currentFilter, ordersPage);
|
|
}
|
|
} catch (e) { console.error('Poll error:', e); }
|
|
}, 2500);
|
|
}
|
|
}
|
|
} catch (err) {
|
|
document.getElementById('logContent').textContent = 'Eroare: ' + err.message;
|
|
}
|
|
}
|
|
|
|
// ── Order Detail Modal (R9) ─────────────────────
|
|
|
|
function openOrderDetail(orderNumber) {
|
|
_sharedModalQuickMapFn = function(sku, productName, orderNum, itemIdx) {
|
|
openLogsQuickMap(sku, productName, orderNum);
|
|
};
|
|
renderOrderDetailModal(orderNumber, {
|
|
onQuickMap: function(sku, productName, orderNum, itemIdx) {
|
|
openLogsQuickMap(sku, productName, orderNum);
|
|
}
|
|
});
|
|
}
|
|
|
|
// ── Quick Map Modal (uses shared openQuickMap) ───
|
|
|
|
function openLogsQuickMap(sku, productName, orderNumber) {
|
|
openQuickMap({
|
|
sku,
|
|
productName,
|
|
onSave: () => {
|
|
if (orderNumber) openOrderDetail(orderNumber);
|
|
loadRunOrders(currentRunId, currentFilter, ordersPage);
|
|
}
|
|
});
|
|
}
|
|
|
|
// ── Init ────────────────────────────────────────
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadRuns();
|
|
|
|
document.querySelectorAll('#orderFilterPills .filter-pill').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
filterOrders(this.dataset.logStatus || 'all');
|
|
});
|
|
});
|
|
|
|
const preselected = document.getElementById('preselectedRun');
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const runFromUrl = urlParams.get('run') || (preselected ? preselected.value : '');
|
|
if (runFromUrl) {
|
|
selectRun(runFromUrl);
|
|
}
|
|
|
|
document.getElementById('autoRefreshToggle')?.addEventListener('change', (e) => {
|
|
if (e.target.checked) {
|
|
// Resume polling if we have an active run
|
|
if (currentRunId) fetchTextLog(currentRunId);
|
|
} else {
|
|
// Pause polling
|
|
if (logPollTimer) { clearInterval(logPollTimer); logPollTimer = null; }
|
|
}
|
|
});
|
|
|
|
document.getElementById('autoRefreshToggleMobile')?.addEventListener('change', (e) => {
|
|
const desktop = document.getElementById('autoRefreshToggle');
|
|
if (desktop) desktop.checked = e.target.checked;
|
|
desktop?.dispatchEvent(new Event('change'));
|
|
});
|
|
});
|