search-results.js
Ohne JS: search-results.php sortiert/filtert/paginiert komplett serverseitig anhand der GET-Parameter (?sort=&category=&page=) und cached dabei den Session-Datensatz — es wird keine neue Suche ausgelöst, nur der bestehende $_SESSION["search_results"]-Datensatz neu aufbereitet. Echte <a href>-Links für die Pagination, ein <noscript>-Submit-Button für Sortierung/Filter. Mit JS: results-app.js lädt den kompletten Datensatz einmalig per fetch() von einem neuen schlanken JSON-Endpoint nach und übernimmt Sortierung, Filterung und Pagination danach zu 100% im Browser — keine weiteren Serveranfragen mehr, kein Page-Reload. sorter.js, filter.js, paginator.js werden durch die eine Datei results-app.js ersetzt (löst den Button-Konflikt).
This commit is contained in:
+96
-75
@@ -2,20 +2,37 @@
|
||||
if (session_status() === PHP_SESSION_NONE) {
|
||||
session_start();
|
||||
}
|
||||
require_once __DIR__ . '/../includes/resultsHelper.php';
|
||||
|
||||
$all_results = $_SESSION["search_results"] ?? [];
|
||||
$rawResults = $_SESSION["search_results"] ?? [];
|
||||
$query = $_SESSION["search_query"] ?? "";
|
||||
$totalResultsCount = count($all_results);
|
||||
|
||||
$limit = isset($_GET['limit']) ? (int)$_GET['limit'] : 10;
|
||||
// Sortierung / Kategorie / Limit: GET-Parameter haben Vorrang, sonst
|
||||
// Rückfall auf die zuletzt in der Session gemerkten Werte. So bleibt
|
||||
// z.B. ein reiner Pagination-Link (?page=2) bei der aktuellen
|
||||
// Sortierung/Filterung.
|
||||
$currentSort = $_GET['sort'] ?? ($_SESSION['search_sort'] ?? 'alphabet');
|
||||
if (!in_array($currentSort, ['alphabet', 'likes', 'newest', 'oldest'])) {
|
||||
$currentSort = 'alphabet';
|
||||
}
|
||||
$_SESSION['search_sort'] = $currentSort;
|
||||
|
||||
$currentCategory = strtolower($_GET['category'] ?? ($_SESSION['search_category'] ?? 'all'));
|
||||
$_SESSION['search_category'] = $currentCategory;
|
||||
|
||||
$limit = isset($_GET['limit']) ? (int)$_GET['limit'] : ($_SESSION['search_limit'] ?? 10);
|
||||
if (!in_array($limit, [10, 20, 50, 100])) {
|
||||
$limit = 10;
|
||||
}
|
||||
$_SESSION['search_limit'] = $limit;
|
||||
|
||||
// Gesamtseitenzahl
|
||||
$totalPages = max(1, ceil($totalResultsCount / $limit));
|
||||
// Serverseitig sortieren + filtern (gleiche Logik wie im JSON-Endpoint für JS-Nutzer)
|
||||
$filteredResults = sortSearchResults($rawResults, $currentSort);
|
||||
$filteredResults = filterSearchResultsByCategory($filteredResults, $currentCategory);
|
||||
|
||||
$totalResultsCount = count($filteredResults);
|
||||
$totalPages = max(1, (int)ceil($totalResultsCount / $limit));
|
||||
|
||||
// Aktuelle Seite auslesen und validieren
|
||||
$currentPage = isset($_GET['page']) ? (int)$_GET['page'] : 1;
|
||||
if ($currentPage < 1) {
|
||||
$currentPage = 1;
|
||||
@@ -23,42 +40,59 @@ if ($currentPage < 1) {
|
||||
$currentPage = $totalPages;
|
||||
}
|
||||
|
||||
// Startpunkt im Array berechnen (Offset)
|
||||
$offset = ($currentPage - 1) * $limit;
|
||||
|
||||
// Nur die Ergebnisse für die aktuelle Seite ausschneiden
|
||||
//$results = array_slice($all_results, $offset, $limit);
|
||||
$results = $all_results;
|
||||
// Dies ist die No-JS-Basisversion: nur die aktuelle Seite wird gerendert.
|
||||
// Bei aktiviertem JS lädt js/results-app.js zusätzlich den kompletten
|
||||
// Datensatz nach (ein einziger Request) und übernimmt Sortierung, Filter
|
||||
// und Pagination danach komplett im Browser, ohne weitere Serveranfragen.
|
||||
$results = array_slice($filteredResults, $offset, $limit);
|
||||
$resultCount = count($results);
|
||||
|
||||
// Kategorien für das Auswahlfeld (Wert => Label)
|
||||
$categories = [
|
||||
'Deutsch' => 'Deutsch', 'Englisch' => 'Englisch', 'Franzoesisch' => 'Französisch',
|
||||
'Latein' => 'Latein', 'Literatur' => 'Literatur', 'Mathematik' => 'Mathematik',
|
||||
'Biologie' => 'Biologie', 'Informatik' => 'Informatik', 'Chemie' => 'Chemie',
|
||||
'Physik' => 'Physik', 'Astronomie' => 'Astronomie', 'Geschichte' => 'Geschichte',
|
||||
'Erdkunde' => 'Erdkunde', 'Sozialkunde' => 'Sozialkunde', 'Wirtschaftskunde' => 'Wirtschaftskunde',
|
||||
'Religion' => 'Religion', 'Ethikunterricht' => 'Ethikunterricht', 'Philosophie' => 'Philosophie',
|
||||
'Psychologie' => 'Psychologie', 'Kunst' => 'Kunst', 'Musik' => 'Musik', 'Theater' => 'Theater',
|
||||
'Technik' => 'Technik', 'Werken' => 'Werken', 'Hauswirtschaft' => 'Hauswirtschaft', 'Sport' => 'Sport',
|
||||
];
|
||||
?>
|
||||
<noscript>
|
||||
Bitte JavaScript aktivieren!
|
||||
</noscript>
|
||||
<!--
|
||||
Seite: Suchergebnisse
|
||||
Inhalt: Zeigt die Ergebnisse einer Suche an
|
||||
Inhalt: Zeigt die Ergebnisse einer Suche an.
|
||||
Funktioniert ohne JavaScript (serverseitige Sortierung/Filter/Pagination
|
||||
über echte Links + Formulare) und wird bei aktiviertem JS von
|
||||
js/results-app.js vollständig client-seitig übernommen.
|
||||
-->
|
||||
<div class="s-res-layout-grid">
|
||||
<?php include_once "includes/alertMessages.php"?>
|
||||
<?php include_once "includes/alertMessages.php" ?>
|
||||
|
||||
<!-- Links: Seitenleiste für Filter und Suche -->
|
||||
<aside class="s-res-sidebar">
|
||||
|
||||
<!-- Sortierfuntion Box und Such Box-->
|
||||
<!-- Formular 1: startet eine NEUE Suche (löst immer einen Server-Request aus) -->
|
||||
<form action="php/controller/search-results-controller.php" method="GET" id="search-form-id" class="s-res-sidebar-form">
|
||||
|
||||
<input type="hidden" id="s-res-page-input" name="page" value="<?php echo $_GET['page'] ?? 1; ?>">
|
||||
|
||||
<div class="s-res-sidebar-box">
|
||||
<h3 class="s-res-sidebar-title">Suche anpassen</h3>
|
||||
<input type="search" id="site-search" name="q" placeholder="Suchen..." class="nav__search" value="<?php echo htmlspecialchars($query); ?>" maxlength="50" required>
|
||||
<button type="submit" class="nav__search-button">Suchen</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Formular 2: sortiert/filtert die BEREITS gefundenen Ergebnisse.
|
||||
Ohne JS: echter Reload dieser Seite, aber ohne erneute Datenbank-Suche.
|
||||
Mit JS: results-app.js übernimmt das live im Browser, der Submit-Button
|
||||
wird dafür nicht benötigt und über <noscript> versteckt. -->
|
||||
<form action="index.php" method="GET" id="s-res-filter-form" class="s-res-sidebar-form">
|
||||
<input type="hidden" name="pfad" value="search-results">
|
||||
<input type="hidden" name="q" value="<?php echo htmlspecialchars($query); ?>">
|
||||
|
||||
<div class="s-res-sidebar-box">
|
||||
<h3 class="s-res-sidebar-title">Sortierung</h3>
|
||||
<?php $currentSort = $_SESSION['search_sort'] ?? 'alphabet'; ?>
|
||||
<div class="s-res-filter-group">
|
||||
<label class="s-res-filter-option">
|
||||
<input type="radio" name="sort" value="alphabet" class="sort-radio" <?php echo $currentSort === 'alphabet' ? 'checked' : ''; ?>>
|
||||
@@ -81,37 +115,17 @@ $resultCount = count($results);
|
||||
|
||||
<div class="s-res-sidebar-box">
|
||||
<h3 class="s-res-sidebar-title">Kategorie filtern</h3>
|
||||
<select id="category-filter" class="s-res-limit-select" style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #cbd5e1;">
|
||||
<option value="all">Alle Kategorien</option>
|
||||
<option value="Deutsch">Deutsch</option>
|
||||
<option value="Englisch">Englisch</option>
|
||||
<option value="Franzoesisch">Französisch</option>
|
||||
<option value="Latein">Latein</option>
|
||||
<option value="Literatur">Literatur</option>
|
||||
<option value="Mathematik">Mathematik</option>
|
||||
<option value="Biologie">Biologie</option>
|
||||
<option value="Informatik">Informatik</option>
|
||||
<option value="Chemie">Chemie</option>
|
||||
<option value="Physik">Physik</option>
|
||||
<option value="Astronomie">Astronomie</option>
|
||||
<option value="Geschichte">Geschichte</option>
|
||||
<option value="Erdkunde">Erdkunde</option>
|
||||
<option value="Sozialkunde">Sozialkunde</option>
|
||||
<option value="Wirtschaftskunde">Wirtschaftskunde</option>
|
||||
<option value="Religion">Religion</option>
|
||||
<option value="Ethikunterricht">Ethikunterricht</option>
|
||||
<option value="Philosophie">Philosophie</option>
|
||||
<option value="Psychologie">Psychologie</option>
|
||||
<option value="Kunst">Kunst</option>
|
||||
<option value="Musik">Musik</option>
|
||||
<option value="Theater">Theater</option>
|
||||
<option value="Technik">Technik</option>
|
||||
<option value="Werken">Werken</option>
|
||||
<option value="Hauswirtschaft">Hauswirtschaft</option>
|
||||
<option value="Sport">Sport</option>
|
||||
<select id="category-filter" name="category" class="s-res-limit-select" style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #cbd5e1;">
|
||||
<option value="all" <?php echo $currentCategory === 'all' ? 'selected' : ''; ?>>Alle Kategorien</option>
|
||||
<?php foreach ($categories as $value => $label): ?>
|
||||
<option value="<?php echo htmlspecialchars($value); ?>" <?php echo $currentCategory === strtolower($value) ? 'selected' : ''; ?>><?php echo htmlspecialchars($label); ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<noscript>
|
||||
<button type="submit" class="nav__search-button">Filter anwenden</button>
|
||||
</noscript>
|
||||
</form>
|
||||
|
||||
</aside>
|
||||
@@ -120,18 +134,16 @@ $resultCount = count($results);
|
||||
|
||||
<div class="s-res-header">
|
||||
<h1 class="s-res-main-title">Suchergebnisse</h1>
|
||||
<p class="s-res-meta"><?php echo $totalResultsCount; ?> Treffer für Ihre Suchanfrage "<?php echo htmlspecialchars($query); ?>"</p>
|
||||
<p class="s-res-meta"><span id="s-res-result-count"><?php echo $totalResultsCount; ?></span> Treffer für Ihre Suchanfrage "<?php echo htmlspecialchars($query); ?>"</p>
|
||||
</div>
|
||||
|
||||
<!-- Ergebnisliste -->
|
||||
<div class="s-res-list">
|
||||
<?php
|
||||
if (!empty($results)): ?>
|
||||
|
||||
<?php foreach ($results as $item):
|
||||
// Anzahl der Likes ermitteln (falls es ein Array ist, zählen; falls Zahl, direkt nutzen)
|
||||
$likesCount = isset($item['likes']) && is_array($item['likes']) ? count($item['likes']) : ($item['likes'] ?? 0);
|
||||
?>
|
||||
<?php if (!empty($results)): ?>
|
||||
|
||||
<?php foreach ($results as $item):
|
||||
$likesCount = getLikeCount($item);
|
||||
?>
|
||||
<div class="s-res-item" data-likes="<?php echo $likesCount; ?>" data-category="<?php echo strtolower($item['category'] ?? ''); ?>">
|
||||
<div class="s-res-content">
|
||||
<h2 class="s-res-item-title">
|
||||
@@ -151,41 +163,50 @@ $resultCount = count($results);
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
||||
<?php
|
||||
elseif (isset($_SESSION["search_query"]) && $_SESSION["search_query"] !== "" && $resultCount === 0): ?>
|
||||
<p>Keine Beiträge zu diesem Suchbegriff gefunden.</p>
|
||||
<?php
|
||||
elseif (isset($_SESSION["message"]) && $_SESSION["message"] == "invalid_search_query"): ?>
|
||||
<?php elseif (isset($_SESSION["message"]) && $_SESSION["message"] === "invalid_search_query"): ?>
|
||||
<p>Unzulässige Suchanfrage</p>
|
||||
|
||||
|
||||
<?php elseif ($query !== "" && $totalResultsCount === 0 && count($rawResults) > 0): ?>
|
||||
<p>Keine Beiträge in dieser Kategorie gefunden.</p>
|
||||
|
||||
<?php elseif ($query !== "" && $totalResultsCount === 0): ?>
|
||||
<p>Keine Beiträge zu diesem Suchbegriff gefunden.</p>
|
||||
|
||||
<?php endif; ?>
|
||||
<?php
|
||||
unset($_SESSION["message"]);
|
||||
?>
|
||||
<?php unset($_SESSION["message"]); ?>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="s-res-pagination-footer">
|
||||
|
||||
<!-- Auswahl der Ergebnisse pro Seite -->
|
||||
<!-- Auswahl der Ergebnisse pro Seite. Gehört per form="..." logisch
|
||||
zum Filterformular oben, bleibt aber optisch am Fuß der Liste. -->
|
||||
<div class="s-res-limit-selector">
|
||||
<label for="s-res-per-page" class="s-res-limit-label">Ergebnisse pro Seite:</label>
|
||||
<select id="s-res-per-page" name="limit" class="s-res-limit-select">
|
||||
<select id="s-res-per-page" name="limit" form="s-res-filter-form" class="s-res-limit-select">
|
||||
<option value="10" <?php echo $limit === 10 ? 'selected' : ''; ?>>10</option>
|
||||
<option value="20" <?php echo $limit === 20 ? 'selected' : ''; ?>>20</option>
|
||||
<option value="50" <?php echo $limit === 50 ? 'selected' : ''; ?>>50</option>
|
||||
<option value="100" <?php echo $limit === 100 ? 'selected' : ''; ?>>100</option>
|
||||
</select>
|
||||
<noscript><button type="submit" form="s-res-filter-form" class="nav__search-button">Übernehmen</button></noscript>
|
||||
</div>
|
||||
|
||||
<div class="s-res-page-navigation">
|
||||
<button type="button" class="s-res-page-btn" id="prev-page-btn" data-page="0">«</button>
|
||||
|
||||
<span id="dynamic-page-numbers"></span>
|
||||
|
||||
<button type="button" class="s-res-page-btn" id="next-page-btn" data-page="2">»</button>
|
||||
</div>
|
||||
<nav class="s-res-page-navigation" aria-label="Seitennavigation">
|
||||
<!-- No-JS-Fallback: echte, funktionierende Links -->
|
||||
<noscript>
|
||||
<?php echo renderNoJsPagination($currentPage, $totalPages, $query, $currentSort, $currentCategory, $limit); ?>
|
||||
</noscript>
|
||||
|
||||
<!-- JS-Version: wird per results-app.js befüllt/eingeblendet -->
|
||||
<div id="js-page-navigation" style="display:none;">
|
||||
<button type="button" class="s-res-page-btn" id="prev-page-btn">«</button>
|
||||
<span id="dynamic-page-numbers"></span>
|
||||
<button type="button" class="s-res-page-btn" id="next-page-btn">»</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,108 @@
|
||||
<?php
|
||||
/**
|
||||
* Hilfsfunktionen rund um die Suchergebnisse.
|
||||
*
|
||||
* Werden sowohl von content/search-results.php (No-JS-Rendering)
|
||||
* als auch von php/controller/search-results-data.php (JSON für
|
||||
* die JS-Hydration) genutzt, damit Sortier-/Filterlogik nur an
|
||||
* einer Stelle gepflegt werden muss.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Anzahl der Likes robust ermitteln (Array von Likes ODER bereits eine Zahl).
|
||||
*/
|
||||
function getLikeCount($item): int
|
||||
{
|
||||
if (isset($item['likes']) && is_array($item['likes'])) {
|
||||
return count($item['likes']);
|
||||
}
|
||||
return (int)($item['likes'] ?? 0);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sortiert ein Array von Ergebnis-Assoziativarrays (wie in $_SESSION["search_results"] abgelegt).
|
||||
*/
|
||||
function sortSearchResults(array $results, string $sortStyle): array
|
||||
{
|
||||
switch ($sortStyle) {
|
||||
case 'likes':
|
||||
usort($results, function ($a, $b) {
|
||||
return getLikeCount($b) <=> getLikeCount($a);
|
||||
});
|
||||
break;
|
||||
case 'newest':
|
||||
usort($results, function ($a, $b) {
|
||||
return strcmp($b['creationDate'] ?? '', $a['creationDate'] ?? '');
|
||||
});
|
||||
break;
|
||||
case 'oldest':
|
||||
usort($results, function ($a, $b) {
|
||||
return strcmp($a['creationDate'] ?? '', $b['creationDate'] ?? '');
|
||||
});
|
||||
break;
|
||||
case 'alphabet':
|
||||
default:
|
||||
usort($results, function ($a, $b) {
|
||||
return strcasecmp($a['title'] ?? '', $b['title'] ?? '');
|
||||
});
|
||||
break;
|
||||
}
|
||||
return $results;
|
||||
}
|
||||
|
||||
/**
|
||||
* Filtert ein Array von Ergebnissen nach Kategorie ('all' = kein Filter).
|
||||
*/
|
||||
function filterSearchResultsByCategory(array $results, string $category): array
|
||||
{
|
||||
$category = strtolower(trim($category));
|
||||
if ($category === '' || $category === 'all') {
|
||||
return $results;
|
||||
}
|
||||
return array_values(array_filter($results, function ($item) use ($category) {
|
||||
return strtolower($item['category'] ?? '') === $category;
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* Baut eine Such-Ergebnis-URL für einen bestimmten Seitenwechsel (No-JS-Pagination).
|
||||
*/
|
||||
function buildSearchResultsUrl(int $page, string $query, string $sort, string $category, int $limit): string
|
||||
{
|
||||
return "index.php?pfad=search-results"
|
||||
. "&q=" . urlencode($query)
|
||||
. "&sort=" . urlencode($sort)
|
||||
. "&category=" . urlencode($category)
|
||||
. "&limit=" . $limit
|
||||
. "&page=" . $page;
|
||||
}
|
||||
|
||||
/**
|
||||
* Rendert eine rein serverseitige Pagination (echte <a>-Links) für den No-JS-Fall.
|
||||
*/
|
||||
function renderNoJsPagination(int $currentPage, int $totalPages, string $query, string $sort, string $category, int $limit): string
|
||||
{
|
||||
$html = '';
|
||||
|
||||
if ($currentPage > 1) {
|
||||
$html .= '<a class="s-res-page-btn" href="' . htmlspecialchars(buildSearchResultsUrl($currentPage - 1, $query, $sort, $category, $limit)) . '">«</a> ';
|
||||
} else {
|
||||
$html .= '<span class="s-res-page-btn" aria-disabled="true">«</span> ';
|
||||
}
|
||||
|
||||
for ($i = 1; $i <= $totalPages; $i++) {
|
||||
if ($i === $currentPage) {
|
||||
$html .= '<span class="s-res-page-btn s-res-page-btn-active">' . $i . '</span> ';
|
||||
} else {
|
||||
$html .= '<a class="s-res-page-btn" href="' . htmlspecialchars(buildSearchResultsUrl($i, $query, $sort, $category, $limit)) . '">' . $i . '</a> ';
|
||||
}
|
||||
}
|
||||
|
||||
if ($currentPage < $totalPages) {
|
||||
$html .= '<a class="s-res-page-btn" href="' . htmlspecialchars(buildSearchResultsUrl($currentPage + 1, $query, $sort, $category, $limit)) . '">»</a>';
|
||||
} else {
|
||||
$html .= '<span class="s-res-page-btn" aria-disabled="true">»</span>';
|
||||
}
|
||||
|
||||
return $html;
|
||||
}
|
||||
@@ -65,11 +65,10 @@ if ($pfad === "deleteAccount") {
|
||||
<link rel="stylesheet" href="css/message.css">
|
||||
<link rel="stylesheet" href="css/showCategory.css">
|
||||
|
||||
<script src="js/paginator.js" async></script>
|
||||
<script src="js/sorter.js" async></script>
|
||||
<script src="js/comments.js" defer></script>
|
||||
<script src="js/editor.js" async></script>
|
||||
<script src="js/filter.js" async></script>
|
||||
<script src="js/search-results.js" async></script>
|
||||
|
||||
|
||||
<title>EduForge</title>
|
||||
</head>
|
||||
|
||||
@@ -0,0 +1,238 @@
|
||||
/**
|
||||
* Übernimmt Sortierung, Kategorie-Filter und Pagination der Suchergebnisse
|
||||
* vollständig im Browser (kein Reload, keine erneute Suche).
|
||||
*
|
||||
* Ablauf:
|
||||
* 1. Kompletten Ergebnis-Datensatz einmalig per fetch() nachladen
|
||||
* (php/controller/search-results-data.php, liest nur die Session-Daten,
|
||||
* keine erneute Datenbank-Suche).
|
||||
* 2. Sortieren + filtern + paginieren rein im Speicher (JS-Array).
|
||||
* 3. Ergebnisliste + Pagination-UI daraus neu rendern.
|
||||
*
|
||||
* Ersetzt sorter.js, filter.js und paginator.js, deren Klick-Handler sich
|
||||
* gegenseitig ins Gehege kamen (Formular-Submit vs. clientseitiges Hiden).
|
||||
* Ohne JS bleibt die serverseitig gerenderte Seite (echte Links/Formulare)
|
||||
* voll funktionsfähig.
|
||||
*/
|
||||
(function () {
|
||||
const state = {
|
||||
allItems: [],
|
||||
sort: 'alphabet',
|
||||
category: 'all',
|
||||
itemsPerPage: 10,
|
||||
currentPage: 1,
|
||||
};
|
||||
|
||||
let listContainer, sortRadios, categorySelect, limitSelect;
|
||||
let prevBtn, nextBtn, numbersContainer, jsNav, resultCountEl;
|
||||
|
||||
function init() {
|
||||
listContainer = document.querySelector('.s-res-list');
|
||||
if (!listContainer) return;
|
||||
|
||||
sortRadios = document.querySelectorAll('.sort-radio');
|
||||
categorySelect = document.getElementById('category-filter');
|
||||
limitSelect = document.getElementById('s-res-per-page');
|
||||
prevBtn = document.getElementById('prev-page-btn');
|
||||
nextBtn = document.getElementById('next-page-btn');
|
||||
numbersContainer = document.getElementById('dynamic-page-numbers');
|
||||
jsNav = document.getElementById('js-page-navigation');
|
||||
resultCountEl = document.getElementById('s-res-result-count');
|
||||
|
||||
const checkedRadio = document.querySelector('.sort-radio:checked');
|
||||
state.sort = checkedRadio ? checkedRadio.value : 'alphabet';
|
||||
state.category = categorySelect ? categorySelect.value : 'all';
|
||||
state.itemsPerPage = limitSelect ? (parseInt(limitSelect.value, 10) || 10) : 10;
|
||||
|
||||
fetchFullDataset()
|
||||
.then(function (data) {
|
||||
state.allItems = data.results || [];
|
||||
attachEvents();
|
||||
render();
|
||||
if (jsNav) jsNav.style.display = 'flex';
|
||||
})
|
||||
.catch(function (err) {
|
||||
// JSON-Endpoint nicht erreichbar: die serverseitig gerenderte
|
||||
// (No-JS-)Ansicht bleibt sichtbar und funktioniert weiter.
|
||||
console.error('Suchergebnisse konnten nicht nachgeladen werden:', err);
|
||||
});
|
||||
}
|
||||
|
||||
function fetchFullDataset() {
|
||||
return fetch('php/controller/search-results-data.php', { credentials: 'same-origin' })
|
||||
.then(function (res) {
|
||||
if (!res.ok) throw new Error('HTTP ' + res.status);
|
||||
return res.json();
|
||||
});
|
||||
}
|
||||
|
||||
function getFilteredSortedItems() {
|
||||
let items = state.allItems;
|
||||
|
||||
if (state.category !== 'all') {
|
||||
const wanted = state.category.toLowerCase();
|
||||
items = items.filter(function (item) {
|
||||
return (item.category || '').toLowerCase() === wanted;
|
||||
});
|
||||
}
|
||||
|
||||
items = items.slice().sort(function (a, b) {
|
||||
if (state.sort === 'likes') {
|
||||
return (b.likes || 0) - (a.likes || 0);
|
||||
}
|
||||
if (state.sort === 'newest' || state.sort === 'oldest') {
|
||||
return state.sort === 'newest' ? (b.id - a.id) : (a.id - b.id);
|
||||
}
|
||||
// alphabet (Standard)
|
||||
return (a.title || '').toLowerCase().localeCompare((b.title || '').toLowerCase());
|
||||
});
|
||||
|
||||
return items;
|
||||
}
|
||||
|
||||
function render() {
|
||||
const items = getFilteredSortedItems();
|
||||
|
||||
if (resultCountEl) resultCountEl.textContent = items.length;
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(items.length / state.itemsPerPage));
|
||||
if (state.currentPage > totalPages) state.currentPage = totalPages;
|
||||
if (state.currentPage < 1) state.currentPage = 1;
|
||||
|
||||
const start = (state.currentPage - 1) * state.itemsPerPage;
|
||||
const pageItems = items.slice(start, start + state.itemsPerPage);
|
||||
|
||||
listContainer.innerHTML = '';
|
||||
if (pageItems.length === 0) {
|
||||
const empty = document.createElement('p');
|
||||
empty.textContent = 'Keine Beiträge gefunden.';
|
||||
listContainer.appendChild(empty);
|
||||
} else {
|
||||
pageItems.forEach(function (item) {
|
||||
listContainer.appendChild(buildCard(item));
|
||||
});
|
||||
}
|
||||
|
||||
updatePaginatorUI(state.currentPage, totalPages);
|
||||
}
|
||||
|
||||
function buildCard(item) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 's-res-item';
|
||||
card.setAttribute('data-likes', item.likes);
|
||||
card.setAttribute('data-category', (item.category || '').toLowerCase());
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.className = 's-res-link';
|
||||
link.href = 'index.php?pfad=showArticle&id=' + encodeURIComponent(item.id);
|
||||
link.textContent = item.title;
|
||||
|
||||
const title = document.createElement('h2');
|
||||
title.className = 's-res-item-title';
|
||||
title.appendChild(link);
|
||||
|
||||
const authorName = document.createElement('span');
|
||||
authorName.className = 's-res-author-name';
|
||||
authorName.textContent = item.author;
|
||||
|
||||
const author = document.createElement('p');
|
||||
author.className = 's-res-author';
|
||||
author.append('Von: ', authorName);
|
||||
|
||||
const likes = document.createElement('span');
|
||||
likes.className = 's-res-likes';
|
||||
likes.textContent = '❤️ ' + item.likes;
|
||||
|
||||
const metaRow = document.createElement('div');
|
||||
metaRow.className = 's-res-meta-row';
|
||||
metaRow.append(author, likes);
|
||||
|
||||
const content = document.createElement('div');
|
||||
content.className = 's-res-content';
|
||||
content.append(title, metaRow);
|
||||
|
||||
const arrow = document.createElement('div');
|
||||
arrow.className = 's-res-arrow';
|
||||
arrow.textContent = '→';
|
||||
|
||||
card.append(content, arrow);
|
||||
return card;
|
||||
}
|
||||
|
||||
function updatePaginatorUI(currentPage, totalPages) {
|
||||
if (!prevBtn || !nextBtn || !numbersContainer) return;
|
||||
|
||||
prevBtn.disabled = currentPage <= 1;
|
||||
nextBtn.disabled = currentPage >= totalPages;
|
||||
|
||||
numbersContainer.innerHTML = '';
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
const btn = document.createElement('button');
|
||||
btn.type = 'button';
|
||||
btn.className = 's-res-page-btn' + (i === currentPage ? ' s-res-page-btn-active' : '');
|
||||
btn.textContent = i;
|
||||
btn.addEventListener('click', function () {
|
||||
state.currentPage = i;
|
||||
render();
|
||||
});
|
||||
numbersContainer.appendChild(btn);
|
||||
}
|
||||
}
|
||||
|
||||
function attachEvents() {
|
||||
sortRadios.forEach(function (radio) {
|
||||
radio.addEventListener('change', function () {
|
||||
state.sort = this.value;
|
||||
state.currentPage = 1;
|
||||
render();
|
||||
});
|
||||
});
|
||||
|
||||
if (categorySelect) {
|
||||
categorySelect.addEventListener('change', function () {
|
||||
state.category = this.value;
|
||||
state.currentPage = 1;
|
||||
render();
|
||||
});
|
||||
}
|
||||
|
||||
if (limitSelect) {
|
||||
limitSelect.addEventListener('change', function () {
|
||||
state.itemsPerPage = parseInt(this.value, 10) || 10;
|
||||
state.currentPage = 1;
|
||||
render();
|
||||
});
|
||||
}
|
||||
|
||||
if (prevBtn) {
|
||||
prevBtn.addEventListener('click', function () {
|
||||
if (state.currentPage > 1) {
|
||||
state.currentPage -= 1;
|
||||
render();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (nextBtn) {
|
||||
nextBtn.addEventListener('click', function () {
|
||||
state.currentPage += 1;
|
||||
render();
|
||||
});
|
||||
}
|
||||
|
||||
// Mit aktivem JS übernimmt render() Sortierung/Filter live;
|
||||
// ein echtes Absenden des Filterformulars (No-JS-Fallback) ist dann nicht mehr nötig.
|
||||
const filterForm = document.getElementById('s-res-filter-form');
|
||||
if (filterForm) {
|
||||
filterForm.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
@@ -16,37 +16,15 @@ if ($_SERVER["REQUEST_METHOD"] === "GET" && isset($_GET["q"])) {
|
||||
$_SESSION["message"] = "invalid_search_query";
|
||||
} else {
|
||||
try {
|
||||
|
||||
|
||||
$articleManager = ArticleManager::getInstance();
|
||||
$userManager = UserManager::getInstance();
|
||||
|
||||
|
||||
$results = $articleManager->search($search);
|
||||
|
||||
$sortStyle = $_GET['sort'] ?? 'alphabet';
|
||||
$_SESSION['search_sort'] = $sortStyle;
|
||||
|
||||
if ($sortStyle === 'alphabet') {
|
||||
// Titel aufsteigend alphabetiisch sortiert
|
||||
usort($results, function ($a, $b) {
|
||||
return strcasecmp($a->getTitle(), $b->getTitle());
|
||||
});
|
||||
} elseif ($sortStyle === 'likes') {
|
||||
usort($results, function($a, $b) {
|
||||
return $b->getLikeCount() <=> $a->getLikeCount();
|
||||
});
|
||||
} elseif ($sortStyle === 'newest') {
|
||||
// Datum neu zu alt sortiert
|
||||
usort($results, function($a, $b) {
|
||||
return strcmp($b->getCreationDate(), $a->getCreationDate());
|
||||
});
|
||||
} elseif ($sortStyle === 'oldest') {
|
||||
// Datum alt zu neu sortiert
|
||||
usort($results, function($a, $b) {
|
||||
return strcmp($a->getCreationDate(), $b->getCreationDate());
|
||||
});
|
||||
}
|
||||
|
||||
// Ergebnisse werden in ein flaches array umgewandelt, da sont incomplete-PHP error im Ergebnis
|
||||
// Sortierung/Filterung passiert nicht mehr hier, sondern zentral in
|
||||
// content/search-results.php (No-JS) bzw. search-results-data.php (JS),
|
||||
// damit ein Sortier-/Filterwechsel keine erneute Suche mehr braucht.
|
||||
$safeArrayResults = [];
|
||||
foreach ($results as $obj) {
|
||||
$safeArrayResults[] = [
|
||||
@@ -60,25 +38,30 @@ if ($_SERVER["REQUEST_METHOD"] === "GET" && isset($_GET["q"])) {
|
||||
"likes" => $obj->getLikes(),
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
$_SESSION["search_results"] = $safeArrayResults;
|
||||
$_SESSION["search_query"] = $search;
|
||||
$_SESSION["message"] = "new_search_results";
|
||||
|
||||
} catch (Exception $e){
|
||||
} catch (Exception $e) {
|
||||
$_SESSION["message"] = "internal_error";
|
||||
}
|
||||
}
|
||||
|
||||
$sort = $_GET['sort'] ?? 'alphabet';
|
||||
$sort = $_GET['sort'] ?? 'alphabet';
|
||||
$_SESSION['search_sort'] = $sort;
|
||||
|
||||
$category = $_GET['category'] ?? 'all';
|
||||
$_SESSION['search_category'] = $category;
|
||||
|
||||
$limit = isset($_GET['limit']) ? (int)$_GET['limit'] : 10;
|
||||
if (!searchLimitValidator($limit)) {
|
||||
$limit = 10;
|
||||
}
|
||||
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
|
||||
header("Location: ../../index.php?pfad=search-results&q=" . urlencode($search) . "&sort=" . urlencode($sort) . "&limit=" . $limit . "&page=" . $page);
|
||||
exit();
|
||||
|
||||
}
|
||||
$_SESSION['search_limit'] = $limit;
|
||||
|
||||
?>
|
||||
// Neue Suche -> immer wieder bei Seite 1 beginnen
|
||||
header("Location: ../../index.php?pfad=search-results&q=" . urlencode($search) . "&sort=" . urlencode($sort) . "&category=" . urlencode($category) . "&limit=" . $limit . "&page=1");
|
||||
exit();
|
||||
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
<?php
|
||||
/**
|
||||
* Liefert den vollständigen, zuletzt gefundenen Ergebnis-Datensatz als JSON.
|
||||
*
|
||||
* Wird von js/results-app.js EINMALIG per fetch() geladen, damit Sortierung,
|
||||
* Filterung und Pagination danach komplett im Browser laufen können, ohne
|
||||
* weitere Serveranfragen oder eine erneute Datenbank-Suche auszulösen.
|
||||
*/
|
||||
if (session_status() === PHP_SESSION_NONE) {
|
||||
session_start();
|
||||
}
|
||||
|
||||
header('Content-Type: application/json; charset=utf-8');
|
||||
|
||||
require_once __DIR__ . '/../../includes/resultsHelper.php';
|
||||
|
||||
$rawResults = $_SESSION['search_results'] ?? [];
|
||||
|
||||
$payload = array_map(function ($item) {
|
||||
return [
|
||||
'id' => $item['id'],
|
||||
'title' => $item['title'],
|
||||
'author' => $item['author'],
|
||||
'category' => $item['category'] ?? '',
|
||||
'likes' => getLikeCount($item),
|
||||
];
|
||||
}, $rawResults);
|
||||
|
||||
echo json_encode([
|
||||
'query' => $_SESSION['search_query'] ?? '',
|
||||
'results' => array_values($payload),
|
||||
]);
|
||||
Reference in New Issue
Block a user