Die Suche kann etwas dauern, weil intensiv gesucht wird
|
Eintragen, sortieren, filtern, löschen einer CSV-Datenbank |
So sieht´s aus |
Quellcode der PHP-Datei |
<?php
/* * Tabellenkalender * https://werner-zenk.de */ $verzeichnis = "../Extra/datei.csv"; $name = "user"; $passwort = "0000"; date_default_timezone_set("Europe/Berlin"); if (isset($_GET["aktualisieren"])) { // Name und Passwort überprüfen if ( $_POST["name"] == $name && $_POST["passwort"] == $passwort ) { // Eintragen if ($_POST["option"] == "eintragen") { if ( strpos($_POST["datum"], "T") && !empty($_POST["ereignis"]) ) { $daten = file_get_contents($verzeichnis); $datum = str_replace("T", " ", $_POST["datum"]); $ereignis = strip_tags($_POST["ereignis"]); $ereignis = str_replace(";", "", $ereignis); $daten .= PHP_EOL . $datum . ';' . $ereignis; file_put_contents($verzeichnis, $daten); } } // Löschen if ($_POST["option"] == "loeschen") { $daten = file($verzeichnis, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES); $index = array_search($_POST["id"], $daten); if ($index !== false) { array_splice($daten, $index, 1); file_put_contents($verzeichnis, implode(PHP_EOL, $daten)); } } } } // Auslesen if ( isset($_GET["auslesen"]) || isset($_GET["aktualisieren"]) ) { $daten = file($verzeichnis, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES); $tabelle = ' <table id="foobar-table"> <thead> <tr> <th data-type="number" title="Nach Nummer sortieren">#</th> <th data-type="number" title="Nach Datum sortieren">Datum</th> <th data-type="number" title="Nach Uhrzeit sortieren">Uhr</th> <th data-type="string" title="Nach Ereignis sortieren">Ereignis</th> <td><input type="radio" name="id" value="0" checked="checked" title="Kein Ereignis auswählen"></td> </tr> </thead> <tbody>'; foreach ($daten as $nr => $data) { list($datum, $ereignis) = explode(";", $data); sscanf($datum, "%4s-%2s-%2s %6s", $jahr, $monat, $tag, $uhr); $tabelle .= '<tr><td>' . ($nr + 1) . '</td><td>' . $jahr . '-' . $monat . '-' . $tag . '</td><td>' . $uhr . '</td><td>' . $ereignis . '</td><td><input type="radio" name="id" value="' . $datum . ';' . htmlspecialchars($ereignis) . '" title="Ereignis auswählen"></td></tr>'; } $tabelle .= '</tbody> </table>'; exit($tabelle);} ?> <html> <head> <style> table#foobar-table {padding:2px 2px 2px 2px; font-size:0.7em; background-color:lightgray;} /* Tabellenkopf festsetzen */ table#foobar-table thead {position: sticky; inset-block-start: 0; user-select: none;} /* Hintergrund Tabellenkopf */ table#foobar-table>thead>tr {background-color: #FFD2A6; text-align:left} table#foobar-table>thead>tr:hover {background-color: cyan; !important; cursor: pointer; text-align:left} /* Die Spalten der Tabelle anpassen */ table#foobar-table, table#foobar-table>thead>tr>th, table#foobar-table>tbody>tr>td {padding: 0px 0px 0px 0px; color: #000000;} /* Spalte in der Tabelle von der Sortierung ausschließen */ table#foobar-table>thead>tr>td {border: Solid 1px #888888; padding:0px 0px 0px 0px; color: lime; font-weight: bold; text-align: center;} /* Den Hintergrund zeilenweise einfärben */ table#foobar-table>tbody>tr:nth-child(even) {background-color: #FFFFFF;} table#foobar-table>tbody>tr:nth-child(odd) {background-color: #FFD2A6;} /* Pfeil nach oben */ .upArrow::after {content: "\2191"; color: #FFFFFF; text-shadow: 1px 1px 0px #000000; position: absolute;} /* Pfeil nach unten */ .dnArrow::after {content: "\2193"; color: #FFFFFF; text-shadow: 1px 1px 0px #000000; position: absolute;} input[name=ereignis], input[id=filter] {width: 200px;} label[for] {display: inline-block; width: 250px;} input[type=radio] {accent-color: rgb(255, 130, 4); width: 15px; height: 15px;} summary {cursor: Pointer; user-select: None; width:80%;} summary:hover, label:hover {color: rgb(255, 174, 94);} summary::marker {color: rgb(255, 174, 94);} input[type=text], input[type=password], input[type=search], input[type=datetime-local], button[type=button] {border: Solid 1px #cccccc !important; padding: 2px;} button[type=button]:hover {background-color: rgb(255, 174, 94);} :focus-visible {outline: Solid 1px rgb(255, 174, 94);}input[type=radio] {accent-color: rgb(255, 130, 4); width: 15px; height: 15px;} input {width: 200px; height: 15px;} </style> <body > <center> <form id="form" method="post"> <p><label for="filter">Suchen:</label><input placeholder="Geben sie einen Suchtext ein" type="search" class="filter-table" id="filter" data-for="#foobar-table"></p> <p id="ausgabe"></p> <details style="border:2px solid fuchsia; width:40%; text-align:left; padding:10px; font-size:1em"> <summary>Eintragen oder löschen</summary> <p><label for="datum">Datum:</label><input type="datetime-local" name="datum" id="datum" value="<?= date("Y-m-d\TH:i"); ?>"> <label for="ereignis">Ereignis:</label><input type="text" name="ereignis" id="ereignis"> <label><input type="radio" name="option" value="eintragen" checked="checked" required="required" title="Ereignis eintragen"> Eintragen</label>   <label><input type="radio" name="option" value="loeschen" title="Ereignis löschen"> Löschen</label> <label for="name">Name:</label><input type="text" name="name" value="user"id="name" autocomplete="username" required="required"> <label for="passwort">Passwort:</label><input type="password" value="0000"name="passwort" id="passwort" autocomplete="current-password" required="required"></p> <center><p><button type="button" id="button">Absenden</button></p> </details> </form> <script> // Auslesen fetch(`${document.URL}?auslesen`, { method: "GET", }) .then((antwort) => { return antwort.text(); }) .then((antwort) => { document.getElementById("ausgabe").innerHTML = antwort; initialisieren(); }); // Aktualisieren document.querySelector("#button").addEventListener("click", () => { if (document.getElementById("form").reportValidity()) { fetch(`${document.URL}?aktualisieren`, { method: "POST", body: new FormData(document.getElementById("form")), }) .then((antwort) => { return antwort.text(); }) .then((antwort) => { document.getElementById("ausgabe").innerHTML = antwort; document.getElementById("form").reset(); initialisieren(); }); } }); function initialisieren() { // HTML-Tabelle sortieren const table = document.getElementById("foobar-table"); const headers = table.querySelectorAll("th"); const tableBody = table.querySelector("tbody"); const rows = tableBody.querySelectorAll("tr"); const directions = Array.from(headers).map(function(header) { return ""; }); const transform = function(index, content) { const type = headers[index].getAttribute("data-type"); switch (type) { case "number": return parseFloat(content); case "string": default: return content; } }; const sortColumn = function(index, headers) { const cls = ["upArrow", "dnArrow"]; headers.forEach((header) => { document.getElementById(header.id).classList.remove(...cls); }); const direction = directions[index] || "asc"; const multiplier = (direction === "asc") ? 1 : -1; const cssSort = (direction === "asc") ? cls[0] : cls[1]; document.getElementById(index).classList.add(cssSort); const newRows = Array.from(rows); newRows.sort((rowA, rowB) => { const cellA = encodeURIComponent(rowA.querySelectorAll("td")[index].textContent.toLowerCase()); const cellB = encodeURIComponent(rowB.querySelectorAll("td")[index].textContent.toLowerCase()); const a = transform(index, cellA); const b = transform(index, cellB); switch (true) { case a > b: return 1 * multiplier; case a < b: return -1 * multiplier; case a === b: return 0; } }); [].forEach.call(rows, function(row) { tableBody.removeChild(row); }); directions[index] = direction === "asc" ? "desc" : "asc"; newRows.forEach(function(newRow) { tableBody.appendChild(newRow); }); }; [].forEach.call(headers, function(header, index) { header.setAttribute("id", index); header.addEventListener("click", () => { sortColumn(index, headers); }); }); // HTML-Tabelle filtern document.querySelectorAll('.filter-table').forEach(function(input) { var table = document.querySelector(input.dataset.for); var rows = table.querySelectorAll('tbody tr'); input.addEventListener('input', function(event) { rows.forEach(function(tr) { tr.hidden = !tr.textContent.toLowerCase().includes(input.value.toLowerCase()); }); }); }) } </script> </body> </html> |
Kontakt Datenschutz Impressum |
|