corbz/relay
1
0
Fork 0
Code Issues 2 Pull Requests Actions Releases Activity

refactor: styles page client-side code
Some checks failed
Build / build (push) Failing after 33s
Details

Browse Source
This commit is contained in:
Corban-Lee Jones 2025-05-11 18:22:10 +01:00
parent 186e1dbf93
commit d1957faf95
1 changed files with 120 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

252
src/client/src/ts/guild/styles.ts
View File

@ -1,23 +1,16 @@
import $ from "jquery";
import { formatTimestamp, genHexString } from "../main";
import HSDropdown from "preline/dist/dropdown";
import HSSelect, { ISelectOptions } from "preline/dist/select";
import HSOverlay, { IOverlayOptions } from "preline/dist/overlay";
import HSDataTable, { IDataTableOptions } from "preline/dist/datatable";
import { Api, AjaxSettings, ConfigColumnDefs } from "datatables.net-dt";
import "datatables.net-select-dt";
import HSDropdown from "@preline/dropdown";
import HSOverlay, { IOverlayOptions } from "@preline/overlay";
import HSSelect, { ISelectOptions, ISingleOption } from "@preline/select";
import HSDataTable, { IDataTableOptions } from "@preline/datatable";
import DataTable, { Api, ConfigColumnDefs, AjaxSettings } from "datatables.net-dt";
import { autoUpdate, computePosition, offset } from "@floating-ui/dom";
import { formatTimestamp, genHexString } from "../../../src/ts/main";
import prisma from "../../../../../generated/prisma";
declare let guildId: string;
declare const textMutators: { [key: string]: string };
// #region DataTable
//
// Fix dependency bugs with preline
(window as any).DataTable = DataTable;
(window as any).$hsDataTableCollection = [];
const emptyTableHtml: string = `
<div class="max-w-md w-full min-h-[400px] flex flex-col justify-center mx-auto px-6 py-4">
@ -44,7 +37,6 @@ const emptyTableHtml: string = `
</div>
`;
const columnDefs: ConfigColumnDefs[] = [
// Select checkbox column
{
@ -285,10 +277,20 @@ const tableOptions: IDataTableOptions = {
}
};
const table: HSDataTable = new HSDataTable(
$("#table").get(0) as HTMLElement,
tableOptions
);
let table: HSDataTable;
window.addEventListener("preline:ready", () => {
const tableEl = $("#table").get(0);
if (HSDataTable.getInstance(tableEl, true)) return;
table = new HSDataTable(tableEl, tableOptions);
(table as any).dataTable
.on("select", onTableSelectChange)
.on("deselect", onTableSelectChange)
.on("draw", onTableSelectChange);
});
const onTableSelectChange = () => {
const selectedRowsCount = (table as any).dataTable.rows({ selected: true }).count();
@ -299,15 +301,11 @@ const onTableSelectChange = () => {
selectedRowsCount === 0 ? $elem.hide() : $elem.show();
};
(table as any).dataTable
.on("select", onTableSelectChange)
.on("deselect", onTableSelectChange)
.on("draw", onTableSelectChange);
$("#selectAllBox").on("change", function() {
const dt: Api = (table as any).dataTable;
(this as HTMLInputElement).checked
? (table as any).dataTable.rows().select()
: (table as any).dataTable.rows().deselect();
? dt.rows().select()
: dt.rows().deselect();
});
$("#deleteRowsBtn").on("click", async () => {
@ -332,23 +330,7 @@ $("#deleteRowsBtn").on("click", async () => {
// #endregion
// #region Page Size Select
// https://preline.co/plugins/html/advanced-select.html
(window as any).$hsSelectCollection = [];
(window as any)["FloatingUIDOM"] = {
computePosition: computePosition,
autoUpdate: autoUpdate,
offset: offset
};
// Close on click.
window.addEventListener('click', (evt) => {
const evtTarget = evt.target;
HSSelect.closeCurrentlyOpened(evtTarget as HTMLElement);
});
// #region Table Paging Select
const pageSelectOptions: ISelectOptions = {
toggleTag: '<button type="button" aria-expanded="false"></button>',
@ -368,29 +350,47 @@ const pageSelectOptions: ISelectOptions = {
dropdownVerticalFixedPlacement: null
};
const pageSizeSelect: HSSelect = new HSSelect(
$("#selectPageSize-js").get(0) as HTMLElement,
pageSelectOptions
);
window.addEventListener("preline:ready", () => {
const selectEl = $("#selectPageSize-js").get(0);
if (!HSSelect.getInstance(selectEl, true)) {
new HSSelect(selectEl, pageSelectOptions);
}
});
// #endregion
// #region Edit Modal
(window as any).$hsOverlayCollection = [];
const closeEditModal = () => { editModal.close() };
const editModalOptions: IOverlayOptions = {};
const openEditModal = async (id: number | undefined) => {
$("#editForm").removeClass("submitted");
editModal.open();
const editModal: HSOverlay = new HSOverlay(
$("#editModal").get(0) as HTMLElement,
editModalOptions
);
id === undefined
? clearEditModalData()
: loadEditModalData(id);
};
$(document).on("click", ".open-edit-modal-js", async event => {
await openEditModal($(event.target).data("id"));
});
const editModalOptions: IOverlayOptions = {};
let editModal: HSOverlay;
window.addEventListener("preline:ready", () => {
const modalEl = $("#editModal").get(0);
if (!HSOverlay.getInstance(modalEl, true)) {
editModal = new HSOverlay(modalEl, editModalOptions);
}
});
// #endregion
// #region Edit Form
const clearEditModalData = () => {
$(editModal.el).removeData("id");
@ -426,93 +426,19 @@ const loadEditModalData = async (id: number) => {
$("#formShowThumbnail").prop("checked", style.show_thumbnail);
$("#formShowFooter").prop("checked", style.show_footer);
$("#formShowTimestamp").prop("checked", style.show_timestamp);
}
const openEditModal = async (id: number | undefined) => {
$("#editForm").removeClass("submitted");
editModal.open();
id === undefined
? clearEditModalData()
: loadEditModalData(id);
};
const closeEditModal = () => {
editModal.close();
};
const mutatorSelectOptions: ISelectOptions = {
toggleTag: '<button type="button" aria-expanded="false"><span data-title></span></button>',
optionTemplate: `
<div class="flex justify-between items-center w-full">
<span data-title></span>
<span class="hidden hs-selected:block">
<svg class="shrink-0 size-3.5 text-blue-600 dark:text-blue-500" xmlns="http:.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
</div>`,
toggleClasses: "cj-select-toggle select-input",
optionClasses: "cj-select-option",
dropdownClasses: "cj-select-dropdown",
wrapperClasses: "peer",
dropdownSpace: 10,
dropdownScope: "parent",
dropdownPlacement: "top",
dropdownVerticalFixedPlacement: null
};
const titleMutatorSelect = new HSSelect(
$("#formTitleMutator").get(0),
mutatorSelectOptions
);
// Add options to title mutator select
titleMutatorSelect.addOption({ title: "None", val: "" });
Object.entries(textMutators).forEach(([key, description]) => {
titleMutatorSelect.addOption({
title: description,
val: key
} as ISingleOption)
});
const descriptionMutatorSelect = new HSSelect(
$("#formDescriptionMutator").get(0),
mutatorSelectOptions
);
// Add options to description mutator select
descriptionMutatorSelect.addOption({ title: "None", val: "" });
Object.entries(textMutators).forEach(([key, description]) => {
descriptionMutatorSelect.addOption({
title: description,
val: key
} as ISingleOption)
});
const colourPicker = $("#formColour") as JQuery<HTMLInputElement>;
const colourTextInput = $("#formColourInput") as JQuery<HTMLInputElement>;
const colourRandomBtn = $("#formColourRandomBtn") as JQuery<HTMLButtonElement>;
const updateColourInput = (value: string) => {
value = "#" + value.replace(/[^A-F0-9]/gi, '')
.toUpperCase()
.slice(0, 6)
.padEnd(6, "0");
colourPicker.val(value);
colourTextInput.val(value);
};
colourPicker.on("change", _ => updateColourInput(colourPicker.val()));
colourTextInput.on("change", _ => updateColourInput(colourTextInput.val()));
colourRandomBtn.on("click", _ => updateColourInput(genHexString(6)));
$("#editForm").on("submit", async event => {
event.preventDefault();
const form = $(event.target).get(0) as HTMLFormElement;
$(form).addClass("submitted");
if (!form.checkValidity()) return;
const validity = form.checkValidity();
if (!validity) {
console.debug(`Submit form invalid: ${validity}`);
return;
};
let method = "post";
const data = $(event.target).serializeArray();
@ -539,4 +465,66 @@ $("#editForm").on("submit", async event => {
});
});
const mutatorSelectOptions: ISelectOptions = {
toggleTag: '<button type="button" aria-expanded="false"><span data-title></span></button>',
optionTemplate: `
<div class="flex justify-between items-center w-full">
<span data-title></span>
<span class="hidden hs-selected:block">
<svg class="shrink-0 size-3.5 text-blue-600 dark:text-blue-500" xmlns="http:.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
</div>`,
toggleClasses: "cj-select-toggle select-input",
optionClasses: "cj-select-option",
dropdownClasses: "cj-select-dropdown",
wrapperClasses: "peer",
dropdownSpace: 10,
dropdownScope: "parent",
dropdownPlacement: "top",
dropdownVerticalFixedPlacement: null
};
let titleMutatorSelect: HSSelect;
let descriptionMutatorSelect: HSSelect;
window.addEventListener("preline:ready", () => {
const exists = (element: HTMLElement) => HSSelect.getInstance(element, true);
const titleEl = $("#formTitleMutator").get(0);
const descEl = $("#formDescriptionMutator").get(0);
if (exists(titleEl) || exists(descEl)) return;
titleMutatorSelect = new HSSelect(titleEl, mutatorSelectOptions);
titleMutatorSelect.addOption({ title: "None", val: "" });
descriptionMutatorSelect = new HSSelect(descEl, mutatorSelectOptions);
descriptionMutatorSelect.addOption({ title: "None", val: "" });
Object.entries(textMutators).forEach(([key, description]) => {
const option = {title: description, val: key};
titleMutatorSelect.addOption(option);
descriptionMutatorSelect.addOption(option);
});
});
const colourPicker = $("#formColour") as JQuery<HTMLInputElement>;
const colourTextInput = $("#formColourInput") as JQuery<HTMLInputElement>;
const colourRandomBtn = $("#formColourRandomBtn") as JQuery<HTMLButtonElement>;
const updateColourInput = (value: string) => {
value = "#" + value.replace(/[^A-F0-9]/gi, '')
.toUpperCase()
.slice(0, 6)
.padEnd(6, "0");
colourPicker.val(value);
colourTextInput.val(value);
};
colourPicker.on("change", _ => updateColourInput(colourPicker.val()));
colourTextInput.on("change", _ => updateColourInput(colourTextInput.val()));
colourRandomBtn.on("click", _ => updateColourInput(genHexString(6)));
// #endregion