fixed like action, better dark mode, bottom navigation working, added taskcollection
This commit is contained in:
@@ -13,6 +13,14 @@ use App\Support\ImageHelper;
|
||||
|
||||
class EventPublicController extends BaseController
|
||||
{
|
||||
private function getLocalized($value, $locale, $default = '') {
|
||||
if (is_string($value) && json_decode($value) !== null) {
|
||||
$data = json_decode($value, true);
|
||||
return $data[$locale] ?? $data['de'] ?? $default;
|
||||
}
|
||||
return $value ?: $default;
|
||||
}
|
||||
|
||||
private function toPublicUrl(?string $path): ?string
|
||||
{
|
||||
if (! $path) return null;
|
||||
@@ -46,13 +54,35 @@ class EventPublicController extends BaseController
|
||||
return response()->json(['error' => ['code' => 'not_found', 'message' => 'Event not found']], 404);
|
||||
}
|
||||
|
||||
$locale = request()->query('locale', 'de');
|
||||
$nameData = json_decode($event->name, true);
|
||||
$localizedName = $nameData[$locale] ?? $nameData['de'] ?? $event->name;
|
||||
|
||||
// Get event type for icon
|
||||
$eventType = DB::table('events')
|
||||
->join('event_types', 'events.event_type_id', '=', 'event_types.id')
|
||||
->where('events.id', $event->id)
|
||||
->first(['event_types.slug as type_slug', 'event_types.name as type_name']);
|
||||
|
||||
$locale = request()->query('locale', 'de');
|
||||
$eventTypeData = $eventType ? [
|
||||
'slug' => $eventType->type_slug,
|
||||
'name' => $this->getLocalized($eventType->type_name, $locale, 'Event'),
|
||||
'icon' => $eventType->type_slug === 'wedding' ? '❤️' : '👥'
|
||||
] : [
|
||||
'slug' => 'general',
|
||||
'name' => $this->getLocalized('Event', $locale, 'Event'),
|
||||
'icon' => '👥'
|
||||
];
|
||||
|
||||
return response()->json([
|
||||
'id' => $event->id,
|
||||
'slug' => $event->slug,
|
||||
'name' => $event->name,
|
||||
'name' => $localizedName,
|
||||
'default_locale' => $event->default_locale,
|
||||
'created_at' => $event->created_at,
|
||||
'updated_at' => $event->updated_at,
|
||||
'type' => $eventTypeData,
|
||||
])->header('Cache-Control', 'no-store');
|
||||
}
|
||||
|
||||
@@ -95,6 +125,139 @@ class EventPublicController extends BaseController
|
||||
->header('ETag', $etag);
|
||||
}
|
||||
|
||||
public function emotions(string $slug)
|
||||
{
|
||||
$event = DB::table('events')->where('slug', $slug)->first(['id']);
|
||||
if (! $event) {
|
||||
return response()->json(['error' => ['code' => 'not_found', 'message' => 'Event not found']], 404);
|
||||
}
|
||||
|
||||
$rows = DB::table('emotions')
|
||||
->join('emotion_event_type', 'emotions.id', '=', 'emotion_event_type.emotion_id')
|
||||
->join('event_types', 'emotion_event_type.event_type_id', '=', 'event_types.id')
|
||||
->join('events', 'events.event_type_id', '=', 'event_types.id')
|
||||
->where('events.id', $event->id)
|
||||
->select([
|
||||
'emotions.id',
|
||||
'emotions.name',
|
||||
'emotions.icon as emoji',
|
||||
'emotions.description'
|
||||
])
|
||||
->orderBy('emotions.sort_order')
|
||||
->get();
|
||||
|
||||
$payload = $rows->map(function ($r) {
|
||||
$locale = request()->query('locale', 'de');
|
||||
$nameData = json_decode($r->name, true);
|
||||
$name = $nameData[$locale] ?? $nameData['de'] ?? $r->name;
|
||||
|
||||
$descriptionData = json_decode($r->description, true);
|
||||
$description = $descriptionData ? ($descriptionData[$locale] ?? $descriptionData['de'] ?? '') : '';
|
||||
|
||||
return [
|
||||
'id' => (int) $r->id,
|
||||
'slug' => 'emotion-' . $r->id, // Generate slug from ID
|
||||
'name' => $name,
|
||||
'emoji' => $r->emoji,
|
||||
'description' => $description,
|
||||
];
|
||||
});
|
||||
|
||||
$etag = sha1($payload->toJson());
|
||||
$reqEtag = request()->headers->get('If-None-Match');
|
||||
if ($reqEtag && $reqEtag === $etag) {
|
||||
return response('', 304);
|
||||
}
|
||||
|
||||
return response()->json($payload)
|
||||
->header('Cache-Control', 'public, max-age=300')
|
||||
->header('ETag', $etag);
|
||||
}
|
||||
|
||||
public function tasks(string $slug, Request $request)
|
||||
{
|
||||
$event = DB::table('events')->where('slug', $slug)->first(['id']);
|
||||
if (! $event) {
|
||||
return response()->json(['error' => ['code' => 'not_found', 'message' => 'Event not found']], 404);
|
||||
}
|
||||
|
||||
$query = DB::table('tasks')
|
||||
->join('task_collection_task', 'tasks.id', '=', 'task_collection_task.task_id')
|
||||
->join('event_task_collection', 'task_collection_task.task_collection_id', '=', 'event_task_collection.task_collection_id')
|
||||
->where('event_task_collection.event_id', $event->id)
|
||||
->select([
|
||||
'tasks.id',
|
||||
'tasks.title',
|
||||
'tasks.description',
|
||||
'tasks.example_text as instructions',
|
||||
'tasks.emotion_id',
|
||||
'tasks.sort_order'
|
||||
])
|
||||
->orderBy('event_task_collection.sort_order')
|
||||
->orderBy('tasks.sort_order')
|
||||
->limit(20);
|
||||
|
||||
$rows = $query->get();
|
||||
|
||||
$payload = $rows->map(function ($r) {
|
||||
// Handle JSON fields for multilingual content
|
||||
$getLocalized = function ($field, $default = '') use ($r) {
|
||||
$locale = request()->query('locale', 'de');
|
||||
$value = $r->$field;
|
||||
if (is_string($value) && json_decode($value) !== null) {
|
||||
$data = json_decode($value, true);
|
||||
return $data[$locale] ?? $data['de'] ?? $default;
|
||||
}
|
||||
return $value ?: $default;
|
||||
};
|
||||
|
||||
// Get emotion info if emotion_id exists
|
||||
$emotion = null;
|
||||
if ($r->emotion_id) {
|
||||
$emotionRow = DB::table('emotions')->where('id', $r->emotion_id)->first(['name']);
|
||||
if ($emotionRow && isset($emotionRow->name)) {
|
||||
$locale = request()->query('locale', 'de');
|
||||
$value = $emotionRow->name;
|
||||
if (is_string($value) && json_decode($value) !== null) {
|
||||
$data = json_decode($value, true);
|
||||
$emotionName = $data[$locale] ?? $data['de'] ?? 'Unbekannte Emotion';
|
||||
} else {
|
||||
$emotionName = $value ?: 'Unbekannte Emotion';
|
||||
}
|
||||
$emotion = [
|
||||
'slug' => 'emotion-' . $r->emotion_id, // Generate slug from ID
|
||||
'name' => $emotionName,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
return [
|
||||
'id' => (int) $r->id,
|
||||
'title' => $getLocalized('title', 'Unbenannte Aufgabe'),
|
||||
'description' => $getLocalized('description', ''),
|
||||
'instructions' => $getLocalized('instructions', ''),
|
||||
'duration' => 3, // Default 3 minutes (no duration field in DB)
|
||||
'is_completed' => false, // Default false (no is_completed field in DB)
|
||||
'emotion' => $emotion,
|
||||
];
|
||||
});
|
||||
|
||||
// If no tasks found, return empty array instead of 404
|
||||
if ($payload->isEmpty()) {
|
||||
$payload = collect([]);
|
||||
}
|
||||
|
||||
$etag = sha1($payload->toJson());
|
||||
$reqEtag = request()->headers->get('If-None-Match');
|
||||
if ($reqEtag && $reqEtag === $etag) {
|
||||
return response('', 304);
|
||||
}
|
||||
|
||||
return response()->json($payload)
|
||||
->header('Cache-Control', 'public, max-age=300')
|
||||
->header('ETag', $etag);
|
||||
}
|
||||
|
||||
public function photos(Request $request, string $slug)
|
||||
{
|
||||
$event = DB::table('events')->where('slug', $slug)->first(['id']);
|
||||
@@ -103,20 +266,46 @@ class EventPublicController extends BaseController
|
||||
}
|
||||
$eventId = $event->id;
|
||||
|
||||
$deviceId = (string) $request->header('X-Device-Id', 'anon');
|
||||
$filter = $request->query('filter');
|
||||
|
||||
$since = $request->query('since');
|
||||
$query = DB::table('photos')
|
||||
->select(['id', 'file_path', 'thumbnail_path', 'likes_count', 'emotion_id', 'task_id', 'created_at'])
|
||||
->where('event_id', $eventId)
|
||||
->orderByDesc('created_at')
|
||||
->leftJoin('tasks', 'photos.task_id', '=', 'tasks.id')
|
||||
->select([
|
||||
'photos.id',
|
||||
'photos.file_path',
|
||||
'photos.thumbnail_path',
|
||||
'photos.likes_count',
|
||||
'photos.emotion_id',
|
||||
'photos.task_id',
|
||||
'photos.created_at',
|
||||
'photos.guest_name',
|
||||
'tasks.title as task_title'
|
||||
])
|
||||
->where('photos.event_id', $eventId)
|
||||
->orderByDesc('photos.created_at')
|
||||
->limit(60);
|
||||
|
||||
// MyPhotos filter
|
||||
if ($filter === 'myphotos' && $deviceId !== 'anon') {
|
||||
$query->where('guest_name', $deviceId);
|
||||
}
|
||||
|
||||
if ($since) {
|
||||
$query->where('created_at', '>', $since);
|
||||
}
|
||||
$locale = request()->query('locale', 'de');
|
||||
|
||||
$rows = $query->get()->map(function ($r) {
|
||||
$rows = $query->get()->map(function ($r) use ($locale) {
|
||||
$r->file_path = $this->toPublicUrl((string)($r->file_path ?? ''));
|
||||
$r->thumbnail_path = $this->toPublicUrl((string)($r->thumbnail_path ?? ''));
|
||||
|
||||
// Localize task title if present
|
||||
if ($r->task_title) {
|
||||
$r->task_title = $this->getLocalized($r->task_title, $locale, 'Unbenannte Aufgabe');
|
||||
}
|
||||
|
||||
return $r;
|
||||
});
|
||||
$latestPhotoAt = DB::table('photos')->where('event_id', $eventId)->max('created_at');
|
||||
@@ -124,7 +313,7 @@ class EventPublicController extends BaseController
|
||||
'data' => $rows,
|
||||
'latest_photo_at' => $latestPhotoAt,
|
||||
];
|
||||
$etag = sha1(json_encode([$since, $latestPhotoAt]));
|
||||
$etag = sha1(json_encode([$since, $filter, $deviceId, $latestPhotoAt]));
|
||||
$reqEtag = request()->headers->get('If-None-Match');
|
||||
if ($reqEtag && $reqEtag === $etag) {
|
||||
return response('', 304);
|
||||
@@ -138,14 +327,32 @@ class EventPublicController extends BaseController
|
||||
public function photo(int $id)
|
||||
{
|
||||
$row = DB::table('photos')
|
||||
->select(['id', 'event_id', 'file_path', 'thumbnail_path', 'likes_count', 'emotion_id', 'task_id', 'created_at'])
|
||||
->where('id', $id)
|
||||
->leftJoin('tasks', 'photos.task_id', '=', 'tasks.id')
|
||||
->select([
|
||||
'photos.id',
|
||||
'photos.event_id',
|
||||
'photos.file_path',
|
||||
'photos.thumbnail_path',
|
||||
'photos.likes_count',
|
||||
'photos.emotion_id',
|
||||
'photos.task_id',
|
||||
'photos.created_at',
|
||||
'tasks.title as task_title'
|
||||
])
|
||||
->where('photos.id', $id)
|
||||
->first();
|
||||
if (! $row) {
|
||||
return response()->json(['error' => ['code' => 'not_found', 'message' => 'Photo not found']], 404);
|
||||
}
|
||||
$row->file_path = $this->toPublicUrl((string)($row->file_path ?? ''));
|
||||
$row->thumbnail_path = $this->toPublicUrl((string)($row->thumbnail_path ?? ''));
|
||||
|
||||
// Localize task title if present
|
||||
$locale = request()->query('locale', 'de');
|
||||
if ($row->task_title) {
|
||||
$row->task_title = $this->getLocalized($row->task_title, $locale, 'Unbenannte Aufgabe');
|
||||
}
|
||||
|
||||
return response()->json($row)->header('Cache-Control', 'no-store');
|
||||
}
|
||||
|
||||
@@ -211,6 +418,7 @@ class EventPublicController extends BaseController
|
||||
$validated = $request->validate([
|
||||
'photo' => ['required', 'image', 'max:6144'], // 6 MB
|
||||
'emotion_id' => ['nullable', 'integer'],
|
||||
'emotion_slug' => ['nullable', 'string'],
|
||||
'task_id' => ['nullable', 'integer'],
|
||||
'guest_name' => ['nullable', 'string', 'max:255'],
|
||||
]);
|
||||
@@ -227,12 +435,14 @@ class EventPublicController extends BaseController
|
||||
|
||||
$id = DB::table('photos')->insertGetId([
|
||||
'event_id' => $event->id,
|
||||
'emotion_id' => $validated['emotion_id'] ?? null,
|
||||
'task_id' => $validated['task_id'] ?? null,
|
||||
'guest_name' => $validated['guest_name'] ?? $deviceId,
|
||||
'file_path' => $url,
|
||||
'thumbnail_path' => $thumbUrl,
|
||||
'likes_count' => 0,
|
||||
|
||||
// Handle emotion_id: prefer explicit ID, fallback to slug lookup, then default
|
||||
'emotion_id' => $this->resolveEmotionId($validated, $event->id),
|
||||
'is_featured' => 0,
|
||||
'metadata' => null,
|
||||
'created_at' => now(),
|
||||
@@ -245,4 +455,46 @@ class EventPublicController extends BaseController
|
||||
'thumbnail_path' => $thumbUrl,
|
||||
], 201);
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolve emotion_id from validation data, supporting both direct ID and slug lookup
|
||||
*/
|
||||
private function resolveEmotionId(array $validated, int $eventId): int
|
||||
{
|
||||
// 1. Use explicit emotion_id if provided
|
||||
if (isset($validated['emotion_id']) && $validated['emotion_id'] !== null) {
|
||||
return (int) $validated['emotion_id'];
|
||||
}
|
||||
|
||||
// 2. Resolve from emotion_slug if provided (format: 'emotion-{id}')
|
||||
if (isset($validated['emotion_slug']) && $validated['emotion_slug']) {
|
||||
$slug = $validated['emotion_slug'];
|
||||
if (str_starts_with($slug, 'emotion-')) {
|
||||
$id = (int) substr($slug, 8); // Remove 'emotion-' prefix
|
||||
if ($id > 0) {
|
||||
// Verify emotion exists and is available for this event
|
||||
$exists = DB::table('emotions')
|
||||
->join('emotion_event_type', 'emotions.id', '=', 'emotion_event_type.emotion_id')
|
||||
->join('events', 'emotion_event_type.event_type_id', '=', 'events.event_type_id')
|
||||
->where('emotions.id', $id)
|
||||
->where('events.id', $eventId)
|
||||
->exists();
|
||||
|
||||
if ($exists) {
|
||||
return $id;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Fallback: Get first available emotion for this event type
|
||||
$defaultEmotion = DB::table('emotions')
|
||||
->join('emotion_event_type', 'emotions.id', '=', 'emotion_event_type.emotion_id')
|
||||
->join('events', 'emotion_event_type.event_type_id', '=', 'events.event_type_id')
|
||||
->where('events.id', $eventId)
|
||||
->orderBy('emotions.sort_order')
|
||||
->value('emotions.id');
|
||||
|
||||
return $defaultEmotion ?: 1; // Ultimate fallback to emotion ID 1 (assuming "Happy" exists)
|
||||
}
|
||||
}
|
||||
|
||||
18
app/Http/Middleware/VerifyCsrfToken.php
Normal file
18
app/Http/Middleware/VerifyCsrfToken.php
Normal file
@@ -0,0 +1,18 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Middleware;
|
||||
|
||||
use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;
|
||||
|
||||
class VerifyCsrfToken extends Middleware
|
||||
{
|
||||
/**
|
||||
* The URIs that should be excluded from CSRF verification.
|
||||
*
|
||||
* @var array<int, string>
|
||||
*/
|
||||
protected $except = [
|
||||
'api/v1/photos/*/like',
|
||||
'api/v1/events/*/upload',
|
||||
];
|
||||
}
|
||||
67
app/Models/TaskCollection.php
Normal file
67
app/Models/TaskCollection.php
Normal file
@@ -0,0 +1,67 @@
|
||||
<?php
|
||||
|
||||
namespace App\Models;
|
||||
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
use Illuminate\Database\Eloquent\Relations\BelongsToMany;
|
||||
|
||||
class TaskCollection extends Model
|
||||
{
|
||||
protected $table = 'task_collections';
|
||||
|
||||
protected $fillable = [
|
||||
'name',
|
||||
'description',
|
||||
];
|
||||
|
||||
protected $casts = [
|
||||
'name' => 'array',
|
||||
'description' => 'array',
|
||||
];
|
||||
|
||||
/**
|
||||
* Tasks in this collection
|
||||
*/
|
||||
public function tasks(): BelongsToMany
|
||||
{
|
||||
return $this->belongsToMany(
|
||||
Task::class,
|
||||
'task_collection_task',
|
||||
'task_collection_id',
|
||||
'task_id'
|
||||
)->withTimestamps();
|
||||
}
|
||||
|
||||
/**
|
||||
* Events that use this collection
|
||||
*/
|
||||
public function events(): BelongsToMany
|
||||
{
|
||||
return $this->belongsToMany(
|
||||
Event::class,
|
||||
'event_task_collection',
|
||||
'task_collection_id',
|
||||
'event_id'
|
||||
)->withTimestamps();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the localized name for the current locale
|
||||
*/
|
||||
public function getLocalizedNameAttribute(): string
|
||||
{
|
||||
$locale = app()->getLocale();
|
||||
return $this->name[$locale] ?? $this->name['de'] ?? 'Unnamed Collection';
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the localized description for the current locale
|
||||
*/
|
||||
public function getLocalizedDescriptionAttribute(): ?string
|
||||
{
|
||||
if (!$this->description) return null;
|
||||
|
||||
$locale = app()->getLocale();
|
||||
return $this->description[$locale] ?? $this->description['de'] ?? null;
|
||||
}
|
||||
}
|
||||
@@ -11,6 +11,7 @@ use Illuminate\Http\Middleware\AddLinkHeadersForPreloadedAssets;
|
||||
return Application::configure(basePath: dirname(__DIR__))
|
||||
->withRouting(
|
||||
web: __DIR__.'/../routes/web.php',
|
||||
api: __DIR__.'/../routes/api.php',
|
||||
commands: __DIR__.'/../routes/console.php',
|
||||
health: '/up',
|
||||
)
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
return new class extends Migration
|
||||
{
|
||||
/**
|
||||
* Run the migrations.
|
||||
*/
|
||||
public function up(): void
|
||||
{
|
||||
Schema::create('event_task_collection', function (Blueprint $table) {
|
||||
$table->id();
|
||||
$table->foreignId('event_id')->constrained('events')->onDelete('cascade');
|
||||
$table->foreignId('task_collection_id')->constrained('task_collections')->onDelete('cascade');
|
||||
$table->integer('sort_order')->default(0);
|
||||
$table->timestamps();
|
||||
|
||||
// Composite unique index to prevent duplicate assignments
|
||||
$table->unique(['event_id', 'task_collection_id']);
|
||||
|
||||
$table->index(['event_id', 'sort_order']);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reverse the migrations.
|
||||
*/
|
||||
public function down(): void
|
||||
{
|
||||
Schema::dropIfExists('event_task_collection');
|
||||
}
|
||||
};
|
||||
@@ -19,6 +19,7 @@ class DatabaseSeeder extends Seeder
|
||||
EmotionsSeeder::class,
|
||||
DemoEventSeeder::class,
|
||||
TasksSeeder::class,
|
||||
TaskCollectionsSeeder::class,
|
||||
DemoAchievementsSeeder::class,
|
||||
]);
|
||||
|
||||
|
||||
90
database/seeders/TaskCollectionsSeeder.php
Normal file
90
database/seeders/TaskCollectionsSeeder.php
Normal file
@@ -0,0 +1,90 @@
|
||||
<?php
|
||||
|
||||
namespace Database\Seeders;
|
||||
|
||||
use Illuminate\Database\Seeder;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use Carbon\Carbon;
|
||||
|
||||
class TaskCollectionsSeeder extends Seeder
|
||||
{
|
||||
/**
|
||||
* Run the database seeds.
|
||||
*/
|
||||
public function run(): void
|
||||
{
|
||||
// Get demo event ID
|
||||
$demoEventId = DB::table('events')->where('slug', 'demo-wedding-2025')->value('id');
|
||||
if (!$demoEventId) {
|
||||
$this->command->info('Demo event not found, skipping task collections seeding');
|
||||
return;
|
||||
}
|
||||
|
||||
// Get some task IDs for demo (assuming TasksSeeder was run)
|
||||
$taskIds = DB::table('tasks')->limit(6)->pluck('id')->toArray();
|
||||
if (empty($taskIds)) {
|
||||
$this->command->info('No tasks found, skipping task collections seeding');
|
||||
return;
|
||||
}
|
||||
|
||||
// Create Wedding Task Collection
|
||||
$weddingCollectionId = DB::table('task_collections')->insertGetId([
|
||||
'name' => json_encode([
|
||||
'de' => 'Hochzeitsaufgaben',
|
||||
'en' => 'Wedding Tasks'
|
||||
]),
|
||||
'description' => json_encode([
|
||||
'de' => 'Spezielle Aufgaben für Hochzeitsgäste',
|
||||
'en' => 'Special tasks for wedding guests'
|
||||
]),
|
||||
]);
|
||||
|
||||
// Assign first 4 tasks to wedding collection
|
||||
$weddingTasks = array_slice($taskIds, 0, 4);
|
||||
foreach ($weddingTasks as $taskId) {
|
||||
DB::table('task_collection_task')->insert([
|
||||
'task_collection_id' => $weddingCollectionId,
|
||||
'task_id' => $taskId,
|
||||
]);
|
||||
}
|
||||
|
||||
// Link wedding collection to demo event
|
||||
DB::table('event_task_collection')->insert([
|
||||
'event_id' => $demoEventId,
|
||||
'task_collection_id' => $weddingCollectionId,
|
||||
'sort_order' => 1,
|
||||
]);
|
||||
|
||||
// Create General Fun Tasks Collection (fallback)
|
||||
$funCollectionId = DB::table('task_collections')->insertGetId([
|
||||
'name' => json_encode([
|
||||
'de' => 'Spaß-Aufgaben',
|
||||
'en' => 'Fun Tasks'
|
||||
]),
|
||||
'description' => json_encode([
|
||||
'de' => 'Allgemeine unterhaltsame Aufgaben',
|
||||
'en' => 'General entertaining tasks'
|
||||
]),
|
||||
]);
|
||||
|
||||
// Assign remaining tasks to fun collection
|
||||
$funTasks = array_slice($taskIds, 4);
|
||||
foreach ($funTasks as $taskId) {
|
||||
DB::table('task_collection_task')->insert([
|
||||
'task_collection_id' => $funCollectionId,
|
||||
'task_id' => $taskId,
|
||||
]);
|
||||
}
|
||||
|
||||
// Link fun collection to demo event as fallback
|
||||
DB::table('event_task_collection')->insert([
|
||||
'event_id' => $demoEventId,
|
||||
'task_collection_id' => $funCollectionId,
|
||||
'sort_order' => 2,
|
||||
]);
|
||||
|
||||
$this->command->info("✅ Created 2 task collections with " . count($taskIds) . " tasks for demo event");
|
||||
$this->command->info("Wedding Collection ID: {$weddingCollectionId}");
|
||||
$this->command->info("Fun Collection ID: {$funCollectionId}");
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,28 @@
|
||||
import React from 'react';
|
||||
import { NavLink, useParams } from 'react-router-dom';
|
||||
import { NavLink, useParams, useLocation } from 'react-router-dom';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { GalleryHorizontal, Home, Trophy } from 'lucide-react';
|
||||
import { CheckSquare, GalleryHorizontal, Home, Trophy } from 'lucide-react';
|
||||
import { useEventData } from '../hooks/useEventData';
|
||||
|
||||
function TabLink({ to, children }: { to: string; children: React.ReactNode }) {
|
||||
function TabLink({
|
||||
to,
|
||||
children,
|
||||
isActive
|
||||
}: {
|
||||
to: string;
|
||||
children: React.ReactNode;
|
||||
isActive: boolean;
|
||||
}) {
|
||||
return (
|
||||
<NavLink to={to} className={({ isActive }) => (isActive ? 'text-foreground' : 'text-muted-foreground')}>
|
||||
<NavLink
|
||||
to={to}
|
||||
className={`
|
||||
flex flex-col items-center gap-1 h-14 p-2 transition-all duration-200 rounded-lg backdrop-blur-md
|
||||
${isActive
|
||||
? 'bg-gradient-to-t from-pink-500/90 to-pink-400/90 text-white shadow-lg scale-105 border border-white/30'
|
||||
: 'text-gray-300 hover:bg-white/10 hover:text-pink-300 hover:scale-105 hover:border-white/20 border border-transparent'
|
||||
}`}
|
||||
>
|
||||
{children}
|
||||
</NavLink>
|
||||
);
|
||||
@@ -13,25 +30,60 @@ function TabLink({ to, children }: { to: string; children: React.ReactNode }) {
|
||||
|
||||
export default function BottomNav() {
|
||||
const { slug } = useParams();
|
||||
const location = useLocation();
|
||||
const { event } = useEventData();
|
||||
|
||||
if (!slug) return null; // Only show bottom nav within event context
|
||||
const base = `/e/${encodeURIComponent(slug)}`;
|
||||
const currentPath = location.pathname;
|
||||
const locale = event?.default_locale || 'de';
|
||||
|
||||
// Translations
|
||||
const translations = {
|
||||
de: {
|
||||
home: 'Start',
|
||||
tasks: 'Aufgaben',
|
||||
achievements: 'Erfolge',
|
||||
gallery: 'Galerie'
|
||||
},
|
||||
en: {
|
||||
home: 'Home',
|
||||
tasks: 'Tasks',
|
||||
achievements: 'Achievements',
|
||||
gallery: 'Gallery'
|
||||
}
|
||||
};
|
||||
|
||||
const t = translations[locale as keyof typeof translations] || translations.de;
|
||||
|
||||
// Improved active state logic
|
||||
const isHomeActive = currentPath === base || currentPath === `/${slug}`;
|
||||
const isTasksActive = currentPath.startsWith(`${base}/tasks`) || currentPath === `${base}/upload`;
|
||||
const isAchievementsActive = currentPath.startsWith(`${base}/achievements`);
|
||||
const isGalleryActive = currentPath.startsWith(`${base}/gallery`) || currentPath.startsWith(`${base}/photos`);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-x-0 bottom-0 z-20 border-t bg-white/90 px-3 py-2 backdrop-blur dark:bg-black/40">
|
||||
<div className="mx-auto flex max-w-md items-center justify-between">
|
||||
<TabLink to={`${base}`}>
|
||||
<Button variant="ghost" size="sm" className="flex flex-col gap-1">
|
||||
<Home className="h-5 w-5" /> <span className="text-xs">Start</span>
|
||||
</Button>
|
||||
<div className="fixed inset-x-0 bottom-0 z-30 border-t border-white/20 bg-black/30 px-2 py-2 backdrop-blur-xl shadow-xl dark:bg-black/40 dark:border-gray-800/50">
|
||||
<div className="mx-auto flex max-w-sm items-center justify-around">
|
||||
<TabLink to={`${base}`} isActive={isHomeActive}>
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<Home className="h-5 w-5" /> <span className="text-xs">{t.home}</span>
|
||||
</div>
|
||||
</TabLink>
|
||||
<TabLink to={`${base}/gallery`}>
|
||||
<Button variant="ghost" size="sm" className="flex flex-col gap-1">
|
||||
<GalleryHorizontal className="h-5 w-5" /> <span className="text-xs">Galerie</span>
|
||||
</Button>
|
||||
<TabLink to={`${base}/tasks`} isActive={isTasksActive}>
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<CheckSquare className="h-5 w-5" /> <span className="text-xs">{t.tasks}</span>
|
||||
</div>
|
||||
</TabLink>
|
||||
<TabLink to={`${base}/achievements`}>
|
||||
<Button variant="ghost" size="sm" className="flex flex-col gap-1">
|
||||
<Trophy className="h-5 w-5" /> <span className="text-xs">Erfolge</span>
|
||||
</Button>
|
||||
<TabLink to={`${base}/achievements`} isActive={isAchievementsActive}>
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<Trophy className="h-5 w-5" /> <span className="text-xs">{t.achievements}</span>
|
||||
</div>
|
||||
</TabLink>
|
||||
<TabLink to={`${base}/gallery`} isActive={isGalleryActive}>
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<GalleryHorizontal className="h-5 w-5" /> <span className="text-xs">{t.gallery}</span>
|
||||
</div>
|
||||
</TabLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
149
resources/js/guest/components/EmotionPicker.tsx
Normal file
149
resources/js/guest/components/EmotionPicker.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ChevronRight } from 'lucide-react';
|
||||
|
||||
interface Emotion {
|
||||
id: number;
|
||||
slug: string;
|
||||
name: string;
|
||||
emoji: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
interface EmotionPickerProps {
|
||||
onSelect?: (emotion: Emotion) => void;
|
||||
}
|
||||
|
||||
export default function EmotionPicker({ onSelect }: EmotionPickerProps) {
|
||||
const { slug } = useParams<{ slug: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [emotions, setEmotions] = useState<Emotion[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Fallback emotions (when API not available yet)
|
||||
const fallbackEmotions: Emotion[] = [
|
||||
{ id: 1, slug: 'happy', name: 'Glücklich', emoji: '😊' },
|
||||
{ id: 2, slug: 'love', name: 'Verliebt', emoji: '❤️' },
|
||||
{ id: 3, slug: 'excited', name: 'Aufgeregt', emoji: '🎉' },
|
||||
{ id: 4, slug: 'relaxed', name: 'Entspannt', emoji: '😌' },
|
||||
{ id: 5, slug: 'sad', name: 'Traurig', emoji: '😢' },
|
||||
{ id: 6, slug: 'surprised', name: 'Überrascht', emoji: '😲' },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
if (!slug) return;
|
||||
|
||||
async function fetchEmotions() {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
// Try API first
|
||||
const response = await fetch(`/api/v1/events/${slug}/emotions`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setEmotions(Array.isArray(data) ? data : fallbackEmotions);
|
||||
} else {
|
||||
// Fallback to predefined emotions
|
||||
console.warn('Emotions API not available, using fallback');
|
||||
setEmotions(fallbackEmotions);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch emotions:', err);
|
||||
setError('Emotions konnten nicht geladen werden');
|
||||
setEmotions(fallbackEmotions);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
fetchEmotions();
|
||||
}, [slug]);
|
||||
|
||||
const handleEmotionSelect = (emotion: Emotion) => {
|
||||
if (onSelect) {
|
||||
onSelect(emotion);
|
||||
} else {
|
||||
// Default: Navigate to tasks with emotion filter
|
||||
navigate(`/e/${slug}/tasks?emotion=${emotion.slug}`);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="mb-6 p-4 text-center">
|
||||
<div className="text-sm text-muted-foreground">Lade Emotionen...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
|
||||
<div className="text-sm text-red-700">{error}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mb-6">
|
||||
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
Wie fühlst du dich?
|
||||
<span className="text-xs text-muted-foreground">(optional)</span>
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
{emotions.map((emotion) => {
|
||||
// Localize name and description if they are JSON
|
||||
const localize = (value: string | object, defaultValue: string = ''): string => {
|
||||
if (typeof value === 'string' && value.startsWith('{')) {
|
||||
try {
|
||||
const data = JSON.parse(value as string);
|
||||
return data.de || data.en || defaultValue || '';
|
||||
} catch {
|
||||
return value as string;
|
||||
}
|
||||
}
|
||||
return value as string;
|
||||
};
|
||||
|
||||
const localizedName = localize(emotion.name, emotion.name);
|
||||
const localizedDescription = localize(emotion.description || '', '');
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={emotion.id}
|
||||
variant="outline"
|
||||
className="w-full justify-start h-16 p-3 bg-pink-50 dark:bg-gray-800/50 hover:bg-pink-100 dark:hover:bg-gray-700/50 border-pink-200 dark:border-gray-600 rounded-xl text-left shadow-sm dark:text-white"
|
||||
onClick={() => handleEmotionSelect(emotion)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">{emotion.emoji}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium text-sm truncate">{localizedName}</div>
|
||||
{localizedDescription && (
|
||||
<div className="text-xs text-muted-foreground truncate">{localizedDescription}</div>
|
||||
)}
|
||||
</div>
|
||||
<ChevronRight className="h-4 w-4 text-muted-foreground ml-auto" />
|
||||
</div>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Skip option */}
|
||||
<div className="mt-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full text-sm text-gray-600 dark:text-gray-300 hover:text-pink-600 hover:bg-pink-50 dark:hover:bg-gray-800 border-t border-gray-200 dark:border-gray-700 pt-3 mt-3"
|
||||
onClick={() => navigate(`/e/${slug}/tasks`)}
|
||||
>
|
||||
Überspringen und Aufgabe wählen
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,39 +2,89 @@ import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { getDeviceId } from '../lib/device';
|
||||
import { usePollGalleryDelta } from '../polling/usePollGalleryDelta';
|
||||
|
||||
type Props = { slug: string };
|
||||
|
||||
export default function GalleryPreview({ slug }: Props) {
|
||||
const { photos, loading } = usePollGalleryDelta(slug);
|
||||
const [mode, setMode] = React.useState<'latest' | 'popular'>('latest');
|
||||
const [mode, setMode] = React.useState<'latest' | 'popular' | 'myphotos'>('latest');
|
||||
|
||||
const items = React.useMemo(() => {
|
||||
const arr = photos.slice();
|
||||
let arr = photos.slice();
|
||||
|
||||
// MyPhotos filter (requires session_id matching)
|
||||
if (mode === 'myphotos') {
|
||||
const deviceId = getDeviceId();
|
||||
arr = arr.filter((photo: any) => photo.session_id === deviceId);
|
||||
}
|
||||
|
||||
// Sorting
|
||||
if (mode === 'popular') {
|
||||
arr.sort((a: any, b: any) => (b.likes_count ?? 0) - (a.likes_count ?? 0));
|
||||
} else {
|
||||
arr.sort((a: any, b: any) => new Date(b.created_at ?? 0).getTime() - new Date(a.created_at ?? 0).getTime());
|
||||
}
|
||||
return arr.slice(0, 6);
|
||||
|
||||
return arr.slice(0, 4); // 2x2 = 4 items
|
||||
}, [photos, mode]);
|
||||
|
||||
// Helper function to generate photo title (must be before return)
|
||||
function getPhotoTitle(photo: any): string {
|
||||
if (photo.task_id) {
|
||||
return `Task: ${photo.task_title || 'Unbekannte Aufgabe'}`;
|
||||
}
|
||||
if (photo.emotion_id) {
|
||||
return `Emotion: ${photo.emotion_name || 'Gefühl'}`;
|
||||
}
|
||||
// Fallback based on creation time or placeholder
|
||||
const now = new Date();
|
||||
const created = new Date(photo.created_at || now);
|
||||
const hours = created.getHours();
|
||||
if (hours < 12) return 'Morgenmoment';
|
||||
if (hours < 18) return 'Nachmittagslicht';
|
||||
return 'Abendstimmung';
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<div className="inline-flex rounded-md border p-1 text-xs">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div className="inline-flex rounded-full bg-white/80 backdrop-blur-sm border border-pink-200 p-1 shadow-sm">
|
||||
<button
|
||||
onClick={() => setMode('latest')}
|
||||
className={`px-2 py-1 ${mode === 'latest' ? 'rounded-sm bg-muted font-medium' : ''}`}
|
||||
>Neueste</button>
|
||||
className={`px-4 py-2 text-sm font-medium rounded-full transition-all duration-200 ${
|
||||
mode === 'latest'
|
||||
? 'bg-gradient-to-r from-pink-500 to-pink-600 text-white shadow-lg scale-105'
|
||||
: 'text-gray-600 hover:bg-pink-50 hover:text-pink-700'
|
||||
}`}
|
||||
>
|
||||
Newest
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setMode('popular')}
|
||||
className={`px-2 py-1 ${mode === 'popular' ? 'rounded-sm bg-muted font-medium' : ''}`}
|
||||
>Beliebt</button>
|
||||
className={`px-4 py-2 text-sm font-medium rounded-full transition-all duration-200 ${
|
||||
mode === 'popular'
|
||||
? 'bg-gradient-to-r from-pink-500 to-pink-600 text-white shadow-lg scale-105'
|
||||
: 'text-gray-600 hover:bg-pink-50 hover:text-pink-700'
|
||||
}`}
|
||||
>
|
||||
Popular
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setMode('myphotos')}
|
||||
className={`px-4 py-2 text-sm font-medium rounded-full transition-all duration-200 ${
|
||||
mode === 'myphotos'
|
||||
? 'bg-gradient-to-r from-pink-500 to-pink-600 text-white shadow-lg scale-105'
|
||||
: 'text-gray-600 hover:bg-pink-50 hover:text-pink-700'
|
||||
}`}
|
||||
>
|
||||
My Photos
|
||||
</button>
|
||||
</div>
|
||||
<div className="grow" />
|
||||
<Link to={`../gallery`}><Button variant="link" className="px-0">Alle ansehen →</Button></Link>
|
||||
<Link to={`/e/${slug}/gallery?mode=${mode}`} className="text-sm text-pink-600 hover:text-pink-700 font-medium">
|
||||
Alle ansehen →
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{loading && <p className="text-sm text-muted-foreground">Lädt…</p>}
|
||||
@@ -45,15 +95,28 @@ export default function GalleryPreview({ slug }: Props) {
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{items.map((p: any) => (
|
||||
<Link key={p.id} to={`../photo/${p.id}`} state={{ photo: p }}>
|
||||
<img
|
||||
src={p.thumbnail_path || p.file_path}
|
||||
alt="Foto"
|
||||
className="aspect-square w-full rounded object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
<Link key={p.id} to={`/e/${slug}/photo/${p.id}`} state={{ photo: p }} className="block">
|
||||
<div className="relative">
|
||||
<img
|
||||
src={p.thumbnail_path || p.file_path}
|
||||
alt={p.title || 'Foto'}
|
||||
className="aspect-square w-full rounded-xl object-cover shadow-lg hover:shadow-xl transition-shadow duration-200"
|
||||
loading="lazy"
|
||||
/>
|
||||
{/* Photo Title */}
|
||||
<div className="mt-2">
|
||||
<div className="text-xs font-medium text-gray-900 line-clamp-2 bg-white/80 px-2 py-1 rounded-md">
|
||||
{p.title || getPhotoTitle(p)}
|
||||
</div>
|
||||
{p.likes_count > 0 && (
|
||||
<div className="mt-1 flex items-center gap-1 text-xs text-pink-600">
|
||||
❤️ {p.likes_count}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -3,13 +3,99 @@ import { Button } from '@/components/ui/button';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
|
||||
import AppearanceToggleDropdown from '@/components/appearance-dropdown';
|
||||
import { Settings, ChevronDown } from 'lucide-react';
|
||||
import { Settings, ChevronDown, User } from 'lucide-react';
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
|
||||
import { useEventData } from '../hooks/useEventData';
|
||||
import { usePollStats } from '../polling/usePollStats';
|
||||
|
||||
export default function Header({ slug, title = '' }: { slug?: string; title?: string }) {
|
||||
if (!slug) {
|
||||
return (
|
||||
<div className="sticky top-0 z-20 flex items-center justify-between border-b bg-white/70 px-4 py-2 backdrop-blur dark:bg-black/40">
|
||||
<div className="font-semibold">{title}</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<AppearanceToggleDropdown />
|
||||
<SettingsSheet />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const { event, loading: eventLoading, error: eventError } = useEventData();
|
||||
const stats = usePollStats(slug);
|
||||
|
||||
if (eventLoading) {
|
||||
return (
|
||||
<div className="sticky top-0 z-20 flex items-center justify-between border-b bg-white/70 px-4 py-2 backdrop-blur dark:bg-black/40">
|
||||
<div className="font-semibold">Lade Event...</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<AppearanceToggleDropdown />
|
||||
<SettingsSheet />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (eventError || !event) {
|
||||
return (
|
||||
<div className="sticky top-0 z-20 flex items-center justify-between border-b bg-white/70 px-4 py-2 backdrop-blur dark:bg-black/40">
|
||||
<div className="font-semibold text-red-600">Event nicht gefunden</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<AppearanceToggleDropdown />
|
||||
<SettingsSheet />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Get event icon or generate initials
|
||||
const getEventAvatar = (event: any) => {
|
||||
if (event.type?.icon) {
|
||||
return (
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-100 text-pink-600 text-xl">
|
||||
{event.type.icon}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Fallback to initials
|
||||
const getInitials = (name: string) => {
|
||||
const words = name.split(' ');
|
||||
if (words.length >= 2) {
|
||||
return `${words[0][0]}${words[1][0]}`.toUpperCase();
|
||||
}
|
||||
return name.substring(0, 2).toUpperCase();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-100 text-pink-600 font-semibold text-sm">
|
||||
{getInitials(event.name)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function Header({ title = '' }: { title?: string }) {
|
||||
return (
|
||||
<div className="sticky top-0 z-20 flex items-center justify-between border-b bg-white/70 px-4 py-2 backdrop-blur dark:bg-black/40">
|
||||
<div className="font-semibold">{title}</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{getEventAvatar(event)}
|
||||
<div className="flex flex-col">
|
||||
<div className="font-semibold text-base">{event.name}</div>
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
{stats && (
|
||||
<>
|
||||
<span className="flex items-center gap-1">
|
||||
<User className="h-3 w-3" />
|
||||
<span>{stats.onlineGuests} online</span>
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="font-medium">{stats.tasksSolved}</span> Aufgaben gelöst
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<AppearanceToggleDropdown />
|
||||
<SettingsSheet />
|
||||
|
||||
40
resources/js/guest/hooks/useEventData.ts
Normal file
40
resources/js/guest/hooks/useEventData.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { fetchEvent, EventData } from '../services/eventApi';
|
||||
|
||||
export function useEventData() {
|
||||
const { slug } = useParams<{ slug: string }>();
|
||||
const [event, setEvent] = useState<EventData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!slug) {
|
||||
setError('No event slug provided');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const loadEvent = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const eventData = await fetchEvent(slug);
|
||||
setEvent(eventData);
|
||||
} catch (err) {
|
||||
console.error('Failed to load event:', err);
|
||||
setError(err instanceof Error ? err.message : 'Failed to load event');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadEvent();
|
||||
}, [slug]);
|
||||
|
||||
return {
|
||||
event,
|
||||
loading,
|
||||
error,
|
||||
};
|
||||
}
|
||||
@@ -66,21 +66,77 @@ export default function GalleryPage() {
|
||||
)}
|
||||
{loading && <p>Lade…</p>}
|
||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
|
||||
{list.map((p) => (
|
||||
<Card key={p.id} className="relative overflow-hidden">
|
||||
<CardContent className="p-0">
|
||||
<Link to={`../photo/${p.id}`} state={{ photo: p }}>
|
||||
<img src={p.thumbnail_path || p.file_path} alt="Foto" className="aspect-square w-full object-cover" />
|
||||
</Link>
|
||||
</CardContent>
|
||||
<div className="absolute bottom-1 right-1 flex items-center gap-1 rounded-full bg-black/50 px-2 py-1 text-white">
|
||||
<button onClick={() => onLike(p.id)} className={`inline-flex items-center ${liked.has(p.id) ? 'text-red-400' : ''}`} aria-label="Like">
|
||||
<Heart className="h-4 w-4" />
|
||||
</button>
|
||||
<span className="text-xs">{counts[p.id] ?? p.likes_count ?? 0}</span>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
{list.map((p: any) => {
|
||||
// Debug: Log image URLs
|
||||
const imgSrc = p.thumbnail_path || p.file_path;
|
||||
|
||||
// Normalize image URL
|
||||
let imageUrl = imgSrc;
|
||||
let cleanPath = '';
|
||||
|
||||
if (imageUrl) {
|
||||
// Remove leading/trailing slashes for processing
|
||||
cleanPath = imageUrl.replace(/^\/+|\/+$/g, '');
|
||||
|
||||
// Check if path already contains storage prefix
|
||||
if (cleanPath.startsWith('storage/')) {
|
||||
// Already has storage prefix, just ensure it starts with /
|
||||
imageUrl = `/${cleanPath}`;
|
||||
} else {
|
||||
// Add storage prefix
|
||||
imageUrl = `/storage/${cleanPath}`;
|
||||
}
|
||||
|
||||
// Remove double slashes
|
||||
imageUrl = imageUrl.replace(/\/+/g, '/');
|
||||
}
|
||||
|
||||
// Extended debug logging
|
||||
console.log(`Photo ${p.id} URL processing:`, {
|
||||
id: p.id,
|
||||
original: imgSrc,
|
||||
thumbnail_path: p.thumbnail_path,
|
||||
file_path: p.file_path,
|
||||
cleanPath,
|
||||
finalUrl: imageUrl,
|
||||
isHttp: imageUrl?.startsWith('http'),
|
||||
startsWithStorage: imageUrl?.startsWith('/storage/')
|
||||
});
|
||||
|
||||
return (
|
||||
<Card key={p.id} className="relative overflow-hidden">
|
||||
<CardContent className="p-0">
|
||||
<Link to={`../photo/${p.id}`} state={{ photo: p }}>
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={`Foto ${p.id}${p.task_title ? ` - ${p.task_title}` : ''}`}
|
||||
className="aspect-square w-full object-cover bg-gray-200"
|
||||
onError={(e) => {
|
||||
console.error(`❌ Failed to load image ${p.id}:`, imageUrl);
|
||||
console.error('Error details:', e);
|
||||
(e.target as HTMLImageElement).src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjNGNEY2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg==';
|
||||
}}
|
||||
onLoad={() => console.log(`✅ Successfully loaded image ${p.id}:`, imageUrl)}
|
||||
loading="lazy"
|
||||
/>
|
||||
</Link>
|
||||
</CardContent>
|
||||
|
||||
{p.task_title && (
|
||||
<div className="px-2 pb-2 text-center">
|
||||
<p className="text-xs text-gray-700 truncate bg-white/80 py-1 rounded-sm">{p.task_title}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="absolute bottom-1 right-1 flex items-center gap-1 rounded-full bg-black/50 px-2 py-1 text-white">
|
||||
<button onClick={(e) => { e.preventDefault(); e.stopPropagation(); onLike(p.id); }} className={`inline-flex items-center ${liked.has(p.id) ? 'text-red-400' : ''}`} aria-label="Like">
|
||||
<Heart className="h-4 w-4" />
|
||||
</button>
|
||||
<span className="text-xs">{counts[p.id] ?? (p.likes_count || 0)}</span>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Page>
|
||||
);
|
||||
|
||||
@@ -2,33 +2,36 @@ import React from 'react';
|
||||
import { Page } from './_util';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { usePollStats } from '../polling/usePollStats';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import Header from '../components/Header';
|
||||
import EmotionPicker from '../components/EmotionPicker';
|
||||
import GalleryPreview from '../components/GalleryPreview';
|
||||
import BottomNav from '../components/BottomNav';
|
||||
|
||||
export default function HomePage() {
|
||||
const { slug } = useParams();
|
||||
const stats = usePollStats(slug!);
|
||||
return (
|
||||
<Page title={`Event: ${slug}`}>
|
||||
<Card>
|
||||
<CardContent className="p-3 text-sm">
|
||||
{stats.loading ? 'Lade…' : (
|
||||
<span>
|
||||
<span className="font-medium">{stats.onlineGuests}</span> Gäste online · ✅{' '}
|
||||
<span className="font-medium">{stats.tasksSolved}</span> Aufgaben gelöst
|
||||
<Header slug={slug!} title={`Event: ${slug}`} />
|
||||
<div className="px-4 py-6 pb-20 space-y-6"> {/* Consistent spacing */}
|
||||
{/* Prominent Draw Task Button */}
|
||||
<Link to="tasks">
|
||||
<Button className="w-full bg-gradient-to-r from-pink-500 to-pink-600 hover:from-pink-600 hover:to-pink-700 text-white py-4 rounded-xl text-base font-semibold mb-6 shadow-lg hover:shadow-xl transition-all duration-200">
|
||||
<span className="flex items-center gap-2">
|
||||
🎲 Aufgabe ziehen
|
||||
</span>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="h-3" />
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Link to="tasks"><Button variant="secondary">Aufgabe ziehen</Button></Link>
|
||||
<Link to="tasks"><Button variant="secondary">Wie fühlst du dich?</Button></Link>
|
||||
<Link to="upload"><Button>Einfach ein Foto machen</Button></Link>
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
{/* How do you feel? Section */}
|
||||
<EmotionPicker />
|
||||
|
||||
<GalleryPreview slug={slug!} />
|
||||
</div>
|
||||
<div className="h-4" />
|
||||
<GalleryPreview slug={slug!} />
|
||||
|
||||
{/* Bottom Navigation */}
|
||||
<BottomNav />
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,58 +5,190 @@ import { Button } from '@/components/ui/button';
|
||||
import { Heart } from 'lucide-react';
|
||||
import { likePhoto } from '../services/photosApi';
|
||||
|
||||
type Photo = { id: number; file_path?: string; thumbnail_path?: string; likes_count?: number; created_at?: string };
|
||||
type Photo = {
|
||||
id: number;
|
||||
file_path?: string;
|
||||
thumbnail_path?: string;
|
||||
likes_count?: number;
|
||||
created_at?: string;
|
||||
task_id?: number
|
||||
};
|
||||
|
||||
type Task = { id: number; title: string };
|
||||
|
||||
export default function PhotoLightbox() {
|
||||
const nav = useNavigate();
|
||||
const { state } = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { photoId } = useParams();
|
||||
const [photo, setPhoto] = React.useState<Photo | null>((state as any)?.photo ?? null);
|
||||
|
||||
|
||||
const [photo, setPhoto] = React.useState<Photo | null>(null);
|
||||
const [task, setTask] = React.useState<Task | null>(null);
|
||||
const [taskLoading, setTaskLoading] = React.useState(false);
|
||||
const [likes, setLikes] = React.useState<number | null>(null);
|
||||
const [liked, setLiked] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (photo) return;
|
||||
(async () => {
|
||||
const res = await fetch(`/api/v1/photos/${photoId}`);
|
||||
if (res.ok) setPhoto(await res.json());
|
||||
})();
|
||||
}, [photo, photoId]);
|
||||
// Extract event slug from URL path
|
||||
const getEventSlug = () => {
|
||||
const path = window.location.pathname;
|
||||
const match = path.match(/^\/e\/([^\/]+)\/photo\/[^\/]+$/);
|
||||
return match ? match[1] : null;
|
||||
};
|
||||
|
||||
const slug = getEventSlug();
|
||||
|
||||
// Load photo if not passed via state
|
||||
React.useEffect(() => {
|
||||
if (photo && likes === null) setLikes(photo.likes_count ?? 0);
|
||||
}, [photo, likes]);
|
||||
const statePhoto = (location.state as any)?.photo;
|
||||
if (statePhoto) {
|
||||
setPhoto(statePhoto);
|
||||
setLikes(statePhoto.likes_count ?? 0);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!photoId) return;
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/v1/photos/${photoId}`);
|
||||
if (res.ok) {
|
||||
const photoData = await res.json();
|
||||
setPhoto(photoData);
|
||||
setLikes(photoData.likes_count ?? 0);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load photo:', error);
|
||||
}
|
||||
})();
|
||||
}, [photoId, location.state]);
|
||||
|
||||
// Load task info if photo has task_id and slug is available
|
||||
React.useEffect(() => {
|
||||
if (!photo?.task_id || !slug) {
|
||||
setTask(null);
|
||||
setTaskLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const taskId = photo.task_id;
|
||||
|
||||
(async () => {
|
||||
setTaskLoading(true);
|
||||
try {
|
||||
const res = await fetch(`/api/v1/events/${slug}/tasks`);
|
||||
if (res.ok) {
|
||||
const tasks = await res.json();
|
||||
const foundTask = tasks.find((t: any) => t.id === taskId);
|
||||
if (foundTask) {
|
||||
setTask({
|
||||
id: foundTask.id,
|
||||
title: foundTask.title || `Aufgabe ${taskId}`
|
||||
});
|
||||
} else {
|
||||
setTask({
|
||||
id: taskId,
|
||||
title: `Unbekannte Aufgabe ${taskId}`
|
||||
});
|
||||
}
|
||||
} else {
|
||||
setTask({
|
||||
id: taskId,
|
||||
title: `Unbekannte Aufgabe ${taskId}`
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load task:', error);
|
||||
setTask({
|
||||
id: taskId,
|
||||
title: `Unbekannte Aufgabe ${taskId}`
|
||||
});
|
||||
} finally {
|
||||
setTaskLoading(false);
|
||||
}
|
||||
})();
|
||||
}, [photo?.task_id, slug]);
|
||||
|
||||
async function onLike() {
|
||||
if (liked || !photo) return;
|
||||
setLiked(true);
|
||||
const c = await likePhoto(photo.id);
|
||||
setLikes(c);
|
||||
try {
|
||||
const count = await likePhoto(photo.id);
|
||||
setLikes(count);
|
||||
} catch (error) {
|
||||
console.error('Like failed:', error);
|
||||
setLiked(false);
|
||||
}
|
||||
}
|
||||
|
||||
function onOpenChange(open: boolean) {
|
||||
if (!open) nav(-1);
|
||||
if (!open) navigate(-1);
|
||||
}
|
||||
|
||||
if (!photo && !photoId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open onOpenChange={onOpenChange}>
|
||||
<Dialog open={true} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-5xl border-0 bg-black p-0 text-white">
|
||||
{/* Header with controls */}
|
||||
<div className="flex items-center justify-between p-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="secondary" size="sm" onClick={onLike} disabled={liked}>
|
||||
<Heart className="mr-1 h-4 w-4" /> {likes ?? 0}
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={onLike}
|
||||
disabled={liked || !photo}
|
||||
>
|
||||
<Heart className={`mr-1 h-4 w-4 ${liked ? 'fill-red-400 text-red-400' : ''}`} />
|
||||
{likes ?? 0}
|
||||
</Button>
|
||||
</div>
|
||||
<Button variant="secondary" size="sm" onClick={() => nav(-1)}>Schließen</Button>
|
||||
<Button variant="secondary" size="sm" onClick={() => navigate(-1)}>
|
||||
Schließen
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center justify-center">
|
||||
|
||||
{/* Task Info Overlay */}
|
||||
{task && (
|
||||
<div className="absolute top-4 left-4 right-4 z-20 bg-black/60 backdrop-blur-sm rounded-xl p-3 border border-white/20 max-w-md">
|
||||
<div className="text-sm">
|
||||
<div className="font-semibold mb-1 text-white">Task: {task.title}</div>
|
||||
{taskLoading && (
|
||||
<div className="text-xs opacity-70 text-gray-300">Lade Aufgabe...</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Photo Display */}
|
||||
<div className="flex items-center justify-center min-h-[60vh] p-4">
|
||||
{photo ? (
|
||||
<img src={photo.file_path || photo.thumbnail_path} alt="Foto" className="max-h-[80vh] w-auto" />
|
||||
<img
|
||||
src={photo.file_path || photo.thumbnail_path}
|
||||
alt="Foto"
|
||||
className="max-h-[80vh] max-w-full object-contain"
|
||||
onError={(e) => {
|
||||
console.error('Image load error:', e);
|
||||
(e.target as HTMLImageElement).style.display = 'none';
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="p-6">Lade…</div>
|
||||
<div className="p-6 text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white mx-auto mb-2"></div>
|
||||
<div>Lade Foto...</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Loading state for task */}
|
||||
{taskLoading && !task && (
|
||||
<div className="absolute top-4 left-4 right-4 z-20 bg-black/60 backdrop-blur-sm rounded-xl p-3 border border-white/20 max-w-md">
|
||||
<div className="text-sm text-center">
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mx-auto mb-1"></div>
|
||||
<div className="text-xs opacity-70">Lade Aufgabe...</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
@@ -1,11 +1,264 @@
|
||||
import React from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { Page } from './_util';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useAppearance } from '../../hooks/use-appearance';
|
||||
import { Clock, RefreshCw, Smile } from 'lucide-react';
|
||||
import BottomNav from '../components/BottomNav';
|
||||
import { useEventData } from '../hooks/useEventData';
|
||||
import { EventData } from '../services/eventApi';
|
||||
|
||||
interface Task {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
instructions: string;
|
||||
duration: number; // in minutes
|
||||
emotion?: {
|
||||
slug: string;
|
||||
name: string;
|
||||
};
|
||||
is_completed: boolean;
|
||||
}
|
||||
|
||||
export default function TaskPickerPage() {
|
||||
const { slug } = useParams<{ slug: string }>();
|
||||
const [searchParams] = useSearchParams();
|
||||
// emotionSlug = searchParams.get('emotion'); // Temporär deaktiviert, da API-Filter nicht verfügbar
|
||||
const navigate = useNavigate();
|
||||
const { appearance } = useAppearance();
|
||||
const isDark = appearance === 'dark';
|
||||
|
||||
const [tasks, setTasks] = useState<Task[]>([]);
|
||||
const [currentTask, setCurrentTask] = useState<Task | null>(null);
|
||||
const [timeLeft, setTimeLeft] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Timer state
|
||||
useEffect(() => {
|
||||
if (!currentTask) return;
|
||||
|
||||
const durationMs = currentTask.duration * 60 * 1000;
|
||||
setTimeLeft(durationMs / 1000);
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setTimeLeft(prev => {
|
||||
if (prev <= 1) {
|
||||
clearInterval(interval);
|
||||
return 0;
|
||||
}
|
||||
return prev - 1;
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [currentTask]);
|
||||
|
||||
// Load tasks
|
||||
useEffect(() => {
|
||||
if (!slug) return;
|
||||
|
||||
async function fetchTasks() {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const url = `/api/v1/events/${slug}/tasks`;
|
||||
console.log('Fetching tasks from:', url); // Debug
|
||||
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) throw new Error('Tasks konnten nicht geladen werden');
|
||||
|
||||
const data = await response.json();
|
||||
setTasks(Array.isArray(data) ? data : []);
|
||||
|
||||
console.log('Loaded tasks:', data); // Debug
|
||||
|
||||
// Select random task
|
||||
if (data.length > 0) {
|
||||
const randomIndex = Math.floor(Math.random() * data.length);
|
||||
setCurrentTask(data[randomIndex]);
|
||||
console.log('Selected random task:', data[randomIndex]); // Debug
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Fetch tasks error:', err);
|
||||
setError(err instanceof Error ? err.message : 'Unbekannter Fehler');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
fetchTasks();
|
||||
}, [slug]);
|
||||
|
||||
const formatTime = (seconds: number) => {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = seconds % 60;
|
||||
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
const handleNewTask = () => {
|
||||
if (tasks.length === 0) return;
|
||||
const randomIndex = Math.floor(Math.random() * tasks.length);
|
||||
setCurrentTask(tasks[randomIndex]);
|
||||
setTimeLeft(tasks[randomIndex].duration * 60);
|
||||
};
|
||||
|
||||
const handleStartTask = () => {
|
||||
if (!currentTask) return;
|
||||
// Navigate to upload with task context
|
||||
navigate(`/e/${slug}/upload?task=${currentTask.id}&emotion=${currentTask.emotion?.slug || ''}`);
|
||||
};
|
||||
|
||||
const handleChangeMood = () => {
|
||||
navigate(`/e/${slug}`);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Page title="Aufgabe laden...">
|
||||
<div className={`flex flex-col items-center justify-center min-h-[60vh] p-4 ${
|
||||
isDark ? 'text-white' : 'text-gray-900'
|
||||
}`}>
|
||||
<RefreshCw className="h-8 w-8 animate-spin mb-4" />
|
||||
<p className="text-sm">Lade Aufgabe...</p>
|
||||
</div>
|
||||
<BottomNav />
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !currentTask) {
|
||||
return (
|
||||
<Page title="Keine Aufgaben verfügbar">
|
||||
<div className={`flex flex-col items-center justify-center min-h-[60vh] p-4 space-y-4 ${
|
||||
isDark ? 'text-white' : 'text-gray-900'
|
||||
}`}>
|
||||
<Smile className="h-12 w-12 text-pink-500" />
|
||||
<div className="text-center">
|
||||
<h2 className="text-xl font-semibold mb-2">Keine passende Aufgabe gefunden</h2>
|
||||
<p className="text-sm text-muted-foreground max-w-md">
|
||||
{error || 'Für deine Stimmung gibt es derzeit keine Aufgaben. Versuche eine andere Stimmung oder warte auf neue Inhalte.'}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleChangeMood}
|
||||
className="w-full max-w-sm"
|
||||
>
|
||||
Andere Stimmung wählen
|
||||
</Button>
|
||||
</div>
|
||||
<BottomNav />
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Page title="Stimmung wählen / Aufgabe ziehen">
|
||||
<p>Stubs for emotion grid and random task.</p>
|
||||
<Page title={currentTask.title}>
|
||||
<div className={`min-h-screen flex flex-col ${
|
||||
isDark ? 'bg-gray-900 text-white' : 'bg-white text-gray-900'
|
||||
}`}>
|
||||
{/* Task Header with Selfie Overlay */}
|
||||
<div className="p-4 space-y-4">
|
||||
<div className="relative">
|
||||
{/* Selfie Placeholder */}
|
||||
<div className={`w-full aspect-square rounded-2xl bg-gradient-to-br ${
|
||||
isDark
|
||||
? 'from-gray-800 to-gray-700 shadow-2xl'
|
||||
: 'from-pink-50 to-pink-100 shadow-lg'
|
||||
} flex items-center justify-center`}>
|
||||
<div className="text-center space-y-2">
|
||||
<div className={`w-20 h-20 rounded-full bg-white/20 flex items-center justify-center mx-auto mb-2 ${
|
||||
isDark ? 'text-white' : 'text-gray-600'
|
||||
}`}>
|
||||
📸
|
||||
</div>
|
||||
<p className={`text-sm font-medium ${
|
||||
isDark ? 'text-gray-300' : 'text-gray-600'
|
||||
}`}>
|
||||
Selfie-Vorschau
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timer */}
|
||||
<div className="absolute top-2 right-2">
|
||||
<div className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${
|
||||
timeLeft > 60
|
||||
? 'bg-green-500/20 text-green-400 border-green-500/30'
|
||||
: timeLeft > 30
|
||||
? 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30'
|
||||
: 'bg-red-500/20 text-red-400 border-red-500/30'
|
||||
} border`}>
|
||||
<Clock className="h-3 w-3" />
|
||||
<span>{formatTime(timeLeft)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Task Description Overlay */}
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 via-transparent to-transparent p-4 rounded-b-2xl">
|
||||
<div className="space-y-2">
|
||||
<h1 className={`text-xl font-bold ${
|
||||
isDark ? 'text-gray-100' : 'text-white'
|
||||
}`}>
|
||||
{currentTask.title}
|
||||
</h1>
|
||||
<p className={`text-sm leading-relaxed ${
|
||||
isDark ? 'text-gray-200' : 'text-gray-100'
|
||||
}`}>
|
||||
{currentTask.description}
|
||||
</p>
|
||||
{currentTask.instructions && (
|
||||
<div className={`p-2 rounded-lg ${
|
||||
isDark
|
||||
? 'bg-gray-700/80 text-gray-100'
|
||||
: 'bg-gray-800/80 text-white border border-gray-600/50'
|
||||
}`}>
|
||||
<p className="text-xs italic">💡 {currentTask.instructions}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="px-4 pb-4 space-y-3">
|
||||
<Button
|
||||
onClick={handleStartTask}
|
||||
className="w-full h-14 bg-gradient-to-r from-pink-500 to-pink-600 hover:from-pink-600 hover:to-pink-700 text-white rounded-xl text-base font-semibold shadow-lg hover:shadow-xl transition-all duration-200"
|
||||
>
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
📸 Los geht's
|
||||
</span>
|
||||
</Button>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleNewTask}
|
||||
className="flex-1 h-12 border-gray-300 dark:border-gray-600 text-sm rounded-xl transition-all duration-200 hover:bg-gray-50 dark:hover:bg-gray-800"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
Neue Aufgabe
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={handleChangeMood}
|
||||
className="flex-1 h-12 text-sm rounded-xl transition-all duration-200 hover:bg-gray-50 dark:hover:bg-gray-800"
|
||||
>
|
||||
<Smile className="h-4 w-4 mr-2" />
|
||||
Andere Stimmung
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Navigation */}
|
||||
<BottomNav />
|
||||
</div>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,99 +1,471 @@
|
||||
import React from 'react';
|
||||
import React, { useState, useRef, useEffect, useCallback } from 'react';
|
||||
import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { Page } from './_util';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { getDeviceId } from '../lib/device';
|
||||
import { compressPhoto, formatBytes } from '../lib/image';
|
||||
import { useUploadQueue } from '../queue/hooks';
|
||||
import React from 'react';
|
||||
import { useAppearance } from '../../hooks/use-appearance';
|
||||
import { Camera, RotateCcw, Zap, ZapOff } from 'lucide-react';
|
||||
import BottomNav from '../components/BottomNav';
|
||||
import { uploadPhoto } from '../services/photosApi';
|
||||
|
||||
type Item = { file: File; out?: File; progress: number; done?: boolean; error?: string; id?: number };
|
||||
interface Task {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
instructions?: string;
|
||||
duration: number;
|
||||
emotion?: { slug: string; name: string };
|
||||
difficulty?: 'easy' | 'medium' | 'hard';
|
||||
}
|
||||
|
||||
export default function UploadPage() {
|
||||
const { slug } = useParams();
|
||||
const [items, setItems] = React.useState<Item[]>([]);
|
||||
const queue = useUploadQueue();
|
||||
const [progressMap, setProgressMap] = React.useState<Record<number, number>>({});
|
||||
const { slug } = useParams<{ slug: string }>();
|
||||
const [searchParams] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
const { appearance } = useAppearance();
|
||||
const isDark = appearance === 'dark';
|
||||
|
||||
React.useEffect(() => {
|
||||
const onProg = (e: any) => {
|
||||
const { id, progress } = e.detail || {};
|
||||
if (typeof id === 'number') setProgressMap((m) => ({ ...m, [id]: progress }));
|
||||
};
|
||||
window.addEventListener('queue-progress', onProg);
|
||||
return () => window.removeEventListener('queue-progress', onProg);
|
||||
}, []);
|
||||
// Task data from URL params
|
||||
const taskId = searchParams.get('task');
|
||||
const emotionSlug = searchParams.get('emotion') || '';
|
||||
const [task, setTask] = useState<Task | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
|
||||
async function onPick(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const files = Array.from(e.target.files ?? []).slice(0, 10);
|
||||
const results: Item[] = [];
|
||||
for (const f of files) {
|
||||
// Camera state
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const [stream, setStream] = useState<MediaStream | null>(null);
|
||||
const [facingMode, setFacingMode] = useState<'user' | 'environment'>('user'); // front = user, back = environment
|
||||
const [flashOn, setFlashOn] = useState(false);
|
||||
const [isPulsing, setIsPulsing] = useState(false);
|
||||
const [countdown, setCountdown] = useState(3);
|
||||
const [capturing, setCapturing] = useState(false);
|
||||
|
||||
// Load task data from API
|
||||
useEffect(() => {
|
||||
if (!slug || !taskId) {
|
||||
setError('Keine Aufgabendaten gefunden');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const taskIdNum = parseInt(taskId);
|
||||
if (isNaN(taskIdNum)) {
|
||||
setError('Ungültige Aufgaben-ID');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
async function fetchTask() {
|
||||
try {
|
||||
const out = await compressPhoto(f, { targetBytes: 1_500_000, maxEdge: 2560, qualityStart: 0.85 });
|
||||
results.push({ file: f, out, progress: 0 });
|
||||
} catch (err: any) {
|
||||
results.push({ file: f, progress: 0, error: err?.message || 'Komprimierung fehlgeschlagen' });
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const response = await fetch(`/api/v1/events/${slug}/tasks`);
|
||||
if (!response.ok) throw new Error('Tasks konnten nicht geladen werden');
|
||||
|
||||
const tasks = await response.json();
|
||||
const foundTask = tasks.find((t: any) => t.id === taskIdNum);
|
||||
|
||||
if (foundTask) {
|
||||
setTask({
|
||||
id: foundTask.id,
|
||||
title: foundTask.title || `Aufgabe ${taskIdNum}`,
|
||||
description: foundTask.description || 'Stelle dich für das Foto auf und lächle in die Kamera.',
|
||||
instructions: foundTask.instructions,
|
||||
duration: foundTask.duration || 2,
|
||||
emotion: foundTask.emotion,
|
||||
difficulty: 'medium' as const
|
||||
});
|
||||
} else {
|
||||
// Fallback for unknown task ID
|
||||
setTask({
|
||||
id: taskIdNum,
|
||||
title: `Unbekannte Aufgabe ${taskIdNum}`,
|
||||
description: 'Stelle dich für das Foto auf und lächle in die Kamera.',
|
||||
instructions: 'Positioniere dich gut und warte auf den Countdown.',
|
||||
duration: 2,
|
||||
emotion: emotionSlug ? { slug: emotionSlug, name: emotionSlug.replace('-', ' ').replace(/\b\w/g, l => l.toUpperCase()) } : undefined,
|
||||
difficulty: 'medium' as const
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch task:', err);
|
||||
setError('Aufgabe konnte nicht geladen werden');
|
||||
// Set fallback task
|
||||
setTask({
|
||||
id: taskIdNum,
|
||||
title: `Unbekannte Aufgabe ${taskIdNum}`,
|
||||
description: 'Stelle dich für das Foto auf und lächle in die Kamera.',
|
||||
instructions: 'Positioniere dich gut und warte auf den Countdown.',
|
||||
duration: 2,
|
||||
emotion: emotionSlug ? { slug: emotionSlug, name: emotionSlug.replace('-', ' ').replace(/\b\w/g, l => l.toUpperCase()) } : undefined,
|
||||
difficulty: 'medium' as const
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
setItems(results);
|
||||
|
||||
fetchTask();
|
||||
}, [slug, taskId, emotionSlug]);
|
||||
|
||||
// Camera setup
|
||||
useEffect(() => {
|
||||
if (!slug || loading || !task) return;
|
||||
|
||||
const setupCamera = async () => {
|
||||
try {
|
||||
const constraints: MediaStreamConstraints = {
|
||||
video: {
|
||||
width: { ideal: 1280 },
|
||||
height: { ideal: 720 },
|
||||
facingMode: facingMode ? { ideal: facingMode } : undefined
|
||||
}
|
||||
};
|
||||
|
||||
console.log('Requesting camera with constraints:', constraints);
|
||||
|
||||
const newStream = await navigator.mediaDevices.getUserMedia(constraints);
|
||||
if (videoRef.current) {
|
||||
videoRef.current.srcObject = newStream;
|
||||
videoRef.current.play().catch(e => console.error('Video play error:', e));
|
||||
// Set video dimensions after metadata is loaded
|
||||
videoRef.current.onloadedmetadata = () => {
|
||||
if (videoRef.current) {
|
||||
videoRef.current.style.display = 'block';
|
||||
}
|
||||
};
|
||||
}
|
||||
setStream(newStream);
|
||||
setError(null); // Clear any previous errors
|
||||
} catch (err: any) {
|
||||
console.error('Camera access error:', err.name, err.message);
|
||||
|
||||
let errorMessage = 'Kamera konnte nicht gestartet werden.';
|
||||
|
||||
switch (err.name) {
|
||||
case 'NotAllowedError':
|
||||
errorMessage = 'Kamera-Zugriff verweigert.\n\n' +
|
||||
'• Chrome: Adressleiste klicken → Kamera-Symbol → "Zulassen"\n' +
|
||||
'• Safari: Einstellungen → Website-Einstellungen → Kamera → "Erlauben"\n' +
|
||||
'• Firefox: Adressleiste → Berechtigungen → Kamera → "Erlauben"\n\n' +
|
||||
'Danach Seite neu laden.';
|
||||
break;
|
||||
case 'NotFoundError':
|
||||
errorMessage = 'Keine Kamera gefunden. Bitte überprüfen Sie:\n' +
|
||||
'• Ob eine Kamera am Gerät verfügbar ist\n' +
|
||||
'• Ob andere Apps die Kamera verwenden\n' +
|
||||
'• Gerätekonfiguration in den Browser-Einstellungen';
|
||||
break;
|
||||
case 'NotSupportedError':
|
||||
errorMessage = 'Kamera nicht unterstützt. Bitte verwenden Sie:\n' +
|
||||
'• Chrome, Firefox oder Safari (neueste Version)\n' +
|
||||
'• HTTPS-Verbindung (nicht HTTP)';
|
||||
break;
|
||||
case 'OverconstrainedError':
|
||||
errorMessage = 'Kamera-Einstellungen nicht verfügbar. Versuche mit Standard-Einstellungen...';
|
||||
// Fallback to basic constraints
|
||||
try {
|
||||
const fallbackConstraints = { video: true };
|
||||
const fallbackStream = await navigator.mediaDevices.getUserMedia(fallbackConstraints);
|
||||
if (videoRef.current) {
|
||||
videoRef.current.srcObject = fallbackStream;
|
||||
videoRef.current.play();
|
||||
}
|
||||
setStream(fallbackStream);
|
||||
setError(null);
|
||||
return;
|
||||
} catch (fallbackErr) {
|
||||
console.error('Fallback camera failed:', fallbackErr);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
errorMessage = `Kamera-Fehler (${err.name}): ${err.message}\n\nBitte versuchen Sie:\n• Seite neu laden\n• Browser neu starten\n• Anderen Browser verwenden`;
|
||||
}
|
||||
|
||||
setError(errorMessage);
|
||||
}
|
||||
};
|
||||
|
||||
setupCamera();
|
||||
|
||||
return () => {
|
||||
if (stream) {
|
||||
stream.getTracks().forEach(track => track.stop());
|
||||
setStream(null);
|
||||
}
|
||||
};
|
||||
}, [slug, loading, task, facingMode]);
|
||||
|
||||
// Handle capture
|
||||
const handleCapture = useCallback(async () => {
|
||||
if (!videoRef.current || !canvasRef.current || !task) return;
|
||||
|
||||
setCapturing(true);
|
||||
setIsPulsing(false);
|
||||
|
||||
// Start countdown
|
||||
let count = 3;
|
||||
setCountdown(count);
|
||||
|
||||
const countdownInterval = setInterval(() => {
|
||||
count--;
|
||||
setCountdown(count);
|
||||
if (count <= 0) {
|
||||
clearInterval(countdownInterval);
|
||||
|
||||
// Capture photo
|
||||
const video = videoRef.current;
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const context = canvas.getContext('2d');
|
||||
if (!context || !video) return;
|
||||
|
||||
canvas.width = video.videoWidth;
|
||||
canvas.height = video.videoHeight;
|
||||
context.drawImage(video, 0, 0);
|
||||
|
||||
// Convert to blob
|
||||
canvas.toBlob(async (blob) => {
|
||||
if (blob && task && slug) {
|
||||
try {
|
||||
// Show uploading state
|
||||
setUploading(true);
|
||||
setCapturing(false);
|
||||
setCountdown(3);
|
||||
setError(null);
|
||||
|
||||
// Use emotionSlug directly (backend expects string slug)
|
||||
|
||||
// Convert Blob to File with proper filename
|
||||
const timestamp = Date.now();
|
||||
const fileName = `photo-${timestamp}-${task.id}.jpg`;
|
||||
const file = new File([blob], fileName, {
|
||||
type: 'image/jpeg',
|
||||
lastModified: timestamp
|
||||
});
|
||||
|
||||
console.log('Uploading photo:', {
|
||||
taskId: task.id,
|
||||
emotionSlug,
|
||||
fileName,
|
||||
fileSize: file.size
|
||||
});
|
||||
|
||||
// Upload the photo
|
||||
const photoId = await uploadPhoto(slug, file, task.id, emotionSlug);
|
||||
|
||||
console.log('Upload successful, photo ID:', photoId);
|
||||
|
||||
// Navigate to gallery with success
|
||||
navigate(`/e/${slug}/gallery?task=${task.id}&emotion=${emotionSlug}&uploaded=true`);
|
||||
} catch (error: any) {
|
||||
console.error('Upload failed:', error);
|
||||
setError(`Upload fehlgeschlagen: ${error.message}\n\nFoto wurde erstellt, aber nicht hochgeladen.\nVersuchen Sie es erneut oder wählen Sie ein anderes Foto aus.`);
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
}
|
||||
}, 'image/jpeg', 0.8);
|
||||
|
||||
setCapturing(false);
|
||||
setCountdown(3);
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
// Start pulsing animation
|
||||
setIsPulsing(true);
|
||||
}, [task, emotionSlug, slug, navigate]);
|
||||
|
||||
// Switch camera
|
||||
const switchCamera = () => {
|
||||
setFacingMode(prev => prev === 'user' ? 'environment' : 'user');
|
||||
};
|
||||
|
||||
// Toggle flash (for back camera only)
|
||||
const toggleFlash = () => {
|
||||
if (facingMode !== 'environment') return;
|
||||
setFlashOn(prev => !prev);
|
||||
// TODO: Implement actual flash control if possible
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Page title="Kamera laden...">
|
||||
<div className={`flex flex-col items-center justify-center min-h-[60vh] p-4 ${
|
||||
isDark ? 'text-white' : 'text-gray-900'
|
||||
}`}>
|
||||
<Camera className="h-12 w-12 animate-pulse mb-4 text-pink-500" />
|
||||
<p className="text-sm">Kamera wird gestartet...</p>
|
||||
</div>
|
||||
<BottomNav />
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
async function startUpload() {
|
||||
// Enqueue items for offline-friendly processing
|
||||
for (const it of items) {
|
||||
await queue.add({ slug: slug!, fileName: it.out?.name ?? it.file.name, blob: it.out ?? it.file });
|
||||
}
|
||||
setItems([]);
|
||||
if (error || !task) {
|
||||
return (
|
||||
<Page title="Fehler">
|
||||
<div className={`flex flex-col items-center justify-center min-h-[60vh] p-4 ${
|
||||
isDark ? 'text-white' : 'text-gray-900'
|
||||
}`}>
|
||||
<Camera className="h-12 w-12 text-red-500 mb-4" />
|
||||
<div className="text-center space-y-2">
|
||||
<h2 className="text-xl font-semibold">Kamera nicht verfügbar</h2>
|
||||
<p className="text-sm text-muted-foreground max-w-md">{error}</p>
|
||||
<Button onClick={() => navigate(`/e/${slug}`)} variant="outline" className="mt-4">
|
||||
Zurück zur Startseite
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<BottomNav />
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
if (uploading) {
|
||||
return (
|
||||
<Page title="Foto wird hochgeladen...">
|
||||
<div className={`flex flex-col items-center justify-center min-h-screen p-4 ${
|
||||
isDark ? 'text-white' : 'text-gray-900'
|
||||
}`}>
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-pink-500 mb-4"></div>
|
||||
<h2 className="text-xl font-semibold mb-2">Foto wird hochgeladen</h2>
|
||||
<p className="text-sm text-center text-muted-foreground">Bitte warten... Dies kann einen Moment dauern.</p>
|
||||
<Button
|
||||
onClick={() => navigate(`/e/${slug}/gallery`)}
|
||||
variant="outline"
|
||||
className="mt-6"
|
||||
disabled={true}
|
||||
>
|
||||
Zur Galerie
|
||||
</Button>
|
||||
</div>
|
||||
<BottomNav />
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
const difficultyColor = task.difficulty === 'easy' ? 'text-green-400' :
|
||||
task.difficulty === 'medium' ? 'text-yellow-400' : 'text-red-400';
|
||||
|
||||
return (
|
||||
<Page title="Foto aufnehmen/hochladen">
|
||||
<Input type="file" accept="image/*" multiple capture="environment" onChange={onPick} />
|
||||
<div className="h-3" />
|
||||
<Button onClick={startUpload} disabled={items.length === 0}>Hochladen</Button>
|
||||
<div className="mt-4 space-y-2">
|
||||
{items.map((it, i) => (
|
||||
<div key={i} className="rounded border p-2 text-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="truncate">{it.file.name}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{formatBytes(it.out?.size ?? it.file.size)}
|
||||
</div>
|
||||
</div>
|
||||
{it.done && <div className="text-xs text-muted-foreground">Fertig</div>}
|
||||
{it.error && <div className="text-xs text-red-500">{it.error}</div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<div className="mb-2 text-sm font-medium">Warteschlange</div>
|
||||
{queue.loading ? (
|
||||
<div className="text-sm text-muted-foreground">Lade…</div>
|
||||
) : queue.items.length === 0 ? (
|
||||
<div className="text-sm text-muted-foreground">Keine offenen Uploads.</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{queue.items.map((q) => (
|
||||
<div key={q.id} className="rounded border p-2 text-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="truncate">{q.fileName}</div>
|
||||
<div className="text-xs text-muted-foreground">{q.status}{q.status==='uploading' && typeof q.id==='number' ? ` • ${progressMap[q.id] ?? 0}%` : ''}</div>
|
||||
<Page title={task.title}>
|
||||
<div className={`min-h-screen flex flex-col ${
|
||||
isDark ? 'bg-gray-900 text-white' : 'bg-black text-white'
|
||||
}`}>
|
||||
{/* Camera Preview Container */}
|
||||
<div className="flex-1 relative overflow-hidden">
|
||||
{/* Video Background */}
|
||||
<video
|
||||
ref={videoRef}
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
playsInline
|
||||
muted
|
||||
/>
|
||||
|
||||
{/* Task Info Overlay */}
|
||||
<div className="absolute top-4 left-4 right-4 z-10">
|
||||
<div className="space-y-2 bg-black/40 backdrop-blur-sm rounded-xl p-4 border border-white/20">
|
||||
<h1 className="text-xl font-bold">{task.title}</h1>
|
||||
<p className="text-sm leading-relaxed opacity-90">{task.description}</p>
|
||||
{task.instructions && (
|
||||
<div className="text-xs italic opacity-80 mt-2 pt-2 border-t border-white/20">
|
||||
💡 {task.instructions}
|
||||
</div>
|
||||
{q.status === 'uploading' && typeof q.id==='number' && (
|
||||
<div className="mt-2 h-2 w-full rounded bg-gray-200 dark:bg-gray-700">
|
||||
<div className="h-2 rounded bg-emerald-500" style={{ width: `${progressMap[q.id] ?? 0}%` }} />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<span className={`text-xs font-medium ${difficultyColor}`}>
|
||||
Schwierigkeit: {task.difficulty}
|
||||
</span>
|
||||
{emotionSlug && (
|
||||
<span className="text-xs opacity-80">
|
||||
Stimmung: {task.emotion?.name || emotionSlug}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<div className="flex gap-2">
|
||||
<Button variant="secondary" onClick={queue.retryAll}>Erneut versuchen</Button>
|
||||
<Button variant="secondary" onClick={queue.clearFinished}>Erledigte entfernen</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Camera Controls */}
|
||||
<div className="absolute bottom-20 left-4 right-4 z-10">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
{/* Flash Button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={toggleFlash}
|
||||
disabled={facingMode === 'user'}
|
||||
className="h-12 w-12 rounded-full bg-black/40 backdrop-blur-sm border border-white/20"
|
||||
>
|
||||
{flashOn ? <Zap className="h-6 w-6 text-yellow-400" /> : <ZapOff className="h-6 w-6" />}
|
||||
</Button>
|
||||
|
||||
{/* Capture Button */}
|
||||
<div className="relative">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={handleCapture}
|
||||
disabled={capturing}
|
||||
className={`
|
||||
h-20 w-20 rounded-full bg-white/20 backdrop-blur-sm border-4 border-white/30
|
||||
${isPulsing ? 'animate-pulse-ring' : ''}
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
`}
|
||||
>
|
||||
<div className="relative">
|
||||
<Camera className="h-8 w-8" />
|
||||
{capturing && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-lg font-bold text-white">{countdown}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Button>
|
||||
{/* Pulsing Ring Animation */}
|
||||
{isPulsing && (
|
||||
<div className="absolute inset-0 rounded-full h-20 w-20 border-4 border-pink-400/50 animate-ping" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Switch Camera Button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={switchCamera}
|
||||
className="h-12 w-12 rounded-full bg-black/40 backdrop-blur-sm border border-white/20"
|
||||
>
|
||||
<RotateCcw className="h-6 w-6" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hidden Canvas for Capture */}
|
||||
<canvas ref={canvasRef} className="hidden" />
|
||||
</div>
|
||||
|
||||
<BottomNav />
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
@keyframes pulse-ring {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.animate-ping {
|
||||
animation: pulse-ring 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
|
||||
}
|
||||
`}</style>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -10,20 +10,69 @@ export function usePollGalleryDelta(slug: string) {
|
||||
const timer = useRef<number | null>(null);
|
||||
|
||||
async function fetchDelta() {
|
||||
const qs = latestAt.current ? `?since=${encodeURIComponent(latestAt.current)}` : '';
|
||||
const res = await fetch(`/api/v1/events/${encodeURIComponent(slug)}/photos${qs}`, {
|
||||
headers: { 'Cache-Control': 'no-store' },
|
||||
});
|
||||
if (res.status === 304) return;
|
||||
const json = await res.json();
|
||||
if (Array.isArray(json.data)) {
|
||||
const added = json.data.length;
|
||||
const merged = latestAt.current ? [...json.data, ...photos] : json.data;
|
||||
if (added > 0 && latestAt.current) setNewCount((c) => c + added);
|
||||
setPhotos(merged);
|
||||
try {
|
||||
const qs = latestAt.current ? `?since=${encodeURIComponent(latestAt.current)}` : '';
|
||||
const res = await fetch(`/api/v1/events/${encodeURIComponent(slug)}/photos${qs}`, {
|
||||
headers: { 'Cache-Control': 'no-store' },
|
||||
});
|
||||
|
||||
if (res.status === 304) return; // No new content
|
||||
|
||||
if (!res.ok) {
|
||||
console.warn(`Gallery API error: ${res.status} ${res.statusText}`);
|
||||
return; // Don't update state on error
|
||||
}
|
||||
|
||||
const json = await res.json();
|
||||
|
||||
// Handle different response formats
|
||||
const newPhotos = Array.isArray(json.data) ? json.data :
|
||||
Array.isArray(json) ? json :
|
||||
json.photos || [];
|
||||
|
||||
if (newPhotos.length > 0) {
|
||||
const added = newPhotos.length;
|
||||
|
||||
if (latestAt.current) {
|
||||
// Delta mode: Add new photos to existing list
|
||||
const merged = [...newPhotos, ...photos];
|
||||
// Remove duplicates by ID
|
||||
const uniquePhotos = merged.filter((photo, index, self) =>
|
||||
index === self.findIndex(p => p.id === photo.id)
|
||||
);
|
||||
setPhotos(uniquePhotos);
|
||||
if (added > 0) setNewCount((c) => c + added);
|
||||
} else {
|
||||
// Initial load: Set all photos
|
||||
setPhotos(newPhotos);
|
||||
}
|
||||
|
||||
// Update latest timestamp
|
||||
if (json.latest_photo_at) {
|
||||
latestAt.current = json.latest_photo_at;
|
||||
} else if (newPhotos.length > 0) {
|
||||
// Fallback: use newest photo timestamp
|
||||
const newest = newPhotos.reduce((latest: number, photo: any) => {
|
||||
const photoTime = new Date(photo.created_at || photo.created_at_timestamp || 0).getTime();
|
||||
return photoTime > latest ? photoTime : latest;
|
||||
}, 0);
|
||||
latestAt.current = new Date(newest).toISOString();
|
||||
}
|
||||
} else if (latestAt.current) {
|
||||
// Delta mode but no new photos: keep existing photos
|
||||
console.log('No new photos, keeping existing gallery state');
|
||||
// Don't update photos state
|
||||
} else {
|
||||
// Initial load with no photos
|
||||
setPhotos([]);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.error('Gallery polling error:', error);
|
||||
setLoading(false);
|
||||
// Don't update state on error - keep previous photos
|
||||
}
|
||||
if (json.latest_photo_at) latestAt.current = json.latest_photo_at;
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -21,7 +21,7 @@ function HomeLayout() {
|
||||
const { slug } = useParams();
|
||||
return (
|
||||
<div className="pb-16">
|
||||
<Header title={slug ? `Event: ${slug}` : 'Fotospiel'} />
|
||||
{slug ? <Header slug={slug} /> : <Header title="Event" />}
|
||||
<div className="px-4 py-3">
|
||||
<Outlet />
|
||||
</div>
|
||||
|
||||
42
resources/js/guest/services/eventApi.ts
Normal file
42
resources/js/guest/services/eventApi.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import { getDeviceId } from '../lib/device';
|
||||
|
||||
export interface EventData {
|
||||
id: number;
|
||||
slug: string;
|
||||
name: string;
|
||||
default_locale: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
type?: {
|
||||
slug: string;
|
||||
name: string;
|
||||
icon: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface EventStats {
|
||||
onlineGuests: number;
|
||||
tasksSolved: number;
|
||||
latestPhotoAt: string | null;
|
||||
}
|
||||
|
||||
export async function fetchEvent(slug: string): Promise<EventData> {
|
||||
const res = await fetch(`/api/v1/events/${slug}`);
|
||||
if (!res.ok) throw new Error('Event fetch failed');
|
||||
return await res.json();
|
||||
}
|
||||
|
||||
export async function fetchStats(slug: string): Promise<EventStats> {
|
||||
const res = await fetch(`/api/v1/events/${slug}/stats`, {
|
||||
headers: {
|
||||
'X-Device-Id': getDeviceId(),
|
||||
},
|
||||
});
|
||||
if (!res.ok) throw new Error('Stats fetch failed');
|
||||
const json = await res.json();
|
||||
return {
|
||||
onlineGuests: json.onlineGuests ?? 0,
|
||||
tasksSolved: json.tasksSolved ?? 0,
|
||||
latestPhotoAt: json.latestPhotoAt ?? null,
|
||||
};
|
||||
}
|
||||
@@ -1,15 +1,102 @@
|
||||
import { getDeviceId } from '../lib/device';
|
||||
|
||||
function getCsrfToken(): string | null {
|
||||
// Method 1: Meta tag (preferred for SPA)
|
||||
const metaToken = document.querySelector('meta[name="csrf-token"]');
|
||||
if (metaToken) {
|
||||
return (metaToken as HTMLMetaElement).getAttribute('content') || null;
|
||||
}
|
||||
|
||||
// Method 2: XSRF-TOKEN cookie (Sanctum fallback)
|
||||
const name = 'XSRF-TOKEN=';
|
||||
const decodedCookie = decodeURIComponent(document.cookie);
|
||||
const ca = decodedCookie.split(';');
|
||||
for (let i = 0; i < ca.length; i++) {
|
||||
let c = ca[i].trimStart();
|
||||
if (c.startsWith(name)) {
|
||||
const token = c.substring(name.length);
|
||||
try {
|
||||
// Decode base64 if needed
|
||||
return decodeURIComponent(atob(token));
|
||||
} catch {
|
||||
return token;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.warn('No CSRF token found - API requests may fail');
|
||||
return null;
|
||||
}
|
||||
|
||||
function getCsrfHeaders(): Record<string, string> {
|
||||
const token = getCsrfToken();
|
||||
const headers: Record<string, string> = {
|
||||
'X-Device-Id': getDeviceId(),
|
||||
'Accept': 'application/json',
|
||||
};
|
||||
|
||||
if (token) {
|
||||
headers['X-CSRF-TOKEN'] = token;
|
||||
headers['X-XSRF-TOKEN'] = token;
|
||||
}
|
||||
|
||||
return headers;
|
||||
}
|
||||
|
||||
export async function likePhoto(id: number): Promise<number> {
|
||||
const headers = getCsrfHeaders();
|
||||
|
||||
const res = await fetch(`/api/v1/photos/${id}/like`, {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'X-Device-Id': getDeviceId(),
|
||||
...headers,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
if (!res.ok) throw new Error('like failed');
|
||||
|
||||
if (!res.ok) {
|
||||
const errorText = await res.text();
|
||||
if (res.status === 419) {
|
||||
throw new Error('CSRF Token mismatch. This usually means:\n\n' +
|
||||
'1. The page needs to be refreshed\n' +
|
||||
'2. Check if <meta name="csrf-token"> is present in HTML source\n' +
|
||||
'3. API routes might need CSRF exemption in VerifyCsrfToken middleware');
|
||||
}
|
||||
throw new Error(`Like failed: ${res.status} - ${errorText}`);
|
||||
}
|
||||
|
||||
const json = await res.json();
|
||||
return json.likes_count ?? 0;
|
||||
return json.likes_count ?? json.data?.likes_count ?? 0;
|
||||
}
|
||||
|
||||
export async function uploadPhoto(slug: string, file: File, taskId?: number, emotionSlug?: string): Promise<number> {
|
||||
const formData = new FormData();
|
||||
formData.append('photo', file, `photo-${Date.now()}.jpg`);
|
||||
if (taskId) formData.append('task_id', taskId.toString());
|
||||
if (emotionSlug) formData.append('emotion_slug', emotionSlug);
|
||||
formData.append('device_id', getDeviceId());
|
||||
|
||||
const res = await fetch(`/api/v1/events/${slug}/upload`, {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
body: formData,
|
||||
// Don't set Content-Type for FormData - let browser handle it with boundary
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const errorText = await res.text();
|
||||
if (res.status === 419) {
|
||||
throw new Error('CSRF Token mismatch during upload.\n\n' +
|
||||
'This usually means:\n' +
|
||||
'1. API routes need CSRF exemption in VerifyCsrfToken middleware\n' +
|
||||
'2. Check if <meta name="csrf-token"> is present in page source\n' +
|
||||
'3. The page might need to be refreshed');
|
||||
}
|
||||
throw new Error(`Upload failed: ${res.status} - ${errorText}`);
|
||||
}
|
||||
|
||||
const json = await res.json();
|
||||
return json.photo_id ?? json.id ?? json.data?.id ?? 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ config('app.name', 'Fotospiel') }}</title>
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
@vite('resources/js/guest/main.tsx')
|
||||
</head>
|
||||
<body>
|
||||
|
||||
20
routes/api.php
Normal file
20
routes/api.php
Normal file
@@ -0,0 +1,20 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
use App\Http\Controllers\Api\EventPublicController;
|
||||
|
||||
// API routes without CSRF protection for guest PWA (stateless)
|
||||
Route::prefix('v1')->name('api.v1.')->group(function () {
|
||||
// GET routes (read-only)
|
||||
Route::get('/events/{slug}', [EventPublicController::class, 'event'])->name('events.show');
|
||||
Route::get('/events/{slug}/stats', [EventPublicController::class, 'stats'])->name('events.stats');
|
||||
Route::get('/events/{slug}/emotions', [EventPublicController::class, 'emotions'])->name('events.emotions');
|
||||
Route::get('/events/{slug}/tasks', [EventPublicController::class, 'tasks'])->name('events.tasks');
|
||||
Route::get('/events/{slug}/photos', [EventPublicController::class, 'photos'])->name('events.photos');
|
||||
Route::get('/photos/{id}', [EventPublicController::class, 'photo'])->name('photos.show');
|
||||
|
||||
// POST routes without CSRF (guest PWA, stateless)
|
||||
Route::post('/photos/{id}/like', [EventPublicController::class, 'like'])->name('photos.like');
|
||||
Route::post('/events/{slug}/upload', [EventPublicController::class, 'upload'])->name('events.upload');
|
||||
});
|
||||
@@ -22,13 +22,6 @@ Route::view('/legal/{any?}', 'guest')->where('any', '.*');
|
||||
|
||||
// Minimal public API for Guest PWA (stateless; no CSRF)
|
||||
Route::prefix('api/v1')->withoutMiddleware([\App\Http\Middleware\VerifyCsrfToken::class])->group(function () {
|
||||
Route::get('/events/{slug}/stats', [\App\Http\Controllers\Api\EventPublicController::class, 'stats'])->middleware('throttle:60,1');
|
||||
Route::get('/events/{slug}/photos', [\App\Http\Controllers\Api\EventPublicController::class, 'photos'])->middleware('throttle:60,1');
|
||||
Route::get('/events/{slug}', [\App\Http\Controllers\Api\EventPublicController::class, 'event'])->middleware('throttle:60,1');
|
||||
Route::get('/photos/{id}', [\App\Http\Controllers\Api\EventPublicController::class, 'photo'])->whereNumber('id')->middleware('throttle:120,1');
|
||||
Route::post('/photos/{id}/like', [\App\Http\Controllers\Api\EventPublicController::class, 'like'])->whereNumber('id')->middleware('throttle:60,1');
|
||||
Route::post('/events/{slug}/photos', [\App\Http\Controllers\Api\EventPublicController::class, 'upload'])->middleware('throttle:30,1');
|
||||
|
||||
// Public legal pages
|
||||
Route::get('/legal/{slug}', [\App\Http\Controllers\Api\LegalController::class, 'show']);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user