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

assets/bootstrap.js

@@ -10,7 +10,6 @@ import { startStimulusApp } from '@symfony/stimulus-bundle';
 import Popover from '@stimulus-components/popover';
 import Dialog from '@stimulus-components/dialog';
 import Dropdown from '@stimulus-components/dropdown';
-
 import 'animate.css';
 
 const app = startStimulusApp();

assets/controllers/dashboard_widgets_controller.js

@@ -1,40 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-import {GridStack} from "../vendor/gridstack/gridstack.index.js";
-
-/*
-* The following line makes this controller "lazy": it won't be downloaded until needed
-* See https://symfony.com/bundles/StimulusBundle/current/index.html#lazy-stimulus-controllers
-*/
-
-/* stimulusFetch: 'lazy' */
-export default class extends Controller {
-    grid;
-
-    initialize() {
-
-    }
-
-    connect() {
-        this.grid = GridStack.init({
-            column: 2,
-            alwaysShowResizeHandle: true,
-            margin: "2rem",
-            resizable: {
-                handles: 'e,se,s,sw,w'
-            }
-        });
-
-        this.grid.load();
-    }
-
-    // Add custom controller actions here
-    // fooBar() { this.fooTarget.classList.toggle(this.bazClass) }
-
-    disconnect() {
-        // Called anytime its element is disconnected from the DOM
-        // (on page change, when it's removed from or moved in the DOM, etc.)
-
-        // Here you should remove all event listeners added in "connect()" 
-        // this.fooTarget.removeEventListener('click', this._fooBar)
-    }
-}

assets/icons/fluent-mdl2/back.svg

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

importmap.php

@@ -70,7 +70,4 @@ return [
     '@ungap/custom-elements' => [
         'version' => '1.3.0',
     ],
-    'gridstack' => [
-        'version' => '12.3.3',
-    ],
 ];

src/Monitor/Framework/Controller/WebController.php

@@ -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');

src/Monitor/Framework/Scheduler/MonitorDispatcher.php

@@ -33,9 +33,7 @@ class MonitorDispatcher
             'tvshows' => MonitorTvShowCommand::class,
         ];
 
-        $monitors = $this->monitorRepository->findBy([
-            'status' => ['New', 'Active'],
-        ]);
+        $monitors = $this->monitorRepository->findBy(['status' => ['New', 'Active']]);
 
         foreach ($monitors as $monitor) {
             $monitor->setStatus('In Progress');

templates/base.html.twig

@@ -11,14 +11,7 @@
         {% endblock %}
 
         {% block javascripts %}
-            {% block pre_js %}{% endblock %}
-
-            {% block importmap %}
-                {{ importmap('app') }}
-            {% endblock %}
-
-            {% block post_js %}{% endblock %}
-
+            {% block importmap %}{{ importmap('app') }}{% endblock %}
             <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js'></script>
         {% endblock %}
     </head>
@@ -29,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>

templates/components/MonitorList.html.twig

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

templates/components/NavBar.html.twig

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

templates/index/index.html.twig

@@ -4,31 +4,20 @@
 {% block h2 %}Dashboard{% endblock %}
 
 {% block body %}
-    <div class="p-4 z-10">
-        <div class="grid-stack gs-2">
-            <div class="grid-stack-item" gs-x="1">
-                <div class="grid-stack-item-content">
-                    <twig:Card title="Active Downloads">
-                        <twig:DownloadList :type="'active'" />
-                    </twig:Card>
-                </div>
-            </div>
+    <div class="p-4 flex flex-col grow gap-4 z-10">
+        <div class="flex flex-col md:flex-row gap-4">
+            <twig:Card title="Active Downloads" class="w-full">
+                <twig:DownloadList :type="'active'" />
+            </twig:Card>
 
-            <div class="grid-stack-item"  gs-x="2">
-                <div class="grid-stack-item-content">
-                    <twig:Card title="Complete Downloads" >
-                        <twig:DownloadList :type="'complete'" />
-                    </twig:Card>
-                </div>
-            </div>
-
-            <div class="grid-stack-item" gs-x="3">
-                <div class="grid-stack-item-content">
-                    <twig:Card title="Active Monitors">
-                        <twig:MonitorList :type="'active'" />
-                    </twig:Card>
-                </div>
-            </div>
+            <twig:Card title="Recent Downloads" class="w-full">
+                <twig:DownloadList :type="'complete'" />
+            </twig:Card>
+        </div>
+        <div class="flex flex-col md:flex-row gap-4">
+            <twig:Card title="Monitors" class="w-full">
+                <twig:MonitorList :type="'active'" :isWidget="true" />
+            </twig:Card>
         </div>
         <div class="flex flex-col gap-4">
             <twig:Card title="Popular Movies" contentClass="grid grid-cols-2 gap-4 md:flex md:flex-row md:justify-between w-full">
@@ -56,6 +45,5 @@
                 {% endfor %}
             </twig:Card>
         </div>
-        <div class="grid-stack" data-controller="dashboard-widgets"></div>
     </div>
 {% endblock %}

templates/monitor/upcoming-episodes.html.twig

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

templates/monitor/view.html.twig

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