improved date format func

apps/static/js/home/content.js

@@ -77,16 +77,14 @@ async function initContentTable() {
                 data: "creation_datetime",
                 className: "text-nowrap",
                 render: function(data, type) {
-                    // return new Date(data).toISOString().split("T")[0];
                     let dateTime = new Date(data);
-                    let dateTimeString = formatDate(dateTime);
                     return $(`
                     <span data-bs-trigger="hover focus"
-                    data-bs-html="true"
+                        data-bs-html="true"
-                    data-bs-custom-class="text-center"
+                        data-bs-custom-class="text-center"
-                    data-bs-toggle="popover"
+                        data-bs-toggle="popover"
-                    data-bs-content="${dateTimeString}">
+                        data-bs-content="${formatStringDate(dateTime, "%a, %D %B, %Y<br>%H:%M:%S")}">
-                    ${dateTime.toISOString().split("T")[0]}
+                        ${formatStringDate(dateTime, "%D, %b %Y")}
                     </span>
                     `).popover()[0];
                 }

apps/static/js/home/index.js

@@ -21,42 +21,6 @@ $(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) {
@@ -65,6 +29,61 @@ function genHexString(len) {
     return output;
 }
 
+// my clone of python's datetime.strftime
+function formatStringDate(date, format) {
+    const padZero = (num, len) => String(num).padStart(len, "0");
+    const abbreviate = (str) => str.slice(0, 3);
+    const ordSuffix = day => [,"st","nd","rd"][day % 10] || "th";
+
+    const formatters = {
+        "%a": date => abbreviate(date.toLocaleString("en-GB", { weekday: "short" })),
+        "%A": date => date.toLocaleString("en-GB", { weekday: "long" }),
+        "%w": date => date.getDay(),
+        "%d": date => padZero(date.getDate(), 2),
+        "%-d": date => date.getDate(),
+        "%b": date => abbreviate(date.toLocaleString("en-GB", { month: "short" })),
+        "%B": date => date.toLocaleString("en-GB", { month: "long" }),
+        "%m": date => padZero(date.getMonth() + 1, 2),
+        "%-m": date => date.getMonth() + 1,
+        "%y": date => padZero(date.getFullYear() % 100, 2),
+        "%-y": date => date.getFullYear() % 100,
+        "%Y": date => date.getFullYear(),
+        "%H": date => padZero(date.getHours(), 2),
+        "%-H": date => date.getHours(),
+        "%I": date => padZero(date.getHours() % 12 || 12, 2),
+        "%-I": date => date.getHours() % 12 || 12,
+        "%p": date => date.getHours() >= 12 ? "PM" : "AM",
+        "%M": date => padZero(date.getMinutes(), 2),
+        "%-M": date => date.getMinutes(),
+        "%S": date => padZero(date.getSeconds(), 2),
+        "%-S": date => date.getSeconds(),
+        "%f": date => padZero(date.getMilliseconds() * 1000, 6),
+        "%z": date => {
+            const offset = date.getTimezoneOffset();
+            const sign = offset > 0 ? "-" : "+";
+            const absOffset = Math.abs(offset);
+            const hours = padZero(Math.floor(absOffset / 60), 2);
+            const minutes = padZero(absOffset % 60, 2);
+            return `${sign}${hours}${minutes}`;
+        },
+        "%Z": date => {
+            const match = date.toTimeString().match(/\((.*)\)/);
+            return match ? match[1] : "";
+        },
+        "%j": date => padZero(Math.ceil((date - new Date(date.getFullYear(), 0, 1)) / 86400000) + 1, 3),
+        "%-j": date => Math.ceil((date - new Date(date.getFullYear(), 0, 1)) / 86400000) + 1,
+        "%U": date => padZero(Math.floor((date - new Date(date.getFullYear(), 0, 1) + (86400000 * (date.getDay() || 7 - 1))) / (86400000 * 7)), 2),
+        "%W": date => padZero(Math.floor((date - new Date(date.getFullYear(), 0, 1) + (86400000 * (date.getDay() || 7))) / (86400000 * 7)), 2),
+        "%c": date => date.toLocaleString(),
+        "%x": date => date.toLocaleDateString(),
+        "%X": date => date.toLocaleTimeString(),
+        "%D": date => date.getDate() + ordSuffix(date.getDate()),        
+        "%%": () => "%"
+    };
+
+    return format.replace(/%[a-zA-Z%-]/g, match => formatters[match] ? formatters[match](date) : match);
+}
+
 // #region Colour Controls
 $(".colour-control-picker").on("change", function() {
     $(this).closest(".colour-control-group").find(".colour-control-text").val($(this).val());
@@ -123,4 +142,5 @@ $(document).ready(function() {
         updateColourInput(id, "#" + defaultColour)
         $(`#${id} [data-bs-toggle="tooltip"]`).tooltip();
     });
-});
+});
+

apps/static/js/home/subscriptions.js

@@ -57,6 +57,7 @@ async function initSubscriptionTable() {
             { 
                 title: "Channels",
                 data: "channels_count",
+                className: "text-center",
                 render: function(data) {
                     return `<span class="badge text-bg-secondary">${data}</span>`;
                 }
@@ -66,14 +67,13 @@ async function initSubscriptionTable() {
                 data: "creation_datetime",
                 render: function(data, type) {
                     let dateTime = new Date(data);
-                    let dateTimeString = formatDate(dateTime);
                     return $(`
                         <span data-bs-trigger="hover focus"
                             data-bs-html="true"
                             data-bs-custom-class="text-center"
                             data-bs-toggle="popover"
-                            data-bs-content="${dateTimeString}">
+                            data-bs-content="${formatStringDate(dateTime, "%a, %D %B, %Y<br>%H:%M:%S")}">
-                            ${dateTime.toISOString().split("T")[0]}
+                            ${formatStringDate(dateTime, "%D, %b %Y")}
                         </span>
                     `).popover()[0];
                 }
@@ -431,7 +431,6 @@ async function loadChannelOptions(guildId) {
     $("#subChannels").val("").change();
     try {
         const channels = await loadChannels(guildId);
-        channels.sort((a, b) => a.position - b.position);
 
         // If we have reached the discord API rate limit
         if (channels.message && channels.message.includes("rate limit")) {
@@ -457,6 +456,9 @@ async function loadChannelOptions(guildId) {
             );
         }
 
+        // Sort by the specified position of each channel object
+        channels.sort((a, b) => a.position - b.position);
+
         discordChannels = [];
         channels.forEach(channel => {