einundzwanzig/einundzwanzig-portal
1
0
Fork 0
mirror of https://github.com/Einundzwanzig-Podcast/einundzwanzig-portal.git synced 2025-12-11 06:46:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

map for events

Browse Source
This commit is contained in:
Benjamin Takats
2022-12-15 19:40:15 +01:00
parent f12fa41fbb
commit ca5b74d072
3 changed files with 92 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/Http/Livewire/BitcoinEvent/BitcoinEventTable.php
View File

@@ -24,6 +24,18 @@ class BitcoinEventTable extends Component
public function render() public function render()
{ {
return view('livewire.bitcoin-event.bitcoin-event-table', [ return view('livewire.bitcoin-event.bitcoin-event-table', [
'markers' => BitcoinEvent::query()
->with([
'venue.city.country',
])
->whereHas('venue.city.country',
fn($query) => $query->where('countries.code', $this->country->code))
->get()
->map(fn($event) => [
'id' => $event->id,
'name' => $event->name,
'coords' => [$event->venue->city->latitude, $event->venue->city->longitude],
]),
'events' => BitcoinEvent::query() 'events' => BitcoinEvent::query()
->get() ->get()
->map(fn($event) => [ ->map(fn($event) => [
@@ -36,6 +48,18 @@ class BitcoinEventTable extends Component
]); ]);
} }
public function filterByMarker($id)
{
return to_route('bitcoinEvent.table.bitcoinEvent', [
'country' => $this->country->code,
'table' => [
'filters' => [
'byid' => $id,
],
]
]);
}
public function popover($content, $ids) public function popover($content, $ids)
{ {
return to_route('bitcoinEvent.table.bitcoinEvent', [ return to_route('bitcoinEvent.table.bitcoinEvent', [

93
resources/views/livewire/bitcoin-event/bitcoin-event-table.blade.php
View File

@@ -4,36 +4,37 @@
{{-- MAIN --}} {{-- MAIN --}}
<section class="w-full mb-12"> <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="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" <link rel="stylesheet" type="text/css"
href="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.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/dist/js-year-calendar.min.js"></script>
<script src="https://unpkg.com/js-year-calendar@latest/locales/js-year-calendar.de.js"></script> <script src="https://unpkg.com/js-year-calendar@latest/locales/js-year-calendar.de.js"></script>
<style> <style>
.calendar .calendar-header { .calendar .calendar-header {
background-color: #F7931A; background-color: #F7931A;
color: white; color: white;
border: 0; border: 0;
} }
.calendar table.month th.month-title { .calendar table.month th.month-title {
color: #fff; color: #fff;
} }
.calendar table.month th.day-header { .calendar table.month th.day-header {
color: #fff; color: #fff;
} }
.calendar table.month td.day .day-content { .calendar table.month td.day .day-content {
color: #fff; color: #fff;
} }
</style> </style>
<div <div
wire:ignore wire:ignore
x-data="{ x-data="{
calendar: null, calendar: null,
init() { init() {
let events = {{ Js::from($events) }}; let events = {{ Js::from($events) }};
@@ -69,8 +70,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: 400px"></div>
</div>
</div> </div>
</div> </div>

1
resources/views/livewire/meetup/meetup-table.blade.php
View File

@@ -13,6 +13,7 @@
<p class="px-0 mb-6 text-lg text-gray-600 md:text-xl lg:px-24"> Finde Bitcoiner in deiner Stadt und lerne <p class="px-0 mb-6 text-lg text-gray-600 md:text-xl lg:px-24"> Finde Bitcoiner in deiner Stadt und lerne
sie auf einem der Meetups kennen. </p> sie auf einem der Meetups kennen. </p>
<div <div
wire:ignore
class="w-full flex justify-center" class="w-full flex justify-center"
x-data="{ x-data="{
init() { init() {