From 1dde4dc5448831ab4e984d1e7c5b8ae72b97a55e Mon Sep 17 00:00:00 2001
From: Benjamin Takats <mail@benjamintakats.de>
Date: Thu, 15 Dec 2022 20:24:57 +0100
Subject: [PATCH] meetup-events map

---
 app/Http/Livewire/Meetup/MeetupEventTable.php | 30 ++++--
 .../meetup/meetup-event-table.blade.php       | 93 +++++++++++++------
 2 files changed, 88 insertions(+), 35 deletions(-)

diff --git a/app/Http/Livewire/Meetup/MeetupEventTable.php b/app/Http/Livewire/Meetup/MeetupEventTable.php
index e55f9597..dc053f99 100644
--- a/app/Http/Livewire/Meetup/MeetupEventTable.php
+++ b/app/Http/Livewire/Meetup/MeetupEventTable.php
@@ -16,15 +16,27 @@ class MeetupEventTable extends Component
     public function render()
     {
         return view('livewire.meetup.meetup-event-table', [
-            'events' => MeetupEvent::query()
-                                   ->get()
-                                   ->map(fn($event) => [
-                                       'id'          => $event->id,
-                                       'startDate'   => $event->start,
-                                       'endDate'     => $event->start->endOfDay(),
-                                       'location'    => $event->location,
-                                       'description' => $event->description,
-                                   ]),
+            'markers' => MeetupEvent::query()
+                                    ->with([
+                                        'meetup.city.country',
+                                    ])
+                                    ->whereHas('meetup.city.country',
+                                        fn($query) => $query->where('countries.code', $this->country->code))
+                                    ->get()
+                                    ->map(fn($event) => [
+                                        'id'     => $event->id,
+                                        'name'   => $event->meetup->name.': '.$event->location,
+                                        'coords' => [$event->meetup->city->latitude, $event->meetup->city->longitude],
+                                    ]),
+            'events'  => MeetupEvent::query()
+                                    ->get()
+                                    ->map(fn($event) => [
+                                        'id'          => $event->id,
+                                        'startDate'   => $event->start,
+                                        'endDate'     => $event->start->endOfDay(),
+                                        'location'    => $event->location,
+                                        'description' => $event->description,
+                                    ]),
         ]);
     }
 
diff --git a/resources/views/livewire/meetup/meetup-event-table.blade.php b/resources/views/livewire/meetup/meetup-event-table.blade.php
index 43cf58eb..79e990f8 100644
--- a/resources/views/livewire/meetup/meetup-event-table.blade.php
+++ b/resources/views/livewire/meetup/meetup-event-table.blade.php
@@ -4,36 +4,37 @@
     {{-- MAIN --}}
     <section class="w-full mb-12">
         <div class="max-w-screen-2xl mx-auto px-2 sm:px-10 space-y-4" id="table">
-            <div class="">
+            <div class="flex items-start">
+                <div class="w-1/2">
 
-                <link rel="stylesheet" type="text/css"
-                      href="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.css"/>
-                <script src="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.js"></script>
-                <script src="https://unpkg.com/js-year-calendar@latest/locales/js-year-calendar.de.js"></script>
+                    <link rel="stylesheet" type="text/css"
+                          href="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.css"/>
+                    <script src="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.js"></script>
+                    <script src="https://unpkg.com/js-year-calendar@latest/locales/js-year-calendar.de.js"></script>
 
-                <style>
-                    .calendar .calendar-header {
-                        background-color: #F7931A;
-                        color: white;
-                        border: 0;
-                    }
+                    <style>
+                        .calendar .calendar-header {
+                            background-color: #F7931A;
+                            color: white;
+                            border: 0;
+                        }
 
-                    .calendar table.month th.month-title {
-                        color: #fff;
-                    }
+                        .calendar table.month th.month-title {
+                            color: #fff;
+                        }
 
-                    .calendar table.month th.day-header {
-                        color: #fff;
-                    }
+                        .calendar table.month th.day-header {
+                            color: #fff;
+                        }
 
-                    .calendar table.month td.day .day-content {
-                        color: #fff;
-                    }
-                </style>
+                        .calendar table.month td.day .day-content {
+                            color: #fff;
+                        }
+                    </style>
 
-                <div
-                    wire:ignore
-                    x-data="{
+                    <div
+                        wire:ignore
+                        x-data="{
                         calendar: null,
                         init() {
                             let events = {{ Js::from($events) }};
@@ -65,8 +66,48 @@
                             });
                         },
                     }"
-                >
-                    <div x-ref="calendar"></div>
+                    >
+                        <div x-ref="calendar"></div>
+                    </div>
+                </div>
+                <div class="w-1/2">
+                    <div
+                        wire:ignore
+                        class="w-full flex justify-center"
+                        x-data="{
+                            init() {
+                                let markers = {{ Js::from($markers) }};
+                                console.log(markers);
+
+                                $('#map').vectorMap({
+                                    zoomButtons : false,
+                                    zoomOnScroll: true,
+                                    map: '{{ $country->code }}_merc',
+                                    backgroundColor: 'transparent',
+                                    markers: markers.map(function(h){ return {name: h.name, latLng: h.coords} }),
+                                    onMarkerClick: function(event, index) {
+                                        $wire.call('filterByMarker', markers[index].id)
+                                    },
+                                    markerStyle: {
+                                        initial: {
+                                            image: '{{ asset('img/btc.png') }}',
+                                        }
+                                    },
+                                    regionStyle: {
+                                        initial: {
+                                            fill: '#151515'
+                                        },
+                                        hover: {
+                                            'fill-opacity': 1,
+                                            cursor: 'default'
+                                        },
+                                    }
+                                });
+                            }
+                        }"
+                    >
+                        <div id="map" style="width: 100%; height: 800px"></div>
+                    </div>
                 </div>
             </div>