mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-app.git
synced 2025-12-24 02:40:16 +00:00
✨ Improve conditional rendering and authentication logic in views
- Updated multiple views to conditionally render actions based on authentication state for a better user experience. - Added login links where actions require authentication.
This commit is contained in:
HolgerHatGarKeineNode
@@ -157,164 +157,184 @@ class extends Component {
|
||||
</flux:text>
|
||||
</div>
|
||||
|
||||
<!-- Event Details -->
|
||||
<flux:card class="max-w-3xl">
|
||||
<flux:heading size="xl" class="mb-4">
|
||||
<flux:icon.calendar class="inline w-6 h-6 mr-2"/>
|
||||
{{ $event->start->format('d.m.Y') }}
|
||||
</flux:heading>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Date and Time -->
|
||||
<div class="flex items-center text-zinc-700 dark:text-zinc-300">
|
||||
<flux:icon.clock class="w-5 h-5 mr-3"/>
|
||||
<div>
|
||||
<div class="font-semibold">{{ $event->start->format('H:i') }} Uhr</div>
|
||||
<div
|
||||
class="text-sm text-zinc-600 dark:text-zinc-400">{{ $event->start->isoFormat('dddd, D. MMMM YYYY') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Location -->
|
||||
@if($event->location)
|
||||
<div class="flex items-center text-zinc-700 dark:text-zinc-300">
|
||||
<flux:icon.map-pin class="w-5 h-5 mr-3"/>
|
||||
<div>
|
||||
<div class="font-semibold">{{ __('Ort') }}</div>
|
||||
<div class="text-sm">{{ $event->location }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Description -->
|
||||
@if($event->description)
|
||||
<div class="pt-4 border-t border-zinc-200 dark:border-zinc-700">
|
||||
<flux:heading size="lg" class="mb-2">{{ __('Beschreibung') }}</flux:heading>
|
||||
<flux:text class="whitespace-pre-wrap">{{ $event->description }}</flux:text>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Link -->
|
||||
@if($event->link)
|
||||
<div class="pt-4">
|
||||
<flux:button href="{{ $event->link }}" target="_blank" variant="primary">
|
||||
<flux:icon.arrow-top-right-on-square class="w-5 h-5 mr-2"/>
|
||||
{{ __('Mehr Informationen') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- RSVP Section -->
|
||||
<div class="pt-4 border-t border-zinc-200 dark:border-zinc-700">
|
||||
<flux:heading size="lg" class="mb-4">{{ __('Teilnahme') }}</flux:heading>
|
||||
<div class="flex flex-col md:flex-row gap-8">
|
||||
<div class="md:w-2/3">
|
||||
<!-- Event Details -->
|
||||
<flux:card class="max-w-3xl">
|
||||
<flux:heading size="xl" class="mb-4">
|
||||
<flux:icon.calendar class="inline w-6 h-6 mr-2"/>
|
||||
{{ $event->start->format('d.m.Y') }}
|
||||
</flux:heading>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Date and Time -->
|
||||
<div class="flex items-center text-zinc-700 dark:text-zinc-300">
|
||||
<flux:icon.clock class="w-5 h-5 mr-3"/>
|
||||
<div>
|
||||
<div class="font-semibold">{{ $event->start->format('H:i') }} Uhr</div>
|
||||
<div
|
||||
class="text-sm text-zinc-600 dark:text-zinc-400">{{ $event->start->isoFormat('dddd, D. MMMM YYYY') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(!auth()->check())
|
||||
<flux:callout variant="warning" icon="exclamation-triangle" inline>
|
||||
<flux:callout.heading>{{ __('Du bist nicht eingloggt und musst deshalb den Namen selbst eintippen.') }}</flux:callout.heading>
|
||||
<x-slot name="actions">
|
||||
<flux:button :href="route('login')">{{ __('Log in') }}</flux:button>
|
||||
</x-slot>
|
||||
</flux:callout>
|
||||
<!-- Location -->
|
||||
@if($event->location)
|
||||
<div class="flex items-center text-zinc-700 dark:text-zinc-300">
|
||||
<flux:icon.map-pin class="w-5 h-5 mr-3"/>
|
||||
<div>
|
||||
<div class="font-semibold">{{ __('Ort') }}</div>
|
||||
<div class="text-sm">{{ $event->location }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Name Input -->
|
||||
<flux:field>
|
||||
<flux:label>{{ __('Dein Name') }}</flux:label>
|
||||
<flux:input wire:model="name" type="text" placeholder="{{ __('Name eingeben') }}"/>
|
||||
@error('name')
|
||||
<flux:error>{{ $message }}</flux:error>
|
||||
@enderror
|
||||
</flux:field>
|
||||
<!-- Description -->
|
||||
@if($event->description)
|
||||
<div class="pt-4 border-t border-zinc-200 dark:border-zinc-700">
|
||||
<flux:heading size="lg" class="mb-2">{{ __('Beschreibung') }}</flux:heading>
|
||||
<flux:text class="whitespace-pre-wrap">{{ $event->description }}</flux:text>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<flux:button
|
||||
class="cursor-pointer"
|
||||
icon="check"
|
||||
wire:click="attend"
|
||||
variant="{{ $willShowUp ? 'primary' : 'outline' }}"
|
||||
>
|
||||
{{ __('Ich komme') }}
|
||||
</flux:button>
|
||||
|
||||
<flux:button
|
||||
class="cursor-pointer"
|
||||
icon="question-mark-circle"
|
||||
wire:click="mightAttend"
|
||||
variant="{{ $perhapsShowUp ? 'primary' : 'outline' }}"
|
||||
>
|
||||
{{ __('Vielleicht') }}
|
||||
</flux:button>
|
||||
|
||||
@if($willShowUp || $perhapsShowUp)
|
||||
<flux:button
|
||||
class="cursor-pointer"
|
||||
icon="x-mark"
|
||||
wire:click="cannotCome"
|
||||
variant="ghost"
|
||||
>
|
||||
{{ __('Absagen') }}
|
||||
<!-- Link -->
|
||||
@if($event->link)
|
||||
<div class="pt-4">
|
||||
<flux:button href="{{ $event->link }}" target="_blank" variant="primary">
|
||||
<flux:icon.arrow-top-right-on-square class="w-5 h-5 mr-2"/>
|
||||
{{ __('Mehr Informationen') }}
|
||||
</flux:button>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- RSVP Section -->
|
||||
<div class="pt-4 border-t border-zinc-200 dark:border-zinc-700">
|
||||
<flux:heading size="lg" class="mb-4">{{ __('Teilnahme') }}</flux:heading>
|
||||
|
||||
<div class="space-y-4">
|
||||
|
||||
@if(!auth()->check())
|
||||
<flux:callout variant="warning" icon="exclamation-triangle" inline>
|
||||
<flux:callout.heading>{{ __('Du bist nicht eingloggt und musst deshalb den Namen selbst eintippen.') }}</flux:callout.heading>
|
||||
<x-slot name="actions">
|
||||
<flux:button :href="route('login')">{{ __('Log in') }}</flux:button>
|
||||
</x-slot>
|
||||
</flux:callout>
|
||||
@endif
|
||||
|
||||
<!-- Name Input -->
|
||||
<flux:field>
|
||||
<flux:label>{{ __('Dein Name') }}</flux:label>
|
||||
<flux:input wire:model="name" type="text" placeholder="{{ __('Name eingeben') }}"/>
|
||||
@error('name')
|
||||
<flux:error>{{ $message }}</flux:error>
|
||||
@enderror
|
||||
</flux:field>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<flux:button
|
||||
class="cursor-pointer"
|
||||
icon="check"
|
||||
wire:click="attend"
|
||||
variant="{{ $willShowUp ? 'primary' : 'outline' }}"
|
||||
>
|
||||
{{ __('Ich komme') }}
|
||||
</flux:button>
|
||||
|
||||
<flux:button
|
||||
class="cursor-pointer"
|
||||
icon="question-mark-circle"
|
||||
wire:click="mightAttend"
|
||||
variant="{{ $perhapsShowUp ? 'primary' : 'outline' }}"
|
||||
>
|
||||
{{ __('Vielleicht') }}
|
||||
</flux:button>
|
||||
|
||||
@if($willShowUp || $perhapsShowUp)
|
||||
<flux:button
|
||||
class="cursor-pointer"
|
||||
icon="x-mark"
|
||||
wire:click="cannotCome"
|
||||
variant="ghost"
|
||||
>
|
||||
{{ __('Absagen') }}
|
||||
</flux:button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Attendees -->
|
||||
@if(count($attendees) > 0)
|
||||
<div class="pt-4 border-t border-zinc-200 dark:border-zinc-700">
|
||||
<flux:heading size="lg" class="mb-2">
|
||||
{{ __('Zusagen') }} ({{ count($attendees) }})
|
||||
</flux:heading>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@foreach($attendees as $attendee)
|
||||
@if($attendee['user'])
|
||||
<div
|
||||
class="flex items-center gap-2 px-3 py-1.5 bg-zinc-100 dark:bg-zinc-800 rounded-full">
|
||||
<flux:avatar size="xs" :src="$attendee['user']['profile_photo_url']"/>
|
||||
<span class="text-sm">{{ $attendee['name'] }}</span>
|
||||
</div>
|
||||
@else
|
||||
<flux:badge>{{ $attendee['name'] }}</flux:badge>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Might Attend -->
|
||||
@if(count($mightAttendees) > 0)
|
||||
<div class="pt-4 border-t border-zinc-200 dark:border-zinc-700">
|
||||
<flux:heading size="lg" class="mb-2">
|
||||
{{ __('Vielleicht') }} ({{ count($mightAttendees) }})
|
||||
</flux:heading>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@foreach($mightAttendees as $attendee)
|
||||
@if($attendee['user'])
|
||||
<div
|
||||
class="flex items-center gap-2 px-3 py-1.5 bg-zinc-100 dark:bg-zinc-800 rounded-full">
|
||||
<flux:avatar size="xs" :src="$attendee['user']['profile_photo_url']"/>
|
||||
<span class="text-sm">{{ $attendee['name'] }}</span>
|
||||
</div>
|
||||
@else
|
||||
<flux:badge variant="outline">{{ $attendee['name'] }}</flux:badge>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</flux:card>
|
||||
|
||||
<!-- Back Button -->
|
||||
<div class="mt-6">
|
||||
<flux:button
|
||||
href="{{ route('meetups.landingpage', ['meetup' => $event->meetup->slug, 'country' => $country]) }}"
|
||||
variant="ghost">
|
||||
<flux:icon.arrow-left class="w-5 h-5 mr-2"/>
|
||||
{{ __('Zurück zum Meetup') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:w-1/3">
|
||||
<div class="flex flex-col sm:flex-row items-center space-x-0 sm:space-x-4 space-y-4 sm:space-y-0 mb-8">
|
||||
<flux:avatar class="[:where(&)]:size-32 [:where(&)]:text-base" size="xl"
|
||||
src="{{ $event->meetup->getFirstMediaUrl('logo') }}"/>
|
||||
<div class="space-y-2">
|
||||
<flux:heading size="xl" class="mb-4">{{ $event->meetup->name }}</flux:heading>
|
||||
<flux:subheading class="text-gray-600 dark:text-gray-400">
|
||||
{{ $event->meetup->city->name }}, {{ $event->meetup->city->country->name }}
|
||||
</flux:subheading>
|
||||
<flux:button class="cursor-pointer"
|
||||
x-copy-to-clipboard="'{{ route('ics', ['meetup' => $event->meetup]) }}'"
|
||||
icon="calendar-date-range">{{ __('Kalender-Stream-URL kopieren') }}</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Attendees -->
|
||||
@if(count($attendees) > 0)
|
||||
<div class="pt-4 border-t border-zinc-200 dark:border-zinc-700">
|
||||
<flux:heading size="lg" class="mb-2">
|
||||
{{ __('Zusagen') }} ({{ count($attendees) }})
|
||||
</flux:heading>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@foreach($attendees as $attendee)
|
||||
@if($attendee['user'])
|
||||
<div
|
||||
class="flex items-center gap-2 px-3 py-1.5 bg-zinc-100 dark:bg-zinc-800 rounded-full">
|
||||
<flux:avatar size="xs" :src="$attendee['user']['profile_photo_url']"/>
|
||||
<span class="text-sm">{{ $attendee['name'] }}</span>
|
||||
</div>
|
||||
@else
|
||||
<flux:badge>{{ $attendee['name'] }}</flux:badge>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Might Attend -->
|
||||
@if(count($mightAttendees) > 0)
|
||||
<div class="pt-4 border-t border-zinc-200 dark:border-zinc-700">
|
||||
<flux:heading size="lg" class="mb-2">
|
||||
{{ __('Vielleicht') }} ({{ count($mightAttendees) }})
|
||||
</flux:heading>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@foreach($mightAttendees as $attendee)
|
||||
@if($attendee['user'])
|
||||
<div
|
||||
class="flex items-center gap-2 px-3 py-1.5 bg-zinc-100 dark:bg-zinc-800 rounded-full">
|
||||
<flux:avatar size="xs" :src="$attendee['user']['profile_photo_url']"/>
|
||||
<span class="text-sm">{{ $attendee['name'] }}</span>
|
||||
</div>
|
||||
@else
|
||||
<flux:badge variant="outline">{{ $attendee['name'] }}</flux:badge>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</flux:card>
|
||||
|
||||
<!-- Back Button -->
|
||||
<div class="mt-6">
|
||||
<flux:button
|
||||
href="{{ route('meetups.landingpage', ['meetup' => $event->meetup->slug, 'country' => $country]) }}"
|
||||
variant="ghost">
|
||||
<flux:icon.arrow-left class="w-5 h-5 mr-2"/>
|
||||
{{ __('Zurück zum Meetup') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user