event calendar

This commit is contained in:
Benjamin Takats
2022-12-15 19:17:05 +01:00
parent 03f273c965
commit 166d47c7f2
3 changed files with 101 additions and 1 deletions

View File

@@ -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,
]
]
]);
}
}

View File

@@ -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 [

View File

@@ -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>