projects/shape3d.it
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adasd

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-01-24 02:41:33 +01:00
parent b6124fb3a5
commit 7e9148f774
8 changed files with 26 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

304
public/assets/js/app.js Normal file
View File

@@ -0,0 +1,304 @@
(function () {
const API_BASE = '/api';
const printerSelect = document.getElementById('printerSelect');
const printerCompare = document.getElementById('printerCompare');
const matBody = document.getElementById('matBody');
const tableHead = document.getElementById('tableHead');
const statusEl = document.getElementById('status');
const errorBox = document.getElementById('errorBox');
const tooltipEl = document.getElementById('mmTooltip');
if (!printerSelect || !printerCompare || !matBody || !tableHead) {
return;
}
function setStatus(text) {
if (statusEl) {
statusEl.textContent = text;
}
}
function showError(msg) {
if (!errorBox) return;
errorBox.hidden = false;
errorBox.textContent = msg;
}
function clearError() {
if (!errorBox) return;
errorBox.hidden = true;
errorBox.textContent = '';
}
function escapeHtml(value) {
return String(value ?? '')
.replace(/&/g, '&')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
async function fetchJSON(path) {
const res = await fetch(API_BASE + path, { headers: { 'Accept': 'application/json' } });
if (!res.ok) throw new Error('HTTP ' + res.status + ' for ' + path);
return await res.json();
}
async function loadPrinters() {
try {
setStatus('Lade Drucker ...');
const data = await fetchJSON('/printers');
printerSelect.innerHTML = '';
printerCompare.innerHTML = '';
if (!Array.isArray(data) || data.length === 0) {
printerSelect.innerHTML = '<option value="">(keine Drucker gefunden)</option>';
setStatus('Keine Drucker gefunden');
return;
}
data.forEach(p => {
printerSelect.appendChild(new Option(p.name, p.id));
printerCompare.appendChild(new Option(p.name, p.id));
});
loadSinglePrinter(data[0].id);
setStatus('Drucker geladen');
} catch (err) {
console.error(err);
showError('Konnte Drucker nicht laden.');
setStatus('Fehler');
}
}
async function loadSinglePrinter(id) {
if (!id) return;
clearError();
setStatus('Lade Materialien ...');
try {
const data = await fetchJSON('/printer-materials?id=' + encodeURIComponent(id));
renderTable([data]);
setStatus('Fertig');
} catch (err) {
console.error(err);
showError('Konnte Materialien für den Drucker nicht laden.');
setStatus('Fehler');
}
}
async function loadMultiplePrinters(ids) {
if (!ids.length) return;
clearError();
setStatus('Lade Vergleich ...');
try {
const datasets = await Promise.all(
ids.map(id => fetchJSON('/printer-materials?id=' + encodeURIComponent(id)))
);
renderTable(datasets);
setStatus('Vergleich geladen');
} catch (err) {
console.error(err);
showError('Konnte einen der gewählten Drucker nicht laden.');
setStatus('Fehler');
}
}
function renderTable(datasets) {
const baseHead = [
'Material',
'Eigenschaften',
'Anwendung',
'Kinder <span aria-hidden="true">👶</span>',
'Emission <span aria-hidden="true">🌫️</span>'
].map(label => `<th>${label}</th>`).join('');
let printerCols = '';
datasets.forEach(ds => {
if (ds && ds.printer) {
printerCols += `<th data-printer="${escapeHtml(ds.printer.id)}">${escapeHtml(ds.printer.name)}</th>`;
}
});
tableHead.innerHTML = baseHead + printerCols;
const materials = (datasets[0] && datasets[0].materials) ? datasets[0].materials : [];
matBody.innerHTML = '';
if (!materials.length) {
const empty = document.createElement('tr');
empty.innerHTML = '<td colspan="12">Keine Materialien gefunden.</td>';
matBody.appendChild(empty);
return;
}
materials.forEach((m, idx) => {
const tr = document.createElement('tr');
tr.className = idx % 2 === 0 ? '' : 'is-alt';
const kid = m.kid_safety === 'safe'
? { icon: '🌿', text: 'sicher' }
: (m.kid_safety === 'limited' ? { icon: '🟡', text: 'eingeschränkt' } : { icon: '🔴', text: 'nicht geeignet' });
const em = m.emission === 'low'
? { icon: '✅', text: 'niedrig' }
: (m.emission === 'medium' ? { icon: '⚠️', text: 'mittel' } : { icon: '⛔', text: 'hoch' });
let html = '';
const detailPayload = {
tg: m.tg_celsius ?? '–',
nozzle: m.nozzle_req ?? '–',
plate: m.plate_req ?? '–',
extra: m.extra_req ?? '–',
emission: m.emission ?? '–'
};
const detailAttr = escapeHtml(JSON.stringify(detailPayload));
html += `<td class="mm-row-toggle" data-details="${detailAttr}">` +
`<strong>${escapeHtml(m.code)}</strong>` +
`<div class="mm-sub">${escapeHtml(m.short_desc || '')}</div>` +
`<button type="button" class="mm-info-btn" data-tooltip="Mehr Infos anzeigen">Mehr Info</button>` +
`</td>`;
html += `<td>${escapeHtml(m.properties || '')}</td>`;
html += `<td>${escapeHtml(m.application || '')}</td>`;
html += `<td title="${escapeHtml(kid.text)}">${kid.icon}</td>`;
html += `<td title="${escapeHtml(em.text)}">${em.icon}</td>`;
datasets.forEach(ds => {
const printerId = ds && ds.printer ? ds.printer.id : '';
const match = ds.materials.find(x => x.id === m.id || x.code === m.code);
if (!match || !match.support_level) {
html += `<td data-printer="${escapeHtml(printerId)}"><span class="mm-tag">unbekannt</span></td>`;
} else {
let badge = '';
if (match.support_level === 'full') {
badge = '<span class="mm-tag ok">voll</span>';
} else if (match.support_level === 'partial') {
badge = '<span class="mm-tag warn">teilw.</span>';
} else if (match.support_level === 'with_addon') {
badge = '<span class="mm-tag addon">Zusatz</span>';
} else {
badge = '<span class="mm-tag no">nein</span>';
}
const note = match.partial_reason
? `<div class="mm-sub">${escapeHtml(match.partial_reason)}</div>`
: (match.extra_info ? `<div class="mm-sub">${escapeHtml(match.extra_info)}</div>` : '');
html += `<td data-printer="${escapeHtml(printerId)}">${badge}${note}</td>`;
}
});
tr.innerHTML = html;
matBody.appendChild(tr);
});
}
function setTooltip(content, x, y) {
if (!tooltipEl) return;
tooltipEl.textContent = content;
const padding = 12;
const maxX = window.innerWidth - tooltipEl.offsetWidth - padding;
const maxY = window.innerHeight - tooltipEl.offsetHeight - padding;
const left = Math.min(x + 14, maxX);
const top = Math.min(y + 14, maxY);
tooltipEl.style.left = Math.max(left, padding) + 'px';
tooltipEl.style.top = Math.max(top, padding) + 'px';
tooltipEl.classList.add('is-visible');
tooltipEl.setAttribute('aria-hidden', 'false');
}
function hideTooltip() {
if (!tooltipEl) return;
tooltipEl.classList.remove('is-visible');
tooltipEl.setAttribute('aria-hidden', 'true');
}
function buildDetailsHtml(details) {
return `
<button type="button" class="mm-details-close">Schließen</button>
<div><strong>Tg °C</strong>${escapeHtml(details.tg)}</div>
<div><strong>Düse</strong>${escapeHtml(details.nozzle)}</div>
<div><strong>Platte</strong>${escapeHtml(details.plate)}</div>
<div><strong>Zusatz</strong>${escapeHtml(details.extra)}</div>
<div><strong>Emission</strong>${escapeHtml(details.emission)}</div>
`;
}
function closeActiveDetails() {
const open = matBody.querySelector('tr.mm-details-row');
if (open) {
open.remove();
}
const active = matBody.querySelector('tr.is-active');
if (active) {
active.classList.remove('is-active');
}
}
matBody.addEventListener('mouseover', (e) => {
const cell = e.target.closest('[data-details]');
if (!cell) return;
let details;
try {
details = JSON.parse(cell.dataset.details || '{}');
} catch {
details = {};
}
const hoverText = `Tg °C: ${details.tg ?? '–'} | Düse: ${details.nozzle ?? '–'} | Platte: ${details.plate ?? '–'} | Zusatz: ${details.extra ?? '–'} | Emission: ${details.emission ?? '–'}`;
setTooltip(hoverText, e.clientX, e.clientY);
});
matBody.addEventListener('mousemove', (e) => {
if (!tooltipEl || tooltipEl.getAttribute('aria-hidden') === 'true') return;
setTooltip(tooltipEl.textContent, e.clientX, e.clientY);
});
matBody.addEventListener('mouseout', (e) => {
if (e.target.closest('[data-details]')) {
hideTooltip();
}
});
matBody.addEventListener('click', (e) => {
if (e.target.closest('.mm-details-close')) {
closeActiveDetails();
return;
}
const cell = e.target.closest('[data-details]');
if (!cell) return;
const row = cell.closest('tr');
const isActive = row.classList.contains('is-active');
closeActiveDetails();
if (isActive) return;
let details;
try {
details = JSON.parse(cell.dataset.details || '{}');
} catch {
details = {};
}
const colCount = row.children.length;
const detailRow = document.createElement('tr');
detailRow.className = 'mm-details-row';
detailRow.innerHTML = `<td colspan="${colCount}"><div class="mm-details">${buildDetailsHtml(details)}</div></td>`;
row.classList.add('is-active');
row.parentNode.insertBefore(detailRow, row.nextSibling);
});
printerSelect.addEventListener('change', e => {
const id = e.target.value;
if (id) {
loadSinglePrinter(id);
printerCompare.selectedIndex = -1;
}
});
printerCompare.addEventListener('change', e => {
const ids = Array.from(e.target.selectedOptions).map(o => o.value);
if (ids.length) {
loadMultiplePrinters(ids);
}
});
loadPrinters();
})();