abstracted table functions

This commit is contained in:
Corban-Lee Jones 2024-06-26 11:14:17 +01:00
parent 450d40be89
commit 5a3b458f3e
5 changed files with 94 additions and 74 deletions

View File

@ -5,10 +5,15 @@ $(document).ready(async function() {
$("#subscriptionsTab").click();
// Bind table select checkboxes
bindTableCheckboxes("#subTable", subTable, "#deleteSelectedSubscriptionsBtn");
bindTableCheckboxes("#filtersTable", filtersTable, "#deleteSelectedFiltersBtn");
bindTableCheckboxes("#contentTable", contentTable, "#deleteSelectedContentBtn")
// Bind pagination - subTable
await bindTablePagination("#subPagination", loadSubscriptions);
await bindTablePaginationResizer("#subTablePageSize", loadSubscriptions);
await loadSavedGuilds();
await loadServerOptions();
});

View File

@ -92,9 +92,9 @@ function initSubscriptionTable() {
]
});
subTable.on('page.dt length.dt', function() {
loadSubscriptions(getCurrentlyActiveServer().guild_id);
});
// subTable.on('page.dt length.dt', async function() {
// await loadSubscriptions(getCurrentlyActiveServer().guild_id);
// });
}
$("#subTable").on("change", ".sub-toggle-active", async function () {
@ -120,6 +120,10 @@ $("#subTable").on("change", ".sub-toggle-active", async function () {
sub.guild_id,
sub.extra_notes,
sub.filters,
{
title: sub.article_title_mutators.map(mutator => mutator.id),
desc: sub.article_desc_mutators.map(mutator => mutator.id)
},
active,
handleErrorMsg=false
);
@ -133,7 +137,7 @@ $("#subTable").on("change", ".sub-toggle-active", async function () {
);
}
catch (error) {
console.error(error);
console.error(error);
showToast(
"danger",
"Error Updating Subscription",
@ -215,6 +219,11 @@ $("#subForm").on("submit", async function(event) {
var subPrimaryKey = await saveSubscription(id, name, url, guildId, extraNotes, subFilters, subMutators, active);
if (!subPrimaryKey) {
alert("prevented /subscriptions/false/subchannels");
return
}
await deleteSubChannels(subPrimaryKey);
subChannels.forEach(async channelId => {
await saveSubChannel(channelId, subPrimaryKey);
@ -245,6 +254,8 @@ async function saveSubscription(id, name, url, guildId, extraNotes, filters, mut
else response = await editSubscription(id, formData);
}
catch (err) {
console.error(err)
if (handleErrorMsg)
showToast("danger", "Subscription Error", err.responseText, 18000);
@ -296,8 +307,10 @@ async function loadSubscriptions(guildId, page=1, pageSize=null) {
try {
const subscriptions = await getSubscriptions(guildId, page, pageSize);
subTable.rows.add(subscriptions.results).draw(false);
handleSubPagination(page, pageSize, subscriptions.count, subscriptions.next, subscriptions.previous);
handleSubPageInfo(subscriptions.results.length, subscriptions.count);
updateTablePagination("#subPagination", page, pageSize, subscriptions.count, subscriptions.next, subscriptions.previous);
updateTablePaginationInfo("#subTablePageInfo", subscriptions.results.length, subscriptions.count);
$("#subTable thead .table-select-all").prop("disabled", subscriptions.results.length === 0);
console.debug("loading subs, " + subscriptions.results.length + " found");
}
@ -307,69 +320,6 @@ async function loadSubscriptions(guildId, page=1, pageSize=null) {
}
}
$("#subTablePageSize").on("change", async function() {
const page = 1; // reset to page 1 to ensure the page exists.
const pageSize = $(this).val();
loadSubscriptions(getCurrentlyActiveServer().guild_id, page, pageSize);
});
function handleSubPageInfo(showing, total) {
$("#subTablePageInfo .pageinfo-showing").text(showing);
$("#subTablePageInfo .pageinfo-total").text(total);
}
// Update the UI pagination options according to the passed data.
function handleSubPagination(currentPage, pageSize, totalItems, nextExists, prevExists) {
$("#subPagination").attr("data-page", currentPage);
// Remove existing page-specific buttons
$("#subPagination .page-pick").remove();
// Determine states of 'previous page' and 'next page' buttons
$("#subPagination .page-prev").toggleClass("disabled", !prevExists).attr("tabindex", prevExists ? "" : "-1");
$("#subPagination .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
$("#subPagination .pagination .page-next").parent().before(pageItem);
}
// Disable the button for the current page
$(`#subPagination .pagination .page-pick[data-page="${currentPage}"]`).addClass("disabled").attr("tabindex", -1);
}
$("#subPagination .pagination").on("click", ".page-link", async function() {
let wantedPage;
let currentPage = parseInt($("#subPagination").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 loadSubscriptions(getCurrentlyActiveServer().guild_id, wantedPage)
});
$(document).on("selectedServerChange", async function() {
// Hide alerts
@ -528,10 +478,10 @@ async function loadMutatorOptions() {
const mutators = await getMutators();
console.log(JSON.stringify(mutators));
mutators.forEach(filter => {
mutators.forEach(mutator => {
$(".sub-mutators-field").append($("<option>", {
text: filter.name,
value: filter.id
text: mutator.name,
value: mutator.id
}));
});
}

64
apps/static/js/table.js Normal file
View File

@ -0,0 +1,64 @@
// Updates the pagination text for a given pageInfoId
function updateTablePaginationInfo(pageInfoId, showing, total) {
$(`${pageInfoId} .pageinfo-showing`).text(showing);
$(`${pageInfoId} .pageinfo-total`).text(total);
}
// Updates the pagination buttons for a given pageControlsId
function updateTablePagination(pageControlsId, currentPage, pageSize, totalItems, nextExists, prevExists) {
$(pageControlsId).attr("data-page", currentPage);
// Remove existing page specific buttons
$(`${pageControlsId} .page-pick`).remove();
// Determine states of 'previous page' 'next page' buttons
$(`${pageControlsId} .page-prev`).toggleClass("disabled", !prevExists).attr("tabindex", prevExists ? "" : "-1");
$(`${pageControlsId} .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);
// alert(pages + " " + totalItems + " " + pageSize + " ")
for (let i = 1; i <= pages; i++) {
let pageItem = $("<li>").addClass("page-item");
let pageLink = $("<button>")
.attr("type", "button")
.attr("data-page", i)
.addClass("page-link page-pick")
.text(i);
// Insert the new page button before the 'next page' button
pageItem.append(pageLink)
$(`${pageControlsId} .pagination .page-next`).parent().before(pageItem);
$(`${pageControlsId} .pagination .page-pick[data-page="${currentPage}"]`).addClass("disabled").attr("tabindex", -1);
}
}
// Bind the table pagination buttons to control the table pagination
async function bindTablePagination(pageControlsId, dataLoadFunc) {
$(`${pageControlsId} .pagination`).on("click", ".page-link", async function() {
let wantedPage;
let currentPage = parseInt($(pageControlsId).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");
await dataLoadFunc(getCurrentlyActiveServer().guild_id, wantedPage)
});
}
// Bind the table pagination page resizer control
async function bindTablePaginationResizer(resizerControlId, dataLoadFunc) {
$(resizerControlId).on("change", async function() {
const page = 1;
const pageSize = $(this).val();
await dataLoadFunc(getCurrentlyActiveServer().guild_id, page, pageSize);
});
}

View File

@ -96,12 +96,12 @@
<div class="form-text">Apply mutators to article descriptions.</div>
</div>
</div>
<div class="col-lg-6 pe-lg-4">
<div class="col-lg-6 pe-lg-4 d-none">
<label for="" class="form-label">Article Fetch Limit</label>
<input type="number" id="subFetchLimit" class="form-control rounded-1" max="10" min="1">
<div class="form-text">Limit the number of articles fetched every cycle.</div>
</div>
<div class="col-lg-6 ps-lg-4">
<div class="col-lg-6 ps-lg-4 d-none">
<div class="form-switch ps-0">
<label for="subResetFetchLimit" class="form-check-label mb-2">Max Fetch Limit after the First Cycle</label>
<br>

View File

@ -184,6 +184,7 @@
</li>
</script>
<script src="{% static 'js/api.js' %}"></script>
<script src="{% static 'js/table.js' %}"></script>
<script src="{% static 'js/home/index.js' %}"></script>
<script src="{% static 'js/home/servers.js' %}"></script>
<script src="{% static 'js/home/subscriptions.js' %}"></script>