fix: broken download, added to queue alert, download list component; feat: monitor list
This commit is contained in:
@@ -1,21 +1,28 @@
|
||||
{# Learn how to use Turbo Streams: https://github.com/symfony/ux-turbo#broadcast-doctrine-entities-update #}
|
||||
{% block create %}
|
||||
<turbo-stream action="remove" target="active_downloads_no_downloads">
|
||||
</turbo-stream>
|
||||
|
||||
<turbo-stream action="append" target="active_downloads">
|
||||
<template>
|
||||
<tr id="ad_download_{{ entity.id }}">
|
||||
<tr id="ad_download_{{ entity.id }}">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800 min-w-[45ch] max-w-[45ch] truncate">
|
||||
{{ entity.title }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50">
|
||||
<span class="p-1.5 bg-purple-600 rounded-full">
|
||||
<span class="w-4 inline-block text-center text-gray-50">{{ entity.progress }}</span>
|
||||
</span>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-50">
|
||||
{% if entity.progress < 100 %}
|
||||
<span class="p-1.5 bg-purple-600 rounded-full">
|
||||
<span class="w-4 inline-block text-center text-gray-50">{{ entity.progress }}</span>
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="p-1.5 bg-green-600 rounded-full">
|
||||
<span class="inline-block text-center text-gray-50">Complete</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</turbo-stream>
|
||||
|
||||
<twig:Alert title="Success" message="{{ entity.title }} has been added to the Download queue" alert_id="{{ entity.id }}" data-controller="alert" />
|
||||
{% endblock %}
|
||||
|
||||
{% block update %}
|
||||
@@ -33,6 +40,9 @@
|
||||
</template>
|
||||
</turbo-stream>
|
||||
{% else %}
|
||||
<turbo-stream action="remove" target="complete_downloads_no_downloads">
|
||||
</turbo-stream>
|
||||
|
||||
<turbo-stream action="remove" target="ad_download_{{ id }}">
|
||||
</turbo-stream>
|
||||
|
||||
@@ -42,16 +52,16 @@
|
||||
</template>
|
||||
</turbo-stream>
|
||||
|
||||
<turbo-stream action="prepend" target="recent_downloads">
|
||||
<turbo-stream action="prepend" target="complete_downloads">
|
||||
<template>
|
||||
<tr id="recent_download_{{ entity.id }}">
|
||||
<tr id="ad_download_{{ entity.id }}">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800 min-w-[45ch] max-w-[45ch] truncate">
|
||||
{{ entity.title }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50">
|
||||
<span class="p-1.5 bg-purple-600 rounded-full">
|
||||
<span class="w-4 inline-block text-center text-gray-50">{{ entity.progress }}</span>
|
||||
</span>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-50">
|
||||
<span class="p-1.5 bg-green-600 rounded-full">
|
||||
<span class="inline-block text-center text-gray-50">Complete</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
<div{{ attributes }} class="min-w-48">
|
||||
<table id="active_downloads" class="divide-y divide-gray-200 dark:divide-gray-50 dark:bg-gray-50 table-fixed" {{ turbo_stream_listen('App\\Download\\Framework\\Entity\\Download') }}>
|
||||
{% set table_body_id = (type == "complete") ? "complete_downloads" : "active_downloads" %}
|
||||
<table id="downloads" class="divide-y divide-gray-200 bg-gray-50 overflow-hidden rounded-lg table-fixed" {{ turbo_stream_listen('App\\Download\\Framework\\Entity\\Download') }}>
|
||||
<thead>
|
||||
<tr class="dark:bg-gray-50">
|
||||
<tr class="bg-orange-500 bg-filter bg-blur-lg bg-opacity-80 text-gray-950">
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-stone-800 min-w-[55ch] max-w-[55ch] truncate">
|
||||
class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-stone-800 min-w-[45ch] max-w-[45ch] truncate">
|
||||
Title
|
||||
</th>
|
||||
<th scope="col"
|
||||
@@ -12,24 +13,30 @@
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200 dark:divide-gray-50">
|
||||
{% if this.getDownloads()|length > 0 %}
|
||||
{% for download in this.getDownloads() %}
|
||||
<tbody id="{{ table_body_id }}" class="divide-y divide-gray-200 dark:divide-gray-50">
|
||||
{% if this.downloads|length > 0 %}
|
||||
{% for download in this.downloads %}
|
||||
<tr id="ad_download_{{ download.id }}">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800 min-w-[45ch] max-w-[45ch] truncate">
|
||||
{{ download.title }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-50">
|
||||
{% if download.progress < 100 %}
|
||||
<span class="p-1.5 bg-purple-600 rounded-full">
|
||||
<span class="w-4 inline-block text-center text-gray-50">{{ download.progress }}</span>
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="p-1.5 bg-green-600 rounded-full">
|
||||
<span class="inline-block text-center text-gray-50">Complete</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<tr>
|
||||
<tr id="{{ table_body_id }}_no_downloads">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-xs uppercase text-center col-span-2 font-medium text-gray-800 dark:text-stone-800" colspan="2">
|
||||
No active downloads
|
||||
No downloads
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
71
templates/components/MonitorList.html.twig
Normal file
71
templates/components/MonitorList.html.twig
Normal file
@@ -0,0 +1,71 @@
|
||||
<div{{ attributes }} class="min-w-48">
|
||||
<p class="text-white mb-1">The items you're currently monitoring to automatically download.</p>
|
||||
<table id="downloads" class="divide-y divide-gray-200 bg-gray-50 overflow-hidden rounded-lg table-fixed" {{ turbo_stream_listen('App\\Download\\Framework\\Entity\\Download') }}>
|
||||
<thead>
|
||||
<tr class="bg-orange-500 bg-filter bg-blur-lg bg-opacity-80 text-gray-950">
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-start text-xs font-medium uppercase min-w-[45ch] max-w-[45ch] truncate">
|
||||
Title
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-start text-xs font-medium uppercase">
|
||||
Search Count
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-start text-xs font-medium uppercase">
|
||||
Created at
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-start text-xs font-medium uppercase">
|
||||
Last Search Date
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-start text-xs font-medium uppercase">
|
||||
Status
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200 dark:divide-gray-50">
|
||||
{% if this.userMonitors()|length > 0 %}
|
||||
{% for monitor in this.userMonitors() %}
|
||||
<tr id="monitor_{{ monitor.id }}">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800 min-w-[45ch] max-w-[45ch] truncate">
|
||||
{{ monitor.title }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{{ monitor.searchCount }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{{ monitor.createdAt|date('m/d/Y h:i a') }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{{ monitor.lastSearch|date('m/d/Y h:i a') }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
|
||||
{% if monitor.status == "New" %}
|
||||
<span class="p-1.5 bg-orange-500 rounded-full">
|
||||
<span class="w-4 inline-block text-center text-gray-50">{{ monitor.status }}</span>
|
||||
</span>
|
||||
{% elseif monitor.status == "In Progress" or monitor.status == "Active" %}
|
||||
<span class="p-1.5 bg-purple-600 rounded-full">
|
||||
<span class="inline-block text-center text-gray-50">{{ monitor.status }}</span>
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="p-1.5 bg-green-600 rounded-full">
|
||||
<span class="inline-block text-center text-gray-50">{{ monitor.status }}</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-xs uppercase text-center col-span-2 font-medium text-gray-800 dark:text-stone-800" colspan="2">
|
||||
No monitors
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -7,51 +7,16 @@
|
||||
<h2 class="mb-2 text-3xl font-bold text-gray-50">Dashboard</h2>
|
||||
<div class="flex flex-row gap-4">
|
||||
<twig:Card title="Active Downloads" class="w-full">
|
||||
<twig:ActiveDownloadList />
|
||||
<twig:DownloadList :type="'active'" />
|
||||
</twig:Card>
|
||||
|
||||
<twig:Card title="Recent Downloads" class="w-full">
|
||||
<table id="recent_downloads" class="divide-y divide-gray-200 dark:divide-gray-50 dark:bg-gray-50 table-fixed">
|
||||
<thead>
|
||||
<tr class="dark:bg-gray-50">
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-stone-800 rounded-tl-md">
|
||||
Title
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-stone-800">
|
||||
Status
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200 dark:divide-gray-50">
|
||||
{% if recent_downloads|length > 0 %}
|
||||
{% for download in recent_downloads %}
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800">
|
||||
{{ download.title }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50">
|
||||
<span class="p-1 bg-green-600 rounded-lg">
|
||||
<span class="text-gray-50">Complete</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<tr class="bg-blue-400">
|
||||
<td class="px-6 py-3 whitespace-nowrap text-xs uppercase text-center col-span-2 font-medium text-rose-400 dark:text-stone-800" colspan="2">
|
||||
<a href="#">View all downloads</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-xs uppercase text-center col-span-2 font-medium text-gray-800 dark:text-stone-800" colspan="2">
|
||||
No recent downloads
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</tbody>
|
||||
</table>
|
||||
<twig:DownloadList :type="'complete'" />
|
||||
</twig:Card>
|
||||
</div>
|
||||
<div class="flex flex-row gap-4">
|
||||
<twig:Card title="Monitors" class="w-full">
|
||||
<twig:MonitorList />
|
||||
</twig:Card>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
|
||||
Reference in New Issue
Block a user