Add multi-user support with export feature

- New users table (migration 004) with user_id on exercises, training_sets, sessions - User CRUD endpoints (GET/POST /api/v1/users, DELETE /api/v1/users/{id}) - All existing endpoints scoped to X-User-ID header - CSV export endpoint (GET /api/v1/export) for completed sessions - UserGate in PageShell: blocks app until a user is selected - Settings page for managing users (create, switch, delete) - BottomNav/Sidebar updated with settings navigation - Fix: nil pointer panic in handleDeleteUser on success path - Fix: export download now uses fetch with X-User-ID header instead of window.location.href Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-21 23:55:51 +01:00
parent bff85908c3
commit a954f2c59d
24 changed files with 793 additions and 95 deletions
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -4,6 +4,7 @@ import { ExercisesPage } from './pages/ExercisesPage';
 import { SetsPage } from './pages/SetsPage';
 import { TrainingPage } from './pages/TrainingPage';
 import { HistoryPage } from './pages/HistoryPage';
+import { SettingsPage } from './pages/SettingsPage';

 const router = createBrowserRouter([
  {
@@ -13,6 +14,7 @@ const router = createBrowserRouter([
      { path: '/sets', element: <SetsPage /> },
      { path: '/training', element: <TrainingPage /> },
      { path: '/history', element: <HistoryPage /> },
+      { path: '/settings', element: <SettingsPage /> },
    ],
  },
 ]);
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -5,6 +5,7 @@ import type {
  SessionLog,
  LastLogResponse,
  ExerciseStats,
+  User,
  CreateExerciseRequest,
  CreateSetRequest,
  UpdateSetRequest,
@@ -12,6 +13,7 @@ import type {
  CreateLogRequest,
  UpdateLogRequest,
 } from '../types';
+import { getActiveUserId } from '../stores/userStore';

 export class ApiError extends Error {
  constructor(
@@ -27,8 +29,12 @@ async function request<T>(
  url: string,
  options?: RequestInit,
 ): Promise<T> {
+  const headers: Record<string, string> = { 'Content-Type': 'application/json' };
+  const uid = getActiveUserId();
+  if (uid) headers['X-User-ID'] = uid;
+
  const res = await fetch(url, {
-    headers: { 'Content-Type': 'application/json' },
+    headers,
    ...options,
  });

@@ -46,6 +52,21 @@ async function request<T>(
 }

 export const api = {
+  users: {
+    list(): Promise<User[]> {
+      return request<User[]>('/api/v1/users');
+    },
+    create(name: string): Promise<User> {
+      return request<User>('/api/v1/users', {
+        method: 'POST',
+        body: JSON.stringify({ name }),
+      });
+    },
+    delete(id: number): Promise<void> {
+      return request<void>(`/api/v1/users/${id}`, { method: 'DELETE' });
+    },
+  },
+
  exercises: {
    list(muscleGroup?: string, q?: string): Promise<Exercise[]> {
      const params = new URLSearchParams();
--- a/frontend/src/components/layout/BottomNav.tsx
+++ b/frontend/src/components/layout/BottomNav.tsx
@@ -1,4 +1,5 @@
 import { NavLink } from 'react-router-dom';
+import { useUserStore } from '../../stores/userStore';

 const navItems = [
  {
@@ -37,6 +38,16 @@ const navItems = [
      </svg>
    ),
  },
+  {
+    to: '/settings',
+    label: 'Einstellungen',
+    icon: (
+      <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+        <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+      </svg>
+    ),
+  },
 ];

 export function BottomNav() {
@@ -64,10 +75,12 @@ export function BottomNav() {
 }

 export function Sidebar() {
+  const { activeUser } = useUserStore();
+
  return (
    <nav className="hidden md:flex flex-col w-56 bg-gray-900 border-r border-gray-800 min-h-screen p-4">
      <h1 className="text-xl font-bold text-blue-500 mb-8">Krafttrainer</h1>
-      <div className="flex flex-col gap-1">
+      <div className="flex flex-col gap-1 flex-1">
        {navItems.map((item) => (
          <NavLink
            key={item.to}
@@ -86,6 +99,14 @@ export function Sidebar() {
          </NavLink>
        ))}
      </div>
+      {activeUser && (
+        <div className="pt-4 border-t border-gray-800 flex items-center gap-2">
+          <div className="w-7 h-7 rounded-full bg-blue-600 flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
+            {activeUser.name.charAt(0).toUpperCase()}
+          </div>
+          <span className="text-sm text-gray-300 truncate">{activeUser.name}</span>
+        </div>
+      )}
    </nav>
  );
 }
--- a/frontend/src/components/layout/PageShell.tsx
+++ b/frontend/src/components/layout/PageShell.tsx
@@ -1,18 +1,108 @@
+import { useEffect, useState } from 'react';
 import { Outlet } from 'react-router-dom';
 import { BottomNav, Sidebar } from './BottomNav';
 import { ToastContainer } from './Toast';
+import { useUserStore } from '../../stores/userStore';
+
+function UserGate({ children }: { children: React.ReactNode }) {
+  const { users, activeUser, setActiveUser, fetchUsers, createUser } = useUserStore();
+  const [newName, setNewName] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [fetched, setFetched] = useState(false);
+
+  useEffect(() => {
+    fetchUsers().then(() => setFetched(true));
+  }, [fetchUsers]);
+
+  if (!fetched) {
+    return (
+      <div className="min-h-screen bg-gray-950 flex items-center justify-center">
+        <div className="text-gray-400">Laden…</div>
+      </div>
+    );
+  }
+
+  if (!activeUser) {
+    async function handleCreate(e: React.FormEvent) {
+      e.preventDefault();
+      const name = newName.trim();
+      if (!name) return;
+      setLoading(true);
+      const user = await createUser(name);
+      setLoading(false);
+      if (user) setActiveUser(user);
+    }
+
+    return (
+      <div className="min-h-screen bg-gray-950 flex items-center justify-center px-4">
+        <div className="w-full max-w-sm space-y-6">
+          <div className="text-center">
+            <h1 className="text-3xl font-bold text-blue-500 mb-1">Krafttrainer</h1>
+            <p className="text-gray-400">Wer trainiert heute?</p>
+          </div>
+
+          {users.length > 0 && (
+            <ul className="space-y-2">
+              {users.map((user) => (
+                <li key={user.id}>
+                  <button
+                    onClick={() => setActiveUser(user)}
+                    className="w-full flex items-center gap-3 bg-gray-900 hover:bg-gray-800 rounded-lg px-4 py-3 min-h-[56px] transition-colors text-left"
+                  >
+                    <div className="w-9 h-9 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold text-sm flex-shrink-0">
+                      {user.name.charAt(0).toUpperCase()}
+                    </div>
+                    <span className="text-gray-100 font-medium">{user.name}</span>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+
+          <form onSubmit={handleCreate} className="space-y-3">
+            <p className="text-sm text-gray-400">
+              {users.length === 0 ? 'Ersten Nutzer anlegen:' : 'Oder neuen Nutzer anlegen:'}
+            </p>
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={newName}
+                onChange={(e) => setNewName(e.target.value)}
+                placeholder="Name"
+                maxLength={50}
+                autoFocus
+                className="flex-1 bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-gray-100 placeholder-gray-500 focus:outline-none focus:border-blue-500 min-h-[44px]"
+              />
+              <button
+                type="submit"
+                disabled={loading || !newName.trim()}
+                className="px-4 py-2 bg-blue-600 hover:bg-blue-500 disabled:opacity-50 text-white rounded-lg font-medium min-h-[44px] transition-colors"
+              >
+                Los
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+}

 export function PageShell() {
  return (
-    <div className="flex min-h-screen">
-      <Sidebar />
-      <main className="flex-1 pb-20 md:pb-0">
-        <div className="max-w-2xl mx-auto px-4 py-6">
-          <Outlet />
-        </div>
-      </main>
-      <BottomNav />
-      <ToastContainer />
-    </div>
+    <UserGate>
+      <div className="flex min-h-screen">
+        <Sidebar />
+        <main className="flex-1 pb-20 md:pb-0">
+          <div className="max-w-2xl mx-auto px-4 py-6">
+            <Outlet />
+          </div>
+        </main>
+        <BottomNav />
+        <ToastContainer />
+      </div>
+    </UserGate>
  );
 }
--- a/frontend/src/pages/HistoryPage.tsx
+++ b/frontend/src/pages/HistoryPage.tsx
@@ -1,15 +1,47 @@
 import { useState } from 'react';
 import { SessionList } from '../components/history/SessionList';
 import { ExerciseChart } from '../components/history/ExerciseChart';
+import { getActiveUserId } from '../stores/userStore';

 type Tab = 'history' | 'stats';

+async function downloadExport() {
+  const uid = getActiveUserId();
+  const headers: Record<string, string> = {};
+  if (uid) headers['X-User-ID'] = uid;
+
+  const res = await fetch('/api/v1/export', { headers });
+  if (!res.ok) return;
+
+  const blob = await res.blob();
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `training-export-${new Date().toISOString().slice(0, 10)}.csv`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
 export function HistoryPage() {
  const [activeTab, setActiveTab] = useState<Tab>('history');

  return (
    <div className="space-y-4">
-      <h1 className="text-2xl font-bold text-gray-100">Historie</h1>
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold text-gray-100">Historie</h1>
+        <button
+          onClick={downloadExport}
+          className="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-800 text-gray-300 hover:text-white hover:bg-gray-700 text-sm min-h-[44px] transition-colors"
+          title="Trainingsdaten als CSV exportieren"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+          </svg>
+          Export CSV
+        </button>
+      </div>

      {/* Tab Toggle */}
      <div className="flex bg-gray-900 rounded-lg p-1">
--- a/frontend/src/pages/SettingsPage.tsx
+++ b/frontend/src/pages/SettingsPage.tsx
@@ -0,0 +1,95 @@
+import { useEffect, useState } from 'react';
+import { useUserStore } from '../stores/userStore';
+
+export function SettingsPage() {
+  const { users, activeUser, setActiveUser, fetchUsers, createUser, deleteUser } =
+    useUserStore();
+  const [newName, setNewName] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    fetchUsers();
+  }, [fetchUsers]);
+
+  async function handleCreate(e: React.FormEvent) {
+    e.preventDefault();
+    const name = newName.trim();
+    if (!name) return;
+    setLoading(true);
+    const user = await createUser(name);
+    setLoading(false);
+    if (user) setNewName('');
+  }
+
+  async function handleDelete(id: number) {
+    await deleteUser(id);
+  }
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-bold text-gray-100">Einstellungen</h1>
+
+      <section className="space-y-3">
+        <h2 className="text-lg font-semibold text-gray-200">Nutzer</h2>
+
+        <ul className="space-y-2">
+          {users.map((user) => (
+            <li
+              key={user.id}
+              className="flex items-center justify-between bg-gray-900 rounded-lg px-4 py-3"
+            >
+              <button
+                onClick={() => setActiveUser(user)}
+                className="flex items-center gap-3 flex-1 text-left"
+              >
+                <div
+                  className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold ${
+                    activeUser?.id === user.id
+                      ? 'bg-blue-600 text-white'
+                      : 'bg-gray-700 text-gray-300'
+                  }`}
+                >
+                  {user.name.charAt(0).toUpperCase()}
+                </div>
+                <span className="text-gray-100">{user.name}</span>
+                {activeUser?.id === user.id && (
+                  <span className="text-xs text-blue-400 font-medium">Aktiv</span>
+                )}
+              </button>
+
+              {users.length > 1 && (
+                <button
+                  onClick={() => handleDelete(user.id)}
+                  className="p-2 text-gray-500 hover:text-red-400 transition-colors min-h-[44px] min-w-[44px] flex items-center justify-center"
+                  title="Nutzer löschen"
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                  </svg>
+                </button>
+              )}
+            </li>
+          ))}
+        </ul>
+
+        <form onSubmit={handleCreate} className="flex gap-2">
+          <input
+            type="text"
+            value={newName}
+            onChange={(e) => setNewName(e.target.value)}
+            placeholder="Neuer Nutzername"
+            maxLength={50}
+            className="flex-1 bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-gray-100 placeholder-gray-500 focus:outline-none focus:border-blue-500 min-h-[44px]"
+          />
+          <button
+            type="submit"
+            disabled={loading || !newName.trim()}
+            className="px-4 py-2 bg-blue-600 hover:bg-blue-500 disabled:opacity-50 text-white rounded-lg font-medium min-h-[44px] transition-colors"
+          >
+            Hinzufügen
+          </button>
+        </form>
+      </section>
+    </div>
+  );
+}
--- a/frontend/src/stores/userStore.ts
+++ b/frontend/src/stores/userStore.ts
@@ -0,0 +1,71 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { User } from '../types';
+
+interface UserState {
+  users: User[];
+  activeUser: User | null;
+  setActiveUser: (user: User) => void;
+  fetchUsers: () => Promise<void>;
+  createUser: (name: string) => Promise<User | null>;
+  deleteUser: (id: number) => Promise<boolean>;
+}
+
+export const useUserStore = create<UserState>()(
+  persist(
+    (set, get) => ({
+      users: [],
+      activeUser: null,
+
+      setActiveUser: (user) => set({ activeUser: user }),
+
+      fetchUsers: async () => {
+        const res = await fetch('/api/v1/users', {
+          headers: { 'Content-Type': 'application/json' },
+        });
+        if (!res.ok) return;
+        const users: User[] = await res.json();
+        set({ users });
+
+        // Aktiven Nutzer aktualisieren falls er sich geändert hat
+        const { activeUser } = get();
+        if (activeUser) {
+          const updated = users.find((u) => u.id === activeUser.id);
+          if (updated) set({ activeUser: updated });
+        }
+      },
+
+      createUser: async (name) => {
+        const res = await fetch('/api/v1/users', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ name }),
+        });
+        if (!res.ok) return null;
+        const user: User = await res.json();
+        set((s) => ({ users: [...s.users, user] }));
+        return user;
+      },
+
+      deleteUser: async (id) => {
+        const res = await fetch(`/api/v1/users/${id}`, { method: 'DELETE' });
+        if (!res.ok) return false;
+        set((s) => ({
+          users: s.users.filter((u) => u.id !== id),
+          activeUser: s.activeUser?.id === id ? null : s.activeUser,
+        }));
+        return true;
+      },
+    }),
+    {
+      name: 'user-store',
+      partialize: (state) => ({ activeUser: state.activeUser }),
+    },
+  ),
+);
+
+// Gibt die aktive User-ID zurück — wird von api/client.ts verwendet.
+export function getActiveUserId(): string | null {
+  const { activeUser } = useUserStore.getState();
+  return activeUser ? String(activeUser.id) : null;
+}
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -121,6 +121,16 @@ export interface CreateSessionRequest {
  set_id: number;
 }

+export interface User {
+  id: number;
+  name: string;
+  created_at: string;
+}
+
+export interface CreateUserRequest {
+  name: string;
+}
+
 export interface CreateLogRequest {
  exercise_id: number;
  set_number: number;