style form & table layout
This commit is contained in:
parent
67ae103676
commit
8ef9c9d9dd
@ -1,4 +1,5 @@
|
||||
const styleTableId = "#styleTable";
|
||||
const styleModalId = "#styleFormModal";
|
||||
|
||||
|
||||
// region Init Module
|
||||
@ -9,31 +10,65 @@ function initMessageStylesModule() {
|
||||
[
|
||||
{
|
||||
title: "Name",
|
||||
data: "name"
|
||||
data: "name",
|
||||
render: function(data) {
|
||||
const name = sanitise(data);
|
||||
return `<button type="button" class="btn btn-link text-start text-decoration-none edit-modal">${name}</button>`;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Is Embed?",
|
||||
data: "is_embed"
|
||||
title: "Is Embed",
|
||||
data: "is_embed",
|
||||
className: "text-center",
|
||||
render: function(data) {
|
||||
const iconClass = data ? "bi-check-circle-fill text-success" : "bi-x-circle-fill text-danger";
|
||||
return `<i class="bi ${iconClass}"></i>`;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Is Hyperlinked?",
|
||||
data: "is_hyperlinked"
|
||||
title: "Is Hyperlinked",
|
||||
data: "is_hyperlinked",
|
||||
className: "text-center",
|
||||
render: function(data) {
|
||||
const iconClass = data ? "bi-check-circle-fill text-success" : "bi-x-circle-fill text-danger";
|
||||
return `<i class="bi ${iconClass}"></i>`;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Show Author?",
|
||||
data: "show_author"
|
||||
title: "Show Author",
|
||||
data: "show_author",
|
||||
className: "text-center",
|
||||
render: function(data) {
|
||||
const iconClass = data ? "bi-check-circle-fill text-success" : "bi-x-circle-fill text-danger";
|
||||
return `<i class="bi ${iconClass}"></i>`;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Show Timestamp?",
|
||||
data: "show_timestamp"
|
||||
title: "Show Timestamp",
|
||||
data: "show_timestamp",
|
||||
className: "text-center",
|
||||
render: function(data) {
|
||||
const iconClass = data ? "bi-check-circle-fill text-success" : "bi-x-circle-fill text-danger";
|
||||
return `<i class="bi ${iconClass}"></i>`;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Show Images?",
|
||||
data: "show_images"
|
||||
title: "Show Images",
|
||||
data: "show_images",
|
||||
className: "text-center",
|
||||
render: function(data) {
|
||||
const iconClass = data ? "bi-check-circle-fill text-success" : "bi-x-circle-fill text-danger";
|
||||
return `<i class="bi ${iconClass}"></i>`;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Fetch Images?",
|
||||
data: "fetch_images"
|
||||
title: "Fetch Images",
|
||||
data: "fetch_images",
|
||||
className: "text-center",
|
||||
render: function(data) {
|
||||
const iconClass = data ? "bi-check-circle-fill text-success" : "bi-x-circle-fill text-danger";
|
||||
return `<i class="bi ${iconClass}"></i>`;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Title Mutator",
|
||||
@ -66,3 +101,92 @@ async function loadMessageStyleData() {
|
||||
setTableFilter(styleTableId, "server", selectedServer.id);
|
||||
await loadTableData(styleTableId, "/api/message-styles/", "GET");
|
||||
}
|
||||
|
||||
|
||||
// region New/Edit Modal
|
||||
|
||||
$(styleTableId).closest(".js-tableBody").siblings(".js-tableFilters").on("click", ".table-new-btn", async function() {
|
||||
await openStyleModal(-1);
|
||||
});
|
||||
|
||||
$(styleTableId).on("click", ".edit-modal", async function() {
|
||||
let id = $(styleTableId).DataTable().row($(this).closest("tr")).data().id;
|
||||
await openStyleModal(id);
|
||||
});
|
||||
|
||||
async function openStyleModal(id) {
|
||||
$modal = $(styleModalId);
|
||||
|
||||
if (parseInt(id) === -1) {
|
||||
$modal.find(".form-create").show();
|
||||
$modal.find(".form-edit").hide();
|
||||
|
||||
$modal.find("[data-field]").each(function() {
|
||||
const type = $(this).attr("type");
|
||||
const defaultVal = $(this).attr("data-default") || "";
|
||||
|
||||
if (type === "checkbox") {
|
||||
$(this).prop("checked", defaultVal === "true");
|
||||
}
|
||||
else if (type === "datetime-local") {
|
||||
$(this).val(getCurrentDateTime());
|
||||
}
|
||||
else {
|
||||
$(this).val(defaultVal).change();
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
$modal.find(".form-create").hide();
|
||||
$modal.find(".form-edit").show();
|
||||
|
||||
const data = await ajaxRequest(`/api/message-styles/${id}/`, "GET");
|
||||
|
||||
$modal.find("[data-field]").each(function() {
|
||||
const key = $(this).attr("data-field");
|
||||
const value = data[key];
|
||||
|
||||
if (typeof value === "boolean") {
|
||||
$(this).prop("checked", value);
|
||||
}
|
||||
else if (isISODateTimeString(value)) {
|
||||
$(this).val(value.split('+')[0].substring(0, 16));
|
||||
}
|
||||
else {
|
||||
$(this).val(value).change();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$modal.modal("show");
|
||||
}
|
||||
|
||||
|
||||
// region Load Mutator Options
|
||||
|
||||
$(document).ready(async function() {
|
||||
await loadMutatorOptions();
|
||||
});
|
||||
|
||||
async function loadMutatorOptions() {
|
||||
let $inputs = $(styleModalId).find('[data-field="title_mutator"], [data-field="description_mutator"]');
|
||||
|
||||
$inputs.val("").change();
|
||||
$inputs.prop("disabled", true);
|
||||
|
||||
$inputs.find("option").each(function() {
|
||||
if ($(this).val()) {
|
||||
$(this).remove();
|
||||
}
|
||||
});
|
||||
|
||||
const data = await ajaxRequest("/api/message-mutators/?page_size=25", "GET");
|
||||
data.results.forEach(mutator => {
|
||||
$inputs.append($(
|
||||
"<option>",
|
||||
{text: mutator.name, value: mutator.id}
|
||||
));
|
||||
});
|
||||
|
||||
$inputs.prop("disabled", false);
|
||||
}
|
||||
|
||||
98
apps/home/templates/home/modals/editStyle.html
Normal file
98
apps/home/templates/home/modals/editStyle.html
Normal file
@ -0,0 +1,98 @@
|
||||
<div id="styleFormModal" class="modal modal-lg fade" data-bs-backdrop="static" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content rounded-1">
|
||||
<form id="styleForm" class="mb-0" novalidate>
|
||||
<div class="modal-header border-bottom-0">
|
||||
<h5 class="modal-title ms-2">
|
||||
<span class="form-create">Add</span>
|
||||
<span class="form-edit">Edit</span>
|
||||
Message Style
|
||||
</h5>
|
||||
</div>
|
||||
<div class="modal-body p-4">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 pe-lg-4">
|
||||
<div class="mb-4">
|
||||
<label for="styleName" class="form-label">Name</label>
|
||||
<input type="text" name="styleName" id="styleName" class="form-control rounded-1" data-field="name" tabindex="1">
|
||||
<div class="form-text">Human-readable name for this entry.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 ps-lg-4"></div>
|
||||
<div class="col-lg-6 pe-lg-4">
|
||||
<div class="form-check form-switch mb-4">
|
||||
<label for="styleIsEmbed" class="form-check-label">Use an Embed</label>
|
||||
<input type="checkbox" name="styleIsEmbed" id="styleIsEmbed" class="form-check-input" data-field="is_embed" tabindex="2">
|
||||
<div class="form-text">Display in an Embed, instead of plain text.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 ps-lg-4">
|
||||
<div class="form-check form-switch mb-4">
|
||||
<label for="styleIsHyperlinked" class="form-check-label">Hyperlink the Title</label>
|
||||
<input type="checkbox" name="styleIsHyperlinked" id="styleIsHyperlinked" class="form-check-input" data-field="is_hyperlinked" tabindex="3">
|
||||
<div class="form-text">Click the title to go to the url.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 pe-lg-4">
|
||||
<div class="form-check form-switch mb-4">
|
||||
<label for="styleShowAuthor" class="form-check-label">Show the Author</label>
|
||||
<input type="checkbox" name="styleShowAuthor" id="styleShowAuthor" class="form-check-input" data-field="show_author" tabindex="4">
|
||||
<div class="form-text">Show the content author if possible.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 ps-lg-4">
|
||||
<div class="form-check form-switch mb-4">
|
||||
<label for="styleShowTimestamp" class="form-check-label">Show the Publish Date</label>
|
||||
<input type="checkbox" name="styleShowTimestamp" id="styleShowTimestamp" class="form-check-input" data-field="show_timestamp" tabindex="5">
|
||||
<div class="form-text">Show when the content was published.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 pe-lg-4">
|
||||
<div class="form-check form-switch mb-4">
|
||||
<label for="styleShowImages" class="form-check-label">Show any Images</label>
|
||||
<input type="checkbox" name="styleShowImages" id="styleShowImages" class="form-check-input" data-field="show_images" tabindex="6">
|
||||
<div class="form-text">Show any found images.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 ps-lg-4">
|
||||
<div class="form-check form-switch mb-4">
|
||||
<label for="styleFetchImages" class="form-check-label">Fetch missing Images</label>
|
||||
<input type="checkbox" name="styleFetchImages" id="styleFetchImages" class="form-check-input" data-field="fetch_images" tabindex="7">
|
||||
<div class="form-text">If images aren't found, try to fetch them.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 pe-lg-4">
|
||||
<div class="mb-4 mb-lg-0">
|
||||
<label for="styleTitleMutator" class="form-label">Title Mutator</label>
|
||||
<select name="styleTitleMutator" id="styleTitleMutator" class="select-2" data-dropdownparent="#styleFormModal" data-field="title_mutator" tabindex="8">
|
||||
<option value="">-----</option>
|
||||
</select>
|
||||
<div class="form-text">Modify the title in fun ways.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 ps-lg-4">
|
||||
<div class="">
|
||||
<label for="styleDescriptionMutator" class="form-label">Description Mutator</label>
|
||||
<select name="styleDescriptionMutator" id="styleDescriptionMutator" class="select-2" data-dropdownparent="#styleFormModal" data-field="description_mutator" tabindex="9">
|
||||
<option value="">-----</option>
|
||||
</select>
|
||||
<div class="form-text">Modify the description in fun ways.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer px-4 border-top-0">
|
||||
<button type="button" id="deleteEditSub" class="btn btn-danger rounded-1 me-auto ms-0 form-edit" tabindex="10">
|
||||
<i class="bi bi-trash3"></i>
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary rounded-1 me-0 px-4" tabindex="11">
|
||||
<i class="bi bi-floppy"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary rounded-1 me-0 ms-3" data-bs-dismiss="modal" tabindex="12">
|
||||
<i class="bi bi-arrow-return-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user