{% extends "base.html" %}{% block title %}Task Center{% endblock %}{% block body %}
<div class="head"><div><small>OPERATIONS / TASKS</small><h1>Task Center</h1><p>One workspace for installs, service actions, website jobs and maintenance.</p></div><div class="action-row"><button class="soft" onclick="location.reload()">↻ Refresh</button><a class="btn" href="/admin/store">New App Task</a></div></div>
<div class="stats"><div class="card stat"><small>ACTIVE</small><strong id="count-active">0</strong><span>Queued + running</span></div><div class="card stat"><small>RUNNING</small><strong id="count-running">0</strong><span>Live processes</span></div><div class="card stat"><small>COMPLETED</small><strong id="count-completed">0</strong><span>Successful jobs</span></div><div class="card stat"><small>FAILED</small><strong id="count-failed">0</strong><span>Needs review</span></div></div>
<section class="card"><div class="cardhead"><div class="task-tabs"><button class="soft active" data-filter="all">All</button><button class="soft" data-filter="active">Active</button><button class="soft" data-filter="queued">Queued</button><button class="soft" data-filter="running">Running</button><button class="soft" data-filter="completed">Completed</button><button class="soft" data-filter="failed">Failed</button></div><span class="tag" id="task-refresh-state">Auto refresh</span></div><div class="tablewrap"><table><thead><tr><th>Task</th><th>Operation</th><th>Status</th><th>Progress</th><th>Current stage</th><th>Elapsed</th><th>Actions</th></tr></thead><tbody id="task-rows">{% for t in tasks %}<tr data-status="{{t.status}}" data-id="{{t.id}}"><td><b>{{t.app_key or t.kind}}</b><div class="muted"><code>{{t.id[:12]}}</code></div></td><td>{{t.operation}}</td><td><span class="task-status {{t.status}}">{{t.status|upper}}</span></td><td><div class="progress"><i style="width:{{t.progress}}%"></i></div> <b>{{t.progress}}%</b></td><td>{{t.step or 'Waiting'}}</td><td class="elapsed" data-start="{{t.started_at or ''}}" data-finish="{{t.finished_at or ''}}">—</td><td><div class="action-row"><button class="soft" data-view-task="{{t.id}}">{% if t.status in ['running','queued','cancel_requested'] %}Process / View{% else %}Details{% endif %}</button>{% if t.status in ['failed','cancelled'] %}<button class="soft" data-retry="{{t.id}}">Retry</button>{% endif %}{% if t.status in ['queued','running','cancel_requested'] %}<button class="danger" data-cancel="{{t.id}}">Stop</button>{% endif %}{% if t.status not in ['running','queued','cancel_requested'] %}<button class="danger" data-delete-task="{{t.id}}">Delete</button>{% endif %}</div></td></tr>{% else %}<tr><td colspan="7" class="empty">No tasks yet. Install an app or run a maintenance action to create one.</td></tr>{% endfor %}</tbody></table></div></section>
<div class="modal-backdrop" id="task-modal" hidden><div class="modal-card task-modal"><button class="modal-close" type="button" data-close-task aria-label="Close" onclick="closeModal('task-modal')">×</button><small>LIVE PROCESS</small><h2 id="task-title">Task</h2><p class="sub" id="task-sub">Waiting for output…</p><div class="task-live"><span id="task-status"></span><span id="task-progress">0%</span></div><div class="progress big"><i id="task-bar" style="width:0%"></i></div><pre id="task-output" class="logbox">Waiting for task output…</pre><div class="action-row" id="task-actions"></div></div></div>
<script>
const CSRF='{{csrf_token}}',tm=document.getElementById('task-modal');let taskTimer=null,currentTask='';
function elapsedText(t){if(!t.started_at)return '—';const a=new Date(t.started_at.replace(' ','T')+'Z'),b=t.finished_at?new Date(t.finished_at.replace(' ','T')+'Z'):new Date();let s=Math.max(0,Math.floor((b-a)/1000));return Math.floor(s/60)+'m '+(s%60)+'s'}
function updateCounts(tasks){const c={active:0,running:0,completed:0,failed:0};tasks.forEach(t=>{if(['queued','running','cancel_requested'].includes(t.status))c.active++;if(t.status==='running')c.running++;if(t.status==='completed')c.completed++;if(t.status==='failed')c.failed++});Object.entries(c).forEach(([k,v])=>document.getElementById('count-'+k).textContent=v)}
function filterTasks(f){document.querySelectorAll('#task-rows tr[data-status]').forEach(r=>{const s=r.dataset.status;r.hidden=f==='all'?false:f==='active'?['queued','running','cancel_requested'].includes(s):s!==f})}
async function openTask(id){currentTask=id;openModal('task-modal');clearInterval(taskTimer);async function run(){try{const j=await fetch('/api/tasks/'+id+'/live',{cache:'no-store'}).then(r=>r.json());if(!j.ok)return;const t=j.task;document.getElementById('task-title').textContent=(t.app_key||t.kind)+' · '+t.operation;document.getElementById('task-sub').textContent=(t.step||'No active stage')+' · '+elapsedText(t);document.getElementById('task-status').textContent=t.status.toUpperCase();document.getElementById('task-progress').textContent=t.progress+'%';document.getElementById('task-bar').style.width=t.progress+'%';document.getElementById('task-output').textContent=t.live_output||t.output||t.error||'No output yet.';const a=document.getElementById('task-actions');a.innerHTML='';if(['queued','running','cancel_requested'].includes(t.status)){a.innerHTML='<button class="danger" data-cancel="'+t.id+'">Stop / Cancel</button>'}else if(['failed','cancelled'].includes(t.status)){a.innerHTML='<button class="soft" data-retry="'+t.id+'">Retry</button>'}if(!['queued','running','cancel_requested'].includes(t.status))clearInterval(taskTimer)}catch(e){}}await run();taskTimer=setInterval(run,1200)}
document.addEventListener('click',async e=>{const v=e.target.closest('[data-view-task]');if(v)openTask(v.dataset.viewTask);if(e.target.closest('[data-close-task]')){closeModal('task-modal');clearInterval(taskTimer)}const tab=e.target.closest('[data-filter]');if(tab){document.querySelectorAll('[data-filter]').forEach(x=>x.classList.remove('active'));tab.classList.add('active');filterTasks(tab.dataset.filter)}const b=e.target.closest('[data-retry],[data-cancel],[data-delete-task]');if(!b)return;const id=b.dataset.retry||b.dataset.cancel||b.dataset.deleteTask,op=b.dataset.retry?'retry':b.dataset.cancel?'cancel':'delete';if(op==='delete'&&!confirm('Delete this task history?'))return;const r=await fetch('/api/tasks/'+id+'/'+op,{method:'POST',headers:{'X-CSRFToken':CSRF}}),j=await r.json();if(!j.ok)toast(j.error,'error');else location.reload()});
async function refreshTasks(){try{const j=await fetch('/api/tasks',{cache:'no-store'}).then(r=>r.json());updateCounts(j.tasks||[])}catch(e){}}refreshTasks();setInterval(refreshTasks,3000);document.querySelectorAll('.elapsed').forEach(e=>{const s=e.dataset.start,f=e.dataset.finish;if(s)e.textContent=elapsedText({started_at:s,finished_at:f})});
</script>{% endblock %}