Phase 5 — Thread tracker
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
claudecode
@@ -53,3 +53,29 @@ export function getSystems() {
|
||||
export function getTable(name) {
|
||||
return request(`/tables/${name}`);
|
||||
}
|
||||
|
||||
export async function getThreads(campaignId) {
|
||||
const { data } = await request(`/campaigns/${campaignId}/threads`);
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function createThread(campaignId, data) {
|
||||
const result = await request(`/campaigns/${campaignId}/threads`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
return result.data;
|
||||
}
|
||||
|
||||
export async function updateThread(campaignId, id, data) {
|
||||
const result = await request(`/campaigns/${campaignId}/threads/${id}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
return result.data;
|
||||
}
|
||||
|
||||
export async function deleteThread(campaignId, id) {
|
||||
const result = await request(`/campaigns/${campaignId}/threads/${id}`, { method: 'DELETE' });
|
||||
return result.data;
|
||||
}
|
||||
|
||||
+315
-1
@@ -1 +1,315 @@
|
||||
// Mythic Oracle — threads
|
||||
// Mythic Oracle — thread tracker
|
||||
|
||||
import { getActiveCampaign } from './app.js';
|
||||
import { getThreads, createThread, updateThread, deleteThread } from './api.js';
|
||||
|
||||
const NO_CAMPAIGN_MESSAGE = 'Select or create a campaign to use the thread tracker.';
|
||||
const STATUSES = ['active', 'resolved', 'suspended', 'complicated'];
|
||||
|
||||
const FIELD_DEFS = [
|
||||
{ key: 'title', label: 'Title', type: 'text' },
|
||||
{ key: 'status', label: 'Status', type: 'select' },
|
||||
{ key: 'notes', label: 'Notes', type: 'textarea' },
|
||||
{ key: 'related_npcs', label: 'Related NPCs', type: 'text' },
|
||||
{ key: 'related_location', label: 'Related Location', type: 'text' },
|
||||
{ key: 'origin', label: 'Origin', type: 'textarea' },
|
||||
{ key: 'stakes', label: 'Stakes', type: 'textarea' },
|
||||
{ key: 'last_development', label: 'Last Development', type: 'textarea' },
|
||||
{ key: 'next_beat', label: 'Next Beat', type: 'textarea' },
|
||||
{ key: 'suspected_resolution', label: 'Suspected Resolution', type: 'textarea' },
|
||||
];
|
||||
|
||||
const container = document.getElementById('view-threads');
|
||||
|
||||
let threadsCache = [];
|
||||
let activeTab = 'active';
|
||||
let expandedId = null;
|
||||
let editingThreadId = null;
|
||||
|
||||
function statusLabel(status) {
|
||||
return status.charAt(0).toUpperCase() + status.slice(1);
|
||||
}
|
||||
|
||||
function renderNoCampaign() {
|
||||
container.innerHTML = '';
|
||||
const msg = document.createElement('div');
|
||||
msg.className = 'threads-empty-state';
|
||||
msg.textContent = NO_CAMPAIGN_MESSAGE;
|
||||
container.appendChild(msg);
|
||||
container.dataset.skeleton = 'false';
|
||||
}
|
||||
|
||||
function ensureSkeleton() {
|
||||
if (container.dataset.skeleton === 'true') return;
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="threads-header">
|
||||
<h2 class="threads-title">Threads</h2>
|
||||
<button class="thread-create-btn" id="threadCreateBtn" type="button">+ New Thread</button>
|
||||
</div>
|
||||
<div class="thread-tabs" id="threadTabs">
|
||||
<button class="thread-tab active" data-status="active" type="button">Active</button>
|
||||
<button class="thread-tab" data-status="resolved" type="button">Resolved</button>
|
||||
<button class="thread-tab" data-status="suspended" type="button">Suspended</button>
|
||||
<button class="thread-tab" data-status="complicated" type="button">Complicated</button>
|
||||
</div>
|
||||
<div class="thread-list" id="threadList"></div>
|
||||
<div class="modal-overlay" id="threadModalOverlay">
|
||||
<div class="modal">
|
||||
<h3 class="modal-title" id="threadModalTitle">New Thread</h3>
|
||||
<div class="modal-body" id="threadModalBody"></div>
|
||||
<div class="modal-actions">
|
||||
<button class="clear-btn" id="threadCancelBtn" type="button">Cancel</button>
|
||||
<button class="roll-btn" id="threadSaveBtn" type="button">Save Thread</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
container.dataset.skeleton = 'true';
|
||||
bindSkeletonEvents();
|
||||
}
|
||||
|
||||
function bindSkeletonEvents() {
|
||||
container.querySelector('#threadCreateBtn').addEventListener('click', openCreateModal);
|
||||
|
||||
container.querySelectorAll('.thread-tab').forEach((tab) => {
|
||||
tab.addEventListener('click', () => {
|
||||
if (tab.dataset.status === activeTab) return;
|
||||
activeTab = tab.dataset.status;
|
||||
container.querySelectorAll('.thread-tab').forEach((t) => t.classList.toggle('active', t === tab));
|
||||
expandedId = null;
|
||||
renderList();
|
||||
});
|
||||
});
|
||||
|
||||
container.querySelector('#threadCancelBtn').addEventListener('click', closeModal);
|
||||
container.querySelector('#threadSaveBtn').addEventListener('click', saveModal);
|
||||
container.querySelector('#threadModalOverlay').addEventListener('click', (event) => {
|
||||
if (event.target.id === 'threadModalOverlay') closeModal();
|
||||
});
|
||||
}
|
||||
|
||||
function renderList() {
|
||||
const listEl = container.querySelector('#threadList');
|
||||
listEl.innerHTML = '';
|
||||
|
||||
const filtered = threadsCache.filter((thread) => thread.status === activeTab);
|
||||
|
||||
if (filtered.length === 0) {
|
||||
const empty = document.createElement('div');
|
||||
empty.className = 'thread-empty';
|
||||
empty.textContent = `No ${activeTab} threads.`;
|
||||
listEl.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
filtered.forEach((thread) => {
|
||||
listEl.appendChild(buildThreadCard(thread));
|
||||
});
|
||||
}
|
||||
|
||||
function buildThreadCard(thread) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'thread-card';
|
||||
|
||||
const header = document.createElement('button');
|
||||
header.type = 'button';
|
||||
header.className = 'thread-card-header';
|
||||
|
||||
const titleSpan = document.createElement('span');
|
||||
titleSpan.className = 'thread-card-title';
|
||||
titleSpan.textContent = thread.title;
|
||||
|
||||
const badge = document.createElement('span');
|
||||
badge.className = `thread-status-badge thread-status-${thread.status}`;
|
||||
badge.textContent = statusLabel(thread.status);
|
||||
|
||||
header.append(titleSpan, badge);
|
||||
header.addEventListener('click', () => {
|
||||
expandedId = expandedId === thread.id ? null : thread.id;
|
||||
renderList();
|
||||
});
|
||||
card.appendChild(header);
|
||||
|
||||
if (expandedId === thread.id) {
|
||||
card.classList.add('expanded');
|
||||
card.appendChild(buildThreadDetail(thread));
|
||||
}
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
function buildThreadDetail(thread) {
|
||||
const detail = document.createElement('div');
|
||||
detail.className = 'thread-card-detail';
|
||||
|
||||
FIELD_DEFS.forEach(({ key, label }) => {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'thread-field';
|
||||
|
||||
const labelEl = document.createElement('span');
|
||||
labelEl.className = 'thread-field-label';
|
||||
labelEl.textContent = label;
|
||||
|
||||
const valueEl = document.createElement('span');
|
||||
valueEl.className = 'thread-field-value';
|
||||
valueEl.textContent = key === 'status' ? statusLabel(thread.status) : (thread[key] || '—');
|
||||
|
||||
row.append(labelEl, valueEl);
|
||||
detail.appendChild(row);
|
||||
});
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'thread-card-actions';
|
||||
|
||||
const editBtn = document.createElement('button');
|
||||
editBtn.type = 'button';
|
||||
editBtn.className = 'thread-edit-btn';
|
||||
editBtn.textContent = 'Edit';
|
||||
editBtn.addEventListener('click', () => openEditModal(thread));
|
||||
|
||||
const deleteBtn = document.createElement('button');
|
||||
deleteBtn.type = 'button';
|
||||
deleteBtn.className = 'thread-delete-btn';
|
||||
deleteBtn.textContent = 'Delete';
|
||||
deleteBtn.addEventListener('click', () => handleDelete(thread));
|
||||
|
||||
actions.append(editBtn, deleteBtn);
|
||||
detail.appendChild(actions);
|
||||
|
||||
return detail;
|
||||
}
|
||||
|
||||
function buildModalForm(values) {
|
||||
const body = container.querySelector('#threadModalBody');
|
||||
body.innerHTML = '';
|
||||
|
||||
FIELD_DEFS.forEach(({ key, label, type }) => {
|
||||
const group = document.createElement('div');
|
||||
group.className = 'modal-field';
|
||||
|
||||
const labelEl = document.createElement('label');
|
||||
labelEl.className = 'modal-field-label';
|
||||
labelEl.textContent = label;
|
||||
labelEl.setAttribute('for', `thread-field-${key}`);
|
||||
group.appendChild(labelEl);
|
||||
|
||||
let input;
|
||||
if (type === 'select') {
|
||||
input = document.createElement('select');
|
||||
input.className = 'modal-select';
|
||||
STATUSES.forEach((status) => {
|
||||
const option = document.createElement('option');
|
||||
option.value = status;
|
||||
option.textContent = statusLabel(status);
|
||||
input.appendChild(option);
|
||||
});
|
||||
input.value = values.status || 'active';
|
||||
} else if (type === 'textarea') {
|
||||
input = document.createElement('textarea');
|
||||
input.className = 'modal-textarea';
|
||||
input.rows = 3;
|
||||
input.value = values[key] || '';
|
||||
} else {
|
||||
input = document.createElement('input');
|
||||
input.type = 'text';
|
||||
input.className = 'modal-input';
|
||||
input.value = values[key] || '';
|
||||
}
|
||||
input.id = `thread-field-${key}`;
|
||||
|
||||
group.appendChild(input);
|
||||
body.appendChild(group);
|
||||
});
|
||||
}
|
||||
|
||||
function collectFormData() {
|
||||
const data = {};
|
||||
FIELD_DEFS.forEach(({ key }) => {
|
||||
const el = container.querySelector(`#thread-field-${key}`);
|
||||
const value = el.value;
|
||||
data[key] = value.trim() === '' ? null : value;
|
||||
});
|
||||
return data;
|
||||
}
|
||||
|
||||
function openCreateModal() {
|
||||
editingThreadId = null;
|
||||
container.querySelector('#threadModalTitle').textContent = 'New Thread';
|
||||
buildModalForm({});
|
||||
showModal();
|
||||
}
|
||||
|
||||
function openEditModal(thread) {
|
||||
editingThreadId = thread.id;
|
||||
container.querySelector('#threadModalTitle').textContent = 'Edit Thread';
|
||||
buildModalForm(thread);
|
||||
showModal();
|
||||
}
|
||||
|
||||
function showModal() {
|
||||
container.querySelector('#threadModalOverlay').classList.add('open');
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
container.querySelector('#threadModalOverlay').classList.remove('open');
|
||||
}
|
||||
|
||||
async function saveModal() {
|
||||
const campaign = getActiveCampaign();
|
||||
if (!campaign) return;
|
||||
|
||||
const data = collectFormData();
|
||||
if (!data.title) {
|
||||
alert('Title is required.');
|
||||
return;
|
||||
}
|
||||
if (!data.status) data.status = 'active';
|
||||
|
||||
try {
|
||||
if (editingThreadId === null) {
|
||||
await createThread(campaign.id, data);
|
||||
} else {
|
||||
await updateThread(campaign.id, editingThreadId, data);
|
||||
}
|
||||
closeModal();
|
||||
await loadAndRender();
|
||||
} catch (err) {
|
||||
alert(err.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(thread) {
|
||||
const confirmed = confirm(`Delete "${thread.title}"? This cannot be undone.`);
|
||||
if (!confirmed) return;
|
||||
|
||||
const campaign = getActiveCampaign();
|
||||
if (!campaign) return;
|
||||
|
||||
await deleteThread(campaign.id, thread.id);
|
||||
expandedId = null;
|
||||
await loadAndRender();
|
||||
}
|
||||
|
||||
async function loadAndRender() {
|
||||
const campaign = getActiveCampaign();
|
||||
if (!campaign) {
|
||||
renderNoCampaign();
|
||||
return;
|
||||
}
|
||||
|
||||
ensureSkeleton();
|
||||
threadsCache = await getThreads(campaign.id);
|
||||
renderList();
|
||||
}
|
||||
|
||||
function init() {
|
||||
loadAndRender();
|
||||
|
||||
const navBtn = document.querySelector('.nav-item[data-view="threads"]');
|
||||
if (navBtn) {
|
||||
navBtn.addEventListener('click', () => loadAndRender());
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
|
||||
Reference in New Issue
Block a user