From 2c0174ccba3fd61b264b162ba45042b70e40ebe3 Mon Sep 17 00:00:00 2001 From: Corban-Lee Jones Date: Mon, 15 Jul 2024 21:29:52 +0100 Subject: [PATCH] abstract table logic to table.js --- apps/static/js/home/content.js | 67 ++++++++++++++-- apps/static/js/home/filters.js | 10 ++- apps/static/js/home/index.js | 73 ++---------------- apps/static/js/home/subscriptions.js | 34 ++++++--- apps/static/js/table.js | 110 ++++++++++++++++++++++++++- apps/templates/home/index.html | 101 ++---------------------- 6 files changed, 212 insertions(+), 183 deletions(-) diff --git a/apps/static/js/home/content.js b/apps/static/js/home/content.js index e813e35..ce4203f 100644 --- a/apps/static/js/home/content.js +++ b/apps/static/js/home/content.js @@ -1,6 +1,8 @@ var contentTable; -function initContentTable() { +async function initContentTable() { + await initTable("#contentTabPane", "contentTable", loadContent); + contentTable = $("#contentTable").DataTable({ info: false, paging: false, @@ -62,6 +64,10 @@ function initContentTable() { { title: "Channel", data: "channel_id", + className: "text-start content-channel-id", + render: function(data) { + return $("").text(data)[0]; + } }, { title: "Created", @@ -72,11 +78,13 @@ function initContentTable() { let dateTime = new Date(data); let dateTimeString = formatDate(dateTime); return $(` - - ${dateTime.toISOString().split("T")[0]} - + + ${dateTime.toISOString().split("T")[0]} + `).popover()[0]; } }, @@ -89,6 +97,49 @@ function initContentTable() { } ] }); + + bindTableCheckboxes("#contentTable", contentTable, "#deleteSelectedContentBtn"); +} + +function handleDiscordChannelNames() { + let interval = setInterval(function() { + + if (!discordChannels.length) + return; + + $("#contentTable tr td.content-channel-id").each(function() { + console.debug("row") + let tracked = contentTable.row($(this).closest("tr")).data(); + channel = discordChannels.find(item => item.value === tracked.channel_id); + + if (!channel) + return; + + console.debug("inserting") + $(this).text("").append( + $("") + .attr("href", `https://discord.com/channels/${getCurrentlyActiveServer().guild_id}/${channel.value}/${tracked.message_id}`) + .attr("target", "_blank") + .addClass("text-decoration-none") + .text(channel.text) + ); + }); + + // $(".replace-discord-channel-id-with-name").each(function() { + // let displayChannel = discordChannels.find(channel => channel.value == $(this).text()); + // if (displayChannel) { + // $(this).text("").append( + // $("") + // .attr("href", `https://discord.com/channels/${getCurrentlyActiveServer().guild_id}/${displayChannel.value}`) + // .attr("target", "_blank") + // .addClass("text-decoration-none") + // .text(displayChannel.text) + // ); + // } + // }); + + + }, 600); } async function goToSubscription(subId) { @@ -133,8 +184,8 @@ async function loadContent(guildId, page=1, pageSize=null) { const content = await getTrackedContent(guildId, null, page, pageSize); contentTable.rows.add(content.results).draw(false); - updateTablePagination("#contentPagination", page, pageSize, content.count, content.next, content.previous); - updateTablePaginationInfo("#contentTablePageInfo", content.results.length, content.count); + updateTablePagination("#contentTabPane .table-pagination", page, pageSize, content.count, content.next, content.previous); + updateTablePaginationInfo("#contentTabPane .table-page-info", content.results.length, content.count); $("#contentTable thead .table-select-all").prop("disabled", content.results.length === 0); } diff --git a/apps/static/js/home/filters.js b/apps/static/js/home/filters.js index f73b033..cf22bfb 100644 --- a/apps/static/js/home/filters.js +++ b/apps/static/js/home/filters.js @@ -1,7 +1,9 @@ var filtersTable; // Create filters table -function initFiltersTable() { +async function initFiltersTable() { + await initTable("#filtersTabPane", "filtersTable", loadFilters); + filtersTable = $("#filtersTable").DataTable({ info: false, paging: false, @@ -74,6 +76,8 @@ function initFiltersTable() { } ] }); + + bindTableCheckboxes("#filtersTable", filtersTable, "#deleteSelectedFiltersBtn"); } $("#addFilterBtn").on("click", async function() { @@ -181,8 +185,8 @@ async function loadFilters(guildId, page=1, pageSize=null) { const filters = await getFilters(guildId); filtersTable.rows.add(filters.results).draw(false); - updateTablePagination("#filtersPagination", page, pageSize, filters.count, filters.next, filters.previous); - updateTablePaginationInfo("#filtersTablePageInfo", filters.results.length, filters.count); + updateTablePagination("#filtersTabPane .table-pagination", page, pageSize, filters.count, filters.next, filters.previous); + updateTablePaginationInfo("#filtersTabPane .table-page-info", filters.results.length, filters.count); $("#filtersTable thead .table-select-all").prop("disabled", filters.results.length === 0); } diff --git a/apps/static/js/home/index.js b/apps/static/js/home/index.js index dd273e1..7f16f3c 100644 --- a/apps/static/js/home/index.js +++ b/apps/static/js/home/index.js @@ -1,30 +1,14 @@ $(document).ready(async function() { - initSubscriptionTable(); - initFiltersTable(); - initContentTable(); + await initSubscriptionTable(); + await initFiltersTable(); + await initContentTable(); $("#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); - - // Bind pagination filtersTable - await bindTablePagination("#filtersPagination", loadFilters); - await bindTablePaginationResizer("#filtersTablePageSize", loadFilters); - - // Bind pagination - contentTable - await bindTablePagination("#contentPagination", loadContent); - await bindTablePaginationResizer("#contentTablePageSize", loadContent); - - await loadSavedGuilds(); await loadServerOptions(); + + handleDiscordChannelNames(); }); $('#serverTabs [data-bs-toggle="tab"]').on("show.bs.tab", function(event) { @@ -37,51 +21,6 @@ $(document).on("selectedServerChange", function() { $("#subscriptionsTab").click(); }); -function bindTableCheckboxes(tableSelector, tableObject, deleteButtonSelector) { - // Select a row via checkbox - $(tableSelector).on("change", "tbody tr .table-select-row", function() { - - var selected = $(this).prop("checked"); - rowIndex = $(this).closest("tr").index(); - row = tableObject.row(rowIndex); - - if (selected) row.select(); - else row.deselect(); - - determineSelectAllState(tableSelector, tableObject, deleteButtonSelector); - }); - - // Select all rows checkbox - $(tableSelector).on("change", "thead .table-select-all", function() { - var selected = $(this).prop("checked"); - $(`${tableSelector} tbody tr`).each(function(rowIndex) { - var row = tableObject.row(rowIndex); - - if (selected) row.select(); - else row.deselect(); - - $(this).find('.table-select-row').prop("checked", selected); - }); - - determineSelectAllState(tableSelector, tableObject, deleteButtonSelector); - }); -} - -function determineSelectAllState(tableSelector, tableObject, deleteButtonSelector) { - var selectedRowsCount = tableObject.rows(".selected").data().toArray().length; - allRowsCount = tableObject.rows().data().toArray().length; - - selectAllCheckbox = $(`${tableSelector} thead .table-select-all`); - - checked = selectedRowsCount === allRowsCount; - indeterminate = !checked && selectedRowsCount > 0; - - selectAllCheckbox.prop("checked", checked); - selectAllCheckbox.prop("indeterminate", indeterminate); - - $(deleteButtonSelector).prop("disabled", !(checked || indeterminate) || !(allRowsCount > 0)); -} - function formatDate(date) { // Array of weekday names @@ -115,7 +54,7 @@ function formatDate(date) { } // `${hours}:${minutes}:${seconds} ยท ` - return `${dayOfWeek}, ${dayOfMonthSuffix} ${month}, ${year}`; + return `${dayOfWeek}, ${dayOfMonthSuffix} ${month}, ${year}
${hours}:${minutes}:${seconds}`; } function genHexString(len) { diff --git a/apps/static/js/home/subscriptions.js b/apps/static/js/home/subscriptions.js index c5abc5e..dbfc810 100644 --- a/apps/static/js/home/subscriptions.js +++ b/apps/static/js/home/subscriptions.js @@ -1,7 +1,10 @@ var subTable = null; + discordChannels = []; // Create subscription table -function initSubscriptionTable() { +async function initSubscriptionTable() { + await initTable("#subscriptionsTabPane", "subTable", loadSubscriptions); + subTable = $("#subTable").DataTable({ info: false, paging: false, @@ -70,6 +73,8 @@ function initSubscriptionTable() { let dateTimeString = formatDate(dateTime); return $(` ${dateTime.toISOString().split("T")[0]} @@ -113,9 +118,7 @@ function initSubscriptionTable() { ] }); - // subTable.on('page.dt length.dt', async function() { - // await loadSubscriptions(getCurrentlyActiveServer().guild_id); - // }); + bindTableCheckboxes("#subTable", subTable, "#deleteSelectedSubscriptionsBtn"); } $("#subTable").on("change", ".sub-toggle-active", async function () { @@ -348,8 +351,8 @@ async function loadSubscriptions(guildId, page=1, pageSize=null) { const subscriptions = await getSubscriptions(guildId, page, pageSize); subTable.rows.add(subscriptions.results).draw(false); - updateTablePagination("#subPagination", page, pageSize, subscriptions.count, subscriptions.next, subscriptions.previous); - updateTablePaginationInfo("#subTablePageInfo", subscriptions.results.length, subscriptions.count); + updateTablePagination("#subscriptionsTabPane .table-pagination", page, pageSize, subscriptions.count, subscriptions.next, subscriptions.previous); + updateTablePaginationInfo("#subscriptionsTabPane .table-page-info", subscriptions.results.length, subscriptions.count); $("#subTable thead .table-select-all").prop("disabled", subscriptions.results.length === 0); console.debug("loading subs, " + subscriptions.results.length + " found"); @@ -368,6 +371,8 @@ $(document).on("selectedServerChange", async function() { // Hide alerts $("#serverJoinAlert").attr("style", "display: none !important"); + updateBotInviteLink(); + const activeServer = getCurrentlyActiveServer(); await loadSubscriptions(activeServer.guild_id); await loadChannelOptions(activeServer.guild_id); @@ -493,16 +498,16 @@ async function loadChannelOptions(guildId) { ); } + discordChannels = []; channels.forEach(channel => { // We only want TextChannels, which have a type of 0 if (channel.type !== 0) return; - $("#subChannels").append($("
-
@@ -100,99 +103,11 @@ -
-
-
-
-
-
- -
- showing  -  of  -
-
- - -
-
-
-
-
-
-
-
- -
- showing  -  of  -
-
- - -
-
-
-
-
-
-
-
- -
- showing  -  of  -
-
- - -
-
-
+
+ +