mirror of
https://github.com/pacnpal/thrillwiki_laravel.git
synced 2025-12-20 08:11:10 -05:00
Add enums for ReviewStatus, TrackMaterial, LaunchType, RideCategory, and RollerCoasterType; implement Designer and RideModel models; create migrations for ride_models and helpful_votes tables; enhance RideGalleryComponent documentation
This commit is contained in:
pacnpal
121
resources/views/livewire/ride-gallery.blade.php
Normal file
121
resources/views/livewire/ride-gallery.blade.php
Normal file
@@ -0,0 +1,121 @@
|
||||
<div class="space-y-6">
|
||||
{{-- Upload Area --}}
|
||||
<div class="flex justify-end">
|
||||
<button type="button"
|
||||
wire:click="toggleUploadForm"
|
||||
class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
|
||||
{{ $showUploadForm ? 'Cancel Upload' : 'Upload Photo' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{-- Upload Form --}}
|
||||
@if($showUploadForm)
|
||||
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-6">
|
||||
<form wire:submit="save">
|
||||
<div class="space-y-4">
|
||||
{{-- Photo Upload --}}
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Photo</label>
|
||||
<div class="mt-1 flex items-center">
|
||||
<input type="file"
|
||||
wire:model="photo"
|
||||
accept="image/*"
|
||||
class="sr-only"
|
||||
id="photo-upload">
|
||||
<label for="photo-upload"
|
||||
class="cursor-pointer inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
|
||||
Choose File
|
||||
</label>
|
||||
@if($photo)
|
||||
<span class="ml-3 text-sm text-gray-500 dark:text-gray-400">{{ $photo->getClientOriginalName() }}</span>
|
||||
@endif
|
||||
</div>
|
||||
@error('photo') <span class="mt-1 text-sm text-red-500">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
{{-- Caption --}}
|
||||
<div>
|
||||
<label for="caption" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Caption</label>
|
||||
<div class="mt-1">
|
||||
<input type="text"
|
||||
id="caption"
|
||||
wire:model="caption"
|
||||
class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-white">
|
||||
@error('caption') <span class="mt-1 text-sm text-red-500">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Submit Button --}}
|
||||
<div class="flex justify-end">
|
||||
<button type="submit"
|
||||
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
|
||||
Upload Photo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Photo Grid --}}
|
||||
@if($photos->count() > 0)
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
@foreach($photos as $photo)
|
||||
<div class="relative group bg-white dark:bg-gray-800 p-2 rounded-lg shadow hover:shadow-lg transition-shadow">
|
||||
<div class="aspect-w-16 aspect-h-9">
|
||||
<img src="{{ Storage::url($photo->path) }}"
|
||||
alt="{{ $photo->caption }}"
|
||||
class="object-cover rounded">
|
||||
</div>
|
||||
|
||||
{{-- Caption --}}
|
||||
@if($photo->caption)
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">{{ $photo->caption }}</p>
|
||||
@endif
|
||||
|
||||
{{-- Actions --}}
|
||||
<div class="absolute top-2 right-2 space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{{-- Set as Featured --}}
|
||||
@if($ride->featured_photo_id !== $photo->id)
|
||||
<button type="button"
|
||||
wire:click="setFeaturedPhoto({{ $photo->id }})"
|
||||
class="inline-flex items-center p-1 border border-transparent rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3l14 9-14 9V3z"/>
|
||||
</svg>
|
||||
</button>
|
||||
@endif
|
||||
|
||||
{{-- Delete --}}
|
||||
<button type="button"
|
||||
wire:click="deletePhoto({{ $photo->id }})"
|
||||
wire:confirm="Are you sure you want to delete this photo?"
|
||||
class="inline-flex items-center p-1 border border-transparent rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{-- Featured Badge --}}
|
||||
@if($ride->featured_photo_id === $photo->id)
|
||||
<div class="absolute top-2 left-2">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800">
|
||||
Featured
|
||||
</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
{{-- Pagination --}}
|
||||
<div class="mt-4">
|
||||
{{ $photos->links() }}
|
||||
</div>
|
||||
@else
|
||||
<div class="text-center py-12">
|
||||
<p class="text-gray-500 dark:text-gray-400">No photos uploaded yet.</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
Reference in New Issue
Block a user