wip-feat: mercure alerts

This commit is contained in:
2025-04-27 09:55:55 -05:00
parent 6138c94d7a
commit c32ff2e464
18 changed files with 719 additions and 1 deletions

View File

@@ -0,0 +1,5 @@
<turbo-stream action="prepend" target="alert_list">
<template>
<twig:Alert :title="title|default('')" :message="message" :alert_id="alert_id" data-controller="alert" />
</template>
</turbo-stream>

View File

@@ -0,0 +1,55 @@
{# Learn how to use Turbo Streams: https://github.com/symfony/ux-turbo#broadcast-doctrine-entities-update #}
{% block create %}
<turbo-stream action="append" target="active_downloads">
<template>
<twig:DownloadListRow
id="ad_download_{{ entity.id }}"
data="{{ entity.id }}">
</twig:DownloadListRow>
</template>
</turbo-stream>
{% endblock %}
{% block update %}
{% if entity.status != "Complete" %}
<turbo-stream action="update" target="ad_download_{{ id }}">
<template>
<div class="title">{{ entity.title }}</div>
<div class="filename">{{ entity.filename }}</div>
<div class="status">
<span class="pill {{ status_color_map[entity.status] }} status-badge">{{ entity.status }}</span>
<span class="pill progress">{{ entity.progress }}%</span>
</div>
</template>
</turbo-stream>
{% else %}
<turbo-stream action="remove" target="ad_download_{{ id }}">
</turbo-stream>
<turbo-stream action="prepend" target="alert_list">
<template>
<li class="alert alert-success alert-dismissible" id="alert_{{ entity.id }}" data-controller="alert">
<span class="alert-filename">{{ entity.filename }}</span> has finished downloading.
</li>
</template>
</turbo-stream>
<turbo-stream action="prepend" target="complete_downloads_list">
<template>
<div class="result_group download-item" id="cd_download_{{ entity.id }}">
<div class="title">{{ entity.title }}</div>
<div class="filename">{{ entity.filename }}</div>
<div class="status">
<span class="pill {{ status_color_map[entity.status] }} status-badge">{{ entity.status }}</span>
<span class="pill progress">{{ entity.progress }}%</span>
</div>
</div>
</template>
</turbo-stream>
{% endif %}
{% endblock %}
{% block remove %}
<turbo-stream action="remove" target="ad_download_{{ id }}"></turbo-stream>
<turbo-stream action="remove" target="cd_download_{{ id }}"></turbo-stream>
{% endblock %}

View File

@@ -0,0 +1,23 @@
<li {{ attributes }} id="alert_{{ alert_id }}" class="alert p-4 text-green-800 border border-green-300 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400 dark:border-green-800" role="alert">
<div class="flex items-center">
<svg class="shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
</svg>
<span class="sr-only">Info</span>
<h3 class="text-lg font-medium">{{ title|default('') }}</h3>
</div>
<div class="mt-2 text-sm">
{{ message }}
</div>
{# <div class="flex">#}
{# <button type="button" class="text-white bg-green-800 hover:bg-green-900 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-xs px-3 py-1.5 me-2 text-center inline-flex items-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">#}
{# <svg class="me-2 h-3 w-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 14">#}
{# <path d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z"/>#}
{# </svg>#}
{# View more#}
{# </button>#}
{# <button type="button" class="text-green-800 bg-transparent border border-green-800 hover:bg-green-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center dark:hover:bg-green-600 dark:border-green-600 dark:text-green-400 dark:hover:text-white dark:focus:ring-green-800" data-dismiss-target="#alert-additional-content-3" aria-label="Close">#}
{# Dismiss#}
{# </button>#}
{# </div>#}
</li>

View File

@@ -12,4 +12,11 @@
</div>
</div>
</div>
<div {{ turbo_stream_listen('alerts') }} class="absolute top-10 right-10 size-96">
<div >
<ul id="alert_list">
<twig:Alert title="Added to queue" message="Severance has been added to the queue." alert_id="alert_id" data-controller="alert" />
</ul>
</div>
</div>
</header>