Spaces:
Paused
Paused
| <html> | |
| <head> | |
| <script type="module"> | |
| import { store } from "/components/sidebar/tasks/tasks-store.js"; | |
| </script> | |
| </head> | |
| <body> | |
| <div class="tasks-list-root"> | |
| <template x-if="$store.tasks"> | |
| <div x-data class="tasks-list-inner"> | |
| <h3 class="section-header section-header-collapsible" | |
| data-bs-toggle="collapse" | |
| @click="$store.sidebar.toggleSection('tasks')" | |
| x-effect="!$store.sidebar.isSectionOpen('tasks') ? $el.classList.add('collapsed') : $el.classList.remove('collapsed')"> | |
| Tasks | |
| <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"> | |
| <path d="M8 4l8 8-8 8" /> | |
| </svg> | |
| </h3> | |
| <div class="collapse" id="tasks-collapse" | |
| x-effect="(() => { const c = bootstrap.Collapse.getOrCreateInstance($el, { toggle: false }); $store.sidebar.isSectionOpen('tasks') ? c.show() : c.hide(); })()"> | |
| <div class="tasks-list-body"> | |
| <div class="tasks-list-container" x-data> | |
| <ul class="config-list tasks-config-list" x-show="$store.tasks.tasks.length > 0"> | |
| <template x-for="task in $store.tasks.tasks" :key="task.id"> | |
| <li> | |
| <div class="task-container" :class="{'task-selected': task.id === $store.tasks.selected}"> | |
| <div class="chat-list-button" @click="$store.tasks.selectTask(task.id)"> | |
| <div class="task-container-vertical"> | |
| <div class="task-title-line"> | |
| <span class="project-color-ball" :style="task.project?.color ? { backgroundColor: task.project.color } : { border: '1px solid var(--color-border)' }"></span> | |
| <span class="task-name" | |
| :title="(task.task_name || `Task #${task.no}`)" | |
| x-text="(task.task_name || `Task #${task.no}`)" | |
| :data-task-id="task.id"></span> | |
| </div> | |
| <div class="task-info-line"> | |
| <span class="scheduler-status-badge scheduler-status-badge-small" | |
| :class="task.state ? `scheduler-status-${task.state}` : 'scheduler-status-idle'" | |
| x-text="task.state || 'idle'"></span> | |
| <button class="edit-button" | |
| @click.stop="$store.tasks.openDetail(task.id)" | |
| title="View task details" style="margin-left: auto; margin-right: 5px;"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" fill="var(--color-primary)" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M256 0c70.69 0 134.69 28.66 181.02 74.98C483.34 121.3 512 185.31 512 256c0 70.69-28.66 134.7-74.98 181.02C390.69 483.34 326.69 512 256 512c-70.69 0-134.69-28.66-181.02-74.98C28.66 390.69 0 326.69 0 256c0-70.69 28.66-134.69 74.98-181.02C121.31 28.66 185.31 0 256 0zm-9.96 161.03c0-4.28.76-8.26 2.27-11.91 1.5-3.63 3.77-6.94 6.79-9.91 3-2.95 6.29-5.2 9.84-6.7 3.57-1.5 7.41-2.28 11.52-2.28 4.12 0 7.96.78 11.49 2.27 3.54 1.51 6.78 3.76 9.75 6.73 2.95 2.97 5.16 6.26 6.64 9.91 1.49 3.63 2.22 7.61 2.22 11.89 0 4.17-.73 8.08-2.21 11.69-1.48 3.6-3.68 6.94-6.65 9.97-2.94 3.03-6.18 5.32-9.72 6.84-3.54 1.51-7.38 2.29-11.52 2.29-4.22 0-8.14-.76-11.75-2.26-3.58-1.51-6.86-3.79-9.83-6.79-2.94-3.02-5.16-6.34-6.63-9.97-1.48-3.62-2.21-7.54-2.21-11.77zm13.4 178.16c-1.11 3.97-3.35 11.76 3.3 11.76 1.44 0 3.27-.81 5.46-2.4 2.37-1.71 5.09-4.31 8.13-7.75 3.09-3.5 6.32-7.65 9.67-12.42 3.33-4.76 6.84-10.22 10.49-16.31.37-.65 1.23-.87 1.89-.48l12.36 9.18c.6.43.73 1.25.35 1.86-5.69 9.88-11.44 18.51-17.26 25.88-5.85 7.41-11.79 13.57-17.8 18.43l-.1.06c-6.02 4.88-12.19 8.55-18.51 11.01-17.58 6.81-45.36 5.7-53.32-14.83-5.02-12.96-.9-27.69 3.06-40.37l19.96-60.44c1.28-4.58 2.89-9.62 3.47-14.33.97-7.87-2.49-12.96-11.06-12.96h-17.45c-.76 0-1.38-.62-1.38-1.38l.08-.48 4.58-16.68c.16-.62.73-1.04 1.35-1.02l89.12-2.79c.76-.03 1.41.57 1.44 1.33l-.07.43-37.76 124.7zm158.3-244.93c-41.39-41.39-98.58-67-161.74-67-63.16 0-120.35 25.61-161.74 67-41.39 41.39-67 98.58-67 161.74 0 63.16 25.61 120.35 67 161.74 41.39 41.39 98.58 67 161.74 67 63.16 0 120.35-25.61 161.74-67 41.39-41.39 67-98.58 67-161.74 0-63.16-25.61-120.35-67-161.74z"/> | |
| </svg> | |
| </button> | |
| <button class="edit-button" title="Clear task chat" | |
| @click.stop="$store.tasks.reset(task.id)" style="margin-right: 5px;"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 122.88 121.1" fill="var(--color-primary)" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M62.89,56.03c1.11-0.35,2.34-0.25,3.72,0.37l10.4,7.87c2.26,1.71,4.24,3.78,2.73,6.9 c-0.51,1.06-1.4,2.1-2.38,3.49l-0.53,0.75c-1.97,2.8-2.61,2-5.71,1.83c0.56,13.37,1.75,27.82-2.64,40.88 c-0.87,2.7-3.32,3.44-6.95,2.71l-6.1-2.03c4.11-6.14,6.16-13.85,6.44-22.89c-3.46,8.58-6.8,16.96-10.68,20.86l-6.28-2.08 c0.61-3.05,1.05-5.43,0.35-6.9l-4.07,4.24l-9.33-5.77c6.36-3.36,11.62-7.87,15.6-13.73c-6.69,5.01-12.76,8.1-18.14,8.99 c-2.75,0.83-4.49,0.35-5.16-1.53c-0.48-1.34-0.05-1.77,0.81-2.86c1.11-1.41,2.61-2.67,4.35-3.79c-3.13,1.1-4.64,0.95-6.37,1.51 c-4.9,1.59-9.94-1.86-8.26-6.9c1.07-3.23,3.54-3.09,6.67-4.07l5.42-1.69c-5.19,0.28-10.32,0.45-15.02-0.25 c-5.4-0.8-5.31-0.99-8.24-5.38c-3.94-5.91-6.25-11.45,2.52-9.16c16.73,3.18,33.56,5.34,51.25-0.98c-0.76-1.32-0.9-2.57-0.5-3.73 C57.37,60.94,61.13,56.58,62.89,56.03L62.89,56.03z M113.8,2.42L74.45,51.53c-4.71,6.68,3.2,11.91,8.39,5.64l39.2-49.27 C125.12,1.86,119.13-3.16,113.8,2.42L113.8,2.42z"/> | |
| </svg> | |
| </button> | |
| <button class="edit-button" title="Delete task" @click.stop="$store.tasks.deleteTask(task.id)">X</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| </template> | |
| </ul> | |
| <div class="empty-list-message" x-show="$store.tasks.tasks.length === 0"> | |
| <p><i>No tasks to list.</i></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </template> | |
| </div> | |
| </template> | |
| </div> | |
| <style> | |
| /* Root wrappers provide flex context when embedded */ | |
| .tasks-list-root, | |
| .tasks-list-inner { | |
| display: contents; | |
| } | |
| /* tasks-list-body is the flex container inside the collapse wrapper */ | |
| .tasks-list-body { | |
| display: flex; | |
| flex-direction: column; | |
| flex: 1 1 auto; | |
| min-height: 0; | |
| } | |
| .tasks-list-container .section-header { | |
| position: sticky; | |
| top: 0; | |
| flex-shrink: 0; | |
| z-index: 10; | |
| } | |
| .tasks-list-container { | |
| display: flex; | |
| flex-direction: column; | |
| flex: 1; | |
| min-height: 0; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| /* Scrollable tasks config list */ | |
| .tasks-config-list { | |
| flex: 1; | |
| min-height: 0; | |
| overflow-y: auto; | |
| -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */ | |
| scroll-behavior: smooth; | |
| scrollbar-width: none; /* Firefox */ | |
| -ms-overflow-style: none; /* IE/Edge */ | |
| overscroll-behavior: contain; /* avoid scroll chaining */ | |
| } | |
| /* Hide scrollbar for Chrome/Safari/Webkit */ | |
| .tasks-config-list::-webkit-scrollbar { | |
| display: none; | |
| width: 0; | |
| height: 0; | |
| } | |
| .task-title-line { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5em; | |
| } | |
| .project-color-ball { | |
| width: 0.6em; | |
| height: 0.6em; | |
| border-radius: 50%; | |
| display: inline-block; | |
| box-sizing: border-box; | |
| flex-shrink: 0; | |
| } | |
| .task-name { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 0; cursor: pointer; border-radius: 4px; transition: background-color 0.2s; font-size: var(--font-size-small); margin-bottom: 2px; } | |
| .light-mode .task-name:hover { background-color: rgba(0,0,0,0.05); } | |
| .task-info-line { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 2px; } | |
| .task-container { | |
| width: 100%; | |
| display: flex; | |
| align-items: stretch; | |
| position: relative; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .task-container:hover { | |
| background-color: var(--color-background-hover); | |
| } | |
| .task-container-vertical { display: flex; flex-direction: column; width: 100%; gap: 6px; } | |
| /* Selected task accent */ | |
| .task-selected { | |
| background-color: var(--color-background-hover); | |
| } | |
| .task-selected .task-name { | |
| font-weight: bold; | |
| } | |
| /* Scheduler badges (subset used in sidebar) */ | |
| .scheduler-status-badge { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; text-transform: capitalize; white-space: nowrap; } | |
| .scheduler-status-badge-small { font-size: 10px; padding: 2px 6px; margin-right: 5px; min-width: 40px; text-align: center; } | |
| .scheduler-status-idle { background-color: rgba(0, 100, 0, 0.2); color: #2a9d8f; border: 1px solid rgba(42, 157, 143, 0.3); } | |
| .scheduler-status-running { background-color: rgba(0, 60, 120, 0.2); color: #4361ee; border: 1px solid rgba(67, 97, 238, 0.3); } | |
| .scheduler-status-disabled { background-color: rgba(70, 70, 70, 0.2); color: #6c757d; border: 1px solid rgba(108, 117, 125, 0.3); } | |
| .scheduler-status-error { background-color: rgba(120, 0, 0, 0.2); color: #e63946; border: 1px solid rgba(230, 57, 70, 0.3); } | |
| .light-mode .scheduler-status-idle { background-color: rgba(42, 157, 143, 0.1); color: #1a6f65; } | |
| .light-mode .scheduler-status-running { background-color: rgba(67, 97, 238, 0.1); color: #2540b3; } | |
| .light-mode .scheduler-status-disabled { background-color: rgba(108, 117, 125, 0.1); color: #495057; } | |
| .light-mode .scheduler-status-error { background-color: rgba(230, 57, 70, 0.1); color: #c5283d; } | |
| .empty-list-message { display: flex; justify-content: center; align-items: center; height: 100px; color: var(--color-secondary); text-align: center; opacity: 0.7; font-style: italic; } | |
| .light-mode .empty-list-message { color: var(--color-secondary-light); } | |
| </style> | |
| </body> | |
| </html> | |