CanadianBacon/CanvasRefined
1
0
Fork 0
mirror of https://github.com/GuySandler/CanvasRefined.git synced 2026-06-22 02:19:53 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

better todolist 2

Browse Source 
filters, due date categories
This commit is contained in:
Guy Sandler 2026-04-19 21:43:30 -07:00
parent b362c05a45
commit 5a20b24528
1 changed files with 190 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

271
js/content.js
View File

@ -451,7 +451,7 @@ function checkDashboardReady() {
} else if (mutation.target == document.querySelector('#right-side')) { } else if (mutation.target == document.querySelector('#right-side')) {
if (!mutation.target.querySelector(".bettercanvas-todosidebar")) { if (!mutation.target.querySelector(".bettercanvas-todosidebar")) {
setupBetterTodo(); setupBetterTodo();
loadBetterTodo(); // loadBetterTodo();
} }
} }
} }
@ -827,106 +827,215 @@ function createTodoCreateBtn(location) {
// } // }
function convertToDueDate(dueAt) { function convertToDueDate(dueAt) {
// "2026-04-13T15:30:00Z" to Apr 4 at 3:30 PM final = "due ";
final = "due "
let date = new Date(dueAt); let date = new Date(dueAt);
final += date.toLocaleString("en-US", { month: "short", day: "numeric" }); final += date.toLocaleString("en-US", { month: "short", day: "numeric" });
final += " at " + date.toLocaleString("en-US", { hour: "numeric", minute: "numeric", hour12: true }); final += " at " + date.toLocaleString("en-US", { hour: "numeric", minute: "numeric", hour12: true });
return final; return final;
} }
// better todo html // better todo html
betterTodoFilter = "tasks" betterTodoFilter = "tasks";
let domContainers = {};
async function createTodoSections(location) { async function createTodoSections(location) {
// make outer if (!location.querySelector("#better-todo-header")) {
let filterControl = makeElement("div", location, { "id": "better-todo-filter" }); let header = makeElement("div", location, { id: "better-todo-header" });
filterControl.innerHTML = header.style = "display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bcbackground-1);padding-bottom:-2px;";
`<div id="filterbuttongroup" style="color:black"> let today = new Date();
<button id="announcement">announcement</button> today.setHours(0,0,0,0);
<button id="assignments">assignments</button> const todayString = today.toLocaleDateString("en-US", { weekday: "long", month: "short", day: "numeric" });
<button id="completed">completed</button> header.innerHTML = `
</div>`; <h2 style="border:none !important;padding: 0">Tasks</h2>
let header = makeElement("div", location, { id: "better-todo-header" }); <h2 style="border:none !important;padding: 0">${todayString}</h2>
header.style = `;
"display: flex; align-items:center; justify-content:space-between;";
header.innerHTML = "<h2>Tasks</h2><h2>Wed Apr 8</h2>"; let filterControl = makeElement("div", location, { "id": "better-todo-filter" });
let mainSection = makeElement("div", location, { filterControl.innerHTML = `<div id="filterbuttongroup">
id: "better-todo-main", <button id="announcement" style="color:black !important;">announcement</button>
}); <button id="assignments" style="color:black !important;">assignments</button>
mainSection.style = "display:flex;flex-direction:column;gap:10px;margin-top:10px;"; <button id="completed" style="color:black !important;">completed</button>
</div>`;
document.getElementById("announcement").addEventListener("click", () => {
betterTodoFilter = "announcements";
moreAnnouncementCount = 0;
clearTodoList();
createTodoSections(location);
});
document.getElementById("assignments").addEventListener("click", () => {
betterTodoFilter = "tasks";
moreAssignmentCount = 0;
clearTodoList();
createTodoSections(location);
});
document.getElementById("completed").addEventListener("click", () => {
betterTodoFilter = "completed";
moreCompletedCount = 0;
clearTodoList();
createTodoSections(location);
});
let mainSection = makeElement("div", location, {
id: "better-todo-main",
});
mainSection.style = "display:flex;flex-direction:column;gap:10px;";
}
let mainSection = location.querySelector("#better-todo-main");
assignments.then(data => { assignments.then(data => {
// types: announcement
console.log(data); console.log(data);
data.forEach(item => { data.forEach(item => {
announcements = data.filter(item => item.plannable_type == "announcement"); 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.plannable_type == "planner_note") && !item.submissions?.submitted && !item.planner_override?.marked_complete && !item.submissions.graded);
assignmentsDue = data.filter((item) => item.plannable_type == "assignment" && !item.submissions.submitted); completed = data.filter(item => (item.plannable_type == "assignment" || item.plannable_type == "planner_note") && (item.submissions.submitted || item.planner_override?.marked_complete || item.submissions.graded));
// 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));
}); });
console.log(assignmentsDue);
domContainers = {};
const groupKeys = ["-1", "0", "1", "2", "3", "4", "5", "6", "7", "14", "21", "30", "Later"];
for (const key of groupKeys) {
let wrapper = makeElement("div", mainSection, {
style: "display:none;margin-top:10px;",
className: "better-todo-dueheader"
})
let label = "Due Later";
if (key == "-1") label = "Overdue";
else if (key == "0") label = "Due Today";
else if (key == "1") label = "Tommorow";
else if (key >= 2 && key < 7) label = "Due in " + key + " days";
else if (key >= 14 && key < 30) label = "Due in " + key + " months";
else if (key == 30) label = "Due in 1 month";
makeElement("div", wrapper, {
textContent: label,
style: "display:flex;flex-direction:column;gap:10px;"
})
let listContainer = makeElement("div", wrapper, { className: "todo-group-list" });
listContainer.style = "display:flex;flex-direction:column;gap:10px;margin-top:10px;";
domContainers[key] = { wrapper, listContainer };
}
if (betterTodoFilter == "tasks") { if (betterTodoFilter == "tasks") {
assignmentsDue.forEach((item) => { populateAssignments();
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 assignment = makeElement("div", mainSection, { function clearTodoList() {
class: "better-todo-assignment", document.getElementById("better-todo-main").querySelectorAll(".todo-group-list").forEach(list => {
}); list.innerHTML = "";
// assignment.innerHTML = ` });
// <div style="width:10px;height:10px;background-color:${courseColor}">${courseColor}</div> document.querySelectorAll(".better-todo-dueheader").forEach(header => {
// <a href="${domain + item.html_url}">${item.plannable.title}</a>\ header.remove();
// <span>${new Date(item.plannable_date).toLocaleString()}</span> });
// `; }
assignment.innerHTML = `
<div style="display:flex;align-items:center;gap:5px;width:100%;height:60px;background:var(--bcbackground-1);border-radius:5px;">
<div style="width:40px;display:flex;align-items:center;justify-content:center;background-color:${courseColor};height:100%;border-radius:5px 0 0 5px;">
<div style="width:20px;height:20px;">
<svg fill="#ffffff" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff">
<g id="SVGRepo_bgCarrier" stroke-width="1"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M1468.214 0v551.145L840.27 1179.089c-31.623 31.623-49.693 74.54-49.693 119.715v395.289h395.288c45.176 0 88.093-18.07 119.716-49.694l162.633-162.633v438.206H0V0h1468.214Zm129.428 581.3c22.137-22.136 57.825-22.136 79.962 0l225.879 225.879c22.023 22.023 22.023 57.712 0 79.848l-677.638 677.637c-10.616 10.503-24.96 16.49-39.98 16.49H903.516v-282.35c0-15.02 5.986-29.364 16.49-39.867Zm-920.005 548.095H338.82v112.94h338.818v-112.94Zm225.88-225.879H338.818v112.94h564.697v-112.94Zm734.106-202.5-89.561 89.56 146.03 146.031 89.562-89.56-146.031-146.031Zm-508.228-362.197H338.82v338.818h790.576V338.82Z" fill-rule="evenodd"></path>
</g></svg>
</div>
</div>
<div style="width:calc(100% - 40px);height:80%;display:flex;flex-direction:column;gap:5px;padding-left:2px;box-sizing:border-box;overflow:hidden;">
<div style="display:flex;flex-direction:column;gap:3px;">
<span style="color:${courseColor};font-size:12px;margin-top:-2px;">${item.context_name}</span>
<a href="${domain + item.html_url}" style="color:inherit;text-decoration:none;font-weight:bold;text-overflow:ellipsis;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:-5px;">${item.plannable.title}</a>
<span style="color:gray;font-size:12px;margin-top:-5px;">${convertToDueDate(item.plannable.due_at)}</span>
</div>
</div> function populateAssignments() {
const today = new Date();
today.setHours(0,0,0,0);
</div> assignmentsDue.forEach((item) => {
`; let dueGroup = -1;
let dueDate = new Date(item.plannable_date);
dueDate.setHours(0,0,0,0);
const diffDays = Math.round((dueDate - today) / (1000 * 60 * 60 * 24));
if (diffDays < 0) {dueGroup = 0;}
else if (diffDays <= 1) { dueGroup = diffDays.toString(); }
else if (diffDays <= 7) { dueGroup = diffDays.toString(); }
else if (diffDays <= 14) {dueGroup = 14;}
else if (diffDays <= 21) {dueGroup = 21;}
else if (diffDays <= 30) {dueGroup = 30;}
else {dueGroup = "Later"};
let assignment
const targetContainer = domContainers[dueGroup];
if (targetContainer) {
targetContainer.wrapper.style.display = "block";
assignment = makeElement("div", targetContainer.listContainer, {
class: "better-todo-assignment",
}); });
} }
})
// let todoHeader = createTodoHeader(location); 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" }); assignment.innerHTML = `
// /* <div style="display:flex;align-items:center;gap:5px;width:100%;height:60px;background:var(--bcbackground-1);border-radius:5px;">
// let todoAssignments = document.createElement("ul"); <div style="width:40px;display:flex;align-items:center;justify-content:center;background-color:${courseColor};height:100%;border-radius:5px 0 0 5px;">
// todoAssignments.id = "bettercanvas-todo-list"; <div style="width:20px;height:20px;display:flex;margin-left:5px;">
// location.appendChild(todoAssignments); <svg fill="#ffffff" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff">
// */ <g id="SVGRepo_bgCarrier" stroke-width="1"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
// let announcementHeader = makeElement("h2", location, { "className": "todo-list-header", "textContent": "Announcements" }); <g id="SVGRepo_iconCarrier">
// let todoAnnouncements = makeElement("ul", location, { "id": "bettercanvas-announcement-list" }); <path d="M1468.214 0v551.145L840.27 1179.089c-31.623 31.623-49.693 74.54-49.693 119.715v395.289h395.288c45.176 0 88.093-18.07 119.716-49.694l162.633-162.633v438.206H0V0h1468.214Zm129.428 581.3c22.137-22.136 57.825-22.136 79.962 0l225.879 225.879c22.023 22.023 22.023 57.712 0 79.848l-677.638 677.637c-10.616 10.503-24.96 16.49-39.98 16.49H903.516v-282.35c0-15.02 5.986-29.364 16.49-39.867Zm-920.005 548.095H338.82v112.94h338.818v-112.94Zm225.88-225.879H338.818v112.94h564.697v-112.94Zm734.106-202.5-89.561 89.56 146.03 146.031 89.562-89.56-146.031-146.031Zm-508.228-362.197H338.82v338.818h790.576V338.82Z" fill-rule="evenodd"></path>
// /* </g></svg>
// let todoAnnouncements = document.createElement("ul"); </div>
// todoAnnouncements.id = "bettercanvas-announcement-list"; </div>
// location.appendChild(todoAnnouncements); <div style="width:calc(100% - 40px);height:80%;display:flex;flex-direction:column;gap:5px;padding-left:2px;box-sizing:border-box;overflow:hidden;">
// */ <div style="display:flex;flex-direction:column;gap:3px;">
// let loader = '<div class="bettercanvas-todo-item-loader"><div style="width: 100px" class="bettercanvas-skeleton-text"></div><div style="width: 200px" class="bettercanvas-skeleton-text"></div><div class="bettercanvas-skeleton-text"></div></div>'; <span style="color:${courseColor};font-size:12px;margin-top:-2px;">${item.context_name}</span>
// for (let i = 0; i < options.num_todo_items; i++) { <a href="${domain + item.html_url}" style="color:inherit;text-decoration:none;font-weight:bold;text-overflow:ellipsis;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:-5px;">${item.plannable.title}</a>
// todoAssignments.innerHTML += loader; <span style="color:gray;font-size:12px;margin-top:-5px;">${convertToDueDate(item.plannable_date)}</span>
// todoAnnouncements.innerHTML += loader; </div>
// } </div>
</div>
`;
});
}
function populateAnnouncements() {
const today = new Date();
today.setHours(0,0,0,0);
announcementsDue.forEach((item) => {
let dueGroup = -1;
let dueDate = new Date(item.plannable_date);
dueDate.setHours(0,0,0,0);
const diffDays = Math.round((dueDate - today) / (1000 * 60 * 60 * 24));
if (diffDays < 0) {dueGroup = 0;}
else if (diffDays <= 1) { dueGroup = diffDays.toString(); }
else if (diffDays <= 7) { dueGroup = diffDays.toString(); }
else if (diffDays <= 14) {dueGroup = 14;}
else if (diffDays <= 21) {dueGroup = 21;}
else if (diffDays <= 30) {dueGroup = 30;}
else {dueGroup = "Later"};
let announcement;
const targetContainer = domContainers[dueGroup];
if (targetContainer) {
targetContainer.wrapper.style.display = "block";
announcement = makeElement("div", targetContainer.listContainer, {
class: "better-todo-announcement",
});
}
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";
announcement.innerHTML = `
<div style="display:flex;align-items:center;gap:5px;width:100%;height:60px;background:var(--bcbackground-1);border-radius:5px;">
<div style="width:40px;display:flex;align-items:center;justify-content:center;background-color:${courseColor};height:100%;border-radius:5px 0 0 5px;">
<div style="width:20px;height:20px;display:flex;margin-left:5px;">
<svg fill="#ffffff" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff">
<g id="SVGRepo_bgCarrier" stroke-width="1"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M1468.214 0v551.145L840.27 1179.089c-31.623 31.623-49.693 74.54-49.693 119.715v395.289h395.288c45.176 0 88.093-18.07 119.716-49.694l162.633-162.633v438.206H0V0h1468.214Zm129.428 581.3c22.137-22.136 57.825-22.136 79.962 0l225.879 225.879c22.023 22.023 22.023 57.712 0 79.848l-677.638 677.637c-10.616 10.503-24.96 16.49-39.98 16.49H903.516v-282.35c0-15.02 5.986-29.364 16.49-39.867Zm-920.005 548.095H338.82v112.94h338.818v-112.94Zm225.88-225.879H338.818v112.94h564.697v-112.94Zm734.106-202.5-89.561 89.56 146.03 146.031 89.562-89.56-146.031-146.031Zm-508.228-362.197H338.82v338.818h790.576V338.82Z" fill-rule="evenodd"></path>
</g></svg>
</div>
</div>
<div style="width:calc(100% - 40px);height:80%;display:flex;flex-direction:column;gap:5px;padding-left:2px;box-sizing:border-box;overflow:hidden;">
<div style="display:flex;flex-direction:column;gap:3px;">
<span style="color:${courseColor};font-size:12px;margin-top:-2px;">${item.context_name}</span>
<a href="${domain + item.html_url}" style="color:inherit;text-decoration:none;font-weight:bold;text-overflow:ellipsis;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:-5px;">${item.plannable.title}</a>
<span style="color:gray;font-size:12px;margin-top:-5px;">${convertToDueDate(item.plannable_date)}</span>
</div>
</div>
</div>
`;
});
} }
function createTodoViewMore(location, type) { function createTodoViewMore(location, type) {
@ -955,7 +1064,7 @@ function setupBetterTodo() {
const feedback = list.querySelector(".events_list.recent_feedback"); const feedback = list.querySelector(".events_list.recent_feedback");
list.textContent = ""; list.textContent = "";
list = makeElement("div", list, { "className": "bettercanvas-todosidebar" }); list = makeElement("div", list, { "className": "bettercanvas-todosidebar","id": "bettercanvas-todo-list"});
createTodoSections(list); createTodoSections(list);
if (feedback) list.append(feedback); if (feedback) list.append(feedback);