abstracted table functions
This commit is contained in:
parent
450d40be89
commit
5a3b458f3e
@ -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();
|
||||
});
|
||||
|
@ -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
64
apps/static/js/table.js
Normal 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);
|
||||
});
|
||||
}
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user