From 5f54e48b3fa61ccb4c2c856c3111fa78296881c8 Mon Sep 17 00:00:00 2001
From: Brock H Caldwell <brock@caldwellnetworks.com>
Date: Mon, 7 Jul 2025 15:04:20 -0500
Subject: [PATCH] fix: adds modal for adding new monitor

---
 .../controllers/monitor_button_controller.js  |  5 +-
 compose.yml                                   |  2 +-
 templates/components/Modal.html.twig          |  4 +-
 templates/search/result.html.twig             | 85 +++----------------
 4 files changed, 20 insertions(+), 76 deletions(-)

diff --git a/assets/controllers/monitor_button_controller.js b/assets/controllers/monitor_button_controller.js
index d07e547..f34dcb3 100644
--- a/assets/controllers/monitor_button_controller.js
+++ b/assets/controllers/monitor_button_controller.js
@@ -8,7 +8,7 @@ import { Controller } from '@hotwired/stimulus';
 /* stimulusFetch: 'lazy' */
 export default class extends Controller {
     static targets = ['button', 'options']
-    static outlets = ['result-filter']
+    static outlets = ['result-filter', 'dialog']
     static values = {
         tmdbId: String,
         imdbId: String,
@@ -54,6 +54,9 @@ export default class extends Controller {
             title: this.titleValue,
             monitorType: 'tvshows',
         });
+        if (this.hasDialogOutlet) {
+            this.dialogOutlet.close();
+        }
     }
 
     async monitorSeason() {
diff --git a/compose.yml b/compose.yml
index 09a7e65..6cb77bc 100755
--- a/compose.yml
+++ b/compose.yml
@@ -40,7 +40,7 @@ services:
     tty: true
     environment:
       TZ: America/Chicago
-    command: php /app/bin/console messenger:consume media_cache -vv --time-limit=3600
+    command: php /app/bin/console messenger:consume async -vv --time-limit=3600
 
 
   scheduler:
diff --git a/templates/components/Modal.html.twig b/templates/components/Modal.html.twig
index 91e6ea9..8c1ee2e 100644
--- a/templates/components/Modal.html.twig
+++ b/templates/components/Modal.html.twig
@@ -1,4 +1,4 @@
-<div{{ attributes }} data-controller="dialog" data-action="click->dialog#backdropClose" class="flex flex-row items-center">
+<div{{ attributes }} data-controller="dialog" data-action="click->dialog#backdropClose" class="modal flex flex-row items-center {{ container_class|default('') }}">
     <dialog data-dialog-target="dialog" class="py-3 px-4 w-[30rem] rounded-md">
         <h2 class="mb-4 text-2xl font-bold">{{ heading }}</h2>
 
@@ -22,5 +22,5 @@
         {% endif %}
     </dialog>
 
-    <button type="button" data-action="dialog#open">{{ button_text|raw }}</button>
+    <button type="button" class="{{ button_class|default('') }}" data-action="dialog#open">{{ button_text|raw }}</button>
 </div>
\ No newline at end of file
diff --git a/templates/search/result.html.twig b/templates/search/result.html.twig
index bc4ec44..d8315c9 100644
--- a/templates/search/result.html.twig
+++ b/templates/search/result.html.twig
@@ -22,86 +22,27 @@
                                 {{ results.media.title }} - {{ results.media.year }}
                             </h3>
 
-{#                            <div data-controller="dropdown" class="relative"#}
-{#                                 {{ stimulus_controller('monitor_button', {#}
-{#                                     tmdbId: results.media.tmdbId,#}
-{#                                     imdbId: results.media.imdbId,#}
-{#                                     title: results.media.title,#}
-{#                                 })}}#}
-{#                                 data-monitor-button-result-filter-outlet="#filter"#}
-{#                            >#}
-{#                                <button type="button" data-action="dropdown#toggle click@window->dropdown#hide"#}
-{#                                        class="h-8 text-white bg-green-800 bg-opacity-60 font-medium rounded-lg text-sm#}
-{#                                         px-2 py-1.5 text-center inline-flex items-center hover:bg-green-900 border-2#}
-{#                                         border-green-500">#}
-{#                                        Monitor#}
-{#                                    <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">#}
-{#                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" /></svg>#}
-{#                                    </svg>#}
-{#                                </button>#}
-
-{#                                <div#}
-{#                                     data-dropdown-target="menu"#}
-{#                                     class="hidden transition transform origin-top-right absolute right-0#}
-{#                                            flex flex-col rounded-md shadow-sm w-44 bg-green-800 border-2 border-green-500 mt-1"#}
-{#                                     data-transition-enter-from="opacity-0 scale-95"#}
-{#                                     data-transition-enter-to="opacity-100 scale-100"#}
-{#                                     data-transition-leave-from="opacity-100 scale-100"#}
-{#                                     data-transition-leave-to="opacity-0 scale-95"#}
-{#                                >#}
-{#                                    <a href="#"#}
-{#                                       data-action="dropdown#toggle"#}
-{#                                       class="backdrop-filter p-2 bg-opacity-100 hover:bg-green-950 rounded-t-md"#}
-{#                                    >#}
-{#                                       Entire Series#}
-{#                                    </a>#}
-{#                                    <a href="#"#}
-{#                                       data-action="dropdown#toggle"#}
-{#                                       class="backdrop-filter p-2 bg-opacity-100 hover:bg-green-950 rounded-b-md"#}
-{#                                    >#}
-{#                                       Season#}
-{#                                    </a>#}
-{#                                </div>#}
-{#                            </div>#}
-
-
                             <div {{ stimulus_controller('monitor_button', {
                                 tmdbId: results.media.tmdbId,
                                 imdbId: results.media.imdbId,
                                 title: results.media.title,
                             })}}
                                 data-monitor-button-result-filter-outlet="#filter"
+                                data-monitor-button-dialog-outlet=".monitor-modal"
                             >
-                                <button data-monitor-button-target="button" {{ stimulus_action('monitor_button', 'toggle', 'click') }}
-                                        class="h-8 text-white bg-green-800 bg-opacity-60 font-medium rounded-lg text-sm
-                                         px-2 py-1.5 text-center inline-flex items-center hover:bg-green-900 border-2
-                                         border-green-500"
-                                        type="button"
+                                <twig:Modal
+                                        unique_class="monitor-modal"
+                                        button_class="h-8 text-white bg-green-800 bg-opacity-60 font-medium rounded-lg text-sm
+                                        px-2 py-1.5 text-center inline-flex items-center hover:bg-green-900 border-2
+                                        border-green-500"
+                                        container_class="monitor-modal"
+                                        heading="'Hol Up!" button_text="Monitor" submit_action="{{ stimulus_action('monitor_button', 'monitorSeries', 'click') }}" show_cancel show_submit
                                 >
-                                    Monitor
-                                    <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
-                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
-                                    </svg>
-                                </button>
-
-                                <!-- Dropdown menu -->
-                                <div data-monitor-button-target="options"
-                                     class="absolute mt-1 right-12 z-40 hidden divide-y rounded-md shadow-sm
-                                     w-44 bg-green-800 backdrop-filter bg-opacity-100 border-2 border-green-500"
-                                >
-                                    <ul class="py-2 text-sm text-gray-100" aria-labelledby="dropdownDefaultButton">
-                                        <li {{ stimulus_action('monitor_button', 'monitorSeries', 'click') }}>
-                                            <button class="px-4 py-2 hover:bg-green-950 w-full text-left">
-                                                Entire Series
-                                            </button>
-                                        </li>
-                                        <li {{ stimulus_action('monitor_button', 'monitorSeason', 'click') }}>
-                                            <button class="px-4 py-2 hover:bg-green-950 w-full text-left">
-                                                Season
-                                            </button>
-                                        </li>
-                                    </ul>
-                                </div>
+                                    Monitoring a series will continuously search for new episodes and attempt to automatically download them. Your download preferences
+                                    will be used to choose the correct file. To stop monitoring for new episodes, delete the monitor.
+                                    <br /><br />
+                                    Would you like to add a new monitor for "{{ results.media.title }}"?
+                                </twig:Modal>
                             </div>