// app/phase.jsx — euneo-style program overview + reminders/days setup // Exports to window: PhaseIntro function Chip({ children }) { return ( {children} ); } function Divider() { return
; } function PhaseRow({ name, dur }) { return (
{name} {dur}
); } function PhaseSwitch({ on, onToggle }) { return ( ); } // ── Scroll-wheel time picker (hh : mm) ─────────────────────── const ITEM_H = 44; function Wheel({ values, value, onChange, pad2 }) { const ref = React.useRef(null); const tmr = React.useRef(null); React.useLayoutEffect(() => { if (ref.current) ref.current.scrollTop = Math.max(0, values.indexOf(value)) * ITEM_H; }, []); const onScroll = () => { clearTimeout(tmr.current); tmr.current = setTimeout(() => { const idx = Math.round(ref.current.scrollTop / ITEM_H); const v = values[Math.max(0, Math.min(values.length - 1, idx))]; if (v !== value) onChange(v); }, 80); }; return (
{values.map((v) => { const sel = v === value; return (
{pad2 ? String(v).padStart(2, "0") : v}
); })}
); } function TimeWheelSheet({ open, value, onClose, onConfirm }) { const [h, setH] = React.useState(parseInt((value || "18:00").split(":")[0], 10)); const [m, setM] = React.useState(parseInt((value || "18:00").split(":")[1], 10)); React.useEffect(() => { if (open) { const [hh, mm] = (value || "18:00").split(":"); setH(parseInt(hh, 10)); setM(parseInt(mm, 10)); } }, [open]); const hours = React.useMemo(() => Array.from({ length: 24 }, (_, i) => i), []); const mins = React.useMemo(() => Array.from({ length: 60 }, (_, i) => i), []); return (
Vyberte čas pripomienky
{/* center highlight band */}
:
onConfirm(`${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`)}>Potvrdiť
); } // ── Step 2: reminders + training days ──────────────────────── function SetupStep({ program, onStart, onBack }) { const p = program; const order = ["Po", "Ut", "St", "Št", "Pi", "So", "Ne"]; const [days, setDays] = React.useState({ ...FYZIO.activeDays }); const [notif, setNotif] = React.useState(true); const [time, setTime] = React.useState(FYZIO.reminderTime); const [pickTime, setPickTime] = React.useState(false); const maxDays = p.minDays || 0; // therapist-prescribed number of training days const count = order.filter((d) => days[d]).length; const meets = count === maxDays; // must pick exactly the prescribed number const atCap = count >= maxDays; const toggleDay = (d) => setDays((s) => { if (!s[d] && atCap) return s; // can't select more than prescribed return { ...s, [d]: !s[d] }; }); const start = () => { if (!meets) return; FYZIO.activeDays = { ...days }; FYZIO.reminderTime = time; onStart && onStart(); }; const card = { background: "#fff", borderRadius: 22, padding: 18, border: "1px solid var(--line)", boxShadow: "0 2px 10px rgba(30,40,70,0.04)" }; return (
Nastavte si režim
Vyberte dni, kedy budete cvičiť, a čas pripomienky.
Dni cvičenia {count} / {maxDays}
{order.map((d) => { const on = days[d]; const locked = !on && atCap; return ( ); })}
{meets ? "Vybrali ste všetky dni, ktoré vám určil fyzioterapeut." : `Váš fyzioterapeut určil ${maxDays} dni v týždni — viac vybrať nemôžete.`}
{/* reminder: time on the left, on/off toggle on the right */}
setNotif((v) => !v)} />
Začať cvičiť
setPickTime(false)} onConfirm={(v) => { setTime(v); setPickTime(false); }} />
); } // ── Step 1: program overview (euneo style) ─────────────────── function PhaseIntro({ program, onStart, onBack }) { const p = program || FYZIO.programs[0]; const [step, setStep] = React.useState("overview"); const tyzdne = (n) => (n === 1 ? "týždeň" : n >= 2 && n <= 4 ? "týždne" : "týždňov"); const fazy = (n) => (n === 1 ? "fáza" : n >= 2 && n <= 4 ? "fázy" : "fáz"); if (step === "setup") { return setStep("overview")} />; } return (
{/* hero image */}
{/* floating controls */} {/* sheet overlapping the hero */}
{p.name}
{/* meta chips */}
{p.weeksTotal} {tyzdne(p.weeksTotal)} {p.phaseTotal} {fazy(p.phaseTotal)}
{/* equipment */}
Vybavenie
{(p.equipment && p.equipment.length ? p.equipment : ["Žiadne"]).map((e) => {e})}
{/* phases */}
Fázy
{p.phases.map((ph, i) => )}
{/* CTA */}
setStep("setup")}>Začať program
); } Object.assign(window, { PhaseIntro, PhaseSwitch, TimeWheelSheet });