/* gantt.jsx — "Plán úloh": interaktívny Gantt čiastkových úloh tiketu (úrovne 1–3). 1) Plánovateľné okno úlohy — ťahanie celého pruhu = presun, ťahanie okrajov = zmena začiatku/termínu. Bez plánu ostáva auto-odvodený (skutočný) pruh ako doteraz. + "Plán vs skutočnosť": plánovaný pruh navrchu, tenký skutočný pruh pod ním. 2) Čiara Dnes + čiara SLA termínu, víkendové tieňovanie (konzistentné s pauzou SLA), farba pruhu podľa technika, pridanie/úprava úlohy priamo v pláne. 3) Zoom (priblíženie/oddialenie/prispôsobiť), preusporiadanie riadkov ťahaním, odhad trvania pri vytváraní úlohy. Dáta = len ďalšie JSON polia v stĺpci Ulohy (planZaciatok/planKoniec) — bez zmeny SP. */ const G_HOUR = 3600000, G_DEN = 86400000; const G_LEFT_W = 210, G_HEADER_H = 34, G_ROW_H = 54, G_ADD_H = 74; const G_SNAP = G_HOUR; // ťahanie prichytáva na celé hodiny const G_MINDUR = 2 * G_HOUR; // najkratší plán const G_MINZ = 12, G_MAXZ = 600; // px na deň (zoom) const gClamp = (v, a, b) => Math.max(a, Math.min(b, v)); const gSnap = (t) => Math.round(t / G_SNAP) * G_SNAP; const gDen0 = (t) => { const d = new Date(t); d.setHours(0, 0, 0, 0); return d.getTime(); }; const gFmtD = (t) => new Date(t).toLocaleDateString("sk-SK", { day: "2-digit", month: "2-digit" }); const gFmtDT = (t) => new Date(t).toLocaleString("sk-SK", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" }); /* ---------- jeden ťahateľný pruh (plán + skutočnosť) ---------- */ function GanttBar({ u, actual, plan, hasPlan, farba, now, msPerPx, xOf, top, onCommit }) { const [prev, setPrev] = useState(null); // náhľad počas ťahania (nekomituje, kým nepustíš) const dragRef = useRef(null); const start = prev ? prev.s : plan.s; const koniec = prev ? prev.e : plan.e; const poTermine = !u.hotovo && koniec < now; const barFarba = u.hotovo ? "var(--green)" : (poTermine ? "var(--red)" : farba); const onDown = (e) => { e.preventDefault(); const rect = e.currentTarget.getBoundingClientRect(); const off = e.clientX - rect.left; // Úzky pruh (kratší než ~30px) nemá miesto na okrajové zóny — vždy sa presúva celý. // Širší pruh: krajných 10px = zmena začiatku/termínu, stred = presun. const mode = rect.width < 30 ? "move" : (off < 10 ? "l" : off > rect.width - 10 ? "r" : "move"); dragRef.current = { mode, startX: e.clientX, s0: start, e0: koniec }; try { e.currentTarget.setPointerCapture(e.pointerId); } catch (_) {} setPrev({ s: start, e: koniec }); }; const onMove = (e) => { const d = dragRef.current; if (!d) return; const delta = (e.clientX - d.startX) * msPerPx; let s = d.s0, en = d.e0; if (d.mode === "move") { s = gSnap(d.s0 + delta); en = gSnap(d.e0 + delta); } else if (d.mode === "l") { s = Math.min(gSnap(d.s0 + delta), d.e0 - G_MINDUR); en = d.e0; } else { en = Math.max(gSnap(d.e0 + delta), d.s0 + G_MINDUR); s = d.s0; } setPrev({ s, e: en }); }; const onUp = (e) => { const d = dragRef.current; dragRef.current = null; try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (_) {} if (d && prev) onCommit(prev.s, prev.e); setPrev(null); }; const barTop = top + (hasPlan ? 6 : 15); return ( <> {/* plánovaný / hlavný pruh (ťahateľný) */}
{/* skutočný pruh (len ak existuje plán — na porovnanie plán vs realita) */} {hasPlan && (
)} {/* dátumový štítok za pruhom */}
{gFmtD(start)} – {u.hotovo && !prev ? gFmtD(actual.e) : gFmtD(koniec)}
); } /* ---------- ľavý stĺpec: riadok úlohy (checkbox, názov, s kým, grip) ---------- */ function GanttRow({ u, i, leftW, technici, actions, dragging, isOver, onGripDown, onGripMove, onGripUp }) { const [edit, setEdit] = useState(false); const [val, setVal] = useState(u.text); const [kym, setKym] = useState(false); useEffect(() => { setVal(u.text); }, [u.text]); const ulozit = () => { setEdit(false); const v = val.trim(); if (v && v !== u.text) actions.upravitTextUlohy(u.id, v); else setVal(u.text); }; const farbaTechnika = (m) => { const t = technici.find((x) => x.meno === m); return t ? t.farba : "#69797e"; }; return (
{edit ? ( setVal(e.target.value)} onBlur={ulozit} onKeyDown={(e) => { if (e.key === "Enter") ulozit(); if (e.key === "Escape") { setVal(u.text); setEdit(false); } }} style={{ flex: 1, minWidth: 0, fontSize: 12.5, fontFamily: "inherit", border: "1px solid var(--accent)", borderRadius: 4, padding: "1px 5px", background: "var(--surface-2)", color: "var(--text)" }} /> ) : ( setEdit(true)} title={u.text} style={{ flex: 1, minWidth: 0, fontSize: 12.5, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", cursor: "text", color: u.hotovo ? "var(--text-3)" : "var(--text)", textDecoration: u.hotovo ? "line-through" : "none", }}>{u.text} )}
{(u.sKym || []).map((m) => )}
{kym && (
actions.zmenaKymUlohy(u.id, arr)} placeholder="Pridať kolegu…" m365 />
)}
); } /* ---------- pridanie úlohy priamo v pláne (s voliteľným odhadom trvania) ---------- */ function GanttAdd({ actions, leftW }) { const [text, setText] = useState(""); const [dur, setDur] = useState(""); const opts = [ { l: "bez odhadu", ms: "" }, { l: "1 h", ms: G_HOUR }, { l: "2 h", ms: 2 * G_HOUR }, { l: "4 h", ms: 4 * G_HOUR }, { l: "1 deň", ms: G_DEN }, { l: "3 dni", ms: 3 * G_DEN }, ]; const pridat = () => { const v = text.trim(); if (!v) return; if (dur !== "") actions.pridatUlohu(v, { planZaciatok: Date.now(), planKoniec: Date.now() + Number(dur) }); else actions.pridatUlohu(v); setText(""); }; return (
setText(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") pridat(); }} placeholder="Pridať úlohu…" style={{ flex: 1, minWidth: 0, fontSize: 12.5, fontFamily: "inherit", border: "1px solid var(--stroke-strong)", borderRadius: "var(--radius-sm)", padding: "5px 8px", background: "var(--surface)", color: "var(--text)" }} />
); } function GBtn({ icon, title, onClick, active }) { return ( ); } function GLegend({ label, typ }) { let mark; if (typ === "plan") mark = ; else if (typ === "real") mark = ; else if (typ === "today") mark = ; else mark = ; return {mark}{label}; } function GanttEmpty() { return (
Zatiaľ žiadne úlohy
Pridaj čiastkovú úlohu nižšie (alebo v detaile tiketu). Pruh potom vieš ťahať myšou — presunúť ho v čase, alebo za okraje zmeniť začiatok a termín.
); } /* ====================== HLAVNÝ GANTT ====================== */ function GanttPlan({ tiket, technici, actions, now }) { const ulohy = tiket.ulohy || []; const paneRef = useRef(null); const [availW, setAvailW] = useState(0); const [pxRaw, setPxRaw] = useState(null); // null = auto-prispôsobiť const [reorder, setReorder] = useState(null); // { id, i, over } const reRef = useRef(null); // šírka ľavého stĺpca — ťahateľná a zapamätaná (naprieč tiketmi) const [leftW, setLeftW] = useState(() => { const v = parseInt(localStorage.getItem("hd_gantt_leftw"), 10); return v >= 120 && v <= 640 ? v : G_LEFT_W; }); const szRef = useRef(null); useEffect(() => { const el = paneRef.current; if (!el) return; const mer = () => setAvailW(el.clientWidth); mer(); window.addEventListener("resize", mer); return () => window.removeEventListener("resize", mer); }, []); if (!ulohy.length) return ; // ---- časová mierka ---- const casy = [now]; if (tiket.termin) casy.push(tiket.termin); ulohy.forEach((u) => { casy.push(u.vytvorene || now, u.hotoveKedy || now); if (u.planZaciatok != null) casy.push(u.planZaciatok); if (u.planKoniec != null) casy.push(u.planKoniec); }); let tMin = gDen0(Math.min.apply(null, casy)); let tMax = gDen0(Math.max.apply(null, casy)) + G_DEN; if (tMax - tMin < 3 * G_DEN) tMax = tMin + 3 * G_DEN; const days = (tMax - tMin) / G_DEN; const fitVal = gClamp(Math.max(280, (availW || 640) - leftW - 6) / days, G_MINZ, G_MAXZ); const pxPerDay = pxRaw == null ? fitVal : gClamp(pxRaw, G_MINZ, G_MAXZ); const msPerPx = G_DEN / pxPerDay; const timelineW = days * pxPerDay; const xOf = (t) => (t - tMin) / msPerPx; // 0-based v rámci časovej osi // ---- delenie osi ---- const cand = [G_HOUR, 3 * G_HOUR, 6 * G_HOUR, 12 * G_HOUR, G_DEN, 2 * G_DEN, 7 * G_DEN, 14 * G_DEN, 30 * G_DEN]; const step = cand.find((c) => (c / G_DEN) * pxPerDay >= 74) || cand[cand.length - 1]; const ticks = []; for (let t = tMin; t <= tMax; t += step) ticks.push(t); const tickLbl = (t) => { const d = new Date(t); if (step >= G_DEN) return gFmtD(t); return (d.getHours() === 0 && d.getMinutes() === 0) ? gFmtD(t) : d.toLocaleTimeString("sk-SK", { hour: "2-digit", minute: "2-digit" }); }; // ---- víkendové pásy ---- const bands = []; for (let d = tMin, k = 0; d < tMax && k < 400; d += G_DEN, k++) { const wd = new Date(d).getDay(); if (wd === 0 || wd === 6) bands.push(d); } const farbaTechnika = (m) => { const t = technici.find((x) => x.meno === m); return t ? t.farba : null; }; const barFarba = (u) => (u.sKym && u.sKym.length && farbaTechnika(u.sKym[0])) || "var(--accent)"; const chartH = ulohy.length * G_ROW_H; const innerW = leftW + timelineW; const innerH = G_HEADER_H + chartH + G_ADD_H; // ---- ťahanie oddeľovača = zmena šírky ľavého stĺpca ---- const szMax = Math.max(160, (availW || 640) - 160); const onSzDown = (e) => { e.preventDefault(); szRef.current = { startX: e.clientX, w0: leftW }; try { e.currentTarget.setPointerCapture(e.pointerId); } catch (_) {} }; const onSzMove = (e) => { const s = szRef.current; if (!s) return; setLeftW(gClamp(s.w0 + (e.clientX - s.startX), 120, szMax)); }; const onSzUp = (e) => { if (!szRef.current) return; szRef.current = null; try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (_) {} try { localStorage.setItem("hd_gantt_leftw", String(leftW)); } catch (_) {} }; // ---- preusporiadanie ťahaním za grip ---- const onGripDown = (e, i, id) => { e.preventDefault(); reRef.current = { id, i, startY: e.clientY }; try { e.currentTarget.setPointerCapture(e.pointerId); } catch (_) {} setReorder({ id, i, over: i }); }; const onGripMove = (e) => { const r = reRef.current; if (!r) return; const dRows = Math.round((e.clientY - r.startY) / G_ROW_H); setReorder({ id: r.id, i: r.i, over: gClamp(r.i + dRows, 0, ulohy.length - 1) }); }; const onGripUp = (e) => { const r = reRef.current; reRef.current = null; try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (_) {} const over = reorder ? reorder.over : (r ? r.i : 0); setReorder(null); if (r && over !== r.i) actions.presunUlohu(r.id, over); }; return (
{/* panel nástrojov */}
setPxRaw(gClamp((pxRaw == null ? fitVal : pxRaw) / 1.6, G_MINZ, G_MAXZ))} /> setPxRaw(gClamp((pxRaw == null ? fitVal : pxRaw) * 1.6, G_MINZ, G_MAXZ))} /> setPxRaw(null)} active={pxRaw == null} />
{/* scroller — obidve osi; ľavý stĺpec sticky-left, hlavička sticky-top */}
{/* hlavička s dátumovou osou */}
Úloha {/* oddeľovač — potiahnutím meníš šírku stĺpca (zapamätá sa) */}
{ticks.map((t, i) => (
{tickLbl(t)}
))}
dnes
{tiket.termin && (
SLA
)}
{/* pozadie: víkendy, mriežka, riadky, dnes, SLA */}
{bands.map((d, i) => (
))} {ticks.map((t, i) => (
))} {ulohy.map((_, i) => (
))}
{tiket.termin && (
)}
{/* pruhy úloh */} {ulohy.map((u, i) => { const actual = { s: u.vytvorene || tMin, e: u.hotoveKedy || now }; const hasPlan = u.planZaciatok != null && u.planKoniec != null; const plan = hasPlan ? { s: u.planZaciatok, e: u.planKoniec } : { s: actual.s, e: Math.max(actual.e, actual.s + G_MINDUR) }; return ( leftW + xOf(t)} top={G_HEADER_H + i * G_ROW_H} onCommit={(s, e) => actions.upravitPlanUlohy(u.id, s, e)} /> ); })} {/* ľavý stĺpec — riadky úloh (sticky-left) */} {ulohy.map((u, i) => ( ))} {/* pridanie úlohy */}
); } window.GanttPlan = GanttPlan;