filter

public/dashboard.html

@@ -13,7 +13,30 @@
         <button id="logoutBtn">Logout</button>
 
         <h2>Elemente</h2>
-        <ul id="elementsList"></ul>
+
+        <div class="elements-container">
+            <div class="filters">
+                <label>Inhalt: <input type="text" id="filter-inhalt" placeholder="Filter Inhalt"></label>
+                <label>Bundesland: <input type="text" id="filter-bundesland" placeholder="Filter Bundesland"></label>
+                <label>Fach: <input type="text" id="filter-fach" placeholder="Filter Fach"></label>
+                <label>Version: <input type="text" id="filter-version" placeholder="Filter Version"></label>
+                <label>Stufe: <input type="number" id="filter-stufe" placeholder="Stufe"></label>
+                <button id="clear-filters">Filter zurücksetzen</button>
+            </div>
+
+            <table id="elementsTable">
+                <thead>
+                    <tr>
+                        <th>Inhalt</th>
+                        <th>Bundesland</th>
+                        <th>Fach</th>
+                        <th>Version</th>
+                        <th>Stufe</th>
+                    </tr>
+                </thead>
+                <tbody id="elementsTbody"></tbody>
+            </table>
+        </div>
 
         <p id="errorMessage" class="error"></p>
     </div>

public/dashboard.js

@@ -6,6 +6,14 @@ const welcomeMessage = document.getElementById("welcomeMessage");
 const todosList = document.getElementById("todosList");
 const errorMessage = document.getElementById("errorMessage");
 const logoutBtn = document.getElementById("logoutBtn");
+// Elements UI
+const elementsTbody = document.getElementById("elementsTbody");
+const filterInhalt = document.getElementById("filter-inhalt");
+const filterBundesland = document.getElementById("filter-bundesland");
+const filterFach = document.getElementById("filter-fach");
+const filterVersion = document.getElementById("filter-version");
+const filterStufe = document.getElementById("filter-stufe");
+const clearFiltersBtn = document.getElementById("clear-filters");
 
 // Prüfe ob ein JWT vorhanden ist
 const token = localStorage.getItem("token");
@@ -56,3 +64,94 @@ welcomeMessage.textContent = "Willkommen zum Dashboard!";
 
 // Rufe die Todos ab
 loadTodos();
+
+// ---------- Elements: load, render, filter ----------
+let elementsData = [];
+
+async function loadElements() {
+  try {
+    // Route: mounted at /elements + route '/elements' => /elements/elements
+    const res = await authFetch('/elements/elements');
+    if (!res.ok) {
+      errorMessage.textContent = 'Fehler beim Abrufen der Elemente.';
+      return;
+    }
+
+    elementsData = await res.json();
+    renderElements(elementsData);
+  } catch (err) {
+    console.error('Elements Fetch Error:', err);
+    errorMessage.textContent = 'Serverfehler beim Laden der Elemente.';
+  }
+}
+
+function renderElements(data) {
+  if (!elementsTbody) return;
+  elementsTbody.innerHTML = '';
+
+  if (!Array.isArray(data) || data.length === 0) {
+    const tr = document.createElement('tr');
+    const td = document.createElement('td');
+    td.colSpan = 5;
+    td.textContent = 'Keine Elemente gefunden.';
+    tr.appendChild(td);
+    elementsTbody.appendChild(tr);
+    return;
+  }
+
+  data.forEach(el => {
+    const tr = document.createElement('tr');
+    // Skip id; show columns in schema order
+    const cols = [el.inhalt, el.bundesland, el.fach, el.version, el.stufe];
+    cols.forEach(val => {
+      const td = document.createElement('td');
+      td.textContent = (val === null || val === undefined) ? '' : String(val);
+      tr.appendChild(td);
+    });
+    elementsTbody.appendChild(tr);
+  });
+}
+
+function applyFilters() {
+  if (!elementsData || elementsData.length === 0) return renderElements([]);
+
+  const fInhalt = (filterInhalt?.value || '').trim().toLowerCase();
+  const fBund = (filterBundesland?.value || '').trim().toLowerCase();
+  const fFach = (filterFach?.value || '').trim().toLowerCase();
+  const fVer = (filterVersion?.value || '').trim().toLowerCase();
+  const fSt = (filterStufe?.value || '').trim();
+
+  const filtered = elementsData.filter(el => {
+    if (fInhalt && !(el.inhalt || '').toLowerCase().includes(fInhalt)) return false;
+    if (fBund && !(el.bundesland || '').toLowerCase().includes(fBund)) return false;
+    if (fFach && !(el.fach || '').toLowerCase().includes(fFach)) return false;
+    if (fVer && !(el.version || '').toLowerCase().includes(fVer)) return false;
+    if (fSt) {
+      const n = Number(fSt);
+      if (!Number.isNaN(n)) {
+        if (Number(el.stufe) !== n) return false;
+      } else {
+        // non-numeric filter: substring match
+        if (!(String(el.stufe) || '').includes(fSt)) return false;
+      }
+    }
+    return true;
+  });
+
+  renderElements(filtered);
+}
+
+function setupFilterListeners() {
+  const inputs = [filterInhalt, filterBundesland, filterFach, filterVersion, filterStufe];
+  inputs.forEach(i => { if (i) i.addEventListener('input', applyFilters); });
+  if (clearFiltersBtn) clearFiltersBtn.addEventListener('click', () => {
+    inputs.forEach(i => { if (i) i.value = ''; });
+    applyFilters();
+  });
+}
+
+// Initialize elements UI if present
+if (elementsTbody) {
+  setupFilterListeners();
+  loadElements();
+}