tiradoe/movie-night-nuevo
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

set up list management
Some checks are pending
linter / quality (push) Waiting to run
Details
tests / ci (push) Waiting to run
Details

Browse source
This commit is contained in:
Edward Tirado Jr 2025-12-13 19:33:52 -06:00
parent 0c42bef077
commit 73d6578857
26 changed files with 495 additions and 230 deletions
Download patch file Download diff file Expand all files Collapse all files

1
resources/css/app.css
View file

@ -1,4 +1,5 @@
@import 'tailwindcss';
@import '@fortawesome/fontawesome-free/css/all.css';
@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';

6
resources/views/components/header.blade.php
View file

@ -1,9 +1,9 @@
<div class="text-white flex flex-col gap-5 sm:flex-row sm:justify-between sm:m-5 mt-5 items-center">
<x-site-logo/>
<div class="text-white flex flex-col gap-5 sm:flex-row justify-between mt-5 items-center pb-5 border-b-2">
<x-ui.site-logo/>
@auth
<ul class="flex flex-row gap-4 font-bold text-2xl my-auto">
<li><a href="/lists" wire:navigate>Lists</a></li>
<li>Schedule</li>
<!-- <li>Schedule</li> -->
<li>
<form method="POST" action="{{ route('logout') }}" class="inline">
@csrf

124
resources/views/components/layouts/app/header.blade.php
View file

@ -1,124 +0,0 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
<head>
@include('partials.head')
</head>
<body class="min-h-screen bg-white dark:bg-zinc-800">
<flux:header container class="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
<flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />
<a href="{{ route('dashboard') }}" class="ms-2 me-5 flex items-center space-x-2 rtl:space-x-reverse lg:ms-0" wire:navigate>
<x-app-logo />
</a>
<flux:navbar class="-mb-px max-lg:hidden">
<flux:navbar.item icon="layout-grid" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
{{ __('Dashboard') }}
</flux:navbar.item>
</flux:navbar>
<flux:spacer />
<flux:navbar class="me-1.5 space-x-0.5 rtl:space-x-reverse py-0!">
<flux:tooltip :content="__('Search')" position="bottom">
<flux:navbar.item class="!h-10 [&>div>svg]:size-5" icon="magnifying-glass" href="#" :label="__('Search')" />
</flux:tooltip>
<flux:tooltip :content="__('Repository')" position="bottom">
<flux:navbar.item
class="h-10 max-lg:hidden [&>div>svg]:size-5"
icon="folder-git-2"
href="https://github.com/laravel/livewire-starter-kit"
target="_blank"
:label="__('Repository')"
/>
</flux:tooltip>
<flux:tooltip :content="__('Documentation')" position="bottom">
<flux:navbar.item
class="h-10 max-lg:hidden [&>div>svg]:size-5"
icon="book-open-text"
href="https://laravel.com/docs/starter-kits#livewire"
target="_blank"
label="Documentation"
/>
</flux:tooltip>
</flux:navbar>
<!-- Desktop User Menu -->
<flux:dropdown position="top" align="end">
<flux:profile
class="cursor-pointer"
:initials="auth()->user()->initials()"
/>
<flux:menu>
<flux:menu.radio.group>
<div class="p-0 text-sm font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
<span class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
<span
class="flex h-full w-full items-center justify-center rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white"
>
{{ auth()->user()->initials() }}
</span>
</span>
<div class="grid flex-1 text-start text-sm leading-tight">
<span class="truncate font-semibold">{{ auth()->user()->name }}</span>
<span class="truncate text-xs">{{ auth()->user()->email }}</span>
</div>
</div>
</div>
</flux:menu.radio.group>
<flux:menu.separator />
<flux:menu.radio.group>
<flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>{{ __('Settings') }}</flux:menu.item>
</flux:menu.radio.group>
<flux:menu.separator />
<form method="POST" action="{{ route('logout') }}" class="w-full">
@csrf
<flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full">
{{ __('Log Out') }}
</flux:menu.item>
</form>
</flux:menu>
</flux:dropdown>
</flux:header>
<!-- Mobile Menu -->
<flux:sidebar stashable sticky class="lg:hidden border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
<flux:sidebar.toggle class="lg:hidden" icon="x-mark" />
<a href="{{ route('dashboard') }}" class="ms-1 flex items-center space-x-2 rtl:space-x-reverse" wire:navigate>
<x-app-logo />
</a>
<flux:navlist variant="outline">
<flux:navlist.group :heading="__('Platform')">
<flux:navlist.item icon="layout-grid" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
{{ __('Dashboard') }}
</flux:navlist.item>
</flux:navlist.group>
</flux:navlist>
<flux:spacer />
<flux:navlist variant="outline">
<flux:navlist.item icon="folder-git-2" href="https://github.com/laravel/livewire-starter-kit" target="_blank">
{{ __('Repository') }}
</flux:navlist.item>
<flux:navlist.item icon="book-open-text" href="https://laravel.com/docs/starter-kits#livewire" target="_blank">
{{ __('Documentation') }}
</flux:navlist.item>
</flux:navlist>
</flux:sidebar>
{{ $slot }}
@fluxScripts
</body>
</html>

