Add dashboard tabs for sorting tasks by status

This commit is contained in:
Dmitry Belan
2026-09-28 22:40:18 +03:00
parent 96d4ed2425
commit c7d443e2ee
2 changed files with 53 additions and 6 deletions
+41 -1
View File
@@ -10,10 +10,26 @@
</div>
{% if assignments %}
<!-- Tabs -->
<div class="flex items-center gap-6 border-b border-obsidian-borderLight mb-6 overflow-x-auto no-scrollbar">
<button onclick="filterTasks('all')" id="tab-all" class="text-sm font-medium pb-3 border-b-2 transition-colors border-accent-blue text-white whitespace-nowrap">
Все задания <span class="ml-1 px-1.5 py-0.5 rounded bg-obsidian-base border border-obsidian-border text-xs text-txt-secondary">{{ total_count }}</span>
</button>
<button onclick="filterTasks('waiting')" id="tab-waiting" class="text-sm font-medium pb-3 border-b-2 border-transparent text-txt-muted hover:text-white transition-colors whitespace-nowrap">
Ожидают решения <span class="ml-1 px-1.5 py-0.5 rounded bg-obsidian-base border border-obsidian-border text-xs text-txt-secondary">{{ waiting_solution_count }}</span>
</button>
<button onclick="filterTasks('pending')" id="tab-pending" class="text-sm font-medium pb-3 border-b-2 border-transparent text-txt-muted hover:text-white transition-colors whitespace-nowrap">
Ожидает проверки <span class="ml-1 px-1.5 py-0.5 rounded bg-obsidian-base border border-amber-900/50 text-xs text-amber-500/80">{{ pending_count }}</span>
</button>
<button onclick="filterTasks('graded')" id="tab-graded" class="text-sm font-medium pb-3 border-b-2 border-transparent text-txt-muted hover:text-white transition-colors whitespace-nowrap">
Проверено <span class="ml-1 px-1.5 py-0.5 rounded bg-obsidian-base border border-emerald-900/50 text-xs text-emerald-500/80">{{ graded_count }}</span>
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5" data-purpose="task-cards-grid">
{% for assignment in assignments %}
{% get_submission submissions assignment.id as sub %}
<article class="bg-obsidian-card rounded border border-obsidian-border hover:border-obsidian-borderLight p-6 flex flex-col justify-between transition-colors duration-150 relative" data-purpose="task-card">
<article class="task-card bg-obsidian-card rounded border border-obsidian-border hover:border-obsidian-borderLight p-6 flex flex-col justify-between transition-colors duration-150 relative" data-status="{% if not sub or sub.status == 'IN_PROGRESS' %}waiting{% elif sub.status == 'PENDING' %}pending{% elif sub.status == 'GRADED' %}graded{% endif %}">
<div>
<!-- Header Badges -->
<div class="flex items-center justify-between gap-2 mb-4">
@@ -146,4 +162,28 @@
</div>
{% endif %}
<script>
function filterTasks(status) {
const cards = document.querySelectorAll('.task-card');
cards.forEach(card => {
if (status === 'all' || card.dataset.status === status) {
card.style.display = 'flex';
} else {
card.style.display = 'none';
}
});
const tabs = ['all', 'waiting', 'pending', 'graded'];
tabs.forEach(t => {
const btn = document.getElementById('tab-' + t);
if (t === status) {
btn.classList.add('border-accent-blue', 'text-white');
btn.classList.remove('border-transparent', 'text-txt-muted');
} else {
btn.classList.remove('border-accent-blue', 'text-white');
btn.classList.add('border-transparent', 'text-txt-muted');
}
});
}
</script>
{% endblock %}