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
42
bot.py
42
bot.py
|
|
@ -5,9 +5,10 @@ import os
|
|||
from datetime import datetime, timezone
|
||||
|
||||
from dotenv import load_dotenv
|
||||
from telegram import Update
|
||||
from telegram import Update, WebAppInfo, InlineKeyboardButton, InlineKeyboardMarkup, MenuButtonWebApp
|
||||
from telegram.constants import ParseMode
|
||||
from telegram.ext import (
|
||||
Application,
|
||||
ApplicationBuilder,
|
||||
CommandHandler,
|
||||
ContextTypes,
|
||||
|
|
@ -47,6 +48,9 @@ def _load_token() -> str:
|
|||
|
||||
BOT_TOKEN = _load_token()
|
||||
|
||||
# Mini App URL — set automatically by start.py via localtunnel
|
||||
WEBAPP_URL = os.environ.get("WEBAPP_URL", "")
|
||||
|
||||
|
||||
# ── Helpers ──────────────────────────────────────────────────────────────────
|
||||
|
||||
|
|
@ -74,7 +78,7 @@ def extract_timestamp(update: Update) -> tuple[datetime, bool]:
|
|||
|
||||
|
||||
async def cmd_start(update: Update, context: ContextTypes.DEFAULT_TYPE):
|
||||
await update.message.reply_text(
|
||||
text = (
|
||||
"💪 <b>Fitness Tracker Bot</b>\n\n"
|
||||
"Send me your workout and I'll save it!\n\n"
|
||||
"<b>Format:</b>\n"
|
||||
|
|
@ -87,10 +91,21 @@ async def cmd_start(update: Update, context: ContextTypes.DEFAULT_TYPE):
|
|||
"I'll use the original timestamp.\n\n"
|
||||
"<b>Commands:</b>\n"
|
||||
"/history — view recent workouts\n"
|
||||
"/stats — quick summary",
|
||||
parse_mode=ParseMode.HTML,
|
||||
"/stats — quick summary"
|
||||
)
|
||||
|
||||
if WEBAPP_URL:
|
||||
btn = InlineKeyboardButton(
|
||||
text="Open Workout Tracker",
|
||||
web_app=WebAppInfo(url=WEBAPP_URL),
|
||||
)
|
||||
await update.message.reply_text(
|
||||
text, parse_mode=ParseMode.HTML,
|
||||
reply_markup=InlineKeyboardMarkup([[btn]]),
|
||||
)
|
||||
else:
|
||||
await update.message.reply_text(text, parse_mode=ParseMode.HTML)
|
||||
|
||||
|
||||
async def cmd_history(update: Update, context: ContextTypes.DEFAULT_TYPE):
|
||||
user_id = update.effective_user.id
|
||||
|
|
@ -191,10 +206,27 @@ async def handle_message(update: Update, context: ContextTypes.DEFAULT_TYPE):
|
|||
# ── Main ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
|
||||
async def post_init(app: Application):
|
||||
"""Set the bot's menu button to open the Mini App (if URL is available)."""
|
||||
if WEBAPP_URL:
|
||||
await app.bot.set_chat_menu_button(
|
||||
menu_button=MenuButtonWebApp(
|
||||
text="Workout",
|
||||
web_app=WebAppInfo(url=WEBAPP_URL),
|
||||
)
|
||||
)
|
||||
logger.info("Menu button set to Mini App at %s", WEBAPP_URL)
|
||||
else:
|
||||
logger.info("No WEBAPP_URL — menu button not set")
|
||||
|
||||
|
||||
def main():
|
||||
init_db()
|
||||
|
||||
app = ApplicationBuilder().token(BOT_TOKEN).build()
|
||||
builder = ApplicationBuilder().token(BOT_TOKEN)
|
||||
if WEBAPP_URL:
|
||||
builder = builder.post_init(post_init)
|
||||
app = builder.build()
|
||||
|
||||
app.add_handler(CommandHandler("start", cmd_start))
|
||||
app.add_handler(CommandHandler("history", cmd_history))
|
||||
|
|
|
|||
29
flake.nix
29
flake.nix
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
description = "BigBiggerBiggestBot — Telegram fitness tracker";
|
||||
description = "BigBiggerBiggestBot — Telegram fitness tracker with Mini App";
|
||||
|
||||
inputs = {
|
||||
nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
|
||||
|
|
@ -16,23 +16,38 @@
|
|||
pythonEnv = python.withPackages (ps: with ps; [
|
||||
python-telegram-bot
|
||||
python-dotenv
|
||||
aiohttp
|
||||
]);
|
||||
|
||||
localtunnel = pkgs.buildNpmPackage {
|
||||
pname = "localtunnel";
|
||||
version = "2.0.2";
|
||||
src = pkgs.fetchFromGitHub {
|
||||
owner = "localtunnel";
|
||||
repo = "localtunnel";
|
||||
rev = "v2.0.2";
|
||||
hash = "sha256-6gEK1VjF25Kbe2drxbxUKDNJGqZ+OXgkulPkAkMR2+k=";
|
||||
};
|
||||
npmDepsHash = "sha256-R9FYkEe93oGF+dR7i1MxwzEW3EM3SasH/B6LLC2CNXM=";
|
||||
dontNpmBuild = true;
|
||||
};
|
||||
in
|
||||
{
|
||||
# `nix develop` — drop into a shell with everything available
|
||||
devShells.default = pkgs.mkShell {
|
||||
packages = [ pythonEnv ];
|
||||
packages = [ pythonEnv localtunnel ];
|
||||
shellHook = ''
|
||||
echo "💪 BigBiggerBiggestBot dev shell"
|
||||
echo " Run: python bot.py"
|
||||
echo " Run: python start.py (server + tunnel + bot)"
|
||||
echo " Run: python bot.py (bot only, no mini app)"
|
||||
'';
|
||||
};
|
||||
|
||||
# `nix run` — start the bot from the current directory
|
||||
# `nix run` — start everything via start.py
|
||||
apps.default = {
|
||||
type = "app";
|
||||
program = toString (pkgs.writeShellScript "run-bot" ''
|
||||
exec ${pythonEnv}/bin/python "$PWD/bot.py"
|
||||
program = toString (pkgs.writeShellScript "run-fitness-bot" ''
|
||||
export PATH="${pkgs.lib.makeBinPath [ pythonEnv localtunnel ]}:$PATH"
|
||||
exec ${pythonEnv}/bin/python "$PWD/start.py"
|
||||
'');
|
||||
};
|
||||
}
|
||||
|
|
|
|||
215
server.py
Normal file
215
server.py
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
"""
|
||||
API + static file server for the Telegram Mini App.
|
||||
Serves webapp/ and REST endpoints, using the existing db.py layer.
|
||||
"""
|
||||
import hashlib
|
||||
import hmac
|
||||
import json
|
||||
import logging
|
||||
import os
|
||||
from urllib.parse import parse_qs
|
||||
|
||||
from aiohttp import web
|
||||
|
||||
from db import init_db, get_db, save_workout, get_workouts, get_workout_count
|
||||
from parser import parse_workout, format_workout
|
||||
|
||||
logging.basicConfig(
|
||||
format="%(asctime)s - %(name)s - %(levelname)s - %(message)s",
|
||||
level=logging.INFO,
|
||||
)
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
|
||||
# ── Token (injected by start.py via env) ─────────────────────────
|
||||
|
||||
def _get_bot_token() -> str:
|
||||
return os.environ.get("BOT_TOKEN", "")
|
||||
|
||||
|
||||
# ── Telegram initData validation ─────────────────────────────────
|
||||
|
||||
def validate_init_data(init_data: str) -> dict | None:
|
||||
"""Validate Telegram WebApp initData. Returns user dict if valid."""
|
||||
if not init_data:
|
||||
return None
|
||||
|
||||
bot_token = _get_bot_token()
|
||||
if not bot_token:
|
||||
return None
|
||||
|
||||
parsed = parse_qs(init_data, keep_blank_values=True)
|
||||
received_hash = parsed.get("hash", [None])[0]
|
||||
if not received_hash:
|
||||
return None
|
||||
|
||||
data_pairs = []
|
||||
for key, values in parsed.items():
|
||||
if key == "hash":
|
||||
continue
|
||||
data_pairs.append(f"{key}={values[0]}")
|
||||
data_pairs.sort()
|
||||
data_check_string = "\n".join(data_pairs)
|
||||
|
||||
secret_key = hmac.new(
|
||||
b"WebAppData", bot_token.encode(), hashlib.sha256
|
||||
).digest()
|
||||
computed_hash = hmac.new(
|
||||
secret_key, data_check_string.encode(), hashlib.sha256
|
||||
).hexdigest()
|
||||
|
||||
if not hmac.compare_digest(computed_hash, received_hash):
|
||||
logger.warning("Invalid initData hash")
|
||||
return None
|
||||
|
||||
user_json = parsed.get("user", [None])[0]
|
||||
if not user_json:
|
||||
return None
|
||||
|
||||
try:
|
||||
return json.loads(user_json)
|
||||
except json.JSONDecodeError:
|
||||
return None
|
||||
|
||||
|
||||
# ── Auth middleware ───────────────────────────────────────────────
|
||||
|
||||
def get_user_id(request: web.Request) -> int | None:
|
||||
init_data = request.headers.get("X-Telegram-Init-Data", "")
|
||||
user = validate_init_data(init_data)
|
||||
if user:
|
||||
return user["id"]
|
||||
return None
|
||||
|
||||
|
||||
def require_auth(handler):
|
||||
async def wrapper(request: web.Request):
|
||||
user_id = get_user_id(request)
|
||||
if not user_id:
|
||||
return web.json_response({"error": "Unauthorized"}, status=401)
|
||||
request["user_id"] = user_id
|
||||
return await handler(request)
|
||||
return wrapper
|
||||
|
||||
|
||||
# ── API Routes ───────────────────────────────────────────────────
|
||||
|
||||
@require_auth
|
||||
async def api_get_workouts(request: web.Request):
|
||||
"""Return recent workouts with exercises."""
|
||||
limit = int(request.query.get("limit", "20"))
|
||||
offset = int(request.query.get("offset", "0"))
|
||||
workouts = get_workouts(request["user_id"], limit=limit, offset=offset)
|
||||
total = get_workout_count(request["user_id"])
|
||||
return web.json_response({"workouts": workouts, "total": total})
|
||||
|
||||
|
||||
@require_auth
|
||||
async def api_save_workout(request: web.Request):
|
||||
"""Save a workout from structured JSON or raw text."""
|
||||
body = await request.json()
|
||||
raw_text = body.get("raw_text", "")
|
||||
superset_groups = body.get("superset_groups")
|
||||
|
||||
if superset_groups:
|
||||
# Structured input from the Mini App UI
|
||||
from datetime import datetime, timezone
|
||||
workout_id = save_workout(
|
||||
user_id=request["user_id"],
|
||||
timestamp=datetime.now(timezone.utc),
|
||||
superset_groups=superset_groups,
|
||||
raw_text=raw_text or None,
|
||||
)
|
||||
elif raw_text:
|
||||
# Text-based input (same format as sending a message to the bot)
|
||||
groups = parse_workout(raw_text)
|
||||
if not groups:
|
||||
return web.json_response({"error": "Could not parse workout text"}, status=400)
|
||||
from datetime import datetime, timezone
|
||||
superset_dicts = [[ex.to_dict() for ex in group] for group in groups]
|
||||
workout_id = save_workout(
|
||||
user_id=request["user_id"],
|
||||
timestamp=datetime.now(timezone.utc),
|
||||
superset_groups=superset_dicts,
|
||||
raw_text=raw_text,
|
||||
)
|
||||
else:
|
||||
return web.json_response(
|
||||
{"error": "Provide superset_groups or raw_text"}, status=400
|
||||
)
|
||||
|
||||
return web.json_response({"workout_id": workout_id}, status=201)
|
||||
|
||||
|
||||
@require_auth
|
||||
async def api_get_exercise_names(request: web.Request):
|
||||
"""Return unique exercise names this user has logged (for autocomplete)."""
|
||||
with get_db() as conn:
|
||||
rows = conn.execute(
|
||||
"""SELECT DISTINCT e.name
|
||||
FROM exercises e
|
||||
JOIN superset_groups sg ON sg.id = e.superset_group_id
|
||||
JOIN workouts w ON w.id = sg.workout_id
|
||||
WHERE w.user_id = ?
|
||||
ORDER BY e.name""",
|
||||
(request["user_id"],),
|
||||
).fetchall()
|
||||
return web.json_response({"exercises": [r["name"] for r in rows]})
|
||||
|
||||
|
||||
@require_auth
|
||||
async def api_get_stats(request: web.Request):
|
||||
"""Return summary stats for the user."""
|
||||
user_id = request["user_id"]
|
||||
total = get_workout_count(user_id)
|
||||
if total == 0:
|
||||
return web.json_response({
|
||||
"total_workouts": 0, "unique_exercises": 0,
|
||||
"total_sets": 0, "total_volume": 0,
|
||||
})
|
||||
|
||||
workouts = get_workouts(user_id, limit=10000)
|
||||
exercise_names = set()
|
||||
total_sets = 0
|
||||
total_volume = 0.0
|
||||
for w in workouts:
|
||||
for group in w["superset_groups"]:
|
||||
for ex in group:
|
||||
exercise_names.add(ex["name"].lower())
|
||||
total_sets += ex["sets"]
|
||||
total_volume += ex["sets"] * ex["reps"] * ex["weight_kg"]
|
||||
|
||||
return web.json_response({
|
||||
"total_workouts": total,
|
||||
"unique_exercises": len(exercise_names),
|
||||
"total_sets": total_sets,
|
||||
"total_volume": round(total_volume, 1),
|
||||
})
|
||||
|
||||
|
||||
# ── App setup ────────────────────────────────────────────────────
|
||||
|
||||
def create_app() -> web.Application:
|
||||
init_db()
|
||||
|
||||
app = web.Application()
|
||||
|
||||
app.router.add_get("/api/workouts", api_get_workouts)
|
||||
app.router.add_post("/api/workouts", api_save_workout)
|
||||
app.router.add_get("/api/exercises", api_get_exercise_names)
|
||||
app.router.add_get("/api/stats", api_get_stats)
|
||||
|
||||
# Serve the webapp/ folder
|
||||
import pathlib
|
||||
webapp_dir = pathlib.Path(__file__).parent / "webapp"
|
||||
app.router.add_static("/", webapp_dir, show_index=True)
|
||||
|
||||
return app
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
port = int(os.environ.get("API_PORT", "8080"))
|
||||
host = os.environ.get("API_HOST", "0.0.0.0")
|
||||
app = create_app()
|
||||
logger.info("Server starting on %s:%s", host, port)
|
||||
web.run_app(app, host=host, port=port)
|
||||
175
start.py
Normal file
175
start.py
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
#!/usr/bin/env python3
|
||||
"""
|
||||
Orchestrator — single entry point for `nix run`.
|
||||
1. Loads BOT_TOKEN from ~/.secrets or .env (same as bot.py)
|
||||
2. Starts the API server
|
||||
3. Starts localtunnel to get a public HTTPS URL
|
||||
4. Starts the Telegram bot with WEBAPP_URL set
|
||||
5. Cleans up everything on Ctrl+C
|
||||
"""
|
||||
import os
|
||||
import re
|
||||
import signal
|
||||
import subprocess
|
||||
import sys
|
||||
import time
|
||||
import pathlib
|
||||
|
||||
SCRIPT_DIR = pathlib.Path(__file__).resolve().parent
|
||||
SECRETS_FILE = pathlib.Path.home() / ".secrets" / "bigbiggerbiggestbot"
|
||||
|
||||
|
||||
def load_token() -> str:
|
||||
"""Load bot token: secrets file → .env → BOT_TOKEN env var."""
|
||||
# 1. Secrets file (same path as bot.py uses)
|
||||
if SECRETS_FILE.is_file():
|
||||
token = SECRETS_FILE.read_text().strip()
|
||||
if token:
|
||||
print(f" Token loaded from {SECRETS_FILE}")
|
||||
return token
|
||||
|
||||
# 2. .env in working directory
|
||||
env_file = pathlib.Path.cwd() / ".env"
|
||||
if env_file.exists():
|
||||
for line in env_file.read_text().splitlines():
|
||||
line = line.strip()
|
||||
if line.startswith("BOT_TOKEN="):
|
||||
token = line.split("=", 1)[1].strip().strip("\"'")
|
||||
if token:
|
||||
print(f" Token loaded from {env_file}")
|
||||
return token
|
||||
|
||||
# 3. Already in environment
|
||||
token = os.environ.get("BOT_TOKEN", "").strip()
|
||||
if token:
|
||||
print(" Token loaded from BOT_TOKEN env var")
|
||||
return token
|
||||
|
||||
print("\n No bot token found!")
|
||||
print(f" Put it in {SECRETS_FILE}")
|
||||
print(" Or create a .env file with: BOT_TOKEN=your-token\n")
|
||||
sys.exit(1)
|
||||
|
||||
|
||||
def start_server(port: int, bot_token: str) -> subprocess.Popen:
|
||||
env = {**os.environ, "API_PORT": str(port), "BOT_TOKEN": bot_token}
|
||||
return subprocess.Popen(
|
||||
[sys.executable, str(SCRIPT_DIR / "server.py")],
|
||||
env=env,
|
||||
)
|
||||
|
||||
|
||||
def start_tunnel(port: int) -> tuple[subprocess.Popen, str]:
|
||||
print(f" Starting tunnel to port {port}...")
|
||||
proc = subprocess.Popen(
|
||||
["lt", "--port", str(port)],
|
||||
stdout=subprocess.PIPE,
|
||||
stderr=subprocess.STDOUT,
|
||||
text=True,
|
||||
)
|
||||
|
||||
url = None
|
||||
deadline = time.time() + 30
|
||||
while time.time() < deadline:
|
||||
line = proc.stdout.readline()
|
||||
if not line:
|
||||
if proc.poll() is not None:
|
||||
print(" Tunnel process exited unexpectedly.")
|
||||
break
|
||||
continue
|
||||
line = line.strip()
|
||||
print(f" [tunnel] {line}")
|
||||
match = re.search(r"https?://\S+", line)
|
||||
if match:
|
||||
url = match.group(0)
|
||||
break
|
||||
|
||||
if not url:
|
||||
proc.kill()
|
||||
print("\n Could not get a tunnel URL.")
|
||||
print(" Make sure localtunnel is working: lt --port 8080\n")
|
||||
sys.exit(1)
|
||||
|
||||
return proc, url
|
||||
|
||||
|
||||
def start_bot(bot_token: str, webapp_url: str) -> subprocess.Popen:
|
||||
env = {**os.environ, "BOT_TOKEN": bot_token, "WEBAPP_URL": webapp_url}
|
||||
return subprocess.Popen(
|
||||
[sys.executable, str(SCRIPT_DIR / "bot.py")],
|
||||
env=env,
|
||||
)
|
||||
|
||||
|
||||
def main():
|
||||
port = int(os.environ.get("API_PORT", "8080"))
|
||||
procs: list[subprocess.Popen] = []
|
||||
|
||||
def cleanup(sig=None, frame=None):
|
||||
print("\nShutting down...")
|
||||
for p in procs:
|
||||
try:
|
||||
p.terminate()
|
||||
except OSError:
|
||||
pass
|
||||
for p in procs:
|
||||
try:
|
||||
p.wait(timeout=5)
|
||||
except subprocess.TimeoutExpired:
|
||||
p.kill()
|
||||
sys.exit(0)
|
||||
|
||||
signal.signal(signal.SIGINT, cleanup)
|
||||
signal.signal(signal.SIGTERM, cleanup)
|
||||
|
||||
print()
|
||||
print(" ==========================================")
|
||||
print(" BigBiggerBiggest — Fitness Tracker")
|
||||
print(" ==========================================")
|
||||
print()
|
||||
|
||||
# 1. Load token
|
||||
bot_token = load_token()
|
||||
masked = bot_token[:5] + "..." + bot_token[-4:]
|
||||
print(f" BOT_TOKEN: {masked}")
|
||||
|
||||
# 2. Start API server
|
||||
print(f"\n Starting API server on port {port}...")
|
||||
server = start_server(port, bot_token)
|
||||
procs.append(server)
|
||||
time.sleep(1)
|
||||
|
||||
if server.poll() is not None:
|
||||
print(" Server failed to start!")
|
||||
sys.exit(1)
|
||||
|
||||
# 3. Start tunnel
|
||||
tunnel, webapp_url = start_tunnel(port)
|
||||
procs.append(tunnel)
|
||||
|
||||
# 4. Start bot
|
||||
print(f"\n WEBAPP_URL: {webapp_url}")
|
||||
print(" Starting bot...\n")
|
||||
bot = start_bot(bot_token, webapp_url)
|
||||
procs.append(bot)
|
||||
|
||||
print(" ==========================================")
|
||||
print(f" All systems go!")
|
||||
print(f" Mini App: {webapp_url}")
|
||||
print(f" API: http://localhost:{port}")
|
||||
print(f" Press Ctrl+C to stop")
|
||||
print(" ==========================================")
|
||||
print()
|
||||
|
||||
while True:
|
||||
for p in procs:
|
||||
ret = p.poll()
|
||||
if ret is not None:
|
||||
name = {id(server): "Server", id(tunnel): "Tunnel", id(bot): "Bot"}.get(id(p), "?")
|
||||
print(f"\n {name} exited with code {ret}")
|
||||
cleanup()
|
||||
time.sleep(1)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
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