6
resources/views/components/movie.blade.php
View file

@ -1,5 +1,5 @@
@props(['movie'])
<div class="flex flex-col bg-gray-500 w-full h-full">
<img class="object-fill col-span-2" src="{{$movie->poster}}" alt="{{$movie->title}}">
<!-- <span class="text-center p-2">{{$movie->title}}</span> -->
<div class="flex flex-col bg-gray-500 w-full h-full cursor-pointer hover:bg-gray-600 transition-colors"
wire:click="$dispatch('openMovieDetails', { movieId: {{ $movie->id }} })">
<img class="w-full h-full object-cover" src="{{$movie->poster}}" alt="{{$movie->title}}">
</div>

23
resources/views/components/settings/layout.blade.php
View file

@ -1,23 +0,0 @@
<div class="flex items-start max-md:flex-col">
<div class="me-10 w-full pb-4 md:w-[220px]">
<flux:navlist>
<flux:navlist.item :href="route('profile.edit')" wire:navigate>{{ __('Profile') }}</flux:navlist.item>
<flux:navlist.item :href="route('user-password.edit')" wire:navigate>{{ __('Password') }}</flux:navlist.item>
@if (Laravel\Fortify\Features::canManageTwoFactorAuthentication())
<flux:navlist.item :href="route('two-factor.show')" wire:navigate>{{ __('Two-Factor Auth') }}</flux:navlist.item>
@endif
<flux:navlist.item :href="route('appearance.edit')" wire:navigate>{{ __('Appearance') }}</flux:navlist.item>
</flux:navlist>
</div>
<flux:separator class="md:hidden" />
<div class="flex-1 self-stretch max-md:pt-6">
<flux:heading>{{ $heading ?? '' }}</flux:heading>
<flux:subheading>{{ $subheading ?? '' }}</flux:subheading>
<div class="mt-5 w-full max-w-lg">
{{ $slot }}
</div>
</div>
</div>

44
resources/views/components/slide-over.blade.php Normal file
View file

@ -0,0 +1,44 @@
@props(['wire:model'])
<div x-data="{ open: @entangle($attributes->wire('model')) }" x-show="open" @keydown.escape.window="open = false">
<!-- Overlay -->
<div x-show="open"
x-transition:enter="transition-opacity ease-linear duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition-opacity ease-linear duration-300"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed inset-0 bg-gray-900/80 z-40"
@click="open = false"></div>
<!-- Slide-over panel -->
<div x-show="open"
x-transition:enter="transform transition ease-in-out duration-500"
x-transition:enter-start="translate-x-full"
x-transition:enter-end="translate-x-0"
x-transition:leave="transform transition ease-in-out duration-500"
x-transition:leave-start="translate-x-0"
x-transition:leave-end="translate-x-full"
class="fixed inset-y-0 right-0 z-50 w-full max-w-md bg-white shadow-xl">
<div class="flex h-full flex-col overflow-y-scroll">
<!-- Close button -->
<div class="px-4 py-6 sm:px-6">
<button @click="open = false"
type="button"
class="rounded-md text-gray-400 hover:text-gray-500">
<span class="sr-only">Close panel</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Content -->
<div class="flex-1 px-4 py-6 sm:px-6">
{{ $slot }}
</div>
</div>
</div>
</div>

3
resources/views/components/ui/card.blade.php Normal file
View file

@ -0,0 +1,3 @@
<div {{ $attributes->merge(['class' => 'bg-gray-800 p-5 flex flex-col gap-5 items-center rounded']) }}>
{{ $slot }}
</div>

