Add dashboard tabs for sorting tasks by status
This commit is contained in:
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user