Datepicker in konto.php

forms/datepicker.php

@@ -0,0 +1,62 @@
+<?php
+    header('Content-Type: application/json');
+    require_once __DIR__ . '/../includes/db_connect.php';
+
+    $start = $_POST['start'] ?? null;
+    $end   = $_POST['end'] ?? null;
+    $konto_id = $_POST['konto_id'] ?? null;
+
+    if (!$start || !$end || !$konto_id) {
+        echo json_encode(['success'=>false,'message'=>'Kein Zeitraum']); exit;
+    }
+
+    $stmt = $pdo->prepare("SELECT kb.id AS kontobewegung_id,
+                                         kb.betrag,
+                                         kb.beschreibung,
+                                         kb.datum_ausgegeben,
+                                         kb.datum_abgebucht,
+	                                     kb.kostenfix_id
+                                    FROM kontobewegung kb
+                                    LEFT OUTER JOIN kostenfix kf ON kf.id = kb.kostenfix_id
+                                    WHERE kb.konto_id = :konto_id
+                                      AND kb.datum_ausgegeben BETWEEN :von AND :bis
+                                    ORDER BY datum_ausgegeben DESC,
+                                                kb.id DESC;");
+    $stmt->execute(['konto_id' => $konto_id,
+                            'von'=>$start,
+                            'bis'=>$end]);
+    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
+
+    $tabelle_gesamt = [];
+    foreach($rows as $r) {
+        $tabelle_zeile = [];
+        $tabelle_zeile["datum_abgebucht"] = "<td class=\"td_datum\" onClick=\"ändereUmsatz("
+                                            . $r['kontobewegung_id']
+                                            . ", " . $konto_id . ")\">"
+                                            . ($r['datum_abgebucht'] ?? '')
+                                            . "</td>";
+        $tabelle_zeile["datum_ausgegeben"] = "<td class=\"td_datum\" onClick=\"ändereUmsatz("
+                                            . $r['kontobewegung_id']
+                                            . ", " . $konto_id . ")\">"
+                                            . ($r['datum_ausgegeben'] ?? '')
+                                            . "</td>";
+        $tabelle_zeile["beschreibung"] = "<td class=\"td_text\" onClick=\"ändereUmsatz("
+                                            . $r['kontobewegung_id']
+                                            . ", " . $konto_id . ")\">"
+                                            . ($r['beschreibung'] ?? '')
+                                            . "</td>";
+
+        $tabelle_zeile["betrag"] = "<td class=\""
+                                            . ($r['betrag'] < 0 ? 'td_zahl_neg' : 'td_zahl_pos')
+                                            . "\" onClick=\"ändereUmsatz("
+                                            . $r['kontobewegung_id']
+                                            . ", " . $konto_id . ")\">"
+                                            . (number_format($r['betrag'], 2, ",", "."))
+                                            . " €</td>";
+
+        $tabelle_zeile["tr_class"] = $r['kostenfix_id'] ? "konto_fixKosten" : "standard";
+
+        $tabelle_gesamt[] = $tabelle_zeile;
+    }
+
+    echo json_encode(['success'=>true,'rows'=>$tabelle_gesamt]);

konto.php

@@ -18,6 +18,13 @@
     $konto_kontostand = $konto[0]['kontostand'];
     $konto_backgroundColor = $konto[0]['backgroundcolor'];
 
+
+    $stmt = $pdo->query("SELECT (date_trunc('month', CURRENT_DATE::date) - interval '2 month')::date AS von,
+		                    (date_trunc('month', CURRENT_DATE::date) + interval '1 month' - interval '1 day')::date AS bis;");
+    $monat_aktuell = $stmt->fetchAll(PDO::FETCH_ASSOC)[0];
+    
+    $selectedRange = $_GET['range'] ?? $monat_aktuell['von'] . " to " . $monat_aktuell['bis'];
+
     $stmt = $pdo->prepare("SELECT kb.id AS kontobewegung_id,
                                             kb.betrag,
                                             kb.beschreibung,
@@ -27,24 +34,106 @@
                                     FROM kontobewegung kb
                                     LEFT OUTER JOIN kostenfix kf ON kf.id = kb.kostenfix_id
                                     WHERE kb.konto_id = :konto_id
+                                      AND kb.datum_ausgegeben BETWEEN :von AND :bis
                                     ORDER BY datum_ausgegeben DESC,
                                                 kb.id DESC;");
-    $stmt->execute(['konto_id' => $konto_id]);
+    $stmt->execute(['konto_id' => $konto_id, 'von' => $monat_aktuell['von'], 'bis' => $monat_aktuell['bis']]);
     $kontobewegung = $stmt->fetchAll(PDO::FETCH_ASSOC);
-
 ?>
 <!DOCTYPE html>
 <html>
 
 <head>
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
+
     <script>
         function ändereUmsatz(kontobewegung_id, konto_id) {
             document.getElementById("hiddenInputÄndereUmsatzKontobewegungID").value = kontobewegung_id;
             document.getElementById("hiddenInputÄndereUmsatzKontoID").value = konto_id;
 
+            //console.log("DEBUG: ", document.getElementById("hiddenInputÄndereUmsatzKontobewegungID").value);
+
             document.getElementById("hiddenFormÄndereUmsatz").submit();
         }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            flatpickr("#rangePicker", {
+                mode: "range",
+                dateFormat: "Y-m-d",
+                /*defaultDate: ["2025-11-01","2025-11-30"]*/
+                closeOnSelect: false,
+
+                onReady: function (selectedDates, dateStr, instance) {
+                    const fpContainer = instance.calendarContainer;
+
+                    if (fpContainer.querySelector(".fp-apply-btn")) return;
+
+                    const applyBtn = document.createElement("button");
+                    applyBtn.textContent = "Filtern";
+                    applyBtn.type = "button";
+                    applyBtn.className = "fp-apply-btn";
+
+                    applyBtn.style.margin = "8px";
+                    applyBtn.style.padding = "6px 12px";
+                    applyBtn.style.fontSize = "14px";
+
+                    applyBtn.addEventListener("click", () => {
+                        const value = instance.input.value;
+
+                        datum(<?= $konto_id ?>, value);
+
+                        instance.close();
+                    });
+
+                    fpContainer.appendChild(applyBtn);
+                }
+            });
+        });
+
+        function datum(konto_id) {
+            const val = document.getElementById('rangePicker').value; // "YYYY-MM-DD to YYYY-MM-DD"
+            if (!val) return alert('Bitte Zeitraum wählen');
+
+            const parts = val.split(' to ');
+            const start = parts[0];
+            const end = parts[1] ?? parts[0];
+
+            fetch('forms/datepicker.php', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                body: `start=${encodeURIComponent(start)}&end=${encodeURIComponent(end)}&konto_id=${encodeURIComponent(konto_id)}`
+            })
+            .then(res => {
+                if (!res.ok) {
+                    throw new Error("HTTP Fehler " + res.status);
+                }
+                return res.text();      // zuerst als Text holen
+            })
+            .then(txt => {
+                //console.log("Antwort-Text:", txt); // prüfen was wirklich kommt
+                return JSON.parse(txt);
+            })
+            //.then(data => console.log("JSON:", data)) //LOGAusgabe
+            .then(data => {
+                if (!data.success) return alert('Fehler: ' + (data.message||''));
+                // data.rows = Array mit Ergebnissen - Tabelle ersetzen
+                const tbody = document.getElementById('tableBody');
+                tbody.innerHTML = ''; // löschen
+                data.rows.forEach(r => {
+                    const tr = document.createElement('tr');
+                    tr.innerHTML = r.datum_abgebucht + r.datum_ausgegeben + r.beschreibung + r.betrag;
+                    tr.classList.add(r.tr_class);
+                    tbody.appendChild(tr);
+                });
+            })
+            .catch(err => console.error("Fehler:", err));
+        }
+
+        function escapeHtml(s){ return String(s).replace(/[&<>"']/g, c=>({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' })[c]); }
+        function numberFormat(n){ return Number(n).toLocaleString('de-DE', {minimumFractionDigits:2, maximumFractionDigits:2}); }
+
     </script>
     <style>
         tr.standard {
@@ -78,40 +167,49 @@
     </div>
     <div class="inhalt">
         <table>
-            <tr>
+            <thead>
-                <th id="th_gebucht">gebucht</th>
+                <tr>
-                <th id="th_ausgegeben">ausgegeben</th>
+                    <th id="th_gebucht">gebucht</th>
-                <th id="th_beschreibung">Beschreibung</th>
+                    <th id="th_ausgegeben">
-                <th id="th_betrag">Betrag</th>
+                        <!--ausgegeben-->
-            </tr>
+                        <div class="range-wrapper">
-            <?php foreach ($kontobewegung as $y): ?>
+                            <input id="rangePicker" type="text" placeholder="ausgegben" value="<?= htmlspecialchars($selectedRange) ?>">
-                <tr <?= $y['kostenfix_id'] ? 'class="konto_fixKosten"' : 'class="standard"' ?>>
+                            <!--button id="applyRange" type="button" onClick="datum(< ?= htmlspecialchars($konto_id) ?>)">Anwenden</button-->
-                <!--tr style="background-color: < ?= $konto_backgroundColor ?>"-->
+                        </div>
-                    <td class="td_datum"
+                    </th>
-                        onClick="ändereUmsatz(<?= htmlspecialchars($y['kontobewegung_id']) ?>, <?= htmlspecialchars($konto_id) ?>)">
+                    <th id="th_beschreibung">Beschreibung</th>
-                        <?= empty($y['datum_abgebucht']) ? '' : htmlspecialchars($y['datum_abgebucht']) ?>
+                    <th id="th_betrag">Betrag</th>
-                    </td>
-                    <td class="td_datum"
-                        onClick="ändereUmsatz(<?= htmlspecialchars($y['kontobewegung_id']) ?>, <?= htmlspecialchars($konto_id) ?>)">
-                        <?= htmlspecialchars($y['datum_ausgegeben']) ?>
-                    </td>
-                    <td class="td_text"
-                        onClick="ändereUmsatz(<?= htmlspecialchars($y['kontobewegung_id']) ?>, <?= htmlspecialchars($konto_id) ?>)">
-                        <?= htmlspecialchars($y['beschreibung']) ?>
-                    </td>
-                    <td class="<?= $y['betrag'] < 0 ? 'td_zahl_neg' : 'td_zahl_pos' ?>"
-                        onClick="ändereUmsatz(<?= htmlspecialchars($y['kontobewegung_id']) ?>, <?= htmlspecialchars($konto_id) ?>)">
-                        <?= number_format($y['betrag'], 2, ",", ".") ?> €
-                    </td>
-
-                    <form id="hiddenFormÄndereUmsatz" method="post" action="kontobewegung_edit.php">
-                        <input id="hiddenInputÄndereUmsatzKontobewegungID" type="hidden" name="kontobewegung_id">
-                        <input id="hiddenInputÄndereUmsatzKontoID" type="hidden" name="konto_id">
-                        <input id="hiddenInputEditTyp" type="hidden" name="editTyp" value="edit">
-                    </form>
                 </tr>
-            <?php endforeach; ?>
+            </thead>
+            <tbody id="tableBody">
+                <?php foreach ($kontobewegung as $y): ?>
+                    <tr <?= $y['kostenfix_id'] ? 'class="konto_fixKosten"' : 'class="standard"' ?>>
+                        <td class="td_datum"
+                            onClick="ändereUmsatz(<?= htmlspecialchars($y['kontobewegung_id']) ?>, <?= htmlspecialchars($konto_id) ?>)">
+                            <?= empty($y['datum_abgebucht']) ? '' : htmlspecialchars($y['datum_abgebucht']) ?>
+                        </td>
+                        <td class="td_datum"
+                            onClick="ändereUmsatz(<?= htmlspecialchars($y['kontobewegung_id']) ?>, <?= htmlspecialchars($konto_id) ?>)">
+                            <?= htmlspecialchars($y['datum_ausgegeben']) ?>
+                        </td>
+                        <td class="td_text"
+                            onClick="ändereUmsatz(<?= htmlspecialchars($y['kontobewegung_id']) ?>, <?= htmlspecialchars($konto_id) ?>)">
+                            <?= htmlspecialchars($y['beschreibung']) ?>
+                        </td>
+                        <td class="<?= $y['betrag'] < 0 ? 'td_zahl_neg' : 'td_zahl_pos' ?>"
+                            onClick="ändereUmsatz(<?= htmlspecialchars($y['kontobewegung_id']) ?>, <?= htmlspecialchars($konto_id) ?>)">
+                            <?= number_format($y['betrag'], 2, ",", ".") ?> €
+                        </td>
+                    </tr>
+                <?php endforeach; ?>
+            </tbody>
         </table>
+
+        <form id="hiddenFormÄndereUmsatz" method="post" action="kontobewegung_edit.php">
+            <input id="hiddenInputÄndereUmsatzKontobewegungID" type="hidden" name="kontobewegung_id">
+            <input id="hiddenInputÄndereUmsatzKontoID" type="hidden" name="konto_id">
+            <input id="hiddenInputEditTyp" type="hidden" name="editTyp" value="edit">
+        </form>
     </div>
 </body>
 

style.css

@@ -291,6 +291,16 @@ td.td_datum {
     margin-right: 20px;
 }
 
+#rangePicker {
+    width: 90%;
+    background-color: rgb(185, 185, 185);
+    border: none;
+    text-align: center;
+    color: black;
+    line-height: 0.8;
+    font-size: 0.7rem;
+}
+
 /****************************************/
 /*            Umsatz_edit               */
 /****************************************/