3302f83cff
- html/template sistem: layout, dashboard, column, task-card, task-detail - Dark tema CSS, responsive grid (5→3→2→1 kolona) - HTMX: klik→detalj panel, move dugmad, auto-refresh active kolone - /report/:id za prikaz izveštaja - Slide-in animacija za detalj panel - 16 server testova, 83 ukupno — svi prolaze - T08 premešten u done/ Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
107 lines
3.8 KiB
Markdown
107 lines
3.8 KiB
Markdown
# 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:
|
|
```html
|
|
<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
|