web/js/logView.js - master - vladlevin790/cpp-lab-2

web/js/logView.js
96 строк3 KB
vladlevin790
init
05 май 2026, 21:32
05 май 2026, 21:323310cbd
import { getLanguage, translateOperationMessage } from "./i18n.js";
import { escapeHtml } from "./utils.js";

export function renderOperationLog(container, operation) {
    if (!operation) {
        container.innerHTML = "—";
        return;
    }

    const lines = [];

    lines.push(`
        <div class="log-main ${operation.success ? "ok" : "fail"}">
            ${escapeHtml(translateOperationMessage(operation))}
        </div>
    `);

    lines.push(`
        <div class="log-time">
            ${getLanguage() === "en" ? "C++ time" : "Время C++"}: <strong>${escapeHtml(operation.elapsedMicroseconds)}</strong> μs
        </div>
    `);

    if (operation.steps && operation.steps.length > 0) {
        const maxVisibleSteps = 18;
        const visibleSteps = operation.steps.slice(0, maxVisibleSteps);

        lines.push(`<div class="log-title">${getLanguage() === "en" ? "Steps" : "Шаги"}</div>`);

        for (const step of visibleSteps) {
            lines.push(`
                <div class="log-step">
                    <span>${getLanguage() === "en" ? "index" : "индекс"} ${escapeHtml(step.index)} · ${getLanguage() === "en" ? "position" : "позиция"} ${escapeHtml(step.position)}</span>
                    <strong>${escapeHtml(step.formula)}</strong>
                </div>
            `);
        }

        const totalSteps = Number(operation.stepsTotal ?? operation.steps.length);

        if (totalSteps > maxVisibleSteps) {
            lines.push(`
                <div class="log-step muted-step">
                    ${getLanguage() === "en"
                        ? `Showing first ${maxVisibleSteps} steps out of ${totalSteps}.`
                        : `Показаны первые ${maxVisibleSteps} шагов из ${totalSteps}.`}
                </div>
            `);
        }
    }

    container.innerHTML = lines.join("");
}

export function renderAsciiPreview(container, preview) {
    if (!preview || !preview.items || preview.items.length === 0) {
        container.textContent = "—";
        return;
    }

    const maxVisible = 96;
    const visibleItems = preview.items.slice(0, maxVisible);

    container.innerHTML = `
        <div class="ascii-table">
            <div class="ascii-row ascii-head">
                <span>idx</span>
                <span>value</span>
                <span>code</span>
                <span>ascii</span>
            </div>
            ${visibleItems
                .map((item) => {
                    const kind = escapeHtml(item.kind || "out");

                    return `
                        <div class="ascii-row ascii-${kind}">
                            <span>${escapeHtml(item.index)}</span>
                            <span>${escapeHtml(item.value)}</span>
                            <span>${escapeHtml(item.code || "—")}</span>
                            <strong>${escapeHtml(item.char)}</strong>
                        </div>
                    `;
                })
                .join("")}
        </div>
    `;

    if (preview.items.length > maxVisible) {
        container.innerHTML += `
            <span class="ascii-pill more-pill">
                +${preview.items.length - maxVisible} скрыто
            </span>
        `;
    }
}