Spaces:
Running
Running
Download webui/components/modals/scheduler/scheduler-task-editor.html from Leon4gr45/openoperator: direct link, hf CLI and curl.
- Browser
- Download file 31.1 kB
-
https://huggingface.co/spaces/Leon4gr45/openoperator/resolve/main/webui/components/modals/scheduler/scheduler-task-editor.html
- Command line
-
hf download hf://spaces/Leon4gr45/openoperator/webui/components/modals/scheduler/scheduler-task-editor.html
-
curl -L -o scheduler-task-editor.html https://huggingface.co/spaces/Leon4gr45/openoperator/resolve/main/webui/components/modals/scheduler/scheduler-task-editor.html
31.1 kB
| <html> | |
| <head> | |
| <script type="module"> | |
| import { store } from "/components/modals/scheduler/scheduler-store.js"; | |
| </script> | |
| </head> | |
| <body> | |
| <div x-data> | |
| <template x-if="$store.schedulerStore"> | |
| <div> | |
| <!-- Create Task Form --> | |
| <div class="scheduler-form" x-show="$store.schedulerStore.isCreating"> | |
| <div class="scheduler-form-header"> | |
| <div class="scheduler-form-title">Create New Task</div> | |
| </div> | |
| <div class="buttons-container scheduler-editor-actions scheduler-editor-actions-top"> | |
| <div class="buttons-left"></div> | |
| <div class="buttons-right"> | |
| <button type="button" class="button confirm" | |
| @click="$store.schedulerStore.saveTask()">Save</button> | |
| <button type="button" class="button cancel" | |
| @click="$store.schedulerStore.cancelEdit()">Cancel</button> | |
| </div> | |
| </div> | |
| <div class="scheduler-form-grid"> | |
| <div class="scheduler-form-field"> | |
| <div class="label-help-wrapper"> | |
| <label class="scheduler-form-label">Task Name</label> | |
| <div class="scheduler-form-help">A unique name to identify this task</div> | |
| </div> | |
| <input type="text" x-model="$store.schedulerStore.editingTask.name" placeholder="Enter task name"> | |
| </div> | |
| <div class="scheduler-form-field"> | |
| <div class="label-help-wrapper"> | |
| <label class="scheduler-form-label">Type</label> | |
| <div class="scheduler-form-help">Task execution method</div> | |
| </div> | |
| <select x-model="$store.schedulerStore.editingTask.type"> | |
| <option value="scheduled">Scheduled (Cron)</option> | |
| <option value="adhoc">Ad-hoc (Manual)</option> | |
| <option value="planned">Planned (Specific Times)</option> | |
| </select> | |
| </div> | |
| <div class="scheduler-form-field"> | |
| <div class="label-help-wrapper"> | |
| <label class="scheduler-form-label">Project</label> | |
| <div class="scheduler-form-help" | |
| x-text="$store.schedulerStore.editingTask.dedicated_context ? 'Inherited from the active chat project.' : 'Mirrors the shared context project.'"></div> | |
| </div> | |
| <div class="project-selector"> | |
| <select class="scheduler-project-select" | |
| x-model="$store.schedulerStore.selectedProjectSlug" | |
| @change="$store.schedulerStore.onProjectSelect($event.target.value)"> | |
| <option value="">No project</option> | |
| <template x-for="proj in $store.schedulerStore.projectOptions" :key="proj.name"> | |
| <option :value="proj.name" x-text="proj.title"></option> | |
| </template> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="scheduler-form-field" x-show="$store.schedulerStore.isCreating"> | |
| <div class="label-help-wrapper"> | |
| <label class="scheduler-form-label">State</label> | |
| <div class="scheduler-form-help">Select the initial state of the task</div> | |
| </div> | |
| <div> | |
| <div class="scheduler-state-selector"> | |
| <span class="scheduler-status-badge scheduler-status-idle" | |
| :class="{'scheduler-status-selected': $store.schedulerStore.editingTask.state === 'idle'}" | |
| @click="$store.schedulerStore.editingTask.state = 'idle'">Idle</span> | |
| <span class="scheduler-status-badge scheduler-status-running" | |
| :class="{'scheduler-status-selected': $store.schedulerStore.editingTask.state === 'running'}" | |
| @click="$store.schedulerStore.editingTask.state = 'running'">Running</span> | |
| <span class="scheduler-status-badge scheduler-status-disabled" | |
| :class="{'scheduler-status-selected': $store.schedulerStore.editingTask.state === 'disabled'}" | |
| @click="$store.schedulerStore.editingTask.state = 'disabled'">Disabled</span> | |
| <span class="scheduler-status-badge scheduler-status-error" | |
| :class="{'scheduler-status-selected': $store.schedulerStore.editingTask.state === 'error'}" | |
| @click="$store.schedulerStore.editingTask.state = 'error'">Error</span> | |
| </div> | |
| <div class="scheduler-state-explanation"> | |
| <span x-show="$store.schedulerStore.editingTask.state === 'idle'"><strong>Idle</strong>: Ready to run</span> | |
| <span x-show="$store.schedulerStore.editingTask.state === 'running'"><strong>Running</strong>: Currently executing</span> | |
| <span x-show="$store.schedulerStore.editingTask.state === 'disabled'"><strong>Disabled</strong>: Won't execute automatically</span> | |
| <span x-show="$store.schedulerStore.editingTask.state === 'error'"><strong>Error</strong>: Task encountered an error</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="scheduler-form-field full-width" | |
| x-show="$store.schedulerStore.editingTask.type === 'scheduled'"> | |
| <div class="label-help-wrapper"> | |
| <label class="scheduler-form-label">Schedule</label> | |
| <div class="scheduler-form-help">Cron schedule for automated execution (minute hour day month weekday)</div> | |
| </div> | |
| <div class="scheduler-schedule-builder"> | |
| <div class="scheduler-schedule-field"> | |
| <span class="scheduler-schedule-label">Minute</span> | |
| <input type="text" x-model="$store.schedulerStore.editingTask.schedule.minute" | |
| placeholder="*" maxlength="9"> | |
| </div> | |
| <div class="scheduler-schedule-field"> | |
| <span class="scheduler-schedule-label">Hour</span> | |
| <input type="text" x-model="$store.schedulerStore.editingTask.schedule.hour" | |
| placeholder="*" maxlength="9"> | |
| </div> | |
| <div class="scheduler-schedule-field"> | |
| <span class="scheduler-schedule-label">Day</span> | |
| <input type="text" x-model="$store.schedulerStore.editingTask.schedule.day" | |
| placeholder="*" maxlength="9"> | |
| </div> | |
| <div class="scheduler-schedule-field"> | |
| <span class="scheduler-schedule-label">Month</span> | |
| <input type="text" x-model="$store.schedulerStore.editingTask.schedule.month" | |
| placeholder="*" maxlength="9"> | |
| </div> | |
| <div class="scheduler-schedule-field"> | |
| <span class="scheduler-schedule-label">Weekday</span> | |
| <input type="text" x-model="$store.schedulerStore.editingTask.schedule.weekday" | |
| placeholder="*" maxlength="9"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="scheduler-form-field full-width" | |
| x-show="$store.schedulerStore.editingTask.type === 'planned'" | |
| x-effect="if ($store.schedulerStore.isCreating && $store.schedulerStore.editingTask.type === 'planned') { $store.schedulerStore.initFlatpickr('create') }"> | |
| <div class="label-help-wrapper"> | |
| <label class="scheduler-form-label">Plan</label> | |
| <div class="scheduler-form-help">Specific execution times for this task</div> | |
| </div> | |
| <div class="scheduler-plan-builder"> | |
| <div class="scheduler-plan-todo"> | |
| <span class="scheduler-plan-label">Upcoming Executions</span> | |
| <div class="scheduler-todo-list"> | |
| <template x-if="$store.schedulerStore.editingTask.plan && Array.isArray($store.schedulerStore.editingTask.plan.todo) && $store.schedulerStore.editingTask.plan.todo.length > 0"> | |
| <template x-for="(time, index) in $store.schedulerStore.editingTask.plan.todo" :key="index"> | |
| <div class="scheduler-todo-item"> | |
| <span x-text="$store.schedulerStore.formatDate(time)"></span> | |
| <button @click.prevent="$store.schedulerStore.editingTask.plan.todo.splice(index, 1)" | |
| class="scheduler-todo-remove"> | |
| <x-icon name="close"></x-icon> | |
| </button> | |
| </div> | |
| </template> | |
| </template> | |
| <template x-if="!$store.schedulerStore.editingTask.plan || !$store.schedulerStore.editingTask.plan.todo || $store.schedulerStore.editingTask.plan.todo.length === 0"> | |
| <div class="scheduler-empty-plan"> | |
| No scheduled execution times yet. Add one below. | |
| </div> | |
| </template> | |
| <div class="scheduler-add-todo"> | |
| <input type="text" id="newPlannedTime-create" | |
| class="scheduler-flatpickr-input" | |
| placeholder="Select date and time"> | |
| <button @click.prevent="$store.schedulerStore.addPlannedTime('create')" | |
| class="btn btn-ok scheduler-add-todo-button"> | |
| <x-icon name="add"></x-icon> | |
| Add Time | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="scheduler-form-field full-width" | |
| x-show="$store.schedulerStore.editingTask.type === 'adhoc'"> | |
| <div class="label-help-wrapper"> | |
| <label class="scheduler-form-label">Token</label> | |
| <div class="scheduler-form-help">Token used to trigger this task externally</div> | |
| </div> | |
| <div class="input-group"> | |
| <input type="text" x-model="$store.schedulerStore.editingTask.token" | |
| placeholder="Token for ad-hoc task"> | |
| <button class="btn btn-action generate-token" | |
| @click="$store.schedulerStore.editingTask.token = $store.schedulerStore.generateRandomToken()" | |
| title="Generate Token"> | |
| <x-icon name="refresh"></x-icon> | |
| Generate | |
| </button> | |
| </div> | |
| </div> | |
| <div class="scheduler-form-field full-width"> | |
| <div class="label-help-wrapper"> | |
| <label class="scheduler-form-label">System Prompt</label> | |
| <div class="scheduler-form-help">System-level instructions for the assistant</div> | |
| </div> | |
| <textarea x-model="$store.schedulerStore.editingTask.system_prompt" | |
| placeholder="System instructions for the AI"></textarea> | |
| </div> | |
| <div class="scheduler-form-field full-width"> | |
| <div class="label-help-wrapper"> | |
| <label class="scheduler-form-label">User Prompt</label> | |
| <div class="scheduler-form-help">The main task prompt that will be executed</div> | |
| </div> | |
| <textarea x-model="$store.schedulerStore.editingTask.prompt" | |
| placeholder="User message for the AI"></textarea> | |
| </div> | |
| <div class="scheduler-form-field full-width"> | |
| <div class="label-help-wrapper"> | |
| <label class="scheduler-form-label">Attachments</label> | |
| <div class="scheduler-form-help">Container file paths or URLs, one per line</div> | |
| </div> | |
| <textarea x-model="$store.schedulerStore.attachmentsText" | |
| placeholder="Enter file paths or URLs, one per line"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Edit Task Form --> | |
| <div class="scheduler-form" x-show="$store.schedulerStore.isEditing"> | |
| <div class="scheduler-form-header"> | |
| <div class="scheduler-form-title">Edit Task</div> | |
| </div> | |
| <div class="buttons-container scheduler-editor-actions scheduler-editor-actions-top"> | |
| <div class="buttons-left"> | |
| <button type="button" class="button cancel" | |
| @click="$confirmClick($event, () => $store.schedulerStore.deleteTask($store.schedulerStore.editingTask.uuid))">Delete</button> | |
| </div> | |
| <div class="buttons-right"> | |
| <button type="button" class="button confirm" | |
| @click="$store.schedulerStore.saveTask()">Save</button> | |
| <button type="button" class="button cancel" | |
| @click="$store.schedulerStore.cancelEdit()">Cancel</button> | |
| </div> | |
| </div> | |
| <div class="scheduler-form-grid"> | |
| <div class="scheduler-form-field"> | |
| <div class="label-help-wrapper"> | |
| <label class="scheduler-form-label">Task Name</label> | |
| <div class="scheduler-form-help">A unique name to identify this task</div> | |
| </div> | |
| <input type="text" x-model="$store.schedulerStore.editingTask.name" placeholder="Enter task name"> | |
| </div> | |
| <div class="scheduler-form-field"> | |
| <div class="label-help-wrapper"> | |
| <label class="scheduler-form-label">Task Type</label> | |
| <div class="scheduler-form-help">Task type cannot be changed after creation</div> | |
| </div> | |
| <select x-model="$store.schedulerStore.editingTask.type" disabled> | |
| <option value="scheduled">Scheduled Task</option> | |
| <option value="adhoc">Ad-hoc Task</option> | |
| <option value="planned">Planned Task</option> | |
| </select> | |
| </div> | |
| <div class="scheduler-form-field"> | |
| <div class="label-help-wrapper"> | |
| <label class="scheduler-form-label">Project</label> | |
| <div class="scheduler-form-help" | |
| x-text="$store.schedulerStore.editingTask.dedicated_context ? 'Dedicated tasks inherit the active chat project.' : 'Shared tasks mirror the project assigned to their context.'"></div> | |
| </div> | |
| <div class="project-display"> | |
| <span class="project-color-ball" | |
| :style="$store.schedulerStore.editingTask.project?.color ? { backgroundColor: $store.schedulerStore.editingTask.project.color } : { border: '1px solid var(--color-border)' }"></span> | |
| <span x-text="$store.schedulerStore.formatProjectLabel($store.schedulerStore.editingTask.project)"></span> | |
| </div> | |
| </div> | |
| <div class="scheduler-form-field" x-show="$store.schedulerStore.isEditing"> | |
| <div class="label-help-wrapper"> | |
| <label class="scheduler-form-label">State</label> | |
| <div class="scheduler-form-help">Change the task's state</div> | |
| </div> | |
| <div> | |
| <div class="scheduler-state-selector"> | |
| <span class="scheduler-status-badge scheduler-status-idle" | |
| :class="{'scheduler-status-selected': $store.schedulerStore.editingTask.state === 'idle'}" | |
| @click="$store.schedulerStore.editingTask.state = 'idle'">Idle</span> | |
| <span class="scheduler-status-badge scheduler-status-running" | |
| :class="{'scheduler-status-selected': $store.schedulerStore.editingTask.state === 'running'}" | |
| @click="$store.schedulerStore.editingTask.state = 'running'">Running</span> | |
| <span class="scheduler-status-badge scheduler-status-disabled" | |
| :class="{'scheduler-status-selected': $store.schedulerStore.editingTask.state === 'disabled'}" | |
| @click="$store.schedulerStore.editingTask.state = 'disabled'">Disabled</span> | |
| <span class="scheduler-status-badge scheduler-status-error" | |
| :class="{'scheduler-status-selected': $store.schedulerStore.editingTask.state === 'error'}" | |
| @click="$store.schedulerStore.editingTask.state = 'error'">Error</span> | |
| </div> | |
| <div class="scheduler-state-explanation"> | |
| <span x-show="$store.schedulerStore.editingTask.state === 'idle'"><strong>Idle</strong>: Ready to run</span> | |
| <span x-show="$store.schedulerStore.editingTask.state === 'running'"><strong>Running</strong>: Currently executing</span> | |
| <span x-show="$store.schedulerStore.editingTask.state === 'disabled'"><strong>Disabled</strong>: Won't execute automatically</span> | |
| <span x-show="$store.schedulerStore.editingTask.state === 'error'"><strong>Error</strong>: Task encountered an error</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="scheduler-form-field full-width" | |
| x-show="$store.schedulerStore.editingTask && $store.schedulerStore.editingTask.type === 'scheduled'"> | |
| <div class="label-help-wrapper"> | |
| <label class="scheduler-form-label">Schedule (Cron Expression)</label> | |
| <div class="scheduler-form-help">Format: minute hour day month weekday (e.g., "* * * * *" for every minute)</div> | |
| </div> | |
| <div class="scheduler-schedule-builder"> | |
| <div class="scheduler-schedule-field"> | |
| <span class="scheduler-schedule-label">Minute</span> | |
| <input type="text" x-model="$store.schedulerStore.editingTask.schedule.minute" | |
| placeholder="*" maxlength="9"> | |
| </div> | |
| <div class="scheduler-schedule-field"> | |
| <span class="scheduler-schedule-label">Hour</span> | |
| <input type="text" x-model="$store.schedulerStore.editingTask.schedule.hour" | |
| placeholder="*" maxlength="9"> | |
| </div> | |
| <div class="scheduler-schedule-field"> | |
| <span class="scheduler-schedule-label">Day</span> | |
| <input type="text" x-model="$store.schedulerStore.editingTask.schedule.day" | |
| placeholder="*" maxlength="9"> | |
| </div> | |
| <div class="scheduler-schedule-field"> | |
| <span class="scheduler-schedule-label">Month</span> | |
| <input type="text" x-model="$store.schedulerStore.editingTask.schedule.month" | |
| placeholder="*" maxlength="9"> | |
| </div> | |
| <div class="scheduler-schedule-field"> | |
| <span class="scheduler-schedule-label">Weekday</span> | |
| <input type="text" x-model="$store.schedulerStore.editingTask.schedule.weekday" | |
| placeholder="*" maxlength="9"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="scheduler-form-field full-width" | |
| x-show="$store.schedulerStore.editingTask.type === 'planned'" | |
| x-effect="if ($store.schedulerStore.isEditing && $store.schedulerStore.editingTask.type === 'planned') { $store.schedulerStore.initFlatpickr('edit') }"> | |
| <div class="label-help-wrapper"> | |
| <label class="scheduler-form-label">Plan</label> | |
| <div class="scheduler-form-help">Specific execution times for this task</div> | |
| </div> | |
| <div class="scheduler-plan-builder"> | |
| <div class="scheduler-plan-todo"> | |
| <span class="scheduler-plan-label">Upcoming Executions</span> | |
| <div class="scheduler-todo-list"> | |
| <template x-if="$store.schedulerStore.editingTask.plan && Array.isArray($store.schedulerStore.editingTask.plan.todo) && $store.schedulerStore.editingTask.plan.todo.length > 0"> | |
| <template x-for="(time, index) in $store.schedulerStore.editingTask.plan.todo" :key="index"> | |
| <div class="scheduler-todo-item"> | |
| <span x-text="$store.schedulerStore.formatDate(time)"></span> | |
| <button @click.prevent="$store.schedulerStore.editingTask.plan.todo.splice(index, 1)" | |
| class="scheduler-todo-remove"> | |
| <x-icon name="close"></x-icon> | |
| </button> | |
| </div> | |
| </template> | |
| </template> | |
| <template x-if="!$store.schedulerStore.editingTask.plan || !$store.schedulerStore.editingTask.plan.todo || $store.schedulerStore.editingTask.plan.todo.length === 0"> | |
| <div class="scheduler-empty-plan"> | |
| No scheduled execution times yet. Add one below. | |
| </div> | |
| </template> | |
| <div class="scheduler-add-todo"> | |
| <input type="text" id="newPlannedTime-edit" | |
| class="scheduler-flatpickr-input" | |
| placeholder="Select date and time"> | |
| <button @click.prevent="$store.schedulerStore.addPlannedTime('edit')" | |
| class="btn btn-ok scheduler-add-todo-button"> | |
| <x-icon name="add"></x-icon> | |
| Add Time | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="scheduler-form-field full-width" | |
| x-show="$store.schedulerStore.editingTask.type === 'adhoc'"> | |
| <div class="label-help-wrapper"> | |
| <label class="scheduler-form-label">Token</label> | |
| <div class="scheduler-form-help">Token used to trigger this task externally</div> | |
| </div> | |
| <div class="input-group"> | |
| <input type="text" x-model="$store.schedulerStore.editingTask.token" | |
| placeholder="Token for ad-hoc task"> | |
| <button class="btn btn-action generate-token" | |
| @click="$store.schedulerStore.editingTask.token = $store.schedulerStore.generateRandomToken()" | |
| title="Generate Token"> | |
| <x-icon name="refresh"></x-icon> | |
| Generate | |
| </button> | |
| </div> | |
| </div> | |
| <div class="scheduler-form-field full-width"> | |
| <div class="label-help-wrapper"> | |
| <label class="scheduler-form-label">System Prompt</label> | |
| <div class="scheduler-form-help">System-level instructions for the assistant</div> | |
| </div> | |
| <textarea x-model="$store.schedulerStore.editingTask.system_prompt" | |
| placeholder="System instructions for the AI"></textarea> | |
| </div> | |
| <div class="scheduler-form-field full-width"> | |
| <div class="label-help-wrapper"> | |
| <label class="scheduler-form-label">User Prompt</label> | |
| <div class="scheduler-form-help">The main task prompt that will be executed</div> | |
| </div> | |
| <textarea x-model="$store.schedulerStore.editingTask.prompt" | |
| placeholder="User message for the AI"></textarea> | |
| </div> | |
| <div class="scheduler-form-field full-width"> | |
| <div class="label-help-wrapper"> | |
| <label class="scheduler-form-label">Attachments</label> | |
| <div class="scheduler-form-help">Container file paths or URLs, one per line</div> | |
| </div> | |
| <textarea x-model="$store.schedulerStore.attachmentsText" | |
| placeholder="Enter file paths or URLs, one per line"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </template> | |
| </div> | |
| <style> | |
| /* Form header with Save/Cancel buttons - aligns with Projects pattern */ | |
| .scheduler-form-title { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| color: var(--color-primary); | |
| } | |
| .scheduler-form-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .scheduler-editor-actions { | |
| margin: 0 0 1rem 0; | |
| } | |
| /* Generate token button - extends .btn-action from buttons.css */ | |
| .btn-action.generate-token { | |
| padding: 0.4rem 0.75rem; | |
| white-space: nowrap; | |
| } | |
| /* Todo remove button with Material Symbol */ | |
| .scheduler-todo-remove { | |
| background: none; | |
| border: 1px solid var(--color-border); | |
| padding: 0.15rem; | |
| color: var(--color-text); | |
| opacity: 0.7; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| .scheduler-todo-remove .material-symbols-outlined { | |
| font-size: 16px; | |
| } | |
| .scheduler-todo-remove:hover { | |
| opacity: 1; | |
| border-color: var(--color-accent); | |
| color: var(--color-accent); | |
| } | |
| /* Add todo button styling */ | |
| .scheduler-add-todo-button { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.25rem; | |
| } | |
| .scheduler-add-todo-button .material-symbols-outlined { | |
| font-size: 18px; | |
| } | |
| /* Project color ball */ | |
| .project-color-ball { | |
| display: inline-block; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| margin-right: 6px; | |
| vertical-align: middle; | |
| } | |
| .project-display { | |
| display: flex; | |
| align-items: center; | |
| padding: 0.5rem; | |
| background: var(--color-background); | |
| border: 1px solid var(--color-border); | |
| border-radius: 4px; | |
| } | |
| </style> | |
| </body> | |
| </html> | |