mirror of
https://github.com/Einundzwanzig-Podcast/einundzwanzig-portal.git
synced 2025-12-11 06:46:47 +00:00
event calendar
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
|
||||
namespace App\Http\Livewire\BitcoinEvent;
|
||||
|
||||
use App\Models\BitcoinEvent;
|
||||
use App\Models\Country;
|
||||
use Livewire\Component;
|
||||
|
||||
@@ -10,6 +11,27 @@ class BitcoinEventTable extends Component
|
||||
public Country $country;
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.bitcoin-event.bitcoin-event-table');
|
||||
return view('livewire.bitcoin-event.bitcoin-event-table', [
|
||||
'events' => BitcoinEvent::query()
|
||||
->get()
|
||||
->map(fn($event) => [
|
||||
'id' => $event->id,
|
||||
'startDate' => $event->from,
|
||||
'endDate' => $event->to,
|
||||
'location' => $event->title,
|
||||
'description' => $event->description,
|
||||
]),
|
||||
]);
|
||||
}
|
||||
|
||||
public function popover($content, $ids)
|
||||
{
|
||||
return to_route('bitcoinEvent.table.bitcoinEvent', [
|
||||
'country' => $this->country->code, 'table' => [
|
||||
'filters' => [
|
||||
'byid' => $ids,
|
||||
]
|
||||
]
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@ use App\Models\BitcoinEvent;
|
||||
use Illuminate\Database\Eloquent\Builder;
|
||||
use Rappasoft\LaravelLivewireTables\DataTableComponent;
|
||||
use Rappasoft\LaravelLivewireTables\Views\Column;
|
||||
use Rappasoft\LaravelLivewireTables\Views\Filters\TextFilter;
|
||||
|
||||
class BitcoinEventTable extends DataTableComponent
|
||||
{
|
||||
@@ -34,6 +35,17 @@ class BitcoinEventTable extends DataTableComponent
|
||||
->setPerPage(10);
|
||||
}
|
||||
|
||||
public function filters(): array
|
||||
{
|
||||
return [
|
||||
TextFilter::make('Event by ID', 'byid')
|
||||
->hiddenFromMenus()
|
||||
->filter(function (Builder $builder, string $value) {
|
||||
$builder->whereIn('bitcoin_events.id', str($value)->explode(','));
|
||||
}),
|
||||
];
|
||||
}
|
||||
|
||||
public function columns(): array
|
||||
{
|
||||
return [
|
||||
|
||||
@@ -4,6 +4,72 @@
|
||||
{{-- 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="">
|
||||
|
||||
<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',
|
||||
dataSource: events,
|
||||
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>
|
||||
|
||||
<livewire:tables.bitcoin-event-table :country="$country->code"/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user