added breadcrumbs
Hunter
Thursday, July 25th, 2024 at 11:45 PM
39 font-size: 1.5em;
40 font-weight: bold;
41 }
42 + #breadcrumbs {
43 + font-size: 24px;
44 + margin-bottom: 10px;
45 + }
46 </style>
47 <script>
48 document.addEventListener('DOMContentLoaded', function() {
77 return taskContainer;
78 }
79
80 + function generateBreadcrumbs(rootTask, currentPath, selectedTaskId) {
81 + let breadcrumbs = '● '; // Always start with the root
82 + let currentTask = rootTask;
83 +
84 + // Add filled circles for the current path
85 + for (let i = 1; i < currentPath.length; i++) {
86 + breadcrumbs += '● ';
87 + currentTask = currentTask.subtasks.find(t => t.id === currentPath[i].id);
88 + }
89 +
90 + // If the selected task is not the current view's parent task, add empty circles for potential deeper levels
91 + if (selectedTaskId !== currentTask.id) {
92 + let selectedTask = currentTask.subtasks.find(t => t.id === selectedTaskId);
93 +
94 + if (selectedTask) {
95 + function calculateMaxDepth(task, depth) {
96 + if (task.subtasks.length === 0) return depth;
97 + return Math.max(...task.subtasks.map(st => calculateMaxDepth(st, depth + 1)));
98 + }
99 +
100 + let maxDepth = calculateMaxDepth(selectedTask, currentPath.length);
101 +
102 + // Add empty circles for potential deeper levels
103 + for (let i = currentPath.length; i < maxDepth; i++) {
104 + breadcrumbs += '○ ';
105 + }
106 + }
107 + }
108 +
109 + return breadcrumbs.trim();
110 + }
111 +
112 function updateCheckboxState(checkbox, state) {
113 checkbox.checked = state === 1;
114 checkbox.indeterminate = state === 2;
286 if (task.subtasks.length > 0) {
287 currentTask.selectedSubtaskId = task.id;
288 taskPath.push(task);
- currentTask = task; // Add this line
289 + currentTask = task;
290 + updateBreadcrumbs(currentTask);
291 renderCurrentView();
292 const selectedTask = task.selectedSubtaskId ?
293 task.subtasks.find(t => t.id === task.selectedSubtaskId) :
297 addNewTask(task);
298 currentTask.selectedSubtaskId = task.id;
299 taskPath.push(task);
- currentTask = task; // Add this line
300 + currentTask = task;
301 + updateBreadcrumbs(currentTask);
302 renderCurrentView();
303 selectAndFocusTask(task.subtasks[0]);
304 }
310 taskPath.pop();
311 currentTask = taskPath[taskPath.length - 1];
312 updateParentState(currentTask);
313 + updateBreadcrumbs(currentTask);
314 renderCurrentView();
315 const selectedTask = currentTask.subtasks.find(t => t.id === currentTaskId);
316 selectAndFocusTask(selectedTask || currentTask.subtasks[0]);
338 if (task !== currentTask) {
339 currentTask.selectedSubtaskId = task.id;
340 }
341 + // Update breadcrumbs when active task changes
342 + updateBreadcrumbs(task);
343 + }
344 +
345 + function updateBreadcrumbs(selectedTask) {
346 + const breadcrumbsContainer = document.getElementById('breadcrumbs');
347 + const trail = generateBreadcrumbs(taskPath[0], taskPath, selectedTask.id);
348 + breadcrumbsContainer.textContent = trail;
349 }
350
351 function renderCurrentView() {
352 appContainer.innerHTML = '';
353 currentTask = taskPath[taskPath.length - 1];
354
355 + // Generate and display breadcrumbs
356 + updateBreadcrumbs(currentTask);
357 +
358 const parentElement = createTaskElement(currentTask, true);
359 appContainer.appendChild(parentElement);
360
371 }
372
373 renderCurrentView();
- if (currentTask.subtasks.length > 0) {
- setTimeout(() => selectAndFocusTask(currentTask.subtasks[0]), 0);
- }
374 });
375 </script>
376 </head>
377 <body>
378 + <div id="breadcrumbs"></div>
379 <div id="app-container"></div>
380 </body>
381 </html>