{% extends "vcelerytaskrunner/layout.html" %} {% block title %}Tasks{% endblock %} {% block content %}

Tasks I know about

Runnable Only
Runnable?
Task
False
{% templatetag openvariable %}task.name{% templatetag closevariable %}
Hold on...
{% endblock %} {% block vuescripts %} const pageSize = 15 const app = createApp({ data() { return { tasks: [], taskPagination: {offset: 0, limit: pageSize, count: 0}, taskFilter: {mask: "", runnableOnly: true}, searchEnabled: false, requestInProgress: false } }, methods: { createTaskUrl: function(mask, runnableOnly, pagination) { return '{% url "vcelery-api-tasks" %}?mask=' + encodeURIComponent(mask) + "&runnableOnly=" + runnableOnly.toString() + "&offset=" + pagination.offset.toString() + "&limit=" + pagination.limit.toString() }, searchTask: async function(offset, limit) { const taskUrl = this.createTaskUrl(this.taskFilter.mask, this.taskFilter.runnableOnly, this.taskPagination) this.taskPagination.offset = 0 try { this.requestInProgress = true const response = await fetch(taskUrl) const response_json = await response.json() this.tasks = response_json.tasks this.taskPagination.count = response_json.total_count } finally { this.requestInProgress = false } }, clearSearch: function() { this.taskFilter.mask = "" this.taskPagination.offset = 0 this.searchTask() }, searchEnter: function(e) { e.preventDefault() this.requestInProgress = true this.searchTask() }, scrollFirst: function() { this.taskPagination.offset = 0 this.searchTask() }, scrollPrev: function() { const newOffset = Math.max(0, this.taskPagination.offset - pageSize) this.taskPagination.offset = newOffset this.searchTask() }, scrollNext: function() { this.taskPagination.offset += pageSize this.searchTask() }, scrollLast: function() { const { totalPages } = this.pageInfo const lastPage = Math.max(0, totalPages - 1) this.taskPagination.offset = lastPage * pageSize this.searchTask() }, }, computed: { pageInfo: function() { const page = (this.taskPagination.offset / pageSize) + 1 const totalPages = Math.max(1, Math.ceil(this.taskPagination.count / pageSize)) return {page: page, totalPages: totalPages} }, pageInfoDisplay: function() { const pageInfo = this.pageInfo return `${pageInfo.page} / ${pageInfo.totalPages}` } }, watch: { "taskFilter.mask": function(value, oldValue) { if (value && value.length > 0) { this.searchEnabled = true } else { this.searchEnabled = false } }, "taskFilter.runnableOnly": function(value, oldValue) { if (oldValue !== value) { this.taskPagination.offset = 0 this.searchTask() } } }, mounted() { this.searchTask() }, }) {% endblock %}