360 lines
13 KiB
TypeScript
360 lines
13 KiB
TypeScript
/**
|
|
* <folk-campaigns-dashboard> — Campaign gallery grid.
|
|
*
|
|
* Lists all campaign flows and renders mini SVG previews. Click a card to
|
|
* open that flow in the planner. Also surfaces the AI wizard (which sets up
|
|
* a new flow) and a blank "+ New" affordance.
|
|
*
|
|
* Attributes:
|
|
* space — space slug (default "demo")
|
|
*/
|
|
|
|
import { TourEngine } from '../../../shared/tour-engine';
|
|
import type { TourStep } from '../../../shared/tour-engine';
|
|
import type {
|
|
CampaignFlow,
|
|
CampaignPlannerNode,
|
|
CampaignEdge,
|
|
PhaseNodeData,
|
|
} from '../schemas';
|
|
|
|
// ── Mini SVG constants ──
|
|
|
|
const NODE_COLORS: Record<string, string> = {
|
|
post: '#3b82f6',
|
|
thread: '#8b5cf6',
|
|
platform: '#10b981',
|
|
audience: '#f59e0b',
|
|
phase: '#64748b',
|
|
goal: '#6366f1',
|
|
message: '#6366f1',
|
|
tone: '#8b5cf6',
|
|
brief: '#ec4899',
|
|
};
|
|
|
|
function nodeSize(n: CampaignPlannerNode): { w: number; h: number } {
|
|
switch (n.type) {
|
|
case 'post': return { w: 240, h: 120 };
|
|
case 'thread': return { w: 240, h: 100 };
|
|
case 'platform': return { w: 180, h: 80 };
|
|
case 'audience': return { w: 180, h: 80 };
|
|
case 'phase': {
|
|
const d = n.data as PhaseNodeData;
|
|
return { w: d.size?.w || 400, h: d.size?.h || 300 };
|
|
}
|
|
case 'goal': return { w: 240, h: 130 };
|
|
case 'message': return { w: 220, h: 100 };
|
|
case 'tone': return { w: 220, h: 110 };
|
|
case 'brief': return { w: 260, h: 150 };
|
|
default: return { w: 200, h: 100 };
|
|
}
|
|
}
|
|
|
|
function esc(s: string): string {
|
|
const d = document.createElement('div');
|
|
d.textContent = s || '';
|
|
return d.innerHTML;
|
|
}
|
|
|
|
// ── Mini SVG renderer ──
|
|
|
|
function renderMiniFlowSVG(nodes: CampaignPlannerNode[], edges: CampaignEdge[]): string {
|
|
if (nodes.length === 0) {
|
|
return `<svg viewBox="0 0 200 100" preserveAspectRatio="xMidYMid meet" class="cd-card__svg">
|
|
<text x="100" y="55" text-anchor="middle" fill="#666" font-size="14">Empty flow</text>
|
|
</svg>`;
|
|
}
|
|
|
|
let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
|
|
for (const n of nodes) {
|
|
const s = nodeSize(n);
|
|
minX = Math.min(minX, n.position.x);
|
|
minY = Math.min(minY, n.position.y);
|
|
maxX = Math.max(maxX, n.position.x + s.w);
|
|
maxY = Math.max(maxY, n.position.y + s.h);
|
|
}
|
|
const pad = 40;
|
|
const vx = minX - pad;
|
|
const vy = minY - pad;
|
|
const vw = (maxX - minX) + pad * 2;
|
|
const vh = (maxY - minY) + pad * 2;
|
|
|
|
// Edges (simple line midpoint-to-midpoint; kept light)
|
|
const edgePaths = edges.map(e => {
|
|
const from = nodes.find(n => n.id === e.from);
|
|
const to = nodes.find(n => n.id === e.to);
|
|
if (!from || !to) return '';
|
|
const fs = nodeSize(from);
|
|
const ts = nodeSize(to);
|
|
const x1 = from.position.x + fs.w;
|
|
const y1 = from.position.y + fs.h / 2;
|
|
const x2 = to.position.x;
|
|
const y2 = to.position.y + ts.h / 2;
|
|
const dx = Math.abs(x2 - x1) * 0.5;
|
|
return `<path d="M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}" fill="none" stroke="#555" stroke-width="4" opacity="0.5"/>`;
|
|
}).join('');
|
|
|
|
// Phase rects behind
|
|
const phaseRects = nodes.filter(n => n.type === 'phase').map(n => {
|
|
const s = nodeSize(n);
|
|
const d = n.data as PhaseNodeData;
|
|
return `<rect x="${n.position.x}" y="${n.position.y}" width="${s.w}" height="${s.h}" rx="8" fill="${d.color || '#64748b'}" opacity="0.08" stroke="${d.color || '#64748b'}" stroke-opacity="0.25"/>`;
|
|
}).join('');
|
|
|
|
// Content nodes as solid rects
|
|
const contentRects = nodes.filter(n => n.type !== 'phase').map(n => {
|
|
const s = nodeSize(n);
|
|
const color = NODE_COLORS[n.type] || '#666';
|
|
return `<rect x="${n.position.x}" y="${n.position.y}" width="${s.w}" height="${s.h}" rx="10" fill="${color}" opacity="0.85"/>`;
|
|
}).join('');
|
|
|
|
return `<svg viewBox="${vx} ${vy} ${vw} ${vh}" preserveAspectRatio="xMidYMid meet" class="cd-card__svg">
|
|
${phaseRects}
|
|
${edgePaths}
|
|
${contentRects}
|
|
</svg>`;
|
|
}
|
|
|
|
// ── Component ──
|
|
|
|
const DASHBOARD_TOUR_STEPS: TourStep[] = [
|
|
{ target: '#btn-wizard', title: 'Campaign Wizard', message: 'AI-guided campaign setup — answer a few questions and the wizard builds the flow for you.' },
|
|
{ target: '#btn-new', title: 'New Campaign', message: 'Start a blank campaign flow and lay out your own posts, platforms, and audiences.' },
|
|
{ target: '.cd-card', title: 'Campaign Cards', message: 'Click any card to open its flow in the planner.' },
|
|
];
|
|
|
|
class FolkCampaignsDashboard extends HTMLElement {
|
|
private shadow: ShadowRoot;
|
|
private space = '';
|
|
private flows: CampaignFlow[] = [];
|
|
private loading = true;
|
|
private _tour!: TourEngine;
|
|
|
|
private get basePath() {
|
|
const host = window.location.hostname;
|
|
if (host.endsWith('.rspace.online') || host.endsWith('.rsocials.online')) return '/rsocials/';
|
|
return `/${this.space}/rsocials/`;
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.shadow = this.attachShadow({ mode: 'open' });
|
|
this._tour = new TourEngine(
|
|
this.shadow,
|
|
DASHBOARD_TOUR_STEPS,
|
|
'rsocials_dashboard_tour_done',
|
|
() => this.shadow.querySelector('.cd-root') as HTMLElement,
|
|
);
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.space = this.getAttribute('space') || 'demo';
|
|
this.render();
|
|
this.loadFlows();
|
|
}
|
|
|
|
private async loadFlows() {
|
|
try {
|
|
const res = await fetch(`${this.basePath}api/campaign/flows`);
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
this.flows = data.results || [];
|
|
}
|
|
} catch {
|
|
console.warn('[CampaignsDashboard] Failed to load flows');
|
|
}
|
|
this.loading = false;
|
|
this.render();
|
|
if (!localStorage.getItem('rsocials_dashboard_tour_done')) {
|
|
setTimeout(() => this._tour.start(), 800);
|
|
}
|
|
}
|
|
|
|
startTour() { this._tour.start(); }
|
|
|
|
private async createFlow() {
|
|
try {
|
|
const res = await fetch(`${this.basePath}api/campaign/flows`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name: 'New Campaign' }),
|
|
});
|
|
if (res.ok) {
|
|
const flow = await res.json();
|
|
this.navigateToFlow(flow.id);
|
|
}
|
|
} catch {
|
|
console.error('[CampaignsDashboard] Failed to create flow');
|
|
}
|
|
}
|
|
|
|
private navigateToFlow(id: string) {
|
|
window.location.href = `${this.basePath}campaign-flow?id=${encodeURIComponent(id)}`;
|
|
}
|
|
|
|
private formatDate(ts: number | null): string {
|
|
if (!ts) return '—';
|
|
const d = new Date(ts);
|
|
const now = Date.now();
|
|
const diff = now - ts;
|
|
if (diff < 60000) return 'just now';
|
|
if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
|
|
if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
|
|
return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
|
|
}
|
|
|
|
private render() {
|
|
const cards = this.flows.map(flow => {
|
|
const nodeCount = flow.nodes.length;
|
|
const postCount = flow.nodes.filter(n => n.type === 'post').length;
|
|
const platformCount = flow.nodes.filter(n => n.type === 'platform').length;
|
|
|
|
return `
|
|
<div class="cd-card" data-flow-id="${flow.id}">
|
|
<div class="cd-card__preview">
|
|
${renderMiniFlowSVG(flow.nodes, flow.edges)}
|
|
</div>
|
|
<div class="cd-card__info">
|
|
<div class="cd-card__name">${esc(flow.name)}</div>
|
|
<div class="cd-card__badges">
|
|
<span class="cd-badge cd-badge--nodes">${nodeCount} node${nodeCount !== 1 ? 's' : ''}</span>
|
|
${postCount > 0 ? `<span class="cd-badge cd-badge--posts">${postCount} post${postCount !== 1 ? 's' : ''}</span>` : ''}
|
|
${platformCount > 0 ? `<span class="cd-badge cd-badge--platforms">${platformCount} platform${platformCount !== 1 ? 's' : ''}</span>` : ''}
|
|
</div>
|
|
<div class="cd-card__date">Updated ${this.formatDate(flow.updatedAt)}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
const emptyState = !this.loading && this.flows.length === 0 ? `
|
|
<div class="cd-empty">
|
|
<div class="cd-empty__icon">📢</div>
|
|
<div class="cd-empty__title">No campaigns yet</div>
|
|
<div class="cd-empty__subtitle">Use the AI wizard to set up a flow from a brief, or start a blank canvas</div>
|
|
<div class="cd-header__actions" style="justify-content:center">
|
|
<button class="cd-btn cd-btn--wizard cd-btn--new-empty" id="btn-wizard-empty">\uD83E\uDDD9 Campaign Wizard</button>
|
|
<button class="cd-btn cd-btn--primary cd-btn--new-empty">+ New Campaign</button>
|
|
</div>
|
|
</div>
|
|
` : '';
|
|
|
|
const loadingState = this.loading ? `
|
|
<div class="cd-loading">Loading campaigns…</div>
|
|
` : '';
|
|
|
|
this.shadow.innerHTML = `
|
|
<style>
|
|
:host { display: block; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--rs-text-primary, #e1e1e1); }
|
|
|
|
.cd-root { padding: 1.5rem; max-width: 1400px; margin: 0 auto; }
|
|
|
|
.cd-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
|
|
.cd-header h2 { margin: 0; font-size: 1.4rem; font-weight: 600; }
|
|
.cd-header__subtitle { font-size: 0.85rem; color: var(--rs-text-muted, #888); margin-top: 0.25rem; }
|
|
|
|
.cd-btn {
|
|
border: none; border-radius: 6px; padding: 0.5rem 1rem; cursor: pointer;
|
|
font-size: 0.85rem; font-weight: 500; transition: background 0.15s;
|
|
}
|
|
.cd-btn--primary { background: var(--rs-primary, #3b82f6); color: #fff; }
|
|
.cd-btn--primary:hover { background: var(--rs-primary-hover, #2563eb); }
|
|
.cd-btn--wizard {
|
|
background: linear-gradient(135deg, var(--rs-accent, #14b8a6), #0d9488);
|
|
color: #fff; font-weight: 600;
|
|
}
|
|
.cd-btn--wizard:hover { opacity: 0.9; }
|
|
.cd-header__actions { display: flex; gap: 0.5rem; align-items: center; }
|
|
|
|
.cd-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.cd-card {
|
|
background: var(--rs-bg-surface, #1e1e2e); border: 1px solid var(--rs-border, #333); border-radius: 10px;
|
|
overflow: hidden; cursor: pointer; transition: border-color 0.15s, transform 0.15s;
|
|
}
|
|
.cd-card:hover { border-color: var(--rs-primary, #3b82f6); transform: translateY(-2px); }
|
|
|
|
.cd-card__preview {
|
|
height: 160px; background: var(--rs-bg-surface-sunken, #14141e); display: flex; align-items: center; justify-content: center;
|
|
border-bottom: 1px solid var(--rs-border, #333); padding: 0.5rem;
|
|
}
|
|
.cd-card__svg { width: 100%; height: 100%; }
|
|
|
|
.cd-card__info { padding: 0.75rem 1rem; }
|
|
.cd-card__name { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
|
|
.cd-card__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.35rem; }
|
|
.cd-badge {
|
|
font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 99px;
|
|
font-weight: 500; text-transform: capitalize;
|
|
}
|
|
.cd-badge--nodes { background: rgba(59, 130, 246, 0.15); color: var(--rs-primary, #93c5fd); }
|
|
.cd-badge--posts { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
|
|
.cd-badge--platforms { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
|
|
|
|
.cd-card__date { font-size: 0.75rem; color: var(--rs-text-muted, #888); }
|
|
|
|
.cd-empty {
|
|
text-align: center; padding: 4rem 2rem;
|
|
background: var(--rs-bg-surface, #1e1e2e); border: 1px dashed var(--rs-border, #444); border-radius: 10px;
|
|
}
|
|
.cd-empty__icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
|
|
.cd-empty__title { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.35rem; }
|
|
.cd-empty__subtitle { color: var(--rs-text-muted, #888); margin-bottom: 1.25rem; }
|
|
.cd-btn--new-empty { font-size: 0.95rem; padding: 0.6rem 1.5rem; }
|
|
|
|
.cd-loading { text-align: center; padding: 4rem; color: var(--rs-text-muted, #888); }
|
|
</style>
|
|
|
|
<div class="cd-root">
|
|
<div class="cd-header">
|
|
<div>
|
|
<h2>Campaigns</h2>
|
|
<div class="cd-header__subtitle">Plan, wire up, and schedule multi-platform campaigns</div>
|
|
</div>
|
|
<div class="cd-header__actions">
|
|
<button class="cd-btn cd-btn--wizard" id="btn-wizard">\uD83E\uDDD9 Campaign Wizard</button>
|
|
${!this.loading && this.flows.length > 0 ? '<button class="cd-btn cd-btn--primary" id="btn-new">+ New Campaign</button>' : ''}
|
|
<button style="padding:4px 10px;border-radius:6px;border:1px solid var(--rs-border);background:var(--rs-bg-surface);color:var(--rs-text-secondary);cursor:pointer;font-size:0.78rem;" id="btn-tour">Tour</button>
|
|
</div>
|
|
</div>
|
|
${loadingState}
|
|
${emptyState}
|
|
${!this.loading && this.flows.length > 0 ? `<div class="cd-grid">${cards}</div>` : ''}
|
|
</div>
|
|
`;
|
|
|
|
this._tour.renderOverlay();
|
|
this.attachListeners();
|
|
}
|
|
|
|
private attachListeners() {
|
|
this.shadow.querySelectorAll('.cd-card').forEach(card => {
|
|
card.addEventListener('click', () => {
|
|
const id = (card as HTMLElement).dataset.flowId;
|
|
if (id) this.navigateToFlow(id);
|
|
});
|
|
});
|
|
|
|
const btnNew = this.shadow.getElementById('btn-new');
|
|
if (btnNew) btnNew.addEventListener('click', () => this.createFlow());
|
|
|
|
const btnNewEmpty = this.shadow.querySelector('.cd-btn--new-empty:not(#btn-wizard-empty)');
|
|
if (btnNewEmpty) btnNewEmpty.addEventListener('click', () => this.createFlow());
|
|
|
|
const wizardUrl = `${this.basePath}campaign-wizard`;
|
|
const btnWizard = this.shadow.getElementById('btn-wizard');
|
|
if (btnWizard) btnWizard.addEventListener('click', () => { window.location.href = wizardUrl; });
|
|
const btnWizardEmpty = this.shadow.getElementById('btn-wizard-empty');
|
|
if (btnWizardEmpty) btnWizardEmpty.addEventListener('click', () => { window.location.href = wizardUrl; });
|
|
|
|
this.shadow.getElementById('btn-tour')?.addEventListener('click', () => this.startTour());
|
|
}
|
|
}
|
|
|
|
customElements.define('folk-campaigns-dashboard', FolkCampaignsDashboard);
|