126 lines
3.9 KiB
JavaScript
126 lines
3.9 KiB
JavaScript
/**
|
|
* Session Panel — 세션 목록 UI 관리
|
|
*/
|
|
|
|
class SessionPanel {
|
|
constructor() {
|
|
this.sessions = [];
|
|
this.activeSessionId = null;
|
|
this.onSessionSelect = null; // callback(sessionId)
|
|
this.onSessionRemove = null; // callback(sessionId)
|
|
|
|
this.listEl = document.getElementById('sessionList');
|
|
}
|
|
|
|
/**
|
|
* 세션 목록 업데이트
|
|
*/
|
|
update(sessions) {
|
|
this.sessions = sessions;
|
|
this.render();
|
|
}
|
|
|
|
/**
|
|
* 활성 세션 설정
|
|
*/
|
|
setActive(sessionId) {
|
|
this.activeSessionId = sessionId;
|
|
this.render();
|
|
}
|
|
|
|
/**
|
|
* 세션 목록 렌더링
|
|
*/
|
|
render() {
|
|
if (!this.listEl) return;
|
|
|
|
if (this.sessions.length === 0) {
|
|
this.listEl.innerHTML = `
|
|
<div style="padding: 20px; text-align: center; color: var(--text-muted); font-size: 12px;">
|
|
세션이 없습니다<br>+ 버튼으로 추가하세요
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
this.listEl.innerHTML = this.sessions.map(s => {
|
|
const timeStr = s.lastModified ? this._relativeTime(s.lastModified) : '';
|
|
const projectBadge = s.project
|
|
? `<span class="session-project" style="background:${this._projectColor(s.project)}">${this._escapeHtml(s.project)}</span>`
|
|
: '';
|
|
const runningDot = s.isRunning ? '<span class="running-dot">●</span>' : '';
|
|
const detail = s.isBridge
|
|
? `${s.stepCount || 0} steps${timeStr ? ' · ' + timeStr : ''}`
|
|
: `${s.host}:${s.cdpPort} · ${this._statusText(s.status)}`;
|
|
|
|
return `
|
|
<div class="session-card ${s.id === this.activeSessionId ? 'active' : ''} ${s.isRunning ? 'is-running' : ''}"
|
|
data-session-id="${s.id}">
|
|
<div class="session-indicator ${s.status}"></div>
|
|
<div class="session-info">
|
|
<div class="session-name">${runningDot}${this._escapeHtml(s.name)}</div>
|
|
<div class="session-detail">${projectBadge}${detail}</div>
|
|
</div>
|
|
<button class="session-remove" data-remove-id="${s.id}" title="세션 제거">✕</button>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
// 이벤트 바인딩
|
|
this.listEl.querySelectorAll('.session-card').forEach(card => {
|
|
card.addEventListener('click', (e) => {
|
|
if (e.target.closest('.session-remove')) return;
|
|
const id = card.dataset.sessionId;
|
|
if (this.onSessionSelect) this.onSessionSelect(id);
|
|
});
|
|
});
|
|
|
|
this.listEl.querySelectorAll('.session-remove').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
const id = btn.dataset.removeId;
|
|
if (this.onSessionRemove) this.onSessionRemove(id);
|
|
});
|
|
});
|
|
}
|
|
|
|
_statusText(status) {
|
|
const map = {
|
|
connected: '연결됨',
|
|
connecting: '연결 중...',
|
|
disconnected: '연결 끊김',
|
|
running: '실행 중',
|
|
error: '오류',
|
|
};
|
|
return map[status] || status;
|
|
}
|
|
|
|
_relativeTime(iso) {
|
|
const diff = Date.now() - new Date(iso).getTime();
|
|
const mins = Math.floor(diff / 60000);
|
|
if (mins < 1) return '방금';
|
|
if (mins < 60) return `${mins}분 전`;
|
|
const hrs = Math.floor(mins / 60);
|
|
if (hrs < 24) return `${hrs}시간 전`;
|
|
const days = Math.floor(hrs / 24);
|
|
return `${days}일 전`;
|
|
}
|
|
|
|
_projectColor(name) {
|
|
const colors = {
|
|
'gravity_web': '#6366f1',
|
|
'Deriva': '#f59e0b',
|
|
'MMF': '#10b981',
|
|
'test1': '#8b5cf6',
|
|
'test2': '#ec4899',
|
|
};
|
|
return colors[name] || '#64748b';
|
|
}
|
|
|
|
_escapeHtml(str) {
|
|
const div = document.createElement('div');
|
|
div.textContent = str;
|
|
return div.innerHTML;
|
|
}
|
|
}
|