Add Summit Stride 5K training tracker at /running
Node/Express backend with SQLite storage, WebAuthn passkey auth, and React frontend built via Vite. Caddy routes /running/* via handle_path labels on docker-compose.
This commit is contained in:
JamBox
18
apps/running/Dockerfile
Normal file
18
apps/running/Dockerfile
Normal file
@@ -0,0 +1,18 @@
|
||||
# Stage 1: Build frontend
|
||||
FROM node:20-alpine AS builder
|
||||
WORKDIR /app/src
|
||||
COPY src/package.json ./
|
||||
RUN npm install
|
||||
COPY src/ ./
|
||||
RUN npm run build
|
||||
|
||||
# Stage 2: Production server
|
||||
FROM node:20-alpine
|
||||
WORKDIR /app
|
||||
COPY package.json ./
|
||||
RUN npm install --omit=dev
|
||||
COPY server.js ./
|
||||
COPY --from=builder /app/src/dist ./public
|
||||
RUN mkdir -p /app/data
|
||||
EXPOSE 8080
|
||||
CMD ["node", "server.js"]
|
||||
15
apps/running/package.json
Normal file
15
apps/running/package.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "running-server",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"start": "node server.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@simplewebauthn/server": "^11.0.0",
|
||||
"better-sqlite3": "^11.7.0",
|
||||
"connect-sqlite3": "^0.9.15",
|
||||
"express": "^4.21.0",
|
||||
"express-session": "^1.18.1"
|
||||
}
|
||||
}
|
||||
301
apps/running/server.js
Normal file
301
apps/running/server.js
Normal file
@@ -0,0 +1,301 @@
|
||||
const express = require("express");
|
||||
const path = require("path");
|
||||
const Database = require("better-sqlite3");
|
||||
const session = require("express-session");
|
||||
const SQLiteStoreFactory = require("connect-sqlite3");
|
||||
const {
|
||||
generateRegistrationOptions,
|
||||
verifyRegistrationResponse,
|
||||
generateAuthenticationOptions,
|
||||
verifyAuthenticationResponse,
|
||||
} = require("@simplewebauthn/server");
|
||||
|
||||
const app = express();
|
||||
const PORT = 8080;
|
||||
|
||||
const RP_NAME = "James Van Boxtel";
|
||||
const RP_ID = process.env.RP_ID || "jamesvanboxtel.com";
|
||||
const ORIGIN = process.env.ORIGIN || "https://jamesvanboxtel.com";
|
||||
|
||||
// Database setup
|
||||
const dataDir = path.join(__dirname, "data");
|
||||
const db = new Database(path.join(dataDir, "running.db"));
|
||||
db.pragma("journal_mode = WAL");
|
||||
db.pragma("foreign_keys = ON");
|
||||
|
||||
db.exec(`
|
||||
CREATE TABLE IF NOT EXISTS users (
|
||||
id INTEGER PRIMARY KEY,
|
||||
username TEXT UNIQUE NOT NULL,
|
||||
approved INTEGER DEFAULT 0,
|
||||
created_at TEXT DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS credentials (
|
||||
id TEXT PRIMARY KEY,
|
||||
user_id INTEGER NOT NULL REFERENCES users(id),
|
||||
public_key BLOB NOT NULL,
|
||||
counter INTEGER DEFAULT 0,
|
||||
transports TEXT,
|
||||
created_at TEXT DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS progress (
|
||||
key TEXT PRIMARY KEY,
|
||||
completed INTEGER DEFAULT 1,
|
||||
updated_by INTEGER REFERENCES users(id),
|
||||
updated_at TEXT DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
`);
|
||||
|
||||
// Session setup
|
||||
const SQLiteStore = SQLiteStoreFactory(session);
|
||||
app.use(
|
||||
session({
|
||||
store: new SQLiteStore({ dir: dataDir, db: "sessions.db" }),
|
||||
secret: process.env.SESSION_SECRET || "summit-stride-secret-change-me",
|
||||
resave: false,
|
||||
saveUninitialized: false,
|
||||
cookie: {
|
||||
secure: process.env.NODE_ENV === "production",
|
||||
httpOnly: true,
|
||||
maxAge: 30 * 24 * 60 * 60 * 1000, // 30 days
|
||||
sameSite: "lax",
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
app.use(express.json());
|
||||
|
||||
// In-memory challenge store (keyed by session ID, short-lived)
|
||||
const challengeStore = new Map();
|
||||
|
||||
function requireAuth(req, res, next) {
|
||||
if (!req.session.userId) {
|
||||
return res.status(401).json({ error: "Not authenticated" });
|
||||
}
|
||||
const user = db.prepare("SELECT * FROM users WHERE id = ?").get(req.session.userId);
|
||||
if (!user || !user.approved) {
|
||||
return res.status(403).json({ error: "Not approved" });
|
||||
}
|
||||
req.user = user;
|
||||
next();
|
||||
}
|
||||
|
||||
// --- Progress API ---
|
||||
|
||||
app.get("/api/progress", (req, res) => {
|
||||
const rows = db.prepare("SELECT key, completed FROM progress").all();
|
||||
const state = {};
|
||||
for (const row of rows) {
|
||||
state[row.key] = !!row.completed;
|
||||
}
|
||||
res.json(state);
|
||||
});
|
||||
|
||||
app.post("/api/progress/:key", requireAuth, (req, res) => {
|
||||
const { key } = req.params;
|
||||
if (!/^\d+-\d+$/.test(key)) {
|
||||
return res.status(400).json({ error: "Invalid key format" });
|
||||
}
|
||||
db.prepare(
|
||||
`INSERT INTO progress (key, completed, updated_by, updated_at)
|
||||
VALUES (?, 1, ?, CURRENT_TIMESTAMP)
|
||||
ON CONFLICT(key) DO UPDATE SET completed=1, updated_by=?, updated_at=CURRENT_TIMESTAMP`
|
||||
).run(key, req.user.id, req.user.id);
|
||||
res.json({ ok: true });
|
||||
});
|
||||
|
||||
app.delete("/api/progress/:key", requireAuth, (req, res) => {
|
||||
const { key } = req.params;
|
||||
db.prepare("DELETE FROM progress WHERE key = ?").run(key);
|
||||
res.json({ ok: true });
|
||||
});
|
||||
|
||||
// --- Auth API ---
|
||||
|
||||
app.get("/api/auth/me", (req, res) => {
|
||||
if (!req.session.userId) {
|
||||
return res.json({ authenticated: false });
|
||||
}
|
||||
const user = db.prepare("SELECT id, username, approved FROM users WHERE id = ?").get(req.session.userId);
|
||||
if (!user) {
|
||||
return res.json({ authenticated: false });
|
||||
}
|
||||
res.json({ authenticated: true, user });
|
||||
});
|
||||
|
||||
app.post("/api/auth/logout", (req, res) => {
|
||||
req.session.destroy(() => {
|
||||
res.json({ ok: true });
|
||||
});
|
||||
});
|
||||
|
||||
// Registration
|
||||
app.post("/api/auth/register-options", async (req, res) => {
|
||||
try {
|
||||
const { username } = req.body;
|
||||
if (!username || typeof username !== "string" || username.length > 64) {
|
||||
return res.status(400).json({ error: "Invalid username" });
|
||||
}
|
||||
|
||||
let user = db.prepare("SELECT * FROM users WHERE username = ?").get(username);
|
||||
if (!user) {
|
||||
const result = db.prepare("INSERT INTO users (username, approved) VALUES (?, ?)").run(
|
||||
username,
|
||||
db.prepare("SELECT COUNT(*) as count FROM users").get().count === 0 ? 1 : 0
|
||||
);
|
||||
user = db.prepare("SELECT * FROM users WHERE id = ?").get(result.lastInsertRowid);
|
||||
}
|
||||
|
||||
const existingCreds = db
|
||||
.prepare("SELECT id, transports FROM credentials WHERE user_id = ?")
|
||||
.all(user.id);
|
||||
|
||||
const options = await generateRegistrationOptions({
|
||||
rpName: RP_NAME,
|
||||
rpID: RP_ID,
|
||||
userName: username,
|
||||
userID: Buffer.from(String(user.id)),
|
||||
attestationType: "none",
|
||||
excludeCredentials: existingCreds.map((c) => ({
|
||||
id: c.id,
|
||||
transports: c.transports ? JSON.parse(c.transports) : undefined,
|
||||
})),
|
||||
authenticatorSelection: {
|
||||
residentKey: "preferred",
|
||||
userVerification: "preferred",
|
||||
},
|
||||
});
|
||||
|
||||
challengeStore.set(req.sessionID, { challenge: options.challenge, userId: user.id });
|
||||
setTimeout(() => challengeStore.delete(req.sessionID), 5 * 60 * 1000);
|
||||
|
||||
res.json(options);
|
||||
} catch (err) {
|
||||
console.error("register-options error:", err);
|
||||
res.status(500).json({ error: "Registration failed" });
|
||||
}
|
||||
});
|
||||
|
||||
app.post("/api/auth/register-verify", async (req, res) => {
|
||||
try {
|
||||
const stored = challengeStore.get(req.sessionID);
|
||||
if (!stored) {
|
||||
return res.status(400).json({ error: "No registration in progress" });
|
||||
}
|
||||
|
||||
const verification = await verifyRegistrationResponse({
|
||||
response: req.body,
|
||||
expectedChallenge: stored.challenge,
|
||||
expectedOrigin: ORIGIN,
|
||||
expectedRPID: RP_ID,
|
||||
});
|
||||
|
||||
if (!verification.verified || !verification.registrationInfo) {
|
||||
return res.status(400).json({ error: "Verification failed" });
|
||||
}
|
||||
|
||||
const { credential } = verification.registrationInfo;
|
||||
|
||||
db.prepare(
|
||||
"INSERT INTO credentials (id, user_id, public_key, counter, transports) VALUES (?, ?, ?, ?, ?)"
|
||||
).run(
|
||||
credential.id,
|
||||
stored.userId,
|
||||
Buffer.from(credential.publicKey),
|
||||
credential.counter,
|
||||
JSON.stringify(req.body.response?.transports || [])
|
||||
);
|
||||
|
||||
challengeStore.delete(req.sessionID);
|
||||
|
||||
const user = db.prepare("SELECT id, username, approved FROM users WHERE id = ?").get(stored.userId);
|
||||
req.session.userId = user.id;
|
||||
|
||||
res.json({ verified: true, user });
|
||||
} catch (err) {
|
||||
console.error("register-verify error:", err);
|
||||
res.status(500).json({ error: "Verification failed" });
|
||||
}
|
||||
});
|
||||
|
||||
// Login
|
||||
app.post("/api/auth/login-options", async (req, res) => {
|
||||
try {
|
||||
const options = await generateAuthenticationOptions({
|
||||
rpID: RP_ID,
|
||||
userVerification: "preferred",
|
||||
});
|
||||
|
||||
challengeStore.set(req.sessionID, { challenge: options.challenge });
|
||||
setTimeout(() => challengeStore.delete(req.sessionID), 5 * 60 * 1000);
|
||||
|
||||
res.json(options);
|
||||
} catch (err) {
|
||||
console.error("login-options error:", err);
|
||||
res.status(500).json({ error: "Login failed" });
|
||||
}
|
||||
});
|
||||
|
||||
app.post("/api/auth/login-verify", async (req, res) => {
|
||||
try {
|
||||
const stored = challengeStore.get(req.sessionID);
|
||||
if (!stored) {
|
||||
return res.status(400).json({ error: "No login in progress" });
|
||||
}
|
||||
|
||||
const credentialId = req.body.id;
|
||||
const cred = db.prepare("SELECT * FROM credentials WHERE id = ?").get(credentialId);
|
||||
if (!cred) {
|
||||
return res.status(400).json({ error: "Unknown credential" });
|
||||
}
|
||||
|
||||
const verification = await verifyAuthenticationResponse({
|
||||
response: req.body,
|
||||
expectedChallenge: stored.challenge,
|
||||
expectedOrigin: ORIGIN,
|
||||
expectedRPID: RP_ID,
|
||||
credential: {
|
||||
id: cred.id,
|
||||
publicKey: cred.public_key,
|
||||
counter: cred.counter,
|
||||
transports: cred.transports ? JSON.parse(cred.transports) : undefined,
|
||||
},
|
||||
});
|
||||
|
||||
if (!verification.verified) {
|
||||
return res.status(400).json({ error: "Verification failed" });
|
||||
}
|
||||
|
||||
db.prepare("UPDATE credentials SET counter = ? WHERE id = ?").run(
|
||||
verification.authenticationInfo.newCounter,
|
||||
credentialId
|
||||
);
|
||||
|
||||
challengeStore.delete(req.sessionID);
|
||||
|
||||
const user = db
|
||||
.prepare("SELECT id, username, approved FROM users WHERE id = ?")
|
||||
.get(cred.user_id);
|
||||
req.session.userId = user.id;
|
||||
|
||||
res.json({ verified: true, user });
|
||||
} catch (err) {
|
||||
console.error("login-verify error:", err);
|
||||
res.status(500).json({ error: "Verification failed" });
|
||||
}
|
||||
});
|
||||
|
||||
// Serve static frontend
|
||||
app.use(express.static(path.join(__dirname, "public")));
|
||||
|
||||
// SPA fallback
|
||||
app.get("*", (req, res) => {
|
||||
if (req.path.startsWith("/api/")) {
|
||||
return res.status(404).json({ error: "Not found" });
|
||||
}
|
||||
res.sendFile(path.join(__dirname, "public", "index.html"));
|
||||
});
|
||||
|
||||
app.listen(PORT, () => console.log(`Running app on :${PORT}`));
|
||||
440
apps/running/src/App.tsx
Normal file
440
apps/running/src/App.tsx
Normal file
@@ -0,0 +1,440 @@
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { Mountain, LogIn, LogOut, UserPlus, Loader2 } from "lucide-react";
|
||||
import { startRegistration, startAuthentication } from "@simplewebauthn/browser";
|
||||
import { SCHEDULE_DATA, DAYS_OF_WEEK, BACKGROUND_IMAGE } from "./constants";
|
||||
import { CompletionState, RunType, AuthUser } from "./types";
|
||||
import WorkoutCard from "./components/WorkoutCard";
|
||||
|
||||
const API_BASE = "/running/api";
|
||||
|
||||
async function apiFetch(path: string, opts?: RequestInit) {
|
||||
const res = await fetch(`${API_BASE}${path}`, {
|
||||
...opts,
|
||||
headers: { "Content-Type": "application/json", ...opts?.headers },
|
||||
});
|
||||
return res;
|
||||
}
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [completed, setCompleted] = useState<CompletionState>({});
|
||||
const [user, setUser] = useState<AuthUser | null>(null);
|
||||
const [authLoading, setAuthLoading] = useState(true);
|
||||
const [showRegister, setShowRegister] = useState(false);
|
||||
const [registerName, setRegisterName] = useState("");
|
||||
const [authError, setAuthError] = useState("");
|
||||
|
||||
const canEdit = !!user && user.approved === 1;
|
||||
|
||||
const loadProgress = useCallback(async () => {
|
||||
try {
|
||||
const res = await apiFetch("/progress");
|
||||
if (res.ok) {
|
||||
setCompleted(await res.json());
|
||||
}
|
||||
} catch {
|
||||
// Silently fail - will show empty progress
|
||||
}
|
||||
}, []);
|
||||
|
||||
const checkAuth = useCallback(async () => {
|
||||
try {
|
||||
const res = await apiFetch("/auth/me");
|
||||
const data = await res.json();
|
||||
if (data.authenticated) {
|
||||
setUser(data.user);
|
||||
}
|
||||
} catch {
|
||||
// Not authenticated
|
||||
} finally {
|
||||
setAuthLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadProgress();
|
||||
checkAuth();
|
||||
}, [loadProgress, checkAuth]);
|
||||
|
||||
const toggleDay = async (weekIdx: number, dayIdx: number) => {
|
||||
if (!canEdit) return;
|
||||
const key = `${weekIdx}-${dayIdx}`;
|
||||
const isCurrentlyCompleted = completed[key];
|
||||
|
||||
// Optimistic update
|
||||
setCompleted((prev) => ({
|
||||
...prev,
|
||||
[key]: !isCurrentlyCompleted,
|
||||
}));
|
||||
|
||||
try {
|
||||
if (isCurrentlyCompleted) {
|
||||
await apiFetch(`/progress/${key}`, { method: "DELETE" });
|
||||
} else {
|
||||
await apiFetch(`/progress/${key}`, { method: "POST" });
|
||||
}
|
||||
} catch {
|
||||
// Revert on failure
|
||||
setCompleted((prev) => ({
|
||||
...prev,
|
||||
[key]: isCurrentlyCompleted,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogin = async () => {
|
||||
setAuthError("");
|
||||
try {
|
||||
const optionsRes = await apiFetch("/auth/login-options", {
|
||||
method: "POST",
|
||||
});
|
||||
const options = await optionsRes.json();
|
||||
const authResp = await startAuthentication({ optionsJSON: options });
|
||||
const verifyRes = await apiFetch("/auth/login-verify", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(authResp),
|
||||
});
|
||||
const result = await verifyRes.json();
|
||||
if (result.verified) {
|
||||
setUser(result.user);
|
||||
} else {
|
||||
setAuthError("Login failed");
|
||||
}
|
||||
} catch (err: any) {
|
||||
if (err.name !== "NotAllowedError") {
|
||||
setAuthError("Login failed");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleRegister = async () => {
|
||||
if (!registerName.trim()) return;
|
||||
setAuthError("");
|
||||
try {
|
||||
const optionsRes = await apiFetch("/auth/register-options", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ username: registerName.trim() }),
|
||||
});
|
||||
const options = await optionsRes.json();
|
||||
const regResp = await startRegistration({ optionsJSON: options });
|
||||
const verifyRes = await apiFetch("/auth/register-verify", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(regResp),
|
||||
});
|
||||
const result = await verifyRes.json();
|
||||
if (result.verified) {
|
||||
setUser(result.user);
|
||||
setShowRegister(false);
|
||||
setRegisterName("");
|
||||
} else {
|
||||
setAuthError("Registration failed");
|
||||
}
|
||||
} catch (err: any) {
|
||||
if (err.name !== "NotAllowedError") {
|
||||
setAuthError("Registration failed");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = async () => {
|
||||
await apiFetch("/auth/logout", { method: "POST" });
|
||||
setUser(null);
|
||||
};
|
||||
|
||||
const calculateProgress = () => {
|
||||
let actionableTotal = 0;
|
||||
let actionableCompleted = 0;
|
||||
|
||||
SCHEDULE_DATA.forEach((week, weekIndex) => {
|
||||
week.days.forEach((workout, dayIndex) => {
|
||||
const isRest =
|
||||
workout.type === RunType.REST || workout.type === RunType.SLEEP;
|
||||
if (!isRest) {
|
||||
actionableTotal++;
|
||||
if (completed[`${weekIndex}-${dayIndex}`]) {
|
||||
actionableCompleted++;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (actionableTotal === 0) return 0;
|
||||
return Math.round((actionableCompleted / actionableTotal) * 100);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen w-full relative bg-black text-gray-100 font-sans selection:bg-orange-500/30">
|
||||
{/* Background */}
|
||||
<div className="fixed inset-0 z-0">
|
||||
<img
|
||||
src={BACKGROUND_IMAGE}
|
||||
alt="Mountain Sunrise"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/60 backdrop-blur-[2px]"></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-black via-transparent to-black opacity-90"></div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="relative z-10 container mx-auto px-4 py-4 md:py-6 max-w-7xl">
|
||||
{/* Header */}
|
||||
<header className="flex flex-col md:flex-row justify-between items-center mb-6 gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-gradient-to-br from-orange-500 to-purple-600 rounded-xl shadow-lg shadow-orange-900/20">
|
||||
<Mountain className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl md:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-orange-200 to-purple-200 tracking-tight">
|
||||
Summit Stride 5K
|
||||
</h1>
|
||||
<p className="text-gray-400 text-xs md:text-sm">
|
||||
6-Week Preparation
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 w-full md:w-auto">
|
||||
<div className="flex-1 md:flex-none">
|
||||
<div className="flex justify-between text-[10px] mb-1 text-gray-400">
|
||||
<span>Progress</span>
|
||||
<span>{calculateProgress()}%</span>
|
||||
</div>
|
||||
<div className="h-1.5 w-full md:w-32 bg-gray-800 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-orange-500 to-purple-500 transition-all duration-700 ease-out"
|
||||
style={{ width: `${calculateProgress()}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Auth controls */}
|
||||
<div className="flex gap-2 items-center">
|
||||
{authLoading ? (
|
||||
<Loader2 className="w-4 h-4 text-gray-400 animate-spin" />
|
||||
) : user ? (
|
||||
<>
|
||||
<span className="text-xs text-gray-400 hidden md:inline">
|
||||
{user.username}
|
||||
{!user.approved && " (pending)"}
|
||||
</span>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="p-1.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/10 transition-all border border-transparent hover:border-white/10"
|
||||
title="Sign out"
|
||||
>
|
||||
<LogOut className="w-4 h-4" />
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
onClick={handleLogin}
|
||||
className="p-1.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/10 transition-all border border-transparent hover:border-white/10"
|
||||
title="Sign in with Passkey"
|
||||
>
|
||||
<LogIn className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowRegister(true)}
|
||||
className="p-1.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/10 transition-all border border-transparent hover:border-white/10"
|
||||
title="Register new Passkey"
|
||||
>
|
||||
<UserPlus className="w-4 h-4" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Auth error */}
|
||||
{authError && (
|
||||
<div className="mb-4 p-3 bg-red-500/20 border border-red-500/30 rounded-lg text-red-200 text-sm">
|
||||
{authError}
|
||||
<button
|
||||
onClick={() => setAuthError("")}
|
||||
className="ml-2 text-red-400 hover:text-red-200"
|
||||
>
|
||||
dismiss
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Training Zones Legend */}
|
||||
<div className="mb-5 bg-gray-900/60 backdrop-blur-md rounded-xl border border-white/10 p-3 md:p-4">
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-2 mb-2">
|
||||
<h3 className="text-xs font-bold text-gray-300 uppercase tracking-wider flex items-center gap-2">
|
||||
Training Zones
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2 text-[10px] md:text-xs">
|
||||
<div className="bg-red-500/10 border border-red-500/20 rounded-lg p-2">
|
||||
<div className="flex items-center gap-1.5 mb-1">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-red-500"></div>
|
||||
<span className="font-bold text-red-200 uppercase">Speed</span>
|
||||
</div>
|
||||
<div className="text-red-100/90 font-mono text-sm font-bold">
|
||||
Zone 5
|
||||
</div>
|
||||
<div className="text-red-300/60 mt-0.5 leading-tight">
|
||||
Max Effort (90%+)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-amber-500/10 border border-amber-500/20 rounded-lg p-2">
|
||||
<div className="flex items-center gap-1.5 mb-1">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-amber-500"></div>
|
||||
<span className="font-bold text-amber-200 uppercase">
|
||||
Threshold
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-amber-100/90 font-mono text-sm font-bold">
|
||||
Zone 4
|
||||
</div>
|
||||
<div className="text-amber-300/60 mt-0.5 leading-tight">
|
||||
Hard Effort (80-90%)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-purple-500/10 border border-purple-500/20 rounded-lg p-2">
|
||||
<div className="flex items-center gap-1.5 mb-1">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-purple-500"></div>
|
||||
<span className="font-bold text-purple-200 uppercase">
|
||||
Long Run
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-purple-100/90 font-mono text-sm font-bold">
|
||||
Zone 2
|
||||
</div>
|
||||
<div className="text-purple-300/60 mt-0.5 leading-tight">
|
||||
Conversational (60-70%)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-sky-500/10 border border-sky-500/20 rounded-lg p-2">
|
||||
<div className="flex items-center gap-1.5 mb-1">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-sky-500"></div>
|
||||
<span className="font-bold text-sky-200 uppercase">Easy</span>
|
||||
</div>
|
||||
<div className="text-sky-100/90 font-mono text-sm font-bold">
|
||||
Zone 2
|
||||
</div>
|
||||
<div className="text-sky-300/60 mt-0.5 leading-tight">
|
||||
Conversational (60-70%)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-emerald-500/10 border border-emerald-500/20 rounded-lg p-2 flex flex-col justify-center">
|
||||
<div className="flex items-center gap-1.5 mb-1">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-emerald-500"></div>
|
||||
<span className="font-bold text-emerald-200 uppercase">
|
||||
Recovery
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-emerald-100/90 font-mono text-sm font-bold">
|
||||
Zone 1
|
||||
</div>
|
||||
<div className="text-emerald-300/60 leading-tight">
|
||||
Active Recovery (<60%)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Schedule Grid */}
|
||||
<div className="overflow-x-auto pb-4 custom-scrollbar">
|
||||
<div className="min-w-[800px]">
|
||||
<div className="grid grid-cols-8 gap-2 mb-2 text-center">
|
||||
<div className="text-gray-500 font-bold uppercase text-[10px] tracking-wider flex items-center justify-center">
|
||||
Week
|
||||
</div>
|
||||
{DAYS_OF_WEEK.map((day) => (
|
||||
<div
|
||||
key={day}
|
||||
className="text-gray-400 font-bold uppercase text-[10px] tracking-wider"
|
||||
>
|
||||
{day}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{SCHEDULE_DATA.map((week, weekIndex) => (
|
||||
<div
|
||||
key={week.weekNum}
|
||||
className="grid grid-cols-8 gap-2 group hover:bg-white/[0.02] p-1.5 rounded-lg transition-colors"
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center border-r border-white/10 pr-2">
|
||||
<span className="text-xl font-black text-gray-700 group-hover:text-gray-500 transition-colors">
|
||||
{week.weekNum}
|
||||
</span>
|
||||
<span className="text-[9px] text-gray-600 uppercase">
|
||||
Week
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{week.days.map((workout, dayIndex) => (
|
||||
<WorkoutCard
|
||||
key={`${weekIndex}-${dayIndex}`}
|
||||
workout={workout}
|
||||
dayName={DAYS_OF_WEEK[dayIndex]}
|
||||
isCompleted={!!completed[`${weekIndex}-${dayIndex}`]}
|
||||
canEdit={canEdit}
|
||||
onToggle={() => toggleDay(weekIndex, dayIndex)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Register Modal */}
|
||||
{showRegister && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center px-4">
|
||||
<div
|
||||
className="absolute inset-0 bg-black/80 backdrop-blur-sm"
|
||||
onClick={() => {
|
||||
setShowRegister(false);
|
||||
setAuthError("");
|
||||
}}
|
||||
></div>
|
||||
<div className="relative bg-gray-900 border border-gray-700 rounded-2xl w-full max-w-sm p-6 shadow-2xl">
|
||||
<h3 className="text-xl font-bold text-white mb-4">
|
||||
Register Passkey
|
||||
</h3>
|
||||
<input
|
||||
type="text"
|
||||
value={registerName}
|
||||
onChange={(e) => setRegisterName(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && handleRegister()}
|
||||
placeholder="Your name"
|
||||
className="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-orange-500 mb-4"
|
||||
autoFocus
|
||||
/>
|
||||
<div className="flex gap-3 justify-end">
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowRegister(false);
|
||||
setAuthError("");
|
||||
}}
|
||||
className="px-4 py-2 bg-white/10 hover:bg-white/20 text-white rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleRegister}
|
||||
className="px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
104
apps/running/src/components/WorkoutCard.tsx
Normal file
104
apps/running/src/components/WorkoutCard.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
import React from "react";
|
||||
import { Check } from "lucide-react";
|
||||
import { RunType, Workout } from "../types";
|
||||
|
||||
interface WorkoutCardProps {
|
||||
workout: Workout;
|
||||
isCompleted: boolean;
|
||||
canEdit: boolean;
|
||||
onToggle: () => void;
|
||||
dayName?: string;
|
||||
}
|
||||
|
||||
const getColors = (type: RunType): string => {
|
||||
switch (type) {
|
||||
case RunType.SPEED:
|
||||
return "bg-red-500/20 border-red-500/30 text-red-100 hover:bg-red-500/30";
|
||||
case RunType.THRESHOLD:
|
||||
return "bg-amber-500/20 border-amber-500/30 text-amber-100 hover:bg-amber-500/30";
|
||||
case RunType.LONG:
|
||||
return "bg-purple-500/20 border-purple-500/30 text-purple-100 hover:bg-purple-500/30";
|
||||
case RunType.EASY:
|
||||
return "bg-sky-500/20 border-sky-500/30 text-sky-100 hover:bg-sky-500/30";
|
||||
case RunType.ACTIVE_REST:
|
||||
case RunType.CROSS_TRAINING:
|
||||
return "bg-emerald-500/20 border-emerald-500/30 text-emerald-100 hover:bg-emerald-500/30";
|
||||
case RunType.REST:
|
||||
case RunType.SLEEP:
|
||||
return "bg-gray-700/30 border-gray-600/30 text-gray-400 hover:bg-gray-700/40";
|
||||
case RunType.EVENT:
|
||||
return "bg-yellow-400/40 border-yellow-400/50 text-white font-bold shadow-[0_0_15px_rgba(250,204,21,0.3)] hover:bg-yellow-400/50";
|
||||
default:
|
||||
return "bg-gray-800/50 border-gray-700 text-gray-300";
|
||||
}
|
||||
};
|
||||
|
||||
const WorkoutCard: React.FC<WorkoutCardProps> = ({
|
||||
workout,
|
||||
isCompleted,
|
||||
canEdit,
|
||||
onToggle,
|
||||
dayName,
|
||||
}) => {
|
||||
const colorClass = getColors(workout.type);
|
||||
const isRestDay =
|
||||
workout.type === RunType.REST || workout.type === RunType.SLEEP;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
relative p-2 rounded-lg border backdrop-blur-sm transition-all duration-300 group
|
||||
flex flex-col justify-between h-full min-h-[70px]
|
||||
${colorClass}
|
||||
${isCompleted ? "opacity-50 grayscale-[50%]" : "opacity-100"}
|
||||
`}
|
||||
>
|
||||
<div className="flex justify-between items-start mb-0.5">
|
||||
{dayName && (
|
||||
<span className="md:hidden text-[10px] font-bold uppercase tracking-wider opacity-60">
|
||||
{dayName}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-grow flex flex-col justify-center">
|
||||
{workout.duration && (
|
||||
<div className="text-sm font-semibold mb-0.5 leading-none">
|
||||
{workout.duration}
|
||||
</div>
|
||||
)}
|
||||
<div className="text-[10px] uppercase tracking-wide font-medium leading-tight">
|
||||
{workout.note || workout.type}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!isRestDay && (
|
||||
<div className="mt-1 flex items-center justify-end">
|
||||
{canEdit ? (
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className={`
|
||||
flex items-center justify-center w-5 h-5 rounded-full border transition-all duration-300
|
||||
${
|
||||
isCompleted
|
||||
? "bg-green-500 border-green-500 text-black scale-110 shadow-[0_0_10px_rgba(34,197,94,0.6)]"
|
||||
: "border-white/30 hover:border-white/80 hover:bg-white/10"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{isCompleted && <Check className="w-3 h-3" />}
|
||||
</button>
|
||||
) : (
|
||||
isCompleted && (
|
||||
<div className="flex items-center justify-center w-5 h-5 rounded-full bg-green-500 border-green-500 text-black">
|
||||
<Check className="w-3 h-3" />
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkoutCard;
|
||||
89
apps/running/src/constants.ts
Normal file
89
apps/running/src/constants.ts
Normal file
@@ -0,0 +1,89 @@
|
||||
import { RunType, WeekSchedule } from "./types";
|
||||
|
||||
export const SCHEDULE_DATA: WeekSchedule[] = [
|
||||
{
|
||||
weekNum: 1,
|
||||
days: [
|
||||
{ type: RunType.SPEED, duration: "5 min", isKeyWorkout: true },
|
||||
{ type: RunType.ACTIVE_REST },
|
||||
{ type: RunType.EASY, duration: "20 min" },
|
||||
{ type: RunType.ACTIVE_REST },
|
||||
{ type: RunType.CROSS_TRAINING },
|
||||
{ type: RunType.LONG, duration: "40 min" },
|
||||
{ type: RunType.REST },
|
||||
],
|
||||
},
|
||||
{
|
||||
weekNum: 2,
|
||||
days: [
|
||||
{ type: RunType.SPEED, duration: "7.5 min", isKeyWorkout: true },
|
||||
{ type: RunType.ACTIVE_REST },
|
||||
{ type: RunType.EASY, duration: "20 min" },
|
||||
{ type: RunType.ACTIVE_REST },
|
||||
{ type: RunType.CROSS_TRAINING },
|
||||
{ type: RunType.LONG, duration: "45 min" },
|
||||
{ type: RunType.REST },
|
||||
],
|
||||
},
|
||||
{
|
||||
weekNum: 3,
|
||||
days: [
|
||||
{ type: RunType.SPEED, duration: "7.5 min", isKeyWorkout: true },
|
||||
{ type: RunType.ACTIVE_REST },
|
||||
{ type: RunType.EASY, duration: "30 min" },
|
||||
{ type: RunType.EASY, duration: "30 min" },
|
||||
{ type: RunType.CROSS_TRAINING },
|
||||
{ type: RunType.LONG, duration: "50 min" },
|
||||
{ type: RunType.REST },
|
||||
],
|
||||
},
|
||||
{
|
||||
weekNum: 4,
|
||||
days: [
|
||||
{ type: RunType.SPEED, duration: "10 min", isKeyWorkout: true },
|
||||
{ type: RunType.EASY, duration: "30 min" },
|
||||
{ type: RunType.EASY, duration: "15 min" },
|
||||
{ type: RunType.EASY, duration: "30 min" },
|
||||
{ type: RunType.CROSS_TRAINING },
|
||||
{ type: RunType.LONG, duration: "60 min" },
|
||||
{ type: RunType.REST },
|
||||
],
|
||||
},
|
||||
{
|
||||
weekNum: 5,
|
||||
days: [
|
||||
{ type: RunType.SPEED, duration: "12 min", isKeyWorkout: true },
|
||||
{ type: RunType.EASY, duration: "25 min" },
|
||||
{ type: RunType.EASY, duration: "30 min" },
|
||||
{ type: RunType.EASY, duration: "30 min" },
|
||||
{ type: RunType.CROSS_TRAINING },
|
||||
{ type: RunType.LONG, duration: "45 min" },
|
||||
{ type: RunType.REST },
|
||||
],
|
||||
},
|
||||
{
|
||||
weekNum: 6,
|
||||
days: [
|
||||
{ type: RunType.SPEED, duration: "6 min", isKeyWorkout: true },
|
||||
{ type: RunType.ACTIVE_REST },
|
||||
{ type: RunType.EASY, duration: "20 min" },
|
||||
{ type: RunType.EASY, duration: "20 min" },
|
||||
{ type: RunType.REST },
|
||||
{ type: RunType.EVENT, duration: "", note: "Event day!" },
|
||||
{ type: RunType.SLEEP },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const DAYS_OF_WEEK = [
|
||||
"Monday",
|
||||
"Tuesday",
|
||||
"Wednesday",
|
||||
"Thursday",
|
||||
"Friday",
|
||||
"Saturday",
|
||||
"Sunday",
|
||||
];
|
||||
|
||||
export const BACKGROUND_IMAGE =
|
||||
"https://images.unsplash.com/photo-1464822759023-fed622ff2c3b";
|
||||
21
apps/running/src/index.html
Normal file
21
apps/running/src/index.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Summit Stride 5K</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-track { background: #1a1a1a; }
|
||||
::-webkit-scrollbar-thumb { background: #4a4a4a; border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #555; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-black text-white">
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
15
apps/running/src/index.tsx
Normal file
15
apps/running/src/index.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App";
|
||||
|
||||
const rootElement = document.getElementById("root");
|
||||
if (!rootElement) {
|
||||
throw new Error("Could not find root element to mount to");
|
||||
}
|
||||
|
||||
const root = ReactDOM.createRoot(rootElement);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
24
apps/running/src/package.json
Normal file
24
apps/running/src/package.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "summit-stride-frontend",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@simplewebauthn/browser": "^11.0.0",
|
||||
"lucide-react": "^0.563.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.0.0",
|
||||
"@types/react-dom": "^19.0.0",
|
||||
"@vitejs/plugin-react": "^4.3.0",
|
||||
"typescript": "~5.6.0",
|
||||
"vite": "^6.0.0"
|
||||
}
|
||||
}
|
||||
14
apps/running/src/tsconfig.json
Normal file
14
apps/running/src/tsconfig.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"jsx": "react-jsx",
|
||||
"allowImportingTsExtensions": true,
|
||||
"noEmit": true
|
||||
}
|
||||
}
|
||||
31
apps/running/src/types.ts
Normal file
31
apps/running/src/types.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
export enum RunType {
|
||||
SPEED = "Speed Work",
|
||||
THRESHOLD = "Threshold Work",
|
||||
LONG = "Long Run",
|
||||
EASY = "Easy Run",
|
||||
ACTIVE_REST = "Active Rest",
|
||||
CROSS_TRAINING = "Cross-training",
|
||||
REST = "Rest",
|
||||
EVENT = "Event Day",
|
||||
SLEEP = "Sleep",
|
||||
}
|
||||
|
||||
export interface Workout {
|
||||
type: RunType;
|
||||
duration?: string;
|
||||
note?: string;
|
||||
isKeyWorkout?: boolean;
|
||||
}
|
||||
|
||||
export interface WeekSchedule {
|
||||
weekNum: number;
|
||||
days: Workout[];
|
||||
}
|
||||
|
||||
export type CompletionState = Record<string, boolean>;
|
||||
|
||||
export interface AuthUser {
|
||||
id: number;
|
||||
username: string;
|
||||
approved: number;
|
||||
}
|
||||
21
apps/running/src/vite.config.ts
Normal file
21
apps/running/src/vite.config.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import path from "path";
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
export default defineConfig({
|
||||
base: "/running/",
|
||||
plugins: [react()],
|
||||
build: {
|
||||
outDir: "dist",
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
"/api": "http://localhost:8080",
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": path.resolve(__dirname, "."),
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user