dasd

public/assets/app.js

@@ -6,6 +6,7 @@
   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;
@@ -142,17 +143,20 @@
         ? { 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>`;
+      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>`;
@@ -186,6 +190,101 @@
     });
   }
 
+  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) {