New version

public/assets/app.js

@@ -0,0 +1,200 @@
+(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');
+
+  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',
+      'Tg °C',
+      'Düse',
+      'Platte',
+      'Zusatz',
+      'Anwendung',
+      'Kinder',
+      'Emission'
+    ].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' ? 'grün' : (m.kid_safety === 'limited' ? 'gelb' : 'rot');
+      const em = m.emission === 'low' ? 'niedrig' : (m.emission === 'medium' ? 'mittel' : 'hoch');
+
+      let html = '';
+      html += `<td><strong>${escapeHtml(m.code)}</strong><div class="mm-sub">${escapeHtml(m.short_desc || '')}</div></td>`;
+      html += `<td>${escapeHtml(m.properties || '')}</td>`;
+      html += `<td>${escapeHtml(m.tg_celsius || '–')}</td>`;
+      html += `<td>${escapeHtml(m.nozzle_req || '')}</td>`;
+      html += `<td>${escapeHtml(m.plate_req || '')}</td>`;
+      html += `<td>${escapeHtml(m.extra_req || '')}</td>`;
+      html += `<td>${escapeHtml(m.application || '')}</td>`;
+      html += `<td>${escapeHtml(kid)}</td>`;
+      html += `<td>${escapeHtml(em)}</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);
+    });
+  }
+
+  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();
+})();