feat: displaying and managing active jobs

This commit is contained in:
Per Stark
2025-01-28 11:51:45 +01:00
parent ae63416943
commit 0fe253a127
13 changed files with 522 additions and 181 deletions
@@ -0,0 +1,46 @@
{% block active_jobs_section %}
{% if active_jobs %}
<ul id="active_jobs_section" class="list bg-base-100 rounded-box shadow-md">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Active Jobs</li>
{% for item in active_jobs %}
<li class="list-row">
<div class="bg-secondary rounded-box size-10 flex justify-center items-center text-secondary-content">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="size-8">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
</svg>
</div>
<div>
<div>
{{item.created_at|datetimeformat(format="short", tz=user.timezone)}}</div>
<div
class="text-xs font-semibold opacity-60 [&:before]:content-['Status:_'] [&:before]:uppercase [&:before]:opacity-60">
{{item.status}}
</div>
</div>
<p class="list-col-wrap text-xs [&:before]:content-['Content:_'] [&:before]:uppercase [&:before]:opacity-60">
{{item.content}}
</p>
<!-- <button class="btn disabled btn-square btn-ghost"> -->
<!-- <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> -->
<!-- <g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"> -->
<!-- <path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75z"></path> -->
<!-- <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"></path> -->
<!-- </g> -->
<!-- </svg> -->
<!-- </button> -->
<button hx-delete="/jobs/{{item.id}}" hx-target="#active_jobs_section" hx-swap="outerHTML"
class="btn btn-square btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor">
<path d="M3 6h18"></path>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
</g>
</svg>
</button>
</li>
{% endfor %}
</ul>
{% endif %}
{% endblock %}
+7 -2
View File
@@ -2,8 +2,13 @@
<div class="container">
{% include 'index/signed_in/searchbar.html' %}
{% include "index/signed_in/recent_content.html" %}
{% include "index/signed_in/quick_actions.html" %}
<div class="grid grid-cols-1 md:grid-cols-2">
{% include "index/signed_in/active_jobs.html" %}
{% include "index/signed_in/recent_content.html" %}
</div>
</div>
</div>
+1 -1
View File
@@ -1,7 +1,7 @@
<div class="card bg-base-100 shadow-xl mt-4">
<div class="card-body">
<div class="flex gap-4">
<a class="btn btn-primary" hx-get="/ingress-form" hx-swap="outerHTML">Add Content</a>
<button class="btn btn-primary" hx-get="/ingress-form" hx-swap="outerHTML">Add Content</button>
</div>
</div>
</div>
+45 -24
View File
@@ -1,24 +1,45 @@
<div class="card bg-base-100 shadow-xl mt-4">
<!-- <div class="mt-4"> -->
<p>{{latest_text_contents}}</p>
<div class="card-body">
<h2 class="card-title">Recently Added Content</h2>
<ul class="list bg-base-100 rounded-box shadow-md">
{% for item in latest_text_contents %}
<li class="list-row">
<div class="text-2xl text-ellipsis text-nowrap overflow-hidden">
{{item.created_at|datetimeformat(format="short", tz="Europe/Stockholm")}}</div>
<div>
<div>{{item.category}}</div>
<div class="text-xs uppercase font-semibold opacity-60">{{item.text}}</div>
</div>
<button class="btn btn-outline">
Edit
</button>
<button class="btn btn-error">
Delete </button>
</li>
{% endfor %}
</ul>
</div>
</div>
{% block latest_content_section %}
<ul id="latest_content_section" class="list bg-base-100 rounded-box shadow-md">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Recently added content</li>
{% for item in latest_text_contents %}
<li class="list-row">
<div class="bg-accent rounded-box size-10 flex justify-center items-center text-accent-content">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="size-8">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
</svg>
</div>
<div>
<div>
{{item.created_at|datetimeformat(format="short", tz=user.timezone)}}</div>
<div
class="text-xs font-semibold opacity-60 [&:before]:content-['Instructions:_'] [&:before]:uppercase [&:before]:opacity-60">
{{item.instructions}}
</div>
</div>
<p class="list-col-wrap text-xs [&:before]:content-['Content:_'] [&:before]:uppercase [&:before]:opacity-60">
{{item.text}}
</p>
<!-- <button class="btn disabled btn-square btn-ghost"> -->
<!-- <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> -->
<!-- <g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"> -->
<!-- <path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75z"></path> -->
<!-- <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"></path> -->
<!-- </g> -->
<!-- </svg> -->
<!-- </button> -->
<button hx-delete="/text-content/{{item.id}}" hx-target="#latest_content_section" hx-swap="outerHTML"
class="btn btn-square btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor">
<path d="M3 6h18"></path>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
</g>
</svg>
</button>
</li>
{% endfor %}
</ul>
{% endblock %}
+5 -3
View File
@@ -1,4 +1,4 @@
<form class="space-y-4 mt-2 w-full" hx-post="/ingress-form" enctype="multipart/form-data">
<form id="ingress-form" class="space-y-4 mt-2 w-full" hx-post="/ingress-form" enctype="multipart/form-data">
<div class="form-control">
<label class="floating-label">
<span>Instructions</span>
@@ -34,7 +34,9 @@
<div id="error-message" class="text-error text-center {% if not error %}hidden{% endif %}">{{ error }}</div>
<div class="form-control mt-6">
<button type="submit" class="btn btn-primary w-full">Submit</button>
<div class="form-control mt-6 flex flex-col sm:flex-row gap-1">
<button hx-get="/hide-ingress-form" hx-target="#ingress-form" hx-swap=outerHTML"
class="btn btn-outline w-full sm:w-fit">Cancel</button>
<button type="submit" class="btn btn-primary w-full sm:w-fit">Submit</button>
</div>
</form>
-62
View File
@@ -1,62 +0,0 @@
{% extends "body_base.html" %}
{% block main %}
<div class="container mx-auto p-4">
<h1 class="text-2xl font-bold mb-4">Active Tasks</h1>
{% if not jobs %}
<div class="alert alert-info">
<span>No active tasks</span>
</div>
{% else %}
<div class="grid gap-4">
{% for job in jobs %}
{% if job.status == "Created" or job.status is mapping and job.status.InProgress %}
<div class="card bg-base-200 shadow-xl" id="job-card-{{ job.id }}">
<div class="card-body">
<div class="card-title">
{% if job.content.Url %}
<h2>URL Task</h2>
<p class="text-sm text-gray-500 break-all">{{ job.content.Url.url }}</p>
{% elif job.content.File %}
<h2>File Task</h2>
<p class="text-sm text-gray-500">{{ job.content.File.file_info.path }}</p>
{% elif job.content.Text %}
<h2>Text Task</h2>
<p class="text-sm text-gray-500">{{ job.content.Text.text }}</p>
{% endif %}
</div>
<div class="space-y-2">
<p><span class="font-medium">Status:</span>
{% if job.status == "Created" %}
Created
{% elif job.status.InProgress %}
In Progress
{% endif %}
</p>
{% if job.status.InProgress %}
<p><span class="font-medium">Attempts:</span> {{ job.status.InProgress.attempts }}</p>
<p><span class="font-medium">Last Attempt:</span>
{{ job.status.InProgress.last_attempt }}</p>
{% endif %}
<p><span class="font-medium">Category:</span>
{% if job.content.Url %}
{{ job.content.Url.category }}
{% elif job.content.File %}
{{ job.content.File.category }}
{% elif job.content.Text %}
{{ job.content.Text.category }}
{% endif %}
</p>
</div>
<div class="card-actions justify-end mt-4">
<form hx-delete="/queue/{{ job.id }}" hx-target="#job-card-{{ job.id }}" hx-swap="outerHTML">
<button class="btn btn-error">Cancel Task</button>
</form>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
</div>
{% endblock %}