corbz/PYRSS-Website
corbz/PYRSS-Website
1
0
Fork 0
Code Issues 21 Pull Requests Actions Releases 1 Wiki Activity

add and delete buttons for tables

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-07-23 11:28:43 +01:00
parent 02390e3a1f
commit 31dec273d6
5 changed files with 46 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/static/js/home/content.js
View File

@ -3,7 +3,7 @@ var contentTable;
async function initContentTable() { async function initContentTable() {
contentOptions = await getTrackedContentOptions(); contentOptions = await getTrackedContentOptions();
await initTable("#contentTabPane", "contentTable", loadContent, contentOptions); await initTable("#contentTabPane", "contentTable", loadContent, null, deleteSelectedContent, contentOptions);
contentTable = $("#contentTable").DataTable({ contentTable = $("#contentTable").DataTable({
info: false, info: false,
@ -100,7 +100,7 @@ async function initContentTable() {
] ]
}); });
bindTableCheckboxes("#contentTable", contentTable, "#deleteSelectedContentBtn"); bindTableCheckboxes("#contentTable", contentTable, "#contentTabPane .table-del-btn");
} }
function handleDiscordChannelNames() { function handleDiscordChannelNames() {
@ -147,7 +147,7 @@ async function goToSubscription(subId) {
await showEditSubModal(subId); await showEditSubModal(subId);
} }
$("#deleteSelectedContentBtn").on("click", async function() { async function deleteSelectedContent() {
var rows = contentTable.rows(".selected").data(); var rows = contentTable.rows(".selected").data();
$.each(rows, async function() { $.each(rows, async function() {
@ -158,7 +158,7 @@ $("#deleteSelectedContentBtn").on("click", async function() {
setTimeout(async () => { setTimeout(async () => {
await loadContent(getCurrentlyActiveServer().guild_id); await loadContent(getCurrentlyActiveServer().guild_id);
}, 600) }, 600)
}); }
function clearExistingContentRows() { function clearExistingContentRows() {
$("#contentTable thead .table-select-all").prop("checked", false).prop("indeterminate", false); $("#contentTable thead .table-select-all").prop("checked", false).prop("indeterminate", false);
@ -180,7 +180,7 @@ async function loadContent(guildId, page=1, pageSize=null, search=null) {
if (!search) if (!search)
search = $("#contentTabPane .table-searchbar").val(); search = $("#contentTabPane .table-searchbar").val();
$("#deleteSelectedContentBtn").prop("disabled", true); $("#contentTabPane .table-del-btn").prop("disabled", true);
clearExistingContentRows(); clearExistingContentRows();
try { try {

11
apps/static/js/home/filters.js
View File

@ -4,7 +4,7 @@ var filtersTable;
// Create filters table // Create filters table
async function initFiltersTable() { async function initFiltersTable() {
filterOptions = await getFilterOptions(); filterOptions = await getFilterOptions();
await initTable("#filtersTabPane", "filtersTable", loadFilters, filterOptions); await initTable("#filtersTabPane", "filtersTable", loadFilters, showEditFilterModal, deleteSelectedFilters, filterOptions);
filtersTable = $("#filtersTable").DataTable({ filtersTable = $("#filtersTable").DataTable({
info: false, info: false,
@ -79,7 +79,7 @@ async function initFiltersTable() {
] ]
}); });
bindTableCheckboxes("#filtersTable", filtersTable, "#deleteSelectedFiltersBtn"); bindTableCheckboxes("#filtersTable", filtersTable, "#filtersTabPane .table-del-btn");
} }
$("#addFilterBtn").on("click", async function() { $("#addFilterBtn").on("click", async function() {
@ -183,7 +183,7 @@ async function loadFilters(guildId, page=1, pageSize=null, search=null) {
if (!search) if (!search)
search = $("#filtersTabPane .table-searchbar").val(); search = $("#filtersTabPane .table-searchbar").val();
$("#deleteSelectedFiltersBtn").prop("disabled", true); $("#filtersTabPane .table-del-btn").prop("disabled", true);
clearExistingFilterRows(); clearExistingFilterRows();
try { try {
@ -242,8 +242,7 @@ $(document).on("selectedServerChange", async function() {
await loadFilters(activeServer.guild_id); await loadFilters(activeServer.guild_id);
}); });
$("#deleteSelectedFiltersBtn").on("click", async function() { async function deleteSelectedFilters() {
var rows = filtersTable.rows(".selected").data(); var rows = filtersTable.rows(".selected").data();
$.each(rows, async function() { $.each(rows, async function() {
await deleteFilter(this.id); await deleteFilter(this.id);
@ -255,7 +254,7 @@ $("#deleteSelectedFiltersBtn").on("click", async function() {
await loadFilters(guildId); await loadFilters(guildId);
loadFilterOptions(guildId); loadFilterOptions(guildId);
}, 500) }, 500)
}) }
$("#deleteEditFilter").on("click", async function() { $("#deleteEditFilter").on("click", async function() {
const filterId = $("#filterId").val(); const filterId = $("#filterId").val();

14
apps/static/js/home/subscriptions.js
View File

@ -6,7 +6,7 @@ var subTable = null;
// Create subscription table // Create subscription table
async function initSubscriptionTable() { async function initSubscriptionTable() {
subOptions = await getSubscriptionOptions(); subOptions = await getSubscriptionOptions();
await initTable("#subscriptionsTabPane", "subTable", loadSubscriptions, subOptions); await initTable("#subscriptionsTabPane", "subTable", loadSubscriptions, showEditSubModal, deleteSelectedSubscriptions, subOptions);
subTable = $("#subTable").DataTable({ subTable = $("#subTable").DataTable({
info: false, info: false,
@ -121,7 +121,7 @@ async function initSubscriptionTable() {
] ]
}); });
bindTableCheckboxes("#subTable", subTable, "#deleteSelectedSubscriptionsBtn"); bindTableCheckboxes("#subTable", subTable, "#subscriptionsTabPane .table-del-btn");
} }
$("#subscriptionsTabPane").on("change", ".sub-toggle-active", async function () { $("#subscriptionsTabPane").on("change", ".sub-toggle-active", async function () {
@ -352,7 +352,7 @@ async function loadSubscriptions(guildId, page=1, pageSize=null, search=null) {
if (!search) if (!search)
search = $("#subscriptionsTabPane .table-searchbar").val(); search = $("#subscriptionsTabPane .table-searchbar").val();
$("#deleteSelectedSubscriptionsBtn").prop("disabled", true); $("#subscriptionsTabPane .table-del-btn").prop("disabled", true);
clearExistingSubRows(); clearExistingSubRows();
try { try {
@ -446,18 +446,14 @@ $("#deleteEditSub").on("click", async function() {
showToast("danger", "Deleted Subscription", "Subscription ID: " + subId); showToast("danger", "Deleted Subscription", "Subscription ID: " + subId);
}); });
$("#deleteSelectedSubscriptionsBtn").on("click", async function() { async function deleteSelectedSubscriptions() {
// showToast("danger", "Not Implemented", "This feature isn't implemented");
var rows = subTable.rows(".selected").data(); var rows = subTable.rows(".selected").data();
$.each(rows, async function() { $.each(rows, async function() {
// alert(JSON.stringify(this, null, 4));
await deleteSubscription(this.id); await deleteSubscription(this.id);
showToast("danger", "Deleted Subscription", "Subscription ID: " + this.id); showToast("danger", "Deleted Subscription", "Subscription ID: " + this.id);
}); });
await loadSubscriptions(getCurrentlyActiveServer().guild_id); await loadSubscriptions(getCurrentlyActiveServer().guild_id);
}) }
// #endregion // #endregion

42
apps/static/js/table.js
View File

@ -1,12 +1,12 @@
var timeouts = {}; var timeouts = {};
async function initTable(containingSelector, tableId, loadDataFunc, options=null) { async function initTable(containingSelector, tableId, loadDataFunc, newRowFunc, deleteSelectedFunc, options=null) {
let pageSizeId = tableId + "PageSize"; let pageSizeId = tableId + "PageSize";
searchId = tableId + "SearchBar"; searchId = tableId + "SearchBar";
sortDropdownId = tableId + "SortDropdown"; sortDropdownId = tableId + "SortDropdown";
filterDropdownId = tableId + "FilterDropdown"; filterDropdownId = tableId + "FilterDropdown";
createSearchRow(containingSelector, searchId, sortDropdownId, filterDropdownId, options); createSearchRow(containingSelector, searchId, sortDropdownId, filterDropdownId, options, newRowFunc, deleteSelectedFunc);
createTable(containingSelector, tableId); createTable(containingSelector, tableId);
createTableControls(containingSelector, pageSizeId); createTableControls(containingSelector, pageSizeId);
@ -15,7 +15,7 @@ async function initTable(containingSelector, tableId, loadDataFunc, options=null
await bindTablePaginationResizer(`${containingSelector} .table-page-sizer`, loadDataFunc); await bindTablePaginationResizer(`${containingSelector} .table-page-sizer`, loadDataFunc);
} }
function createSearchRow(containingSelector, searchId, sortDropdownId, filterDropdownId, options) { function createSearchRow(containingSelector, searchId, sortDropdownId, filterDropdownId, options, newRowFunc, deleteSelectedFunc) {
$(containingSelector).append(` $(containingSelector).append(`
<div class="row my-3 px-3 table-search-row"> <div class="row my-3 px-3 table-search-row">
<div class="col-lg-4"> <div class="col-lg-4">
@ -26,17 +26,26 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
<input type="search" id="${searchId}" name="${searchId}" class="form-control table-searchbar" placeholder="Search"> <input type="search" id="${searchId}" name="${searchId}" class="form-control table-searchbar" placeholder="Search">
</div> </div>
</div> </div>
<div class="col-lg-8 text-end table-search-buttons"></div> <div class="col-lg-8 text-end table-search-buttons">
<div class="d-inline-block ms-3">
<button type="button" class="table-refresh-btn btn btn-outline-secondary rounded-1">
<i class="bi bi-arrow-clockwise"></i>
</button>
</div>
</div>
</div> </div>
`); `);
$(`${containingSelector} .table-search-row .table-search-buttons`).append(` if (newRowFunc) {
<div class="d-inline-block ms-3"> $(`${containingSelector} .table-search-row .table-search-buttons`).prepend(`
<button type="button" class="table-refresh-btn btn btn-outline-secondary rounded-1"> <div class="d-inline-block ms-3">
<i class="bi bi-arrow-clockwise"></i> <button type="button" class="table-new-btn btn btn-primary rounded-1">
</button> <i class="bi bi-plus-lg"></i>
</div> </button>
`); </div>
`)
$(`${containingSelector} .table-search-row .table-search-buttons .table-new-btn`).on("click", async () => {await newRowFunc(-1)});
}
if (options.sort) { if (options.sort) {
$(`${containingSelector} .table-search-row .table-search-buttons`).append(` $(`${containingSelector} .table-search-row .table-search-buttons`).append(`
@ -69,6 +78,17 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
`); `);
populateFilterDropdown(); populateFilterDropdown();
} }
if (deleteSelectedFunc) {
$(`${containingSelector} .table-search-row .table-search-buttons`).append(`
<div class="d-inline-block ms-3">
<button type="button" class="table-del-btn btn btn-danger rounded-1">
<i class="bi bi-trash3"></i>
</button>
</div>
`)
$(`${containingSelector} .table-search-row .table-search-buttons .table-del-btn`).on("click", async () => {await deleteSelectedFunc()});
}
} }
function populateSortDropdown(sortDropdownId, sortOptions) { function populateSortDropdown(sortDropdownId, sortOptions) {

15
apps/templates/home/index.html
View File

@ -71,25 +71,10 @@
</ul> </ul>
<div class="tab-pane-buttons"> <div class="tab-pane-buttons">
<div class="tab-pane-buttons-item" data-tab="subscriptionsTab"> <div class="tab-pane-buttons-item" data-tab="subscriptionsTab">
<button type="button" id="addSubscriptionBtn" class="btn btn-primary rounded-1 me-3">
<i class="bi bi-plus-lg"></i>
</button>
<button type="button" id="deleteSelectedSubscriptionsBtn" class="btn btn-danger rounded-1 ms-0" disabled>
<i class="bi bi-trash3"></i>
</button>
</div> </div>
<div class="tab-pane-buttons-item" data-tab="filtersTab"> <div class="tab-pane-buttons-item" data-tab="filtersTab">
<button type="button" id="addFilterBtn" class="btn btn-primary rounded-1 me-3">
<i class="bi bi-plus-lg"></i>
</button>
<button type="button" id="deleteSelectedFiltersBtn" class="btn btn-danger rounded-1 ms-0">
<i class="bi bi-trash3"></i>
</button>
</div> </div>
<div class="tab-pane-buttons-item" data-tab="contentTab"> <div class="tab-pane-buttons-item" data-tab="contentTab">
<button type="button" id="deleteSelectedContentBtn" class="btn btn-danger rounded-1 ms-0">
<i class="bi bi-trash3"></i>
</button>
</div> </div>
</div> </div>
</div> </div>