Added option to show day of the week in the better todo list

_locales/en/messages.json

@@ -57,7 +57,10 @@
         "message": "Hide completed"
     },
     "24hrformat": {
-        "message": "Use 24 hr format"
+        "message": "Use 24 hour format"
+    },
+    "dayOfWeek": {
+        "message": "Show day of the week"
     },
     "dashboard_notes": {
         "message": "Dashboard notes"

_locales/es/messages.json

@@ -59,6 +59,9 @@
     "24hrformat": {
         "message": "Usar formato de 24 horas"
     },
+    "dayOfWeek": {
+        "message": "Mostrar día de la semana"
+    },
     "dashboard_notes": {
         "message": "Notas del tablero"
     },

html/popup.html

@@ -118,6 +118,10 @@ <h1>Better Canvas</h1>
                             <input type="checkbox" id="todo_hr24" name="todo_hr24">
                             <label for="todo_hr24" class="sub-text" data-i18n="24hrformat">Use 24hr format</label>
                         </div>
+                        <div class="sub-option">
+                            <input type="checkbox" id="todo_dayOfWeek" name="todo_dayOfWeek">
+                            <label for="todo_dayOfWeek" class="sub-text" data-i18n="dayOfWeek">Show day of the week</label>
+                        </div>
                         <div class="sub-option">
                             <input type="checkbox" id="todo_overdues" name="todo_overdues">
                             <label for="todo_overdues" class="sub-text" data-i18n="show_past_due">Show past due</label>

js/background.js

@@ -37,6 +37,7 @@ chrome.runtime.onInstalled.addListener(function () {
             "dashboard_notes_text": "",
             "better_todo": false,
             "todo_hr24": false,
+            "todo_dayOfWeek": true,
             "condensed_cards": false,
             "custom_cards": {},
             "custom_cards_2": {},

js/content.js

@@ -171,6 +171,7 @@ function applyOptionsChanges(changes) {
             case ("custom_cards_3"):
                 customizeCards();
                 break;
+            case ("todo_dayOfWeek"):
             case ("todo_hr24"):
             case ("num_todo_items"):
             case ("hover_preview"):
@@ -701,6 +702,7 @@ function loadBetterTodo() {
         const maxAssignmentCount = parseInt(options.num_todo_items) + moreAssignmentCount;
         const maxAnnouncementCount = parseInt(options.num_todo_items) + moreAnnouncementCount;
         const hr24 = options.todo_hr24;
+        const dayOfWeek = options.todo_dayOfWeek;
         const now = new Date();
         //const csrfToken = CSRFtoken();
         let todoAnnouncements = document.querySelector("#bettercanvas-announcement-list");
@@ -754,7 +756,7 @@ function loadBetterTodo() {
                     let title = makeElement("a", listItem.querySelector(".bettercanvas-todo-item-header"), { "className": "bettercanvas-todoitem-title", "textContent": item.plannable.title });
                     if (options.todo_colors === true) title.style = "color:" + (options.custom_cards_3?.[item.course_id]?.color || "inherit") + "!important;";
                     makeElement("p", listItem, { "className": "bettercanvas-todoitem-course", "textContent": item.context_name });
-                    let format = formatTodoDate(date, item.submissions, hr24);
+                    let format = formatTodoDate(date, item.submissions, hr24, dayOfWeek);
                     let todoDate = makeElement("p", listItem, { "className": "bettercanvas-todoitem-date", "textContent": format.date });
                     if (format.dueSoon) todoDate.classList.add("bettercanvas-due-soon");
 
@@ -2068,14 +2070,15 @@ function getRelativeDate(date, short = false) {
 }
 
 const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-function formatTodoDate(date, submissions, hr24) {
+const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+function formatTodoDate(date, submissions, hr24, dayOfWeek) {
     let { time, ms } = getRelativeDate(date);
     let fromNow = ms < 0 ? "in " + time : time + " ago";
     let dueSoon = false;
     if (submissions && submissions.submitted === false && ms >= -21600000) {
         dueSoon = true;
     }
-    return { "dueSoon": dueSoon, "date": months[date.getMonth()] + " " + date.getDate() + " at " + (date.getHours() - (hr24 ? "" : date.getHours() > 12 ? 12 : 0)) + ":" + (date.getMinutes() < 10 ? "0" : "") + date.getMinutes() + (hr24 ? "" : date.getHours() >= 12 ? "pm" : "am") + " (" + fromNow + ")" };
+    return { "dueSoon": dueSoon, "date": (dayOfWeek ? days[date.getDay()] + ", " : "") + months[date.getMonth()] + " " + date.getDate() + " at " + (date.getHours() - (hr24 ? "" : date.getHours() > 12 ? 12 : 0)) + ":" + (date.getMinutes() < 10 ? "0" : "") + date.getMinutes() + (hr24 ? "" : date.getHours() >= 12 ? "pm" : "am") + " (" + fromNow + ")" };
 }
 
 function formatCardDue(date) {