Initial Commit

templates/ticket_detail.html

@@ -0,0 +1,153 @@
+{% 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('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;');}
+
+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 %}