shape3d.it/public/assets/app.js

(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',
      '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' });

      const tooltipLines = [
        m.tg_celsius ? `Tg °C: ${m.tg_celsius}` : 'Tg °C: –',
        m.nozzle_req ? `Düse: ${m.nozzle_req}` : 'Düse: –',
        m.plate_req ? `Platte: ${m.plate_req}` : 'Platte: –',
        m.extra_req ? `Zusatz: ${m.extra_req}` : 'Zusatz: –',
        m.emission ? `Emission: ${m.emission}` : 'Emission: –'
      ];
      const tooltip = escapeHtml(tooltipLines.join(' | '));

      let html = '';
      html += `<td title="${tooltip}"><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.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);
    });
  }

  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();
})();