V0.1

public/js/pages/machines.js

@@ -0,0 +1,108 @@
+import { apiGet, apiPost, isAuthRedirectError } from '../api.js';
+import { machineListStatusRowClass } from '../core/constants.js';
+import { guard } from '../core/auth-guard.js';
+import { esc } from '../core/utils.js';
+
+function rowClassForListStatus(listStatus) {
+  const code =
+    listStatus && machineListStatusRowClass[listStatus] !== undefined
+      ? listStatus
+      : '';
+  return machineListStatusRowClass[code];
+}
+
+const loadingEl = document.getElementById('page-loading');
+const mainEl = document.getElementById('page-main');
+const errEl = document.getElementById('page-error');
+
+function showError(msg) {
+  loadingEl.hidden = true;
+  mainEl.hidden = true;
+  errEl.hidden = false;
+  errEl.textContent = msg;
+}
+
+function renderRows(machines) {
+  const tbody = document.getElementById('machine-table-body');
+  tbody.innerHTML = machines
+    .map((m) => {
+      const x = m.extras || {};
+      const rc = rowClassForListStatus(m.listStatus);
+      return `<tr class="${esc(rc)}">
+                <td><a href="/machine.html?id=${esc(m.id)}">${esc(m.seriennummer)}</a></td>
+                <td>${esc(m.typ)}</td>
+                <td>${esc(x.Konzern || '')}</td>
+                <td>${esc(x.Name || '')}</td>
+                <td>${esc(x.Stadt || '')}</td>
+                <td>${esc(x.Land || '')}</td>
+                <td>${esc(x.Jahr || '')}</td>
+              </tr>`;
+    })
+    .join('');
+}
+
+function initNewMachineCollapse() {
+  const body = document.getElementById('new-machine-section-body');
+  const toggle = document.getElementById('new-machine-toggle');
+  const chev = toggle.querySelector('.ldap-chevron');
+  function setOpen(open) {
+    body.hidden = !open;
+    toggle.setAttribute('aria-expanded', String(open));
+    chev.textContent = open ? '▲' : '▼';
+  }
+  toggle.onclick = () => setOpen(body.hidden);
+}
+
+async function run() {
+  const machines = await apiGet('/machines');
+  document.getElementById('machine-count').textContent = String(machines.length);
+  renderRows(machines);
+
+  initNewMachineCollapse();
+
+  const formNew = document.getElementById('form-new-machine');
+  formNew.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const fd = new FormData(formNew);
+    const btn = formNew.querySelector('button[type="submit"]');
+    btn.disabled = true;
+    try {
+      const body = Object.fromEntries(fd.entries());
+      const created = await apiPost('/machines', {
+        name: body.name,
+        typ: body.typ,
+        seriennummer: body.seriennummer,
+        standort: body.standort,
+        listStatus: body.listStatus || '',
+      });
+      location.href = `/machine.html?id=${encodeURIComponent(created.id)}`;
+    } catch (err) {
+      alert(err.message || 'Anlegen fehlgeschlagen.');
+      btn.disabled = false;
+    }
+  });
+
+  const inp = document.getElementById('machine-filter');
+  const tbody = document.getElementById('machine-table-body');
+  inp.addEventListener('input', () => {
+    const q = inp.value.toLowerCase().trim();
+    tbody.querySelectorAll('tr').forEach((tr) => {
+      tr.hidden = !!(q && !tr.textContent.toLowerCase().includes(q));
+    });
+  });
+}
+
+async function init() {
+  const st = await guard({ activeNav: 'machines' });
+  if (!st) return;
+  loadingEl.hidden = true;
+  mainEl.hidden = false;
+  try {
+    await run();
+  } catch (e) {
+    if (isAuthRedirectError(e)) return;
+    showError(e.message || 'Fehler');
+  }
+}
+
+init();