4
resources/views/components/site-logo.blade.php → resources/views/components/ui/site-logo.blade.php
View file

@ -1,9 +1,9 @@
<div class="relative -rotate-6 max-w-72 sm:max-w-96">
<div {{$attributes->merge(['class' => "relative -rotate-6 max-w-72 sm:max-w-96"])}}>
<div class="p-2 bg-blue-700 border-2 border-amber-200 -rounded-lg"
style="mask: radial-gradient(circle at left, transparent 10px, black 11px) top left / 51% 100% no-repeat,
radial-gradient(circle at right, transparent 10px, black 11px) top right / 51% 100% no-repeat;">
<div class="p-2 border-2 border-amber-200 m-2">
<h1 class="font-bold font-arial text-2xl text-amber-200">Cinema Corona</h1>
<h1 class="font-bold font-arial text-2xl text-amber-200">Movie Night</h1>
</div>
</div>

44
resources/views/components/ui/slide-over.blade.php Normal file
View file

@ -0,0 +1,44 @@
@props(['model'])
<div x-data="{ open: @entangle($model) }" @keydown.escape.window="open = false">
<!-- Overlay -->
<div x-show="open"
x-transition:enter="transition-opacity ease-linear duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition-opacity ease-linear duration-300"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed inset-0 bg-gray-900/80 z-40"
@click="open = false"></div>
<!-- Slide-over panel -->
<div x-show="open"
x-transition:enter="transform transition ease-in-out duration-500"
x-transition:enter-start="translate-x-full"
x-transition:enter-end="translate-x-0"
x-transition:leave="transform transition ease-in-out duration-500"
x-transition:leave-start="translate-x-0"
x-transition:leave-end="translate-x-full"
class="fixed inset-y-0 right-0 z-50 w-full sm:max-w-md bg-gray-800 shadow-xl">
<div class="flex h-full flex-col overflow-y-scroll">
<!-- Close button -->
<div class="px-4 py-6 sm:px-6">
<button @click="open = false"
type="button"
class="rounded-md text-gray-400 hover:text-gray-500">
<span class="sr-only">Close panel</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<!-- Content -->
<div class="flex-1 px-4 py-6 sm:px-6">
{{ $slot }}
</div>
</div>
</div>
</div>

27
resources/views/livewire/lists.blade.php
View file

@ -1,8 +1,7 @@
<div class="m-5 py-10">
<p class="text-3xl mb-5 text-center">Lists</p>
<div class="bg-gray-800 p-5 flex flex-col gap-5 items-center rounded">
<div class="mt-5 w-full mx-auto flex flex-col gap-5">
<h1 class="font-bold text-3xl mx-2 sm:mx-0">Lists</h1>
<x-ui.card>
<div class="w-full flex flex-col gap-2">
<h2 class="text-xl font-bold">Add List</h2>
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@ -13,27 +12,25 @@
</div>
@endif
<form class="flex flex-col mx-auto" wire:submit.prevent="addList">
<label for="list_name">Name</label>
<form class="flex flex-col max-w-lg gap-2" wire:submit.prevent="addList">
<label class="font-bold" for="list_name">Add List</label>
<div class="flex">
<input name="list_name" class="text-black bg-white p-3 rounded rounded-r-none" type="text"
<input name="list_name" placeholder="List Name"
class="flex-1 w-full text-black bg-white p-2 rounded rounded-r-none"
type="text"
wire:model="form.name">
<button type="submit" class="bg-green-400 text-white px-4 py-2 rounded rounded-l-none">Add</button>
</div>
</form>
</div>
<ul class="w-full flex flex-col gap-5 justify-between">
<ul class="w-full flex flex-col gap-5">
@foreach($lists as $list)
<li class="grid grid-cols-2 gap-5 text-center">
<div><a href="/lists/{{$list->id}}" wire:navigate>{{$list->name}}</a></div>
<div>
<label for="is_public">Public</label>
<input name="is_public" type="checkbox" value="is_public" wire:model="form.is_public"/>
</div>
<li class="flex justify-between text-center">
<a href="/lists/{{$list->id}}" wire:navigate>{{$list->name}}</a>
</li>
@endforeach
</ul>
</div>
</x-ui.card>
</div>
</div>

57
resources/views/livewire/movie-details-panel.blade.php Normal file
View file

