2 Commits

Author SHA1 Message Date
MechaCat02
32c16da3e2 feat: implement admin dashboard
Add Admin Dashboard at /admin for server configuration, disk usage
monitoring, and export job status, plus a public export/status endpoint.

Backend — new /api/v1/admin/* endpoints (RequireAdmin auth):
- GET  /admin/stats           → user/upload/comment counts + disk usage
- GET  /admin/config          → all config key/value pairs
- PATCH /admin/config         → update any subset of config keys; validates
                                 key whitelist and numeric values
- GET  /admin/export/jobs     → export_job rows for the event

Backend — public (AuthUser) endpoint:
- GET  /export/status         → released flag + zip/html job status/progress

Frontend — /admin page:
- Stats grid: guest count, upload count, comment count
- Disk usage bar with GB/MB formatting; red ≥ 90%, amber ≥ 75%
- Config form: labelled numeric inputs for all eight config keys,
  sends only changed values on save
- Export jobs list: type label, status badge, progress bar for running jobs,
  error message if failed; manual refresh button

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-02 20:45:37 +02:00
MechaCat02
71a2987a3e feat: implement host dashboard
Add Host Dashboard for event and guest management, accessible at /host.

Backend — new /api/v1/host/* endpoints (RequireHost auth):
- GET  /host/event                    → event name + lock/release state
- POST /host/event/close|open         → lock or unlock uploads; SSE broadcast
- POST /host/gallery/release          → set release timestamp, enqueue export jobs
- GET  /host/users                    → all guests with upload count & bytes
- POST /host/users/{id}/ban           → ban with optional upload-hide choice
- POST /host/users/{id}/unban         → lift ban
- PATCH /host/users/{id}/role         → promote guest→host or demote host→guest
- DELETE /host/upload/{id}            → host-level soft-delete + SSE
- DELETE /host/comment/{id}           → host-level soft-delete

Frontend — /host page:
- Event controls: lock/unlock toggle and release-gallery button with status badges
- Guest table: display name, role badge, upload count, storage used
- Ban flow: modal asking whether to keep or hide the user's uploads
- Promote/demote buttons respecting caller role (host can promote guests; admin can demote hosts)
- auth.ts: getRole() decodes JWT payload client-side to gate the route

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-02 20:43:09 +02:00
7 changed files with 1080 additions and 1 deletions

View File

@@ -0,0 +1,202 @@
use axum::extract::State;
use axum::http::StatusCode;
use axum::Json;
use serde::{Deserialize, Serialize};
use std::collections::HashMap;
use sysinfo::System;
use crate::auth::middleware::RequireAdmin;
use crate::error::AppError;
use crate::state::AppState;
// ── DTOs ─────────────────────────────────────────────────────────────────────
#[derive(Serialize)]
pub struct StatsDto {
pub user_count: i64,
pub upload_count: i64,
pub comment_count: i64,
pub disk_total_bytes: u64,
pub disk_used_bytes: u64,
pub disk_free_bytes: u64,
}
#[derive(Serialize, sqlx::FromRow)]
pub struct ExportJobDto {
pub id: uuid::Uuid,
pub r#type: String,
pub status: String,
pub progress_pct: i16,
pub error_message: Option<String>,
pub created_at: chrono::DateTime<chrono::Utc>,
pub completed_at: Option<chrono::DateTime<chrono::Utc>>,
}
// ── Handlers ─────────────────────────────────────────────────────────────────
pub async fn get_stats(
State(state): State<AppState>,
RequireAdmin(_auth): RequireAdmin,
) -> Result<Json<StatsDto>, AppError> {
let event = crate::models::event::Event::find_by_slug(&state.pool, &state.config.event_slug)
.await?
.ok_or_else(|| AppError::NotFound("Event nicht gefunden.".into()))?;
let (user_count,): (i64,) =
sqlx::query_as("SELECT COUNT(*) FROM \"user\" WHERE event_id = $1")
.bind(event.id)
.fetch_one(&state.pool)
.await?;
let (upload_count,): (i64,) = sqlx::query_as(
"SELECT COUNT(*) FROM upload WHERE event_id = $1 AND deleted_at IS NULL",
)
.bind(event.id)
.fetch_one(&state.pool)
.await?;
let (comment_count,): (i64,) = sqlx::query_as(
"SELECT COUNT(*) FROM comment c
JOIN upload u ON u.id = c.upload_id
WHERE u.event_id = $1 AND c.deleted_at IS NULL",
)
.bind(event.id)
.fetch_one(&state.pool)
.await?;
// Disk usage via sysinfo
let mut sys = System::new();
sys.refresh_all();
let media_path = state.config.media_path.to_string_lossy().to_string();
let (disk_total, disk_free) = sysinfo::Disks::new_with_refreshed_list()
.iter()
.find(|d| media_path.starts_with(d.mount_point().to_string_lossy().as_ref()))
.map(|d| (d.total_space(), d.available_space()))
.unwrap_or_else(|| {
// Fall back to the root disk
sysinfo::Disks::new_with_refreshed_list()
.iter()
.find(|d| d.mount_point().to_string_lossy() == "/")
.map(|d| (d.total_space(), d.available_space()))
.unwrap_or((0, 0))
});
let disk_used = disk_total.saturating_sub(disk_free);
Ok(Json(StatsDto {
user_count,
upload_count,
comment_count,
disk_total_bytes: disk_total,
disk_used_bytes: disk_used,
disk_free_bytes: disk_free,
}))
}
pub async fn get_config(
State(state): State<AppState>,
RequireAdmin(_auth): RequireAdmin,
) -> Result<Json<HashMap<String, String>>, AppError> {
let rows: Vec<(String, String)> =
sqlx::query_as("SELECT key, value FROM config ORDER BY key")
.fetch_all(&state.pool)
.await?;
Ok(Json(rows.into_iter().collect()))
}
#[derive(Deserialize)]
pub struct PatchConfigRequest(pub HashMap<String, String>);
pub async fn patch_config(
State(state): State<AppState>,
RequireAdmin(_auth): RequireAdmin,
Json(body): Json<HashMap<String, String>>,
) -> Result<StatusCode, AppError> {
const ALLOWED_KEYS: &[&str] = &[
"max_image_size_mb",
"max_video_size_mb",
"upload_rate_per_hour",
"feed_rate_per_min",
"export_rate_per_day",
"quota_tolerance",
"estimated_guest_count",
"compression_concurrency",
];
for (key, value) in &body {
if !ALLOWED_KEYS.contains(&key.as_str()) {
return Err(AppError::BadRequest(format!("Unbekannter Konfigurationsschlüssel: {key}")));
}
// Validate numeric values
if value.parse::<f64>().is_err() {
return Err(AppError::BadRequest(format!("Ungültiger Wert für {key}: muss eine Zahl sein.")));
}
sqlx::query(
"INSERT INTO config (key, value, updated_at) VALUES ($1, $2, NOW())
ON CONFLICT (key) DO UPDATE SET value = EXCLUDED.value, updated_at = NOW()",
)
.bind(key)
.bind(value)
.execute(&state.pool)
.await?;
}
Ok(StatusCode::NO_CONTENT)
}
pub async fn get_export_jobs(
State(state): State<AppState>,
RequireAdmin(_auth): RequireAdmin,
) -> Result<Json<Vec<ExportJobDto>>, AppError> {
let event = crate::models::event::Event::find_by_slug(&state.pool, &state.config.event_slug)
.await?
.ok_or_else(|| AppError::NotFound("Event nicht gefunden.".into()))?;
let jobs = sqlx::query_as::<_, ExportJobDto>(
"SELECT id, type::text, status::text, progress_pct, error_message, created_at, completed_at
FROM export_job
WHERE event_id = $1
ORDER BY created_at DESC",
)
.bind(event.id)
.fetch_all(&state.pool)
.await?;
Ok(Json(jobs))
}
/// Also expose export status to all authenticated users (guests need it for the export page)
pub async fn export_status(
State(state): State<AppState>,
_auth: crate::auth::middleware::AuthUser,
) -> Result<Json<serde_json::Value>, AppError> {
let event = crate::models::event::Event::find_by_slug(&state.pool, &state.config.event_slug)
.await?
.ok_or_else(|| AppError::NotFound("Event nicht gefunden.".into()))?;
let released = event.export_released_at.is_some();
let jobs: Vec<(String, String, i16)> = sqlx::query_as(
"SELECT type::text, status::text, progress_pct FROM export_job WHERE event_id = $1",
)
.bind(event.id)
.fetch_all(&state.pool)
.await?;
let job_status = |type_name: &str| {
jobs.iter()
.find(|(t, _, _)| t == type_name)
.map(|(_, status, pct)| {
serde_json::json!({ "status": status, "progress_pct": pct })
})
.unwrap_or_else(|| serde_json::json!({ "status": "locked", "progress_pct": 0 }))
};
Ok(Json(serde_json::json!({
"released": released,
"zip": job_status("zip"),
"html": job_status("html"),
})))
}

View File

@@ -0,0 +1,260 @@
use axum::extract::{Path, State};
use axum::http::StatusCode;
use axum::Json;
use chrono::{DateTime, Utc};
use serde::{Deserialize, Serialize};
use uuid::Uuid;
use crate::auth::middleware::RequireHost;
use crate::error::AppError;
use crate::models::comment::Comment;
use crate::models::event::Event;
use crate::models::upload::Upload;
use crate::state::AppState;
// ── DTOs ─────────────────────────────────────────────────────────────────────
#[derive(Serialize, sqlx::FromRow)]
pub struct UserSummary {
pub id: Uuid,
pub display_name: String,
pub role: String,
pub is_banned: bool,
pub uploads_hidden: bool,
pub upload_count: i64,
pub total_upload_bytes: i64,
pub created_at: DateTime<Utc>,
}
#[derive(Serialize)]
pub struct EventStatus {
pub name: String,
pub is_active: bool,
pub uploads_locked: bool,
pub export_released: bool,
}
#[derive(Deserialize)]
pub struct BanRequest {
pub hide_uploads: bool,
}
#[derive(Deserialize)]
pub struct SetRoleRequest {
pub role: String,
}
// ── Handlers ─────────────────────────────────────────────────────────────────
pub async fn get_event_status(
State(state): State<AppState>,
RequireHost(_auth): RequireHost,
) -> Result<Json<EventStatus>, AppError> {
let event = Event::find_by_slug(&state.pool, &state.config.event_slug)
.await?
.ok_or_else(|| AppError::NotFound("Event nicht gefunden.".into()))?;
Ok(Json(EventStatus {
name: event.name,
is_active: event.is_active,
uploads_locked: event.uploads_locked_at.is_some(),
export_released: event.export_released_at.is_some(),
}))
}
pub async fn list_users(
State(state): State<AppState>,
RequireHost(auth): RequireHost,
) -> Result<Json<Vec<UserSummary>>, AppError> {
let rows = sqlx::query_as::<_, UserSummary>(
"SELECT u.id,
u.display_name,
u.role::text AS role,
u.is_banned,
u.uploads_hidden,
COALESCE(COUNT(up.id), 0) AS upload_count,
u.total_upload_bytes,
u.created_at
FROM \"user\" u
LEFT JOIN upload up ON up.user_id = u.id AND up.deleted_at IS NULL
WHERE u.event_id = $1
GROUP BY u.id
ORDER BY u.created_at ASC",
)
.bind(auth.event_id)
.fetch_all(&state.pool)
.await?;
Ok(Json(rows))
}
pub async fn ban_user(
State(state): State<AppState>,
RequireHost(auth): RequireHost,
Path(user_id): Path<Uuid>,
Json(body): Json<BanRequest>,
) -> Result<StatusCode, AppError> {
// Cannot ban yourself or another host/admin
if user_id == auth.user_id {
return Err(AppError::BadRequest("Du kannst dich nicht selbst sperren.".into()));
}
let target = sqlx::query_as::<_, (String,)>(
"SELECT role::text FROM \"user\" WHERE id = $1 AND event_id = $2",
)
.bind(user_id)
.bind(auth.event_id)
.fetch_optional(&state.pool)
.await?
.ok_or_else(|| AppError::NotFound("Benutzer nicht gefunden.".into()))?;
if target.0 == "admin" || (target.0 == "host" && auth.role != crate::models::user::UserRole::Admin) {
return Err(AppError::Forbidden("Du kannst diesen Benutzer nicht sperren.".into()));
}
sqlx::query(
"UPDATE \"user\" SET is_banned = TRUE, uploads_hidden = $2 WHERE id = $1",
)
.bind(user_id)
.bind(body.hide_uploads)
.execute(&state.pool)
.await?;
Ok(StatusCode::NO_CONTENT)
}
pub async fn unban_user(
State(state): State<AppState>,
RequireHost(_auth): RequireHost,
Path(user_id): Path<Uuid>,
) -> Result<StatusCode, AppError> {
sqlx::query("UPDATE \"user\" SET is_banned = FALSE WHERE id = $1")
.bind(user_id)
.execute(&state.pool)
.await?;
Ok(StatusCode::NO_CONTENT)
}
pub async fn set_role(
State(state): State<AppState>,
RequireHost(auth): RequireHost,
Path(user_id): Path<Uuid>,
Json(body): Json<SetRoleRequest>,
) -> Result<StatusCode, AppError> {
if user_id == auth.user_id {
return Err(AppError::BadRequest("Du kannst deine eigene Rolle nicht ändern.".into()));
}
let new_role = match body.role.as_str() {
"guest" => "guest",
"host" => "host",
_ => return Err(AppError::BadRequest("Ungültige Rolle. Erlaubt: guest, host.".into())),
};
sqlx::query("UPDATE \"user\" SET role = $2::user_role WHERE id = $1 AND event_id = $3")
.bind(user_id)
.bind(new_role)
.bind(auth.event_id)
.execute(&state.pool)
.await?;
Ok(StatusCode::NO_CONTENT)
}
pub async fn host_delete_upload(
State(state): State<AppState>,
RequireHost(_auth): RequireHost,
Path(upload_id): Path<Uuid>,
) -> Result<StatusCode, AppError> {
let upload = Upload::find_by_id(&state.pool, upload_id)
.await?
.ok_or_else(|| AppError::NotFound("Upload nicht gefunden.".into()))?;
Upload::soft_delete(&state.pool, upload_id).await?;
let _ = state.sse_tx.send(crate::state::SseEvent {
event_type: "upload-deleted".to_string(),
data: serde_json::json!({ "upload_id": upload.id }).to_string(),
});
Ok(StatusCode::NO_CONTENT)
}
pub async fn host_delete_comment(
State(state): State<AppState>,
RequireHost(_auth): RequireHost,
Path(comment_id): Path<Uuid>,
) -> Result<StatusCode, AppError> {
Comment::find_by_id(&state.pool, comment_id)
.await?
.ok_or_else(|| AppError::NotFound("Kommentar nicht gefunden.".into()))?;
Comment::soft_delete(&state.pool, comment_id).await?;
Ok(StatusCode::NO_CONTENT)
}
pub async fn close_event(
State(state): State<AppState>,
RequireHost(_auth): RequireHost,
) -> Result<StatusCode, AppError> {
sqlx::query(
"UPDATE event SET uploads_locked_at = NOW() WHERE slug = $1 AND uploads_locked_at IS NULL",
)
.bind(&state.config.event_slug)
.execute(&state.pool)
.await?;
let _ = state.sse_tx.send(crate::state::SseEvent {
event_type: "event-closed".to_string(),
data: "{}".to_string(),
});
Ok(StatusCode::NO_CONTENT)
}
pub async fn open_event(
State(state): State<AppState>,
RequireHost(_auth): RequireHost,
) -> Result<StatusCode, AppError> {
sqlx::query(
"UPDATE event SET uploads_locked_at = NULL WHERE slug = $1",
)
.bind(&state.config.event_slug)
.execute(&state.pool)
.await?;
let _ = state.sse_tx.send(crate::state::SseEvent {
event_type: "event-opened".to_string(),
data: "{}".to_string(),
});
Ok(StatusCode::NO_CONTENT)
}
pub async fn release_gallery(
State(state): State<AppState>,
RequireHost(_auth): RequireHost,
) -> Result<StatusCode, AppError> {
let event = Event::find_by_slug(&state.pool, &state.config.event_slug)
.await?
.ok_or_else(|| AppError::NotFound("Event nicht gefunden.".into()))?;
if event.export_released_at.is_some() {
return Err(AppError::BadRequest("Galerie wurde bereits freigegeben.".into()));
}
sqlx::query("UPDATE event SET export_released_at = NOW() WHERE slug = $1")
.bind(&state.config.event_slug)
.execute(&state.pool)
.await?;
// Enqueue export jobs (processed by the export worker in a later step)
for export_type in ["zip", "html"] {
sqlx::query(
"INSERT INTO export_job (event_id, type) VALUES ($1, $2::export_type)
ON CONFLICT (event_id, type) DO NOTHING",
)
.bind(event.id)
.bind(export_type)
.execute(&state.pool)
.await?;
}
Ok(StatusCode::NO_CONTENT)
}

View File

@@ -1,4 +1,6 @@
pub mod admin;
pub mod feed; pub mod feed;
pub mod host;
pub mod social; pub mod social;
pub mod sse; pub mod sse;
pub mod upload; pub mod upload;

View File

@@ -58,7 +58,27 @@ async fn main() -> Result<()> {
) )
.route("/api/v1/comment/{id}", delete(handlers::social::delete_comment)) .route("/api/v1/comment/{id}", delete(handlers::social::delete_comment))
// SSE // SSE
.route("/api/v1/stream", get(handlers::sse::stream)); .route("/api/v1/stream", get(handlers::sse::stream))
// Host Dashboard
.route("/api/v1/host/event", get(handlers::host::get_event_status))
.route("/api/v1/host/event/close", post(handlers::host::close_event))
.route("/api/v1/host/event/open", post(handlers::host::open_event))
.route("/api/v1/host/gallery/release", post(handlers::host::release_gallery))
.route("/api/v1/host/users", get(handlers::host::list_users))
.route("/api/v1/host/users/{id}/ban", post(handlers::host::ban_user))
.route("/api/v1/host/users/{id}/unban", post(handlers::host::unban_user))
.route("/api/v1/host/users/{id}/role", patch(handlers::host::set_role))
.route("/api/v1/host/upload/{id}", delete(handlers::host::host_delete_upload))
.route("/api/v1/host/comment/{id}", delete(handlers::host::host_delete_comment))
// Export status (all authenticated users)
.route("/api/v1/export/status", get(handlers::admin::export_status))
// Admin Dashboard
.route("/api/v1/admin/stats", get(handlers::admin::get_stats))
.route(
"/api/v1/admin/config",
get(handlers::admin::get_config).patch(handlers::admin::patch_config),
)
.route("/api/v1/admin/export/jobs", get(handlers::admin::get_export_jobs));
// Serve media files from disk // Serve media files from disk
let media_service = ServeDir::new(&config.media_path); let media_service = ServeDir::new(&config.media_path);

View File

@@ -38,6 +38,17 @@ export function clearAuth(): void {
isAuthenticated.set(false); isAuthenticated.set(false);
} }
export function getRole(): 'guest' | 'host' | 'admin' | null {
const token = getToken();
if (!token) return null;
try {
const payload = JSON.parse(atob(token.split('.')[1]));
return payload.role ?? null;
} catch {
return null;
}
}
export function initAuth(): void { export function initAuth(): void {
if (!browser) return; if (!browser) return;
isAuthenticated.set(!!getToken()); isAuthenticated.set(!!getToken());

View File

@@ -0,0 +1,266 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { getToken, getRole } from '$lib/auth';
import { api } from '$lib/api';
import { onMount } from 'svelte';
interface StatsDto {
user_count: number;
upload_count: number;
comment_count: number;
disk_total_bytes: number;
disk_used_bytes: number;
disk_free_bytes: number;
}
interface ExportJob {
id: string;
type: string;
status: string;
progress_pct: number;
error_message: string | null;
created_at: string;
completed_at: string | null;
}
const CONFIG_LABELS: Record<string, string> = {
max_image_size_mb: 'Max. Bildgröße (MB)',
max_video_size_mb: 'Max. Videogröße (MB)',
upload_rate_per_hour: 'Upload-Limit pro Stunde',
feed_rate_per_min: 'Feed-Anfragen pro Minute',
export_rate_per_day: 'Export-Downloads pro Tag',
quota_tolerance: 'Speicherkontingent-Toleranz (01)',
estimated_guest_count: 'Geschätzte Gästezahl',
compression_concurrency: 'Kompressions-Worker'
};
let stats = $state<StatsDto | null>(null);
let config = $state<Record<string, string>>({});
let configDraft = $state<Record<string, string>>({});
let exportJobs = $state<ExportJob[]>([]);
let loading = $state(true);
let saving = $state(false);
let error = $state<string | null>(null);
let toast = $state<string | null>(null);
onMount(async () => {
const token = getToken();
const role = getRole();
if (!token || role !== 'admin') {
goto('/join');
return;
}
await reload();
});
async function reload() {
loading = true;
error = null;
try {
[stats, config, exportJobs] = await Promise.all([
api.get<StatsDto>('/admin/stats'),
api.get<Record<string, string>>('/admin/config'),
api.get<ExportJob[]>('/admin/export/jobs')
]);
configDraft = { ...config };
} catch (e: unknown) {
error = e instanceof Error ? e.message : 'Fehler beim Laden.';
} finally {
loading = false;
}
}
function showToast(msg: string) {
toast = msg;
setTimeout(() => (toast = null), 3000);
}
async function saveConfig() {
saving = true;
try {
// Only send changed values
const changes: Record<string, string> = {};
for (const key of Object.keys(configDraft)) {
if (configDraft[key] !== config[key]) {
changes[key] = configDraft[key];
}
}
if (Object.keys(changes).length === 0) {
showToast('Keine Änderungen.');
return;
}
await api.patch('/admin/config', changes);
config = { ...configDraft };
showToast('Konfiguration gespeichert.');
} catch (e: unknown) {
showToast(e instanceof Error ? e.message : 'Fehler beim Speichern.');
} finally {
saving = false;
}
}
function formatBytes(bytes: number): string {
if (bytes >= 1024 ** 3) return `${(bytes / 1024 ** 3).toFixed(1)} GB`;
if (bytes >= 1024 ** 2) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
return `${(bytes / 1024).toFixed(1)} KB`;
}
function diskPct(stats: StatsDto): number {
if (stats.disk_total_bytes === 0) return 0;
return Math.round((stats.disk_used_bytes / stats.disk_total_bytes) * 100);
}
function jobLabel(type: string): string {
return type === 'zip' ? 'ZIP-Archiv' : 'HTML-Viewer';
}
function statusBadgeClass(status: string): string {
switch (status) {
case 'done': return 'bg-green-100 text-green-700';
case 'running': return 'bg-blue-100 text-blue-700';
case 'failed': return 'bg-red-100 text-red-700';
default: return 'bg-gray-100 text-gray-600';
}
}
function statusLabel(status: string): string {
switch (status) {
case 'pending': return 'Ausstehend';
case 'running': return 'Läuft';
case 'done': return 'Fertig';
case 'failed': return 'Fehlgeschlagen';
default: return status;
}
}
</script>
<!-- Toast -->
{#if toast}
<div class="fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg">
{toast}
</div>
{/if}
<div class="min-h-screen bg-gray-50">
<!-- Header -->
<div class="border-b border-gray-200 bg-white">
<div class="mx-auto flex max-w-3xl items-center justify-between px-4 py-4">
<h1 class="text-xl font-bold text-gray-900">Admin Dashboard</h1>
<div class="flex items-center gap-3">
<a href="/host" class="text-sm text-blue-600 hover:underline">Host-Dashboard</a>
<a href="/feed" class="text-sm text-gray-500 hover:text-gray-700">Galerie</a>
</div>
</div>
</div>
<div class="mx-auto max-w-3xl space-y-4 p-4">
{#if loading}
<div class="py-16 text-center text-gray-400">Laden…</div>
{:else if error}
<div class="rounded-lg bg-red-50 p-4 text-sm text-red-700">{error}</div>
{:else}
<!-- Stats -->
{#if stats}
<div class="rounded-xl border border-gray-200 bg-white p-5">
<h2 class="mb-4 font-semibold text-gray-900">Statistiken</h2>
<div class="grid grid-cols-3 gap-4 text-center">
<div class="rounded-lg bg-gray-50 p-3">
<p class="text-2xl font-bold text-gray-900">{stats.user_count}</p>
<p class="text-xs text-gray-500">Gäste</p>
</div>
<div class="rounded-lg bg-gray-50 p-3">
<p class="text-2xl font-bold text-gray-900">{stats.upload_count}</p>
<p class="text-xs text-gray-500">Uploads</p>
</div>
<div class="rounded-lg bg-gray-50 p-3">
<p class="text-2xl font-bold text-gray-900">{stats.comment_count}</p>
<p class="text-xs text-gray-500">Kommentare</p>
</div>
</div>
<!-- Disk usage -->
<div class="mt-4">
<div class="mb-1 flex items-center justify-between text-xs text-gray-500">
<span>Speicher</span>
<span>{formatBytes(stats.disk_used_bytes)} / {formatBytes(stats.disk_total_bytes)} ({diskPct(stats)} %)</span>
</div>
<div class="h-2 overflow-hidden rounded-full bg-gray-200">
<div
class="h-full rounded-full transition-all {diskPct(stats) >= 90 ? 'bg-red-500' : diskPct(stats) >= 75 ? 'bg-amber-500' : 'bg-blue-500'}"
style="width: {diskPct(stats)}%"
></div>
</div>
<p class="mt-1 text-xs text-gray-400">{formatBytes(stats.disk_free_bytes)} frei</p>
</div>
</div>
{/if}
<!-- Config -->
<div class="rounded-xl border border-gray-200 bg-white p-5">
<h2 class="mb-4 font-semibold text-gray-900">Konfiguration</h2>
<div class="space-y-3">
{#each Object.entries(CONFIG_LABELS) as [key, label]}
<div class="flex items-center gap-3">
<label for={key} class="w-56 shrink-0 text-sm text-gray-700">{label}</label>
<input
id={key}
type="number"
step="any"
bind:value={configDraft[key]}
class="w-32 rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200"
/>
</div>
{/each}
</div>
<button
onclick={saveConfig}
disabled={saving}
class="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
>
{saving ? 'Wird gespeichert…' : 'Speichern'}
</button>
</div>
<!-- Export jobs -->
<div class="rounded-xl border border-gray-200 bg-white p-5">
<div class="mb-4 flex items-center justify-between">
<h2 class="font-semibold text-gray-900">Export-Jobs</h2>
<button onclick={reload} class="text-xs text-blue-600 hover:underline">Aktualisieren</button>
</div>
{#if exportJobs.length === 0}
<p class="text-sm text-gray-400">Noch keine Export-Jobs.</p>
{:else}
<div class="space-y-3">
{#each exportJobs as job}
<div class="rounded-lg border border-gray-100 p-3">
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-gray-900">{jobLabel(job.type)}</span>
<span class="rounded-full px-2 py-0.5 text-xs font-medium {statusBadgeClass(job.status)}">
{statusLabel(job.status)}
</span>
</div>
{#if job.status === 'running'}
<div class="mt-2">
<div class="mb-1 flex justify-between text-xs text-gray-500">
<span>Fortschritt</span>
<span>{job.progress_pct} %</span>
</div>
<div class="h-1.5 overflow-hidden rounded-full bg-gray-200">
<div
class="h-full rounded-full bg-blue-500 transition-all"
style="width: {job.progress_pct}%"
></div>
</div>
</div>
{/if}
{#if job.error_message}
<p class="mt-1 text-xs text-red-600">{job.error_message}</p>
{/if}
</div>
{/each}
</div>
{/if}
</div>
{/if}
</div>
</div>

View File

@@ -0,0 +1,318 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { getToken, getRole } from '$lib/auth';
import { api } from '$lib/api';
import { onMount } from 'svelte';
interface UserSummary {
id: string;
display_name: string;
role: string;
is_banned: boolean;
uploads_hidden: boolean;
upload_count: number;
total_upload_bytes: number;
created_at: string;
}
interface EventStatus {
name: string;
is_active: boolean;
uploads_locked: boolean;
export_released: boolean;
}
let event = $state<EventStatus | null>(null);
let users = $state<UserSummary[]>([]);
let loading = $state(true);
let error = $state<string | null>(null);
// Ban modal state
let banTarget = $state<UserSummary | null>(null);
let banHideUploads = $state(false);
let banSubmitting = $state(false);
// Toast state
let toast = $state<string | null>(null);
onMount(async () => {
const token = getToken();
const role = getRole();
if (!token || (role !== 'host' && role !== 'admin')) {
goto('/join');
return;
}
await reload();
});
async function reload() {
loading = true;
error = null;
try {
[event, users] = await Promise.all([
api.get<EventStatus>('/host/event'),
api.get<UserSummary[]>('/host/users')
]);
} catch (e: unknown) {
error = e instanceof Error ? e.message : 'Fehler beim Laden.';
} finally {
loading = false;
}
}
function showToast(msg: string) {
toast = msg;
setTimeout(() => (toast = null), 3000);
}
async function toggleEventLock() {
if (!event) return;
try {
if (event.uploads_locked) {
await api.post('/host/event/open');
showToast('Uploads wurden wieder geöffnet.');
} else {
await api.post('/host/event/close');
showToast('Uploads wurden gesperrt.');
}
await reload();
} catch (e: unknown) {
showToast(e instanceof Error ? e.message : 'Fehler.');
}
}
async function releaseGallery() {
try {
await api.post('/host/gallery/release');
showToast('Galerie wurde freigegeben. Export wird vorbereitet…');
await reload();
} catch (e: unknown) {
showToast(e instanceof Error ? e.message : 'Fehler.');
}
}
function openBanModal(user: UserSummary) {
banTarget = user;
banHideUploads = false;
}
async function confirmBan() {
if (!banTarget) return;
banSubmitting = true;
try {
await api.post(`/host/users/${banTarget.id}/ban`, { hide_uploads: banHideUploads });
showToast(`${banTarget.display_name} wurde gesperrt.`);
banTarget = null;
await reload();
} catch (e: unknown) {
showToast(e instanceof Error ? e.message : 'Fehler.');
} finally {
banSubmitting = false;
}
}
async function unban(user: UserSummary) {
try {
await api.post(`/host/users/${user.id}/unban`);
showToast(`Sperre für ${user.display_name} aufgehoben.`);
await reload();
} catch (e: unknown) {
showToast(e instanceof Error ? e.message : 'Fehler.');
}
}
async function promoteToHost(user: UserSummary) {
try {
await api.patch(`/host/users/${user.id}/role`, { role: 'host' });
showToast(`${user.display_name} ist jetzt Host.`);
await reload();
} catch (e: unknown) {
showToast(e instanceof Error ? e.message : 'Fehler.');
}
}
async function demoteToGuest(user: UserSummary) {
try {
await api.patch(`/host/users/${user.id}/role`, { role: 'guest' });
showToast(`${user.display_name} ist jetzt Gast.`);
await reload();
} catch (e: unknown) {
showToast(e instanceof Error ? e.message : 'Fehler.');
}
}
function formatBytes(bytes: number): string {
if (bytes < 1024) return `${bytes} B`;
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}
const myRole = getRole();
</script>
<!-- Ban modal -->
{#if banTarget}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl">
<h2 class="mb-1 text-lg font-bold text-gray-900">Benutzer sperren</h2>
<p class="mb-4 text-sm text-gray-600">
Was soll mit den Uploads von <strong>{banTarget.display_name}</strong> passieren?
</p>
<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3">
<input
type="checkbox"
bind:checked={banHideUploads}
class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500"
/>
<span class="text-sm text-gray-700">Uploads aus der Galerie ausblenden</span>
</label>
<div class="flex gap-2">
<button
onclick={() => (banTarget = null)}
class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50"
>
Abbrechen
</button>
<button
onclick={confirmBan}
disabled={banSubmitting}
class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50"
>
{banSubmitting ? 'Wird gesperrt…' : 'Sperren'}
</button>
</div>
</div>
</div>
{/if}
<!-- Toast -->
{#if toast}
<div class="fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg">
{toast}
</div>
{/if}
<div class="min-h-screen bg-gray-50">
<!-- Header -->
<div class="border-b border-gray-200 bg-white">
<div class="mx-auto flex max-w-3xl items-center justify-between px-4 py-4">
<div>
<h1 class="text-xl font-bold text-gray-900">Host Dashboard</h1>
{#if event}
<p class="text-sm text-gray-500">{event.name}</p>
{/if}
</div>
<a href="/feed" class="text-sm text-blue-600 hover:underline">Zur Galerie</a>
</div>
</div>
<div class="mx-auto max-w-3xl space-y-4 p-4">
{#if loading}
<div class="py-16 text-center text-gray-400">Laden…</div>
{:else if error}
<div class="rounded-lg bg-red-50 p-4 text-sm text-red-700">{error}</div>
{:else if event}
<!-- Event controls -->
<div class="rounded-xl border border-gray-200 bg-white p-5">
<h2 class="mb-4 font-semibold text-gray-900">Veranstaltung</h2>
<div class="flex flex-wrap gap-3">
<button
onclick={toggleEventLock}
class="rounded-lg px-4 py-2 text-sm font-medium {event.uploads_locked
? 'bg-green-600 text-white hover:bg-green-700'
: 'bg-amber-500 text-white hover:bg-amber-600'}"
>
{event.uploads_locked ? 'Uploads wieder öffnen' : 'Uploads sperren'}
</button>
<button
onclick={releaseGallery}
disabled={event.export_released}
class="rounded-lg px-4 py-2 text-sm font-medium {event.export_released
? 'cursor-default bg-gray-100 text-gray-400'
: 'bg-blue-600 text-white hover:bg-blue-700'}"
>
{event.export_released ? 'Galerie bereits freigegeben' : 'Galerie freigeben'}
</button>
</div>
<div class="mt-3 flex gap-4 text-xs text-gray-500">
<span class="flex items-center gap-1">
<span class="h-2 w-2 rounded-full {event.uploads_locked ? 'bg-red-500' : 'bg-green-500'}"></span>
Uploads {event.uploads_locked ? 'gesperrt' : 'offen'}
</span>
<span class="flex items-center gap-1">
<span class="h-2 w-2 rounded-full {event.export_released ? 'bg-blue-500' : 'bg-gray-300'}"></span>
Export {event.export_released ? 'freigegeben' : 'gesperrt'}
</span>
</div>
</div>
<!-- User management -->
<div class="rounded-xl border border-gray-200 bg-white">
<div class="border-b border-gray-100 px-5 py-4">
<h2 class="font-semibold text-gray-900">Gäste ({users.length})</h2>
</div>
{#if users.length === 0}
<p class="px-5 py-8 text-center text-sm text-gray-400">Noch keine Gäste.</p>
{:else}
<div class="divide-y divide-gray-100">
{#each users as user}
<div class="flex items-center gap-3 px-5 py-3">
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2">
<span class="truncate font-medium text-gray-900">{user.display_name}</span>
{#if user.role === 'host'}
<span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">Host</span>
{:else if user.role === 'admin'}
<span class="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700">Admin</span>
{/if}
{#if user.is_banned}
<span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700">Gesperrt</span>
{/if}
</div>
<p class="text-xs text-gray-400">
{user.upload_count} Upload{user.upload_count !== 1 ? 's' : ''} · {formatBytes(user.total_upload_bytes)}
</p>
</div>
<div class="flex shrink-0 gap-1.5">
{#if user.role !== 'admin'}
{#if user.is_banned}
<button
onclick={() => unban(user)}
class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200"
>
Entsperren
</button>
{:else}
{#if user.role === 'guest' && (myRole === 'host' || myRole === 'admin')}
<button
onclick={() => promoteToHost(user)}
class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100"
>
Host
</button>
{/if}
{#if user.role === 'host' && myRole === 'admin'}
<button
onclick={() => demoteToGuest(user)}
class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200"
>
Degradieren
</button>
{/if}
<button
onclick={() => openBanModal(user)}
class="rounded-lg bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-100"
>
Sperren
</button>
{/if}
{/if}
</div>
</div>
{/each}
</div>
{/if}
</div>
{/if}
</div>
</div>