Initial commit: Premier Gunner tracker + StartOS 0.4.0 s9pk package
This commit is contained in:
Keysat
@@ -0,0 +1,46 @@
|
||||
// Thin fetch wrapper. Redirects to login on 401.
|
||||
async function req(method, url, body) {
|
||||
const opts = { method, headers: {} };
|
||||
if (body !== undefined) {
|
||||
opts.headers['Content-Type'] = 'application/json';
|
||||
opts.body = JSON.stringify(body);
|
||||
}
|
||||
const res = await fetch(url, opts);
|
||||
if (res.status === 401 && !url.endsWith('/api/login')) {
|
||||
location.href = '/login.html';
|
||||
throw new Error('Not authenticated');
|
||||
}
|
||||
const data = res.headers.get('content-type')?.includes('application/json')
|
||||
? await res.json() : null;
|
||||
if (!res.ok) throw new Error((data && data.error) || `Request failed (${res.status})`);
|
||||
return data;
|
||||
}
|
||||
|
||||
export const api = {
|
||||
login: (password) => req('POST', '/api/login', { password }),
|
||||
logout: () => req('POST', '/api/logout'),
|
||||
me: () => req('GET', '/api/me'),
|
||||
setPassword: (current, next) => req('POST', '/api/password', { current, next }),
|
||||
|
||||
categories: (all = false) => req('GET', `/api/categories${all ? '?all=1' : ''}`),
|
||||
addCategory: (c) => req('POST', '/api/categories', c),
|
||||
updateCategory: (id, c) => req('PUT', `/api/categories/${id}`, c),
|
||||
addMetric: (catId, m) => req('POST', `/api/categories/${catId}/metrics`, m),
|
||||
deleteMetric: (id) => req('DELETE', `/api/metrics/${id}`),
|
||||
|
||||
day: (day) => req('GET', `/api/day/${day}`),
|
||||
logEntry: (e) => req('POST', '/api/entries', e),
|
||||
deleteEntry: (id) => req('DELETE', `/api/entries/${id}`),
|
||||
saveNotes: (day, notes) => req('PUT', `/api/day/${day}/notes`, { notes }),
|
||||
|
||||
plans: (from, to) => req('GET', `/api/plans?from=${from}&to=${to}`),
|
||||
addPlan: (p) => req('POST', '/api/plans', p),
|
||||
deletePlan: (id) => req('DELETE', `/api/plans/${id}`),
|
||||
|
||||
goals: () => req('GET', '/api/goals'),
|
||||
addGoal: (g) => req('POST', '/api/goals', g),
|
||||
updateGoal: (id, g) => req('PUT', `/api/goals/${id}`, g),
|
||||
deleteGoal: (id) => req('DELETE', `/api/goals/${id}`),
|
||||
|
||||
stats: () => req('GET', '/api/stats'),
|
||||
};
|
||||
@@ -0,0 +1,366 @@
|
||||
import { api } from '/js/api.js';
|
||||
import { renderStats } from '/js/dashboard.js';
|
||||
|
||||
// ---------- tiny DOM + date helpers ----------
|
||||
export const h = (tag, attrs = {}, ...kids) => {
|
||||
const e = document.createElement(tag);
|
||||
for (const [k, v] of Object.entries(attrs)) {
|
||||
if (k === 'class') e.className = v;
|
||||
else if (k === 'html') e.innerHTML = v;
|
||||
else if (k.startsWith('on') && typeof v === 'function') e.addEventListener(k.slice(2), v);
|
||||
else if (v === true) e.setAttribute(k, '');
|
||||
else if (v !== false && v != null) e.setAttribute(k, v);
|
||||
}
|
||||
for (const kid of kids.flat()) {
|
||||
if (kid == null || kid === false) continue;
|
||||
e.append(kid.nodeType ? kid : document.createTextNode(kid));
|
||||
}
|
||||
return e;
|
||||
};
|
||||
|
||||
const pad = (n) => String(n).padStart(2, '0');
|
||||
export const isoOf = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
|
||||
export const todayISO = () => isoOf(new Date());
|
||||
export const parseISO = (s) => { const [y, m, d] = s.split('-').map(Number); return new Date(y, m - 1, d); };
|
||||
export const addDays = (iso, n) => { const d = parseISO(iso); d.setDate(d.getDate() + n); return isoOf(d); };
|
||||
const WEEK = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
||||
const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
export const prettyDay = (iso) => {
|
||||
const d = parseISO(iso); const t = todayISO();
|
||||
if (iso === t) return `Today · ${WEEK[d.getDay()]} ${MON[d.getMonth()]} ${d.getDate()}`;
|
||||
if (iso === addDays(t, -1)) return `Yesterday · ${MON[d.getMonth()]} ${d.getDate()}`;
|
||||
if (iso === addDays(t, 1)) return `Tomorrow · ${MON[d.getMonth()]} ${d.getDate()}`;
|
||||
return `${WEEK[d.getDay()]} · ${MON[d.getMonth()]} ${d.getDate()}`;
|
||||
};
|
||||
|
||||
export function toast(msg) {
|
||||
document.querySelector('.toast')?.remove();
|
||||
const t = h('div', { class: 'toast' }, msg);
|
||||
document.body.append(t);
|
||||
setTimeout(() => t.remove(), 1900);
|
||||
}
|
||||
|
||||
const modalRoot = document.getElementById('modal-root');
|
||||
export function openModal(title, contentEl, { onClose } = {}) {
|
||||
closeModal();
|
||||
const close = () => { modalRoot.innerHTML = ''; onClose?.(); };
|
||||
const backdrop = h('div', { class: 'modal-backdrop', onclick: (e) => { if (e.target === backdrop) close(); } },
|
||||
h('div', { class: 'modal' },
|
||||
h('h2', {}, title, h('button', { class: 'close', onclick: close }, '✕')),
|
||||
contentEl));
|
||||
modalRoot.append(backdrop);
|
||||
return close;
|
||||
}
|
||||
export const closeModal = () => { modalRoot.innerHTML = ''; };
|
||||
|
||||
const textColorFor = (hex) => {
|
||||
const c = hex.replace('#', '');
|
||||
const r = parseInt(c.substr(0, 2), 16), g = parseInt(c.substr(2, 2), 16), b = parseInt(c.substr(4, 2), 16);
|
||||
return (r * 299 + g * 587 + b * 114) / 1000 > 150 ? '#15181f' : '#fff';
|
||||
};
|
||||
|
||||
// ---------- state ----------
|
||||
const state = { categories: [], day: todayISO(), tab: 'today' };
|
||||
const catById = (id) => state.categories.find((c) => c.id === id);
|
||||
|
||||
async function loadCategories() { state.categories = await api.categories(); }
|
||||
|
||||
// ---------- TODAY (logging) ----------
|
||||
async function renderToday(view) {
|
||||
const data = await api.day(state.day);
|
||||
const loggedCatIds = new Set(data.entries.map((e) => e.category_id));
|
||||
const plannedIds = new Set(data.plans.map((p) => p.category_id));
|
||||
|
||||
view.innerHTML = '';
|
||||
view.append(
|
||||
h('div', { class: 'datenav' },
|
||||
h('button', { onclick: () => { state.day = addDays(state.day, -1); renderToday(view); } }, '‹'),
|
||||
h('div', { class: 'day-label' }, prettyDay(state.day)),
|
||||
h('button', { onclick: () => { state.day = addDays(state.day, 1); renderToday(view); } }, '›')));
|
||||
|
||||
if (plannedIds.size) {
|
||||
view.append(h('div', { class: 'card' },
|
||||
h('h2', {}, '🗓️ Today\'s plan'),
|
||||
h('div', { class: 'pill-grid' },
|
||||
[...plannedIds].map((id) => {
|
||||
const c = catById(id); if (!c) return null;
|
||||
return h('span', { class: 'pill' + (loggedCatIds.has(id) ? ' done' : '') },
|
||||
h('span', { class: 'emoji' }, c.emoji), c.name, loggedCatIds.has(id) ? ' ✅' : '');
|
||||
}))));
|
||||
}
|
||||
|
||||
view.append(h('div', { class: 'card' },
|
||||
h('h2', {}, '⚽ What did you train?'),
|
||||
h('p', { class: 'muted small' }, 'Tap a category to log it.'),
|
||||
h('div', { class: 'pill-grid' },
|
||||
state.categories.map((c) => {
|
||||
const done = loggedCatIds.has(c.id);
|
||||
const style = `background:${c.color};border-color:${c.color};color:${textColorFor(c.color)}`;
|
||||
return h('button', {
|
||||
class: 'pill' + (done ? ' done' : ''),
|
||||
style: done ? style : '',
|
||||
onclick: () => openLogModal(c, view),
|
||||
}, h('span', { class: 'emoji' }, c.emoji), c.name, done ? ' ✅' : '');
|
||||
}))));
|
||||
|
||||
// Logged entries for the day
|
||||
const log = h('div', { class: 'card' }, h('h2', {}, '✅ Logged'));
|
||||
if (!data.entries.length) {
|
||||
log.append(h('p', { class: 'muted' }, 'Nothing yet — tap a category above to start!'));
|
||||
} else {
|
||||
for (const e of data.entries) {
|
||||
const c = catById(e.category_id) || { emoji: '⚽', name: 'Category', metrics: [] };
|
||||
const valStr = e.values.map((v) => {
|
||||
const m = c.metrics?.find((mm) => mm.id === v.metric_id);
|
||||
return m ? `${v.value} ${m.unit || m.name}` : v.value;
|
||||
}).join(' · ');
|
||||
log.append(h('div', { class: 'entry' },
|
||||
h('span', { class: 'emoji' }, c.emoji),
|
||||
h('div', { style: 'flex:1' }, h('div', {}, c.name), valStr && h('div', { class: 'vals' }, valStr)),
|
||||
h('button', { class: 'btn-danger', onclick: async () => { await api.deleteEntry(e.id); renderToday(view); refreshStatsIfActive(); } }, '🗑')));
|
||||
}
|
||||
}
|
||||
view.append(log);
|
||||
|
||||
// Daily notes
|
||||
const ta = h('textarea', { rows: 3, placeholder: 'Notes, thoughts, things to remember…' }, data.notes || '');
|
||||
view.append(h('div', { class: 'card' },
|
||||
h('h2', {}, '📝 Notes for the day'),
|
||||
ta,
|
||||
h('div', { class: 'btn-row' },
|
||||
h('button', { class: 'btn-primary', onclick: async () => { await api.saveNotes(state.day, ta.value); toast('Notes saved'); } }, 'Save notes'))));
|
||||
}
|
||||
|
||||
function openLogModal(cat, view) {
|
||||
const metrics = cat.metrics || [];
|
||||
const values = {};
|
||||
const body = h('div', {});
|
||||
body.append(h('p', { class: 'muted' }, `${cat.emoji} ${cat.name}`));
|
||||
if (!metrics.length) body.append(h('p', { class: 'muted small' }, 'No metrics — this just logs a session.'));
|
||||
for (const m of metrics) {
|
||||
values[m.id] = 0;
|
||||
const valEl = h('span', { class: 'val' }, '0');
|
||||
const set = (n) => { values[m.id] = Math.max(0, n); valEl.textContent = values[m.id]; };
|
||||
body.append(h('div', { class: 'metric' },
|
||||
h('label', {}, m.name),
|
||||
h('div', { class: 'stepper' },
|
||||
h('button', { onclick: () => set(values[m.id] - (m.step || 1)) }, '−'),
|
||||
valEl,
|
||||
h('button', { onclick: () => set(values[m.id] + (m.step || 1)) }, '+'),
|
||||
h('span', { class: 'unit' }, m.unit || ''))));
|
||||
}
|
||||
body.append(h('div', { class: 'btn-row' },
|
||||
h('button', { class: 'btn-primary big', onclick: async () => {
|
||||
await api.logEntry({
|
||||
day: state.day, category_id: cat.id,
|
||||
values: metrics.map((m) => ({ metric_id: m.id, value: values[m.id] })),
|
||||
});
|
||||
closeModal();
|
||||
toast(`${cat.emoji} ${cat.name} logged!`);
|
||||
renderToday(view);
|
||||
refreshStatsIfActive();
|
||||
} }, 'Log it! 🎉')));
|
||||
openModal(`Log ${cat.name}`, body);
|
||||
}
|
||||
|
||||
// ---------- PLAN ----------
|
||||
async function renderPlan(view) {
|
||||
const from = todayISO(); const to = addDays(from, 13);
|
||||
const plans = await api.plans(from, to);
|
||||
const byDay = {};
|
||||
for (const p of plans) (byDay[p.day] ||= []).push(p);
|
||||
|
||||
view.innerHTML = '';
|
||||
view.append(h('div', { class: 'card' },
|
||||
h('h2', {}, '🗓️ Plan your week'),
|
||||
h('p', { class: 'muted small' }, 'Pick what to work on each day. You can always change your mind!')));
|
||||
|
||||
for (let i = 0; i < 14; i++) {
|
||||
const day = addDays(from, i);
|
||||
const dayPlans = byDay[day] || [];
|
||||
const plannedIds = new Set(dayPlans.map((p) => p.category_id));
|
||||
view.append(h('div', { class: 'card' },
|
||||
h('div', { class: 'row spread' },
|
||||
h('strong', {}, prettyDay(day)),
|
||||
h('span', { class: 'badge' }, `${plannedIds.size} planned`)),
|
||||
h('div', { class: 'pill-grid', style: 'margin-top:10px' },
|
||||
state.categories.map((c) => {
|
||||
const on = plannedIds.has(c.id);
|
||||
const style = on ? `background:${c.color};border-color:${c.color};color:${textColorFor(c.color)}` : '';
|
||||
return h('button', { class: 'pill' + (on ? ' selected' : ''), style, onclick: async () => {
|
||||
if (on) {
|
||||
const p = dayPlans.find((x) => x.category_id === c.id);
|
||||
await api.deletePlan(p.id);
|
||||
} else {
|
||||
await api.addPlan({ day, category_id: c.id });
|
||||
}
|
||||
renderPlan(view);
|
||||
} }, h('span', { class: 'emoji' }, c.emoji), c.name);
|
||||
}))));
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- GOALS ----------
|
||||
async function renderGoals(view) {
|
||||
const stats = await api.stats();
|
||||
view.innerHTML = '';
|
||||
view.append(h('div', { class: 'row spread' },
|
||||
h('h2', {}, '🏆 Goals'),
|
||||
h('button', { class: 'btn-primary', onclick: () => openGoalModal(view) }, '+ New goal')));
|
||||
|
||||
if (!stats.goals.length) {
|
||||
view.append(h('div', { class: 'empty' }, h('span', { class: 'big-emoji' }, '🎯'), 'No goals yet. Add one to chase!'));
|
||||
return;
|
||||
}
|
||||
for (const g of stats.goals) {
|
||||
view.append(goalCard(g, view));
|
||||
}
|
||||
}
|
||||
|
||||
function goalCard(g, view) {
|
||||
const done = g.pct >= 100;
|
||||
const catName = g.category_id ? (catById(g.category_id)?.name || '') : 'Overall';
|
||||
return h('div', { class: 'card goal' },
|
||||
h('div', { class: 'top' },
|
||||
h('span', { class: 'label' }, (g.is_main ? '⭐ ' : '') + (g.label || catName)),
|
||||
h('span', { class: 'muted small' }, `${Math.round(g.current)} / ${g.target}`)),
|
||||
h('div', { class: 'muted small' }, `${catName} · ${kindLabel(g.kind)}${g.reward ? ' · 🎁 ' + g.reward : ''}`),
|
||||
h('div', { class: 'bar' + (done ? ' done' : '') }, h('span', { style: `width:${g.pct}%` })),
|
||||
h('div', { class: 'btn-row' },
|
||||
h('button', { class: 'btn-danger', onclick: async () => { if (confirm('Delete this goal?')) { await api.deleteGoal(g.id); renderGoals(view); } } }, 'Delete')));
|
||||
}
|
||||
|
||||
const kindLabel = (k) => ({ session_count: 'Times trained', metric_best: 'Personal best', metric_total: 'Total amount' }[k] || k);
|
||||
|
||||
function openGoalModal(view) {
|
||||
const body = h('div', {});
|
||||
const labelIn = h('input', { placeholder: 'Goal name (e.g. Juggle 100 in a row)' });
|
||||
const scopeSel = h('select', {}, h('option', { value: 'category' }, 'A category'), h('option', { value: 'overall' }, 'Overall (all training)'));
|
||||
const catSel = h('select', {}, state.categories.map((c) => h('option', { value: c.id }, `${c.emoji} ${c.name}`)));
|
||||
const kindSel = h('select', {},
|
||||
h('option', { value: 'session_count' }, 'Number of times trained'),
|
||||
h('option', { value: 'metric_best' }, 'Personal best (one session)'),
|
||||
h('option', { value: 'metric_total' }, 'Total added up'));
|
||||
const metricSel = h('select', {});
|
||||
const targetIn = h('input', { type: 'number', min: '1', placeholder: 'Target number' });
|
||||
const rewardIn = h('input', { placeholder: 'Reward (optional)' });
|
||||
const mainChk = h('input', { type: 'checkbox' });
|
||||
|
||||
const catField = h('div', { class: 'field' }, h('label', {}, 'Category'), catSel);
|
||||
const metricField = h('div', { class: 'field' }, h('label', {}, 'Which metric?'), metricSel);
|
||||
|
||||
const refreshMetrics = () => {
|
||||
const c = catById(Number(catSel.value));
|
||||
metricSel.innerHTML = '';
|
||||
(c?.metrics || []).forEach((m) => metricSel.append(h('option', { value: m.id }, `${m.name} (${m.unit || ''})`)));
|
||||
};
|
||||
const refreshVis = () => {
|
||||
catField.style.display = scopeSel.value === 'category' ? '' : 'none';
|
||||
const needMetric = kindSel.value !== 'session_count' && scopeSel.value === 'category';
|
||||
metricField.style.display = needMetric ? '' : 'none';
|
||||
if (scopeSel.value === 'overall') kindSel.value = 'session_count';
|
||||
};
|
||||
scopeSel.addEventListener('change', refreshVis);
|
||||
kindSel.addEventListener('change', refreshVis);
|
||||
catSel.addEventListener('change', refreshMetrics);
|
||||
refreshMetrics(); refreshVis();
|
||||
|
||||
body.append(
|
||||
h('div', { class: 'field' }, h('label', {}, 'Goal name'), labelIn),
|
||||
h('div', { class: 'field' }, h('label', {}, 'Track…'), scopeSel),
|
||||
catField,
|
||||
h('div', { class: 'field' }, h('label', {}, 'Goal type'), kindSel),
|
||||
metricField,
|
||||
h('div', { class: 'field' }, h('label', {}, 'Target'), targetIn),
|
||||
h('div', { class: 'field' }, h('label', {}, 'Reward'), rewardIn),
|
||||
h('label', { class: 'row', style: 'gap:10px' }, mainChk, ' Make this the ⭐ main goal (thermometer)'),
|
||||
h('div', { class: 'btn-row' },
|
||||
h('button', { class: 'btn-primary big', onclick: async () => {
|
||||
const payload = {
|
||||
label: labelIn.value, scope: scopeSel.value, kind: kindSel.value,
|
||||
target: Number(targetIn.value), reward: rewardIn.value, is_main: mainChk.checked,
|
||||
};
|
||||
if (scopeSel.value === 'category') payload.category_id = Number(catSel.value);
|
||||
if (kindSel.value !== 'session_count') payload.metric_id = Number(metricSel.value);
|
||||
try { await api.addGoal(payload); closeModal(); renderGoals(view); toast('Goal added 🏆'); }
|
||||
catch (e) { alert(e.message); }
|
||||
} }, 'Save goal')));
|
||||
openModal('New goal', body);
|
||||
}
|
||||
|
||||
// ---------- SETTINGS ----------
|
||||
function openSettings() {
|
||||
const body = h('div', {});
|
||||
body.append(h('h3', {}, 'Categories'));
|
||||
const list = h('div', {});
|
||||
const renderList = () => {
|
||||
list.innerHTML = '';
|
||||
for (const c of state.categories) {
|
||||
list.append(h('div', { class: 'entry' },
|
||||
h('span', { class: 'emoji' }, c.emoji),
|
||||
h('div', { style: 'flex:1' }, c.name,
|
||||
h('div', { class: 'vals' }, (c.metrics || []).map((m) => m.name).join(', '))),
|
||||
h('button', { class: 'btn-danger', onclick: async () => { await api.updateCategory(c.id, { archived: 1 }); await loadCategories(); renderList(); refreshActive(); } }, 'Archive')));
|
||||
}
|
||||
};
|
||||
renderList();
|
||||
body.append(list);
|
||||
|
||||
// Add category form
|
||||
const nameIn = h('input', { placeholder: 'New category name' });
|
||||
const emojiIn = h('input', { placeholder: 'Emoji', value: '⚽', maxlength: '4', style: 'max-width:90px' });
|
||||
const colorIn = h('input', { type: 'color', value: '#EF0107', style: 'max-width:60px;height:48px;padding:4px' });
|
||||
const metricName = h('input', { placeholder: 'Metric (e.g. Minutes)', value: 'Minutes' });
|
||||
const metricKind = h('select', {}, h('option', { value: 'duration' }, 'Time'), h('option', { value: 'count' }, 'Count'), h('option', { value: 'score' }, 'Score'));
|
||||
body.append(h('div', { class: 'card', style: 'margin-top:16px' },
|
||||
h('h3', {}, '➕ Add a category'),
|
||||
h('div', { class: 'field' }, h('label', {}, 'Name'), nameIn),
|
||||
h('div', { class: 'row', style: 'gap:10px' }, emojiIn, colorIn),
|
||||
h('div', { class: 'field', style: 'margin-top:10px' }, h('label', {}, 'First metric'), h('div', { class: 'row', style: 'gap:10px' }, metricName, metricKind)),
|
||||
h('button', { class: 'btn-primary', onclick: async () => {
|
||||
if (!nameIn.value.trim()) return alert('Enter a name');
|
||||
await api.addCategory({ name: nameIn.value.trim(), emoji: emojiIn.value || '⚽', color: colorIn.value,
|
||||
metrics: [{ name: metricName.value || 'Value', unit: metricKind.value === 'duration' ? 'min' : '', kind: metricKind.value, step: metricKind.value === 'duration' ? 5 : 1 }] });
|
||||
await loadCategories(); renderList(); nameIn.value = ''; refreshActive(); toast('Category added');
|
||||
} }, 'Add category')));
|
||||
|
||||
// Password change
|
||||
const cur = h('input', { type: 'password', placeholder: 'Current password' });
|
||||
const nxt = h('input', { type: 'password', placeholder: 'New password' });
|
||||
body.append(h('div', { class: 'card' },
|
||||
h('h3', {}, '🔒 Change password'),
|
||||
h('div', { class: 'field' }, cur), h('div', { class: 'field' }, nxt),
|
||||
h('button', { class: 'btn-ghost', onclick: async () => {
|
||||
try { await api.setPassword(cur.value, nxt.value); toast('Password changed'); cur.value = nxt.value = ''; }
|
||||
catch (e) { alert(e.message); }
|
||||
} }, 'Update password')));
|
||||
|
||||
body.append(h('button', { class: 'btn-danger', style: 'margin-top:8px', onclick: async () => { await api.logout(); location.href = '/login.html'; } }, 'Log out'));
|
||||
openModal('⚙️ Settings', body, { onClose: refreshActive });
|
||||
}
|
||||
|
||||
// ---------- router ----------
|
||||
function refreshActive() { switchTab(state.tab); }
|
||||
function refreshStatsIfActive() { if (state.tab === 'stats') switchTab('stats'); }
|
||||
|
||||
const view = document.getElementById('view');
|
||||
function switchTab(tab) {
|
||||
state.tab = tab;
|
||||
document.querySelectorAll('.tab').forEach((t) => t.classList.toggle('active', t.dataset.tab === tab));
|
||||
view.innerHTML = '<p class="muted center">Loading…</p>';
|
||||
if (tab === 'today') renderToday(view);
|
||||
else if (tab === 'plan') renderPlan(view);
|
||||
else if (tab === 'stats') renderStats(view, { catById });
|
||||
else if (tab === 'goals') renderGoals(view);
|
||||
}
|
||||
|
||||
document.querySelectorAll('.tab').forEach((t) => t.addEventListener('click', () => switchTab(t.dataset.tab)));
|
||||
document.getElementById('settings-btn').addEventListener('click', openSettings);
|
||||
|
||||
// ---------- boot ----------
|
||||
(async () => {
|
||||
try { await api.me(); } catch { return; }
|
||||
await loadCategories();
|
||||
switchTab('today');
|
||||
if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js').catch(() => {});
|
||||
})();
|
||||
@@ -0,0 +1,172 @@
|
||||
import { api } from '/js/api.js';
|
||||
import { h, parseISO, isoOf, todayISO } from '/js/app.js';
|
||||
|
||||
let radarChart = null;
|
||||
let lineChart = null;
|
||||
|
||||
const RED = '#EF0107';
|
||||
|
||||
export async function renderStats(view, { catById }) {
|
||||
const stats = await api.stats();
|
||||
if (radarChart) { radarChart.destroy(); radarChart = null; }
|
||||
if (lineChart) { lineChart.destroy(); lineChart = null; }
|
||||
view.innerHTML = '';
|
||||
|
||||
// ---- top numbers ----
|
||||
view.append(h('div', { class: 'stat-grid' },
|
||||
stat(stats.totalSessions, 'Sessions'),
|
||||
stat(stats.totalDays, 'Training days'),
|
||||
stat(`${stats.current}🔥`, 'Day streak'),
|
||||
stat(stats.longest, 'Best streak')));
|
||||
|
||||
// ---- main goal thermometer ----
|
||||
const main = stats.goals.find((g) => g.is_main);
|
||||
if (main) view.append(thermometer(main));
|
||||
|
||||
// ---- heatmap ----
|
||||
view.append(h('div', { class: 'card' },
|
||||
h('h2', {}, '🔥 Training calendar'),
|
||||
h('div', { class: 'heatmap' }, heatmapSvg(stats.heatmap)),
|
||||
h('p', { class: 'muted small' }, 'Each square is a day. Brighter red = more training!')));
|
||||
|
||||
// ---- radar ----
|
||||
const radarData = stats.radar.filter((r) => true);
|
||||
if (radarData.length >= 3) {
|
||||
const canvas = h('canvas', { height: 280 });
|
||||
view.append(h('div', { class: 'card' }, h('h2', {}, '🕸️ Training spread'), canvas));
|
||||
radarChart = new Chart(canvas, {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: radarData.map((r) => r.name),
|
||||
datasets: [{
|
||||
label: 'Sessions', data: radarData.map((r) => r.sessions),
|
||||
backgroundColor: 'rgba(239,1,7,.18)', borderColor: RED, borderWidth: 2,
|
||||
pointBackgroundColor: RED,
|
||||
}],
|
||||
},
|
||||
options: {
|
||||
plugins: { legend: { display: false } },
|
||||
scales: { r: { beginAtZero: true, ticks: { precision: 0 }, pointLabels: { font: { size: 11 } } } },
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// ---- line chart with metric picker ----
|
||||
const metrics = [];
|
||||
for (const c of stats.radar.map((r) => catById(r.category_id)).filter(Boolean)) {
|
||||
for (const m of c.metrics || []) {
|
||||
if (stats.series[m.id]?.length) metrics.push({ ...m, catName: c.name, emoji: c.emoji });
|
||||
}
|
||||
}
|
||||
if (metrics.length) {
|
||||
const sel = h('select', {}, metrics.map((m) => h('option', { value: m.id }, `${m.emoji} ${m.catName} — ${m.name}`)));
|
||||
const canvas = h('canvas', { height: 260 });
|
||||
const draw = () => {
|
||||
const m = metrics.find((x) => x.id === Number(sel.value));
|
||||
const pts = stats.series[m.id] || [];
|
||||
if (lineChart) lineChart.destroy();
|
||||
lineChart = new Chart(canvas, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: pts.map((p) => p.day.slice(5)),
|
||||
datasets: [{
|
||||
label: `${m.name}${m.unit ? ' (' + m.unit + ')' : ''}`,
|
||||
data: pts.map((p) => p.value),
|
||||
borderColor: RED, backgroundColor: 'rgba(239,1,7,.12)',
|
||||
fill: true, tension: .3, pointRadius: 4, pointBackgroundColor: RED,
|
||||
}],
|
||||
},
|
||||
options: { plugins: { legend: { display: true } }, scales: { y: { beginAtZero: true } } },
|
||||
});
|
||||
};
|
||||
sel.addEventListener('change', draw);
|
||||
view.append(h('div', { class: 'card' },
|
||||
h('h2', {}, '📈 Improvement over time'),
|
||||
h('div', { class: 'field' }, sel),
|
||||
canvas));
|
||||
draw();
|
||||
}
|
||||
|
||||
// ---- all goals ----
|
||||
if (stats.goals.length) {
|
||||
const card = h('div', { class: 'card' }, h('h2', {}, '🏆 Goal progress'));
|
||||
for (const g of stats.goals) {
|
||||
const done = g.pct >= 100;
|
||||
const catName = g.category_id ? (catById(g.category_id)?.name || '') : 'Overall';
|
||||
card.append(h('div', { class: 'goal' },
|
||||
h('div', { class: 'top' },
|
||||
h('span', { class: 'label' }, (g.is_main ? '⭐ ' : '') + (g.label || catName)),
|
||||
h('span', { class: 'muted small' }, `${Math.round(g.current)} / ${g.target} (${g.pct}%)`)),
|
||||
h('div', { class: 'bar' + (done ? ' done' : '') }, h('span', { style: `width:${g.pct}%` }))));
|
||||
}
|
||||
view.append(card);
|
||||
}
|
||||
}
|
||||
|
||||
const stat = (num, lbl) => h('div', { class: 'stat' }, h('div', { class: 'num' }, String(num)), h('div', { class: 'lbl' }, lbl));
|
||||
|
||||
function thermometer(g) {
|
||||
const pct = g.pct;
|
||||
const tubeH = 180, fillH = Math.round((tubeH - 8) * pct / 100);
|
||||
const svgNS = 'http://www.w3.org/2000/svg';
|
||||
const svg = document.createElementNS(svgNS, 'svg');
|
||||
svg.setAttribute('viewBox', '0 0 46 200'); svg.setAttribute('width', '46'); svg.setAttribute('height', '200');
|
||||
svg.innerHTML = `
|
||||
<rect x="14" y="6" width="18" height="${tubeH}" rx="9" fill="#f0f0f0" stroke="#ddd"/>
|
||||
<rect x="14" y="${6 + (tubeH - 4 - fillH)}" width="18" height="${fillH + 4}" rx="9" fill="${RED}"/>
|
||||
<circle cx="23" cy="188" r="14" fill="${RED}"/>
|
||||
<circle cx="23" cy="188" r="7" fill="#fff" opacity=".35"/>`;
|
||||
return h('div', { class: 'card' },
|
||||
h('h2', {}, '✈️ ' + (g.label || 'Main goal')),
|
||||
h('div', { class: 'thermo-wrap' },
|
||||
svg,
|
||||
h('div', { class: 'reward' },
|
||||
h('div', { class: 'pct' }, `${pct}%`),
|
||||
h('div', {}, `${Math.round(g.current)} of ${g.target}`),
|
||||
g.reward && h('p', { class: 'muted', style: 'margin-top:8px' }, '🎁 ' + g.reward))));
|
||||
}
|
||||
|
||||
function heatmapSvg(rows) {
|
||||
const counts = new Map(rows.map((r) => [r.day, r.count]));
|
||||
const max = Math.max(1, ...rows.map((r) => r.count));
|
||||
const weeks = 27, cell = 14, gap = 3;
|
||||
const end = parseISO(todayISO());
|
||||
const start = new Date(end); start.setDate(start.getDate() - weeks * 7);
|
||||
// back up to Sunday
|
||||
start.setDate(start.getDate() - start.getDay());
|
||||
|
||||
const shade = (n) => {
|
||||
if (!n) return '#ebedf3';
|
||||
const t = n / max; // 0..1
|
||||
const light = 88 - Math.round(t * 50); // 88% -> 38%
|
||||
return `hsl(2 90% ${light}%)`;
|
||||
};
|
||||
|
||||
const svgNS = 'http://www.w3.org/2000/svg';
|
||||
const w = weeks * (cell + gap) + 24, hgt = 7 * (cell + gap) + 16;
|
||||
const svg = document.createElementNS(svgNS, 'svg');
|
||||
svg.setAttribute('viewBox', `0 0 ${w} ${hgt}`);
|
||||
svg.setAttribute('width', w); svg.setAttribute('height', hgt);
|
||||
|
||||
let parts = '';
|
||||
const MON = ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'];
|
||||
const d = new Date(start);
|
||||
let lastMonth = -1;
|
||||
for (let col = 0; col <= weeks; col++) {
|
||||
for (let r = 0; r < 7; r++) {
|
||||
const iso = isoOf(d);
|
||||
if (d <= end) {
|
||||
const x = col * (cell + gap);
|
||||
const y = r * (cell + gap) + 12;
|
||||
parts += `<rect class="heat-cell" x="${x}" y="${y}" width="${cell}" height="${cell}" rx="3" fill="${shade(counts.get(iso) || 0)}"><title>${iso}: ${counts.get(iso) || 0}</title></rect>`;
|
||||
if (r === 0 && d.getMonth() !== lastMonth) {
|
||||
parts += `<text x="${x}" y="8" font-size="9" fill="#9aa3b2">${MON[d.getMonth()]}</text>`;
|
||||
lastMonth = d.getMonth();
|
||||
}
|
||||
}
|
||||
d.setDate(d.getDate() + 1);
|
||||
}
|
||||
}
|
||||
svg.innerHTML = parts;
|
||||
return svg;
|
||||
}
|
||||
Reference in New Issue
Block a user