niklas.ortmann/webprogrammierung
0
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

WIP: Anpassung der results seite und erstellung der script-datei #37

Draft
viratex wants to merge 24 commits from SuchergebnisseJS into dev
pull from: SuchergebnisseJS
merge into: niklas.ortmann:dev
Conversation 3 Commits 24 Files Changed 6
+39 -14
2 changed files with 39 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 66eeac372c - Show all commits
content/search-results.php
+12 -14
View File
@@ -44,12 +44,11 @@ $resultCount = count($results);
<!-- Links: Seitenleiste für Filter und Suche -->
<aside class="s-res-sidebar">
<!-- Sortierfuntion Box und Such Box-->
<form id="search-form-id" action="php/controller/search-results-controller.php" method="GET" class="s-res-sidebar-form">
<!-- Dieses Feld hält die aktuelle Seitenzahl für den Submit bereit -->
<input type="hidden" name="page" id="s-res-page-input" value="<?php echo $currentPage; ?>">
<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">
<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>
@@ -60,20 +59,15 @@ $resultCount = count($results);
<?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" <?php echo $currentSort === 'alphabet' ? 'checked' : ''; ?> onchange="this.form.submit()">
<input type="radio" name="sort" value="alphabet" class="sort-radio" <?php echo $currentSort === 'alphabet' ? 'checked' : ''; ?>>
<span>Alphabetisch</span>
</label>
<!-- Noch disabled, da likes noch nicht implementiert-->
<label class="s-res-filter-option">
<input type="radio" name="sort" value="likes" <?php echo $currentSort === 'likes' ? 'checked' : ''; ?> disabled>
<span style="color: #94a3b8;">Beliebtheit (Likes)</span>
</label>
<label class="s-res-filter-option">
<input type="radio" name="sort" value="newest" <?php echo $currentSort === 'newest' ? 'checked' : ''; ?> onchange="this.form.submit()">
<input type="radio" name="sort" value="newest" class="sort-radio" <?php echo $currentSort === 'newest' ? 'checked' : ''; ?>>
<span>Neueste Beiträge</span>
</label>
<label class="s-res-filter-option">
<input type="radio" name="sort" value="oldest" <?php echo $currentSort === 'oldest' ? 'checked' : ''; ?> onchange="this.form.submit()">
<input type="radio" name="sort" value="oldest" class="sort-radio" <?php echo $currentSort === 'oldest' ? 'checked' : ''; ?>>
<span>Älteste Beiträge</span>
</label>
</div>
@@ -155,4 +149,8 @@ $resultCount = count($results);
</div>
</main>
</div>
</div>
<script src="js/paginator.js"></script>
niklas.ortmann commented 2026-06-17 15:08:37 +02:00
Outdated
Review
Copy Link
Copy Source

Das wird im Head in der index.php eingebunden. Orientiere dich bitte an dem dev.

Das wird im Head in der index.php eingebunden. Orientiere dich bitte an dem dev.
<script src="js/search-sorter.js"></script>
niklas.ortmann commented 2026-06-17 15:08:47 +02:00
Outdated
Review
Copy Link
Copy Source

s. oben

s. oben
js/sorter.js
+27
View File
@@ -0,0 +1,27 @@
function initPaginator() {
const form = document.getElementById('search-form-id');
niklas.ortmann commented 2026-06-17 15:11:44 +02:00
Outdated
Review
Copy Link
Copy Source

Diese js sorgt nur dafür, dass das Formular halt statt über die Form jetzt über js abgeschickt wird. Wo ist hier denn jetzt der Vorteil der js?

Wenn der Nutzer einen Radio-Button ändert, dann kann diese js das abfangen und statt wieder eine Anfrage an den Server (ArticleManager) zu schicken, kann die js doch selbst die Sortierung vornehmen.

Diese js sorgt nur dafür, dass das Formular halt statt über die Form jetzt über js abgeschickt wird. Wo ist hier denn jetzt der Vorteil der js? Wenn der Nutzer einen Radio-Button ändert, dann kann diese js das abfangen und statt wieder eine Anfrage an den Server (ArticleManager) zu schicken, kann die js doch selbst die Sortierung vornehmen.
const pageInput = document.getElementById('s-res-page-input');
const pageButtons = document.querySelectorAll('.s-res-page-navigation .s-res-page-btn');
pageButtons.forEach(button => {
button.addEventListener('click', function() {
if (this.disabled) return;
const targetPage = this.getAttribute('data-page');
if (targetPage && form && pageInput) {
pageInput.value = targetPage;
form.submit();
}
});
});
}
// ist das DOM bereits vollständig aufgebaut?
if (document.readyState === 'loading') {
// Falls noch geladen wird, auf das Event warten
document.addEventListener('DOMContentLoaded', initPaginator);
} else {
// Falls das HTML bereits komplett da ist, sofort ausführen
initPaginator();
}