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

world map

Browse Source
This commit is contained in:
Benjamin Takats
2022-12-15 22:59:18 +01:00
parent 133d2b2df8
commit 46d53ace79
6 changed files with 106 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/Http/Livewire/Meetup/MeetupTable.php
View File

@@ -39,16 +39,6 @@ class MeetupTable extends Component
'name' => $meetup->name, 'name' => $meetup->name,
'coords' => [$meetup->city->latitude, $meetup->city->longitude], 'coords' => [$meetup->city->latitude, $meetup->city->longitude],
]), ]),
'allMarkers' => Meetup::query()
->with([
'city.country',
])
->get()
->map(fn($meetup) => [
'id' => $meetup->id,
'name' => $meetup->name,
'coords' => [$meetup->city->latitude, $meetup->city->longitude],
]),
]); ]);
} }
} }

43
app/Http/Livewire/Meetup/WorldMap.php Normal file
View File

@@ -0,0 +1,43 @@
<?php
namespace App\Http\Livewire\Meetup;
use App\Models\Country;
use App\Models\Meetup;
use Livewire\Component;
class WorldMap extends Component
{
public Country $country;
public function filterByMarker($id)
{
$meetup = Meetup::with(['city.country'])
->find($id);
return to_route('meetup.table.meetup', [
'country' => $meetup->city->country->code,
'table' => [
'filters' => [
'byid' => $id,
],
]
]);
}
public function render()
{
return view('livewire.meetup.world-map', [
'allMarkers' => Meetup::query()
->with([
'city.country',
])
->get()
->map(fn($meetup) => [
'id' => $meetup->id,
'name' => $meetup->name,
'coords' => [$meetup->city->latitude, $meetup->city->longitude],
]),
]);
}
}

4
resources/views/livewire/frontend/header.blade.php
View File

@@ -61,6 +61,10 @@
</a> </a>
@endif @endif
@if(str(request()->route()->getName())->contains('meetup.')) @if(str(request()->route()->getName())->contains('meetup.'))
<a href="{{ route('meetup.world', ['country' => $c]) }}"
class="{{ request()->routeIs('meetup.world') ? 'text-amber-500 underline' : 'text-gray-400' }} mr-5 font-medium leading-6 hover:text-gray-300">
Welt-Karte
</a>
<a href="{{ route('meetup.table.meetup', ['country' => $c]) }}" <a href="{{ route('meetup.table.meetup', ['country' => $c]) }}"
class="{{ request()->routeIs('meetup.table.meetup') ? 'text-amber-500 underline' : 'text-gray-400' }} mr-5 font-medium leading-6 hover:text-gray-300"> class="{{ request()->routeIs('meetup.table.meetup') ? 'text-amber-500 underline' : 'text-gray-400' }} mr-5 font-medium leading-6 hover:text-gray-300">
Meetups Meetups

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

@@ -51,43 +51,6 @@
</div> </div>
<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">
<livewire:tables.meetup-table :country="$country->code"/> <livewire:tables.meetup-table :country="$country->code"/>
<div
wire:ignore
class="w-full flex justify-center"
x-data="{
init() {
let markers = {{ Js::from($allMarkers) }};
$('#mapworld').vectorMap({
zoomButtons : false,
zoomOnScroll: true,
map: 'world_mill',
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="mapworld" style="width: 100%; height: 400px"></div>
</div>
</div> </div>
</section> </section>
{{-- FOOTER --}} {{-- FOOTER --}}

57
resources/views/livewire/meetup/world-map.blade.php Normal file
View File

@@ -0,0 +1,57 @@
<div class="bg-21gray flex flex-col h-screen justify-between">
{{-- HEADER --}}
<livewire:frontend.header :country="$country"/>
{{-- MAIN --}}
<section class="w-full mb-12">
<div class="max-w-screen-2xl mx-auto px-2 sm:px-10 space-y-4 flex flex-col sm:flex-row">
<h1 class="mb-6 text-5xl font-extrabold leading-none tracking-normal text-gray-200 sm:text-6xl md:text-6xl lg:text-7xl md:tracking-tight">
Bitcoiner <span
class="w-full text-transparent bg-clip-text bg-gradient-to-r from-amber-400 via-amber-500 to-amber-200 lg:inline">Meetups</span><br
class="lg:block hidden">
Plebs together strong 💪
</h1>
<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>
</div>
<div class="max-w-screen-2xl mx-auto px-2 sm:px-10 space-y-4" id="table">
<div
wire:ignore
class="w-full flex justify-center"
x-data="{
init() {
let markers = {{ Js::from($allMarkers) }};
$('#mapworld').vectorMap({
zoomButtons : false,
zoomOnScroll: true,
map: 'world_mill',
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="mapworld" style="width: 100%; height: 800px"></div>
</div>
</div>
</section>
{{-- FOOTER --}}
<livewire:frontend.footer/>
</div>

2
routes/web.php
View File

@@ -82,6 +82,8 @@ Route::middleware([])
->as('meetup.') ->as('meetup.')
->prefix('/{country:code}/meetup') ->prefix('/{country:code}/meetup')
->group(function () { ->group(function () {
Route::get('world', \App\Http\Livewire\Meetup\WorldMap::class)
->name('world');
Route::get('overview', \App\Http\Livewire\Meetup\MeetupTable::class) Route::get('overview', \App\Http\Livewire\Meetup\MeetupTable::class)
->name('table.meetup'); ->name('table.meetup');
Route::get('/meetup-events', \App\Http\Livewire\Meetup\MeetupEventTable::class) Route::get('/meetup-events', \App\Http\Livewire\Meetup\MeetupEventTable::class)