// ============================================================ // SAMPLE — Config view (single layout: params + rack visual + inspector) // ============================================================ const { useState: useStateSC, useEffect: useEffectSC, useRef: useRefSC } = React; function SampleConfigView({ cfg, setCfg, apiKey, setApiKey, syncStatus }) { const [selGroupId, setSelGroupId] = useStateSC(cfg.groups[0]?.id || null); const [selSlot, setSelSlot] = useStateSC(null); const [selRackIdx, setSelRackIdx] = useStateSC(0); const [leftW, setLeftW] = useStateSC(500); const [rightW, setRightW] = useStateSC(540); const [dragging, setDragging] = useStateSC(null); // 'left' | 'right' | null const stageRef = useRefSC(null); const stageWrapRef = useRefSC(null); const stFileRef = useRefSC(null); const dragRef = useRefSC(null); // { side, startX, startW } useEffectSC(() => attachMiddleMousePan(stageWrapRef.current), []); useEffectSC(() => { const onMove = (e) => { const d = dragRef.current; if (!d) return; const delta = e.clientX - d.startX; if (d.side === 'left') setLeftW(Math.max(160, Math.min(700, d.startW + delta))); if (d.side === 'right') setRightW(Math.max(200, Math.min(700, d.startW - delta))); }; const onUp = () => { dragRef.current = null; setDragging(null); }; window.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp); return () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); }; }, []); const startDrag = (side, e) => { e.preventDefault(); dragRef.current = { side, startX: e.clientX, startW: side === 'left' ? leftW : rightW }; setDragging(side); }; const activeGroup = cfg.groups.find(g => g.id === selGroupId) || cfg.groups[0]; const anyOnMap = {}; if (activeGroup) { activeGroup.racks.forEach(r => { anyOnMap[r.id] = r.slots.some(s => s.power === 'on'); }); } const toggleSlot = (slotId) => { if (!activeGroup) return; setCfg(c => ({ ...c, groups: c.groups.map(g => g.id !== activeGroup.id ? g : { ...g, racks: g.racks.map(r => ({ ...r, slots: r.slots.map(s => s.id === slotId ? { ...s, power: s.power === 'on' ? 'off' : 'on' } : s), })), }), })); }; const health = activeGroup ? groupHealth(activeGroup) : null; const healthCol = health ? (health.level === 'ok' ? 'var(--ok)' : health.level === 'warn' ? 'var(--warn)' : 'var(--bad)') : 'var(--fg-2)'; // ── Param helpers ────────────────────────────────────────── const setParams = (patch) => setCfg(c => ({ ...c, params: { ...c.params, ...patch } })); const regenFromParams = () => { const { N = 2, K, M } = cfg.params; setCfg(c => ({ ...c, groups: c.groups.map(g => { const existing = g.racks.filter(r => !r.absent); // Grow to N racks let racks = existing.slice(0, N); while (racks.length < N) { const idx = racks.length; racks.push({ id: sRid('sr'), label: `${g.tag}-${String.fromCharCode(65 + idx)}`, alias: '', media: [], slots: Array.from({ length: K }, () => ({ id: sRid('ss'), kind: 'empty', name: '', power: 'off', ports: [], media: [], })), }); } return { ...g, racks: racks.map(r => ({ ...r, slots: Array.from({ length: K }, (_, i) => { const prev = r.slots[i]; const kind = prev?.kind || 'empty'; const hasPorts = kind === 'switch'; return { id: prev?.id || sRid('ss'), kind, name: prev?.name || '', power: prev?.power || 'off', media: prev?.media || [], ports: hasPorts ? Array.from({ length: 2 * M }, (_, pi) => { const pp = prev?.ports?.[pi]; return pp ? normPort(pp) : { plug: 'empty', led: 'off' }; }) : [], }; }), })), }; }), })); }; const addGroup = () => { const id = sRid('sg'); const tag = `SG-${String(cfg.groups.length + 1).padStart(2, '0')}`; const { N = 2, K, M } = cfg.params; const racks = Array.from({ length: N }, (_, i) => ({ id: sRid('sr'), label: `${tag}-${String.fromCharCode(65 + i)}`, alias: '', media: [], slots: Array.from({ length: K }, () => ({ id: sRid('ss'), kind: 'empty', name: '', power: 'off', ports: [], media: [], })), })); setCfg(c => ({ ...c, groups: [...c.groups, { id, tag, alias: '', racks }] })); setSelGroupId(id); setSelRackIdx(0); }; const doExport = () => { const url = URL.createObjectURL(new Blob([JSON.stringify(cfg, null, 2)], { type: 'application/json' })); Object.assign(document.createElement('a'), { href: url, download: `sample-config-${Date.now()}.json` }).click(); URL.revokeObjectURL(url); }; const doImport = (e) => { const f = e.target.files?.[0]; if (!f) return; const rd = new FileReader(); rd.onload = () => { try { setCfg(JSON.parse(rd.result)); } catch { alert('Invalid JSON'); } }; rd.readAsText(f); }; const doReset = () => { if (!confirm('샘플 설정을 초기값으로 되돌릴까요?')) return; const def = defaultSampleConfig(); setCfg(def); setSelGroupId(def.groups[0]?.id || null); setSelRackIdx(0); setSelSlot(null); }; const { M, K, portIconSize = 22, portMode = 'plug_led', showPortNums = false } = cfg.params; return (
{/* Left: params + groups + health + file ops */}
startDrag('left', e)} /> {/* Center: rack stage using SampleRackColumnV2 */}
{activeGroup ? ( <> {activeGroup.racks.map(r => ( setSelSlot({ rackId, slotId })} selSlotId={selSlot && selSlot.rackId === r.id ? selSlot.slotId : null} /> ))} ) : (
좌측에서 그룹을 선택하세요.
)}
startDrag('right', e)} /> {/* Right: SlotInspector + RackEditor */}
); } Object.assign(window, { SampleConfigView });