mirror of
https://github.com/pacnpal/thrillwiki_laravel.git
synced 2025-12-20 07: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
249
resources/views/livewire/ride-form.blade.php
Normal file
249
resources/views/livewire/ride-form.blade.php
Normal file
@@ -0,0 +1,249 @@
|
||||
<div class="space-y-6">
|
||||
<form wire:submit="save" class="space-y-8 divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{{-- Basic Information --}}
|
||||
<div class="space-y-6 sm:space-y-5">
|
||||
<div>
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white">Basic Information</h3>
|
||||
<p class="mt-1 max-w-2xl text-sm text-gray-500 dark:text-gray-400">
|
||||
Provide the basic details about this ride.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6 sm:space-y-5">
|
||||
{{-- Name --}}
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
|
||||
<label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 sm:mt-px sm:pt-2">
|
||||
Name
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<input type="text"
|
||||
id="name"
|
||||
wire:model="state.name"
|
||||
class="max-w-lg block w-full shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-white">
|
||||
@error('state.name') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Park --}}
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
|
||||
<label for="park_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 sm:mt-px sm:pt-2">
|
||||
Park
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<select id="park_id"
|
||||
wire:model.live="state.park_id"
|
||||
class="max-w-lg block focus:ring-primary-500 focus:border-primary-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-white">
|
||||
<option value="">Select a park</option>
|
||||
@foreach($this->parks as $park)
|
||||
<option value="{{ $park->id }}">{{ $park->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('state.park_id') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Park Area --}}
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
|
||||
<label for="park_area_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 sm:mt-px sm:pt-2">
|
||||
Park Area
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<select id="park_area_id"
|
||||
wire:model="state.park_area_id"
|
||||
class="max-w-lg block focus:ring-primary-500 focus:border-primary-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-white">
|
||||
<option value="">Select an area</option>
|
||||
@foreach($this->parkAreas as $area)
|
||||
<option value="{{ $area->id }}">{{ $area->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('state.park_area_id') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Category --}}
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
|
||||
<label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300 sm:mt-px sm:pt-2">
|
||||
Category
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<select id="category"
|
||||
wire:model.live="state.category"
|
||||
class="max-w-lg block focus:ring-primary-500 focus:border-primary-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-white">
|
||||
@foreach(App\Enums\RideCategory::cases() as $category)
|
||||
<option value="{{ $category->value }}">{{ $category->label() }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('state.category') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Status --}}
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
|
||||
<label for="status" class="block text-sm font-medium text-gray-700 dark:text-gray-300 sm:mt-px sm:pt-2">
|
||||
Status
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<select id="status"
|
||||
wire:model="state.status"
|
||||
class="max-w-lg block focus:ring-primary-500 focus:border-primary-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-white">
|
||||
@foreach(App\Enums\RideStatus::cases() as $status)
|
||||
<option value="{{ $status->value }}">{{ $status->label() }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('state.status') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Description --}}
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
|
||||
<label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 sm:mt-px sm:pt-2">
|
||||
Description
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<textarea id="description"
|
||||
wire:model="state.description"
|
||||
rows="3"
|
||||
class="max-w-lg shadow-sm block w-full focus:ring-primary-500 focus:border-primary-500 sm:text-sm border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-white"></textarea>
|
||||
@error('state.description') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Technical Details --}}
|
||||
<div class="pt-8 space-y-6 sm:space-y-5">
|
||||
<div>
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white">Technical Details</h3>
|
||||
<p class="mt-1 max-w-2xl text-sm text-gray-500 dark:text-gray-400">
|
||||
Specify the technical specifications and requirements.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6 sm:space-y-5">
|
||||
{{-- Manufacturer --}}
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
|
||||
<label for="manufacturer_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 sm:mt-px sm:pt-2">
|
||||
Manufacturer
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<select id="manufacturer_id"
|
||||
wire:model="state.manufacturer_id"
|
||||
class="max-w-lg block focus:ring-primary-500 focus:border-primary-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-white">
|
||||
<option value="">Select a manufacturer</option>
|
||||
@foreach($this->manufacturers as $manufacturer)
|
||||
<option value="{{ $manufacturer->id }}">{{ $manufacturer->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('state.manufacturer_id') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Designer --}}
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
|
||||
<label for="designer_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 sm:mt-px sm:pt-2">
|
||||
Designer
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<select id="designer_id"
|
||||
wire:model="state.designer_id"
|
||||
class="max-w-lg block focus:ring-primary-500 focus:border-primary-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-white">
|
||||
<option value="">Select a designer</option>
|
||||
@foreach($this->designers as $designer)
|
||||
<option value="{{ $designer->id }}">{{ $designer->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('state.designer_id') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Height Requirements --}}
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
|
||||
<div class="col-span-3 grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="min_height_in" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Minimum Height (inches)
|
||||
</label>
|
||||
<div class="mt-1">
|
||||
<input type="number"
|
||||
id="min_height_in"
|
||||
wire:model="state.min_height_in"
|
||||
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('state.min_height_in') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="max_height_in" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Maximum Height (inches)
|
||||
</label>
|
||||
<div class="mt-1">
|
||||
<input type="number"
|
||||
id="max_height_in"
|
||||
wire:model="state.max_height_in"
|
||||
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('state.max_height_in') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Capacity and Duration --}}
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
|
||||
<div class="col-span-3 grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="capacity_per_hour" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Capacity (per hour)
|
||||
</label>
|
||||
<div class="mt-1">
|
||||
<input type="number"
|
||||
id="capacity_per_hour"
|
||||
wire:model="state.capacity_per_hour"
|
||||
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('state.capacity_per_hour') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="ride_duration_seconds" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Duration (seconds)
|
||||
</label>
|
||||
<div class="mt-1">
|
||||
<input type="number"
|
||||
id="ride_duration_seconds"
|
||||
wire:model="state.ride_duration_seconds"
|
||||
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('state.ride_duration_seconds') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Coaster Stats (if applicable) --}}
|
||||
@if($state['category'] === App\Enums\RideCategory::ROLLER_COASTER->value)
|
||||
<div class="pt-8 space-y-6 sm:space-y-5">
|
||||
<div>
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white">Roller Coaster Details</h3>
|
||||
<p class="mt-1 max-w-2xl text-sm text-gray-500 dark:text-gray-400">
|
||||
Additional specifications for roller coasters.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@include('livewire.partials._coaster-stats-form')
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Form Actions --}}
|
||||
<div class="pt-5">
|
||||
<div class="flex justify-end">
|
||||
<a href="{{ route('rides.index') }}"
|
||||
class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 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">
|
||||
Cancel
|
||||
</a>
|
||||
<button type="submit"
|
||||
class="ml-3 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 dark:hover:bg-primary-500">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
Reference in New Issue
Block a user