mirror of
https://github.com/pacnpal/thrillwiki_laravel.git
synced 2025-12-20 11:51:11 -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
127
resources/views/livewire/ride-list.blade.php
Normal file
127
resources/views/livewire/ride-list.blade.php
Normal file
@@ -0,0 +1,127 @@
|
||||
<div class="space-y-4">
|
||||
{{-- Control Panel --}}
|
||||
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{{-- Search --}}
|
||||
<div>
|
||||
<label for="search" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Search</label>
|
||||
<input type="search"
|
||||
id="search"
|
||||
wire:model.live="search"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white sm:text-sm"
|
||||
placeholder="Search rides...">
|
||||
</div>
|
||||
|
||||
{{-- Category Filter --}}
|
||||
<div>
|
||||
<label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Category</label>
|
||||
<select id="category"
|
||||
wire:model.live="category"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white sm:text-sm">
|
||||
<option value="">All Categories</option>
|
||||
@foreach($this->categories as $value => $label)
|
||||
<option value="{{ $value }}">{{ $label }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{{-- View Toggle --}}
|
||||
<div class="flex items-end justify-end">
|
||||
<button type="button"
|
||||
wire:click="toggleView"
|
||||
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 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
|
||||
<span>{{ $viewMode === 'grid' ? 'Switch to List' : 'Switch to Grid' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Rides List/Grid --}}
|
||||
<div>
|
||||
@if($viewMode === 'grid')
|
||||
{{-- Grid View --}}
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
@foreach($rides as $ride)
|
||||
<div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-lg">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
|
||||
<a href="{{ route('rides.show', $ride) }}" class="hover:text-primary-600 dark:hover:text-primary-400">
|
||||
{{ $ride->name }}
|
||||
</a>
|
||||
</h3>
|
||||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-{{ $ride->status === 'OPERATING' ? 'green' : 'red' }}-100 text-{{ $ride->status === 'OPERATING' ? 'green' : 'red' }}-800">
|
||||
{{ $ride->status->label() }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ $ride->park->name }}
|
||||
</p>
|
||||
@if($ride->parkArea)
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ $ride->parkArea->name }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between items-center">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
||||
{{ $ride->category->label() }}
|
||||
</span>
|
||||
@if($ride->average_rating)
|
||||
<span class="inline-flex items-center text-sm text-yellow-500">
|
||||
<svg class="h-5 w-5 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
||||
</svg>
|
||||
{{ number_format($ride->average_rating, 1) }}
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
{{-- List View --}}
|
||||
<div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-lg">
|
||||
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
@foreach($rides as $ride)
|
||||
<li class="px-4 py-4 sm:px-6 hover:bg-gray-50 dark:hover:bg-gray-700">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="text-sm font-medium text-gray-900 dark:text-white truncate">
|
||||
<a href="{{ route('rides.show', $ride) }}" class="hover:text-primary-600 dark:hover:text-primary-400">
|
||||
{{ $ride->name }}
|
||||
</a>
|
||||
</h3>
|
||||
<div class="mt-2 flex">
|
||||
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ $ride->park->name }}
|
||||
@if($ride->parkArea)
|
||||
<span class="px-2">•</span>
|
||||
{{ $ride->parkArea->name }}
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-end">
|
||||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-{{ $ride->status === 'OPERATING' ? 'green' : 'red' }}-100 text-{{ $ride->status === 'OPERATING' ? 'green' : 'red' }}-800">
|
||||
{{ $ride->status->label() }}
|
||||
</span>
|
||||
<span class="mt-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
||||
{{ $ride->category->label() }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- Pagination --}}
|
||||
<div class="mt-4">
|
||||
{{ $rides->links() }}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user