@ -0,0 +1,57 @@
<x-ui.slide-over model="showDetails">
@if($selectedMovie)
<div class="flex flex-col gap-6">
<!-- Header with title and year -->
<div class="flex flex-col gap-2 text-center">
<h2 class="text-2xl font-bold text-gray-300">{{ $selectedMovie->title }}</h2>
<p class="text-lg text-gray-400">{{ $selectedMovie->year }}</p>
</div>
<!-- Poster -->
@if($selectedMovie->poster && $selectedMovie->poster !== 'N/A')
<img src="{{ $selectedMovie->poster }}"
alt="{{ $selectedMovie->title }}"
class="max-w-48 rounded-lg shadow-md mx-auto">
@endif
<!-- Plot/Description -->
@if($selectedMovie->plot && $selectedMovie->plot !== 'N/A')
<div>
<h3 class="text-sm font-semibold text-gray-300 mb-2">Plot</h3>
<p class="text-gray-400">{{ $selectedMovie->plot }}</p>
</div>
@endif
<!-- Additional Details -->
<div class="flex flex-col gap-3 text-sm">
@if($selectedMovie->director && $selectedMovie->director !== 'N/A')
<div>
<span class="font-semibold text-gray-300">Director:</span>
<span class="text-gray-400">{{ $selectedMovie->director }}</span>
</div>
@endif
@if($selectedMovie->actors && $selectedMovie->actors !== 'N/A')
<div>
<span class="font-semibold text-gray-300">Actors:</span>
<span class="text-gray-400">{{ $selectedMovie->actors }}</span>
</div>
@endif
@if($selectedMovie->genre && $selectedMovie->genre !== 'N/A')
<div>
<span class="font-semibold text-gray-300">Genre:</span>
<span class="text-gray-400">{{ $selectedMovie->genre }}</span>
</div>
@endif
@if($selectedMovie->mpaa_rating && $selectedMovie->mpaa_rating !== 'N/A')
<div>
<span class="font-semibold text-gray-300">Rating:</span>
<span class="text-gray-400">{{ $selectedMovie->mpaa_rating }}</span>
</div>
@endif
</div>
</div>
@endif
</x-ui.slide-over>

80
resources/views/livewire/movie-list.blade.php
View file

@ -1,22 +1,70 @@
<div class=" text-white pt-5 flex flex-col gap-5">
<h1 class="text-2xl font-bold">{{$list->name}}</h1>
<div class=" text-white pt-10 flex flex-col gap-5">
<div class="flex flex-row justify-between items-center mx-2 sm:mx-0">
<h1 class="text-2xl sm:text-3xl font-bold">{{$list->name}}</h1>
<button type="button" wire:click="toggleSettings"
class="hover:bg-blue-600 cursor-pointer text-white px-4 py-2 rounded">
<i class="fas fa-cog"></i>
</button>
</div>
<form wire:submit.prevent="addMovie">
<div class="flex flex-col gap-2">
<label for="query">Enter a movie title</label>
<input wire:model="query" type="text" name="query" class="bg-white text-black"/>
@error('query') <span class="error text-red-500">{{ $message }}</span> @enderror
<x-ui.card class="overflow-hidden">
<div class="absolute">
<livewire:search-panel :list-id="$list->id"/>
<livewire:movie-details-panel/>
</div>
<button type="submit">Search</button>
</form>
<div class="relative w-full overflow-hidden">
<div class="flex transition-transform duration-300 ease-in-out"
style="transform: translateX({{ $showSettings ? '-100%' : '0' }})">
<!-- Movie List View -->
<div class="w-full flex-shrink-0 flex flex-col gap-5">
<div class="flex flex-col-reverse sm:flex-row gap-5 sm:gap-0 justify-between w-full">
<input class="bg-white p-2 rounded" type="text" placeholder="Filter movies"
wire:model="filterText"
wire:keyup="filterMovies"/>
<button wire:click="$dispatch('openSearch')" class="bg-green-500 text-white p-2 rounded">
Add Movie
</button>
</div>
<ul class="grid grid-cols-2 sm:grid-cols-4 gap-5">
@foreach ($filteredMovies as $movie)
<li class="bg-gray-200">
<x-movie :movie="$movie"/>
</li>
@endforeach
</ul>
</div>
<!-- Settings View -->
<div class="w-full flex-shrink-0 flex flex-col gap-5">
<div class="flex justify-between items-center">
<button wire:click="toggleSettings" class="text-white hover:text-gray-300">
← Back to List
</button>
<h2 class="text-xl font-semibold">Settings</h2>
</div>
<div class="flex flex-col gap-2 w-full">
<label for="list-name">List Name</label>
<div class="flex flex-row">
<input type="text" wire:model="settingsForm.name" id="list-name"
class="w-full p-2 rounded rounded-r-none bg-white"/>
<button class="bg-green-400 p-2 rounded-r" type="submit" wire:click="saveSettings">Save
</button>
</div>
</div>
<div class="flex items-center justify-between bg-gray-700 p-4 rounded">
<label for="is_public" class="text-white">Make list public</label>
<input type="checkbox"
id="is_public"
wire:model.live="settingsForm.isPublic"
class="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
</div>
</div>
</div>
</div>
</x-ui.card>
<ul class="my-5 grid grid-cols-4 gap-5">
@foreach ($movies as $movie)
<li class="bg-gray-200">
<x-movie :movie="$movie"/>
</li>
@endforeach
</ul>
</div>

