106 lines
4.2 KiB
PHP
106 lines
4.2 KiB
PHP
<x-app-layout id="calendar">
|
|
|
|
<x-slot name="aside">
|
|
<h1>
|
|
{{ __('Calendar') }}
|
|
</h1>
|
|
<div class="grow flex flex-col gap-4">
|
|
<details open>
|
|
<summary>{{ __('My Calendars') }}</summary>
|
|
<form id="calendar-toggles"
|
|
class="content"
|
|
action="{{ route('calendar.index') }}"
|
|
method="get">
|
|
<ul>
|
|
@foreach ($calendars as $cal)
|
|
<li>
|
|
<label class="flex items-center space-x-2">
|
|
<input type="checkbox"
|
|
class="calendar-toggle"
|
|
name="c[]"
|
|
value="{{ $cal['slug'] }}"
|
|
style="--checkbox-color: {{ $cal['color'] }}"
|
|
@checked($cal['visible'])>
|
|
<span>{{ $cal['name'] }}</span>
|
|
</label>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
|
|
{{-- fallback submit button for no-JS environments --}}
|
|
<noscript>
|
|
<button type="submit">{{ __('Apply') }}</button>
|
|
</noscript>
|
|
</form>
|
|
</details>
|
|
</div>
|
|
<x-calendar.mini>
|
|
@foreach ($grid['weeks'] as $week)
|
|
@foreach ($week as $day)
|
|
<x-calendar.mini-day :day="$day" />
|
|
@endforeach
|
|
@endforeach
|
|
</x-calendar.mini>
|
|
</x-slot>
|
|
|
|
<x-slot name="header">
|
|
<h2>
|
|
<strong>{{ $active['month'] }}</strong>
|
|
<span>{{ $active['year'] }}</span>
|
|
</h2>
|
|
<menu>
|
|
<li>
|
|
<form id="calendar-nav"
|
|
action="{{ route('calendar.index') }}"
|
|
method="get"
|
|
hx-get="{{ route('calendar.index') }}"
|
|
hx-target="#calendar"
|
|
hx-select="#calendar"
|
|
hx-swap="outerHTML"
|
|
hx-push-url="true"
|
|
hx-include="#calendar-toggles">
|
|
|
|
{{-- keep current view (month/week/4day) --}}
|
|
<input type="hidden" name="view" value="{{ $view }}">
|
|
<nav class="button-group button-group--primary">
|
|
<x-button.group-button type="submit" name="date" value="{{ $nav['prev'] }}">
|
|
<x-icon-chevron-left />
|
|
</x-button.group-button>
|
|
<x-button.group-button type="submit" name="date" value="{{ $nav['today'] }}">
|
|
Today
|
|
</x-button.group-button>
|
|
<x-button.group-button type="submit" name="date" value="{{ $nav['next'] }}">
|
|
<x-icon-chevron-right />
|
|
</x-button.group-button>
|
|
</nav>
|
|
<noscript>
|
|
{{-- not needed, buttons already submit the form --}}
|
|
</noscript>
|
|
</form>
|
|
</li>
|
|
<li>
|
|
<form id="calendar-view" class="button-group button-group--primary" method="get" action="/">
|
|
<x-button.group-input>Day</x-button.group-button>
|
|
<x-button.group-input>Week</x-button.group-button>
|
|
<x-button.group-input active="true">Month</x-button.group-button>
|
|
<x-button.group-input>3-Up</x-button.group-button>
|
|
</form>
|
|
<li>
|
|
<a class="button button--primary" href="{{ route('calendar.create') }}">
|
|
<x-icon-plus-circle /> Create
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="button button--icon" href="{{ route('calendar.create') }}">
|
|
<x-icon-settings />
|
|
</a>
|
|
</li>
|
|
</menu>
|
|
</x-slot>
|
|
|
|
<x-slot name="article">
|
|
<x-calendar.full class="month" :grid="$grid" :calendars="$calendars" :events="$events" />
|
|
</x-slot>
|
|
|
|
</x-app-layout>
|