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
+18 -5
2 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit de4d2fe5c0 - Show all commits
content/search-results.php
+9 -1
View File
@@ -62,6 +62,10 @@ $resultCount = count($results);
<input type="radio" name="sort" value="alphabet" class="sort-radio" <?php echo $currentSort === 'alphabet' ? 'checked' : ''; ?>>
<span>Alphabetisch</span>
</label>
<label class="s-res-filter-option">
<input type="radio" name="sort" value="likes" class="sort-radio" <?php echo $currentSort === 'likes' ? 'checked' : ''; ?>>
<span>Beliebtheit</span>
</label>
<label class="s-res-filter-option">
<input type="radio" name="sort" value="newest" class="sort-radio" <?php echo $currentSort === 'newest' ? 'checked' : ''; ?>>
<span>Neueste Beiträge</span>
@@ -90,7 +94,7 @@ $resultCount = count($results);
if (!empty($results)): ?>
<?php foreach ($results as $item): ?>
<div class="s-res-item">
<div class="s-res-item" data-likes="<?php echo $item['likes'] ?? 0; ?>">
<div class="s-res-content">
<h2 class="s-res-item-title">
<a href="index.php?pfad=showArticle&id=<?php echo $item['id']; ?>" class="s-res-link">
@@ -98,6 +102,10 @@ $resultCount = count($results);
</a>
</h2>
<p class="s-res-author">Von: <span class="s-res-author-name"><?php echo htmlspecialchars($item['author']); ?></span></p>
<p class="s-res-likes-display" style="font-size: 0.85rem; color: #64748b; margin-top: 4px;">
👍 <?php echo $item['likes'] ?? 0; ?> Likes
</p>
</div>
<div class="s-res-arrow">&rarr;</div>
</div>
2
js/sorter.js
+9 -4
View File
@@ -1,5 +1,5 @@
function initClientSorter() {
function initSorter() {
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 listContainer = document.querySelector('.s-res-list');
const sortRadios = document.querySelectorAll('.sort-radio');
@@ -12,7 +12,12 @@ function initClientSorter() {
const sortValue = this.value;
cards.sort((a, b) => {
if (sortValue === 'alphabet') {
if (sortValue === 'likes') {
const likesA = parseInt(a.getAttribute('data-likes') || '0', 10);
const likesB = parseInt(b.getAttribute('data-likes') || '0', 10);
return likesB - likesA;
}
else if (sortValue === 'alphabet') {
// alphabetische sortierung
const titleA = a.querySelector('.s-res-link').textContent.trim().toLowerCase();
const titleB = b.querySelector('.s-res-link').textContent.trim().toLowerCase();
@@ -39,7 +44,7 @@ function initClientSorter() {
// ist das DOM bereits vollständig aufgebaut?
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initClientSorter);
document.addEventListener('DOMContentLoaded', initSorter);
} else {
initClientSorter();
initSorter();
}