Merge pull request 'Spaltenfilter im Dashboard' (#2) from fds2610-bot/FSCash:main into main

Reviewed-on: https://codeberg.org/fds2610/FSCash/pulls/2

.gitignore

@@ -4,4 +4,6 @@ info.php
 config.php
 *.old
 html/.Trash-1000
+Dockerfile
+docker-compose.yml
 

html/assets/css/style.css

@@ -326,6 +326,31 @@ tr:hover {
     display: inline-block;
 }
 
+/* Spaltenfilter im Tabellenkopf */
+tr.filter-row th {
+    background: white;
+    padding: 6px 8px;
+    text-transform: none;
+    letter-spacing: normal;
+    font-weight: normal;
+}
+
+.column-filter {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 6px 8px;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    font-size: 0.85em;
+    color: #333;
+    background: white;
+}
+
+.column-filter:focus {
+    outline: none;
+    border-color: var(--primary-color);
+}
+
 
 /* Button */
 .btn-xr {

html/dashboard.php

@@ -70,6 +70,39 @@ $stmt->execute([
     'month' => $month
 ]);
 $entries = $stmt->fetchAll();
+
+// Eindeutige Werte für die Filter-Dropdowns ermitteln
+$filterZahler = [];
+$filterPersonen = [];
+$filterKategorie = [];
+$filterZahlweise = [];
+foreach ($entries as $entry) {
+    if (!empty($entry['zahler'])) {
+        $filterZahler[$entry['zahler']] = true;
+    }
+    if (!empty($entry['personen'])) {
+        foreach (explode(',', $entry['personen']) as $person) {
+            $person = trim($person);
+            if ($person !== '') {
+                $filterPersonen[$person] = true;
+            }
+        }
+    }
+    if (!empty($entry['kategorie'])) {
+        $filterKategorie[$entry['kategorie']] = true;
+    }
+    if (!empty($entry['zahlweise'])) {
+        $filterZahlweise[$entry['zahlweise']] = true;
+    }
+}
+$filterZahler = array_keys($filterZahler);
+$filterPersonen = array_keys($filterPersonen);
+$filterKategorie = array_keys($filterKategorie);
+$filterZahlweise = array_keys($filterZahlweise);
+sort($filterZahler, SORT_STRING | SORT_FLAG_CASE);
+sort($filterPersonen, SORT_STRING | SORT_FLAG_CASE);
+sort($filterKategorie, SORT_STRING | SORT_FLAG_CASE);
+sort($filterZahlweise, SORT_STRING | SORT_FLAG_CASE);
 ?>
 <!DOCTYPE html>
 <html lang="de">
@@ -116,8 +149,47 @@ $entries = $stmt->fetchAll();
 <th class="hide-on-mobile">Hinweis</th>
 <th>&nbsp;</th>
 </tr>
+<tr class="filter-row">
+<th><input type="text" class="column-filter" data-col="0" placeholder="Filter…"></th>
+<th class="hide-on-mobile">
+<select class="column-filter" data-col="1">
+<option value="">Alle</option>
+<?php foreach ($filterZahler as $wert): ?>
+<option value="<?= htmlspecialchars($wert) ?>"><?= htmlspecialchars($wert) ?></option>
+<?php endforeach; ?>
+</select>
+</th>
+<th class="hide-on-mobile">
+<select class="column-filter" data-col="2">
+<option value="">Alle</option>
+<?php foreach ($filterPersonen as $wert): ?>
+<option value="<?= htmlspecialchars($wert) ?>"><?= htmlspecialchars($wert) ?></option>
+<?php endforeach; ?>
+</select>
+</th>
+<th class="hide-on-mobile">
+<select class="column-filter" data-col="3">
+<option value="">Alle</option>
+<?php foreach ($filterKategorie as $wert): ?>
+<option value="<?= htmlspecialchars($wert) ?>"><?= htmlspecialchars($wert) ?></option>
+<?php endforeach; ?>
+</select>
+</th>
+<th>
+<select class="column-filter" data-col="4">
+<option value="">Alle</option>
+<?php foreach ($filterZahlweise as $wert): ?>
+<option value="<?= htmlspecialchars($wert) ?>"><?= htmlspecialchars($wert) ?></option>
+<?php endforeach; ?>
+</select>
+</th>
+<th><input type="text" class="column-filter" data-col="5" placeholder="Filter…"></th>
+<th><input type="text" class="column-filter" data-col="6" placeholder="Filter…"></th>
+<th class="hide-on-mobile"><input type="text" class="column-filter" data-col="7" placeholder="Filter…"></th>
+<th>&nbsp;</th>
+</tr>
 </thead>
-<tbody>
+<tbody id="entries-body">
 <?php foreach ($entries as $entry): ?>
 <tr>
 <td><?= htmlspecialchars($entry['date']) ?></td>
@@ -147,6 +219,33 @@ $entries = $stmt->fetchAll();
 document.querySelector('.hamburger').addEventListener('click', function() {
     document.querySelector('.nav-list').classList.toggle('show');
 });
+
+// Spaltenfilter für die Tabelle
+(function() {
+    const filters = document.querySelectorAll('.column-filter');
+    const rows = document.querySelectorAll('#entries-body tr');
+
+    function applyFilters() {
+        const activeFilters = Array.from(filters)
+            .map(f => ({ col: parseInt(f.dataset.col, 10), value: f.value.trim().toLowerCase() }))
+            .filter(f => f.value !== '');
+
+        rows.forEach(row => {
+            const cells = row.children;
+            const visible = activeFilters.every(f => {
+                const cell = cells[f.col];
+                if (!cell) return true;
+                return cell.textContent.trim().toLowerCase().includes(f.value);
+            });
+            row.style.display = visible ? '' : 'none';
+        });
+    }
+
+    filters.forEach(f => {
+        f.addEventListener('input', applyFilters);
+        f.addEventListener('change', applyFilters);
+    });
+})();
 </script>
 </body>
 </html>