webprogrammierung/js/showCategory.js

/**
 * Übernimmt Sortierung, Suche (innerhalb der Kategorie) und Pagination der
 * Kategorie-Ansicht vollständig clientseitig.
 *
 * Ablauf:
 * 1. Kompletten Kategorie-Datensatz einmalig per fetch() nachladen
 * 2. Sortieren + nach Suchbegriff filtern (JS-Array).
 * 3. Ergebnisliste + Pagination-UI daraus neu rendern.
 *
 * Ohne JS bleibt die serverseitig gerenderte Seite (echte Links/Formulare)
 * voll funktionsfähig
 */
(function () {
    const state = {
        allItems: [],
        sort: 'alphabet',
        query: '',
        itemsPerPage: 10,
        currentPage: 1,
    };

    let listContainer, sortRadios, searchInput, limitSelect;
    let prevBtn, nextBtn, numbersContainer, jsNav, resultCountEl;
    let searchDebounceTimer;

    function init() {
        listContainer = document.querySelector('.s-res-list');
        if (!listContainer) return;

        sortRadios = document.querySelectorAll('.sort-radio');
        searchInput = document.getElementById('cat-search-input');
        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.query = searchInput ? searchInput.value : '';
        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('Kategorie-Beiträge konnten nicht nachgeladen werden:', err);
            });
    }

    function fetchFullDataset() {
        return fetch('php/controller/showCategory-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;

        const needle = state.query.trim().toLowerCase();
        if (needle !== '') {
            items = items.filter(function (item) {
                const haystack = ((item.title || '') + ' ' + (item.content || '')).toLowerCase();
                return haystack.indexOf(needle) !== -1;
            });
        }

        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 (searchInput) {
            // Live-Filterung während des Tippens (leicht entprellt), da der
            // Datensatz bereits vollständig im Browser liegt.
            searchInput.addEventListener('input', function () {
                clearTimeout(searchDebounceTimer);
                const value = this.value;
                searchDebounceTimer = setTimeout(function () {
                    state.query = value;
                    state.currentPage = 1;
                    render();
                }, 150);
            });
        }

        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/Suche live
        // ein echtes Absenden des Formulars (No-JS-Fallback) ist dann nicht mehr nötig.
        const filterForm = document.getElementById('cat-filter-form');
        if (filterForm) {
            filterForm.addEventListener('submit', function (e) {
                e.preventDefault();
            });
        }
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();