fix: adds modal for adding new monitor

This commit is contained in:
2025-07-07 15:04:20 -05:00
parent 073a37c080
commit 5f54e48b3f
4 changed files with 20 additions and 76 deletions

View File

@@ -8,7 +8,7 @@ import { Controller } from '@hotwired/stimulus';
/* stimulusFetch: 'lazy' */ /* stimulusFetch: 'lazy' */
export default class extends Controller { export default class extends Controller {
static targets = ['button', 'options'] static targets = ['button', 'options']
static outlets = ['result-filter'] static outlets = ['result-filter', 'dialog']
static values = { static values = {
tmdbId: String, tmdbId: String,
imdbId: String, imdbId: String,
@@ -54,6 +54,9 @@ export default class extends Controller {
title: this.titleValue, title: this.titleValue,
monitorType: 'tvshows', monitorType: 'tvshows',
}); });
if (this.hasDialogOutlet) {
this.dialogOutlet.close();
}
} }
async monitorSeason() { async monitorSeason() {

View File

@@ -40,7 +40,7 @@ services:
tty: true tty: true
environment: environment:
TZ: America/Chicago 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: scheduler:

View File

@@ -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"> <dialog data-dialog-target="dialog" class="py-3 px-4 w-[30rem] rounded-md">
<h2 class="mb-4 text-2xl font-bold">{{ heading }}</h2> <h2 class="mb-4 text-2xl font-bold">{{ heading }}</h2>
@@ -22,5 +22,5 @@
{% endif %} {% endif %}
</dialog> </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> </div>

View File

@@ -22,86 +22,27 @@
{{ results.media.title }} - {{ results.media.year }} {{ results.media.title }} - {{ results.media.year }}
</h3> </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', { <div {{ stimulus_controller('monitor_button', {
tmdbId: results.media.tmdbId, tmdbId: results.media.tmdbId,
imdbId: results.media.imdbId, imdbId: results.media.imdbId,
title: results.media.title, title: results.media.title,
})}} })}}
data-monitor-button-result-filter-outlet="#filter" 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') }} <twig:Modal
class="h-8 text-white bg-green-800 bg-opacity-60 font-medium rounded-lg text-sm unique_class="monitor-modal"
px-2 py-1.5 text-center inline-flex items-center hover:bg-green-900 border-2 button_class="h-8 text-white bg-green-800 bg-opacity-60 font-medium rounded-lg text-sm
border-green-500" px-2 py-1.5 text-center inline-flex items-center hover:bg-green-900 border-2
type="button" 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 Monitoring a series will continuously search for new episodes and attempt to automatically download them. Your download preferences
<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"> will be used to choose the correct file. To stop monitoring for new episodes, delete the monitor.
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/> <br /><br />
</svg> Would you like to add a new monitor for "{{ results.media.title }}"?
</button> </twig:Modal>
<!-- 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>
</div> </div>