yrtria/booth-musicgpt
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Steps progress indicator to admin request page

Browse source
This commit is contained in:
Troll (Hermes Agent) 2026-08-11 16:36:03 +00:00
parent 1eae83baaa
commit de7e99b6ae
2 changed files with 121 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

85
templates/admin/request.html
View file

@ -137,6 +137,72 @@
}
.cover-col{flex-shrink:0;}
.status-col{flex:1;min-width:200px;}
.steps{
display:flex;
list-style:none;
margin:0;
padding:0;
gap:.25rem;
align-items:flex-start;
}
.step-item{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
flex:1;
min-width:80px;
position:relative;
}
.step-item:not(:last-child)::after{
content:"";
position:absolute;
top:1rem;
left:50%;
width:100%;
height:2px;
background:#4b5563;
z-index:0;
}
.step-item.completed:not(:last-child)::after{
background:#10b981;
}
.step-indicator{
width:2rem;
height:2rem;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:.9rem;
font-weight:700;
background:#374151;
color:#f3f4f6;
position:relative;
z-index:1;
border:2px solid transparent;
}
.step-item.completed .step-indicator{
background:#10b981;
color:#000;
}
.step-item.current .step-indicator{
background:#3b82f6;
color:#fff;
border-color:#93c5fd;
}
.step-item.upcoming .step-indicator{
background:#374151;
color:#9ca3af;
}
.step-label{
font-size:.75rem;
margin-top:.35rem;
color:#f3f4f6;
}
.step-item.upcoming .step-label{
color:#9ca3af;
}
.history-list{
margin:0;
padding:0;
@ -183,7 +249,24 @@
</div>
{% endif %}
<div class="status-col">
<p style="margin:0"><strong>Status:</strong> <span class="status-badge">{{ statuses[req.status] }}</span></p>
{% if current_step == -1 %}
<p style="margin:0"><span class="status-badge missing">Cancelled</span></p>
{% else %}
<ol class="steps" aria-label="Request progress">
{% for i in range(steps|length) %}
{% set key, label = steps[i] %}
{% set is_completed = i < current_step %}
{% set is_current = i == current_step %}
<li class="step-item {% if is_completed %}completed{% elif is_current %}current{% else %}upcoming{% endif %}" {% if is_current %}aria-current="step"{% endif %}>
<div class="step-indicator">
{% if is_completed %}✓{% else %}{{ i + 1 }}{% endif %}
</div>
<div class="step-label">{{ label }}</div>
</li>
{% endfor %}
</ol>
{% endif %}
{% if req.musicgpt_status %}
<p style="margin:.5rem 0 0 0"><strong>MusicGPT:</strong> <span class="status-badge {% if req.musicgpt_status == 'COMPLETED' %}ok{% elif req.musicgpt_status in ('FAILED','ERROR','CANCELLED') %}missing{% endif %}">{{ req.musicgpt_status }}</span>
{% if req.musicgpt_cost is not none %}({{ format_musicgpt_cost(req.musicgpt_cost) }}){% endif %}