/* global React, Icon, Button, Badge, ProgressBar, DATA */ // ============================================================ // Télécommande (composant clé) + journal + Mes tâches // ============================================================ function Remote({ act, busyBtn, dead, actions, fps, setFps, compact, device }) { const { useState } = React; useLang(); const [text, setText] = useState(""); const send = () => { if (!text.trim()) return; act("Saisie texte", "kb", text); setText(""); }; return (
{dead && (
{React.createElement(Icon.lock, { size: 16 })} Contrôles indisponibles — device {dead ? "verrouillé / hors-ligne" : ""}.
)} {/* qualité du flux — FPS */} {/* D-pad / swipe */} {compact ? ( /* compact (split) : croix centrée + scroll en dessous, sans la colonne d'aide */
) : (
{/* croix */}
← → ↑ ↓
swipe directionnel.
centre = refresh.
)} {/* saisie texte — au-dessus de Système */}
setText(e.target.value)} onKeyDown={e => e.key === "Enter" && send()} disabled={dead} placeholder={t("text_placeholder")} style={{ flex: 1, padding: "11px 13px", background: "var(--bg-2)", border: "1px solid var(--border-2)", borderRadius: 9, color: "var(--text)", fontSize: 13, outline: "none", opacity: dead ? .45 : 1 }} />
saisit dans le champ actuellement focus · clavier AZERTY virtuel optionnel
 {/* médias : envoyer photo/vidéo préparée au téléphone */} {device && } {/* navigation système */}
{/* apps */} {React.createElement(Icon.plus, { size: 13 })} {t("add")}}>
{DATA.APPS.map(a => ( ))}
); } function RemoteCard({ title, icon, right, children, collapsible, startOpen = true }) { const [open, setOpen] = React.useState(startOpen); return (
setOpen(o => !o) : undefined} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: open ? 13 : 0, cursor: collapsible ? "pointer" : "default", userSelect: "none" }}>
{collapsible && {React.createElement(Icon.chevDown, { size: 15 })}} {Icon[icon] ? React.createElement(Icon[icon], { size: 15 }) : null} {title}
{right}
{(!collapsible || open) && children}
); } function Pad({ id, icon, label, act, busyBtn, dead, cross, center, wide }) { const on = busyBtn === id; const disabled = dead && id !== "refresh"; return ( ); } function BigBtn({ id, icon, label, act, busyBtn, dead }) { const on = busyBtn === id; return ( ); } function cap(s) { return s.charAt(0).toUpperCase() + s.slice(1); } // ---- Contrôle FPS (taux de rafraîchissement du flux) ---- const MAX_FPS = 30; function fpsQuality(fps) { if (fps <= 5) return { label: "Éco · net · bande passante mini", tone: "var(--accent-2)" }; if (fps <= 12) return { label: "Fluide", tone: "var(--accent)" }; if (fps <= 20) return { label: "Recommandé · pilotage fluide", tone: "var(--accent)" }; return { label: "Max · 30 fps · pilotage temps réel", tone: "var(--busy)" }; } function FpsControl({ fps, setFps, dead }) { const q = fpsQuality(fps); const pct = ((fps - 1) / (MAX_FPS - 1)) * 100; const recPct = ((20 - 1) / (MAX_FPS - 1)) * 100; return ( {dead ? "0" : fps} FPS}>
{/* repère recommandé */} 20 setFps(+e.target.value)} style={{ width: "100%", accentColor: q.tone, background: "transparent", cursor: "pointer", margin: 0 }} />
{q.label}
{[5, 15, 20, 30].map(p => ( ))}
FPS bas = plus net · FPS haut = plus fluide (image un peu réduite). Jusqu'à 30 fps pour un pilotage temps réel.
 ); } // ---- Mes tâches (côté opérateur) ---- function MyTasks({ device, user, compact }) { const { useState, useEffect } = React; const store = (window.useTasks ? useTasks() : { list: () => [] }); const all = store.list ? store.list() : []; // tâches RÉELLES pour ce device OU assignées à cet opérateur const uid = user && user.id; const mine = all.filter(t => (device && t.device_udid === device.udid) || (uid && t.assignee === uid)); const active = mine[0] || null; // étapes : depuis la SOP liée si dispo, sinon le titre seul const sopList = (window.SopStore ? SopStore.list() : []); useEffect(() => { if (window.SopStore) SopStore.reload(); }, []); const sop = active && active.sop_id ? sopList.find(s => s.id === active.sop_id) : null; const steps = sop && sop.steps && sop.steps.length ? sop.steps : (active ? [active.title] : []); const [checked, setChecked] = useState([]); useEffect(() => { setChecked(steps.map((_, i) => i < (active ? (active.progress || 0) : 0))); /* eslint-disable-next-line */ }, [active && active.id, steps.length]); if (!active) return (
{React.createElement(Icon.clipboard, { size: 26 })}
{t("no_task_device")}
); const doneCount = checked.filter(Boolean).length; const toggle = (i) => setChecked(c => { const nc = c.map((v, j) => j === i ? !v : v); const done = nc.filter(Boolean).length; // on enregistre l'avancement réel sur la tâche (visible côté admin) if (window.Backend) window.Backend.patchTask(active.id, { progress: done, total: steps.length, status: done >= steps.length ? "done" : "todo" }); return nc; }); return (
{active.title}
{doneCount}/{steps.length}
sur {device.tag}{active.due ? " · " + active.due : ""}
{steps.map((s, i) => ( ))}
{!compact && mine.length > 1 &&
{t("other_tasks")}
{mine.slice(1).map(t => (
{t.title} {t.progress}/{t.total}
))}
}
); } // ---- Journal d'actions (affiché à gauche du téléphone) ---- function ActionLog({ actions }) { return ( ● live}>
{actions.map((a, i) => (
{a.at} {a.label} {a.meta && {a.meta}}
))}
); } Object.assign(window, { Remote, RemoteCard, Pad, BigBtn, MyTasks, ActionLog, FpsControl });