mirror of
https://github.com/Einundzwanzig-Podcast/einundzwanzig-portal.git
synced 2025-12-11 06:46:47 +00:00
meetup landing page
This commit is contained in:
Benjamin Takats
@@ -12,6 +12,7 @@ class LandingPage extends Component
|
||||
{
|
||||
public Meetup $meetup;
|
||||
public Country $country;
|
||||
public ?int $activeEvent = null;
|
||||
|
||||
public ?int $year = null;
|
||||
|
||||
@@ -25,20 +26,27 @@ class LandingPage extends Component
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.meetup.landing-page', [
|
||||
'events' => MeetupEvent::query()
|
||||
->with([
|
||||
'meetup.city.country',
|
||||
])
|
||||
->where('meetup_events.meetup_id', $this->meetup->id)
|
||||
->where('meetup_events.start', '>=', now())
|
||||
->get()
|
||||
->map(fn($event) => [
|
||||
'id' => $event->id,
|
||||
'startDate' => $event->start,
|
||||
'endDate' => $event->start->addHours(1),
|
||||
'location' => $event->location,
|
||||
'description' => $event->description,
|
||||
]),
|
||||
'meetupEvents' => MeetupEvent::query()
|
||||
->with([
|
||||
'meetup.city.country',
|
||||
])
|
||||
->where('meetup_events.meetup_id', $this->meetup->id)
|
||||
->where('meetup_events.start', '>=', now())
|
||||
->get(),
|
||||
'events' => MeetupEvent::query()
|
||||
->with([
|
||||
'meetup.city.country',
|
||||
])
|
||||
->where('meetup_events.meetup_id', $this->meetup->id)
|
||||
->where('meetup_events.start', '>=', now())
|
||||
->get()
|
||||
->map(fn($event) => [
|
||||
'id' => $event->id,
|
||||
'startDate' => $event->start,
|
||||
'endDate' => $event->start->addHours(1),
|
||||
'location' => $event->location,
|
||||
'description' => $event->description,
|
||||
]),
|
||||
])
|
||||
->layout('layouts.guest', [
|
||||
'SEOData' => new SEOData(
|
||||
@@ -48,4 +56,9 @@ class LandingPage extends Component
|
||||
)
|
||||
]);
|
||||
}
|
||||
|
||||
public function showEvent($id)
|
||||
{
|
||||
$this->activeEvent = $id;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -71,10 +71,9 @@ class MeetupEventTable extends DataTableComponent
|
||||
->sortable()
|
||||
->collapseOnMobile(),
|
||||
Column::make(__('Link'), 'link')
|
||||
->format(
|
||||
fn($value, $row, Column $column) => view('columns.meetup_events.link')->withRow($row)
|
||||
)
|
||||
->sortable(),
|
||||
->label(
|
||||
fn($row, Column $column) => view('columns.meetup_events.link')->withRow($row)->withCountry($this->country)
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
@@ -53,12 +53,7 @@ class MeetupTable extends DataTableComponent
|
||||
)
|
||||
->searchable(fn($builder, $term) => $builder->where('meetups.name', 'ilike', '%'.$term.'%'))
|
||||
->sortable(),
|
||||
Column::make(__('Link'), 'link')
|
||||
->format(
|
||||
fn($value, $row, Column $column) => view('columns.meetups.link')->withRow($row)
|
||||
)
|
||||
->sortable(),
|
||||
Column::make(__('Links'),)
|
||||
Column::make(__('Links'))
|
||||
->label(
|
||||
fn($row, Column $column) => view('columns.meetups.action')
|
||||
->withRow($row)
|
||||
|
||||
@@ -70,8 +70,14 @@ class Meetup extends Resource
|
||||
->creationRules('unique:meetups,name')
|
||||
->updateRules('unique:meetups,name,{{resourceId}}'),
|
||||
|
||||
Text::make('Link')
|
||||
->rules('required', 'string'),
|
||||
Text::make(__('Telegram-Link'), 'telegram_link')
|
||||
->rules('url', 'nullable'),
|
||||
|
||||
Text::make(__('Website'), 'webpage')
|
||||
->rules('url', 'nullable'),
|
||||
|
||||
Text::make(__('Twitter Username'), 'twitter_username')
|
||||
->rules('string', 'nullable'),
|
||||
|
||||
BelongsTo::make(__('City'), 'city', City::class)
|
||||
->searchable()
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
return new class extends Migration {
|
||||
/**
|
||||
* Run the migrations.
|
||||
* @return void
|
||||
*/
|
||||
public function up()
|
||||
{
|
||||
Schema::table('meetups', function (Blueprint $table) {
|
||||
$table->renameColumn('link', 'telegram_link');
|
||||
$table->string('webpage')
|
||||
->nullable();
|
||||
$table->string('twitter_username')
|
||||
->nullable();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reverse the migrations.
|
||||
* @return void
|
||||
*/
|
||||
public function down()
|
||||
{
|
||||
Schema::table('meetups', function (Blueprint $table) {
|
||||
//
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,29 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
return new class extends Migration {
|
||||
/**
|
||||
* Run the migrations.
|
||||
* @return void
|
||||
*/
|
||||
public function up()
|
||||
{
|
||||
Schema::table('meetups', function (Blueprint $table) {
|
||||
$table->string('telegram_link')
|
||||
->nullable()
|
||||
->change();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reverse the migrations.
|
||||
* @return void
|
||||
*/
|
||||
public function down()
|
||||
{
|
||||
//
|
||||
}
|
||||
};
|
||||
@@ -635,5 +635,8 @@
|
||||
"logins": "",
|
||||
"points": "",
|
||||
"New meetup created: :title": "New meetup created: :title",
|
||||
"Submit new book case": ""
|
||||
"Submit new book case": "",
|
||||
"Telegram-Link": "",
|
||||
"Website": "",
|
||||
"Twitter Username": ""
|
||||
}
|
||||
|
||||
@@ -1,8 +1,43 @@
|
||||
<div>
|
||||
<a href="{{ $row->link }}" target="_blank">
|
||||
<x-badge class="whitespace-nowrap">
|
||||
<x-button
|
||||
black
|
||||
xs
|
||||
:href="route('meetup.landing', ['country' => $country, 'meetup' => $row->meetup->slug])"
|
||||
>
|
||||
<i class="fa fa-thin fa-browser mr-2"></i>
|
||||
{{ __('Show landing page') }}
|
||||
</x-button>
|
||||
@if($row->meetup->telegram_link)
|
||||
<x-button
|
||||
xs
|
||||
secondary
|
||||
target="_blank"
|
||||
:href="$row->meetup->telegram_link"
|
||||
>
|
||||
<i class="fa fa-thin fa-external-link mr-2"></i>
|
||||
{{ __('Open') }}
|
||||
</x-badge>
|
||||
</a>
|
||||
{{ __('Telegram-Link') }}
|
||||
</x-button>
|
||||
@endif
|
||||
@if($row->meetup->webpage)
|
||||
<x-button
|
||||
xs
|
||||
secondary
|
||||
target="_blank"
|
||||
:href="$row->meetup->webpage"
|
||||
>
|
||||
<i class="fa fa-thin fa-external-link mr-2"></i>
|
||||
{{ __('Website') }}
|
||||
</x-button>
|
||||
@endif
|
||||
@if($row->meetup->twitter_username)
|
||||
<x-button
|
||||
xs
|
||||
secondary
|
||||
target="_blank"
|
||||
:href="$row->meetup->twitter_username"
|
||||
>
|
||||
<i class="fa fa-brand fa-twitter mr-2"></i>
|
||||
{{ __('Twitter') }}
|
||||
</x-button>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<div>
|
||||
@if($row->meetup_events_count > 0)
|
||||
<x-button
|
||||
xs
|
||||
amber
|
||||
wire:click="meetupEventSearch({{ $row->id }})">
|
||||
<i class="fa fa-thin fa-calendar mr-2"></i>
|
||||
@@ -8,6 +9,7 @@
|
||||
</x-button>
|
||||
|
||||
<x-button
|
||||
xs
|
||||
x-data="{
|
||||
textToCopy: '{{ route('meetup.ics', ['country' => $country, 'meetup' => $row->id]) }}',
|
||||
}"
|
||||
@@ -19,6 +21,7 @@
|
||||
@endif
|
||||
@if($row->meetup_events_count < 1)
|
||||
<x-button
|
||||
xs
|
||||
outlined
|
||||
wire:click="meetupEventSearch({{ $row->id }})">
|
||||
<i class="fa fa-thin fa-calendar-circle-exclamation mr-2"></i>
|
||||
@@ -26,10 +29,44 @@
|
||||
</x-button>
|
||||
@endif
|
||||
<x-button
|
||||
primary
|
||||
black
|
||||
xs
|
||||
:href="route('meetup.landing', ['country' => $country, 'meetup' => $row->slug])"
|
||||
>
|
||||
<i class="fa fa-thin fa-browser mr-2"></i>
|
||||
{{ __('Show landing page') }}
|
||||
</x-button>
|
||||
@if($row->telegram_link)
|
||||
<x-button
|
||||
xs
|
||||
secondary
|
||||
target="_blank"
|
||||
:href="$row->telegram_link"
|
||||
>
|
||||
<i class="fa fa-thin fa-external-link mr-2"></i>
|
||||
{{ __('Telegram-Link') }}
|
||||
</x-button>
|
||||
@endif
|
||||
@if($row->webpage)
|
||||
<x-button
|
||||
xs
|
||||
secondary
|
||||
target="_blank"
|
||||
:href="$row->webpage"
|
||||
>
|
||||
<i class="fa fa-thin fa-external-link mr-2"></i>
|
||||
{{ __('Website') }}
|
||||
</x-button>
|
||||
@endif
|
||||
@if($row->twitter_username)
|
||||
<x-button
|
||||
xs
|
||||
secondary
|
||||
target="_blank"
|
||||
:href="$row->twitter_username"
|
||||
>
|
||||
<i class="fa fa-brand fa-twitter mr-2"></i>
|
||||
{{ __('Twitter') }}
|
||||
</x-button>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div>
|
||||
<a href="{{ $row->link }}" target="_blank">
|
||||
<a href="{{ $row->telegram_link }}" target="_blank">
|
||||
<x-badge class="whitespace-nowrap">
|
||||
<i class="fa fa-thin fa-external-link mr-2"></i>
|
||||
{{ __('Open') }}
|
||||
|
||||
@@ -16,13 +16,34 @@
|
||||
</x-markdown>
|
||||
</div>
|
||||
|
||||
<x-button
|
||||
target="_blank"
|
||||
:href="$meetup->link"
|
||||
primary lg class="mt-4 whitespace-nowrap">
|
||||
<i class="fa fa-thin fa-external-link mr-2"></i>
|
||||
{{ __('Link') }}
|
||||
</x-button>
|
||||
@if($meetup->telegram_link)
|
||||
<x-button
|
||||
target="_blank"
|
||||
:href="$meetup->telegram_link"
|
||||
primary lg class="mt-4 whitespace-nowrap">
|
||||
<i class="fa fa-thin fa-external-link mr-2"></i>
|
||||
{{ __('Telegram-Link') }}
|
||||
</x-button>
|
||||
@endif
|
||||
@if($meetup->webpage)
|
||||
<x-button
|
||||
target="_blank"
|
||||
:href="$meetup->webpage"
|
||||
primary lg class="mt-4 whitespace-nowrap">
|
||||
<i class="fa fa-thin fa-external-link mr-2"></i>
|
||||
{{ __('Website') }}
|
||||
</x-button>
|
||||
@endif
|
||||
@if($meetup->twitter_username)
|
||||
<x-button
|
||||
target="_blank"
|
||||
:href="'https://twitter.com/'.$meetup->twitter_username"
|
||||
primary lg class="mt-4 whitespace-nowrap">
|
||||
<i class="fa fa-thin fa-external-link mr-2"></i>
|
||||
{{ __('Twitter') }}
|
||||
</x-button>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sm:w-2/12 p-4">
|
||||
@@ -31,6 +52,71 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="h-auto px-10 py-16">
|
||||
<div class="max-w-3xl mx-auto space-y-4 sm:text-center">
|
||||
<h2 class="text-4xl sm:text-5xl font-semibold text-white">
|
||||
{{ __('Events') }}
|
||||
</h2>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<ul role="list" class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
|
||||
@foreach($meetupEvents as $meetupEvent)
|
||||
@php
|
||||
$activeClass = $activeEvent === $meetupEvent->id ? 'bg-gradient-to-r from-amber-800 via-amber-600 to-amber-500' : 'bg-amber-500';
|
||||
@endphp
|
||||
<li id="courseEventId_{{ $meetupEvent->id }}" class="{{ $activeClass }} col-span-1 flex flex-col divide-y divide-gray-200 rounded-lg text-center shadow-2xl">
|
||||
<div class="flex flex-1 flex-col p-8">
|
||||
{{--<img class="mx-auto h-32 w-32 object-contain flex-shrink-0 rounded"
|
||||
src="{{ $meetupEvent->meetup->getFirstMediaUrl('logo') }}"
|
||||
alt="{{ $meetupEvent->meetup->name }}">--}}
|
||||
<h3 class="mt-1 text-xl font-medium text-gray-900 truncate">{{ $meetupEvent->start->asDate() }}</h3>
|
||||
<h3 class="mt-1 text-xl font-medium text-gray-900 truncate">{{ $meetupEvent->location }}</h3>
|
||||
<dl class="mt-1 flex flex-grow flex-col justify-between">
|
||||
<div x-data="{ active: 2 }" class="mx-auto max-w-3xl w-full space-y-4">
|
||||
<div x-data="{
|
||||
id: 1,
|
||||
get expanded() {
|
||||
return this.active === this.id
|
||||
},
|
||||
set expanded(value) {
|
||||
this.active = value ? this.id : null
|
||||
},
|
||||
}"
|
||||
role="region" class="rounded-lg bg-white shadow">
|
||||
<h2>
|
||||
<button
|
||||
x-on:click="expanded = !expanded"
|
||||
:aria-expanded="expanded"
|
||||
class="flex w-full items-center justify-between px-6 py-4 text-xl font-bold"
|
||||
>
|
||||
<span>{{ __('Description') }}</span>
|
||||
<span x-show="expanded" aria-hidden="true" class="ml-4">−</span>
|
||||
<span x-show="!expanded" aria-hidden="true" class="ml-4">+</span>
|
||||
</button>
|
||||
</h2>
|
||||
<div x-show="expanded" x-collapse>
|
||||
<div class="px-6 pb-4 text-left">{!! nl2br($meetupEvent->description) !!}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div>
|
||||
<div class="-mt-px flex divide-x divide-gray-200">
|
||||
<div class="-ml-px flex w-0 flex-1">
|
||||
<a target="_blank" href="{{ $meetupEvent->link }}"
|
||||
class="relative inline-flex w-0 flex-1 items-center justify-center rounded-br-lg border border-transparent py-4 text-sm font-medium text-gray-700 hover:text-gray-500">
|
||||
<i class="text-gray-100 text-2xl fa-thin fa-right-to-bracket"></i>
|
||||
<span class="ml-3 text-gray-100 text-2xl">{{ __('Link') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
|
||||
<div class="w-full mt-8">
|
||||
|
||||
@php
|
||||
@@ -83,6 +169,12 @@
|
||||
yearChanged: function(e) {
|
||||
@this.set('year', e.currentYear);
|
||||
},
|
||||
clickDay: function(e) {
|
||||
if(e.events.length > 0) {
|
||||
$wire.call('showEvent', e.events[0].id);
|
||||
document.getElementById('courseEventId_'+e.events[0].id).scrollIntoView();
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
}"
|
||||
|
||||
Reference in New Issue
Block a user