kithkin/resources/views/calendar/index.blade.php

120 lines
5.1 KiB
PHP

<x-app-layout id="calendar">
<x-slot name="aside">
<h1>
{{ __('Calendar') }}
</h1>
<div class="content aside-inset">
<form id="calendar-toggles"
class="drawers"
action="{{ route('calendar.index') }}"
method="get">
<details open>
<summary>{{ __('My Calendars') }}</summary>
<ul class="content">
@foreach ($calendars->where('is_remote', false) as $cal)
<li>
<x-input.checkbox-label
label="{{ $cal['name'] }}"
name="c[]"
value="{{ $cal['slug'] }}"
:checked="$cal['visible']"
checkclass="calendar-toggle"
style="--checkbox-color: {{ $cal['color'] }}"
/>
</li>
@endforeach
</ul>
{{-- fallback submit button for no-JS environments --}}
<noscript>
<button type="submit">{{ __('Apply') }}</button>
</noscript>
</details>
<details open>
<summary>
<span>{{ __('Other Calendars') }}</span>
<a href="{{ route('calendar.settings.subscribe') }}"
class="button button--icon button--sm">+</a>
</summary>
<ul class="content">
@foreach ($calendars->where('is_remote', true) as $cal)
<li>
<x-input.checkbox-label
label="{{ $cal['name'] }}"
name="c[]"
value="{{ $cal['slug'] }}"
:checked="$cal['visible']"
checkclass="calendar-toggle"
style="--checkbox-color: {{ $cal['color'] }}"
/>
</li>
@endforeach
</ul>
</details>
</form>
</div>
<x-calendar.mini :mini="$mini" :nav="$mini_nav" :view="$view" class="aside-inset" />
</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'] }}" aria-label="Go back 1 month">
<x-icon-chevron-left />
</x-button.group-button>
<x-button.group-button type="submit" name="date" value="{{ $nav['today'] }}" aria-label="Go to today">
Today
</x-button.group-button>
<x-button.group-button type="submit" name="date" value="{{ $nav['next'] }}" aria-label="Go forward 1 month">
<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.settings') }}">
<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>