chore: Repo-Struktur mit frontend/ und backend/ aufsetzen
Die SvelteKit-App liegt unter frontend/, das Backend unter backend/ als eigenständige PocketBase-Instanz mit Dockerfile, docker-compose und versioniertem Schema. - PocketBase-URL über PUBLIC_PB_URL konfigurierbar, Default bleibt die produktive Instanz https://api.stammtisch-hersbruck.de - Schema als Snapshot-Migration der sechs fachlichen Collections (users, teams, events, runs, riders, times), abgezogen von der produktiven Instanz. Verifiziert: ein Erststart gegen leere pb_data legt alle sechs an, Felder und API-Rules stimmen überein. - pb_data und pb_migrations als Bind-Mounts, damit Daten persistieren und im Admin-UI erzeugte Migrationen im Repo landen - Veraltete Dokumentation entfernt: pocketbase_schema.json nannte Collections (stages, results, organizers), die es nicht gibt Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Daniel Michelberger
commit
1061a8b9ad
130 changed files with 15408 additions and 0 deletions
32
.gitignore
vendored
Normal file
32
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
# Dependencies
|
||||
node_modules
|
||||
|
||||
# Build-Output
|
||||
.output
|
||||
.vercel
|
||||
.netlify
|
||||
.wrangler
|
||||
.svelte-kit
|
||||
build
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Env — enthält Tokens, gehört nie ins Repo
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Vite
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
||||
|
||||
# PocketBase-Laufzeitdaten
|
||||
backend/pb_data/
|
||||
*.db
|
||||
# Auto-Backups, die PocketBase beim Start anlegt
|
||||
backups/
|
||||
|
||||
# IDE
|
||||
.idea/
|
||||
136
CLAUDE.md
Normal file
136
CLAUDE.md
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
|
||||
## Project Overview
|
||||
|
||||
stammtisch-hersbruck.de is a SvelteKit 5 application using Svelte 5's new runes syntax ($state, $props, etc.) with PocketBase as the backend. The app manages events, runs, riders, times and teams for a motorsport/cycling event organization.
|
||||
|
||||
The repository is a monorepo: the SvelteKit app lives in `frontend/`, the PocketBase instance in `backend/`.
|
||||
|
||||
## Development Commands
|
||||
|
||||
Alle Frontend-Befehle laufen aus `frontend/`:
|
||||
|
||||
```bash
|
||||
cd frontend
|
||||
|
||||
# Start development server (runs on http://stammtisch-hersbruck.de.localhost:31337)
|
||||
npm run dev
|
||||
|
||||
# Build for production
|
||||
npm run build
|
||||
|
||||
# Preview production build
|
||||
npm run preview
|
||||
|
||||
# Type-check Svelte files
|
||||
npm run check
|
||||
|
||||
# Type-check with watch mode
|
||||
npm run check:watch
|
||||
|
||||
# Generate TypeScript types from PocketBase schema
|
||||
npm run generate-pocketbase-types
|
||||
```
|
||||
|
||||
Backend (PocketBase) aus `backend/`:
|
||||
|
||||
```bash
|
||||
cd backend
|
||||
|
||||
# PocketBase lokal starten (Admin-UI auf http://127.0.0.1:8090/_/)
|
||||
docker compose up -d --build
|
||||
|
||||
# Stoppen
|
||||
docker compose down
|
||||
```
|
||||
|
||||
## Architecture
|
||||
|
||||
### Backend Integration (PocketBase)
|
||||
|
||||
- **API Base URL**: konfigurierbar über `PUBLIC_PB_URL` in `frontend/.env`.
|
||||
Default ist die produktive Instanz `https://api.stammtisch-hersbruck.de`;
|
||||
für das lokale Backend aus `backend/` auf `http://127.0.0.1:8090` umstellen.
|
||||
- **Schema**: versioniert als Migration in `backend/pb_migrations/`. Änderungen
|
||||
im Admin-UI erzeugen dort neue Dateien, die committet werden müssen.
|
||||
- **Type-safe client**: The PocketBase client is typed using auto-generated types in `frontend/src/lib/types.d.ts`
|
||||
- **Collections**: users, teams, events, runs, riders, times
|
||||
- **Authentication**: Handled through `src/lib/stores/pocketbase.svelte.ts` with the `AuthStore` class
|
||||
- **File handling**: Use `getFileURL(record, file, options)` helper for PocketBase file URLs
|
||||
|
||||
### State Management Pattern
|
||||
|
||||
The app uses Svelte 5 runes for state management with a custom store pattern:
|
||||
|
||||
1. **Global stores** in `src/lib/stores/`:
|
||||
- `pocketbase.svelte.ts`: PocketBase client, auth, and collection operations
|
||||
- `app.svelte.ts`: Global app state (theme, navigation, confirm dialogs, hotkeys)
|
||||
- `teams.svelte.ts`: Example of collection-specific store pattern
|
||||
|
||||
2. **Collection store pattern**:
|
||||
- Each collection has a context-based store (see `teams.svelte.ts` as template)
|
||||
- Use `setTeamContext()` in parent and `getTeamContext()` in children
|
||||
- Stores provide: `records`, `refresh()`, `create()`, `edit()`, `remove()`
|
||||
- The `collections` helper in `pocketbase.svelte.ts` provides reusable CRUD operations
|
||||
|
||||
3. **Auth flow**:
|
||||
- Auth state lives in `auth` store from `pocketbase.svelte.ts`
|
||||
- Cookie-based persistence available via `auth.cookie` flag
|
||||
- Auth store syncs with PocketBase `authStore.onChange()`
|
||||
|
||||
### UI Components
|
||||
|
||||
- **UI Library**: Using shadcn-svelte components (bits-ui based)
|
||||
- **Component path alias**: `@/components/ui/*` maps to `$lib/components/ui/*`
|
||||
- **Styling**: Tailwind CSS 4.x with custom configuration
|
||||
- **Dark mode**: Handled by `mode-watcher` package, toggle with `toggleMode()`
|
||||
- **Tooltips**: Global `tooltip` action available from `app.svelte.ts` using tippy.js
|
||||
|
||||
### Important Patterns
|
||||
|
||||
**Svelte 5 Runes**: This project uses Svelte 5 syntax exclusively:
|
||||
- `$state()` for reactive state (not `let` with `$:`)
|
||||
- `$props()` for component props
|
||||
- `$derived()` for computed values
|
||||
- `{@render children?.()}` for slot content
|
||||
|
||||
**Type Generation**: After modifying PocketBase schema, run `npm run generate-pocketbase-types` to update TypeScript types.
|
||||
|
||||
**Async Data Loading**: Root layout (`src/routes/+layout.svelte`) shows pattern:
|
||||
```svelte
|
||||
{#await load()}
|
||||
<!-- loading state -->
|
||||
{:then _}
|
||||
<!-- main content -->
|
||||
{/await}
|
||||
```
|
||||
|
||||
**Confirm Dialogs**: Use `app.confirm.request()` for user confirmations (see `events.svelte.ts` remove pattern).
|
||||
|
||||
**Hotkeys**: Use `app.hotkey(event, condition, callback)` which auto-ignores input fields and contenteditable elements.
|
||||
|
||||
### Project Configuration
|
||||
|
||||
- **Repo-Struktur**: Monorepo mit `frontend/` (SvelteKit) und `backend/`
|
||||
(PocketBase). Ein einziges Git-Repo im Root.
|
||||
- **Dev server port**: 31337 (strict mode, custom domain: `stammtisch-hersbruck.de.localhost`)
|
||||
- **Path alias**: `@/*` resolves to `./src/lib/*` (configured in frontend/svelte.config.js)
|
||||
- **Adapter**: @sveltejs/adapter-auto (auto-detects deployment platform)
|
||||
|
||||
### File Structure Notes
|
||||
|
||||
- Routes are in `src/routes/` following SvelteKit conventions
|
||||
- Reusable components in `src/lib/components/`
|
||||
- Stores use `.svelte.ts` extension for Svelte 5 runes
|
||||
- Static assets in `static/`
|
||||
- `components.json` configures shadcn-svelte CLI
|
||||
|
||||
## When Working with This Codebase
|
||||
|
||||
- Always use Svelte 5 runes syntax, never legacy Svelte syntax
|
||||
- Use the official Svelte MCP server to validate Svelte code
|
||||
- Collection stores should follow the pattern in `teams.svelte.ts`
|
||||
- PocketBase operations go through the `collections` helper for consistency
|
||||
- UI components should use the shadcn-svelte imports from `@/components/ui/`
|
||||
39
README.md
Normal file
39
README.md
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
# stammtisch-hersbruck.de
|
||||
|
||||
Zeitmessung und Verwaltung für Läufe des Stammtisch Hersbruck.
|
||||
|
||||
Das Repository enthält beide Teile der Anwendung:
|
||||
|
||||
| Verzeichnis | Inhalt |
|
||||
|---|---|
|
||||
| [`frontend/`](frontend/) | SvelteKit-5-Anwendung (Svelte 5 Runes, Tailwind 4) |
|
||||
| [`backend/`](backend/) | PocketBase-Instanz — Dockerfile, Schema-Migrationen |
|
||||
|
||||
## Schnellstart
|
||||
|
||||
Frontend gegen die produktive Instanz:
|
||||
|
||||
cd frontend
|
||||
cp .env.example .env # Werte eintragen
|
||||
npm ci
|
||||
npm run dev
|
||||
|
||||
Die App läuft dann auf http://stammtisch-hersbruck.de.localhost:31337
|
||||
|
||||
Backend lokal (optional — der Default zeigt auf die produktive Instanz):
|
||||
|
||||
cd backend
|
||||
cp .env.example .env # Werte eintragen
|
||||
docker compose up -d --build
|
||||
|
||||
Danach in `frontend/.env` `PUBLIC_PB_URL=http://127.0.0.1:8090` setzen.
|
||||
|
||||
Details stehen in [`backend/README.md`](backend/README.md).
|
||||
|
||||
## PocketBase
|
||||
|
||||
Produktiv: https://api.stammtisch-hersbruck.de
|
||||
|
||||
Welche Instanz das Frontend anspricht, entscheidet `PUBLIC_PB_URL` in
|
||||
`frontend/.env`. Das Schema ist als Migration in `backend/pb_migrations/`
|
||||
versioniert.
|
||||
BIN
UML_basic.png
Normal file
BIN
UML_basic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
17
backend/.env.example
Normal file
17
backend/.env.example
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
# Vorlage für die lokale .env — kopieren und ausfüllen:
|
||||
# cp .env.example .env
|
||||
#
|
||||
# Diese Datei enthält nur Platzhalter und ist versioniert. Die echte .env steht
|
||||
# in .gitignore und darf nicht committet werden.
|
||||
|
||||
# Admin-Zugang, wird nur beim allerersten Start angelegt. Existiert der Account
|
||||
# bereits, bleibt das Passwort unverändert — spätere Änderungen gehören ins
|
||||
# Admin-UI, nicht in diese Datei. Mindestens 8 Zeichen.
|
||||
# Beide Variablen weglassen = PocketBase gibt beim ersten Start einen
|
||||
# Installer-Link im Log aus (30 Minuten gültig).
|
||||
SUPERUSER_EMAIL=admin@example.de
|
||||
SUPERUSER_PASSWORD=bitte-aendern-min-8-zeichen
|
||||
|
||||
# Optional: überschreibt den in docker-compose.yaml gepinnten Default.
|
||||
# Nur setzen, wenn bewusst eine andere PocketBase-Version gebaut werden soll.
|
||||
#PB_VERSION=0.39.6
|
||||
6
backend/.gitignore
vendored
Normal file
6
backend/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
pb_data/
|
||||
*.db
|
||||
.DS_Store
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
25
backend/Dockerfile
Normal file
25
backend/Dockerfile
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
FROM alpine:3.21
|
||||
|
||||
# Version bewusst gepinnt: Der GitHub-Asset heißt
|
||||
# pocketbase_<version>_linux_amd64.zip, ein "latest" gibt es nicht. Ohne Pin
|
||||
# zöge jeder Redeploy unangekündigt eine neue Version inklusive möglicher
|
||||
# DB-Schema-Migrationen.
|
||||
ARG PB_VERSION=0.39.6
|
||||
|
||||
RUN apk add --no-cache ca-certificates unzip wget
|
||||
|
||||
RUN wget -q https://github.com/pocketbase/pocketbase/releases/download/v${PB_VERSION}/pocketbase_${PB_VERSION}_linux_amd64.zip -O /tmp/pb.zip \
|
||||
&& unzip /tmp/pb.zip -d /pb/ \
|
||||
&& rm /tmp/pb.zip
|
||||
|
||||
COPY ./pb_migrations /pb/pb_migrations
|
||||
COPY ./pb_hooks /pb/pb_hooks
|
||||
|
||||
COPY ./entrypoint.sh /pb/entrypoint.sh
|
||||
RUN chmod +x /pb/entrypoint.sh
|
||||
|
||||
EXPOSE 8090
|
||||
|
||||
ENTRYPOINT ["/pb/entrypoint.sh"]
|
||||
|
||||
CMD ["/pb/pocketbase", "serve", "--http=0.0.0.0:8090", "--dir=/pb/pb_data", "--migrationsDir=/pb/pb_migrations", "--hooksDir=/pb/pb_hooks"]
|
||||
90
backend/README.md
Normal file
90
backend/README.md
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
# stammtisch-hersbruck.de — Backend (PocketBase)
|
||||
|
||||
PocketBase-Instanz für Events, Läufe, Fahrer, Zeiten und Teams.
|
||||
|
||||
## Lokal starten
|
||||
|
||||
`.env` aus der Vorlage anlegen (die `.env` selbst steht in `.gitignore`):
|
||||
|
||||
cp .env.example .env
|
||||
|
||||
und die Werte eintragen — `.env.example` beschreibt jede Variable. Dann:
|
||||
|
||||
docker compose up -d --build
|
||||
|
||||
Admin-UI: http://127.0.0.1:8090/_/ — Login mit `SUPERUSER_EMAIL`/`SUPERUSER_PASSWORD`.
|
||||
|
||||
Damit das Frontend gegen diese Instanz läuft, in `../frontend/.env`
|
||||
`PUBLIC_PB_URL=http://127.0.0.1:8090` setzen.
|
||||
|
||||
## Schema
|
||||
|
||||
Das Schema liegt als versionierte Migration in `pb_migrations/` und wird beim
|
||||
Start automatisch angewendet. Es enthält die sechs fachlichen Collections
|
||||
`users`, `teams`, `events`, `runs`, `riders`, `times`.
|
||||
|
||||
`1754400000_init_schema.js` ist ein Snapshot der produktiven Instanz. Er wurde
|
||||
per `GET /api/collections` abgezogen und ruft `importCollections` mit
|
||||
`deleteMissing = false` auf — die Migration legt an und aktualisiert, löscht
|
||||
aber nichts, was nicht im Snapshot steht.
|
||||
|
||||
Schema-Änderungen im Admin-UI erzeugen in `pb_migrations/` neue Dateien; diese
|
||||
müssen committet werden.
|
||||
|
||||
Ein frisch gestarteter Container hat damit dasselbe Schema wie die produktive
|
||||
Instanz — aber **keine** Daten.
|
||||
|
||||
## Datenpersistenz
|
||||
|
||||
Sämtliche Laufzeitdaten liegen in der SQLite-DB unter `/pb/pb_data`: Datensätze,
|
||||
Uploads, die SMTP-Einstellungen und der Superuser. Ohne gemountetes Volume auf
|
||||
diesem Pfad sind sie nach jedem Redeploy verloren.
|
||||
|
||||
Das Volume-Mapping `./pb_data:/pb/pb_data` steht in der `docker-compose.yaml`,
|
||||
damit die Persistenz-Konfiguration versioniert im Repo liegt.
|
||||
|
||||
**Trügerisches Signal:** Die Collections kommen aus der Migration und sind nach
|
||||
einem Redeploy auch dann da, wenn gar kein Volume existiert. Sie taugen **nicht**
|
||||
als Nachweis funktionierender Persistenz — das zeigt nur ein Datensatz, der in
|
||||
keiner Migration steht.
|
||||
|
||||
Mount prüfen:
|
||||
|
||||
docker inspect <container> --format '{{json .Mounts}}' | jq
|
||||
|
||||
Erscheint dort kein Eintrag mit `"Destination": "/pb/pb_data"`, fehlt die Persistenz.
|
||||
|
||||
`pb_data/` steht in `.gitignore` und gehört dort auch hin.
|
||||
|
||||
## Superuser-Verhalten
|
||||
|
||||
`entrypoint.sh` ruft `superuser create` auf — bewusst **nicht** `upsert`.
|
||||
Existiert der Account bereits, scheitert `create` mit „Value must be unique" und
|
||||
das Passwort bleibt unangetastet. Eine im Admin-UI vorgenommene
|
||||
Passwortänderung überlebt damit jeden Redeploy.
|
||||
|
||||
| Situation | Verhalten |
|
||||
|---|---|
|
||||
| Erster Start, Variablen gesetzt | Superuser wird angelegt |
|
||||
| Neustart, Account existiert | „Superuser existiert bereits — Passwort bleibt unverändert" |
|
||||
| Passwort im UI geändert, dann Neustart | UI-Passwort gilt weiter, Env wird ignoriert |
|
||||
| Variablen nicht gesetzt | Übersprungen, PocketBase gibt Installer-Link im Log aus |
|
||||
| Passwort zu kurz (< 8 Zeichen) | Container bricht mit Exitcode 1 ab |
|
||||
|
||||
Passwort später ändern: **im Admin-UI**, nicht über die Env — eine Änderung der
|
||||
Env-Variable hat keine Wirkung mehr, sobald der Account existiert.
|
||||
|
||||
## PocketBase aktualisieren
|
||||
|
||||
Die Version ist über das Build-Arg `PB_VERSION` gepinnt (Dockerfile und
|
||||
`docker-compose.yaml`). Wert hochsetzen, committen, neu bauen.
|
||||
|
||||
Ein `latest` gibt es bewusst nicht: Der GitHub-Asset heißt
|
||||
`pocketbase_<version>_linux_amd64.zip`, enthält die Version also im Dateinamen.
|
||||
Der Pin ist auch gewollt — sonst zieht jeder Rebuild unangekündigt eine neue
|
||||
Version, inklusive möglicher DB-Schema-Migrationen.
|
||||
|
||||
Vor einem Update: Changelog prüfen
|
||||
(https://github.com/pocketbase/pocketbase/releases) und `pb_data` sichern —
|
||||
PocketBase migriert die DB beim Start automatisch, ein Downgrade ist danach
|
||||
nicht mehr ohne Weiteres möglich.
|
||||
32
backend/docker-compose.yaml
Normal file
32
backend/docker-compose.yaml
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
services:
|
||||
pocketbase:
|
||||
build:
|
||||
context: .
|
||||
args:
|
||||
# Version-Pin. Update: hier bzw. im Dockerfile hochsetzen und committen.
|
||||
PB_VERSION: ${PB_VERSION:-0.39.6}
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "8090:8090"
|
||||
volumes:
|
||||
# Persistenz der SQLite-DB inklusive aller Laufzeitdaten, Uploads,
|
||||
# Mail-Settings und des Superusers. Ohne dieses Mapping ist nach jedem
|
||||
# Redeploy alles weg — das Schema käme zwar aus pb_migrations zurück,
|
||||
# die Daten aber nicht.
|
||||
- ./pb_data:/pb/pb_data
|
||||
# Migrationen zurück auf den Host. Ohne dieses Mapping schreibt PocketBase
|
||||
# die bei Schema-Änderungen im Admin-UI erzeugten Dateien nur ins
|
||||
# Container-Dateisystem — sie wären beim nächsten Build verloren und
|
||||
# könnten nie committet werden. Das COPY im Dockerfile bleibt trotzdem
|
||||
# bestehen, damit das Image auch ohne Bind-Mount das Schema mitbringt.
|
||||
- ./pb_migrations:/pb/pb_migrations
|
||||
environment:
|
||||
# Superuser wird nur beim allerersten Start angelegt (siehe entrypoint.sh)
|
||||
SUPERUSER_EMAIL: ${SUPERUSER_EMAIL:-}
|
||||
SUPERUSER_PASSWORD: ${SUPERUSER_PASSWORD:-}
|
||||
healthcheck:
|
||||
test: ["CMD", "wget", "-qO-", "http://127.0.0.1:8090/api/health"]
|
||||
interval: 30s
|
||||
timeout: 5s
|
||||
retries: 3
|
||||
start_period: 10s
|
||||
38
backend/entrypoint.sh
Normal file
38
backend/entrypoint.sh
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
#!/bin/sh
|
||||
set -e
|
||||
|
||||
# Superuser nur beim allerersten Start anlegen. Existiert der Account bereits,
|
||||
# scheitert "create" von selbst mit "email: Value must be unique." und das
|
||||
# Passwort bleibt unangetastet. Damit überschreibt ein Redeploy keine
|
||||
# Passwortänderung, die im Admin-UI gemacht wurde.
|
||||
#
|
||||
# Bewusst NICHT "superuser upsert": das würde bei jedem Start das Passwort aus
|
||||
# der Env zurückschreiben und UI-seitige Änderungen still aushebeln.
|
||||
#
|
||||
# Ohne die beiden Variablen wird der Schritt übersprungen; PocketBase zeigt dann
|
||||
# beim ersten Start einen Installer-Link im Log.
|
||||
if [ -n "$SUPERUSER_EMAIL" ] && [ -n "$SUPERUSER_PASSWORD" ]; then
|
||||
# PocketBase liefert auch im Fehlerfall Exitcode 0 und meldet den Fehler nur
|
||||
# auf stdout — deshalb wird hier die Ausgabe ausgewertet, nicht der Status.
|
||||
out=$(/pb/pocketbase superuser create "$SUPERUSER_EMAIL" "$SUPERUSER_PASSWORD" \
|
||||
--dir=/pb/pb_data 2>&1) || true
|
||||
|
||||
case "$out" in
|
||||
*"must be unique"*)
|
||||
echo "Superuser existiert bereits — Passwort bleibt unverändert"
|
||||
;;
|
||||
*"Successfully created"*)
|
||||
echo "$out"
|
||||
;;
|
||||
*)
|
||||
# Unerwarteter Fehler (z. B. zu kurzes Passwort): sichtbar machen und
|
||||
# abbrechen, statt mit unklarem Zustand weiterzulaufen.
|
||||
echo "Superuser konnte nicht angelegt werden: $out" >&2
|
||||
exit 1
|
||||
;;
|
||||
esac
|
||||
else
|
||||
echo "SUPERUSER_EMAIL/SUPERUSER_PASSWORD nicht gesetzt — Superuser wird nicht angelegt"
|
||||
fi
|
||||
|
||||
exec "$@"
|
||||
0
backend/pb_hooks/.gitkeep
Normal file
0
backend/pb_hooks/.gitkeep
Normal file
919
backend/pb_migrations/1754400000_init_schema.js
Normal file
919
backend/pb_migrations/1754400000_init_schema.js
Normal file
|
|
@ -0,0 +1,919 @@
|
|||
/// <reference path="../pb_data/types.d.ts" />
|
||||
|
||||
// Schema-Snapshot der sechs fachlichen Collections, abgezogen von der
|
||||
// produktiven Instanz. System-Collections (_superusers, _mfas, ...) legt
|
||||
// PocketBase selbst an und stehen deshalb nicht hier drin.
|
||||
//
|
||||
// importCollections wird mit deleteMissing = false aufgerufen: Die Migration
|
||||
// legt an und aktualisiert, löscht aber nichts, was nicht im Snapshot steht.
|
||||
|
||||
migrate((app) => {
|
||||
const collections = [
|
||||
{
|
||||
"id": "_pb_users_auth_",
|
||||
"listRule": "id = @request.auth.id",
|
||||
"viewRule": "id = @request.auth.id",
|
||||
"createRule": null,
|
||||
"updateRule": "id = @request.auth.id",
|
||||
"deleteRule": "id = @request.auth.id",
|
||||
"name": "users",
|
||||
"type": "auth",
|
||||
"fields": [
|
||||
{
|
||||
"autogeneratePattern": "[a-z0-9]{15}",
|
||||
"hidden": false,
|
||||
"id": "text3208210256",
|
||||
"max": 15,
|
||||
"min": 15,
|
||||
"name": "id",
|
||||
"pattern": "^[a-z0-9]+$",
|
||||
"presentable": false,
|
||||
"primaryKey": true,
|
||||
"required": true,
|
||||
"system": true,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"cost": 10,
|
||||
"hidden": true,
|
||||
"id": "password901924565",
|
||||
"max": 0,
|
||||
"min": 8,
|
||||
"name": "password",
|
||||
"pattern": "",
|
||||
"presentable": false,
|
||||
"required": true,
|
||||
"system": true,
|
||||
"type": "password"
|
||||
},
|
||||
{
|
||||
"autogeneratePattern": "[a-zA-Z0-9_]{50}",
|
||||
"hidden": true,
|
||||
"id": "text2504183744",
|
||||
"max": 60,
|
||||
"min": 30,
|
||||
"name": "tokenKey",
|
||||
"pattern": "",
|
||||
"presentable": false,
|
||||
"primaryKey": false,
|
||||
"required": true,
|
||||
"system": true,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"exceptDomains": null,
|
||||
"hidden": false,
|
||||
"id": "email3885137012",
|
||||
"name": "email",
|
||||
"onlyDomains": null,
|
||||
"presentable": false,
|
||||
"required": false,
|
||||
"system": true,
|
||||
"type": "email"
|
||||
},
|
||||
{
|
||||
"hidden": false,
|
||||
"id": "bool1547992806",
|
||||
"name": "emailVisibility",
|
||||
"presentable": false,
|
||||
"required": false,
|
||||
"system": true,
|
||||
"type": "bool"
|
||||
},
|
||||
{
|
||||
"hidden": false,
|
||||
"id": "bool256245529",
|
||||
"name": "verified",
|
||||
"presentable": false,
|
||||
"required": false,
|
||||
"system": true,
|
||||
"type": "bool"
|
||||
},
|
||||
{
|
||||
"autogeneratePattern": "users[0-9]{6}",
|
||||
"hidden": false,
|
||||
"id": "text4166911607",
|
||||
"max": 150,
|
||||
"min": 3,
|
||||
"name": "username",
|
||||
"pattern": "^[\\w][\\w\\.\\-]*$",
|
||||
"presentable": false,
|
||||
"primaryKey": false,
|
||||
"required": true,
|
||||
"system": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"autogeneratePattern": "",
|
||||
"hidden": false,
|
||||
"id": "users_name",
|
||||
"max": 0,
|
||||
"min": 0,
|
||||
"name": "name",
|
||||
"pattern": "",
|
||||
"presentable": false,
|
||||
"primaryKey": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"hidden": false,
|
||||
"id": "users_avatar",
|
||||
"maxSelect": 1,
|
||||
"maxSize": 5242880,
|
||||
"mimeTypes": [
|
||||
"image/jpeg",
|
||||
"image/png",
|
||||
"image/svg+xml",
|
||||
"image/gif",
|
||||
"image/webp"
|
||||
],
|
||||
"name": "avatar",
|
||||
"presentable": false,
|
||||
"protected": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"thumbs": null,
|
||||
"type": "file"
|
||||
},
|
||||
{
|
||||
"hidden": false,
|
||||
"id": "autodate2990389176",
|
||||
"name": "created",
|
||||
"onCreate": true,
|
||||
"onUpdate": false,
|
||||
"presentable": false,
|
||||
"system": false,
|
||||
"type": "autodate"
|
||||
},
|
||||
{
|
||||
"hidden": false,
|
||||
"id": "autodate3332085495",
|
||||
"name": "updated",
|
||||
"onCreate": true,
|
||||
"onUpdate": true,
|
||||
"presentable": false,
|
||||
"system": false,
|
||||
"type": "autodate"
|
||||
}
|
||||
],
|
||||
"indexes": [
|
||||
"CREATE UNIQUE INDEX `__pb_users_auth__username_idx` ON `users` (username COLLATE NOCASE)",
|
||||
"CREATE UNIQUE INDEX `__pb_users_auth__email_idx` ON `users` (`email`) WHERE `email` != ''",
|
||||
"CREATE UNIQUE INDEX `__pb_users_auth__tokenKey_idx` ON `users` (`tokenKey`)"
|
||||
],
|
||||
"created": "2023-10-28 21:35:49.020Z",
|
||||
"updated": "2024-07-19 09:58:56.589Z",
|
||||
"system": false,
|
||||
"authRule": "",
|
||||
"manageRule": null,
|
||||
"authAlert": {
|
||||
"enabled": true,
|
||||
"emailTemplate": {
|
||||
"subject": "Login from a new location",
|
||||
"body": "<p>Hello,</p>\n<p>We noticed a login to your {APP_NAME} account from a new location.</p>\n<p>If this was you, you may disregard this email.</p>\n<p><strong>If this wasn't you, you should immediately change your {APP_NAME} account password to revoke access from all other locations.</strong></p>\n<p>\n Thanks,<br/>\n {APP_NAME} team\n</p>"
|
||||
}
|
||||
},
|
||||
"oauth2": {
|
||||
"providers": [],
|
||||
"mappedFields": {
|
||||
"id": "",
|
||||
"name": "",
|
||||
"username": "username",
|
||||
"avatarURL": ""
|
||||
},
|
||||
"enabled": false
|
||||
},
|
||||
"passwordAuth": {
|
||||
"enabled": true,
|
||||
"identityFields": [
|
||||
"email",
|
||||
"username"
|
||||
]
|
||||
},
|
||||
"mfa": {
|
||||
"enabled": false,
|
||||
"duration": 1800,
|
||||
"rule": ""
|
||||
},
|
||||
"otp": {
|
||||
"enabled": false,
|
||||
"duration": 180,
|
||||
"length": 8,
|
||||
"emailTemplate": {
|
||||
"subject": "OTP for {APP_NAME}",
|
||||
"body": "<p>Hello,</p>\n<p>Your one-time password is: <strong>{OTP}</strong></p>\n<p><i>If you didn't ask for the one-time password, you can ignore this email.</i></p>\n<p>\n Thanks,<br/>\n {APP_NAME} team\n</p>"
|
||||
}
|
||||
},
|
||||
"authToken": {
|
||||
"duration": 1209600
|
||||
},
|
||||
"passwordResetToken": {
|
||||
"duration": 1800
|
||||
},
|
||||
"emailChangeToken": {
|
||||
"duration": 1800
|
||||
},
|
||||
"verificationToken": {
|
||||
"duration": 604800
|
||||
},
|
||||
"fileToken": {
|
||||
"duration": 120
|
||||
},
|
||||
"verificationTemplate": {
|
||||
"subject": "Verify your {APP_NAME} email",
|
||||
"body": "<p>Hello,</p>\n<p>Thank you for joining us at {APP_NAME}.</p>\n<p>Click on the button below to verify your email address.</p>\n<p>\n <a class=\"btn\" href=\"{APP_URL}/_/#/auth/confirm-verification/{TOKEN}\" target=\"_blank\" rel=\"noopener\">Verify</a>\n</p>\n<p>\n Thanks,<br/>\n {APP_NAME} team\n</p>"
|
||||
},
|
||||
"resetPasswordTemplate": {
|
||||
"subject": "Reset your {APP_NAME} password",
|
||||
"body": "<p>Hello,</p>\n<p>Click on the button below to reset your password.</p>\n<p>\n <a class=\"btn\" href=\"{APP_URL}/_/#/auth/confirm-password-reset/{TOKEN}\" target=\"_blank\" rel=\"noopener\">Reset password</a>\n</p>\n<p><i>If you didn't ask to reset your password, you can ignore this email.</i></p>\n<p>\n Thanks,<br/>\n {APP_NAME} team\n</p>"
|
||||
},
|
||||
"confirmEmailChangeTemplate": {
|
||||
"subject": "Confirm your {APP_NAME} new email address",
|
||||
"body": "<p>Hello,</p>\n<p>Click on the button below to confirm your new email address.</p>\n<p>\n <a class=\"btn\" href=\"{APP_URL}/_/#/auth/confirm-email-change/{TOKEN}\" target=\"_blank\" rel=\"noopener\">Confirm new email</a>\n</p>\n<p><i>If you didn't ask to change your email address, you can ignore this email.</i></p>\n<p>\n Thanks,<br/>\n {APP_NAME} team\n</p>"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "pbc_1568971955",
|
||||
"listRule": "users.id ?= @request.auth.id",
|
||||
"viewRule": "users.id ?= @request.auth.id",
|
||||
"createRule": "@request.auth.id != \"\"",
|
||||
"updateRule": "owner.id ?= @request.auth.id || admins.id ?= @request.auth.id",
|
||||
"deleteRule": "owner.id ?= @request.auth.id",
|
||||
"name": "teams",
|
||||
"type": "base",
|
||||
"fields": [
|
||||
{
|
||||
"autogeneratePattern": "[a-z0-9]{15}",
|
||||
"hidden": false,
|
||||
"id": "text3208210256",
|
||||
"max": 15,
|
||||
"min": 15,
|
||||
"name": "id",
|
||||
"pattern": "^[a-z0-9]+$",
|
||||
"presentable": false,
|
||||
"primaryKey": true,
|
||||
"required": true,
|
||||
"system": true,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"autogeneratePattern": "",
|
||||
"hidden": false,
|
||||
"id": "text1579384326",
|
||||
"max": 100,
|
||||
"min": 1,
|
||||
"name": "name",
|
||||
"pattern": "",
|
||||
"presentable": true,
|
||||
"primaryKey": false,
|
||||
"required": true,
|
||||
"system": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"cascadeDelete": false,
|
||||
"collectionId": "_pb_users_auth_",
|
||||
"hidden": false,
|
||||
"id": "relation3479234172",
|
||||
"maxSelect": 1,
|
||||
"minSelect": 1,
|
||||
"name": "owner",
|
||||
"presentable": false,
|
||||
"required": true,
|
||||
"system": false,
|
||||
"type": "relation"
|
||||
},
|
||||
{
|
||||
"cascadeDelete": false,
|
||||
"collectionId": "_pb_users_auth_",
|
||||
"hidden": false,
|
||||
"id": "relation2732594447",
|
||||
"maxSelect": 999,
|
||||
"minSelect": 0,
|
||||
"name": "admins",
|
||||
"presentable": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "relation"
|
||||
},
|
||||
{
|
||||
"cascadeDelete": false,
|
||||
"collectionId": "_pb_users_auth_",
|
||||
"hidden": false,
|
||||
"id": "relation344172009",
|
||||
"maxSelect": 999,
|
||||
"minSelect": 0,
|
||||
"name": "users",
|
||||
"presentable": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "relation"
|
||||
},
|
||||
{
|
||||
"hidden": false,
|
||||
"id": "autodate2990389176",
|
||||
"name": "created",
|
||||
"onCreate": true,
|
||||
"onUpdate": false,
|
||||
"presentable": false,
|
||||
"system": false,
|
||||
"type": "autodate"
|
||||
},
|
||||
{
|
||||
"hidden": false,
|
||||
"id": "autodate3332085495",
|
||||
"name": "updated",
|
||||
"onCreate": true,
|
||||
"onUpdate": true,
|
||||
"presentable": false,
|
||||
"system": false,
|
||||
"type": "autodate"
|
||||
}
|
||||
],
|
||||
"indexes": [],
|
||||
"created": "2026-05-15 19:54:02.885Z",
|
||||
"updated": "2026-05-15 19:54:02.885Z",
|
||||
"system": false
|
||||
},
|
||||
{
|
||||
"id": "xiqlzggqxg1e2y7",
|
||||
"listRule": "team.users.id ?= @request.auth.id",
|
||||
"viewRule": "team.users.id ?= @request.auth.id",
|
||||
"createRule": "team.users.id ?= @request.auth.id",
|
||||
"updateRule": "team.users.id ?= @request.auth.id",
|
||||
"deleteRule": "team.users.id ?= @request.auth.id",
|
||||
"name": "events",
|
||||
"type": "base",
|
||||
"fields": [
|
||||
{
|
||||
"autogeneratePattern": "[a-z0-9]{15}",
|
||||
"hidden": false,
|
||||
"id": "text3208210256",
|
||||
"max": 15,
|
||||
"min": 15,
|
||||
"name": "id",
|
||||
"pattern": "^[a-z0-9]+$",
|
||||
"presentable": false,
|
||||
"primaryKey": true,
|
||||
"required": true,
|
||||
"system": true,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"autogeneratePattern": "",
|
||||
"hidden": false,
|
||||
"id": "g7nkasyb",
|
||||
"max": 0,
|
||||
"min": 0,
|
||||
"name": "description",
|
||||
"pattern": "",
|
||||
"presentable": true,
|
||||
"primaryKey": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"autogeneratePattern": "",
|
||||
"hidden": false,
|
||||
"id": "7n5qjiax",
|
||||
"max": 0,
|
||||
"min": 0,
|
||||
"name": "location",
|
||||
"pattern": "",
|
||||
"presentable": true,
|
||||
"primaryKey": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"autogeneratePattern": "",
|
||||
"hidden": false,
|
||||
"id": "hdp9vbeh",
|
||||
"max": 0,
|
||||
"min": 0,
|
||||
"name": "gps",
|
||||
"pattern": "",
|
||||
"presentable": false,
|
||||
"primaryKey": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"hidden": false,
|
||||
"id": "autodate2990389176",
|
||||
"name": "created",
|
||||
"onCreate": true,
|
||||
"onUpdate": false,
|
||||
"presentable": false,
|
||||
"system": false,
|
||||
"type": "autodate"
|
||||
},
|
||||
{
|
||||
"hidden": false,
|
||||
"id": "autodate3332085495",
|
||||
"name": "updated",
|
||||
"onCreate": true,
|
||||
"onUpdate": true,
|
||||
"presentable": false,
|
||||
"system": false,
|
||||
"type": "autodate"
|
||||
},
|
||||
{
|
||||
"autogeneratePattern": "",
|
||||
"hidden": false,
|
||||
"id": "text1579384326",
|
||||
"max": 0,
|
||||
"min": 0,
|
||||
"name": "name",
|
||||
"pattern": "",
|
||||
"presentable": true,
|
||||
"primaryKey": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"hidden": false,
|
||||
"id": "select2063623452",
|
||||
"maxSelect": 1,
|
||||
"name": "status",
|
||||
"presentable": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "select",
|
||||
"values": [
|
||||
"draft",
|
||||
"active",
|
||||
"finished"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cascadeDelete": false,
|
||||
"collectionId": "pbc_1568971955",
|
||||
"hidden": false,
|
||||
"id": "relation3303056927",
|
||||
"maxSelect": 1,
|
||||
"minSelect": 0,
|
||||
"name": "team",
|
||||
"presentable": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "relation"
|
||||
}
|
||||
],
|
||||
"indexes": [],
|
||||
"created": "2023-10-28 21:38:00.122Z",
|
||||
"updated": "2026-05-15 19:54:27.453Z",
|
||||
"system": false
|
||||
},
|
||||
{
|
||||
"id": "jo49lycyfs2sz2c",
|
||||
"listRule": "team.users.id ?= @request.auth.id",
|
||||
"viewRule": "team.users.id ?= @request.auth.id",
|
||||
"createRule": "team.users.id ?= @request.auth.id",
|
||||
"updateRule": "team.users.id ?= @request.auth.id",
|
||||
"deleteRule": "team.users.id ?= @request.auth.id",
|
||||
"name": "runs",
|
||||
"type": "base",
|
||||
"fields": [
|
||||
{
|
||||
"autogeneratePattern": "[a-z0-9]{15}",
|
||||
"hidden": false,
|
||||
"id": "text3208210256",
|
||||
"max": 15,
|
||||
"min": 15,
|
||||
"name": "id",
|
||||
"pattern": "^[a-z0-9]+$",
|
||||
"presentable": false,
|
||||
"primaryKey": true,
|
||||
"required": true,
|
||||
"system": true,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"autogeneratePattern": "",
|
||||
"hidden": false,
|
||||
"id": "lnfys3xe",
|
||||
"max": 0,
|
||||
"min": 0,
|
||||
"name": "description",
|
||||
"pattern": "",
|
||||
"presentable": false,
|
||||
"primaryKey": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"cascadeDelete": false,
|
||||
"collectionId": "xiqlzggqxg1e2y7",
|
||||
"hidden": false,
|
||||
"id": "fqqevsrf",
|
||||
"maxSelect": 1,
|
||||
"minSelect": 0,
|
||||
"name": "event",
|
||||
"presentable": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "relation"
|
||||
},
|
||||
{
|
||||
"hidden": false,
|
||||
"id": "autodate2990389176",
|
||||
"name": "created",
|
||||
"onCreate": true,
|
||||
"onUpdate": false,
|
||||
"presentable": false,
|
||||
"system": false,
|
||||
"type": "autodate"
|
||||
},
|
||||
{
|
||||
"hidden": false,
|
||||
"id": "autodate3332085495",
|
||||
"name": "updated",
|
||||
"onCreate": true,
|
||||
"onUpdate": true,
|
||||
"presentable": false,
|
||||
"system": false,
|
||||
"type": "autodate"
|
||||
},
|
||||
{
|
||||
"cascadeDelete": false,
|
||||
"collectionId": "pbc_1568971955",
|
||||
"hidden": false,
|
||||
"id": "relation3303056927",
|
||||
"maxSelect": 1,
|
||||
"minSelect": 0,
|
||||
"name": "team",
|
||||
"presentable": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "relation"
|
||||
}
|
||||
],
|
||||
"indexes": [],
|
||||
"created": "2023-10-30 20:50:18.294Z",
|
||||
"updated": "2026-05-15 19:54:27.393Z",
|
||||
"system": false
|
||||
},
|
||||
{
|
||||
"id": "spgs7e4anufen9u",
|
||||
"listRule": "team.users.id ?= @request.auth.id",
|
||||
"viewRule": "team.users.id ?= @request.auth.id",
|
||||
"createRule": "team.users.id ?= @request.auth.id",
|
||||
"updateRule": "team.users.id ?= @request.auth.id",
|
||||
"deleteRule": "team.users.id ?= @request.auth.id",
|
||||
"name": "riders",
|
||||
"type": "base",
|
||||
"fields": [
|
||||
{
|
||||
"autogeneratePattern": "[a-z0-9]{15}",
|
||||
"hidden": false,
|
||||
"id": "text3208210256",
|
||||
"max": 15,
|
||||
"min": 15,
|
||||
"name": "id",
|
||||
"pattern": "^[a-z0-9]+$",
|
||||
"presentable": false,
|
||||
"primaryKey": true,
|
||||
"required": true,
|
||||
"system": true,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"autogeneratePattern": "",
|
||||
"hidden": false,
|
||||
"id": "hcc93nbj",
|
||||
"max": 0,
|
||||
"min": 0,
|
||||
"name": "name",
|
||||
"pattern": "",
|
||||
"presentable": false,
|
||||
"primaryKey": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"hidden": false,
|
||||
"id": "hc38dfyc",
|
||||
"maxSelect": 1,
|
||||
"maxSize": 5242880,
|
||||
"mimeTypes": [],
|
||||
"name": "avatar",
|
||||
"presentable": false,
|
||||
"protected": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"thumbs": [],
|
||||
"type": "file"
|
||||
},
|
||||
{
|
||||
"cascadeDelete": false,
|
||||
"collectionId": "xiqlzggqxg1e2y7",
|
||||
"hidden": false,
|
||||
"id": "anbugepo",
|
||||
"maxSelect": 1,
|
||||
"minSelect": 0,
|
||||
"name": "event",
|
||||
"presentable": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "relation"
|
||||
},
|
||||
{
|
||||
"hidden": false,
|
||||
"id": "autodate2990389176",
|
||||
"name": "created",
|
||||
"onCreate": true,
|
||||
"onUpdate": false,
|
||||
"presentable": false,
|
||||
"system": false,
|
||||
"type": "autodate"
|
||||
},
|
||||
{
|
||||
"hidden": false,
|
||||
"id": "autodate3332085495",
|
||||
"name": "updated",
|
||||
"onCreate": true,
|
||||
"onUpdate": true,
|
||||
"presentable": false,
|
||||
"system": false,
|
||||
"type": "autodate"
|
||||
},
|
||||
{
|
||||
"autogeneratePattern": "",
|
||||
"hidden": false,
|
||||
"id": "text2526027604",
|
||||
"max": 0,
|
||||
"min": 0,
|
||||
"name": "number",
|
||||
"pattern": "",
|
||||
"presentable": true,
|
||||
"primaryKey": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"autogeneratePattern": "",
|
||||
"hidden": false,
|
||||
"id": "text2208304744",
|
||||
"max": 0,
|
||||
"min": 0,
|
||||
"name": "firstname",
|
||||
"pattern": "",
|
||||
"presentable": true,
|
||||
"primaryKey": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"autogeneratePattern": "",
|
||||
"hidden": false,
|
||||
"id": "text824489398",
|
||||
"max": 0,
|
||||
"min": 0,
|
||||
"name": "lastname",
|
||||
"pattern": "",
|
||||
"presentable": true,
|
||||
"primaryKey": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"cascadeDelete": false,
|
||||
"collectionId": "pbc_1568971955",
|
||||
"hidden": false,
|
||||
"id": "relation3303056927",
|
||||
"maxSelect": 1,
|
||||
"minSelect": 0,
|
||||
"name": "team",
|
||||
"presentable": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "relation"
|
||||
}
|
||||
],
|
||||
"indexes": [],
|
||||
"created": "2023-10-28 21:37:09.275Z",
|
||||
"updated": "2026-05-15 19:54:27.372Z",
|
||||
"system": false
|
||||
},
|
||||
{
|
||||
"id": "iomx9mcd1ko22ma",
|
||||
"listRule": "team.users.id ?= @request.auth.id",
|
||||
"viewRule": "team.users.id ?= @request.auth.id",
|
||||
"createRule": "team.users.id ?= @request.auth.id",
|
||||
"updateRule": "team.users.id ?= @request.auth.id",
|
||||
"deleteRule": "team.users.id ?= @request.auth.id",
|
||||
"name": "times",
|
||||
"type": "base",
|
||||
"fields": [
|
||||
{
|
||||
"autogeneratePattern": "[a-z0-9]{15}",
|
||||
"hidden": false,
|
||||
"id": "text3208210256",
|
||||
"max": 15,
|
||||
"min": 15,
|
||||
"name": "id",
|
||||
"pattern": "^[a-z0-9]+$",
|
||||
"presentable": false,
|
||||
"primaryKey": true,
|
||||
"required": true,
|
||||
"system": true,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"hidden": false,
|
||||
"id": "3k55v0ld",
|
||||
"maxSelect": 1,
|
||||
"name": "status",
|
||||
"presentable": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "select",
|
||||
"values": [
|
||||
"active",
|
||||
"finished",
|
||||
"dnf",
|
||||
"dns",
|
||||
"dsq"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cascadeDelete": false,
|
||||
"collectionId": "spgs7e4anufen9u",
|
||||
"hidden": false,
|
||||
"id": "r3ixummt",
|
||||
"maxSelect": 1,
|
||||
"minSelect": 0,
|
||||
"name": "rider",
|
||||
"presentable": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "relation"
|
||||
},
|
||||
{
|
||||
"hidden": false,
|
||||
"id": "mfhbdhhe",
|
||||
"max": "",
|
||||
"min": "",
|
||||
"name": "start",
|
||||
"presentable": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "date"
|
||||
},
|
||||
{
|
||||
"cascadeDelete": false,
|
||||
"collectionId": "_pb_users_auth_",
|
||||
"hidden": false,
|
||||
"id": "ybjm5n0k",
|
||||
"maxSelect": 1,
|
||||
"minSelect": 0,
|
||||
"name": "startedBy",
|
||||
"presentable": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "relation"
|
||||
},
|
||||
{
|
||||
"hidden": false,
|
||||
"id": "nkmjfeqt",
|
||||
"max": "",
|
||||
"min": "",
|
||||
"name": "stop",
|
||||
"presentable": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "date"
|
||||
},
|
||||
{
|
||||
"cascadeDelete": false,
|
||||
"collectionId": "_pb_users_auth_",
|
||||
"hidden": false,
|
||||
"id": "o2fp9hvv",
|
||||
"maxSelect": 1,
|
||||
"minSelect": 0,
|
||||
"name": "stoppedBy",
|
||||
"presentable": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "relation"
|
||||
},
|
||||
{
|
||||
"autogeneratePattern": "",
|
||||
"hidden": false,
|
||||
"id": "dky8o1vw",
|
||||
"max": 0,
|
||||
"min": 0,
|
||||
"name": "comment",
|
||||
"pattern": "",
|
||||
"presentable": false,
|
||||
"primaryKey": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"cascadeDelete": false,
|
||||
"collectionId": "jo49lycyfs2sz2c",
|
||||
"hidden": false,
|
||||
"id": "ltfephwe",
|
||||
"maxSelect": 1,
|
||||
"minSelect": 0,
|
||||
"name": "run",
|
||||
"presentable": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "relation"
|
||||
},
|
||||
{
|
||||
"hidden": false,
|
||||
"id": "autodate2990389176",
|
||||
"name": "created",
|
||||
"onCreate": true,
|
||||
"onUpdate": false,
|
||||
"presentable": false,
|
||||
"system": false,
|
||||
"type": "autodate"
|
||||
},
|
||||
{
|
||||
"hidden": false,
|
||||
"id": "autodate3332085495",
|
||||
"name": "updated",
|
||||
"onCreate": true,
|
||||
"onUpdate": true,
|
||||
"presentable": false,
|
||||
"system": false,
|
||||
"type": "autodate"
|
||||
},
|
||||
{
|
||||
"hidden": false,
|
||||
"id": "number2728239544",
|
||||
"max": null,
|
||||
"min": null,
|
||||
"name": "correction",
|
||||
"onlyInt": false,
|
||||
"presentable": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "number"
|
||||
},
|
||||
{
|
||||
"cascadeDelete": false,
|
||||
"collectionId": "pbc_1568971955",
|
||||
"hidden": false,
|
||||
"id": "relation3303056927",
|
||||
"maxSelect": 1,
|
||||
"minSelect": 0,
|
||||
"name": "team",
|
||||
"presentable": false,
|
||||
"required": false,
|
||||
"system": false,
|
||||
"type": "relation"
|
||||
}
|
||||
],
|
||||
"indexes": [],
|
||||
"created": "2023-10-28 21:37:47.259Z",
|
||||
"updated": "2026-05-15 19:54:27.415Z",
|
||||
"system": false
|
||||
}
|
||||
]
|
||||
|
||||
// importCollections erwartet das Array selbst, keinen JSON-String — die
|
||||
// String-Variante heißt importCollectionsByMarshaledJSON.
|
||||
app.importCollections(collections, false)
|
||||
}, (app) => {
|
||||
// Rückwärts: die angelegten Collections wieder entfernen, in umgekehrter
|
||||
// Reihenfolge, damit keine Relation ins Leere zeigt.
|
||||
//
|
||||
// "users" bleibt bewusst stehen: PocketBase legt die Auth-Collection selbst
|
||||
// an, ein Löschen wäre kein Zurückrollen dieser Migration.
|
||||
const ids = [
|
||||
"_pb_users_auth_",
|
||||
"pbc_1568971955",
|
||||
"xiqlzggqxg1e2y7",
|
||||
"jo49lycyfs2sz2c",
|
||||
"spgs7e4anufen9u",
|
||||
"iomx9mcd1ko22ma"
|
||||
]
|
||||
|
||||
for (const id of ids.slice().reverse()) {
|
||||
if (id === '_pb_users_auth_') continue
|
||||
|
||||
try {
|
||||
app.delete(app.findCollectionByNameOrId(id))
|
||||
} catch {
|
||||
// Bereits entfernt — nichts zu tun.
|
||||
}
|
||||
}
|
||||
})
|
||||
972
docs/superpowers/plans/2026-08-06-repo-frontend-backend.md
Normal file
972
docs/superpowers/plans/2026-08-06-repo-frontend-backend.md
Normal file
|
|
@ -0,0 +1,972 @@
|
|||
# Repo-Umbau auf `frontend/` und `backend/` — Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Die SvelteKit-App nach `frontend/` verschieben und unter `backend/` eine eigenständige, lokal per Docker lauffähige PocketBase-Instanz mit versioniertem Schema anlegen.
|
||||
|
||||
**Architecture:** Monorepo — das vorhandene `.git` bleibt im Root, `frontend/` und `backend/` sind Unterverzeichnisse ohne eigene Repos. Das Frontend spricht PocketBase über die konfigurierbare Variable `PUBLIC_PB_URL` an (Default: Remote-Instanz). Das Backend baut PocketBase in einem Alpine-Container, das Schema liegt als Snapshot-Migration in `backend/pb_migrations/`.
|
||||
|
||||
**Tech Stack:** SvelteKit 5 / Svelte 5 Runes, TypeScript, Vite 7, Tailwind 4, PocketBase 0.26 (Client) / 0.39.6 (Container), Docker Compose.
|
||||
|
||||
## Global Constraints
|
||||
|
||||
- Spec: `docs/superpowers/specs/2026-08-06-repo-frontend-backend-design.md`
|
||||
- **Monorepo:** Nur ein `.git`, im Root. In `frontend/` und `backend/` wird **kein** `git init` ausgeführt.
|
||||
- **Die Live-Instanz `https://api.stammtisch-hersbruck.de` wird nicht verändert.** Kein Schreibzugriff, keine Migration dagegen anwenden. Nur lesende Aufrufe (`GET /api/collections`).
|
||||
- **PocketBase-Version im Container:** exakt `0.39.6`, gepinnt über Build-Arg `PB_VERSION`.
|
||||
- **Fachliche Collections:** genau `users, teams, events, runs, riders, times`. System-Collections (`_superusers`, `_externalAuths`, `_mfas`, `_otps`, `_authOrigins`) gehören **nicht** in die Migration.
|
||||
- **`frontend/.env` enthält `PB_SUPERUSER_TOKEN` und darf niemals committet werden.** Vor jedem Commit mit `git status` prüfen.
|
||||
- **Kein `git push`** — nur auf ausdrückliche Anweisung des Nutzers.
|
||||
- Sprache aller neuen Kommentare, READMEs und Commit-Messages: **Deutsch**, mit korrekten Umlauten.
|
||||
- Das Repo hat zu Beginn **keinen Commit**. Task 8 legt den initialen Commit an; die Tasks davor committen nicht.
|
||||
|
||||
## Hinweis zur Task-Abfolge
|
||||
|
||||
Dieser Plan committet erst am Ende (Task 8), weil das Repo bis dahin keinen Commit hat und die Spec einen einzigen initialen Commit mit fertiger Struktur vorsieht. Die Tasks 1–7 verändern nur den Arbeitsbaum. Jede Task endet stattdessen mit einer eigenen Verifikation.
|
||||
|
||||
## Dateiübersicht
|
||||
|
||||
| Datei | Verantwortung |
|
||||
|---|---|
|
||||
| `frontend/**` | Komplette SvelteKit-App (verschoben aus dem Root) |
|
||||
| `frontend/.env` | Laufzeit- und Token-Konfiguration, **nicht** versioniert |
|
||||
| `frontend/.env.example` | Dokumentierte Vorlage, versioniert |
|
||||
| `frontend/src/lib/stores/pocketbase.svelte.ts` | PocketBase-Client; liest die URL neu aus `PUBLIC_PB_URL` |
|
||||
| `backend/Dockerfile` | Baut das PocketBase-Image, Version gepinnt |
|
||||
| `backend/docker-compose.yaml` | Service-Definition inkl. Volume und Healthcheck |
|
||||
| `backend/entrypoint.sh` | Superuser-Bootstrap beim ersten Start |
|
||||
| `backend/pb_migrations/1754400000_init_schema.js` | Schema-Snapshot der sechs Collections |
|
||||
| `backend/pb_hooks/.gitkeep` | Platzhalter, damit das Verzeichnis existiert |
|
||||
| `backend/.env.example` | Vorlage der Backend-Variablen |
|
||||
| `backend/.gitignore` | Schließt `pb_data/` und `.env` aus |
|
||||
| `backend/README.md` | Lokaler Start, Schema, Persistenz, Superuser |
|
||||
| `.gitignore` (Root) | Ignoriert für beide Teilprojekte |
|
||||
| `README.md` (Root) | Übersicht über beide Teile |
|
||||
| `CLAUDE.md` | Angepasste Pfade und Befehle |
|
||||
|
||||
---
|
||||
|
||||
### Task 1: Frontend nach `frontend/` verschieben
|
||||
|
||||
**Files:**
|
||||
- Verschieben nach `frontend/`: `src/`, `static/`, `scripts/`, `package.json`, `package-lock.json`, `.npmrc`, `svelte.config.js`, `vite.config.ts`, `tsconfig.json`, `components.json`, `.env`
|
||||
- Löschen: `node_modules/`, `.svelte-kit/` (im Root)
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: nichts
|
||||
- Produces: Ein vollständiges SvelteKit-Projekt unter `frontend/`, in dem alle folgenden Tasks arbeiten.
|
||||
|
||||
- [ ] **Step 1: Ist-Zustand von `npm run check` festhalten**
|
||||
|
||||
Damit später beurteilt werden kann, was eine Regression ist und was schon vorher kaputt war.
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de
|
||||
npm run check 2>&1 | tail -20 > /tmp/check-vorher.txt
|
||||
cat /tmp/check-vorher.txt
|
||||
```
|
||||
|
||||
Die letzte Zeile nennt die Anzahl Fehler und Warnungen. Diese Zahl notieren — sie ist der Vergleichsmaßstab in Task 3.
|
||||
|
||||
- [ ] **Step 2: Zielverzeichnis anlegen und Dateien verschieben**
|
||||
|
||||
`git mv` funktioniert hier nicht, weil noch nichts getrackt ist — daher normales `mv`.
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de
|
||||
mkdir -p frontend
|
||||
mv src static scripts package.json package-lock.json .npmrc \
|
||||
svelte.config.js vite.config.ts tsconfig.json components.json .env \
|
||||
frontend/
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Alte Build-Artefakte im Root entfernen**
|
||||
|
||||
`node_modules` wird nicht mitverschoben — installierte Binaries und Caches enthalten absolute Pfade und wären nach dem Umzug teils unbrauchbar. `.svelte-kit` ist generiert.
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de
|
||||
rm -rf node_modules .svelte-kit
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Verschiebung prüfen**
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de
|
||||
ls -a frontend
|
||||
ls -a
|
||||
```
|
||||
|
||||
Erwartet: In `frontend/` liegen `src`, `static`, `scripts`, `package.json`, `.env` usw. Im Root liegen nur noch `CLAUDE.md`, `docs`, die Markdown-Altdateien, `UML_basic.png`, die drei zu löschenden Schema-Dateien und `.git`/`.gitignore`/`.idea`.
|
||||
|
||||
- [ ] **Step 5: Abhängigkeiten neu installieren**
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de/frontend
|
||||
npm ci
|
||||
```
|
||||
|
||||
Erwartet: Läuft ohne Fehler durch. Bei `EBADENGINE`-Abbruch (`.npmrc` setzt `engine-strict=true`) die Node-Version prüfen (`node -v`) und melden statt `engine-strict` zu entfernen.
|
||||
|
||||
---
|
||||
|
||||
### Task 2: PocketBase-URL über `PUBLIC_PB_URL` konfigurierbar machen
|
||||
|
||||
**Files:**
|
||||
- Modify: `frontend/src/lib/stores/pocketbase.svelte.ts:4`
|
||||
- Modify: `frontend/.env`
|
||||
- Create: `frontend/.env.example`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: das verschobene Frontend aus Task 1
|
||||
- Produces: `export const api` unverändert als `TypedPocketBase`; die URL kommt nun aus `PUBLIC_PB_URL`. Signatur und Name bleiben gleich, alle bestehenden Importe funktionieren weiter.
|
||||
|
||||
- [ ] **Step 1: `PUBLIC_PB_URL` in `.env` ergänzen**
|
||||
|
||||
Die bestehenden Variablen bleiben unangetastet. Ans Ende von `frontend/.env` anfügen:
|
||||
|
||||
```
|
||||
# Basis-URL der PocketBase-Instanz, die das Frontend anspricht.
|
||||
# Default ist die produktive Remote-Instanz. Für Arbeit gegen das lokale
|
||||
# Backend aus ../backend auf http://127.0.0.1:8090 umstellen.
|
||||
PUBLIC_PB_URL=https://api.stammtisch-hersbruck.de
|
||||
```
|
||||
|
||||
- [ ] **Step 2: `frontend/.env.example` anlegen**
|
||||
|
||||
Diese Datei ist versioniert und enthält **keine** echten Tokens.
|
||||
|
||||
```
|
||||
# Vorlage für die lokale .env — kopieren und ausfüllen:
|
||||
# cp .env.example .env
|
||||
#
|
||||
# Die echte .env steht in .gitignore und darf nicht committet werden,
|
||||
# sie enthält den Superuser-Token.
|
||||
|
||||
# Basis-URL der PocketBase-Instanz, die das Frontend anspricht.
|
||||
# Produktiv: https://api.stammtisch-hersbruck.de
|
||||
# Lokales Backend aus ../backend: http://127.0.0.1:8090
|
||||
PUBLIC_PB_URL=https://api.stammtisch-hersbruck.de
|
||||
|
||||
# Ziel für die Typgenerierung (npm run generate-pocketbase-types) und die
|
||||
# Scripts unter scripts/. Zeigt üblicherweise auf dieselbe Instanz wie oben.
|
||||
PB_TYPEGEN_URL=https://api.stammtisch-hersbruck.de/
|
||||
|
||||
# Superuser-Token für Schema-Zugriffe. Im PocketBase-Admin-UI erzeugen.
|
||||
# Niemals committen.
|
||||
PB_SUPERUSER_TOKEN=
|
||||
PB_TYPEGEN_TOKEN=
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Den Store auf die Variable umstellen**
|
||||
|
||||
In `frontend/src/lib/stores/pocketbase.svelte.ts` die Zeilen 1–4 ersetzen.
|
||||
|
||||
Vorher:
|
||||
```ts
|
||||
import PocketBase, {type AuthRecord, type RecordModel} from 'pocketbase'
|
||||
import type {TypedPocketBase} from '$lib/types'
|
||||
|
||||
export const api = new PocketBase('https://api.stammtisch-hersbruck.de') as TypedPocketBase
|
||||
```
|
||||
|
||||
Nachher:
|
||||
```ts
|
||||
import PocketBase, {type AuthRecord, type RecordModel} from 'pocketbase'
|
||||
import {PUBLIC_PB_URL} from '$env/static/public'
|
||||
import type {TypedPocketBase} from '$lib/types'
|
||||
|
||||
export const api = new PocketBase(PUBLIC_PB_URL) as TypedPocketBase
|
||||
```
|
||||
|
||||
`$env/static/public` ist SvelteKit-intern und benötigt keine Abhängigkeit. Nur Variablen mit dem Präfix `PUBLIC_` sind darüber erreichbar — deshalb heißt sie so.
|
||||
|
||||
- [ ] **Step 4: Prüfen, dass keine hartkodierte URL zurückbleibt**
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de/frontend
|
||||
grep -rn "api\.stammtisch-hersbruck\.de" src/
|
||||
```
|
||||
|
||||
Erwartet: **keine Ausgabe**. Treffer in `src/` müssen ebenfalls auf `PUBLIC_PB_URL` umgestellt werden.
|
||||
|
||||
---
|
||||
|
||||
### Task 3: Frontend verifizieren
|
||||
|
||||
**Files:**
|
||||
- Keine Änderungen — reine Prüfung.
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: Tasks 1 und 2
|
||||
- Produces: Nachweis, dass Verschiebung und URL-Umstellung nichts kaputt gemacht haben.
|
||||
|
||||
- [ ] **Step 1: Typprüfung laufen lassen**
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de/frontend
|
||||
npm run check 2>&1 | tail -20
|
||||
```
|
||||
|
||||
Erwartet: Die Fehler-/Warnungszahl ist **nicht höher** als in `/tmp/check-vorher.txt` aus Task 1. Bestehende Fehler von vorher sind keine Regression. Ein neuer Fehler zu `$env/static/public` oder `PUBLIC_PB_URL` bedeutet, dass die Variable in `.env` fehlt oder falsch geschrieben ist.
|
||||
|
||||
- [ ] **Step 2: Dev-Server starten**
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de/frontend
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Erwartet: Vite startet auf Port 31337 ohne Fehler.
|
||||
|
||||
- [ ] **Step 3: App im Browser prüfen**
|
||||
|
||||
`http://stammtisch-hersbruck.de.localhost:31337` öffnen.
|
||||
|
||||
Erwartet: Die Seite lädt. In den DevTools unter *Network* gehen die API-Aufrufe an `https://api.stammtisch-hersbruck.de` — das belegt, dass `PUBLIC_PB_URL` greift. Die Konsole zeigt keine Fehler zu fehlenden Modulen oder undefinierter URL.
|
||||
|
||||
Danach den Dev-Server mit `Ctrl+C` beenden.
|
||||
|
||||
---
|
||||
|
||||
### Task 4: Backend-Grundgerüst anlegen
|
||||
|
||||
**Files:**
|
||||
- Create: `backend/Dockerfile`
|
||||
- Create: `backend/docker-compose.yaml`
|
||||
- Create: `backend/entrypoint.sh`
|
||||
- Create: `backend/.gitignore`
|
||||
- Create: `backend/.env.example`
|
||||
- Create: `backend/pb_hooks/.gitkeep`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: nichts aus vorherigen Tasks
|
||||
- Produces: Ein baubarer PocketBase-Container. Task 5 legt die Migration in `backend/pb_migrations/` ab, die das Dockerfile bereits hineinkopiert; Task 6 startet den Container.
|
||||
|
||||
- [ ] **Step 1: Verzeichnisse anlegen**
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de
|
||||
mkdir -p backend/pb_migrations backend/pb_hooks
|
||||
touch backend/pb_hooks/.gitkeep
|
||||
```
|
||||
|
||||
`pb_hooks` bleibt vorerst leer — es gibt in diesem Projekt keine serverseitigen Hooks. Das Verzeichnis existiert trotzdem, weil das Dockerfile es kopiert.
|
||||
|
||||
- [ ] **Step 2: `backend/Dockerfile` schreiben**
|
||||
|
||||
```dockerfile
|
||||
FROM alpine:3.21
|
||||
|
||||
# Version bewusst gepinnt: Der GitHub-Asset heißt
|
||||
# pocketbase_<version>_linux_amd64.zip, ein "latest" gibt es nicht. Ohne Pin
|
||||
# zöge jeder Redeploy unangekündigt eine neue Version inklusive möglicher
|
||||
# DB-Schema-Migrationen.
|
||||
ARG PB_VERSION=0.39.6
|
||||
|
||||
RUN apk add --no-cache ca-certificates unzip wget
|
||||
|
||||
RUN wget -q https://github.com/pocketbase/pocketbase/releases/download/v${PB_VERSION}/pocketbase_${PB_VERSION}_linux_amd64.zip -O /tmp/pb.zip \
|
||||
&& unzip /tmp/pb.zip -d /pb/ \
|
||||
&& rm /tmp/pb.zip
|
||||
|
||||
COPY ./pb_migrations /pb/pb_migrations
|
||||
COPY ./pb_hooks /pb/pb_hooks
|
||||
|
||||
COPY ./entrypoint.sh /pb/entrypoint.sh
|
||||
RUN chmod +x /pb/entrypoint.sh
|
||||
|
||||
EXPOSE 8090
|
||||
|
||||
ENTRYPOINT ["/pb/entrypoint.sh"]
|
||||
|
||||
CMD ["/pb/pocketbase", "serve", "--http=0.0.0.0:8090", "--dir=/pb/pb_data", "--migrationsDir=/pb/pb_migrations", "--hooksDir=/pb/pb_hooks"]
|
||||
```
|
||||
|
||||
- [ ] **Step 3: `backend/entrypoint.sh` schreiben**
|
||||
|
||||
```sh
|
||||
#!/bin/sh
|
||||
set -e
|
||||
|
||||
# Superuser nur beim allerersten Start anlegen. Existiert der Account bereits,
|
||||
# scheitert "create" von selbst mit "email: Value must be unique." und das
|
||||
# Passwort bleibt unangetastet. Damit überschreibt ein Redeploy keine
|
||||
# Passwortänderung, die im Admin-UI gemacht wurde.
|
||||
#
|
||||
# Bewusst NICHT "superuser upsert": das würde bei jedem Start das Passwort aus
|
||||
# der Env zurückschreiben und UI-seitige Änderungen still aushebeln.
|
||||
#
|
||||
# Ohne die beiden Variablen wird der Schritt übersprungen; PocketBase zeigt dann
|
||||
# beim ersten Start einen Installer-Link im Log.
|
||||
if [ -n "$SUPERUSER_EMAIL" ] && [ -n "$SUPERUSER_PASSWORD" ]; then
|
||||
# PocketBase liefert auch im Fehlerfall Exitcode 0 und meldet den Fehler nur
|
||||
# auf stdout — deshalb wird hier die Ausgabe ausgewertet, nicht der Status.
|
||||
out=$(/pb/pocketbase superuser create "$SUPERUSER_EMAIL" "$SUPERUSER_PASSWORD" \
|
||||
--dir=/pb/pb_data 2>&1) || true
|
||||
|
||||
case "$out" in
|
||||
*"must be unique"*)
|
||||
echo "Superuser existiert bereits — Passwort bleibt unverändert"
|
||||
;;
|
||||
*"Successfully created"*)
|
||||
echo "$out"
|
||||
;;
|
||||
*)
|
||||
# Unerwarteter Fehler (z. B. zu kurzes Passwort): sichtbar machen und
|
||||
# abbrechen, statt mit unklarem Zustand weiterzulaufen.
|
||||
echo "Superuser konnte nicht angelegt werden: $out" >&2
|
||||
exit 1
|
||||
;;
|
||||
esac
|
||||
else
|
||||
echo "SUPERUSER_EMAIL/SUPERUSER_PASSWORD nicht gesetzt — Superuser wird nicht angelegt"
|
||||
fi
|
||||
|
||||
exec "$@"
|
||||
```
|
||||
|
||||
- [ ] **Step 4: `backend/docker-compose.yaml` schreiben**
|
||||
|
||||
```yaml
|
||||
services:
|
||||
pocketbase:
|
||||
build:
|
||||
context: .
|
||||
args:
|
||||
# Version-Pin. Update: hier bzw. im Dockerfile hochsetzen und committen.
|
||||
PB_VERSION: ${PB_VERSION:-0.39.6}
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "8090:8090"
|
||||
volumes:
|
||||
# Persistenz der SQLite-DB inklusive aller Laufzeitdaten, Uploads,
|
||||
# Mail-Settings und des Superusers. Ohne dieses Mapping ist nach jedem
|
||||
# Redeploy alles weg — das Schema käme zwar aus pb_migrations zurück,
|
||||
# die Daten aber nicht.
|
||||
- ./pb_data:/pb/pb_data
|
||||
environment:
|
||||
# Superuser wird nur beim allerersten Start angelegt (siehe entrypoint.sh)
|
||||
SUPERUSER_EMAIL: ${SUPERUSER_EMAIL:-}
|
||||
SUPERUSER_PASSWORD: ${SUPERUSER_PASSWORD:-}
|
||||
healthcheck:
|
||||
test: ["CMD", "wget", "-qO-", "http://127.0.0.1:8090/api/health"]
|
||||
interval: 30s
|
||||
timeout: 5s
|
||||
retries: 3
|
||||
start_period: 10s
|
||||
```
|
||||
|
||||
- [ ] **Step 5: `backend/.gitignore` schreiben**
|
||||
|
||||
```
|
||||
pb_data/
|
||||
*.db
|
||||
.DS_Store
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
```
|
||||
|
||||
- [ ] **Step 6: `backend/.env.example` schreiben**
|
||||
|
||||
```
|
||||
# Vorlage für die lokale .env — kopieren und ausfüllen:
|
||||
# cp .env.example .env
|
||||
#
|
||||
# Diese Datei enthält nur Platzhalter und ist versioniert. Die echte .env steht
|
||||
# in .gitignore und darf nicht committet werden.
|
||||
|
||||
# Admin-Zugang, wird nur beim allerersten Start angelegt. Existiert der Account
|
||||
# bereits, bleibt das Passwort unverändert — spätere Änderungen gehören ins
|
||||
# Admin-UI, nicht in diese Datei. Mindestens 8 Zeichen.
|
||||
# Beide Variablen weglassen = PocketBase gibt beim ersten Start einen
|
||||
# Installer-Link im Log aus (30 Minuten gültig).
|
||||
SUPERUSER_EMAIL=admin@example.de
|
||||
SUPERUSER_PASSWORD=bitte-aendern-min-8-zeichen
|
||||
|
||||
# Optional: überschreibt den in docker-compose.yaml gepinnten Default.
|
||||
# Nur setzen, wenn bewusst eine andere PocketBase-Version gebaut werden soll.
|
||||
#PB_VERSION=0.39.6
|
||||
```
|
||||
|
||||
- [ ] **Step 7: Dateien prüfen**
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de/backend
|
||||
ls -a
|
||||
sh -n entrypoint.sh && echo "entrypoint.sh: Syntax ok"
|
||||
```
|
||||
|
||||
Erwartet: Alle sechs Dateien plus `pb_migrations/` und `pb_hooks/` sind da, und die Syntaxprüfung meldet „ok".
|
||||
|
||||
---
|
||||
|
||||
### Task 5: Schema-Migration aus der Live-Instanz erzeugen
|
||||
|
||||
**Files:**
|
||||
- Create: `backend/pb_migrations/1754400000_init_schema.js`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: `backend/pb_migrations/` aus Task 4; `frontend/.env` (für `PB_TYPEGEN_URL` und `PB_SUPERUSER_TOKEN`) aus Task 1
|
||||
- Produces: Eine Migration, die beim Containerstart die sechs Collections `users, teams, events, runs, riders, times` anlegt.
|
||||
|
||||
- [ ] **Step 1: Live-Schema abrufen und die Migration generieren**
|
||||
|
||||
Das Schema wird nicht abgeschrieben, sondern aus dem Live-Abruf generiert — 23 KB JSON von Hand zu übertragen wäre fehleranfällig. Der Aufruf ist **rein lesend**.
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de
|
||||
set -a && . ./frontend/.env && set +a
|
||||
|
||||
curl -sL -H "Authorization: $PB_SUPERUSER_TOKEN" \
|
||||
"${PB_TYPEGEN_URL%/}/api/collections?perPage=200" -o /tmp/live_schema.json
|
||||
|
||||
python3 - <<'PY'
|
||||
import json
|
||||
|
||||
with open('/tmp/live_schema.json') as f:
|
||||
data = json.load(f)
|
||||
|
||||
# System-Collections (_superusers, _mfas, ...) legt PocketBase selbst an.
|
||||
keep = [c for c in data['items'] if not c['name'].startswith('_')]
|
||||
|
||||
# Reihenfolge so, dass Relationsziele vor ihren Nutzern stehen.
|
||||
order = {'users': 0, 'teams': 1, 'events': 2, 'runs': 3, 'riders': 4, 'times': 5}
|
||||
keep.sort(key=lambda c: order.get(c['name'], 99))
|
||||
|
||||
names = [c['name'] for c in keep]
|
||||
expected = ['users', 'teams', 'events', 'runs', 'riders', 'times']
|
||||
assert names == expected, f'Unerwartete Collections: {names}'
|
||||
|
||||
collections = json.dumps(keep, indent=4, ensure_ascii=False)
|
||||
ids = json.dumps([c['id'] for c in keep], indent=4)
|
||||
|
||||
migration = f'''/// <reference path="../pb_data/types.d.ts" />
|
||||
|
||||
// Schema-Snapshot der sechs fachlichen Collections, abgezogen von der
|
||||
// produktiven Instanz. System-Collections (_superusers, _mfas, ...) legt
|
||||
// PocketBase selbst an und stehen deshalb nicht hier drin.
|
||||
//
|
||||
// importCollections wird mit deleteMissing = false aufgerufen: Die Migration
|
||||
// legt an und aktualisiert, löscht aber nichts, was nicht im Snapshot steht.
|
||||
|
||||
migrate((app) => {{
|
||||
const collections = {collections}
|
||||
|
||||
app.importCollections(JSON.stringify(collections), false)
|
||||
}}, (app) => {{
|
||||
// Rückwärts: die angelegten Collections wieder entfernen, in umgekehrter
|
||||
// Reihenfolge, damit keine Relation ins Leere zeigt.
|
||||
//
|
||||
// "users" bleibt bewusst stehen: PocketBase legt die Auth-Collection selbst
|
||||
// an, ein Löschen wäre kein Zurückrollen dieser Migration.
|
||||
const ids = {ids}
|
||||
|
||||
for (const id of ids.slice().reverse()) {{
|
||||
if (id === '_pb_users_auth_') continue
|
||||
|
||||
try {{
|
||||
app.delete(app.findCollectionByNameOrId(id))
|
||||
}} catch {{
|
||||
// Bereits entfernt — nichts zu tun.
|
||||
}}
|
||||
}}
|
||||
}})
|
||||
'''
|
||||
|
||||
with open('backend/pb_migrations/1754400000_init_schema.js', 'w') as f:
|
||||
f.write(migration)
|
||||
|
||||
print('Migration geschrieben,', len(migration), 'Bytes, Collections:', names)
|
||||
PY
|
||||
```
|
||||
|
||||
Erwartet: Die Ausgabe nennt die sechs Collections in genau dieser Reihenfolge. Schlägt das `assert` fehl, hat sich das Live-Schema geändert — dann **abbrechen und melden**, nicht die Erwartung anpassen.
|
||||
|
||||
Der Zugriff scheitert mit HTTP 401, wenn `PB_SUPERUSER_TOKEN` abgelaufen ist. In dem Fall im Admin-UI einen neuen Token erzeugen und in `frontend/.env` eintragen.
|
||||
|
||||
- [ ] **Step 2: Erzeugte Migration prüfen**
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de
|
||||
node --check backend/pb_migrations/1754400000_init_schema.js \
|
||||
&& echo "Syntax ok (migrate ist erst zur Laufzeit definiert, das ist erwartet)"
|
||||
grep -c '"name"' backend/pb_migrations/1754400000_init_schema.js
|
||||
```
|
||||
|
||||
Erwartet: `node --check` meldet keinen Syntaxfehler. Die `grep`-Zahl liegt deutlich über 50 (sechs Collections mit allen Feldern).
|
||||
|
||||
- [ ] **Step 3: Sicherstellen, dass keine Tokens in die Migration geraten sind**
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de
|
||||
grep -in "token\|secret\|password" backend/pb_migrations/1754400000_init_schema.js | head
|
||||
```
|
||||
|
||||
Erwartet: Treffer nur als **Feldnamen** aus dem Schema (`tokenKey`, `password` in der `users`-Collection) — das sind Felddefinitionen, keine Werte. Erscheint irgendwo ein tatsächlicher Tokenwert, ist die Migration unbrauchbar: abbrechen und melden.
|
||||
|
||||
---
|
||||
|
||||
### Task 6: Backend starten und verifizieren
|
||||
|
||||
**Files:**
|
||||
- Keine Änderungen — reine Prüfung.
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: Tasks 4 und 5
|
||||
- Produces: Nachweis, dass ein frischer Container das Schema herstellt.
|
||||
|
||||
- [ ] **Step 1: Prüfen, ob Docker verfügbar ist**
|
||||
|
||||
```bash
|
||||
docker info >/dev/null 2>&1 && echo "Docker läuft" || echo "Docker NICHT verfügbar"
|
||||
```
|
||||
|
||||
Meldet das „NICHT verfügbar", werden die Steps 2–5 übersprungen. Dann gilt: Das Backend ist **ungeprüft** und muss in Task 8 und im Abschlussbericht ausdrücklich so bezeichnet werden. Nicht als erledigt darstellen.
|
||||
|
||||
- [ ] **Step 2: Lokale `.env` anlegen und Container bauen**
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de/backend
|
||||
cp .env.example .env
|
||||
docker compose up -d --build
|
||||
```
|
||||
|
||||
Erwartet: Der Build lädt PocketBase 0.39.6 und startet den Container.
|
||||
|
||||
Für die lokale Prüfung genügen die Platzhalter aus `.env.example`; das Passwort erfüllt die Mindestlänge von 8 Zeichen. Diese `.env` ist gitignored.
|
||||
|
||||
- [ ] **Step 3: Health und Superuser-Bootstrap prüfen**
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de/backend
|
||||
sleep 5
|
||||
curl -s http://127.0.0.1:8090/api/health
|
||||
echo
|
||||
docker compose logs | grep -i "superuser\|migrat" | tail -10
|
||||
```
|
||||
|
||||
Erwartet: `/api/health` antwortet mit `{"code":200,...}`. Im Log steht `Successfully created new superuser` und ein Hinweis auf die angewandte Migration.
|
||||
|
||||
- [ ] **Step 4: Schema im Container prüfen**
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de/backend
|
||||
set -a && . ./.env && set +a
|
||||
TOKEN=$(curl -s -X POST http://127.0.0.1:8090/api/collections/_superusers/auth-with-password \
|
||||
-H "Content-Type: application/json" \
|
||||
-d "{\"identity\":\"$SUPERUSER_EMAIL\",\"password\":\"$SUPERUSER_PASSWORD\"}" \
|
||||
| python3 -c "import sys,json; print(json.load(sys.stdin)['token'])")
|
||||
|
||||
curl -s -H "Authorization: $TOKEN" \
|
||||
"http://127.0.0.1:8090/api/collections?perPage=200" \
|
||||
| python3 -c "
|
||||
import sys, json
|
||||
d = json.load(sys.stdin)
|
||||
names = sorted(c['name'] for c in d['items'] if not c['name'].startswith('_'))
|
||||
print('Gefunden:', names)
|
||||
expected = sorted(['users','teams','events','runs','riders','times'])
|
||||
print('OK' if names == expected else 'FEHLT: ' + str(set(expected) - set(names)))
|
||||
"
|
||||
```
|
||||
|
||||
Erwartet: `Gefunden:` listet die sechs Collections und die Zeile darunter sagt `OK`.
|
||||
|
||||
- [ ] **Step 5: Container wieder stoppen**
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de/backend
|
||||
docker compose down
|
||||
```
|
||||
|
||||
`pb_data/` bleibt liegen und ist gitignored.
|
||||
|
||||
---
|
||||
|
||||
### Task 7: Dokumentation und Root-Dateien anpassen
|
||||
|
||||
**Files:**
|
||||
- Create: `backend/README.md`
|
||||
- Modify: `.gitignore` (Root)
|
||||
- Modify: `README.md` (Root)
|
||||
- Modify: `CLAUDE.md`
|
||||
- Delete: `pocketbase_schema.json`, `example_pb_schema.json`, `pocketbase_migrate.zip`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: Tasks 1–6
|
||||
- Produces: Ein Repo, dessen Dokumentation die neue Struktur beschreibt.
|
||||
|
||||
- [ ] **Step 1: Veraltete Dateien löschen**
|
||||
|
||||
Alle drei sind untracked — sie sind nach dem Löschen endgültig weg. Das ist so abgestimmt: `pocketbase_schema.json` nennt Collections (`stages`, `organizers`, `results`), die auf der Live-Instanz nicht existieren, und ist damit nachweislich veraltet.
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de
|
||||
rm -f pocketbase_schema.json example_pb_schema.json pocketbase_migrate.zip
|
||||
ls -1
|
||||
```
|
||||
|
||||
- [ ] **Step 2: `backend/README.md` schreiben**
|
||||
|
||||
```markdown
|
||||
# stammtisch-hersbruck.de — Backend (PocketBase)
|
||||
|
||||
PocketBase-Instanz für Events, Läufe, Fahrer, Zeiten und Teams.
|
||||
|
||||
## Lokal starten
|
||||
|
||||
`.env` aus der Vorlage anlegen (die `.env` selbst steht in `.gitignore`):
|
||||
|
||||
cp .env.example .env
|
||||
|
||||
und die Werte eintragen — `.env.example` beschreibt jede Variable. Dann:
|
||||
|
||||
docker compose up -d --build
|
||||
|
||||
Admin-UI: http://127.0.0.1:8090/_/ — Login mit `SUPERUSER_EMAIL`/`SUPERUSER_PASSWORD`.
|
||||
|
||||
Damit das Frontend gegen diese Instanz läuft, in `../frontend/.env`
|
||||
`PUBLIC_PB_URL=http://127.0.0.1:8090` setzen.
|
||||
|
||||
## Schema
|
||||
|
||||
Das Schema liegt als versionierte Migration in `pb_migrations/` und wird beim
|
||||
Start automatisch angewendet. Es enthält die sechs fachlichen Collections
|
||||
`users`, `teams`, `events`, `runs`, `riders`, `times`.
|
||||
|
||||
`1754400000_init_schema.js` ist ein Snapshot der produktiven Instanz. Er wurde
|
||||
per `GET /api/collections` abgezogen und ruft `importCollections` mit
|
||||
`deleteMissing = false` auf — die Migration legt an und aktualisiert, löscht
|
||||
aber nichts, was nicht im Snapshot steht.
|
||||
|
||||
Schema-Änderungen im Admin-UI erzeugen in `pb_migrations/` neue Dateien; diese
|
||||
müssen committet werden.
|
||||
|
||||
Ein frisch gestarteter Container hat damit dasselbe Schema wie die produktive
|
||||
Instanz — aber **keine** Daten.
|
||||
|
||||
## Datenpersistenz
|
||||
|
||||
Sämtliche Laufzeitdaten liegen in der SQLite-DB unter `/pb/pb_data`: Datensätze,
|
||||
Uploads, die SMTP-Einstellungen und der Superuser. Ohne gemountetes Volume auf
|
||||
diesem Pfad sind sie nach jedem Redeploy verloren.
|
||||
|
||||
Das Volume-Mapping `./pb_data:/pb/pb_data` steht in der `docker-compose.yaml`,
|
||||
damit die Persistenz-Konfiguration versioniert im Repo liegt.
|
||||
|
||||
**Trügerisches Signal:** Die Collections kommen aus der Migration und sind nach
|
||||
einem Redeploy auch dann da, wenn gar kein Volume existiert. Sie taugen **nicht**
|
||||
als Nachweis funktionierender Persistenz — das zeigt nur ein Datensatz, der in
|
||||
keiner Migration steht.
|
||||
|
||||
Mount prüfen:
|
||||
|
||||
docker inspect <container> --format '{{json .Mounts}}' | jq
|
||||
|
||||
Erscheint dort kein Eintrag mit `"Destination": "/pb/pb_data"`, fehlt die Persistenz.
|
||||
|
||||
`pb_data/` steht in `.gitignore` und gehört dort auch hin.
|
||||
|
||||
## Superuser-Verhalten
|
||||
|
||||
`entrypoint.sh` ruft `superuser create` auf — bewusst **nicht** `upsert`.
|
||||
Existiert der Account bereits, scheitert `create` mit „Value must be unique" und
|
||||
das Passwort bleibt unangetastet. Eine im Admin-UI vorgenommene
|
||||
Passwortänderung überlebt damit jeden Redeploy.
|
||||
|
||||
| Situation | Verhalten |
|
||||
|---|---|
|
||||
| Erster Start, Variablen gesetzt | Superuser wird angelegt |
|
||||
| Neustart, Account existiert | „Superuser existiert bereits — Passwort bleibt unverändert" |
|
||||
| Passwort im UI geändert, dann Neustart | UI-Passwort gilt weiter, Env wird ignoriert |
|
||||
| Variablen nicht gesetzt | Übersprungen, PocketBase gibt Installer-Link im Log aus |
|
||||
| Passwort zu kurz (< 8 Zeichen) | Container bricht mit Exitcode 1 ab |
|
||||
|
||||
Passwort später ändern: **im Admin-UI**, nicht über die Env — eine Änderung der
|
||||
Env-Variable hat keine Wirkung mehr, sobald der Account existiert.
|
||||
|
||||
## PocketBase aktualisieren
|
||||
|
||||
Die Version ist über das Build-Arg `PB_VERSION` gepinnt (Dockerfile und
|
||||
`docker-compose.yaml`). Wert hochsetzen, committen, neu bauen.
|
||||
|
||||
Ein `latest` gibt es bewusst nicht: Der GitHub-Asset heißt
|
||||
`pocketbase_<version>_linux_amd64.zip`, enthält die Version also im Dateinamen.
|
||||
Der Pin ist auch gewollt — sonst zieht jeder Rebuild unangekündigt eine neue
|
||||
Version, inklusive möglicher DB-Schema-Migrationen.
|
||||
|
||||
Vor einem Update: Changelog prüfen
|
||||
(https://github.com/pocketbase/pocketbase/releases) und `pb_data` sichern —
|
||||
PocketBase migriert die DB beim Start automatisch, ein Downgrade ist danach
|
||||
nicht mehr ohne Weiteres möglich.
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Root-`.gitignore` ersetzen**
|
||||
|
||||
Die bisherige `.gitignore` stammt aus dem SvelteKit-Template und geht davon aus, dass die App im Root liegt. Vollständiger neuer Inhalt:
|
||||
|
||||
```
|
||||
# Dependencies
|
||||
node_modules
|
||||
|
||||
# Build-Output
|
||||
.output
|
||||
.vercel
|
||||
.netlify
|
||||
.wrangler
|
||||
.svelte-kit
|
||||
build
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Env — enthält Tokens, gehört nie ins Repo
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Vite
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
||||
|
||||
# PocketBase-Laufzeitdaten
|
||||
backend/pb_data/
|
||||
*.db
|
||||
|
||||
# IDE
|
||||
.idea/
|
||||
```
|
||||
|
||||
Die Muster ohne führenden Schrägstrich greifen in jedem Unterverzeichnis — `node_modules` deckt damit auch `frontend/node_modules` ab.
|
||||
|
||||
- [ ] **Step 4: Root-`README.md` ersetzen**
|
||||
|
||||
```markdown
|
||||
# stammtisch-hersbruck.de
|
||||
|
||||
Zeitmessung und Verwaltung für Läufe des Stammtisch Hersbruck.
|
||||
|
||||
Das Repository enthält beide Teile der Anwendung:
|
||||
|
||||
| Verzeichnis | Inhalt |
|
||||
|---|---|
|
||||
| [`frontend/`](frontend/) | SvelteKit-5-Anwendung (Svelte 5 Runes, Tailwind 4) |
|
||||
| [`backend/`](backend/) | PocketBase-Instanz — Dockerfile, Schema-Migrationen |
|
||||
|
||||
## Schnellstart
|
||||
|
||||
Frontend gegen die produktive Instanz:
|
||||
|
||||
cd frontend
|
||||
cp .env.example .env # Werte eintragen
|
||||
npm ci
|
||||
npm run dev
|
||||
|
||||
Die App läuft dann auf http://stammtisch-hersbruck.de.localhost:31337
|
||||
|
||||
Backend lokal (optional — der Default zeigt auf die produktive Instanz):
|
||||
|
||||
cd backend
|
||||
cp .env.example .env # Werte eintragen
|
||||
docker compose up -d --build
|
||||
|
||||
Danach in `frontend/.env` `PUBLIC_PB_URL=http://127.0.0.1:8090` setzen.
|
||||
|
||||
Details stehen in [`backend/README.md`](backend/README.md).
|
||||
|
||||
## PocketBase
|
||||
|
||||
Produktiv: https://api.stammtisch-hersbruck.de
|
||||
|
||||
Welche Instanz das Frontend anspricht, entscheidet `PUBLIC_PB_URL` in
|
||||
`frontend/.env`. Das Schema ist als Migration in `backend/pb_migrations/`
|
||||
versioniert.
|
||||
```
|
||||
|
||||
- [ ] **Step 5: `CLAUDE.md` an die neue Struktur anpassen**
|
||||
|
||||
Drei Stellen ändern, alles andere bleibt.
|
||||
|
||||
**a)** Im Abschnitt „Development Commands" den einleitenden Satz und den Codeblock ersetzen durch:
|
||||
|
||||
````markdown
|
||||
Alle Frontend-Befehle laufen aus `frontend/`:
|
||||
|
||||
```bash
|
||||
cd frontend
|
||||
|
||||
# Start development server (runs on http://stammtisch-hersbruck.de.localhost:31337)
|
||||
npm run dev
|
||||
|
||||
# Build for production
|
||||
npm run build
|
||||
|
||||
# Preview production build
|
||||
npm run preview
|
||||
|
||||
# Type-check Svelte files
|
||||
npm run check
|
||||
|
||||
# Type-check with watch mode
|
||||
npm run check:watch
|
||||
|
||||
# Generate TypeScript types from PocketBase schema
|
||||
npm run generate-pocketbase-types
|
||||
```
|
||||
|
||||
Backend (PocketBase) aus `backend/`:
|
||||
|
||||
```bash
|
||||
cd backend
|
||||
|
||||
# PocketBase lokal starten (Admin-UI auf http://127.0.0.1:8090/_/)
|
||||
docker compose up -d --build
|
||||
|
||||
# Stoppen
|
||||
docker compose down
|
||||
```
|
||||
````
|
||||
|
||||
**b)** Im Abschnitt „Backend Integration (PocketBase)" den ersten Aufzählungspunkt ersetzen:
|
||||
|
||||
Vorher:
|
||||
```markdown
|
||||
- **API Base URL**: `https://api.stammtisch-hersbruck.de`
|
||||
```
|
||||
|
||||
Nachher:
|
||||
```markdown
|
||||
- **API Base URL**: konfigurierbar über `PUBLIC_PB_URL` in `frontend/.env`.
|
||||
Default ist die produktive Instanz `https://api.stammtisch-hersbruck.de`;
|
||||
für das lokale Backend aus `backend/` auf `http://127.0.0.1:8090` umstellen.
|
||||
- **Schema**: versioniert als Migration in `backend/pb_migrations/`. Änderungen
|
||||
im Admin-UI erzeugen dort neue Dateien, die committet werden müssen.
|
||||
```
|
||||
|
||||
Im selben Abschnitt die Collections-Zeile korrigieren — `organizers`, `stages` und `results` existieren nicht:
|
||||
|
||||
Vorher:
|
||||
```markdown
|
||||
- **Collections**: events, organizers, results, riders, stages, users
|
||||
```
|
||||
|
||||
Nachher:
|
||||
```markdown
|
||||
- **Collections**: users, teams, events, runs, riders, times
|
||||
```
|
||||
|
||||
**c)** Im Abschnitt „Project Configuration" ergänzen:
|
||||
|
||||
```markdown
|
||||
- **Repo-Struktur**: Monorepo mit `frontend/` (SvelteKit) und `backend/`
|
||||
(PocketBase). Ein einziges Git-Repo im Root.
|
||||
```
|
||||
|
||||
Und den Pfad-Alias-Punkt präzisieren:
|
||||
|
||||
Vorher:
|
||||
```markdown
|
||||
- **Path alias**: `@/*` resolves to `./src/lib/*` (configured in svelte.config.js)
|
||||
```
|
||||
|
||||
Nachher:
|
||||
```markdown
|
||||
- **Path alias**: `@/*` resolves to `./src/lib/*` (configured in frontend/svelte.config.js)
|
||||
```
|
||||
|
||||
- [ ] **Step 6: Dokumentation gegenprüfen**
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de
|
||||
grep -n "organizers\|stages\|results" CLAUDE.md
|
||||
```
|
||||
|
||||
Erwartet: Treffer nur dort, wo es fachlich nicht um Collections geht (etwa im Satz über den Zweck der App). Steht `organizers`/`stages` noch in der Collections-Liste, wurde Step 5b nicht vollständig ausgeführt.
|
||||
|
||||
---
|
||||
|
||||
### Task 8: Initialen Commit anlegen
|
||||
|
||||
**Files:**
|
||||
- Keine inhaltlichen Änderungen.
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: Tasks 1–7
|
||||
- Produces: Den ersten Commit des Repos mit der fertigen Struktur.
|
||||
|
||||
- [ ] **Step 1: Prüfen, was committet würde**
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de
|
||||
git add -A
|
||||
git status --short
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Sicherstellen, dass keine Secrets und keine Artefakte dabei sind**
|
||||
|
||||
Das ist der wichtigste Schritt dieser Task — `frontend/.env` enthält `PB_SUPERUSER_TOKEN`.
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de
|
||||
git diff --cached --name-only | grep -E "\.env$|\.env\.|node_modules|\.svelte-kit|pb_data" \
|
||||
|| echo "Sauber: keine .env, keine node_modules, kein pb_data im Index"
|
||||
```
|
||||
|
||||
Erwartet: die Meldung „Sauber…". Erscheint stattdessen ein Treffer (außer `.env.example`), **nicht committen**, sondern die Datei mit `git rm --cached <pfad>` aus dem Index nehmen und die `.gitignore` korrigieren.
|
||||
|
||||
Zusätzlich zur Sicherheit:
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de
|
||||
git diff --cached | grep -in "PB_SUPERUSER_TOKEN=." | grep -v "example" | head
|
||||
```
|
||||
|
||||
Erwartet: **keine Ausgabe**. Ein Treffer bedeutet, dass ein echter Tokenwert im Commit landen würde.
|
||||
|
||||
- [ ] **Step 3: Committen**
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de
|
||||
git commit -m "$(cat <<'EOF'
|
||||
chore: Repo-Struktur mit frontend/ und backend/ aufsetzen
|
||||
|
||||
Die SvelteKit-App liegt unter frontend/, das Backend unter backend/ als
|
||||
eigenständige PocketBase-Instanz mit Dockerfile, docker-compose und
|
||||
versioniertem Schema.
|
||||
|
||||
- PocketBase-URL über PUBLIC_PB_URL konfigurierbar, Default bleibt die
|
||||
produktive Instanz
|
||||
- Schema als Snapshot-Migration der sechs fachlichen Collections
|
||||
(users, teams, events, runs, riders, times)
|
||||
- Veraltete Schema-Dateien im Root entfernt: pocketbase_schema.json nannte
|
||||
Collections, die auf der Live-Instanz nicht existieren
|
||||
|
||||
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
||||
EOF
|
||||
)"
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Ergebnis prüfen**
|
||||
|
||||
```bash
|
||||
cd /home/dne/Projekte/stammtisch-hersbruck.de
|
||||
git log --stat -1 | head -30
|
||||
git status --short
|
||||
```
|
||||
|
||||
Erwartet: Ein Commit, `git status` ist leer.
|
||||
|
||||
**Kein `git push`.** Der bleibt ausdrücklicher Anweisung des Nutzers vorbehalten.
|
||||
|
||||
---
|
||||
|
||||
## Abschlussbericht
|
||||
|
||||
Nach Task 8 an den Nutzer berichten:
|
||||
|
||||
- Was verifiziert wurde und womit (`npm run check`, Dev-Server im Browser, `/api/health`, Collection-Abgleich im Container)
|
||||
- Falls Docker in Task 6 nicht verfügbar war: das Backend ausdrücklich als **ungeprüft** benennen, nicht als erledigt
|
||||
- Die drei gelöschten Dateien nennen
|
||||
- Dass nicht gepusht wurde
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
# Repo-Umbau auf `frontend/` und `backend/`
|
||||
|
||||
**Datum:** 2026-08-06
|
||||
**Status:** Entwurf, vom Nutzer freigegeben
|
||||
|
||||
## Ziel
|
||||
|
||||
Das Repository so umbauen, dass die SvelteKit-App unter `frontend/` und eine
|
||||
eigenständige, lokal lauffähige PocketBase-Instanz unter `backend/` liegt —
|
||||
nach dem Vorbild von `therapiezentrum-fortschritt-landingpage`.
|
||||
|
||||
Anders als beim Vorbild bleibt dies ein **Monorepo**: Das vorhandene `.git` im
|
||||
Root bleibt bestehen, `frontend/` und `backend/` sind Unterverzeichnisse ohne
|
||||
eigene Repos.
|
||||
|
||||
## Ausgangslage
|
||||
|
||||
- SvelteKit 5 mit Svelte-5-Runes, PocketBase als Backend
|
||||
- App liegt direkt im Repo-Root (`src/`, `static/`, `scripts/`, Configs)
|
||||
- Git-Repo existiert, Branch `master`, **noch kein Commit** — alles untracked
|
||||
- PocketBase läuft ausschließlich remote unter `https://api.stammtisch-hersbruck.de`
|
||||
- Die URL ist in `src/lib/stores/pocketbase.svelte.ts:4` hartkodiert
|
||||
- Schema-Pflege bisher über `scripts/migrate-schema.ts` per Superuser-Token
|
||||
- Es gibt kein `pb_migrations`, kein `pb_hooks`, kein Dockerfile
|
||||
|
||||
### Befund zum vorhandenen Schema
|
||||
|
||||
Der Live-Abruf über `GET /api/collections` liefert die fachlichen Collections
|
||||
`users, riders, times, events, runs, teams` (plus System-Collections
|
||||
`_superusers, _externalAuths, _mfas, _otps, _authOrigins`).
|
||||
|
||||
Die Datei `pocketbase_schema.json` im Root nennt dagegen zusätzlich `stages`,
|
||||
`organizers` und `results`, die **live nicht existieren**. Sie ist damit
|
||||
nachweislich veraltet. Maßgeblich ist der Live-Stand — er deckt sich mit den
|
||||
vorhandenen Stores unter `src/lib/stores/`.
|
||||
|
||||
## Zielstruktur
|
||||
|
||||
```
|
||||
stammtisch-hersbruck.de/ ← .git bleibt hier (Monorepo)
|
||||
├── CLAUDE.md
|
||||
├── README.md
|
||||
├── .gitignore
|
||||
├── docs/superpowers/{specs,plans}/
|
||||
├── frontend/
|
||||
│ ├── src/ static/ scripts/
|
||||
│ ├── package.json package-lock.json .npmrc
|
||||
│ ├── svelte.config.js vite.config.ts tsconfig.json
|
||||
│ ├── components.json
|
||||
│ ├── .env .env.example .gitignore
|
||||
│ └── README.md
|
||||
└── backend/
|
||||
├── Dockerfile docker-compose.yaml entrypoint.sh
|
||||
├── .env.example .gitignore README.md
|
||||
├── pb_migrations/
|
||||
│ └── <ts>_init_schema.js
|
||||
├── pb_hooks/ (leer, .gitkeep)
|
||||
└── pb_data/ (gitignored, entsteht beim ersten Start)
|
||||
```
|
||||
|
||||
## Umsetzung
|
||||
|
||||
### 1. Frontend verschieben
|
||||
|
||||
Alle App-Dateien nach `frontend/` verschieben:
|
||||
`src/`, `static/`, `scripts/`, `package.json`, `package-lock.json`, `.npmrc`,
|
||||
`svelte.config.js`, `vite.config.ts`, `tsconfig.json`, `components.json`, `.env`.
|
||||
|
||||
`node_modules/` und `.svelte-kit/` werden **nicht** verschoben, sondern gelöscht
|
||||
und in `frontend/` per `npm ci` neu erzeugt — verschobene `node_modules`
|
||||
enthalten absolute Pfade in Binaries und Caches.
|
||||
|
||||
Keine Config braucht eine Pfadanpassung: Alle Pfade in `svelte.config.js`,
|
||||
`vite.config.ts` und `tsconfig.json` sind relativ zum jeweiligen Projekt-Root.
|
||||
Die Scripts unter `scripts/` lesen `.env` relativ zum Arbeitsverzeichnis und
|
||||
laufen über npm-Scripts, also aus `frontend/` heraus — sie funktionieren
|
||||
unverändert.
|
||||
|
||||
### 2. PocketBase-URL konfigurierbar machen
|
||||
|
||||
`src/lib/stores/pocketbase.svelte.ts` verwendet statt der hartkodierten URL:
|
||||
|
||||
```ts
|
||||
import { PUBLIC_PB_URL } from '$env/static/public'
|
||||
export const api = new PocketBase(PUBLIC_PB_URL) as TypedPocketBase
|
||||
```
|
||||
|
||||
In `frontend/.env` und `frontend/.env.example`:
|
||||
|
||||
```
|
||||
PUBLIC_PB_URL=https://api.stammtisch-hersbruck.de
|
||||
```
|
||||
|
||||
Der Default bleibt damit die Remote-Instanz — nichts am bisherigen Verhalten
|
||||
ändert sich. Für Arbeit gegen das lokale Backend wird die Variable auf
|
||||
`http://127.0.0.1:8090` gesetzt.
|
||||
|
||||
Die bestehenden Variablen `PB_TYPEGEN_URL`, `PB_TYPEGEN_TOKEN` und
|
||||
`PB_SUPERUSER_TOKEN` bleiben unverändert in `.env` (Typgenerierung und
|
||||
Migrations-Scripts).
|
||||
|
||||
### 3. Backend aufsetzen
|
||||
|
||||
Übernommen aus dem Vorbild, projektspezifisch angepasst:
|
||||
|
||||
**`Dockerfile`** — Alpine-Basis, PocketBase über Build-Arg `PB_VERSION`
|
||||
gepinnt, kopiert `pb_migrations/` und `pb_hooks/`, startet über `entrypoint.sh`
|
||||
mit `serve --http=0.0.0.0:8090 --dir=/pb/pb_data`.
|
||||
|
||||
**`docker-compose.yaml`** — Volume `./pb_data:/pb/pb_data` für Persistenz,
|
||||
`restart: unless-stopped`, Healthcheck gegen `/api/health`, Port 8090.
|
||||
Env: `SUPERUSER_EMAIL`, `SUPERUSER_PASSWORD`, `PB_VERSION`.
|
||||
|
||||
Die TZF-spezifischen Notify-Variablen (`TZF_NOTIFY_EMAIL*`,
|
||||
`TZF_DASHBOARD_URL`) entfallen — dieses Projekt hat keine Mail-Hooks.
|
||||
|
||||
**`entrypoint.sh`** — legt den Superuser über `superuser create` an, bewusst
|
||||
nicht `upsert`: Existiert der Account schon, scheitert `create` mit
|
||||
„must be unique" und ein im Admin-UI geändertes Passwort überlebt jeden
|
||||
Redeploy. Ohne gesetzte Variablen wird der Schritt übersprungen und PocketBase
|
||||
gibt seinen Installer-Link im Log aus. Da PocketBase auch im Fehlerfall
|
||||
Exitcode 0 liefert, wird die Ausgabe ausgewertet, nicht der Status.
|
||||
|
||||
**`.gitignore`** — `pb_data/`, `*.db`, `.env`, `.env.*` (Ausnahme
|
||||
`.env.example`).
|
||||
|
||||
**`README.md`** — lokaler Start, Schema-Verwaltung, Persistenz-Hinweise,
|
||||
Superuser-Verhalten, Update der PocketBase-Version.
|
||||
|
||||
### 4. Schema-Migration erzeugen
|
||||
|
||||
Aus dem Live-Export entsteht **eine** Snapshot-Migration
|
||||
`backend/pb_migrations/<timestamp>_init_schema.js` nach dem PocketBase-Muster:
|
||||
|
||||
```js
|
||||
migrate((app) => {
|
||||
app.importCollections(JSON.stringify([ /* Collections */ ]), false)
|
||||
}, (app) => { /* down: Collections wieder entfernen */ })
|
||||
```
|
||||
|
||||
Enthalten sind die sechs fachlichen Collections `users, teams, riders, events,
|
||||
runs, times` mit ihren Feldern, API-Rules und Indizes. System-Collections
|
||||
(`_superusers`, `_mfas`, `_otps`, `_externalAuths`, `_authOrigins`) bleiben
|
||||
außen vor — PocketBase legt sie selbst an.
|
||||
|
||||
`importCollections` mit `deleteMissing = false`, damit die Migration nichts
|
||||
löscht, was nicht im Snapshot steht.
|
||||
|
||||
Ergebnis: Ein frisch gestarteter Container hat dasselbe Schema wie die
|
||||
Live-Instanz, ohne deren Daten.
|
||||
|
||||
Die Migration wird **nicht** gegen die Live-Instanz angewendet — sie beschreibt
|
||||
nur den Zustand, den ein neuer Container herstellen soll.
|
||||
|
||||
### 5. Altlasten entfernen
|
||||
|
||||
Gelöscht werden (alle untracked, also unwiederbringlich):
|
||||
|
||||
- `pocketbase_schema.json` — veraltet (siehe Befund oben), abgelöst durch die Migration
|
||||
- `example_pb_schema.json` — Beispieldatei ohne Bezug zum Projekt
|
||||
- `pocketbase_migrate.zip` — altes `pb_data` von 2023 inkl. Bilddaten, gehört nicht ins Repo
|
||||
|
||||
`IMPLEMENTATION_SUMMARY.md`, `POCKETBASE_SCHEMA.md`, `README_SETUP.md` und
|
||||
`UML_basic.png` bleiben zunächst im Root erhalten.
|
||||
|
||||
### 6. Root-Dateien anpassen
|
||||
|
||||
- **`.gitignore`** im Root: ergänzt um `frontend/node_modules/`,
|
||||
`frontend/.svelte-kit/`, `frontend/build/`, `backend/pb_data/`, `.env`,
|
||||
`.env.*` mit Ausnahme `.env.example`. Wichtig: `frontend/.env` enthält
|
||||
`PB_SUPERUSER_TOKEN` und darf nicht in den Commit gelangen — das wird vor
|
||||
dem Commit über `git status` geprüft.
|
||||
- **`CLAUDE.md`**: Pfadangaben auf die neue Struktur umstellen
|
||||
(Dev-Commands laufen aus `frontend/`), Abschnitt zum Backend ergänzen
|
||||
- **`README.md`** im Root: kurze Übersicht beider Teile
|
||||
|
||||
### 7. Erster Commit
|
||||
|
||||
Das Repo hat noch keinen Commit. Die fertige Struktur wird als initialer Commit
|
||||
angelegt — der Umbau erscheint damit nicht als Verschiebung in der Historie,
|
||||
sondern die Struktur steht von Anfang an richtig da.
|
||||
|
||||
Kein `git push` — der bleibt ausdrücklicher Anweisung vorbehalten.
|
||||
|
||||
## Verifikation
|
||||
|
||||
Der Umbau gilt als erfolgreich, wenn:
|
||||
|
||||
1. `cd frontend && npm ci` fehlerfrei durchläuft
|
||||
2. `cd frontend && npm run check` ohne neue Fehler durchläuft (Vergleich gegen
|
||||
den Stand vor dem Umbau — bestehende Fehler zählen nicht als Regression)
|
||||
3. `cd frontend && npm run dev` startet und die App unter
|
||||
`http://stammtisch-hersbruck.de.localhost:31337` lädt und Daten von der
|
||||
Remote-Instanz zeigt
|
||||
4. `cd backend && docker compose up -d --build` startet und
|
||||
`curl http://127.0.0.1:8090/api/health` antwortet
|
||||
5. Im lokalen Admin-UI sind die sechs Collections mit ihren Feldern vorhanden
|
||||
|
||||
Punkt 4 und 5 setzen ein lauffähiges Docker voraus; ist das nicht verfügbar,
|
||||
wird das ausdrücklich als ungeprüft berichtet statt als erledigt.
|
||||
|
||||
## Bewusst nicht Teil dieses Umbaus
|
||||
|
||||
- Keine Änderung an der Live-Instanz oder deren Daten
|
||||
- Keine Datenmigration ins lokale Backend
|
||||
- Kein Deployment-Setup (Coolify o. ä.)
|
||||
- Keine `pb_hooks` — das Verzeichnis wird leer angelegt
|
||||
- Kein Ablösen von `scripts/migrate-schema.ts`; das Script bleibt vorerst
|
||||
unverändert im Frontend
|
||||
19
frontend/.env.example
Normal file
19
frontend/.env.example
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
# Vorlage für die lokale .env — kopieren und ausfüllen:
|
||||
# cp .env.example .env
|
||||
#
|
||||
# Die echte .env steht in .gitignore und darf nicht committet werden,
|
||||
# sie enthält den Superuser-Token.
|
||||
|
||||
# Basis-URL der PocketBase-Instanz, die das Frontend anspricht.
|
||||
# Produktiv: https://api.stammtisch-hersbruck.de
|
||||
# Lokales Backend aus ../backend: http://127.0.0.1:8090
|
||||
PUBLIC_PB_URL=https://api.stammtisch-hersbruck.de
|
||||
|
||||
# Ziel für die Typgenerierung (npm run generate-pocketbase-types) und die
|
||||
# Scripts unter scripts/. Zeigt üblicherweise auf dieselbe Instanz wie oben.
|
||||
PB_TYPEGEN_URL=https://api.stammtisch-hersbruck.de/
|
||||
|
||||
# Superuser-Token für Schema-Zugriffe. Im PocketBase-Admin-UI erzeugen.
|
||||
# Niemals committen.
|
||||
PB_SUPERUSER_TOKEN=
|
||||
PB_TYPEGEN_TOKEN=
|
||||
1
frontend/.npmrc
Normal file
1
frontend/.npmrc
Normal file
|
|
@ -0,0 +1 @@
|
|||
engine-strict=true
|
||||
56
frontend/README.md
Normal file
56
frontend/README.md
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
# stammtisch-hersbruck.de — Frontend
|
||||
|
||||
SvelteKit-5-Anwendung (Svelte 5 Runes, Tailwind 4) für Zeitnahme und Verwaltung.
|
||||
|
||||
## Einrichten
|
||||
|
||||
`.env` aus der Vorlage anlegen und ausfüllen — `.env.example` beschreibt jede
|
||||
Variable:
|
||||
|
||||
cp .env.example .env
|
||||
npm ci
|
||||
npm run dev
|
||||
|
||||
Die App läuft dann auf http://stammtisch-hersbruck.de.localhost:31337
|
||||
|
||||
## Befehle
|
||||
|
||||
| Befehl | Zweck |
|
||||
|---|---|
|
||||
| `npm run dev` | Development-Server (Port 31337, strict) |
|
||||
| `npm run build` | Produktions-Build |
|
||||
| `npm run preview` | Produktions-Build lokal ansehen |
|
||||
| `npm run check` | Typprüfung (svelte-check) |
|
||||
| `npm run check:watch` | Typprüfung im Watch-Modus |
|
||||
| `npm run generate-pocketbase-types` | `src/lib/types.d.ts` aus dem PocketBase-Schema erzeugen |
|
||||
|
||||
## Welche PocketBase-Instanz?
|
||||
|
||||
`PUBLIC_PB_URL` in `.env` entscheidet, wohin das Frontend spricht:
|
||||
|
||||
| Wert | Instanz |
|
||||
|---|---|
|
||||
| `https://api.stammtisch-hersbruck.de` | produktiv (Default) |
|
||||
| `http://127.0.0.1:8090` | lokales Backend aus `../backend` |
|
||||
|
||||
Die Variable wird von SvelteKit zur **Buildzeit** eingesetzt
|
||||
(`$env/static/public`). Ein Wechsel der Instanz erfordert deshalb einen
|
||||
Neustart des Dev-Servers bzw. einen neuen Build — ein blosser Neustart des
|
||||
Containers genügt nicht.
|
||||
|
||||
`PB_TYPEGEN_URL` und `PB_SUPERUSER_TOKEN` gelten getrennt davon für die
|
||||
Typgenerierung und die Scripts unter `scripts/`.
|
||||
|
||||
## Scripts
|
||||
|
||||
Die Dateien unter `scripts/` sind Einmal-Werkzeuge gegen eine PocketBase-Instanz
|
||||
und laufen über `tsx`. Sie lesen ihre Zugangsdaten aus `.env`.
|
||||
|
||||
> **Achtung, veralteter Stand:** `seed-test-data.ts` (`npm run seed`),
|
||||
> `migrate-schema.ts` und `migrate-teams.ts` stammen aus einer früheren
|
||||
> Schema-Generation. `seed-test-data.ts` schreibt in die Collections `stages`
|
||||
> und `results`, die es im aktuellen Schema **nicht mehr gibt** — der Aufruf
|
||||
> schlägt fehl. Vor einer Verwendung müssen die Scripts auf das aktuelle Schema
|
||||
> (`users`, `teams`, `events`, `runs`, `riders`, `times`) angepasst werden.
|
||||
|
||||
Das maßgebliche Schema liegt als Migration in `../backend/pb_migrations/`.
|
||||
16
frontend/components.json
Normal file
16
frontend/components.json
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"$schema": "https://shadcn-svelte.com/schema.json",
|
||||
"tailwind": {
|
||||
"css": "src/app.css",
|
||||
"baseColor": "slate"
|
||||
},
|
||||
"aliases": {
|
||||
"components": "$lib/components",
|
||||
"utils": "$lib/utils",
|
||||
"ui": "$lib/components/ui",
|
||||
"hooks": "$lib/hooks",
|
||||
"lib": "$lib"
|
||||
},
|
||||
"typescript": true,
|
||||
"registry": "https://shadcn-svelte.com/registry"
|
||||
}
|
||||
4900
frontend/package-lock.json
generated
Normal file
4900
frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
47
frontend/package.json
Normal file
47
frontend/package.json
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
{
|
||||
"name": "stammtisch-hersbruck.de",
|
||||
"private": true,
|
||||
"version": "2.0.0-alpha",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite dev --mode development",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"prepare": "svelte-kit sync || echo ''",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"generate-pocketbase-types": "set -a && . ./.env && set +a && pocketbase-typegen --url \"$PB_TYPEGEN_URL\" --token \"$PB_SUPERUSER_TOKEN\" --out ./src/lib/types.d.ts",
|
||||
"seed": "tsx scripts/seed-test-data.ts",
|
||||
"migrate": "tsx scripts/migrate-schema.ts",
|
||||
"migrate-teams": "tsx scripts/migrate-teams.ts"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@internationalized/date": "^3.12.1",
|
||||
"@lucide/svelte": "^1.16.0",
|
||||
"@sveltejs/adapter-auto": "^6.1.0",
|
||||
"@sveltejs/kit": "^2.43.2",
|
||||
"@sveltejs/vite-plugin-svelte": "^6.2.0",
|
||||
"@tailwindcss/forms": "^0.5.10",
|
||||
"@tailwindcss/typography": "^0.5.18",
|
||||
"@tailwindcss/vite": "^4.1.13",
|
||||
"bits-ui": "^2.18.1",
|
||||
"clsx": "^2.1.1",
|
||||
"pocketbase-typegen": "^1.3.1",
|
||||
"svelte": "^5.39.5",
|
||||
"svelte-check": "^4.3.2",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"tailwind-variants": "^3.2.2",
|
||||
"tailwindcss": "^4.1.13",
|
||||
"tsx": "^4.19.2",
|
||||
"tw-animate-css": "^1.4.0",
|
||||
"typescript": "^5.9.2",
|
||||
"vite": "^7.1.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"date-fns": "^4.1.0",
|
||||
"lucide-svelte": "^0.503.0",
|
||||
"mode-watcher": "^1.1.0",
|
||||
"pocketbase": "^0.26.0",
|
||||
"tippy.js": "^6.3.7"
|
||||
}
|
||||
}
|
||||
245
frontend/scripts/migrate-schema.ts
Normal file
245
frontend/scripts/migrate-schema.ts
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
/**
|
||||
* Schema-Migration für PocketBase
|
||||
*
|
||||
* Erweitert das vorhandene Schema und migriert bestehende Daten:
|
||||
* - events: + name (Text), + status (Select draft/active/finished)
|
||||
* Daten: description → name kopieren, status = 'draft'
|
||||
* - riders: + number (Text), + firstname (Text), + lastname (Text)
|
||||
* Daten: bestehender name-Wert → number kopieren
|
||||
* - times: + correction (Number, Sekunden)
|
||||
* status erweitern: + dnf, dns, dsq
|
||||
*
|
||||
* Aufruf: npx tsx scripts/migrate-schema.ts
|
||||
*/
|
||||
|
||||
import { readFileSync } from 'node:fs'
|
||||
|
||||
// .env minimal selbst parsen
|
||||
for (const line of readFileSync('.env', 'utf8').split('\n')) {
|
||||
const m = line.match(/^([A-Z_]+)=(.*)$/)
|
||||
if (m && !process.env[m[1]]) process.env[m[1]] = m[2]
|
||||
}
|
||||
|
||||
const API = process.env.PB_TYPEGEN_URL?.replace(/\/$/, '') ?? 'https://api.stammtisch-hersbruck.de'
|
||||
const TOKEN = process.env.PB_SUPERUSER_TOKEN
|
||||
|
||||
if (!TOKEN) {
|
||||
console.error('PB_SUPERUSER_TOKEN fehlt in .env')
|
||||
process.exit(1)
|
||||
}
|
||||
|
||||
const headers = {
|
||||
'Authorization': TOKEN,
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
|
||||
async function req(method: string, path: string, body?: unknown) {
|
||||
const res = await fetch(`${API}${path}`, {
|
||||
method,
|
||||
headers,
|
||||
body: body ? JSON.stringify(body) : undefined,
|
||||
})
|
||||
if (!res.ok) {
|
||||
const text = await res.text()
|
||||
throw new Error(`${method} ${path} → ${res.status}: ${text}`)
|
||||
}
|
||||
return res.status === 204 ? null : await res.json()
|
||||
}
|
||||
|
||||
async function getCollection(name: string) {
|
||||
return req('GET', `/api/collections/${name}`)
|
||||
}
|
||||
|
||||
async function updateCollection(name: string, body: any) {
|
||||
return req('PATCH', `/api/collections/${name}`, body)
|
||||
}
|
||||
|
||||
async function listRecords(collection: string) {
|
||||
const all: any[] = []
|
||||
let page = 1
|
||||
while (true) {
|
||||
const res: any = await req('GET', `/api/collections/${collection}/records?page=${page}&perPage=200`)
|
||||
all.push(...res.items)
|
||||
if (page >= res.totalPages || res.totalPages === 0) break
|
||||
page++
|
||||
}
|
||||
return all
|
||||
}
|
||||
|
||||
async function updateRecord(collection: string, id: string, data: any) {
|
||||
return req('PATCH', `/api/collections/${collection}/records/${id}`, data)
|
||||
}
|
||||
|
||||
function hasField(coll: any, name: string) {
|
||||
return coll.fields.some((f: any) => f.name === name)
|
||||
}
|
||||
|
||||
// ---- Migration ----
|
||||
|
||||
async function migrateEvents() {
|
||||
console.log('\n== events ==')
|
||||
const coll = await getCollection('events')
|
||||
const fields = [...coll.fields]
|
||||
|
||||
if (!hasField(coll, 'name')) {
|
||||
fields.push({
|
||||
name: 'name',
|
||||
type: 'text',
|
||||
required: false,
|
||||
presentable: true,
|
||||
max: 0,
|
||||
min: 0,
|
||||
pattern: '',
|
||||
autogeneratePattern: '',
|
||||
})
|
||||
console.log(' + Feld "name" (text)')
|
||||
} else {
|
||||
console.log(' = Feld "name" existiert bereits')
|
||||
}
|
||||
|
||||
if (!hasField(coll, 'status')) {
|
||||
fields.push({
|
||||
name: 'status',
|
||||
type: 'select',
|
||||
required: false,
|
||||
presentable: false,
|
||||
maxSelect: 1,
|
||||
values: ['draft', 'active', 'finished'],
|
||||
})
|
||||
console.log(' + Feld "status" (select draft/active/finished)')
|
||||
} else {
|
||||
console.log(' = Feld "status" existiert bereits')
|
||||
}
|
||||
|
||||
await updateCollection('events', { fields })
|
||||
|
||||
// Daten migrieren
|
||||
const records = await listRecords('events')
|
||||
for (const r of records) {
|
||||
const patch: any = {}
|
||||
if (!r.name && r.description) patch.name = r.description
|
||||
if (!r.status) patch.status = 'draft'
|
||||
if (Object.keys(patch).length) {
|
||||
await updateRecord('events', r.id, patch)
|
||||
console.log(` → ${r.id}: ${JSON.stringify(patch)}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function migrateRiders() {
|
||||
console.log('\n== riders ==')
|
||||
const coll = await getCollection('riders')
|
||||
const fields = [...coll.fields]
|
||||
|
||||
if (!hasField(coll, 'number')) {
|
||||
fields.push({
|
||||
name: 'number',
|
||||
type: 'text',
|
||||
required: false,
|
||||
presentable: true,
|
||||
max: 0,
|
||||
min: 0,
|
||||
pattern: '',
|
||||
autogeneratePattern: '',
|
||||
})
|
||||
console.log(' + Feld "number" (text)')
|
||||
} else {
|
||||
console.log(' = Feld "number" existiert bereits')
|
||||
}
|
||||
|
||||
if (!hasField(coll, 'firstname')) {
|
||||
fields.push({
|
||||
name: 'firstname',
|
||||
type: 'text',
|
||||
required: false,
|
||||
presentable: true,
|
||||
max: 0,
|
||||
min: 0,
|
||||
pattern: '',
|
||||
autogeneratePattern: '',
|
||||
})
|
||||
console.log(' + Feld "firstname" (text)')
|
||||
} else {
|
||||
console.log(' = Feld "firstname" existiert bereits')
|
||||
}
|
||||
|
||||
if (!hasField(coll, 'lastname')) {
|
||||
fields.push({
|
||||
name: 'lastname',
|
||||
type: 'text',
|
||||
required: false,
|
||||
presentable: true,
|
||||
max: 0,
|
||||
min: 0,
|
||||
pattern: '',
|
||||
autogeneratePattern: '',
|
||||
})
|
||||
console.log(' + Feld "lastname" (text)')
|
||||
} else {
|
||||
console.log(' = Feld "lastname" existiert bereits')
|
||||
}
|
||||
|
||||
await updateCollection('riders', { fields })
|
||||
|
||||
// Daten migrieren: name → number, falls number leer
|
||||
const records = await listRecords('riders')
|
||||
for (const r of records) {
|
||||
if (!r.number && r.name) {
|
||||
await updateRecord('riders', r.id, { number: r.name })
|
||||
console.log(` → ${r.id}: number = "${r.name}"`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function migrateTimes() {
|
||||
console.log('\n== times ==')
|
||||
const coll = await getCollection('times')
|
||||
const fields = [...coll.fields]
|
||||
let changed = false
|
||||
|
||||
if (!hasField(coll, 'correction')) {
|
||||
fields.push({
|
||||
name: 'correction',
|
||||
type: 'number',
|
||||
required: false,
|
||||
presentable: false,
|
||||
min: null,
|
||||
max: null,
|
||||
onlyInt: false,
|
||||
})
|
||||
console.log(' + Feld "correction" (number)')
|
||||
changed = true
|
||||
} else {
|
||||
console.log(' = Feld "correction" existiert bereits')
|
||||
}
|
||||
|
||||
// status um dnf, dns, dsq erweitern
|
||||
const statusField = fields.find((f: any) => f.name === 'status')
|
||||
if (statusField) {
|
||||
const current: string[] = statusField.values || []
|
||||
const target = ['active', 'finished', 'dnf', 'dns', 'dsq']
|
||||
const missing = target.filter((v) => !current.includes(v))
|
||||
if (missing.length) {
|
||||
statusField.values = [...current, ...missing]
|
||||
console.log(` ~ Feld "status" erweitert um: ${missing.join(', ')}`)
|
||||
changed = true
|
||||
} else {
|
||||
console.log(' = Feld "status" hat bereits alle Werte')
|
||||
}
|
||||
}
|
||||
|
||||
if (changed) await updateCollection('times', { fields })
|
||||
}
|
||||
|
||||
async function main() {
|
||||
console.log(`Migration gegen ${API}`)
|
||||
await migrateEvents()
|
||||
await migrateRiders()
|
||||
await migrateTimes()
|
||||
console.log('\n✓ Migration fertig')
|
||||
}
|
||||
|
||||
main().catch((e) => {
|
||||
console.error('\n✗ Fehler:', e.message)
|
||||
process.exit(1)
|
||||
})
|
||||
329
frontend/scripts/migrate-teams.ts
Normal file
329
frontend/scripts/migrate-teams.ts
Normal file
|
|
@ -0,0 +1,329 @@
|
|||
/**
|
||||
* Schema-Migration: Teams einführen
|
||||
*
|
||||
* - neue Collection 'teams' (name, owner, admins[], users[])
|
||||
* - events, riders, runs, times bekommen ein 'team'-Feld
|
||||
* - listRule/viewRule auf allen vier wird auf team.users.id ?= @request.auth.id umgestellt
|
||||
* - events.users wird entfernt
|
||||
* - Migration der Daten:
|
||||
* Team "Stammtisch Hersbruck" anlegen
|
||||
* Owner = aktuell eingeloggter User (über .env: PB_OWNER_EMAIL falls gesetzt, sonst erster events.users)
|
||||
* users = Union aller events.users
|
||||
* events/riders/runs/times werden alle diesem Team zugeordnet
|
||||
*
|
||||
* Aufruf: npm run migrate-teams
|
||||
*/
|
||||
|
||||
import { readFileSync } from 'node:fs'
|
||||
|
||||
// .env parsen — Zeilen die mit . anfangen werden an die vorherige Variable angehängt
|
||||
// (Workaround für zerbrochene JWT-Tokens über mehrere Zeilen)
|
||||
const env = readFileSync('.env', 'utf8').split('\n')
|
||||
let lastKey = ''
|
||||
for (const line of env) {
|
||||
const m = line.match(/^([A-Z_]+)=(.*)$/)
|
||||
if (m) {
|
||||
process.env[m[1]] = m[2]
|
||||
lastKey = m[1]
|
||||
} else if (lastKey && line.length > 0) {
|
||||
process.env[lastKey] = (process.env[lastKey] ?? '') + line
|
||||
}
|
||||
}
|
||||
|
||||
const API = process.env.PB_TYPEGEN_URL?.replace(/\/$/, '') ?? 'https://api.stammtisch-hersbruck.de'
|
||||
const TOKEN = process.env.PB_SUPERUSER_TOKEN
|
||||
|
||||
if (!TOKEN) {
|
||||
console.error('PB_SUPERUSER_TOKEN fehlt')
|
||||
process.exit(1)
|
||||
}
|
||||
|
||||
const headers = { Authorization: TOKEN, 'Content-Type': 'application/json' }
|
||||
|
||||
async function req(method: string, path: string, body?: unknown) {
|
||||
const res = await fetch(`${API}${path}`, {
|
||||
method,
|
||||
headers,
|
||||
body: body ? JSON.stringify(body) : undefined,
|
||||
})
|
||||
if (!res.ok) throw new Error(`${method} ${path} → ${res.status}: ${await res.text()}`)
|
||||
return res.status === 204 ? null : await res.json()
|
||||
}
|
||||
|
||||
async function getCollection(name: string) {
|
||||
try {
|
||||
return await req('GET', `/api/collections/${name}`)
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
async function createCollection(body: any) {
|
||||
return req('POST', '/api/collections', body)
|
||||
}
|
||||
|
||||
async function updateCollection(name: string, body: any) {
|
||||
return req('PATCH', `/api/collections/${name}`, body)
|
||||
}
|
||||
|
||||
async function listAll(collection: string) {
|
||||
const all: any[] = []
|
||||
let page = 1
|
||||
while (true) {
|
||||
const res: any = await req('GET', `/api/collections/${collection}/records?page=${page}&perPage=200`)
|
||||
all.push(...res.items)
|
||||
if (page >= res.totalPages || res.totalPages === 0) break
|
||||
page++
|
||||
}
|
||||
return all
|
||||
}
|
||||
|
||||
async function updateRecord(collection: string, id: string, data: any) {
|
||||
return req('PATCH', `/api/collections/${collection}/records/${id}`, data)
|
||||
}
|
||||
|
||||
async function createRecord(collection: string, data: any) {
|
||||
return req('POST', `/api/collections/${collection}/records`, data)
|
||||
}
|
||||
|
||||
function hasField(coll: any, name: string) {
|
||||
return coll.fields.some((f: any) => f.name === name)
|
||||
}
|
||||
|
||||
const USERS_AUTH = '_pb_users_auth_'
|
||||
|
||||
// ---- Schritt 1: teams Collection anlegen ----
|
||||
|
||||
async function ensureTeamsCollection() {
|
||||
console.log('\n== teams Collection ==')
|
||||
const existing = await getCollection('teams')
|
||||
if (existing) {
|
||||
console.log(' = teams existiert bereits')
|
||||
return existing
|
||||
}
|
||||
|
||||
const body = {
|
||||
name: 'teams',
|
||||
type: 'base',
|
||||
listRule: 'users.id ?= @request.auth.id',
|
||||
viewRule: 'users.id ?= @request.auth.id',
|
||||
createRule: '@request.auth.id != ""',
|
||||
updateRule: 'owner.id ?= @request.auth.id || admins.id ?= @request.auth.id',
|
||||
deleteRule: 'owner.id ?= @request.auth.id',
|
||||
fields: [
|
||||
{
|
||||
name: 'name',
|
||||
type: 'text',
|
||||
required: true,
|
||||
presentable: true,
|
||||
max: 100,
|
||||
min: 1,
|
||||
pattern: '',
|
||||
autogeneratePattern: '',
|
||||
},
|
||||
{
|
||||
name: 'owner',
|
||||
type: 'relation',
|
||||
required: true,
|
||||
maxSelect: 1,
|
||||
minSelect: 1,
|
||||
collectionId: USERS_AUTH,
|
||||
cascadeDelete: false,
|
||||
},
|
||||
{
|
||||
name: 'admins',
|
||||
type: 'relation',
|
||||
required: false,
|
||||
maxSelect: 999,
|
||||
minSelect: 0,
|
||||
collectionId: USERS_AUTH,
|
||||
cascadeDelete: false,
|
||||
},
|
||||
{
|
||||
name: 'users',
|
||||
type: 'relation',
|
||||
required: false,
|
||||
maxSelect: 999,
|
||||
minSelect: 0,
|
||||
collectionId: USERS_AUTH,
|
||||
cascadeDelete: false,
|
||||
},
|
||||
{
|
||||
name: 'created',
|
||||
type: 'autodate',
|
||||
onCreate: true,
|
||||
onUpdate: false,
|
||||
},
|
||||
{
|
||||
name: 'updated',
|
||||
type: 'autodate',
|
||||
onCreate: true,
|
||||
onUpdate: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const created = await createCollection(body)
|
||||
console.log(' + Collection "teams" angelegt')
|
||||
return created
|
||||
}
|
||||
|
||||
// ---- Schritt 2: team-Feld zu events/riders/runs/times hinzufügen ----
|
||||
|
||||
async function addTeamField(collName: string) {
|
||||
const coll = await getCollection(collName)
|
||||
if (!coll) throw new Error(`Collection ${collName} fehlt`)
|
||||
|
||||
if (hasField(coll, 'team')) {
|
||||
console.log(` = ${collName}.team existiert bereits`)
|
||||
return
|
||||
}
|
||||
|
||||
const fields = [
|
||||
...coll.fields,
|
||||
{
|
||||
name: 'team',
|
||||
type: 'relation',
|
||||
required: false,
|
||||
maxSelect: 1,
|
||||
minSelect: 0,
|
||||
collectionId: (await getCollection('teams'))!.id,
|
||||
cascadeDelete: false,
|
||||
},
|
||||
]
|
||||
|
||||
await updateCollection(collName, { fields })
|
||||
console.log(` + ${collName}.team hinzugefügt`)
|
||||
}
|
||||
|
||||
// ---- Schritt 3: Default-Team anlegen + alle Records zuordnen ----
|
||||
|
||||
async function migrateData(teamsId: string) {
|
||||
console.log('\n== Daten-Migration ==')
|
||||
|
||||
// Owner-User suchen
|
||||
const ownerEmail = process.env.PB_OWNER_EMAIL || 'stammtisch-hersbruck@dne.name'
|
||||
const usersRes: any = await req(
|
||||
'GET',
|
||||
`/api/collections/${USERS_AUTH}/records?filter=` + encodeURIComponent(`email = "${ownerEmail}"`),
|
||||
)
|
||||
if (!usersRes.items.length) {
|
||||
throw new Error(`User mit E-Mail "${ownerEmail}" nicht gefunden. Setze PB_OWNER_EMAIL in .env.`)
|
||||
}
|
||||
const owner = usersRes.items[0]
|
||||
console.log(` Owner: ${owner.email} (${owner.id})`)
|
||||
|
||||
// Existierendes Team suchen
|
||||
const teamsList: any = await req('GET', `/api/collections/teams/records?filter=` + encodeURIComponent(`name = "Stammtisch Hersbruck"`))
|
||||
let team: any = teamsList.items[0]
|
||||
if (!team) {
|
||||
// alle User aus events.users sammeln
|
||||
const events = await listAll('events')
|
||||
const userSet = new Set<string>([owner.id])
|
||||
for (const e of events) {
|
||||
if (Array.isArray(e.users)) for (const u of e.users) userSet.add(u)
|
||||
}
|
||||
team = await createRecord('teams', {
|
||||
name: 'Stammtisch Hersbruck',
|
||||
owner: owner.id,
|
||||
admins: [],
|
||||
users: [...userSet],
|
||||
})
|
||||
console.log(` + Team "Stammtisch Hersbruck" mit ${userSet.size} Mitgliedern angelegt`)
|
||||
} else {
|
||||
console.log(` = Team "Stammtisch Hersbruck" existiert (${team.id})`)
|
||||
}
|
||||
|
||||
// Datensätze ohne team patchen
|
||||
for (const collName of ['events', 'riders', 'runs', 'times']) {
|
||||
const records = await listAll(collName)
|
||||
let touched = 0
|
||||
for (const r of records) {
|
||||
if (!r.team) {
|
||||
await updateRecord(collName, r.id, { team: team.id })
|
||||
touched++
|
||||
}
|
||||
}
|
||||
console.log(` → ${collName}: ${touched} Records zugeordnet (${records.length - touched} bereits gesetzt)`)
|
||||
}
|
||||
|
||||
return team
|
||||
}
|
||||
|
||||
// ---- Schritt 4: Rules auf team-basiert umstellen ----
|
||||
|
||||
async function updateRules() {
|
||||
console.log('\n== Rules auf team-basiert umstellen ==')
|
||||
|
||||
const rules = {
|
||||
events: {
|
||||
listRule: 'team.users.id ?= @request.auth.id',
|
||||
viewRule: 'team.users.id ?= @request.auth.id',
|
||||
createRule: 'team.users.id ?= @request.auth.id',
|
||||
updateRule: 'team.users.id ?= @request.auth.id',
|
||||
deleteRule: 'team.users.id ?= @request.auth.id',
|
||||
},
|
||||
riders: {
|
||||
listRule: 'team.users.id ?= @request.auth.id',
|
||||
viewRule: 'team.users.id ?= @request.auth.id',
|
||||
createRule: 'team.users.id ?= @request.auth.id',
|
||||
updateRule: 'team.users.id ?= @request.auth.id',
|
||||
deleteRule: 'team.users.id ?= @request.auth.id',
|
||||
},
|
||||
runs: {
|
||||
listRule: 'team.users.id ?= @request.auth.id',
|
||||
viewRule: 'team.users.id ?= @request.auth.id',
|
||||
createRule: 'team.users.id ?= @request.auth.id',
|
||||
updateRule: 'team.users.id ?= @request.auth.id',
|
||||
deleteRule: 'team.users.id ?= @request.auth.id',
|
||||
},
|
||||
times: {
|
||||
listRule: 'team.users.id ?= @request.auth.id',
|
||||
viewRule: 'team.users.id ?= @request.auth.id',
|
||||
createRule: 'team.users.id ?= @request.auth.id',
|
||||
updateRule: 'team.users.id ?= @request.auth.id',
|
||||
deleteRule: 'team.users.id ?= @request.auth.id',
|
||||
},
|
||||
}
|
||||
|
||||
for (const [coll, r] of Object.entries(rules)) {
|
||||
await updateCollection(coll, r)
|
||||
console.log(` ~ ${coll} Rules aktualisiert`)
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Schritt 5: events.users entfernen ----
|
||||
|
||||
async function removeEventsUsers() {
|
||||
console.log('\n== events.users entfernen ==')
|
||||
const coll = await getCollection('events')
|
||||
if (!coll) return
|
||||
if (!hasField(coll, 'users')) {
|
||||
console.log(' = events.users existiert nicht (mehr)')
|
||||
return
|
||||
}
|
||||
const fields = coll.fields.filter((f: any) => f.name !== 'users')
|
||||
await updateCollection('events', { fields })
|
||||
console.log(' - events.users entfernt')
|
||||
}
|
||||
|
||||
// ---- Main ----
|
||||
|
||||
async function main() {
|
||||
console.log(`Migration gegen ${API}`)
|
||||
const teams = await ensureTeamsCollection()
|
||||
console.log('\n== team-Feld zu Collections hinzufügen ==')
|
||||
await addTeamField('events')
|
||||
await addTeamField('riders')
|
||||
await addTeamField('runs')
|
||||
await addTeamField('times')
|
||||
await migrateData(teams.id)
|
||||
await updateRules()
|
||||
await removeEventsUsers()
|
||||
console.log('\n✓ Teams-Migration fertig')
|
||||
}
|
||||
|
||||
main().catch((e) => {
|
||||
console.error('\n✗ Fehler:', e.message)
|
||||
process.exit(1)
|
||||
})
|
||||
329
frontend/scripts/seed-test-data.ts
Normal file
329
frontend/scripts/seed-test-data.ts
Normal file
|
|
@ -0,0 +1,329 @@
|
|||
/**
|
||||
* Test Data Seeding Script for PocketBase
|
||||
*
|
||||
* This script creates initial test data for the timing app:
|
||||
* - Admin user
|
||||
* - Timekeeper users
|
||||
* - Test riders
|
||||
* - Sample event with stages
|
||||
*
|
||||
* Usage:
|
||||
* npx tsx scripts/seed-test-data.ts
|
||||
*
|
||||
* Environment Variables (from .env):
|
||||
* PB_TYPEGEN_URL - PocketBase API URL
|
||||
* PB_TYPEGEN_TOKEN - Authentication token for impersonation
|
||||
*/
|
||||
|
||||
import PocketBase from 'pocketbase'
|
||||
import type { TypedPocketBase } from '../src/lib/types.js'
|
||||
|
||||
// Validate required environment variables
|
||||
const PB_URL = process.env.PB_TYPEGEN_URL
|
||||
const PB_TOKEN = process.env.PB_TYPEGEN_TOKEN
|
||||
|
||||
if (!PB_URL) {
|
||||
console.error('❌ Error: PB_TYPEGEN_URL is not set in .env file')
|
||||
console.error(' Please set PB_TYPEGEN_URL in your .env file')
|
||||
process.exit(1)
|
||||
}
|
||||
|
||||
if (!PB_TOKEN) {
|
||||
console.error('❌ Error: PB_TYPEGEN_TOKEN is not set in .env file')
|
||||
console.error(' Please set PB_TYPEGEN_TOKEN in your .env file')
|
||||
process.exit(1)
|
||||
}
|
||||
|
||||
// Initialize PocketBase with URL from .env
|
||||
const pb = new PocketBase(PB_URL) as TypedPocketBase
|
||||
|
||||
// Authenticate using token from .env (impersonation)
|
||||
pb.authStore.save(PB_TOKEN)
|
||||
|
||||
console.log(`🔗 Connecting to PocketBase at: ${PB_URL}`)
|
||||
console.log(`🔑 Using authentication token from .env\n`)
|
||||
|
||||
// Configuration
|
||||
const ADMIN_EMAIL = 'admin@stammtisch-hersbruck.de'
|
||||
const ADMIN_PASSWORD = 'Admin123!secure'
|
||||
|
||||
async function seedData() {
|
||||
console.log('🌱 Starting test data seeding...\n')
|
||||
|
||||
try {
|
||||
// 1. Create Admin User
|
||||
console.log('👤 Creating admin user...')
|
||||
let adminUser
|
||||
try {
|
||||
adminUser = await pb.collection('users').create({
|
||||
email: ADMIN_EMAIL,
|
||||
password: ADMIN_PASSWORD,
|
||||
passwordConfirm: ADMIN_PASSWORD,
|
||||
name: 'Administrator',
|
||||
role: 'admin',
|
||||
verified: true
|
||||
})
|
||||
console.log(`✅ Admin created: ${adminUser.email}`)
|
||||
} catch (e: any) {
|
||||
if (e.message.includes('already exists')) {
|
||||
console.log('⚠️ Admin user already exists, logging in...')
|
||||
await pb.collection('users').authWithPassword(ADMIN_EMAIL, ADMIN_PASSWORD)
|
||||
adminUser = pb.authStore.record
|
||||
} else {
|
||||
throw e
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Create Timekeeper Users
|
||||
console.log('\n⏱️ Creating timekeeper users...')
|
||||
const timekeepers = []
|
||||
const timekeeperData = [
|
||||
{ email: 'timer1@stammtisch-hersbruck.de', name: 'Max Zeitnehmer', password: 'Timer123!' },
|
||||
{ email: 'timer2@stammtisch-hersbruck.de', name: 'Anna Stoppuhr', password: 'Timer123!' },
|
||||
{ email: 'timer3@stammtisch-hersbruck.de', name: 'Tom Chronograph', password: 'Timer123!' }
|
||||
]
|
||||
|
||||
for (const data of timekeeperData) {
|
||||
try {
|
||||
const user = await pb.collection('users').create({
|
||||
email: data.email,
|
||||
password: data.password,
|
||||
passwordConfirm: data.password,
|
||||
name: data.name,
|
||||
role: 'timekeeper',
|
||||
verified: true
|
||||
})
|
||||
timekeepers.push(user)
|
||||
console.log(`✅ Timekeeper created: ${user.name} (${user.email})`)
|
||||
} catch (e: any) {
|
||||
if (e.message.includes('already exists')) {
|
||||
console.log(`⚠️ Timekeeper ${data.email} already exists, skipping...`)
|
||||
// Fetch existing user
|
||||
const existing = await pb.collection('users').getFirstListItem(`email="${data.email}"`)
|
||||
timekeepers.push(existing)
|
||||
} else {
|
||||
console.error(`❌ Error creating ${data.email}:`, e.message)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Create Test Riders
|
||||
console.log('\n🚴 Creating test riders...')
|
||||
const riders = []
|
||||
const riderData = [
|
||||
{ number: '1', name: 'Max Müller', email: 'max.mueller@example.com', birthday: '1995-03-15' },
|
||||
{ number: '2', name: 'Anna Schmidt', email: 'anna.schmidt@example.com', birthday: '1992-07-22' },
|
||||
{ number: '3', name: 'Tom Weber', email: 'tom.weber@example.com', birthday: '1998-11-08' },
|
||||
{ number: '17', name: 'Lisa Hoffmann', email: 'lisa.hoffmann@example.com', birthday: '2000-01-30' },
|
||||
{ number: '23', name: 'Felix Wagner', email: 'felix.wagner@example.com', birthday: '1996-05-12' },
|
||||
{ number: '42', name: 'Sarah Becker', email: 'sarah.becker@example.com', birthday: '1994-09-25' },
|
||||
{ number: '99', name: 'Lukas Fischer', email: 'lukas.fischer@example.com', birthday: '1999-12-03' },
|
||||
{ number: '101', name: 'Julia Schulz', email: 'julia.schulz@example.com', birthday: '1997-04-18' }
|
||||
]
|
||||
|
||||
for (const data of riderData) {
|
||||
try {
|
||||
const rider = await pb.collection('riders').create({
|
||||
number: data.number,
|
||||
name: data.name,
|
||||
email: data.email,
|
||||
birthday: data.birthday
|
||||
})
|
||||
riders.push(rider)
|
||||
console.log(`✅ Rider created: #${rider.number} ${rider.name}`)
|
||||
} catch (e: any) {
|
||||
if (e.message.includes('already exists')) {
|
||||
console.log(`⚠️ Rider #${data.number} already exists, skipping...`)
|
||||
const existing = await pb.collection('riders').getFirstListItem(`number="${data.number}"`)
|
||||
riders.push(existing)
|
||||
} else {
|
||||
console.error(`❌ Error creating rider #${data.number}:`, e.message)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 4. Create Test Event
|
||||
console.log('\n🏁 Creating test event...')
|
||||
let event
|
||||
try {
|
||||
// Event date: 2 weeks from now
|
||||
const eventDate = new Date()
|
||||
eventDate.setDate(eventDate.getDate() + 14)
|
||||
|
||||
const startTime = new Date(eventDate)
|
||||
startTime.setHours(9, 0, 0, 0)
|
||||
|
||||
const endTime = new Date(eventDate)
|
||||
endTime.setHours(17, 0, 0, 0)
|
||||
|
||||
event = await pb.collection('events').create({
|
||||
name: 'MTB Hersbruck Cup 2025',
|
||||
location: 'Hersbruck, Deutschland',
|
||||
start: startTime.toISOString(),
|
||||
end: endTime.toISOString(),
|
||||
status: 'draft',
|
||||
created_by: adminUser?.id,
|
||||
timekeepers: timekeepers.map(t => t.id)
|
||||
})
|
||||
console.log(`✅ Event created: ${event.name}`)
|
||||
console.log(` Date: ${new Date(event.start).toLocaleDateString('de-DE')}`)
|
||||
console.log(` Timekeepers: ${timekeepers.length} assigned`)
|
||||
} catch (e: any) {
|
||||
if (e.message.includes('already exists')) {
|
||||
console.log('⚠️ Event already exists, fetching...')
|
||||
event = await pb.collection('events').getFirstListItem('name~"MTB Hersbruck"')
|
||||
} else {
|
||||
throw e
|
||||
}
|
||||
}
|
||||
|
||||
// 5. Create Stages
|
||||
console.log('\n🏔️ Creating stages...')
|
||||
const stages = []
|
||||
const stageData = [
|
||||
{
|
||||
name: 'Downhill',
|
||||
location: 'Steinberg Trail',
|
||||
order: 1,
|
||||
start_number: 1,
|
||||
end_number: 50,
|
||||
status: 'pending'
|
||||
},
|
||||
{
|
||||
name: 'Cross-Country',
|
||||
location: 'Wald-Rundkurs',
|
||||
order: 2,
|
||||
start_number: 51,
|
||||
end_number: 100,
|
||||
status: 'pending'
|
||||
},
|
||||
{
|
||||
name: 'Enduro Stage 1',
|
||||
location: 'Berg-Passage',
|
||||
order: 3,
|
||||
start_number: 101,
|
||||
end_number: 150,
|
||||
status: 'pending'
|
||||
}
|
||||
]
|
||||
|
||||
for (const data of stageData) {
|
||||
try {
|
||||
// Stage times based on event date
|
||||
const stageStart = new Date(event.start)
|
||||
stageStart.setHours(stageStart.getHours() + (data.order - 1) * 2)
|
||||
|
||||
const stageEnd = new Date(stageStart)
|
||||
stageEnd.setHours(stageEnd.getHours() + 2)
|
||||
|
||||
const stage = await pb.collection('stages').create({
|
||||
event: event.id,
|
||||
name: data.name,
|
||||
location: data.location,
|
||||
start: stageStart.toISOString(),
|
||||
end: stageEnd.toISOString(),
|
||||
order: data.order,
|
||||
start_number: data.start_number,
|
||||
end_number: data.end_number,
|
||||
status: data.status
|
||||
})
|
||||
stages.push(stage)
|
||||
console.log(`✅ Stage created: ${stage.name} (Startnummern: ${data.start_number}-${data.end_number})`)
|
||||
} catch (e: any) {
|
||||
console.error(`❌ Error creating stage ${data.name}:`, e.message)
|
||||
}
|
||||
}
|
||||
|
||||
// 6. Create Sample Results (optional - for demo)
|
||||
console.log('\n⏱️ Creating sample results...')
|
||||
|
||||
// Create 2 finished results for demonstration
|
||||
if (stages.length > 0 && riders.length >= 3 && timekeepers.length > 0) {
|
||||
const firstStage = stages[0]
|
||||
const sampleResults = [
|
||||
{
|
||||
rider: riders[0],
|
||||
duration: 185.5, // 3:05.5
|
||||
status: 'finished'
|
||||
},
|
||||
{
|
||||
rider: riders[1],
|
||||
duration: 192.3, // 3:12.3
|
||||
status: 'finished'
|
||||
},
|
||||
{
|
||||
rider: riders[2],
|
||||
duration: 0, // currently running
|
||||
status: 'running'
|
||||
}
|
||||
]
|
||||
|
||||
for (const data of sampleResults) {
|
||||
try {
|
||||
const now = new Date()
|
||||
const startTime = new Date(now.getTime() - (data.duration * 1000) - 60000) // Started some time ago
|
||||
const endTime = data.status === 'finished' ? new Date(startTime.getTime() + data.duration * 1000) : undefined
|
||||
|
||||
const result = await pb.collection('results').create({
|
||||
stage: firstStage.id,
|
||||
rider: data.rider.id,
|
||||
start: startTime.toISOString(),
|
||||
end: endTime?.toISOString() || null,
|
||||
status: data.status,
|
||||
started_by: timekeepers[0].id,
|
||||
stopped_by: data.status === 'finished' ? timekeepers[0].id : null,
|
||||
correction: 0
|
||||
})
|
||||
|
||||
const timeStr = data.status === 'finished'
|
||||
? `${Math.floor(data.duration / 60)}:${(data.duration % 60).toFixed(1).padStart(4, '0')}`
|
||||
: 'RUNNING'
|
||||
console.log(`✅ Result created: #${data.rider.number} ${data.rider.name} - ${timeStr}`)
|
||||
} catch (e: any) {
|
||||
console.error(`❌ Error creating result:`, e.message)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Summary
|
||||
console.log('\n' + '='.repeat(50))
|
||||
console.log('✅ Test data seeding completed!')
|
||||
console.log('='.repeat(50))
|
||||
console.log('\n📊 Summary:')
|
||||
console.log(` Users: ${1 + timekeepers.length} (1 admin, ${timekeepers.length} timekeepers)`)
|
||||
console.log(` Riders: ${riders.length}`)
|
||||
console.log(` Events: 1`)
|
||||
console.log(` Stages: ${stages.length}`)
|
||||
console.log(` Results: 3 (2 finished, 1 running)`)
|
||||
|
||||
console.log('\n🔑 Login Credentials:')
|
||||
console.log(` Admin: ${ADMIN_EMAIL} / ${ADMIN_PASSWORD}`)
|
||||
console.log(` Timekeeper: timer1@stammtisch-hersbruck.de / Timer123!`)
|
||||
console.log(` Timekeeper: timer2@stammtisch-hersbruck.de / Timer123!`)
|
||||
console.log(` Timekeeper: timer3@stammtisch-hersbruck.de / Timer123!`)
|
||||
|
||||
console.log('\n🚀 Next steps:')
|
||||
console.log(' 1. Run: npm run generate-pocketbase-types')
|
||||
console.log(' 2. Start development: npm run dev')
|
||||
console.log(' 3. Login with one of the credentials above')
|
||||
console.log('')
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('\n❌ Error during seeding:', error)
|
||||
if (error.response) {
|
||||
console.error('Response:', error.response)
|
||||
}
|
||||
process.exit(1)
|
||||
}
|
||||
}
|
||||
|
||||
// Run the seeding
|
||||
seedData()
|
||||
.then(() => {
|
||||
console.log('✅ Seeding completed successfully!')
|
||||
process.exit(0)
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('❌ Seeding failed:', error)
|
||||
process.exit(1)
|
||||
})
|
||||
54
frontend/scripts/test-token.ts
Normal file
54
frontend/scripts/test-token.ts
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
/**
|
||||
* Test-Script: prüft was der PB_SUPERUSER_TOKEN tatsächlich darf.
|
||||
* Aufruf: npx tsx scripts/test-token.ts
|
||||
*/
|
||||
import { readFileSync } from 'node:fs'
|
||||
|
||||
const env = readFileSync('.env', 'utf8').split('\n')
|
||||
let lastKey = ''
|
||||
for (const line of env) {
|
||||
const m = line.match(/^([A-Z_]+)=(.*)$/)
|
||||
if (m) {
|
||||
process.env[m[1]] = m[2]
|
||||
lastKey = m[1]
|
||||
} else if (lastKey && line.length > 0) {
|
||||
process.env[lastKey] = (process.env[lastKey] ?? '') + line
|
||||
}
|
||||
}
|
||||
|
||||
const TOKEN = process.env.PB_SUPERUSER_TOKEN ?? ''
|
||||
const API = 'https://api.stammtisch-hersbruck.de'
|
||||
|
||||
// JWT-Payload dekodieren
|
||||
const [, payloadB64] = TOKEN.split('.')
|
||||
if (payloadB64) {
|
||||
const payload = JSON.parse(Buffer.from(payloadB64, 'base64').toString('utf8'))
|
||||
console.log('Token-Payload:', payload)
|
||||
console.log('Token-Länge:', TOKEN.length)
|
||||
}
|
||||
|
||||
async function tryEndpoint(label: string, path: string, init?: RequestInit) {
|
||||
const res = await fetch(`${API}${path}`, {
|
||||
...init,
|
||||
headers: { Authorization: TOKEN, 'Content-Type': 'application/json', ...(init?.headers ?? {}) },
|
||||
})
|
||||
const text = await res.text()
|
||||
console.log(`\n${label}: ${res.status}`)
|
||||
try {
|
||||
console.log(JSON.stringify(JSON.parse(text), null, 2).slice(0, 200))
|
||||
} catch {
|
||||
console.log(text.slice(0, 200))
|
||||
}
|
||||
}
|
||||
|
||||
await tryEndpoint('GET /api/collections', '/api/collections?perPage=1')
|
||||
await tryEndpoint('GET /api/collections/_superusers', '/api/collections/_superusers')
|
||||
await tryEndpoint('GET /api/collections/events', '/api/collections/events')
|
||||
await tryEndpoint('POST /api/collections (Probe)', '/api/collections', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
name: '__probe_temp__',
|
||||
type: 'base',
|
||||
fields: [{ name: 'foo', type: 'text' }],
|
||||
}),
|
||||
})
|
||||
121
frontend/src/app.css
Normal file
121
frontend/src/app.css
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/* shadcn theme: yellow (oklch) */
|
||||
:root {
|
||||
--radius: 0.65rem;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.141 0.005 285.823);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.141 0.005 285.823);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.141 0.005 285.823);
|
||||
--primary: oklch(0.795 0.184 86.047);
|
||||
--primary-foreground: oklch(0.421 0.095 57.708);
|
||||
--secondary: oklch(0.967 0.001 286.375);
|
||||
--secondary-foreground: oklch(0.21 0.006 285.885);
|
||||
--muted: oklch(0.967 0.001 286.375);
|
||||
--muted-foreground: oklch(0.552 0.016 285.938);
|
||||
--accent: oklch(0.967 0.001 286.375);
|
||||
--accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.92 0.004 286.32);
|
||||
--input: oklch(0.92 0.004 286.32);
|
||||
--ring: oklch(0.795 0.184 86.047);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
||||
--sidebar-primary: oklch(0.795 0.184 86.047);
|
||||
--sidebar-primary-foreground: oklch(0.421 0.095 57.708);
|
||||
--sidebar-accent: oklch(0.967 0.001 286.375);
|
||||
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--sidebar-border: oklch(0.92 0.004 286.32);
|
||||
--sidebar-ring: oklch(0.795 0.184 86.047);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.141 0.005 285.823);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.21 0.006 285.885);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.21 0.006 285.885);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.852 0.199 91.936);
|
||||
--primary-foreground: oklch(0.421 0.095 57.708);
|
||||
--secondary: oklch(0.274 0.006 286.033);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.274 0.006 286.033);
|
||||
--muted-foreground: oklch(0.705 0.015 286.067);
|
||||
--accent: oklch(0.274 0.006 286.033);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.554 0.135 66.442);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.21 0.006 285.885);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.852 0.199 91.936);
|
||||
--sidebar-primary-foreground: oklch(0.421 0.095 57.708);
|
||||
--sidebar-accent: oklch(0.274 0.006 286.033);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.554 0.135 66.442);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
13
frontend/src/app.d.ts
vendored
Normal file
13
frontend/src/app.d.ts
vendored
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
// See https://svelte.dev/docs/kit/types#app.d.ts
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
11
frontend/src/app.html
Normal file
11
frontend/src/app.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
1
frontend/src/lib/assets/favicon.svg
Normal file
1
frontend/src/lib/assets/favicon.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
36
frontend/src/lib/components/ConfirmDialog.svelte
Normal file
36
frontend/src/lib/components/ConfirmDialog.svelte
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<script lang="ts">
|
||||
import { app } from '$lib/stores/app.svelte'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import * as Dialog from '@/components/ui/dialog'
|
||||
|
||||
let open = $derived(app.confirm.show)
|
||||
|
||||
function onOpenChange(v: boolean) {
|
||||
if (!v) {
|
||||
// ESC oder Backdrop-Click → wie "no"
|
||||
app.confirm.no()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<Dialog.Root bind:open={() => open, onOpenChange}>
|
||||
<Dialog.Content>
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>{app.confirm.title}</Dialog.Title>
|
||||
{#if app.confirm.text}
|
||||
<Dialog.Description>{app.confirm.text}</Dialog.Description>
|
||||
{/if}
|
||||
</Dialog.Header>
|
||||
|
||||
{#if app.confirm.error}
|
||||
<div class="rounded-md border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{typeof app.confirm.error === 'object' ? (app.confirm.error as any).message ?? 'Fehler' : 'Fehler'}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<Dialog.Footer>
|
||||
<Button variant="ghost" onclick={() => app.confirm.no()}>Abbrechen</Button>
|
||||
<Button variant="destructive" onclick={() => app.confirm.yes()}>Bestätigen</Button>
|
||||
</Dialog.Footer>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
7
frontend/src/lib/components/Logo.svelte
Normal file
7
frontend/src/lib/components/Logo.svelte
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<script>
|
||||
</script>
|
||||
|
||||
<div class="w-24 h-24 relative" id="logo">
|
||||
<img alt="" class="absolute top-0 w-24 -24 object-contain" src="/schildl.svg">
|
||||
<img alt="" class="absolute top-0 scale-110 w-24 -24 object-contain" src="/radl.svg">
|
||||
</div>
|
||||
43
frontend/src/lib/components/TeamSwitcher.svelte
Normal file
43
frontend/src/lib/components/TeamSwitcher.svelte
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<script lang="ts">
|
||||
import { getTeamContext } from '$lib/stores/teams.svelte'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import * as DropdownMenu from '@/components/ui/dropdown-menu'
|
||||
import { ChevronDown, Plus, Users } from 'lucide-svelte'
|
||||
import { goto } from '$app/navigation'
|
||||
|
||||
const teams = getTeamContext()
|
||||
</script>
|
||||
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger>
|
||||
{#snippet child({ props })}
|
||||
<Button {...props} variant="outline" size="sm" class="gap-2">
|
||||
<Users class="h-4 w-4" />
|
||||
<span class="font-medium">{teams.active?.name ?? 'Kein Team'}</span>
|
||||
<ChevronDown class="h-3 w-3 opacity-50" />
|
||||
</Button>
|
||||
{/snippet}
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content align="end" class="min-w-56">
|
||||
<DropdownMenu.Label>Teams wechseln</DropdownMenu.Label>
|
||||
{#each teams.records as t}
|
||||
{@const isMe = teams.isOwner(t) || teams.isAdmin(t)}
|
||||
<DropdownMenu.Item
|
||||
onclick={() => teams.setActive(t.id)}
|
||||
class={t.id === teams.activeId ? 'bg-accent' : ''}
|
||||
>
|
||||
<span class="flex-1">{t.name}</span>
|
||||
{#if teams.isOwner(t)}
|
||||
<span class="text-xs text-muted-foreground">Owner</span>
|
||||
{:else if teams.isAdmin(t)}
|
||||
<span class="text-xs text-muted-foreground">Admin</span>
|
||||
{/if}
|
||||
</DropdownMenu.Item>
|
||||
{/each}
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Item onclick={() => goto('/dashboard/teams')}>
|
||||
<Users class="h-4 w-4 mr-2" />
|
||||
Teams verwalten
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<script lang="ts">
|
||||
import { Accordion as AccordionPrimitive } from "bits-ui";
|
||||
import { cn, type WithoutChild } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
|
||||
</script>
|
||||
|
||||
<AccordionPrimitive.Content
|
||||
bind:ref
|
||||
data-slot="accordion-content"
|
||||
class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
|
||||
{...restProps}
|
||||
>
|
||||
<div class={cn("pb-4 pt-0", className)}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
</AccordionPrimitive.Content>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<script lang="ts">
|
||||
import { Accordion as AccordionPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: AccordionPrimitive.ItemProps = $props();
|
||||
</script>
|
||||
|
||||
<AccordionPrimitive.Item
|
||||
bind:ref
|
||||
data-slot="accordion-item"
|
||||
class={cn("border-b last:border-b-0", className)}
|
||||
{...restProps}
|
||||
/>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<script lang="ts">
|
||||
import { Accordion as AccordionPrimitive } from "bits-ui";
|
||||
import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
|
||||
import { cn, type WithoutChild } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
level = 3,
|
||||
children,
|
||||
...restProps
|
||||
}: WithoutChild<AccordionPrimitive.TriggerProps> & {
|
||||
level?: AccordionPrimitive.HeaderProps["level"];
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<AccordionPrimitive.Header {level} class="flex">
|
||||
<AccordionPrimitive.Trigger
|
||||
data-slot="accordion-trigger"
|
||||
bind:ref
|
||||
class={cn(
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium outline-none transition-all hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
<ChevronDownIcon
|
||||
class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
|
||||
/>
|
||||
</AccordionPrimitive.Trigger>
|
||||
</AccordionPrimitive.Header>
|
||||
16
frontend/src/lib/components/ui/accordion/accordion.svelte
Normal file
16
frontend/src/lib/components/ui/accordion/accordion.svelte
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<script lang="ts">
|
||||
import { Accordion as AccordionPrimitive } from "bits-ui";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
value = $bindable(),
|
||||
...restProps
|
||||
}: AccordionPrimitive.RootProps = $props();
|
||||
</script>
|
||||
|
||||
<AccordionPrimitive.Root
|
||||
bind:ref
|
||||
bind:value={value as never}
|
||||
data-slot="accordion"
|
||||
{...restProps}
|
||||
/>
|
||||
16
frontend/src/lib/components/ui/accordion/index.ts
Normal file
16
frontend/src/lib/components/ui/accordion/index.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import Root from "./accordion.svelte";
|
||||
import Content from "./accordion-content.svelte";
|
||||
import Item from "./accordion-item.svelte";
|
||||
import Trigger from "./accordion-trigger.svelte";
|
||||
|
||||
export {
|
||||
Root,
|
||||
Content,
|
||||
Item,
|
||||
Trigger,
|
||||
//
|
||||
Root as Accordion,
|
||||
Content as AccordionContent,
|
||||
Item as AccordionItem,
|
||||
Trigger as AccordionTrigger,
|
||||
};
|
||||
49
frontend/src/lib/components/ui/badge/badge.svelte
Normal file
49
frontend/src/lib/components/ui/badge/badge.svelte
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<script lang="ts" module>
|
||||
import { type VariantProps, tv } from "tailwind-variants";
|
||||
|
||||
export const badgeVariants = tv({
|
||||
base: "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none",
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
||||
secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
|
||||
destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
|
||||
outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
|
||||
ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
});
|
||||
|
||||
export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import type { HTMLAnchorAttributes } from "svelte/elements";
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
href,
|
||||
class: className,
|
||||
variant = "default",
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAnchorAttributes> & {
|
||||
variant?: BadgeVariant;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<svelte:element
|
||||
this={href ? "a" : "span"}
|
||||
bind:this={ref}
|
||||
data-slot="badge"
|
||||
{href}
|
||||
class={cn(badgeVariants({ variant }), className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</svelte:element>
|
||||
2
frontend/src/lib/components/ui/badge/index.ts
Normal file
2
frontend/src/lib/components/ui/badge/index.ts
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export { default as Badge } from "./badge.svelte";
|
||||
export { badgeVariants, type BadgeVariant } from "./badge.svelte";
|
||||
82
frontend/src/lib/components/ui/button/button.svelte
Normal file
82
frontend/src/lib/components/ui/button/button.svelte
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<script lang="ts" module>
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
|
||||
import { type VariantProps, tv } from "tailwind-variants";
|
||||
|
||||
export const buttonVariants = tv({
|
||||
base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
||||
outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
|
||||
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
||||
ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
|
||||
destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
||||
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
icon: "size-8",
|
||||
"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
||||
"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
|
||||
"icon-lg": "size-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
});
|
||||
|
||||
export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
|
||||
export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
|
||||
|
||||
export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
|
||||
WithElementRef<HTMLAnchorAttributes> & {
|
||||
variant?: ButtonVariant;
|
||||
size?: ButtonSize;
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
let {
|
||||
class: className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
ref = $bindable(null),
|
||||
href = undefined,
|
||||
type = "button",
|
||||
disabled,
|
||||
children,
|
||||
...restProps
|
||||
}: ButtonProps = $props();
|
||||
</script>
|
||||
|
||||
{#if href}
|
||||
<a
|
||||
bind:this={ref}
|
||||
data-slot="button"
|
||||
class={cn(buttonVariants({ variant, size }), className)}
|
||||
href={disabled ? undefined : href}
|
||||
aria-disabled={disabled}
|
||||
role={disabled ? "link" : undefined}
|
||||
tabindex={disabled ? -1 : undefined}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
bind:this={ref}
|
||||
data-slot="button"
|
||||
class={cn(buttonVariants({ variant, size }), className)}
|
||||
{type}
|
||||
{disabled}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</button>
|
||||
{/if}
|
||||
17
frontend/src/lib/components/ui/button/index.ts
Normal file
17
frontend/src/lib/components/ui/button/index.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import Root, {
|
||||
type ButtonProps,
|
||||
type ButtonSize,
|
||||
type ButtonVariant,
|
||||
buttonVariants,
|
||||
} from "./button.svelte";
|
||||
|
||||
export {
|
||||
Root,
|
||||
type ButtonProps as Props,
|
||||
//
|
||||
Root as Button,
|
||||
buttonVariants,
|
||||
type ButtonProps,
|
||||
type ButtonSize,
|
||||
type ButtonVariant,
|
||||
};
|
||||
23
frontend/src/lib/components/ui/card/card-action.svelte
Normal file
23
frontend/src/lib/components/ui/card/card-action.svelte
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<script lang="ts">
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
data-slot="card-action"
|
||||
class={cn(
|
||||
"cn-card-action col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
20
frontend/src/lib/components/ui/card/card-content.svelte
Normal file
20
frontend/src/lib/components/ui/card/card-content.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<script lang="ts">
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
data-slot="card-content"
|
||||
class={cn("px-4 group-data-[size=sm]/card:px-3", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
20
frontend/src/lib/components/ui/card/card-description.svelte
Normal file
20
frontend/src/lib/components/ui/card/card-description.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<script lang="ts">
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
|
||||
</script>
|
||||
|
||||
<p
|
||||
bind:this={ref}
|
||||
data-slot="card-description"
|
||||
class={cn("text-muted-foreground text-sm", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</p>
|
||||
20
frontend/src/lib/components/ui/card/card-footer.svelte
Normal file
20
frontend/src/lib/components/ui/card/card-footer.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<script lang="ts">
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
data-slot="card-footer"
|
||||
class={cn("bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
23
frontend/src/lib/components/ui/card/card-header.svelte
Normal file
23
frontend/src/lib/components/ui/card/card-header.svelte
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<script lang="ts">
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
data-slot="card-header"
|
||||
class={cn(
|
||||
"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
20
frontend/src/lib/components/ui/card/card-title.svelte
Normal file
20
frontend/src/lib/components/ui/card/card-title.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<script lang="ts">
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
data-slot="card-title"
|
||||
class={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
22
frontend/src/lib/components/ui/card/card.svelte
Normal file
22
frontend/src/lib/components/ui/card/card.svelte
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<script lang="ts">
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
size = "default",
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: "default" | "sm" } = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
data-slot="card"
|
||||
data-size={size}
|
||||
class={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
25
frontend/src/lib/components/ui/card/index.ts
Normal file
25
frontend/src/lib/components/ui/card/index.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import Root from "./card.svelte";
|
||||
import Content from "./card-content.svelte";
|
||||
import Description from "./card-description.svelte";
|
||||
import Footer from "./card-footer.svelte";
|
||||
import Header from "./card-header.svelte";
|
||||
import Title from "./card-title.svelte";
|
||||
import Action from "./card-action.svelte";
|
||||
|
||||
export {
|
||||
Root,
|
||||
Content,
|
||||
Description,
|
||||
Footer,
|
||||
Header,
|
||||
Title,
|
||||
Action,
|
||||
//
|
||||
Root as Card,
|
||||
Content as CardContent,
|
||||
Description as CardDescription,
|
||||
Footer as CardFooter,
|
||||
Header as CardHeader,
|
||||
Title as CardTitle,
|
||||
Action as CardAction,
|
||||
};
|
||||
11
frontend/src/lib/components/ui/dialog/dialog-close.svelte
Normal file
11
frontend/src/lib/components/ui/dialog/dialog-close.svelte
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<script lang="ts">
|
||||
import { Dialog as DialogPrimitive } from "bits-ui";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
type = "button",
|
||||
...restProps
|
||||
}: DialogPrimitive.CloseProps = $props();
|
||||
</script>
|
||||
|
||||
<DialogPrimitive.Close bind:ref data-slot="dialog-close" {type} {...restProps} />
|
||||
48
frontend/src/lib/components/ui/dialog/dialog-content.svelte
Normal file
48
frontend/src/lib/components/ui/dialog/dialog-content.svelte
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<script lang="ts">
|
||||
import { Dialog as DialogPrimitive } from "bits-ui";
|
||||
import DialogPortal from "./dialog-portal.svelte";
|
||||
import type { Snippet } from "svelte";
|
||||
import * as Dialog from "./index.js";
|
||||
import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
|
||||
import type { ComponentProps } from "svelte";
|
||||
import { Button } from "$lib/components/ui/button/index.js";
|
||||
import XIcon from '@lucide/svelte/icons/x';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
portalProps,
|
||||
children,
|
||||
showCloseButton = true,
|
||||
...restProps
|
||||
}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
|
||||
portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
|
||||
children: Snippet;
|
||||
showCloseButton?: boolean;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<DialogPortal {...portalProps}>
|
||||
<Dialog.Overlay />
|
||||
<DialogPrimitive.Content
|
||||
bind:ref
|
||||
data-slot="dialog-content"
|
||||
class={cn(
|
||||
"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
{#if showCloseButton}
|
||||
<DialogPrimitive.Close data-slot="dialog-close">
|
||||
{#snippet child({ props })}
|
||||
<Button variant="ghost" class="absolute top-2 right-2" size="icon-sm" {...props}>
|
||||
<XIcon />
|
||||
<span class="sr-only">Close</span>
|
||||
</Button>
|
||||
{/snippet}
|
||||
</DialogPrimitive.Close>
|
||||
{/if}
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<script lang="ts">
|
||||
import { Dialog as DialogPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: DialogPrimitive.DescriptionProps = $props();
|
||||
</script>
|
||||
|
||||
<DialogPrimitive.Description
|
||||
bind:ref
|
||||
data-slot="dialog-description"
|
||||
class={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", className)}
|
||||
{...restProps}
|
||||
/>
|
||||
32
frontend/src/lib/components/ui/dialog/dialog-footer.svelte
Normal file
32
frontend/src/lib/components/ui/dialog/dialog-footer.svelte
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<script lang="ts">
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { Dialog as DialogPrimitive } from "bits-ui";
|
||||
import { Button } from "$lib/components/ui/button/index.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
showCloseButton = false,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
|
||||
showCloseButton?: boolean;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
data-slot="dialog-footer"
|
||||
class={cn("bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
{#if showCloseButton}
|
||||
<DialogPrimitive.Close>
|
||||
{#snippet child({ props })}
|
||||
<Button variant="outline" {...props}>Close</Button>
|
||||
{/snippet}
|
||||
</DialogPrimitive.Close>
|
||||
{/if}
|
||||
</div>
|
||||
20
frontend/src/lib/components/ui/dialog/dialog-header.svelte
Normal file
20
frontend/src/lib/components/ui/dialog/dialog-header.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<script lang="ts">
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
data-slot="dialog-header"
|
||||
class={cn("gap-2 flex flex-col", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
17
frontend/src/lib/components/ui/dialog/dialog-overlay.svelte
Normal file
17
frontend/src/lib/components/ui/dialog/dialog-overlay.svelte
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script lang="ts">
|
||||
import { Dialog as DialogPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: DialogPrimitive.OverlayProps = $props();
|
||||
</script>
|
||||
|
||||
<DialogPrimitive.Overlay
|
||||
bind:ref
|
||||
data-slot="dialog-overlay"
|
||||
class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50", className)}
|
||||
{...restProps}
|
||||
/>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { Dialog as DialogPrimitive } from "bits-ui";
|
||||
|
||||
let { ...restProps }: DialogPrimitive.PortalProps = $props();
|
||||
</script>
|
||||
|
||||
<DialogPrimitive.Portal {...restProps} />
|
||||
17
frontend/src/lib/components/ui/dialog/dialog-title.svelte
Normal file
17
frontend/src/lib/components/ui/dialog/dialog-title.svelte
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script lang="ts">
|
||||
import { Dialog as DialogPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: DialogPrimitive.TitleProps = $props();
|
||||
</script>
|
||||
|
||||
<DialogPrimitive.Title
|
||||
bind:ref
|
||||
data-slot="dialog-title"
|
||||
class={cn("text-base leading-none font-medium", className)}
|
||||
{...restProps}
|
||||
/>
|
||||
11
frontend/src/lib/components/ui/dialog/dialog-trigger.svelte
Normal file
11
frontend/src/lib/components/ui/dialog/dialog-trigger.svelte
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<script lang="ts">
|
||||
import { Dialog as DialogPrimitive } from "bits-ui";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
type = "button",
|
||||
...restProps
|
||||
}: DialogPrimitive.TriggerProps = $props();
|
||||
</script>
|
||||
|
||||
<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {type} {...restProps} />
|
||||
7
frontend/src/lib/components/ui/dialog/dialog.svelte
Normal file
7
frontend/src/lib/components/ui/dialog/dialog.svelte
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { Dialog as DialogPrimitive } from "bits-ui";
|
||||
|
||||
let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps = $props();
|
||||
</script>
|
||||
|
||||
<DialogPrimitive.Root bind:open {...restProps} />
|
||||
34
frontend/src/lib/components/ui/dialog/index.ts
Normal file
34
frontend/src/lib/components/ui/dialog/index.ts
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import Root from "./dialog.svelte";
|
||||
import Portal from "./dialog-portal.svelte";
|
||||
import Title from "./dialog-title.svelte";
|
||||
import Footer from "./dialog-footer.svelte";
|
||||
import Header from "./dialog-header.svelte";
|
||||
import Overlay from "./dialog-overlay.svelte";
|
||||
import Content from "./dialog-content.svelte";
|
||||
import Description from "./dialog-description.svelte";
|
||||
import Trigger from "./dialog-trigger.svelte";
|
||||
import Close from "./dialog-close.svelte";
|
||||
|
||||
export {
|
||||
Root,
|
||||
Title,
|
||||
Portal,
|
||||
Footer,
|
||||
Header,
|
||||
Trigger,
|
||||
Overlay,
|
||||
Content,
|
||||
Description,
|
||||
Close,
|
||||
//
|
||||
Root as Dialog,
|
||||
Title as DialogTitle,
|
||||
Portal as DialogPortal,
|
||||
Footer as DialogFooter,
|
||||
Header as DialogHeader,
|
||||
Trigger as DialogTrigger,
|
||||
Overlay as DialogOverlay,
|
||||
Content as DialogContent,
|
||||
Description as DialogDescription,
|
||||
Close as DialogClose,
|
||||
};
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<script lang="ts">
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
value = $bindable([]),
|
||||
...restProps
|
||||
}: DropdownMenuPrimitive.CheckboxGroupProps = $props();
|
||||
</script>
|
||||
|
||||
<DropdownMenuPrimitive.CheckboxGroup
|
||||
bind:ref
|
||||
bind:value
|
||||
data-slot="dropdown-menu-checkbox-group"
|
||||
{...restProps}
|
||||
/>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<script lang="ts">
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
|
||||
import MinusIcon from '@lucide/svelte/icons/minus';
|
||||
import CheckIcon from '@lucide/svelte/icons/check';
|
||||
import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
|
||||
import type { Snippet } from "svelte";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
checked = $bindable(false),
|
||||
indeterminate = $bindable(false),
|
||||
class: className,
|
||||
children: childrenProp,
|
||||
...restProps
|
||||
}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
|
||||
children?: Snippet;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
bind:ref
|
||||
bind:checked
|
||||
bind:indeterminate
|
||||
data-slot="dropdown-menu-checkbox-item"
|
||||
class={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
>
|
||||
{#snippet children({ checked, indeterminate })}
|
||||
<span
|
||||
class="absolute right-2 flex items-center justify-center pointer-events-none"
|
||||
data-slot="dropdown-menu-checkbox-item-indicator"
|
||||
>
|
||||
{#if indeterminate}
|
||||
<MinusIcon />
|
||||
{:else if checked}
|
||||
<CheckIcon />
|
||||
{/if}
|
||||
</span>
|
||||
{@render childrenProp?.()}
|
||||
{/snippet}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<script lang="ts">
|
||||
import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
|
||||
import DropdownMenuPortal from "./dropdown-menu-portal.svelte";
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
|
||||
import type { ComponentProps } from "svelte";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
sideOffset = 4,
|
||||
align = "start",
|
||||
portalProps,
|
||||
class: className,
|
||||
...restProps
|
||||
}: DropdownMenuPrimitive.ContentProps & {
|
||||
portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DropdownMenuPortal>>;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<DropdownMenuPortal {...portalProps}>
|
||||
<DropdownMenuPrimitive.Content
|
||||
bind:ref
|
||||
data-slot="dropdown-menu-content"
|
||||
{sideOffset}
|
||||
{align}
|
||||
class={cn(
|
||||
"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-(--bits-dropdown-menu-anchor-width) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
/>
|
||||
</DropdownMenuPortal>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<script lang="ts">
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import type { ComponentProps } from "svelte";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
inset,
|
||||
...restProps
|
||||
}: ComponentProps<typeof DropdownMenuPrimitive.GroupHeading> & {
|
||||
inset?: boolean;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<DropdownMenuPrimitive.GroupHeading
|
||||
bind:ref
|
||||
data-slot="dropdown-menu-group-heading"
|
||||
data-inset={inset}
|
||||
class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8", className)}
|
||||
{...restProps}
|
||||
/>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
|
||||
|
||||
let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.GroupProps = $props();
|
||||
</script>
|
||||
|
||||
<DropdownMenuPrimitive.Group bind:ref data-slot="dropdown-menu-group" {...restProps} />
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<script lang="ts">
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...restProps
|
||||
}: DropdownMenuPrimitive.ItemProps & {
|
||||
inset?: boolean;
|
||||
variant?: "default" | "destructive";
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<DropdownMenuPrimitive.Item
|
||||
bind:ref
|
||||
data-slot="dropdown-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
class={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
/>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<script lang="ts">
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
inset,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
|
||||
inset?: boolean;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
data-slot="dropdown-menu-label"
|
||||
data-inset={inset}
|
||||
class={cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7 data-[inset]:pl-8", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
|
||||
|
||||
let { ...restProps }: DropdownMenuPrimitive.PortalProps = $props();
|
||||
</script>
|
||||
|
||||
<DropdownMenuPrimitive.Portal {...restProps} />
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<script lang="ts">
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
value = $bindable(),
|
||||
...restProps
|
||||
}: DropdownMenuPrimitive.RadioGroupProps = $props();
|
||||
</script>
|
||||
|
||||
<DropdownMenuPrimitive.RadioGroup
|
||||
bind:ref
|
||||
bind:value
|
||||
data-slot="dropdown-menu-radio-group"
|
||||
{...restProps}
|
||||
/>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<script lang="ts">
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
|
||||
import CheckIcon from '@lucide/svelte/icons/check';
|
||||
import { cn, type WithoutChild } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children: childrenProp,
|
||||
...restProps
|
||||
}: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
|
||||
</script>
|
||||
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
bind:ref
|
||||
data-slot="dropdown-menu-radio-item"
|
||||
class={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
>
|
||||
{#snippet children({ checked })}
|
||||
<span
|
||||
class="absolute right-2 flex items-center justify-center pointer-events-none"
|
||||
data-slot="dropdown-menu-radio-item-indicator"
|
||||
>
|
||||
{#if checked}
|
||||
<CheckIcon />
|
||||
{/if}
|
||||
</span>
|
||||
{@render childrenProp?.({ checked })}
|
||||
{/snippet}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<script lang="ts">
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: DropdownMenuPrimitive.SeparatorProps = $props();
|
||||
</script>
|
||||
|
||||
<DropdownMenuPrimitive.Separator
|
||||
bind:ref
|
||||
data-slot="dropdown-menu-separator"
|
||||
class={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||
{...restProps}
|
||||
/>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<script lang="ts">
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
|
||||
</script>
|
||||
|
||||
<span
|
||||
bind:this={ref}
|
||||
data-slot="dropdown-menu-shortcut"
|
||||
class={cn("text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</span>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<script lang="ts">
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: DropdownMenuPrimitive.SubContentProps = $props();
|
||||
</script>
|
||||
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
bind:ref
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100 w-auto", className)}
|
||||
{...restProps}
|
||||
/>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<script lang="ts">
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
|
||||
import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
inset,
|
||||
children,
|
||||
...restProps
|
||||
}: DropdownMenuPrimitive.SubTriggerProps & {
|
||||
inset?: boolean;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
bind:ref
|
||||
data-slot="dropdown-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
class={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
<ChevronRightIcon class="ml-auto" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
|
||||
|
||||
let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.SubProps = $props();
|
||||
</script>
|
||||
|
||||
<DropdownMenuPrimitive.Sub bind:open {...restProps} />
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
|
||||
|
||||
let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.TriggerProps = $props();
|
||||
</script>
|
||||
|
||||
<DropdownMenuPrimitive.Trigger bind:ref data-slot="dropdown-menu-trigger" {...restProps} />
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
|
||||
|
||||
let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.RootProps = $props();
|
||||
</script>
|
||||
|
||||
<DropdownMenuPrimitive.Root bind:open {...restProps} />
|
||||
54
frontend/src/lib/components/ui/dropdown-menu/index.ts
Normal file
54
frontend/src/lib/components/ui/dropdown-menu/index.ts
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import Root from "./dropdown-menu.svelte";
|
||||
import Sub from "./dropdown-menu-sub.svelte";
|
||||
import CheckboxGroup from "./dropdown-menu-checkbox-group.svelte";
|
||||
import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
|
||||
import Content from "./dropdown-menu-content.svelte";
|
||||
import Group from "./dropdown-menu-group.svelte";
|
||||
import Item from "./dropdown-menu-item.svelte";
|
||||
import Label from "./dropdown-menu-label.svelte";
|
||||
import RadioGroup from "./dropdown-menu-radio-group.svelte";
|
||||
import RadioItem from "./dropdown-menu-radio-item.svelte";
|
||||
import Separator from "./dropdown-menu-separator.svelte";
|
||||
import Shortcut from "./dropdown-menu-shortcut.svelte";
|
||||
import Trigger from "./dropdown-menu-trigger.svelte";
|
||||
import SubContent from "./dropdown-menu-sub-content.svelte";
|
||||
import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
|
||||
import GroupHeading from "./dropdown-menu-group-heading.svelte";
|
||||
import Portal from "./dropdown-menu-portal.svelte";
|
||||
|
||||
export {
|
||||
CheckboxGroup,
|
||||
CheckboxItem,
|
||||
Content,
|
||||
Portal,
|
||||
Root as DropdownMenu,
|
||||
CheckboxGroup as DropdownMenuCheckboxGroup,
|
||||
CheckboxItem as DropdownMenuCheckboxItem,
|
||||
Content as DropdownMenuContent,
|
||||
Portal as DropdownMenuPortal,
|
||||
Group as DropdownMenuGroup,
|
||||
Item as DropdownMenuItem,
|
||||
Label as DropdownMenuLabel,
|
||||
RadioGroup as DropdownMenuRadioGroup,
|
||||
RadioItem as DropdownMenuRadioItem,
|
||||
Separator as DropdownMenuSeparator,
|
||||
Shortcut as DropdownMenuShortcut,
|
||||
Sub as DropdownMenuSub,
|
||||
SubContent as DropdownMenuSubContent,
|
||||
SubTrigger as DropdownMenuSubTrigger,
|
||||
Trigger as DropdownMenuTrigger,
|
||||
GroupHeading as DropdownMenuGroupHeading,
|
||||
Group,
|
||||
GroupHeading,
|
||||
Item,
|
||||
Label,
|
||||
RadioGroup,
|
||||
RadioItem,
|
||||
Root,
|
||||
Separator,
|
||||
Shortcut,
|
||||
Sub,
|
||||
SubContent,
|
||||
SubTrigger,
|
||||
Trigger,
|
||||
};
|
||||
7
frontend/src/lib/components/ui/input/index.ts
Normal file
7
frontend/src/lib/components/ui/input/index.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import Root from "./input.svelte";
|
||||
|
||||
export {
|
||||
Root,
|
||||
//
|
||||
Root as Input,
|
||||
};
|
||||
48
frontend/src/lib/components/ui/input/input.svelte
Normal file
48
frontend/src/lib/components/ui/input/input.svelte
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<script lang="ts">
|
||||
import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
|
||||
type InputType = Exclude<HTMLInputTypeAttribute, "file">;
|
||||
|
||||
type Props = WithElementRef<
|
||||
Omit<HTMLInputAttributes, "type"> &
|
||||
({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
|
||||
>;
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
value = $bindable(),
|
||||
type,
|
||||
files = $bindable(),
|
||||
class: className,
|
||||
"data-slot": dataSlot = "input",
|
||||
...restProps
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
{#if type === "file"}
|
||||
<input
|
||||
bind:this={ref}
|
||||
data-slot={dataSlot}
|
||||
class={cn(
|
||||
"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
type="file"
|
||||
bind:files
|
||||
bind:value
|
||||
{...restProps}
|
||||
/>
|
||||
{:else}
|
||||
<input
|
||||
bind:this={ref}
|
||||
data-slot={dataSlot}
|
||||
class={cn(
|
||||
"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{type}
|
||||
bind:value
|
||||
{...restProps}
|
||||
/>
|
||||
{/if}
|
||||
7
frontend/src/lib/components/ui/label/index.ts
Normal file
7
frontend/src/lib/components/ui/label/index.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import Root from "./label.svelte";
|
||||
|
||||
export {
|
||||
Root,
|
||||
//
|
||||
Root as Label,
|
||||
};
|
||||
20
frontend/src/lib/components/ui/label/label.svelte
Normal file
20
frontend/src/lib/components/ui/label/label.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<script lang="ts">
|
||||
import { Label as LabelPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: LabelPrimitive.RootProps = $props();
|
||||
</script>
|
||||
|
||||
<LabelPrimitive.Root
|
||||
bind:ref
|
||||
data-slot="label"
|
||||
class={cn(
|
||||
"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
/>
|
||||
37
frontend/src/lib/components/ui/select/index.ts
Normal file
37
frontend/src/lib/components/ui/select/index.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import Root from "./select.svelte";
|
||||
import Group from "./select-group.svelte";
|
||||
import Label from "./select-label.svelte";
|
||||
import Item from "./select-item.svelte";
|
||||
import Content from "./select-content.svelte";
|
||||
import Trigger from "./select-trigger.svelte";
|
||||
import Separator from "./select-separator.svelte";
|
||||
import ScrollDownButton from "./select-scroll-down-button.svelte";
|
||||
import ScrollUpButton from "./select-scroll-up-button.svelte";
|
||||
import GroupHeading from "./select-group-heading.svelte";
|
||||
import Portal from "./select-portal.svelte";
|
||||
|
||||
export {
|
||||
Root,
|
||||
Group,
|
||||
Label,
|
||||
Item,
|
||||
Content,
|
||||
Trigger,
|
||||
Separator,
|
||||
ScrollDownButton,
|
||||
ScrollUpButton,
|
||||
GroupHeading,
|
||||
Portal,
|
||||
//
|
||||
Root as Select,
|
||||
Group as SelectGroup,
|
||||
Label as SelectLabel,
|
||||
Item as SelectItem,
|
||||
Content as SelectContent,
|
||||
Trigger as SelectTrigger,
|
||||
Separator as SelectSeparator,
|
||||
ScrollDownButton as SelectScrollDownButton,
|
||||
ScrollUpButton as SelectScrollUpButton,
|
||||
GroupHeading as SelectGroupHeading,
|
||||
Portal as SelectPortal,
|
||||
};
|
||||
45
frontend/src/lib/components/ui/select/select-content.svelte
Normal file
45
frontend/src/lib/components/ui/select/select-content.svelte
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<script lang="ts">
|
||||
import { Select as SelectPrimitive } from "bits-ui";
|
||||
import SelectPortal from "./select-portal.svelte";
|
||||
import SelectScrollUpButton from "./select-scroll-up-button.svelte";
|
||||
import SelectScrollDownButton from "./select-scroll-down-button.svelte";
|
||||
import { cn, type WithoutChild } from "$lib/utils.js";
|
||||
import type { ComponentProps } from "svelte";
|
||||
import type { WithoutChildrenOrChild } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
sideOffset = 4,
|
||||
portalProps,
|
||||
children,
|
||||
preventScroll = true,
|
||||
...restProps
|
||||
}: WithoutChild<SelectPrimitive.ContentProps> & {
|
||||
portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<SelectPortal {...portalProps}>
|
||||
<SelectPrimitive.Content
|
||||
bind:ref
|
||||
{sideOffset}
|
||||
{preventScroll}
|
||||
data-slot="select-content"
|
||||
class={cn(
|
||||
"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 overflow-x-hidden overflow-y-auto",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
class={cn(
|
||||
"h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1"
|
||||
)}
|
||||
>
|
||||
{@render children?.()}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPortal>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<script lang="ts">
|
||||
import { Select as SelectPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import type { ComponentProps } from "svelte";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
|
||||
</script>
|
||||
|
||||
<SelectPrimitive.GroupHeading
|
||||
bind:ref
|
||||
data-slot="select-group-heading"
|
||||
class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</SelectPrimitive.GroupHeading>
|
||||
17
frontend/src/lib/components/ui/select/select-group.svelte
Normal file
17
frontend/src/lib/components/ui/select/select-group.svelte
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script lang="ts">
|
||||
import { Select as SelectPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: SelectPrimitive.GroupProps = $props();
|
||||
</script>
|
||||
|
||||
<SelectPrimitive.Group
|
||||
bind:ref
|
||||
data-slot="select-group"
|
||||
class={cn("scroll-my-1 p-1", className)}
|
||||
{...restProps}
|
||||
/>
|
||||
38
frontend/src/lib/components/ui/select/select-item.svelte
Normal file
38
frontend/src/lib/components/ui/select/select-item.svelte
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<script lang="ts">
|
||||
import { Select as SelectPrimitive } from "bits-ui";
|
||||
import { cn, type WithoutChild } from "$lib/utils.js";
|
||||
import CheckIcon from '@lucide/svelte/icons/check';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
value,
|
||||
label,
|
||||
children: childrenProp,
|
||||
...restProps
|
||||
}: WithoutChild<SelectPrimitive.ItemProps> = $props();
|
||||
</script>
|
||||
|
||||
<SelectPrimitive.Item
|
||||
bind:ref
|
||||
{value}
|
||||
data-slot="select-item"
|
||||
class={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 focus:bg-accent data-highlighted:bg-accent data-highlighted:text-accent-foreground focus:text-accent-foreground relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
>
|
||||
{#snippet children({ selected, highlighted })}
|
||||
<span class="absolute end-2 flex size-3.5 items-center justify-center">
|
||||
{#if selected}
|
||||
<CheckIcon class="cn-select-item-indicator-icon" />
|
||||
{/if}
|
||||
</span>
|
||||
{#if childrenProp}
|
||||
{@render childrenProp({ selected, highlighted })}
|
||||
{:else}
|
||||
{label || value}
|
||||
{/if}
|
||||
{/snippet}
|
||||
</SelectPrimitive.Item>
|
||||
20
frontend/src/lib/components/ui/select/select-label.svelte
Normal file
20
frontend/src/lib/components/ui/select/select-label.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<script lang="ts">
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
data-slot="select-label"
|
||||
class={cn("text-muted-foreground px-1.5 py-1 text-xs", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { Select as SelectPrimitive } from "bits-ui";
|
||||
|
||||
let { ...restProps }: SelectPrimitive.PortalProps = $props();
|
||||
</script>
|
||||
|
||||
<SelectPrimitive.Portal {...restProps} />
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<script lang="ts">
|
||||
import { Select as SelectPrimitive } from "bits-ui";
|
||||
import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
|
||||
import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
|
||||
</script>
|
||||
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
bind:ref
|
||||
data-slot="select-scroll-down-button"
|
||||
class={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full", className)}
|
||||
{...restProps}
|
||||
>
|
||||
<ChevronDownIcon />
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<script lang="ts">
|
||||
import { Select as SelectPrimitive } from "bits-ui";
|
||||
import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
|
||||
import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
|
||||
</script>
|
||||
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
bind:ref
|
||||
data-slot="select-scroll-up-button"
|
||||
class={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full", className)}
|
||||
{...restProps}
|
||||
>
|
||||
<ChevronUpIcon />
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<script lang="ts">
|
||||
import type { Separator as SeparatorPrimitive } from "bits-ui";
|
||||
import { Separator } from "$lib/components/ui/separator/index.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: SeparatorPrimitive.RootProps = $props();
|
||||
</script>
|
||||
|
||||
<Separator
|
||||
bind:ref
|
||||
data-slot="select-separator"
|
||||
class={cn("bg-border -mx-1 my-1 h-px pointer-events-none", className)}
|
||||
{...restProps}
|
||||
/>
|
||||
29
frontend/src/lib/components/ui/select/select-trigger.svelte
Normal file
29
frontend/src/lib/components/ui/select/select-trigger.svelte
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<script lang="ts">
|
||||
import { Select as SelectPrimitive } from "bits-ui";
|
||||
import { cn, type WithoutChild } from "$lib/utils.js";
|
||||
import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
size = "default",
|
||||
...restProps
|
||||
}: WithoutChild<SelectPrimitive.TriggerProps> & {
|
||||
size?: "sm" | "default";
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<SelectPrimitive.Trigger
|
||||
bind:ref
|
||||
data-slot="select-trigger"
|
||||
data-size={size}
|
||||
class={cn(
|
||||
"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
<ChevronDownIcon class="text-muted-foreground size-4 pointer-events-none" />
|
||||
</SelectPrimitive.Trigger>
|
||||
11
frontend/src/lib/components/ui/select/select.svelte
Normal file
11
frontend/src/lib/components/ui/select/select.svelte
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<script lang="ts">
|
||||
import { Select as SelectPrimitive } from "bits-ui";
|
||||
|
||||
let {
|
||||
open = $bindable(false),
|
||||
value = $bindable(),
|
||||
...restProps
|
||||
}: SelectPrimitive.RootProps = $props();
|
||||
</script>
|
||||
|
||||
<SelectPrimitive.Root bind:open bind:value={value as never} {...restProps} />
|
||||
7
frontend/src/lib/components/ui/separator/index.ts
Normal file
7
frontend/src/lib/components/ui/separator/index.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import Root from "./separator.svelte";
|
||||
|
||||
export {
|
||||
Root,
|
||||
//
|
||||
Root as Separator,
|
||||
};
|
||||
23
frontend/src/lib/components/ui/separator/separator.svelte
Normal file
23
frontend/src/lib/components/ui/separator/separator.svelte
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<script lang="ts">
|
||||
import { Separator as SeparatorPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
"data-slot": dataSlot = "separator",
|
||||
...restProps
|
||||
}: SeparatorPrimitive.RootProps = $props();
|
||||
</script>
|
||||
|
||||
<SeparatorPrimitive.Root
|
||||
bind:ref
|
||||
data-slot={dataSlot}
|
||||
class={cn(
|
||||
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
|
||||
// this is different in shadcn/ui but self-stretch breaks things for us
|
||||
"data-[orientation=vertical]:h-full",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
/>
|
||||
28
frontend/src/lib/components/ui/table/index.ts
Normal file
28
frontend/src/lib/components/ui/table/index.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import Root from "./table.svelte";
|
||||
import Body from "./table-body.svelte";
|
||||
import Caption from "./table-caption.svelte";
|
||||
import Cell from "./table-cell.svelte";
|
||||
import Footer from "./table-footer.svelte";
|
||||
import Head from "./table-head.svelte";
|
||||
import Header from "./table-header.svelte";
|
||||
import Row from "./table-row.svelte";
|
||||
|
||||
export {
|
||||
Root,
|
||||
Body,
|
||||
Caption,
|
||||
Cell,
|
||||
Footer,
|
||||
Head,
|
||||
Header,
|
||||
Row,
|
||||
//
|
||||
Root as Table,
|
||||
Body as TableBody,
|
||||
Caption as TableCaption,
|
||||
Cell as TableCell,
|
||||
Footer as TableFooter,
|
||||
Head as TableHead,
|
||||
Header as TableHeader,
|
||||
Row as TableRow,
|
||||
};
|
||||
15
frontend/src/lib/components/ui/table/table-body.svelte
Normal file
15
frontend/src/lib/components/ui/table/table-body.svelte
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<script lang="ts">
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
|
||||
</script>
|
||||
|
||||
<tbody bind:this={ref} data-slot="table-body" class={cn("[&_tr:last-child]:border-0", className)} {...restProps}>
|
||||
{@render children?.()}
|
||||
</tbody>
|
||||
20
frontend/src/lib/components/ui/table/table-caption.svelte
Normal file
20
frontend/src/lib/components/ui/table/table-caption.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<script lang="ts">
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
|
||||
</script>
|
||||
|
||||
<caption
|
||||
bind:this={ref}
|
||||
data-slot="table-caption"
|
||||
class={cn("text-muted-foreground mt-4 text-sm", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</caption>
|
||||
15
frontend/src/lib/components/ui/table/table-cell.svelte
Normal file
15
frontend/src/lib/components/ui/table/table-cell.svelte
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<script lang="ts">
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
import type { HTMLTdAttributes } from "svelte/elements";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLTdAttributes> = $props();
|
||||
</script>
|
||||
|
||||
<td bind:this={ref} data-slot="table-cell" class={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} {...restProps}>
|
||||
{@render children?.()}
|
||||
</td>
|
||||
20
frontend/src/lib/components/ui/table/table-footer.svelte
Normal file
20
frontend/src/lib/components/ui/table/table-footer.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<script lang="ts">
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
|
||||
</script>
|
||||
|
||||
<tfoot
|
||||
bind:this={ref}
|
||||
data-slot="table-footer"
|
||||
class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</tfoot>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue