PYRSS-Website/apps/static/js/home/content.js

var contentTable;

function initContentTable() {
    contentTable = $("#contentTable").DataTable({
        info: false,
        paging: false,
        searching: false,
        autoWidth: false,
        order: [],
        select: {
            style: "multi+shift",
            selector: 'th:first-child input[type="checkbox"]'
        },
        columnDefs: [
            { orderable: false, targets: "no-sort" },
            {
                targets: 0,
                checkboxes: { selectRow: true }
            }
        ],
        columns: [
            {
                // Select row checkbox column
                title: '<input type="checkbox" class="form-check-input table-select-all" />',
                data: null,
                orderable: false,
                className: "text-center col-1",
                render: function() {
                    return '<input type="checkbox" class="form-check-input table-select-row" />'
                }
            },
            { title: "GUID", data: "guid", visible: false },
            {
                title: "Name",
                data: "title",
                render: function(data, type, row) {
                    return `<a href="${row.url}" class="text-decoration-none" target="_blank">${data}</a>`
                }
            },
            {
                title: "Subscription",
                data: "subscription.name",
                render: function(data, type, row) {
                    return `<a href="#" onclick="goToSubscription(${row.subscription.id})" class="text-decoration-none">${data}</a>`
                }
            },
            {
                title: "Blocked",
                data: "blocked",
                className: "text-center col-1",
                render: function(data) {
                    return data ? `<i class="bi bi-check-lg text-success"></i>` : ""
                }
            },
            {
                title: "Created",
                data: "creation_datetime",
                render: function(data, type) {
                    return `<small>${new Date(data).toISOString().replace('T', ' · ').replace(/\.\d+Z$/, '')}</small>`;
                }
            },
        ]
    });
}

async function goToSubscription(subId) {
    $("#subscriptionsTab").click();
    await showEditSubModal(subId);
}

$("#deleteSelectedContentBtn").on("click", async function() {

    var rows = contentTable.rows(".selected").data();
    $.each(rows, async function() {
        await deleteTrackedContent(this.guid);
        showToast("danger", "Deleted Tracked Content", "It can now appear be sent again. Content GUID: " + this.guid);
    });

    setTimeout(async () => {
        await loadContent(getCurrentlyActiveServer().guild_id);
    }, 600)
});

function clearExistingContentRows() {
    $("#contentTable thead .table-select-all").prop("checked", false).prop("indeterminate", false);
    contentTable.clear().draw(false);
}

$("#refreshContentBtn").on("click", async function() {
    loadContent(getCurrentlyActiveServer().guild_id);
});

async function loadContent(guildId, page=1, pageSize=null) {

    if (!guildId)
        return;

    if (!pageSize)
        pageSize = $("#contentTablePageSize").val();

    $("#deleteSelectedContentBtn").prop("disabled", true);
    clearExistingContentRows();

    try {
        const content = await getTrackedContent(guildId, null, page, pageSize);
        contentTable.rows.add(content.results).draw(false);
        handleContentPagination(page, pageSize, content.count, content.next, content.previous);
        $("#contentTable thead .table-select-all").prop("disabled", content.results.length === 0);
    }
    catch (err) {
        console.error(JSON.stringify(err, null, 4));
        showToast("danger", `Error loading Tracked Content: HTTP ${err.status}`, err.responseJSON.message, 15000);
    }
}

$(document).on("selectedServerChange", async function() {
    const activeServer = getCurrentlyActiveServer();
    await loadContent(activeServer.guild_id);
});

$("#contentTablePageSize").on("change", async function() {
    const page = 1; // reset to page 1 to ensure the page exists.
    const pageSize = $(this).val();

    loadContent(getCurrentlyActiveServer().guild_id, page, pageSize);
});

function handleContentPagination(currentPage, pageSize, totalItems, nextExists, prevExists) {

    $("#contentPagination").attr("data-page", currentPage);

    // Remove existing page-specific buttons
    $("#contentPagination .page-pick").remove();

    // Determine states of 'previous page' and 'next page' buttons
    $("#contentPagination .page-prev").toggleClass("disabled", !prevExists).attr("tabindex", prevExists ? "" : "-1");
    $("#contentPagination .page-next").toggleClass("disabled", !nextExists).attr("tabindex", nextExists ? "" : "-1");

    // Calculate amount of pages to account for
    const pages = Math.max(Math.ceil(totalItems / pageSize), 1);

    // Create a button for each page
    for (let i = 1; i < pages + 1; i++) {
        let pageItem = $("<li>").addClass("page-item");
        let pageLink = $("<button>")
            .attr("type", "button")
            .attr("data-page", i)
            .addClass("page-link page-pick")
            .text(i)

        pageItem.append(pageLink);

        // Insert the new page button before the 'next page' button
        $("#contentPagination .pagination .page-next").parent().before(pageItem);
    }

    // Disable the button for the current page
    $(`#contentPagination .pagination .page-pick[data-page="${currentPage}"]`).addClass("disabled").attr("tabindex", -1);
}

$("#contentPagination .pagination").on("click", ".page-link", async function() {

    let wantedPage;
    let currentPage = parseInt($("#contentPagination").attr("data-page"));

    if ($(this).hasClass("page-prev"))
        wantedPage = currentPage - 1
    else if ($(this).hasClass("page-next"))
        wantedPage = currentPage + 1;
    else
        wantedPage = $(this).attr("data-page");
    
    console.debug("moving to page: " + wantedPage);

    await loadContent(getCurrentlyActiveServer().guild_id, wantedPage)
});