qol(Monitors): adds back buttons, provides more data about child monitors

This commit is contained in:
Brock H Caldwell
2025-11-07 21:24:27 -06:00
parent 4ae70115b5
commit 50ec0c1d6f
7 changed files with 25 additions and 14 deletions

View File

@@ -0,0 +1 @@
<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 2048 2048"><path fill="currentColor" d="M2048 1088H250l787 787l-90 90L6 1024L947 83l90 90l-787 787h1798z"/></svg>

After

Width:  |  Height:  |  Size: 167 B

View File

@@ -29,7 +29,7 @@ class WebController extends AbstractController
private readonly Environment $renderer,
) {}
#[Route('/monitors', name: 'app_monitors', methods: ['GET'])]
#[Route('/monitors', name: 'app.monitors', methods: ['GET'])]
public function addMonitor()
{
return $this->render('monitor/index.html.twig');

View File

@@ -22,9 +22,9 @@
</div>
<div class="col-span-6 md:col-span-5 h-screen overflow-y-scroll">
<twig:Header />
<div class="flex justify-between items-center">
<h2 class="px-4 mt-4 mb-2 text-3xl font-bold text-gray-50">{% block h2 %}{% endblock %}</h2>
<div class="flex mt-4 gap-2 items-center grow-0 md:px-4">
<div class="flex flex-col md:flex-row justify-between md:items-center">
<h2 class="px-4 mt-4 mb-4 md:mb-2 text-3xl font-bold text-gray-50">{% block h2 %}{% endblock %}</h2>
<div class="flex mx-4 mb-2 md:mt-4 gap-2 items-center grow-0 md:px-4">
{% block action_buttons %}{% endblock %}
</div>
</div>

View File

@@ -55,7 +55,7 @@
{% if this.isWidget and this.monitors.items|length > 5 %}
<tr id="monitor_view_all">
<td colspan="100%" class="py-2 whitespace-nowrap bg-orange-500/80 uppercase text-xs font-medium text-center truncate dark:text-black">
<a href="{{ path('app_monitors') }}">View All Monitors</a>
<a href="{{ path('app.monitors') }}">View All Monitors</a>
</td>
</tr>
{% endif %}

View File

@@ -21,7 +21,7 @@
</li>
<li>
<a href="{{ path('app_monitors') }}"
<a href="{{ path('app.monitors') }}"
class="block rounded-lg
bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60
px-4 py-2 text-sm font-medium text-gray-50">

View File

@@ -15,6 +15,12 @@
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js'></script>
<div class="p-4">
<div class="mb-4 text-white">
<a href="{{ path('app.monitors') }}" class="btn btn-primary inline-flex items-center gap-2">
<twig:ux:icon name="fluent-mdl2:back" width="14" /> Back to Monitors
</a>
</div>
<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" />

View File

@@ -5,6 +5,11 @@
{% block body %}
<div class="px-4 py-2">
<div class="mb-4 text-white">
<a href="{{ path('app.monitors') }}" class="btn btn-primary inline-flex items-center gap-2">
<twig:ux:icon name="fluent-mdl2:back" width="14" /> Back to Monitors
</a>
</div>
<twig:Card title="Viewing your monitors for {{ monitor.title }}">
<div class="p-2 md:p-4 flex flex-col md:flex-row gap-6">
{% if results.media.poster != null %}
@@ -53,7 +58,6 @@
{% if results.media.genres != null %}
<div id="genres" class="text-gray-50 my-4">
{# <strong>Genres</strong>: <br />#}
{% for genre in results.media.genres %}
<small class="px-2 py-1 border border-orange-500 rounded-full">{{ genre }}</small>
{% endfor %}
@@ -65,10 +69,10 @@
<div class="flex flex-col gap-4">
<div class="flex flex-col grow text-white">
<strong class="mb-1">In Your Library</strong>
<div class="flex flex-col md:flex-row border-t-orange-500 text-xs gap-2">
<div class="flex flex-col md:flex-row border-t-orange-500 text-xs gap-4">
<div class="flex flex-col">
<span class="text-sm mb-1">Seasons</span>
<div class="flex flex-col md:flex-row border p-2 border-orange-500 rounded-lg text-xs items-center">
<div class="flex flex-row border p-2 border-orange-500 rounded-lg text-xs items-center">
<span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-orange-500 rounded-lg text-white">
<span>{{ library.seasonCount }}</span> full
</span>
@@ -83,7 +87,7 @@
<div class="flex flex-col">
<span class="text-sm mb-1">Episodes</span>
<div class="flex flex-col md:flex-row border p-2 border-orange-500 rounded-lg text-xs items-center">
<div class="flex flex-row border p-2 border-orange-500 rounded-lg text-xs items-center">
<span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-cyan-500 rounded-lg text-white">
<span>{{ library.episodeCount }}</span> existing
</span>
@@ -95,14 +99,14 @@
<div class="flex flex-col">
<span class="text-sm mb-1">Monitors</span>
<div class="flex flex-col md:flex-row border p-2 border-orange-500 rounded-lg text-xs items-center">
<span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-pink-500 rounded-lg text-white">
<div class="flex flex-row border p-2 border-orange-500 rounded-lg text-xs items-center">
<span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-red-500 rounded-lg text-white">
<span>{{ library.monitorCount }}</span> total
</span>
<span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-pink-500 rounded-lg text-white">
<span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-red-500 rounded-lg text-white">
<span>{{ library.activeMonitorCount }}</span> active
</span>
<span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-pink-500 rounded-lg text-white">
<span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-red-500 rounded-lg text-white">
<span>{{ library.completeMonitorCount }}</span> complete
</span>
</div>