Rework Weekly Tasks as a sidebar dropdown instead of a nested drill-down
"Weekly Tasks" is now a collapsible toggle card in the sidebar list; expanding it shows each week as an indented sub-card directly beneath it, still selectable like any other card. The detail pane always shows one full-width entry (a track or a single week), no more splitting the pane between a picker and content. Also adds the new Week of 24-28 Aug 2026 sheet (SPIE support, CRMdef, LinkedIn Posts, Marketing Tool), flagging in its notes both the date discrepancy in the sheet's own header text and the garbled Marketing Tool outline, entered verbatim.
This commit is contained in:
beantownbabe committed
1 parent
2a5607e56e
commit
f4d65a546d
1 file changed
+40
-59
+40
-59
@@ -6317,6 +6317,21 @@
|
||||
];
|
||||
|
||||
var WEEKLY_TASKS_DATA = [
|
||||
{
|
||||
id: "week-2026-08-24",
|
||||
label: "Week of 24–28 Aug 2026",
|
||||
subtasks: [
|
||||
{ subtask: "SPIE support", ask: "Support Peter", kpi: ">10", status: "Still open" },
|
||||
{ subtask: "CRMdef", ask: "Do research on CRM requirements, pricing and other information", kpi: "—", status: "Still open" },
|
||||
{ subtask: "LinkedIn Posts", ask: "Continue LinkedIn posts according to Canva whiteboard", kpi: "4 posts", status: "Still open" },
|
||||
{ subtask: "Marketing Tool", ask: "Prequired befor: in and out interface so people can use it / Independent of each othermake Mckinley Analysis tool available at Marketing.txproducts.org", kpi: "—", status: "Still open, no status given in the sheet" }
|
||||
],
|
||||
notes: [
|
||||
"Sheet's own header text reads \"Week of Monday, 2.08.2026 – Friday, 28.08.2026\" — likely a typo for 24.08, since the filename and sheet tab both say Week 24-28 Aug. Not corrected here, worth confirming with Peter.",
|
||||
"Marketing Tool's outline text is garbled/run-together in the source file (\"Prequired befor: in and out interface so people can use it / Independent of each othermake Mckinley Analysis tool available at Marketing.txproducts.org\") — entered verbatim, meaning unclear."
|
||||
],
|
||||
reports: []
|
||||
},
|
||||
{
|
||||
id: "week-2026-08-17",
|
||||
label: "Week of 17–21 Aug 2026",
|
||||
@@ -6338,9 +6353,8 @@
|
||||
}
|
||||
];
|
||||
|
||||
var WEEKLY_TASKS_PARENT_ID = "weekly-tasks-parent";
|
||||
var tasksSelectedId = null;
|
||||
var weeklySelectedId = null;
|
||||
var weeklyExpanded = false;
|
||||
|
||||
function tasksEsc(s) {
|
||||
return String(s == null ? "" : s).replace(/[&<>"]/g, function (c) {
|
||||
@@ -6349,83 +6363,50 @@
|
||||
}
|
||||
|
||||
function renderTasksBoard() {
|
||||
var sorted = TASKS_DATA; // newest-first order is authored order for now
|
||||
if (!tasksSelectedId || (tasksSelectedId !== WEEKLY_TASKS_PARENT_ID && !sorted.some(function (t) { return t.id === tasksSelectedId; }))) {
|
||||
tasksSelectedId = sorted.length ? sorted[0].id : WEEKLY_TASKS_PARENT_ID;
|
||||
var allSelectable = TASKS_DATA.concat(WEEKLY_TASKS_DATA);
|
||||
if (!tasksSelectedId || !allSelectable.some(function (t) { return t.id === tasksSelectedId; })) {
|
||||
tasksSelectedId = TASKS_DATA.length ? TASKS_DATA[0].id : (WEEKLY_TASKS_DATA[0] && WEEKLY_TASKS_DATA[0].id);
|
||||
}
|
||||
|
||||
var list = document.getElementById("tasks-list");
|
||||
list.innerHTML = "";
|
||||
sorted.forEach(function (entry) {
|
||||
TASKS_DATA.forEach(function (entry) {
|
||||
list.appendChild(buildTaskSidebarCard(entry, entry.id === tasksSelectedId));
|
||||
});
|
||||
list.appendChild(buildWeeklyParentSidebarCard(tasksSelectedId === WEEKLY_TASKS_PARENT_ID));
|
||||
|
||||
list.appendChild(buildWeeklyToggleCard());
|
||||
if (weeklyExpanded) {
|
||||
WEEKLY_TASKS_DATA.forEach(function (week) {
|
||||
var card = buildTaskSidebarCard(week, week.id === tasksSelectedId);
|
||||
card.style.marginLeft = "16px";
|
||||
card.style.width = "calc(100% - 16px)";
|
||||
list.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
var detail = document.getElementById("tasks-detail");
|
||||
if (tasksSelectedId === WEEKLY_TASKS_PARENT_ID) {
|
||||
detail.innerHTML = buildWeeklyTasksDrilldown();
|
||||
wireWeeklyDrilldown();
|
||||
} else {
|
||||
var selected = sorted.filter(function (t) { return t.id === tasksSelectedId; })[0];
|
||||
detail.innerHTML = selected ? buildTaskDetail(selected) : "<div class=\"ab-outreach-empty\">No tasks yet.</div>";
|
||||
}
|
||||
var selected = allSelectable.filter(function (t) { return t.id === tasksSelectedId; })[0];
|
||||
detail.innerHTML = selected ? buildTaskDetail(selected) : "<div class=\"ab-outreach-empty\">No tasks yet.</div>";
|
||||
}
|
||||
|
||||
function buildWeeklyParentSidebarCard(isSelected) {
|
||||
// Dropdown toggle only -- doesn't itself become the selection, just expands/collapses
|
||||
// the week sub-cards indented beneath it, so the detail pane always shows one full-width
|
||||
// entry (a track or a single week) rather than splitting space with a picker.
|
||||
function buildWeeklyToggleCard() {
|
||||
var card = document.createElement("div");
|
||||
card.className = "ab-card" + (isSelected ? " selected" : "");
|
||||
card.dataset.id = WEEKLY_TASKS_PARENT_ID;
|
||||
card.className = "ab-card";
|
||||
card.innerHTML =
|
||||
"<div class=\"ab-card-top\">" +
|
||||
"<div class=\"ab-card-company\">Weekly Tasks</div>" +
|
||||
"<div class=\"ab-card-company\">Weekly Tasks <span class=\"caret\">" + (weeklyExpanded ? "▾" : "▸") + "</span></div>" +
|
||||
"<span class=\"ab-source-chip boss\">" + WEEKLY_TASKS_DATA.length + (WEEKLY_TASKS_DATA.length === 1 ? " week" : " weeks") + "</span>" +
|
||||
"</div>" +
|
||||
"<div class=\"ab-card-name\">Peter's weekly task sheets</div>";
|
||||
"</div>";
|
||||
card.addEventListener("click", function () {
|
||||
tasksSelectedId = WEEKLY_TASKS_PARENT_ID;
|
||||
weeklyExpanded = !weeklyExpanded;
|
||||
renderTasksBoard();
|
||||
});
|
||||
return card;
|
||||
}
|
||||
|
||||
function buildWeeklyTasksDrilldown() {
|
||||
if (!weeklySelectedId || !WEEKLY_TASKS_DATA.some(function (w) { return w.id === weeklySelectedId; })) {
|
||||
weeklySelectedId = WEEKLY_TASKS_DATA.length ? WEEKLY_TASKS_DATA[0].id : null;
|
||||
}
|
||||
var selectedWeek = WEEKLY_TASKS_DATA.filter(function (w) { return w.id === weeklySelectedId; })[0];
|
||||
|
||||
var crumbs =
|
||||
"<div class=\"drill-crumbs\">" +
|
||||
"<span class=\"crumb\">Weekly Tasks</span>" +
|
||||
(selectedWeek ? "<span class=\"sep\">/</span><span class=\"crumb current\">" + tasksEsc(selectedWeek.label) + "</span>" : "") +
|
||||
"</div>";
|
||||
|
||||
var weekListHtml = WEEKLY_TASKS_DATA.map(function (w) {
|
||||
return "<div class=\"ab-card" + (w.id === weeklySelectedId ? " selected" : "") + "\" data-week-id=\"" + w.id + "\">" +
|
||||
"<div class=\"ab-card-company\">" + tasksEsc(w.label) + "</div>" +
|
||||
"</div>";
|
||||
}).join("");
|
||||
|
||||
var weekDetailHtml = selectedWeek ? buildTaskDetail(selectedWeek) : "<div class=\"ab-outreach-empty\">No weekly sheets yet.</div>";
|
||||
|
||||
return (
|
||||
crumbs +
|
||||
"<div class=\"ab-outreach\" style=\"display:flex; margin-top:12px;\">" +
|
||||
"<div class=\"ab-outreach-list\" style=\"width:260px;\">" + weekListHtml + "</div>" +
|
||||
"<div class=\"ab-outreach-detail\">" + weekDetailHtml + "</div>" +
|
||||
"</div>"
|
||||
);
|
||||
}
|
||||
|
||||
function wireWeeklyDrilldown() {
|
||||
document.querySelectorAll("#tasks-detail [data-week-id]").forEach(function (el) {
|
||||
el.addEventListener("click", function () {
|
||||
weeklySelectedId = el.getAttribute("data-week-id");
|
||||
renderTasksBoard();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function buildTaskSidebarCard(entry, isSelected) {
|
||||
var card = document.createElement("div");
|
||||
card.className = "ab-card" + (isSelected ? " selected" : "");
|
||||
|
||||
Reference in new issue
Block a user