30
resources/views/livewire/search-panel.blade.php Normal file
View file

@ -0,0 +1,30 @@
<x-ui.slide-over model="showSearch">
<form wire:submit.prevent="findMovies" class="flex flex-row">
<div class="mb-5">
<label for="query">Enter a movie title</label>
<div class="flex flex-row">
<input wire:model="query" type="text" name="query" class="bg-white p-2 text-black"/>
<button class="bg-green-400 p-2" type="submit">Search</button>
</div>
@error('query') <span class="error text-red-500">{{ $message }}</span> @enderror
</div>
</form>
<ul class="flex flex-col gap-2">
@foreach ($results as $result)
<li class="flex flex-row justify-between border border-gray-300 p-2">
<div class="flex flex-col gap-1">
<div class="flex flex-col sm:flex-row gap-1 font-bold">
<span>{{ $result['title'] }}</span>
<span>({{$result['year']}})</span>
</div>
<button class="bg-green-400 p-2 rounded w-25 justify-between" type=button
wire:click="addMovie(@js($result['imdb_id']))">
Add to List
</button>
</div>
<img class="max-h-20" src="{{$result['poster']}}" alt="poster"/>
</li>
@endforeach
</ul>
</x-ui.slide-over>

44
resources/views/pages/auth/login.blade.php
View file

@ -1,27 +1,29 @@
<x-layouts.auth>
<div class="text-2xl">
<h1 class="text-center m-5">Log in</h1>
<div class="text-2xl text-white flex flex-col items-center gap-10 py-6 min-h-screen">
<x-ui.site-logo class="w-50 mt-4"/>
<form class="flex flex-col gap-5" method="POST" action="{{route("login")}}">
@csrf
@if($errors->any())
<div class="text-red-500">
@foreach($errors->all() as $error)
<p>{{$error}}</p>
@endforeach
<x-ui.card class="w-full max-w-md">
<form class="flex flex-col gap-5 w-full" method="POST" action="{{route("login")}}">
@csrf
@if($errors->any())
<div class="text-red-500">
@foreach($errors->all() as $error)
<p>{{$error}}</p>
@endforeach
</div>
@endif
<div class="flex flex-col gap-2">
<label class="font-bold" for="email">Email</label>
<input class="bg-white p-2" type="email" name="email" value="{{old("email")}}"/>
</div>
<div class="flex flex-col gap-2">
<label class="font-bold" for="password">Password</label>
<input class="bg-white p-2" type="password" name="password"/>
</div>
@endif
<div class="flex flex-col">
<label class="py-5" for="email">Email</label>
<input class="bg-white" type="email" name="email" value="{{old("email")}}"/>
</div>
<div class="flex flex-col">
<label class="py-5" for="password">Password</label>
<input class="bg-white" type="password" name="password"/>
</div>
<button type="submit">Submit</button>
</form>
<button class="bg-green-400 rounded p-2" type="submit">Log in</button>
</form>
</x-ui.card>
</div>
</x-layouts.auth>

1
resources/views/pages/lists.blade.php
View file

@ -1,5 +1,4 @@
<x-layouts.app>
<h1>Lists</h1>
<div class="text-white text-2xl">
<livewire:movie-lists/>
</div>