mirror of
https://github.com/Einundzwanzig-Podcast/einundzwanzig-portal.git
synced 2025-12-11 06:46:47 +00:00
course_events with calendar
This commit is contained in:
Benjamin Takats
@@ -3,14 +3,79 @@
|
||||
namespace App\Http\Livewire\School;
|
||||
|
||||
use App\Models\Country;
|
||||
use App\Models\CourseEvent;
|
||||
use Livewire\Component;
|
||||
|
||||
class EventTable extends Component
|
||||
{
|
||||
public Country $country;
|
||||
|
||||
public ?int $year = null;
|
||||
|
||||
protected $queryString = ['year'];
|
||||
|
||||
public function mount()
|
||||
{
|
||||
if (!$this->year) {
|
||||
$this->year = now()->year;
|
||||
}
|
||||
}
|
||||
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.school.event-table');
|
||||
return view('livewire.school.event-table', [
|
||||
'markers' => CourseEvent::query()
|
||||
->with([
|
||||
'course',
|
||||
'venue.city.country',
|
||||
])
|
||||
->where(fn($query) => $query
|
||||
->whereHas('venue.city.country',
|
||||
fn($query) => $query->where('countries.code', $this->country->code))
|
||||
)
|
||||
->get()
|
||||
->map(fn($event) => [
|
||||
'id' => $event->id,
|
||||
'name' => $event->course->name,
|
||||
'coords' => [$event->venue->city->latitude, $event->venue->city->longitude],
|
||||
]),
|
||||
'events' => CourseEvent::query()
|
||||
->get()
|
||||
->map(fn($event) => [
|
||||
'id' => $event->id,
|
||||
'startDate' => $event->from,
|
||||
'endDate' => $event->to,
|
||||
'location' => $event->course->name,
|
||||
'description' => $event->venue->name,
|
||||
]),
|
||||
]);
|
||||
}
|
||||
|
||||
public function filterByMarker($id)
|
||||
{
|
||||
return to_route('school.table.event', [
|
||||
'#table',
|
||||
'country' => $this->country->code,
|
||||
'year' => $this->year,
|
||||
'table' => [
|
||||
'filters' => [
|
||||
'byid' => $id,
|
||||
],
|
||||
]
|
||||
]);
|
||||
}
|
||||
|
||||
public function popover($content, $ids)
|
||||
{
|
||||
return to_route('school.table.event', [
|
||||
'#table',
|
||||
'country' => $this->country->code,
|
||||
'year' => $this->year,
|
||||
'table' => [
|
||||
'filters' => [
|
||||
'byid' => $ids,
|
||||
]
|
||||
]
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -47,6 +47,11 @@ class EventTable extends DataTableComponent
|
||||
public function filters(): array
|
||||
{
|
||||
return [
|
||||
TextFilter::make('Event by ID', 'byid')
|
||||
->hiddenFromMenus()
|
||||
->filter(function (Builder $builder, string $value) {
|
||||
$builder->whereIn('course_events.id', str($value)->explode(','));
|
||||
}),
|
||||
TextFilter::make('Stadt')
|
||||
->config([
|
||||
'placeholder' => __('Suche Stadt'),
|
||||
|
||||
@@ -4,6 +4,117 @@
|
||||
{{-- 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="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>
|
||||
|
||||
<style>
|
||||
.calendar .calendar-header {
|
||||
background-color: #F7931A;
|
||||
color: white;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.calendar table.month th.month-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar table.month th.day-header {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar table.month td.day .day-content {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div
|
||||
wire:ignore
|
||||
x-data="{
|
||||
calendar: null,
|
||||
init() {
|
||||
let events = {{ Js::from($events) }};
|
||||
events = events.map(function(e){
|
||||
return {id: e.id, startDate: new Date(e.startDate), endDate: new Date(e.endDate), location: e.location, description: e.description}
|
||||
})
|
||||
|
||||
new Calendar(this.$refs.calendar, {
|
||||
style: 'background',
|
||||
language: 'de',
|
||||
startYear: {{ $year }},
|
||||
dataSource: events,
|
||||
yearChanged: function(e) {
|
||||
@this.set('year', e.currentYear);
|
||||
},
|
||||
clickDay: function(e) {
|
||||
if(e.events.length > 0) {
|
||||
var content = '';
|
||||
var ids = [];
|
||||
|
||||
for(var i in e.events) {
|
||||
ids.push(e.events[i].id);
|
||||
content += '<div class=\'event-tooltip-content\'>'
|
||||
+ '<div class=\'event-name\'>' + e.events[i].location + '</div>'
|
||||
+ '<div class=\'event-location\'>' + e.events[i].description + '</div>'
|
||||
+ '</div>';
|
||||
}
|
||||
console.log(content);
|
||||
|
||||
$wire.call('popover', content, ids.join(','));
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
}"
|
||||
>
|
||||
<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>
|
||||
|
||||
<livewire:tables.event-table :country="$country->code"/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user