meetup landing page

app/Http/Livewire/Meetup/LandingPage.php

@@ -12,6 +12,7 @@ class LandingPage extends Component
 {
     public Meetup $meetup;
     public Country $country;
+    public ?int $activeEvent = null;
 
     public ?int $year = null;
 
@@ -25,6 +26,13 @@ class LandingPage extends Component
     public function render()
     {
         return view('livewire.meetup.landing-page', [
+            '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',
@@ -48,4 +56,9 @@ class LandingPage extends Component
                 )
             ]);
     }
+
+    public function showEvent($id)
+    {
+        $this->activeEvent = $id;
+    }
 }

app/Http/Livewire/Tables/MeetupEventTable.php

@@ -71,10 +71,9 @@ class MeetupEventTable extends DataTableComponent
                   ->sortable()
                   ->collapseOnMobile(),
             Column::make(__('Link'), 'link')
-                  ->format(
+                  ->label(
-                      fn($value, $row, Column $column) => view('columns.meetup_events.link')->withRow($row)
+                      fn($row, Column $column) => view('columns.meetup_events.link')->withRow($row)->withCountry($this->country)
-                  )
+                  ),
-                  ->sortable(),
         ];
     }
 

app/Http/Livewire/Tables/MeetupTable.php

@@ -53,12 +53,7 @@ class MeetupTable extends DataTableComponent
                   )
                   ->searchable(fn($builder, $term) => $builder->where('meetups.name', 'ilike', '%'.$term.'%'))
                   ->sortable(),
-            Column::make(__('Link'), 'link')
+            Column::make(__('Links'))
-                  ->format(
-                      fn($value, $row, Column $column) => view('columns.meetups.link')->withRow($row)
-                  )
-                  ->sortable(),
-            Column::make(__('Links'),)
                   ->label(
                       fn($row, Column $column) => view('columns.meetups.action')
                           ->withRow($row)

app/Nova/Meetup.php

@@ -70,8 +70,14 @@ class Meetup extends Resource
                 ->creationRules('unique:meetups,name')
                 ->updateRules('unique:meetups,name,{{resourceId}}'),
 
-            Text::make('Link')
+            Text::make(__('Telegram-Link'), 'telegram_link')
-                ->rules('required', 'string'),
+                ->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()

database/migrations/2023_01_16_143622_add_links_to_meetups_table.php

@@ -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) {
+            //
+        });
+    }
+};

database/migrations/2023_01_16_144114_change_telegram_link_on_meetups_table.php

@@ -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()
+    {
+        //
+    }
+};

resources/lang/en.json

@@ -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": ""
 }

resources/views/columns/meetup_events/link.blade.php

@@ -1,8 +1,43 @@
 <div>
-    <a href="{{ $row->link }}" target="_blank">
+    <x-button
-        <x-badge class="whitespace-nowrap">
+        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') }}
+            {{ __('Telegram-Link') }}
-        </x-badge>
+        </x-button>
-    </a>
+    @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>

resources/views/columns/meetups/action.blade.php

@@ -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>

resources/views/columns/meetups/link.blade.php

@@ -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') }}

resources/views/livewire/meetup/landing-page.blade.php

@@ -16,13 +16,34 @@
                         </x-markdown>
                     </div>
 
+                    @if($meetup->telegram_link)
                         <x-button
                             target="_blank"
-                        :href="$meetup->link"
+                            :href="$meetup->telegram_link"
                             primary lg class="mt-4 whitespace-nowrap">
                             <i class="fa fa-thin fa-external-link mr-2"></i>
-                        {{ __('Link') }}
+                            {{ __('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">&minus;</span>
+                                            <span x-show="!expanded" aria-hidden="true" class="ml-4">&plus;</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();
+                                            }
+                                        },
                                     });
                                 },
                             }"