message styles table

This commit is contained in:
Corban-Lee Jones 2024-09-27 17:42:42 +01:00
parent db4dcc4175
commit 1b28600c39
3 changed files with 168 additions and 3 deletions

View File

@ -4,6 +4,7 @@ $(document).ready(async function() {
// await initContentTable();
initSubscriptionsModule();
initMessageStylesModule();
await loadServers();
$("#subscriptionsTab").click();
@ -13,6 +14,9 @@ $(document).on("selectedServerChange", function() {
$("#subscriptionsTab").click();
});
// region Hex Strings
function genHexString(len=6) {
let output = '';
for (let i = 0; i < len; ++i) {
@ -21,6 +25,14 @@ function genHexString(len=6) {
return output;
}
// region DateTime
function isISODateTimeString(value) {
const isoDatePattern = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d+([+-]\d{2}:\d{2}|Z)$/;
return typeof value === 'string' && isoDatePattern.test(value);
}
// my clone of python's datetime.strftime
function formatStringDate(date, format) {
const padZero = (num, len) => String(num).padStart(len, "0");
@ -76,7 +88,8 @@ function formatStringDate(date, format) {
return format.replace(/%[a-zA-Z%-]/g, match => formatters[match] ? formatters[match](date) : match);
}
// #region Colour Controls
// region Colour Controls
$(".colour-control-picker").on("change", function() {
$(this).closest(".colour-control-group").find(".colour-control-text").val($(this).val());
});
@ -155,8 +168,11 @@ $(document).ready(function() {
});
});
// region Confirm Modal
async function confirmationModal(title, bodyText, style, acceptFunc, declineFunc) {
let $modal = $("#confirmationModal");
let $modal = $("#confirmModal");
// Ensure valid style and apply it to the confirm button
if (!["danger", "success", "warning", "info", "primary", "secondary"].includes(style)) {
@ -191,6 +207,9 @@ function arrayToHtmlList(array, bold=false) {
return $ul;
}
// region Log Error
function logError(error) {
if (error instanceof Error) {
// Logs typical error properties like message and stack

View File

@ -0,0 +1,68 @@
const styleTableId = "#styleTable";
// region Init Module
function initMessageStylesModule() {
initializeDataTable(
styleTableId,
[
{
title: "Name",
data: "name"
},
{
title: "Is Embed?",
data: "is_embed"
},
{
title: "Is Hyperlinked?",
data: "is_hyperlinked"
},
{
title: "Show Author?",
data: "show_author"
},
{
title: "Show Timestamp?",
data: "show_timestamp"
},
{
title: "Show Images?",
data: "show_images"
},
{
title: "Fetch Images?",
data: "fetch_images"
},
{
title: "Title Mutator",
data: "title_mutator"
},
{
title: "Description Mutator",
data: "description_mutator"
}
]
);
};
// region Load Data
$(document).on("selectedServerChange", async function() {
await loadMessageStyleData();
});
$(document).on("doDataLoad", async function() {
await loadMessageStyleData();
});
async function loadMessageStyleData() {
if (!selectedServer) {
return;
}
setTableFilter(styleTableId, "server", selectedServer.id);
await loadTableData(styleTableId, "/api/message-styles/", "GET");
}

View File

@ -1 +1,79 @@
styles
<div class="js-tableFilters row my-3 px-sm-3">
<div class="col-md-6 col-lg-5 col-xl-4 col-xxl-3">
<div class="input-group mb-lg-0 mb-3 rounded-1">
<span class="input-group-text">
<i class="bi bi-search"></i>
</span>
<input type="search" class="form-control search-filter" placeholder="Search">
</div>
</div>
<div class="col-md-6 col-lg-7 col-xl-8 col-xxl-9 text-md-end table-search-buttons">
<div class="d-inline-block">
<button type="button" class="table-new-btn btn btn-primary rounded-1">
<i class="bi bi-plus-lg"></i>
</button>
</div>
<div class="d-inline-block">
<div class="dropdown table-sort-dropdown">
<button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
<i class="bi bi-sort-alpha-up"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><h6 class="dropdown-header">Sort By</h6></li>
</ul>
</div>
</div>
<div class="d-inline-block">
<div class="dropdown table-filter-dropdown">
<button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
<i class="bi bi-funnel"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><h6 class="dropdown-header">Filter By</h6></li>
</ul>
</div>
</div>
<div class="d-inline-block">
<button type="button" class="table-refresh-btn btn btn-outline-secondary rounded-1">
<i class="bi bi-arrow-clockwise"></i>
</button>
</div>
<div class="d-inline-block">
<button type="button" class="table-del-btn btn btn-danger rounded-1">
<i class="bi bi-trash3"></i>
</button>
</div>
</div>
</div>
<div class="js-tableBody table-responsive my-3 px-sm-3">
<table id="styleTable" class="table table-hover align-middle"></table>
</div>
<div class="js-tableControls row px-sm-3 mb-4">
<div class="col-lg-6">
<nav class="table-pagination mb-4 mb-lg-0">
<ul class="pagination mb-0">
<li class="page-item">
<button type="button" class="page-link page-prev rounded-start-1">
<i class="bi bi-chevron-left"></i>
</button>
</li>
<li class="page-item">
<button type="button" class="page-link page-next rounded-end-1">
<i class="bi bi-chevron-right"></i>
</button>
</li>
</ul>
</nav>
</div>
<div class="col-lg-6 d-flex align-items-center justify-content-lg-end">
<label for="styleTablePageSizer" class="form-label align-self-center mb-0 me-2">Show</label>
<select name="styleTablePageSizer" id="styleTablePageSizer" class="select-2 table-page-sizer">
<option value="10" selected>10&emsp;</option>
<option value="15">15&emsp;</option>
<option value="20">20&emsp;</option>
<option value="25">25&emsp;</option>
</select>
<span class="ms-2">of&nbsp;</span>
<span class="pageinfo-total text-nowrap">10</span>
</div>
</div>