50 lines
2.0 KiB
Twig
50 lines
2.0 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block h2 %}Upcoming Episodes{% endblock %}
|
|
|
|
{% block action_buttons %}
|
|
<a href="{{ path('app.monitor.upcoming-episodes') }}" data-turbo="false"
|
|
class="h-6 bg-orange-500/80 hover:bg-orange-600/80 px-2 text-white rounded-ms text-sm font-semibold">
|
|
Upcoming Episodes
|
|
</a>
|
|
<twig:ActionButton action="monitorDispatch" text="Run Monitors" />
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
{{ turbo_page_requires_reload() }}
|
|
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js'></script>
|
|
|
|
<div class="p-4">
|
|
<twig:Card title="Upcoming episodes of shows your monitoring">
|
|
<a href="{{ path('app.monitors.ical', {email: app.user.email}) }}" title="Subscribe to the 'Upcoming Episodes' calendar via iCal. Click to export the events to a .ics file or copy the link and use it to subscribe in a calendar app that supports iCal/ics calendars." class="mb-2 self-end dark:text-white decoration-underline">
|
|
<twig:ux:icon name="lets-icons:calendar-add-light" width="24" class="text-orange-500" />
|
|
</a>
|
|
<div id="calendar" class="text-white">
|
|
</div>
|
|
</twig:Card>
|
|
</div>
|
|
|
|
<script>
|
|
function getView() {
|
|
if (window.innerWidth < 768) {
|
|
return 'listWeek';
|
|
} else {
|
|
return 'dayGridMonth';
|
|
}
|
|
}
|
|
document.addEventListener('DOMContentLoaded', async function() {
|
|
let data = await fetch('/api/monitor/upcoming-episodes');
|
|
data = (await data.json())['data'];
|
|
|
|
const calendarEl = document.getElementById('calendar');
|
|
const calendar = new FullCalendar.Calendar(calendarEl, {
|
|
initialView: getView(),
|
|
events: data['episodes'],
|
|
windowResize: function(arg) {
|
|
this.changeView(getView());
|
|
}
|
|
});
|
|
calendar.render();
|
|
});
|
|
</script>
|
|
{% endblock %} |