djuka/KAOS
1
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity
v0.3.6
KAOS/TASKS/ready/T09.md
djuka aabdfa9e50 T10: Drag & Drop — premesti task prevlačenjem 
- Sortable.js na Kanban board sa drag & drop
- Server-side validacija: allowedMoves mapa, isMoveAllowed()
- Zabranjeni potezi vraćaju 403 (ready→active, active→review)
- Toast notifikacije (zeleni uspeh, crveni greška)
- Ghost/chosen/drag CSS animacije
- Board auto-refresh posle svakog poteza
- 7 novih testova, 90 ukupno — svi prolaze
- T09 premešten u done/

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-20 12:18:50 +00:00

3.8 KiB
Raw Permalink Blame History

T09: Dashboard — Kanban board sa taskovima

Kreirao: planer Datum: 2026-02-20 Agent: coder Model: Sonnet Zavisi od: T08

Opis

HTML dashboard sa Kanban prikazom — kolone po stanju (backlog, ready, active, review, done). HTMX za interaktivnost.

Fajlovi za kreiranje

code/web/
├── templates/
│   ├── layout.html            ← osnovna struktura (head, body, footer)
│   ├── dashboard.html         ← kanban board
│   ├── partials/
│   │   ├── column.html        ← jedna kolona (HTMX fragment)
│   │   ├── task-card.html     ← kartica taska
│   │   └── task-detail.html   ← detalj taska (klik → prikaz sadržaja)
└── static/
    └── style.css              ← stilovi za dashboard

Izgled

┌─────────────────────────────────────────────────────────┐
│  🔧 KAOS Dashboard                          v0.1.7     │
├──────────┬──────────┬──────────┬──────────┬─────────────┤
│ BACKLOG  │  READY   │  ACTIVE  │  REVIEW  │    DONE     │
│    2     │    1     │    -     │    -     │      7      │
├──────────┼──────────┼──────────┼──────────┼─────────────┤
│┌────────┐│┌────────┐│          │          │┌───────────┐│
││ T08    │││ T10    ││          │          ││ T01 ✅    ││
││ Server │││ Drag   ││          │          ││ Go init   ││
││ Sonnet │││ & Drop ││          │          ││ v0.1.1    ││
│└────────┘│└────────┘│          │          │└───────────┘│
│┌────────┐│          │          │          │┌───────────┐│
││ T09    ││          │          │          ││ T02 ✅    ││
││ Dashb. ││          │          │          ││ Loader    ││
│└────────┘│          │          │          ││ v0.1.2    ││
│          │          │          │          │└───────────┘│
│          │          │          │          │ ...         │
└──────────┴──────────┴──────────┴──────────┴─────────────┘

Kartica taska

Prikazuje:

  • ID (T01, T02...)
  • Naslov
  • Agent + Model
  • Tag verzije (ako je done)
  • Zavisnosti

Klik na karticu → HTMX učita detalj:

<div class="task-card" hx-get="/task/T01" hx-target="#task-detail">

Task detalj panel

Desna strana ili modal — prikazuje ceo sadržaj task fajla:

  • Markdown renderovan kao HTML
  • Dugme za premestanje u sledeći folder
  • Link do izveštaja (ako postoji)

HTMX interakcije

  • Klik na task → hx-get="/task/{id}" → prikaz detalja
  • Dugme "Premesti" → hx-post="/task/{id}/move?to=ready" → ažurira kolonu
  • Auto-refresh → hx-trigger="every 5s" na active koloni

Pravila

  • Go html/template za renderovanje
  • Mobilno responsive
  • Poruke na srpskom
  • Nema JS osim htmx.min.js
  • CSS grid za kolone

Testovi

  • GET / → vraća HTML sa svim kolonama
  • Proveri da su taskovi u pravim kolonama
  • HTMX fragment: GET /task/T01 → vraća HTML fragment

Očekivani izlaz

Otvori http://localhost:8080 → vidi kanban board sa taskovima. Klikni na task → vidi detalj.

Pitanja

Odgovori