Add Telegram Mini App (web UI + API server + localtunnel)
- server.py: aiohttp API serving webapp/ and REST endpoints using existing db.py - start.py: orchestrator that loads token, starts server + localtunnel + bot - webapp/: Mini App frontend (Log, History, Stats) with Telegram-native theming - bot.py: added Mini App menu button and inline button on /start - flake.nix: added aiohttp + localtunnel, nix run now uses start.py
This commit is contained in:
Danny
parent
817cf8fd95
commit
f025e5fd19
7 changed files with 1007 additions and 12 deletions
242
webapp/app.js
Normal file
242
webapp/app.js
Normal file
|
|
@ -0,0 +1,242 @@
|
|||
// ── Telegram Web App init ───────────────────────────────────────
|
||||
const tg = window.Telegram.WebApp;
|
||||
tg.ready();
|
||||
tg.expand();
|
||||
|
||||
const API = window.location.origin + "/api";
|
||||
const userId = tg.initDataUnsafe?.user?.id;
|
||||
|
||||
if (!userId) {
|
||||
document.getElementById("app").innerHTML =
|
||||
'<div class="empty-state"><p>Please open this app from Telegram.</p></div>';
|
||||
}
|
||||
|
||||
// ── API helpers ─────────────────────────────────────────────────
|
||||
async function api(method, path, body = null) {
|
||||
const opts = {
|
||||
method,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-Telegram-Init-Data": tg.initData,
|
||||
},
|
||||
};
|
||||
if (body) opts.body = JSON.stringify(body);
|
||||
const res = await fetch(API + path, opts);
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({}));
|
||||
throw new Error(err.error || `API error ${res.status}`);
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
// ── Toast ───────────────────────────────────────────────────────
|
||||
function showToast(msg) {
|
||||
let toast = document.querySelector(".toast");
|
||||
if (!toast) {
|
||||
toast = document.createElement("div");
|
||||
toast.className = "toast";
|
||||
document.body.appendChild(toast);
|
||||
}
|
||||
toast.textContent = msg;
|
||||
toast.classList.add("show");
|
||||
setTimeout(() => toast.classList.remove("show"), 2000);
|
||||
}
|
||||
|
||||
// ── Tab navigation ──────────────────────────────────────────────
|
||||
document.querySelectorAll(".tab").forEach((tab) => {
|
||||
tab.addEventListener("click", () => {
|
||||
document.querySelectorAll(".tab").forEach((t) => t.classList.remove("active"));
|
||||
document.querySelectorAll(".view").forEach((v) => v.classList.remove("active"));
|
||||
tab.classList.add("active");
|
||||
document.getElementById("view-" + tab.dataset.view).classList.add("active");
|
||||
tg.HapticFeedback.selectionChanged();
|
||||
|
||||
// Lazy-load data when switching tabs
|
||||
if (tab.dataset.view === "history") loadHistory();
|
||||
if (tab.dataset.view === "stats") loadStats();
|
||||
});
|
||||
});
|
||||
|
||||
// ── Log View ────────────────────────────────────────────────────
|
||||
let historyOffset = 0;
|
||||
|
||||
document.getElementById("btn-save").addEventListener("click", async () => {
|
||||
const raw = document.getElementById("inp-raw").value.trim();
|
||||
if (!raw) {
|
||||
showToast("Enter your workout first");
|
||||
tg.HapticFeedback.notificationOccurred("error");
|
||||
return;
|
||||
}
|
||||
|
||||
tg.HapticFeedback.impactOccurred("medium");
|
||||
try {
|
||||
const data = await api("POST", "/workouts", { raw_text: raw });
|
||||
document.getElementById("inp-raw").value = "";
|
||||
showToast("Workout #" + data.workout_id + " saved!");
|
||||
tg.HapticFeedback.notificationOccurred("success");
|
||||
} catch (e) {
|
||||
showToast(e.message);
|
||||
tg.HapticFeedback.notificationOccurred("error");
|
||||
}
|
||||
});
|
||||
|
||||
// Load exercise name suggestions
|
||||
async function loadSuggestions() {
|
||||
try {
|
||||
const data = await api("GET", "/exercises");
|
||||
const container = document.getElementById("suggestion-chips");
|
||||
const wrapper = document.getElementById("suggestions");
|
||||
|
||||
if (!data.exercises || data.exercises.length === 0) {
|
||||
wrapper.style.display = "none";
|
||||
return;
|
||||
}
|
||||
wrapper.style.display = "block";
|
||||
container.innerHTML = "";
|
||||
|
||||
data.exercises.slice(0, 20).forEach((name) => {
|
||||
const chip = document.createElement("button");
|
||||
chip.className = "chip";
|
||||
chip.textContent = name;
|
||||
chip.addEventListener("click", () => {
|
||||
const textarea = document.getElementById("inp-raw");
|
||||
const val = textarea.value;
|
||||
const suffix = name + ": ";
|
||||
textarea.value = val ? val + "\n" + suffix : suffix;
|
||||
textarea.focus();
|
||||
tg.HapticFeedback.selectionChanged();
|
||||
});
|
||||
container.appendChild(chip);
|
||||
});
|
||||
} catch (e) {
|
||||
console.error("Failed to load suggestions", e);
|
||||
}
|
||||
}
|
||||
|
||||
// ── History View ────────────────────────────────────────────────
|
||||
|
||||
async function loadHistory(append = false) {
|
||||
try {
|
||||
if (!append) historyOffset = 0;
|
||||
const data = await api("GET", `/workouts?limit=10&offset=${historyOffset}`);
|
||||
const container = document.getElementById("history-list");
|
||||
const noHistory = document.getElementById("no-history");
|
||||
const loadMore = document.getElementById("btn-load-more");
|
||||
|
||||
if (!append) container.innerHTML = "";
|
||||
|
||||
if (!data.workouts || data.workouts.length === 0) {
|
||||
if (!append) noHistory.style.display = "block";
|
||||
loadMore.style.display = "none";
|
||||
return;
|
||||
}
|
||||
noHistory.style.display = "none";
|
||||
|
||||
data.workouts.forEach((w) => {
|
||||
const card = document.createElement("div");
|
||||
card.className = "history-card";
|
||||
|
||||
const ts = new Date(w.timestamp);
|
||||
const dateStr = ts.toLocaleDateString(undefined, {
|
||||
weekday: "short",
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
|
||||
// Calculate volume
|
||||
let volume = 0;
|
||||
let totalSets = 0;
|
||||
(w.superset_groups || []).forEach((group) => {
|
||||
group.forEach((ex) => {
|
||||
volume += ex.sets * ex.reps * ex.weight_kg;
|
||||
totalSets += ex.sets;
|
||||
});
|
||||
});
|
||||
|
||||
let groupsHtml = "";
|
||||
(w.superset_groups || []).forEach((group) => {
|
||||
const isSuperset = group.length > 1;
|
||||
if (isSuperset) {
|
||||
groupsHtml += '<div class="history-group"><div class="superset-label">Superset</div>';
|
||||
} else {
|
||||
groupsHtml += '<div class="history-group">';
|
||||
}
|
||||
group.forEach((ex) => {
|
||||
const machine = ex.machine_id ? ` <span class="ex-machine">(${ex.machine_id})</span>` : "";
|
||||
groupsHtml += `
|
||||
<div class="history-exercise">
|
||||
<span class="ex-name">${ex.name}</span>${machine}
|
||||
<span class="ex-detail"> — ${ex.sets}x${ex.reps}x${ex.weight_kg}kg</span>
|
||||
</div>`;
|
||||
});
|
||||
groupsHtml += "</div>";
|
||||
});
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="history-header">
|
||||
<span class="history-date">${dateStr}</span>
|
||||
<span class="history-volume">${Math.round(volume)} kg vol</span>
|
||||
</div>
|
||||
${groupsHtml}
|
||||
`;
|
||||
container.appendChild(card);
|
||||
});
|
||||
|
||||
historyOffset += data.workouts.length;
|
||||
loadMore.style.display = historyOffset < data.total ? "block" : "none";
|
||||
} catch (e) {
|
||||
console.error("Failed to load history", e);
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("btn-load-more").addEventListener("click", () => {
|
||||
loadHistory(true);
|
||||
});
|
||||
|
||||
// ── Stats View ──────────────────────────────────────────────────
|
||||
|
||||
async function loadStats() {
|
||||
try {
|
||||
const data = await api("GET", "/stats");
|
||||
const container = document.getElementById("stats-content");
|
||||
|
||||
if (data.total_workouts === 0) {
|
||||
container.innerHTML = '<div class="empty-state"><div class="empty-icon">📊</div><p>No workouts yet</p></div>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">${data.total_workouts}</div>
|
||||
<div class="stat-label">Workouts</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">${data.unique_exercises}</div>
|
||||
<div class="stat-label">Exercises</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">${data.total_sets.toLocaleString()}</div>
|
||||
<div class="stat-label">Total Sets</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">${Math.round(data.total_volume).toLocaleString()}</div>
|
||||
<div class="stat-label">Volume (kg)</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} catch (e) {
|
||||
console.error("Failed to load stats", e);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Init ────────────────────────────────────────────────────────
|
||||
async function init() {
|
||||
if (!userId) return;
|
||||
await loadSuggestions();
|
||||
}
|
||||
|
||||
init();
|
||||
55
webapp/index.html
Normal file
55
webapp/index.html
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
|
||||
<title>Workout Tracker</title>
|
||||
<script src="https://telegram.org/js/telegram-web-app.js"></script>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<nav id="tabs">
|
||||
<button class="tab active" data-view="log">Log</button>
|
||||
<button class="tab" data-view="history">History</button>
|
||||
<button class="tab" data-view="stats">Stats</button>
|
||||
</nav>
|
||||
|
||||
<!-- ═══ LOG VIEW ═══ -->
|
||||
<div id="view-log" class="view active">
|
||||
<div class="card" id="text-input-card">
|
||||
<textarea id="inp-raw" class="input" rows="6"
|
||||
placeholder="Bench press: 4x8x35 Lateral raise: 4x8x4 Squats: 5x5x30"></textarea>
|
||||
<div class="hint">Same format as the bot. Blank line = new group. Consecutive lines = superset.</div>
|
||||
<button id="btn-save" class="btn btn-primary">Save Workout</button>
|
||||
</div>
|
||||
|
||||
<!-- Quick-add from history -->
|
||||
<div id="suggestions" style="display:none">
|
||||
<div class="section-label">Recent exercises</div>
|
||||
<div id="suggestion-chips"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══ HISTORY VIEW ═══ -->
|
||||
<div id="view-history" class="view">
|
||||
<div id="history-list"></div>
|
||||
<div id="no-history" class="empty-state">
|
||||
<div class="empty-icon">📋</div>
|
||||
<p>No workouts yet</p>
|
||||
</div>
|
||||
<button id="btn-load-more" class="btn btn-secondary" style="display:none">Load more</button>
|
||||
</div>
|
||||
|
||||
<!-- ═══ STATS VIEW ═══ -->
|
||||
<div id="view-stats" class="view">
|
||||
<div id="stats-content" class="empty-state">
|
||||
<div class="empty-icon">📊</div>
|
||||
<p>Loading…</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
261
webapp/style.css
Normal file
261
webapp/style.css
Normal file
|
|
@ -0,0 +1,261 @@
|
|||
/* ── Reset & Telegram-native theming ─────────────────────────── */
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: var(--tg-theme-bg-color, #ffffff);
|
||||
color: var(--tg-theme-text-color, #000000);
|
||||
min-height: 100vh;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* ── Tabs ────────────────────────────────────────────────────── */
|
||||
|
||||
#tabs {
|
||||
display: flex;
|
||||
background: var(--tg-theme-secondary-bg-color, #f0f0f0);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
border-bottom: 1px solid var(--tg-theme-hint-color, #999)33;
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1;
|
||||
padding: 12px 0;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--tg-theme-hint-color, #999);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: var(--tg-theme-button-color, #3390ec);
|
||||
border-bottom-color: var(--tg-theme-button-color, #3390ec);
|
||||
}
|
||||
|
||||
/* ── Views ───────────────────────────────────────────────────── */
|
||||
|
||||
.view { display: none; padding: 16px; padding-bottom: 32px; }
|
||||
.view.active { display: block; }
|
||||
|
||||
/* ── Cards ───────────────────────────────────────────────────── */
|
||||
|
||||
.card {
|
||||
background: var(--tg-theme-secondary-bg-color, #f0f0f0);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* ── Buttons ─────────────────────────────────────────────────── */
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
padding: 12px 20px;
|
||||
width: 100%;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.btn:active { opacity: 0.7; transform: scale(0.97); }
|
||||
|
||||
.btn-primary {
|
||||
background: var(--tg-theme-button-color, #3390ec);
|
||||
color: var(--tg-theme-button-text-color, #fff);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--tg-theme-secondary-bg-color, #f0f0f0);
|
||||
color: var(--tg-theme-button-color, #3390ec);
|
||||
border: 1.5px solid var(--tg-theme-button-color, #3390ec);
|
||||
}
|
||||
|
||||
/* ── Inputs ──────────────────────────────────────────────────── */
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
border: 1.5px solid var(--tg-theme-hint-color, #999)44;
|
||||
background: var(--tg-theme-bg-color, #fff);
|
||||
color: var(--tg-theme-text-color, #000);
|
||||
font-size: 15px;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
border-color: var(--tg-theme-button-color, #3390ec);
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: 12px;
|
||||
color: var(--tg-theme-hint-color, #999);
|
||||
margin: 8px 0 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* ── Suggestion chips ────────────────────────────────────────── */
|
||||
|
||||
.section-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--tg-theme-hint-color, #999);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#suggestion-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.chip {
|
||||
padding: 6px 12px;
|
||||
border-radius: 16px;
|
||||
font-size: 13px;
|
||||
background: var(--tg-theme-secondary-bg-color, #f0f0f0);
|
||||
color: var(--tg-theme-text-color, #000);
|
||||
border: 1px solid var(--tg-theme-hint-color, #999)33;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chip:active { opacity: 0.7; }
|
||||
|
||||
/* ── History cards ───────────────────────────────────────────── */
|
||||
|
||||
.history-card {
|
||||
background: var(--tg-theme-secondary-bg-color, #f0f0f0);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.history-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.history-date {
|
||||
font-size: 13px;
|
||||
color: var(--tg-theme-hint-color, #999);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.history-volume {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--tg-theme-button-color, #3390ec);
|
||||
}
|
||||
|
||||
.history-group {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.superset-label {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--tg-theme-button-color, #3390ec);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.history-exercise {
|
||||
font-size: 14px;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.history-exercise .ex-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.history-exercise .ex-machine {
|
||||
color: var(--tg-theme-hint-color, #999);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.history-exercise .ex-detail {
|
||||
color: var(--tg-theme-hint-color, #999);
|
||||
}
|
||||
|
||||
/* ── Stats ───────────────────────────────────────────────────── */
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--tg-theme-secondary-bg-color, #f0f0f0);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--tg-theme-button-color, #3390ec);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: var(--tg-theme-hint-color, #999);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* ── Empty state ─────────────────────────────────────────────── */
|
||||
|
||||
.empty-state { text-align: center; padding: 48px 16px; }
|
||||
.empty-icon { font-size: 48px; margin-bottom: 12px; }
|
||||
.empty-state p { color: var(--tg-theme-hint-color, #999); font-size: 16px; }
|
||||
|
||||
/* ── Toast ───────────────────────────────────────────────────── */
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(80px);
|
||||
background: var(--tg-theme-text-color, #000);
|
||||
color: var(--tg-theme-bg-color, #fff);
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
opacity: 0;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toast.show {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue