154 lines
6.9 KiB
HTML
154 lines
6.9 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}#{{ t.id }} — {{ t.title }} · {{ brand }}{% endblock %}
|
|
{% block content %}
|
|
<div class="grid lg:grid-cols-3 gap-6">
|
|
<section class="lg:col-span-2 card p-5">
|
|
<header class="flex items-start justify-between gap-3">
|
|
<div>
|
|
<h1 class="text-2xl font-bold">#{{ t.id }} · {{ t.title }}</h1>
|
|
<div class="mt-1 flex flex-wrap items-center gap-2 text-xs">
|
|
<span class="tag {{ status_class(t.status) }}">{{ t.status.replace('_',' ').title() }}</span>
|
|
<span class="tag {{ priority_class(t.priority) }}">Priority: {{ t.priority }}</span>
|
|
{% if t.sprint %}<span class="tag">Sprint: {{ t.sprint }}</span>{% endif %}
|
|
{% for label in t.label_list() %}<span class="tag">{{ label }}</span>{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% if can_manage %}
|
|
<a class="btn" href="{{ url_for('admin_edit_ticket', ticket_id=t.id) }}">Edit</a>
|
|
{% endif %}
|
|
</header>
|
|
|
|
<article class="prose prose-invert max-w-none mt-4">
|
|
<p class="whitespace-pre-wrap">{{ t.description }}</p>
|
|
</article>
|
|
|
|
{% set done,total = checklist_progress(t) %}
|
|
{% if total %}
|
|
<hr class="my-5 border-white/10" />
|
|
<h2 class="font-semibold">Checklist</h2>
|
|
<div class="mt-2">
|
|
<div class="flex items-center justify-between text-xs text-white/60">
|
|
<span>Progress</span><span>{{ done }}/{{ total }}</span>
|
|
</div>
|
|
<div class="h-2 bg-white/10 rounded-full mt-1 overflow-hidden">
|
|
<div class="h-2 bg-emerald-500/70" style="width: {{ (done/total*100)|round(0) }}%"></div>
|
|
</div>
|
|
</div>
|
|
<ul class="mt-3 space-y-2 text-sm">
|
|
{% for i in t.checklist_items() %}
|
|
<li class="flex items-start gap-2">
|
|
<span class="mt-1 inline-block w-3 h-3 rounded border {{ 'bg-emerald-500/80 border-emerald-400/70' if i.checked else 'border-white/30' }}"></span>
|
|
<span class="{{ 'text-white' if i.checked else 'text-white/80' }}">{{ i.text }}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
|
|
<hr class="my-5 border-white/10" />
|
|
<h2 class="font-semibold">Comments</h2>
|
|
<div id="comments" class="mt-3 space-y-3">
|
|
{% for c in t.comments %}
|
|
<div class="card p-3">
|
|
<div class="text-sm"><b>{{ c.author_name }}</b> <span class="text-white/50">· {{ reltime(c.created_at) }}</span></div>
|
|
<div class="mt-1 whitespace-pre-wrap">{{ c.body }}</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-white/60">No comments yet.</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{% if user %}
|
|
<div class="mt-4">
|
|
<textarea id="commentBox" rows="3" class="w-full bg-black/40 border border-white/10 rounded-lg px-3 py-2" placeholder="Write a comment…"></textarea>
|
|
<div class="mt-2 flex justify-end"><button id="commentBtn" class="btn-accent">Post Comment</button></div>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
|
|
<aside class="card p-5 space-y-4">
|
|
<div>
|
|
<h3 class="font-semibold">Assignee</h3>
|
|
<p class="mt-1 text-white/80">{{ t.assignee_name or (t.assignee_id and ('<@' ~ t.assignee_id ~ '>')) or 'Unassigned' }}</p>
|
|
{% if can_manage %}
|
|
<div class="mt-3">
|
|
<label class="text-xs text-white/60">Discord ID</label>
|
|
<input id="assigneeId" value="{{ t.assignee_id or '' }}" class="w-full bg-black/40 border border-white/10 rounded-lg px-2 py-1.5" />
|
|
<label class="text-xs text-white/60 mt-2 block">Display Name</label>
|
|
<input id="assigneeName" value="{{ t.assignee_name or '' }}" class="w-full bg-black/40 border border-white/10 rounded-lg px-2 py-1.5" />
|
|
<button id="assignBtn" class="btn-accent mt-2 w-full">Assign</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="font-semibold">Dates</h3>
|
|
<div class="text-xs text-white/60 mt-1 space-y-1">
|
|
<div>Created: {{ t.created_at.strftime('%Y-%m-%d %H:%M') }} UTC ({{ reltime(t.created_at) }})</div>
|
|
<div>Updated: {{ t.updated_at.strftime('%Y-%m-%d %H:%M') }} UTC ({{ reltime(t.updated_at) }})</div>
|
|
{% if t.due_at %}<div class="text-red-200">Due: {{ t.due_at.strftime('%Y-%m-%d') }} ({{ reltime(t.due_at) }})</div>{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="font-semibold">Meta</h3>
|
|
<div class="text-xs text-white/70 mt-1 space-y-1">
|
|
<div>Priority: <span class="tag {{ priority_class(t.priority) }}">{{ t.priority }}</span></div>
|
|
{% if t.points is not none %}<div>Points: {{ t.points }}</div>{% endif %}
|
|
{% if t.sprint %}<div>Sprint: {{ t.sprint }}</div>{% endif %}
|
|
{% set labels = t.label_list() %}
|
|
{% if labels %}
|
|
<div class="flex flex-wrap gap-1 items-center">
|
|
<span>Labels:</span>
|
|
{% for label in labels %}<span class="tag">{{ label }}</span>{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<script>
|
|
const ticketId = {{ t.id }};
|
|
const commentBtn = document.getElementById('commentBtn');
|
|
const commentBox = document.getElementById('commentBox');
|
|
const comments = document.getElementById('comments');
|
|
const assignBtn = document.getElementById('assignBtn');
|
|
const assigneeId = document.getElementById('assigneeId');
|
|
const assigneeName = document.getElementById('assigneeName');
|
|
|
|
function esc(s){return (s||'').replaceAll('&','&').replaceAll('<','<').replaceAll('>','>');}
|
|
|
|
commentBtn?.addEventListener('click', async () => {
|
|
const body = commentBox.value.trim();
|
|
if(!body) return;
|
|
const r = await fetch(`/api/tickets/${ticketId}/comment`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({body})});
|
|
const data = await r.json();
|
|
if(!r.ok){ alert(data.error||'Failed'); return; }
|
|
commentBox.value='';
|
|
const c = data.comment;
|
|
const el = document.createElement('div');
|
|
el.className='card p-3';
|
|
el.innerHTML = `<div class="text-sm"><b>${esc(c.author_name)}</b> <span class="text-white/50">· ${(new Date(c.created_at)).toISOString().slice(0,16).replace('T',' ')} UTC</span></div><div class="mt-1 whitespace-pre-wrap">${esc(c.body)}</div>`;
|
|
comments.prepend(el);
|
|
});
|
|
|
|
assignBtn?.addEventListener('click', async () => {
|
|
const payload = { assignee_id: assigneeId.value.trim(), assignee_name: assigneeName.value.trim() };
|
|
const r = await fetch(`/api/tickets/${ticketId}/assign`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(payload)});
|
|
const data = await r.json();
|
|
if(!r.ok){ alert(data.error||'Failed'); return; }
|
|
location.reload();
|
|
});
|
|
|
|
document.querySelectorAll('[data-status]')?.forEach(btn => {
|
|
btn.addEventListener('click', async () => {
|
|
const status = btn.dataset.status;
|
|
const r = await fetch(`/api/tickets/${ticketId}/status`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({status})});
|
|
const data = await r.json();
|
|
if(!r.ok){ alert(data.error||'Failed'); return; }
|
|
location.reload();
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|