marty/instantadpay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Visual downline tree on the Overview

Browse Source 
"Your line at a glance": YOU + three levels of member chips with connectors,
your qualified directs highlighted in gold, and "+ open" placeholders on levels
1-2 showing what's next. Loads from /api/my/line.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-07 08:38:15 -05:00
parent 0dbd99f69e
commit 42d0e15fea
3 changed files with 40 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/my.js
+21
View File
@@ -285,6 +285,26 @@
if (toast) { IAP.status(toast, kind); if (sound) playSound(sound); liveRefresh(); }
}
// visual line tree on the Overview: YOU + three levels, qualified directs in gold
async function loadLineTree(buyerCount) {
try {
const r = await (await fetch('/api/my/line')).json();
const el = $('lineTree'); if (!el) return;
const levels = r.levels || [];
const total = levels.reduce((n, L) => n + L.members.length, 0);
if ($('treeSub')) $('treeSub').textContent = total ? total + ' across 3 levels' : 'share your link to grow';
const chip = (m, q) => '<span class="lt-node' + (q ? ' qualified' : (m.email ? '' : ' deep')) + '" title="' + esc(m.name || 'member') + (q ? ' · qualified buyer' : '') + '">' + esc(String(m.name || 'M').replace(/^@/, '').slice(0, 12)) + '</span>';
const rowFor = lvl => {
const L = levels.find(x => x.level === lvl); const members = L ? L.members : [];
const qn = lvl === 1 ? (buyerCount || 0) : 0; // highlight your qualified directs
let html = members.map((m, i) => chip(m, i < qn)).join('');
if (lvl <= 2 && members.length < (lvl === 1 ? 2 : 4)) html += '<span class="lt-node open">+ open</span>';
if (!html) html = '<span class="lt-node open">+ open</span>';
return '<div class="lt-row"><span class="lt-cap">L' + lvl + '</span><div class="lt-nodes">' + html + '</div></div>';
};
el.innerHTML = '<div class="lt-top"><span class="lt-you">YOU</span></div><div class="lt-stem"></div>' + rowFor(1) + rowFor(2) + rowFor(3);
} catch (e) {}
}
async function loadDashboard() {
try {
const d = await (await fetch('/api/my/dashboard')).json();
@@ -321,6 +341,7 @@
if (d.sponsorMsg) showSponsorModal(d.sponsorMsg);
renderBadges(d);
loadFeatured();
loadLineTree(d.buyerCount || 0);
loadCharts(d);
$('nextMove').textContent = nextMove(d);
renderSteps(d);
public/assets/site.css
+13
View File
@@ -561,3 +561,16 @@ img{max-width:100%}
.chat-msg-btn{margin-left:auto;font-size:12px;padding:3px 10px}
.switch{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
.switch input{width:18px;height:18px;accent-color:var(--mint)}
/* ── Overview line tree ── */
.line-tree{margin-top:6px}
.lt-top{margin-left:26px}
.lt-you{display:inline-block;background:var(--mint);color:var(--mint-ink);font-weight:800;padding:6px 18px;border-radius:999px;font-size:13px}
.lt-stem{height:12px;border-left:2px solid var(--line-strong);width:0;margin:0 0 6px 30px}
.lt-row{display:flex;align-items:center;gap:10px;margin:7px 0}
.lt-cap{font:700 11px var(--mono);color:var(--muted);width:22px;flex:0 0 auto}
.lt-nodes{display:flex;gap:8px;flex-wrap:wrap}
.lt-node{background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;padding:6px 12px;font-size:13px;font-weight:600;white-space:nowrap}
.lt-node.deep{color:var(--muted)}
.lt-node.qualified{border-color:#ffb238;color:#ffd15c;box-shadow:0 0 0 1px rgba(255,177,56,.35)}
.lt-node.open{border-style:dashed;color:var(--muted);background:transparent}