AJ Isaacs
7db44640ca
Replace dark blueprint theme with a clean light theme for better readability. Bump all font sizes (10px labels to 12px, 13px body text to 14px) and improve text contrast for users with reading glasses. Icon colors now use CSS variables instead of hardcoded hex. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
61 lines
3.5 KiB
JavaScript
61 lines
3.5 KiB
JavaScript
/* ─── BOM Detail Expansion ─── */
|
|
function renderBomDetails(b) {
|
|
let html = '<div class="bom-expand-content">';
|
|
|
|
if (b.cutTemplate) {
|
|
const ct = b.cutTemplate;
|
|
const displayName = ct.dxfFilePath?.split(/[/\\]/).pop() || '';
|
|
html += `
|
|
<div class="bom-section-title">${icons.laser} Cut Template</div>
|
|
<div class="info-grid">
|
|
<div class="info-item"><span class="lbl">File</span><span class="val">${esc(displayName)}</span></div>
|
|
<div class="info-item"><span class="lbl">Thickness</span><span class="val">${fmtThickness(ct.thickness)}</span></div>
|
|
<div class="info-item"><span class="lbl">K-Factor</span><span class="val">${ct.kFactor != null ? ct.kFactor : '\u2014'}</span></div>
|
|
<div class="info-item"><span class="lbl">Bend Radius</span><span class="val">${ct.defaultBendRadius != null ? ct.defaultBendRadius.toFixed(4) + '"' : '\u2014'}</span></div>
|
|
</div>`;
|
|
|
|
if (ct.contentHash) {
|
|
html += `<div style="margin-top:10px">
|
|
<a class="btn btn-cyan btn-sm" href="/api/files/blob/${encodeURIComponent(ct.contentHash)}?ext=dxf&download=true&name=${encodeURIComponent(displayName)}" onclick="event.stopPropagation()">${icons.download} Download DXF</a>
|
|
<span style="font-family:var(--font-mono);font-size:13px;color:var(--text-dim);margin-left:8px">${esc(displayName)}</span>
|
|
</div>`;
|
|
}
|
|
}
|
|
|
|
if (b.formProgram) {
|
|
const fp = b.formProgram;
|
|
html += `
|
|
<div class="bom-section-title">${icons.bend} Form Program</div>
|
|
<div class="info-grid">
|
|
<div class="info-item"><span class="lbl">Program</span><span class="val">${esc(fp.programName)}</span></div>
|
|
<div class="info-item"><span class="lbl">Thickness</span><span class="val">${fmtThickness(fp.thickness)}</span></div>
|
|
<div class="info-item"><span class="lbl">Material</span><span class="val">${esc(fp.materialType)}</span></div>
|
|
<div class="info-item"><span class="lbl">K-Factor</span><span class="val">${fp.kFactor != null ? fp.kFactor : '\u2014'}</span></div>
|
|
<div class="info-item"><span class="lbl">Bends</span><span class="val">${fp.bendCount}</span></div>
|
|
<div class="info-item"><span class="lbl">Upper Tools</span><span class="val">${esc(fp.upperToolNames) || '\u2014'}</span></div>
|
|
<div class="info-item"><span class="lbl">Lower Tools</span><span class="val">${esc(fp.lowerToolNames) || '\u2014'}</span></div>
|
|
</div>
|
|
${fp.setupNotes ? `<div style="margin-top:8px;padding:8px 12px;background:var(--amber-dim);border-radius:4px;font-size:13px;font-family:var(--font-mono);color:var(--amber)"><span class="lbl">Setup Notes</span>${esc(fp.setupNotes)}</div>` : ''}`;
|
|
}
|
|
|
|
html += '</div>';
|
|
return html;
|
|
}
|
|
|
|
function toggleEquipGroup(id) {
|
|
const group = document.getElementById(id);
|
|
const icon = document.getElementById(id + '-icon');
|
|
if (!group) return;
|
|
group.classList.toggle('collapsed');
|
|
if (icon) icon.classList.toggle('open', !group.classList.contains('collapsed'));
|
|
}
|
|
|
|
function toggleBomRow(id) {
|
|
const row = document.getElementById(id);
|
|
const icon = document.getElementById(id + '-icon');
|
|
if (!row) return;
|
|
const visible = row.style.display !== 'none';
|
|
row.style.display = visible ? 'none' : '';
|
|
if (icon) icon.classList.toggle('open', !visible);
|
|
}
|