From b362c05a4501ce0c1e4732ecb5dac8e6e34f0116 Mon Sep 17 00:00:00 2001 From: Guy Sandler Date: Thu, 16 Apr 2026 22:21:05 -0700 Subject: [PATCH] better todolist 1 a lot of progress --- js/content.js | 230 ++++++++++++++++++++++++++++++++++---------------- 1 file changed, 157 insertions(+), 73 deletions(-) diff --git a/js/content.js b/js/content.js index fd224d2..e8e3c64 100644 --- a/js/content.js +++ b/js/content.js @@ -3,6 +3,8 @@ const current_page = window.location.pathname; let assignments = null; let grades = null; let announcements = []; +let completed = []; +let assignmentsDue = []; let options = {}; let timeCheck = null; let reminderCheck = null; @@ -706,22 +708,22 @@ async function getCards(api = null) { Better todo list */ -function setAssignmentState(id, updates) { - let states = options.assignment_states; - let length = JSON.stringify(states).length; - // remove the oldest states if the size is approaching the storage limit - if (length > 7400) { - let keys = Object.keys(states).sort((a, b) => states[b].expire - states[a].expire); - keys.splice(-5); - let newStates = {}; - keys.forEach(key => { - newStates[key] = states[key]; - }); - states = newStates; - } - states[id] = states[id] ? { ...states[id], ...updates } : updates; - chrome.storage.sync.set({ assignment_states: states }).then(() => { cardAssignments = preloadAssignmentEls(); loadBetterTodo(); loadCardAssignments(); }); -} +// function setAssignmentState(id, updates) { +// let states = options.assignment_states; +// let length = JSON.stringify(states).length; +// // remove the oldest states if the size is approaching the storage limit +// if (length > 7400) { +// let keys = Object.keys(states).sort((a, b) => states[b].expire - states[a].expire); +// keys.splice(-5); +// let newStates = {}; +// keys.forEach(key => { +// newStates[key] = states[key]; +// }); +// states = newStates; +// } +// states[id] = states[id] ? { ...states[id], ...updates } : updates; +// chrome.storage.sync.set({ assignment_states: states }).then(() => { cardAssignments = preloadAssignmentEls(); loadBetterTodo(); loadCardAssignments(); }); +// } function createTodoCreateBtn(location) { let confirmButton = makeElement("button", location, { "className": "bettercanvas-custom-btn", "textContent": "Create" }); @@ -782,68 +784,149 @@ function createTodoCreateBtn(location) { }); } -function createTodoHeader(location) { - let todoHeader = makeElement("h2", location, { "className": "todo-list-header", "style": "display: flex; align-items:center; justify-content:space-between;" }); - //todoHeader.style = "display: flex; align-items:center; justify-content:space-between;"; - if (!options.custom_cards || Object.keys(options.custom_cards).length === 0) return; - let addFillout = makeElement("div", location, { "className": "bettercanvas-add-assignment" }); - let now = new Date(); - let year = now.getFullYear(); - let month = now.getMonth() + 1; - let day = now.getDate(); - month = month < 10 ? "0" + month : month; - day = day < 10 ? "0" + day : day; - addFillout.innerHTML = '
'; - addFillout.querySelector("#bettercanvas-custom-date").value = year + "-" + month + "-" + day; - let selectCourse = document.querySelector("#bettercanvas-custom-course"); - Object.keys(options.custom_cards).forEach(id => { - let card = options.custom_cards[id]; - let courseName = makeElement("option", selectCourse, { "className": "bettercanvas-select-course-option", "textContent": card.default }); - courseName.value = id; - }); +// better todo html layer 1 +// function createTodoHeader(location) { +// let todoHeader = makeElement("h2", location, { "className": "todo-list-header", "style": "display: flex; align-items:center; justify-content:space-between;" }); +// //todoHeader.style = "display: flex; align-items:center; justify-content:space-between;"; +// if (!options.custom_cards || Object.keys(options.custom_cards).length === 0) return; +// let addFillout = makeElement("div", location, { "className": "bettercanvas-add-assignment" }); +// let now = new Date(); +// let year = now.getFullYear(); +// let month = now.getMonth() + 1; +// let day = now.getDate(); +// month = month < 10 ? "0" + month : month; +// day = day < 10 ? "0" + day : day; +// addFillout.innerHTML = '
'; +// addFillout.querySelector("#bettercanvas-custom-date").value = year + "-" + month + "-" + day; +// let selectCourse = document.querySelector("#bettercanvas-custom-course"); +// Object.keys(options.custom_cards).forEach(id => { +// let card = options.custom_cards[id]; +// let courseName = makeElement("option", selectCourse, { "className": "bettercanvas-select-course-option", "textContent": card.default }); +// courseName.value = id; +// }); - createTodoCreateBtn(addFillout); - let headerText = makeElement("span", todoHeader, { "className": "bettercanvas-todo-header", "textContent": "To Do" }); - let addButton = makeElement("button", todoHeader, { "className": "bettercanvas-custom-btn", "textContent": "+ Add" }); - addButton.addEventListener("click", () => { - addFillout.classList.toggle("bettercanvas-custom-open"); - }); +// createTodoCreateBtn(addFillout); +// let headerText = makeElement("span", todoHeader, { "className": "bettercanvas-todo-header", "textContent": "To Do" }); +// let addButton = makeElement("button", todoHeader, { "className": "bettercanvas-custom-btn", "textContent": "+ Add" }); +// addButton.addEventListener("click", () => { +// addFillout.classList.toggle("bettercanvas-custom-open"); +// }); - headerText.addEventListener("click", () => { - if (filter === "todo") { - filter = "done"; - headerText.textContent = "Done"; - } else { - filter = "todo"; - headerText.textContent = "To Do"; - } - moreAssignmentCount = 0; - moreAnnouncementCount = 0; - loadBetterTodo(); - }); +// headerText.addEventListener("click", () => { +// if (filter === "todo") { +// filter = "done"; +// headerText.textContent = "Done"; +// } else { +// filter = "todo"; +// headerText.textContent = "To Do"; +// } +// moreAssignmentCount = 0; +// moreAnnouncementCount = 0; +// loadBetterTodo(); +// }); +// } + +function convertToDueDate(dueAt) { + // "2026-04-13T15:30:00Z" to Apr 4 at 3:30 PM + final = "due " + let date = new Date(dueAt); + final += date.toLocaleString("en-US", { month: "short", day: "numeric" }); + final += " at " + date.toLocaleString("en-US", { hour: "numeric", minute: "numeric", hour12: true }); + return final; } +// better todo html +betterTodoFilter = "tasks" +async function createTodoSections(location) { + // make outer + let filterControl = makeElement("div", location, { "id": "better-todo-filter" }); + filterControl.innerHTML = + `
+ + + +
`; + let header = makeElement("div", location, { id: "better-todo-header" }); + header.style = + "display: flex; align-items:center; justify-content:space-between;"; + header.innerHTML = "

Tasks

Wed Apr 8

"; + let mainSection = makeElement("div", location, { + id: "better-todo-main", + }); + mainSection.style = "display:flex;flex-direction:column;gap:10px;margin-top:10px;"; + assignments.then(data => { + // types: announcement + console.log(data); + data.forEach(item => { + announcements = data.filter(item => item.plannable_type == "announcement"); + // announcements.sort((a, b) => new Date(a.plannable_date) - new Date(b.plannable_date)); + assignmentsDue = data.filter((item) => item.plannable_type == "assignment" && !item.submissions.submitted); + // assignmentsDue.sort((a, b) => new Date(a.plannable_date) - new Date(b.plannable_date)); + completed = data.filter(item => item.plannable_type == "assignment" && item.submissions.submitted); + // completed.sort((a, b) => new Date(a.plannable_date) - new Date(b.plannable_date)); + }); -function createTodoSections(location) { - let todoHeader = createTodoHeader(location); + if (betterTodoFilter == "tasks") { + assignmentsDue.forEach((item) => { + const courseColor = + options.custom_cards_3?.[String(item.course_id)]?.color ?? + options.custom_cards_3?.[item.course_id]?.color ?? + options.custom_cards_3?.[item.plannable.course_id]?.color ?? + "#cccccc"; - let todoAssignments = makeElement("ul", location, { "id": "bettercanvas-todo-list" }); - /* - let todoAssignments = document.createElement("ul"); - todoAssignments.id = "bettercanvas-todo-list"; - location.appendChild(todoAssignments); - */ - let announcementHeader = makeElement("h2", location, { "className": "todo-list-header", "textContent": "Announcements" }); - let todoAnnouncements = makeElement("ul", location, { "id": "bettercanvas-announcement-list" }); - /* - let todoAnnouncements = document.createElement("ul"); - todoAnnouncements.id = "bettercanvas-announcement-list"; - location.appendChild(todoAnnouncements); - */ - let loader = '
'; - for (let i = 0; i < options.num_todo_items; i++) { - todoAssignments.innerHTML += loader; - todoAnnouncements.innerHTML += loader; - } + let assignment = makeElement("div", mainSection, { + class: "better-todo-assignment", + }); + // assignment.innerHTML = ` + //
${courseColor}
+ // ${item.plannable.title}\ + // ${new Date(item.plannable_date).toLocaleString()} + // `; + assignment.innerHTML = ` +
+
+
+ + + + + +
+
+
+
+ ${item.context_name} + ${item.plannable.title} + ${convertToDueDate(item.plannable.due_at)} +
+ +
+ +
+ `; + }); + } + }) + + // let todoHeader = createTodoHeader(location); + + // let todoAssignments = makeElement("ul", location, { "id": "bettercanvas-todo-list" }); + // /* + // let todoAssignments = document.createElement("ul"); + // todoAssignments.id = "bettercanvas-todo-list"; + // location.appendChild(todoAssignments); + // */ + // let announcementHeader = makeElement("h2", location, { "className": "todo-list-header", "textContent": "Announcements" }); + // let todoAnnouncements = makeElement("ul", location, { "id": "bettercanvas-announcement-list" }); + // /* + // let todoAnnouncements = document.createElement("ul"); + // todoAnnouncements.id = "bettercanvas-announcement-list"; + // location.appendChild(todoAnnouncements); + // */ + // let loader = '
'; + // for (let i = 0; i < options.num_todo_items; i++) { + // todoAssignments.innerHTML += loader; + // todoAnnouncements.innerHTML += loader; + // } } function createTodoViewMore(location, type) { @@ -860,6 +943,7 @@ function createTodoViewMore(location, type) { }); } +// better todo init function setupBetterTodo() { if (options.better_todo !== true) return; if (document.querySelector('#bettercanvas-todo-list')) return;