Gebruiker:MakiBoy/Gadget-LogCounter.js

// [[User:MakiBoy/Gadget-LogCounter.js]] gemaakt door [[User:MakiBoy]]

var version = '2.7';

function parseNumber(number) {
    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}

function showProject(pages) {
    document.getElementsByTagName("h1")[0].textContent = "Speciaal:LogCounter";
    document.title = "LogCounter - WikiKids";

    var table = document.createElement('table');
    table.classList.add('wikitable');

    var tableHead = document.createElement('thead');
    var tableHeadRow = document.createElement('tr');
    var tableHeadTitles = ['Paginatitel', 'Laatst bezocht', 'Totaal aantal'];

    var tableBody = document.createElement('tbody');

    var currentPage = 1;
    var rowsPerPage = mw.util.getParamValue('rows') ? parseInt(mw.util.getParamValue('rows')) : 25;
    var totalPages = Math.ceil(pages.length / rowsPerPage);

    function showPage(pageNumber) {
        currentPage = pageNumber;
        tableBody.innerHTML = '';
        var start = (currentPage - 1) * rowsPerPage;
        var end = start + rowsPerPage;
        var paginatedItems = pages.slice(start, end);
        paginatedItems.forEach(function (page) {
            var row = document.createElement('tr');
            var totalVisitors = page.normalVisitors + page.mainPageVisitors;
            var mainPageVisited = page.mainPageVisitors ? " - " + parseNumber(page.mainPageVisitors) : "";
            var pageTitle = page.title.replace(/_/g, ' ');

            function addZero(number) {
                return number < 10 ? "0" + number : number;
            }

            var date = new Date(page.updatedAt);
            var dateString = addZero(date.getDate()) + "-" + addZero((date.getMonth() + 1)) + "-" + date.getFullYear() + " " + addZero(date.getHours()) + ":" + addZero(date.getMinutes()) + ":" + addZero(date.getSeconds());

            row.innerHTML = `<td><a href="/${page.title}">${pageTitle}</a></td>
                <td>${dateString}</td>
                <td>${parseNumber(totalVisitors)}<span style="color:green; font-weight: bold;">${mainPageVisited}</span></td>`;
            tableBody.appendChild(row);
        });
    }

    showPage(1);

    var pagination = document.createElement('div');
    pagination.classList.add('pagination');

    var prevButton = document.createElement('button');
    prevButton.textContent = 'Vorige';
    prevButton.style = 'margin-right: 10px;';
    prevButton.addEventListener('click', function () {
        if (currentPage > 1) {
            showPage(currentPage - 1);
            //Manier waarop je kunt zien op welke pagina je bent, misschien is het handiger om anders te coderen, maar ik weet niet precies hoe dat dan kan. 
            document.getElementById('pageCounter').textContent = `Pagina ${currentPage} van ${totalPages}`;
        }
    });
    pagination.appendChild(prevButton);

    var pageCounter = document.createElement('span');
    pageCounter.id = "pageCounter";
    pageCounter.textContent = `Pagina ${currentPage} van ${totalPages}`;
    pagination.appendChild(pageCounter);

    var nextButton = document.createElement('button');
    nextButton.textContent = 'Volgende';
    nextButton.style = 'margin-left: 10px;';
    nextButton.addEventListener('click', function () {
        if (currentPage < totalPages) {
            showPage(currentPage + 1);
            //Manier waarop je kunt zien op welke pagina je bent, misschien is het handiger om anders te coderen, maar ik weet niet precies hoe dat dan kan. 
            document.getElementById('pageCounter').textContent = `Pagina ${currentPage} van ${totalPages}`;
        }
    });
    pagination.appendChild(nextButton);

    tableHeadTitles.forEach(function (title) {
        var tableHeadCell = document.createElement('th');
        tableHeadCell.textContent = title;
        tableHeadRow.appendChild(tableHeadCell);
    });
    tableHead.appendChild(tableHeadRow);
    table.appendChild(tableHead);
    table.appendChild(tableBody);

    var totalVisitors = pages.reduce(function (total, page) {
        return total + page.normalVisitors + page.mainPageVisitors;
    }, 0);

    var totalElement = document.createElement('div');
    totalElement.style = 'margin-top: 20px; display: flex; flex-direction: column;';

    var totalVisitorsElement = document.createElement('span');
    totalVisitorsElement.textContent = `Totaal aantal bezoeken: ${parseNumber(totalVisitors)}`;
    totalElement.appendChild(totalVisitorsElement);

    var totalPagesElement = document.createElement('span');
    totalPagesElement.textContent = `Totaal aantal pagina's: ${parseNumber(pages.length)}`;
    totalElement.appendChild(totalPagesElement);

    var searchElement = document.createElement('div');
    searchElement.style = 'margin-top: 20px; display: flex; flex-direction: column;';

    var searchResult = document.createElement('div');
    searchResult.id = 'searchResult';

    var searchInput = document.createElement('input');
    searchInput.type = 'text';
    searchInput.placeholder = 'Zoek een pagina...';
    searchInput.addEventListener('input', function () {
        var searchValue = searchInput.value.toLowerCase();
        var filteredPages = pages.filter(function (page) {
            return page.title.toLowerCase().includes(searchValue);
        });

        var searchResultElement = document.getElementById('searchResult');
        searchResultElement.innerHTML = '';
        filteredPages.forEach(function (page) {
            var row = document.createElement('div');
            row.style = 'display: flex; justify-content: space-between; margin-bottom: 10px;';
            var totalVisitors = page.normalVisitors + page.mainPageVisitors;
            var mainPageVisited = page.mainPageVisitors ? " - " + parseNumber(page.mainPageVisitors) : "";
            var pageTitle = page.title.replace(/_/g, ' ');

            function addZero(number) {
                return number < 10 ? "0" + number : number;
            }

            var date = new Date(page.updatedAt);
            var dateString = addZero(date.getDate()) + "-" + addZero((date.getMonth() + 1)) + "-" + date.getFullYear() + " " + addZero(date.getHours()) + ":" + addZero(date.getMinutes()) + ":" + addZero(date.getSeconds());

            row.innerHTML = `<a href="/${page.title}">${pageTitle}</a>
                ${dateString}
                ${parseNumber(totalVisitors)}<span style="color:green; font-weight: bold;">${mainPageVisited}</span>`;
            searchResultElement.appendChild(row);
        });
    });
    searchElement.appendChild(searchInput);
    searchElement.appendChild(searchResult);
    totalElement.appendChild(searchElement);

    document.getElementById('bodyContent').innerHTML = '';

    document.getElementById('bodyContent').appendChild(table);
    document.getElementById('bodyContent').appendChild(pagination);
    document.getElementById('bodyContent').appendChild(totalElement);
}

function getPages() {
    var pages = [];
    var request = new XMLHttpRequest();
    request.open('GET', 'https://wikikids.martvanweeghel.nl/pages', false);
    request.send(null);
    if (request.status === 200) {
        pages = JSON.parse(request.responseText);
    }

    // Sorteer de pagina's op het aantal bezoekers (hoog naar laag) (page.normalVisitors + page.mainPageVisitors)
    pages.sort(function (a, b) {
        return b.normalVisitors + b.mainPageVisitors - a.normalVisitors - a.mainPageVisitors;
    });
    return pages;
}

if (mw.config.get('wgNamespaceNumber') === -1 && mw.config.get('wgTitle') === "LogCounter") {
    document.getElementById("footer-places").innerHTML += '<li id="footer-places-gadget-LogCounter">Script gemaakt door <a href="/User:MakiBoy" title="Gebruiker:MakiBoy">MakiBoy</a>, versie: ' + version + '</li>';
    var allPages = getPages();
    showProject(allPages);
}