58 lines
2.8 KiB
JavaScript
58 lines
2.8 KiB
JavaScript
/** Shared read-only activity receipt: recorded before/after values, never a live graph guess. */
|
|
import { translate as t } from './locales.js';
|
|
import { changeLine } from './activity_log.js';
|
|
|
|
function el(tag, className, text) {
|
|
const node = document.createElement(tag);
|
|
node.className = className;
|
|
if (text !== undefined) node.textContent = text;
|
|
return node;
|
|
}
|
|
|
|
function changeRow(change, locate) {
|
|
const row = el('div', `anomalous-canvas-change is-${change.kind}`);
|
|
const head = el('div', 'anomalous-canvas-change-head');
|
|
head.append(el('span', 'anomalous-canvas-change-node', change.node));
|
|
if (change.widget) head.append(el('span', 'anomalous-canvas-change-widget', change.widget));
|
|
if (locate && change.kind !== 'removed') {
|
|
const button = el('button', 'anomalous-ai-link', t('activityLocate'));
|
|
button.type = 'button';
|
|
button.onclick = () => locate(change);
|
|
head.append(button);
|
|
}
|
|
row.append(head);
|
|
if (change.kind === 'changed') {
|
|
const values = el('div', 'anomalous-canvas-change-values');
|
|
for (const side of ['before', 'after']) {
|
|
const cell = el('div', `anomalous-canvas-change-value is-${side}`);
|
|
cell.append(el('span', 'anomalous-canvas-change-label', t(side === 'before' ? 'aiChangeBefore' : 'aiChangeAfter')),
|
|
el('div', 'anomalous-canvas-change-text', change[side] || t('activityEmptyValue')));
|
|
values.append(cell);
|
|
}
|
|
row.append(values);
|
|
} else row.append(el('div', 'anomalous-canvas-change-description', changeLine(change)));
|
|
return row;
|
|
}
|
|
|
|
export function canvasChanges(entry, { locate = null } = {}) {
|
|
const box = el('div', 'anomalous-canvas-changes');
|
|
const changes = (entry?.detail?.changes || []).filter(change => change.kind !== 'opened');
|
|
if (!changes.length) {
|
|
box.append(el('div', 'anomalous-canvas-change-note', t('aiChangesUnavailable')));
|
|
return box;
|
|
}
|
|
box.append(el('div', 'anomalous-canvas-changes-title', t('aiCanvasReceipt', { count: entry.detail.total || changes.length })));
|
|
box.append(...changes.slice(0, 3).map(change => changeRow(change, locate)));
|
|
if (changes.length > 3) {
|
|
const more = el('details', 'anomalous-canvas-change-more');
|
|
more.append(el('summary', '', t('aiMoreChanges', { count: changes.length - 3 })));
|
|
more.addEventListener('toggle', () => {
|
|
if (more.open && more.children.length === 1) more.append(...changes.slice(3).map(change => changeRow(change, locate)));
|
|
});
|
|
box.append(more);
|
|
}
|
|
if (entry.detail.total > changes.length) box.append(el('div', 'anomalous-canvas-change-note', t('activityMore', { count: entry.detail.total - changes.length })));
|
|
box.append(el('div', 'anomalous-canvas-change-note', t('aiChangeExcerpt')));
|
|
return box;
|
|
}
|