126 lines
4.7 KiB
JavaScript

$(document).ready(async function() {
await initSubscriptionTable();
await initFiltersTable();
await initContentTable();
$("#subscriptionsTab").click();
await loadSavedGuilds();
await loadServerOptions();
handleDiscordChannelNames();
});
// $('#serverTabs [data-bs-toggle="tab"]').on("show.bs.tab", function(event) {
// const activeTab = $(event.target);
// $(".tab-pane-buttons .tab-pane-buttons-item").hide();
// $(`.tab-pane-buttons .tab-pane-buttons-item[data-tab="${activeTab.attr("id")}"]`).show();
// });
$(document).on("selectedServerChange", function() {
$("#subscriptionsTab").click();
});
function formatDate(date) {
// Array of weekday names
const weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
// Array of month names
const months = [
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
// Get individual components
let hours = String(date.getHours()).padStart(2, '0');
let minutes = String(date.getMinutes()).padStart(2, '0');
let seconds = String(date.getSeconds()).padStart(2, '0');
let dayOfWeek = weekdays[date.getDay()];
let dayOfMonth = date.getDate();
let month = months[date.getMonth()];
let year = date.getFullYear();
// Format day with ordinal suffix
let dayOfMonthSuffix;
if (dayOfMonth % 10 === 1 && dayOfMonth !== 11) {
dayOfMonthSuffix = dayOfMonth + "st";
} else if (dayOfMonth % 10 === 2 && dayOfMonth !== 12) {
dayOfMonthSuffix = dayOfMonth + "nd";
} else if (dayOfMonth % 10 === 3 && dayOfMonth !== 13) {
dayOfMonthSuffix = dayOfMonth + "rd";
} else {
dayOfMonthSuffix = dayOfMonth + "th";
}
// `${hours}:${minutes}:${seconds} · `
return `${dayOfWeek}, ${dayOfMonthSuffix} ${month}, ${year}<br>${hours}:${minutes}:${seconds}`;
}
function genHexString(len) {
let output = '';
for (let i = 0; i < len; ++i) {
output += (Math.floor(Math.random() * 16)).toString(16);
}
return output;
}
// #region Colour Controls
$(".colour-control-picker").on("change", function() {
$(this).closest(".colour-control-group").find(".colour-control-text").val($(this).val());
});
$(".colour-control-text").on("change", function() {
$(this).closest(".colour-control-group").find(".colour-control-picker").val($(this).val());
});
function updateColourInput(id, hexString) {
hexString = hexString.toUpperCase();
$(`#${id} .colour-picker`).val(hexString);
$(`#${id} .colour-text`).val(hexString);
}
$(document).ready(function() {
$(".colour-input").each(function() {
let id = $(this).attr("data-id")
label = $(this).attr("data-label");
helpText = $(this).attr("data-helptext");
tabIndex = parseInt($(this).attr("data-tabindex"));
defaultColour = $(this).attr("data-defaultcolour");
defaultColour = defaultColour ? defaultColour : "#3498db"
$(this).replaceWith(`
<label for="${id}Picker" class="form-label">${label}</label>
<div id="${id}" class="input-group">
<input type="color" name="${id}Picker" id="${id}Picker" class="form-control-color input-group-text colour-picker" tabindex="${tabIndex}">
<input type="text" name="${id}Text" id="${id}Text" class="form-control colour-text" tabindex="${tabIndex + 1}">
<button type="button" class="btn btn-secondary colour-reset" data-bs-toggle="tooltip" data-bs-title="Reset Colour" data-defaultcolour="${defaultColour}" tabindex="${tabIndex + 2}">
<i class="bi bi-arrow-clockwise"></i>
</button>
<button type="button" class="btn btn-secondary colour-random" data-bs-toggle="tooltip" data-bs-title="Random Colour" tabindex="${tabIndex + 3}">
<i class="bi bi-dice-5"></i>
</button>
</div>
<div class="form-text">${helpText}</div>
`);
$(`#${id} .colour-picker`).on("change", function() {
updateColourInput(id, $(this).val());
});
$(`#${id} .colour-text`).on("change", function() {
updateColourInput(id, $(this).val());
});
$(`#${id} .colour-reset`).on("click", function() {
updateColourInput(id, $(this).attr("data-defaultcolour"));
});
$(`#${id} .colour-random`).on("click", function() {
updateColourInput(id, "#" + genHexString(6));
});
updateColourInput(id, "#" + defaultColour)
$(`#${id} [data-bs-toggle="tooltip"]`).tooltip();
});
});