feat: KVM port management — configuration, switching, and navigation shell
Backend (crates/ericrfb-proxy): - Session cookie now persisted in AppState for device API calls - New kvm.rs with three REST endpoints: GET /api/kvm/ports — scrapes kvm.asp, returns port config as JSON PUT /api/kvm/ports — saves port names, hotkeys, visibility, count POST /api/kvm/switch — switches active KVM port via home2.asp - HTML scraping extracts form values from predictable firmware HTML Frontend (crates/ericrfb-frontend): - New shell.ts: sidebar navigation with page routing pattern (Console, Ports — extensible for Virtual Media, Users, etc.) - Console refactored into pages/console.ts with mount/unmount lifecycle - Port switcher dropdown in toolbar (fetches port list, switches on change) - WebSocket auto-reconnects after port switch - New pages/ports.ts: editable port configuration table - Port count, key pause duration, per-port name/hotkey/show-in-console - Save, reload, and per-port switch buttons - Active port highlighted - Dark theme sidebar with active state indicators Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,218 +0,0 @@
|
||||
import { codeToScancode } from './input'
|
||||
import {
|
||||
TAG_BLIT, TAG_RESIZE,
|
||||
makeKeyPress, makeKeyRelease, makePointer, makeCtrlAltDel,
|
||||
} from './protocol'
|
||||
import { showLogin } from './login'
|
||||
|
||||
export function startConsole(
|
||||
app: HTMLElement,
|
||||
appletId: string,
|
||||
port: number,
|
||||
boardName: string,
|
||||
) {
|
||||
app.innerHTML = `
|
||||
<div class="toolbar">
|
||||
<span>${boardName}</span>
|
||||
<button id="btn-cad">Ctrl+Alt+Del</button>
|
||||
<button id="btn-fs">Fullscreen</button>
|
||||
<button id="btn-disconnect">Disconnect</button>
|
||||
<span class="status" id="status">connecting...</span>
|
||||
</div>
|
||||
<div class="console-wrap">
|
||||
<canvas id="canvas" tabindex="0"></canvas>
|
||||
</div>
|
||||
`
|
||||
|
||||
const canvas = document.getElementById('canvas') as HTMLCanvasElement
|
||||
const ctx = canvas.getContext('2d')!
|
||||
const statusEl = document.getElementById('status')!
|
||||
|
||||
function setStatus(text: string, connected: boolean) {
|
||||
statusEl.textContent = text
|
||||
statusEl.classList.toggle('connected', connected)
|
||||
}
|
||||
|
||||
// WebSocket with reconnect
|
||||
let ws: WebSocket | null = null
|
||||
let reconnectTimer: number | undefined
|
||||
let reconnectDelay = 1000
|
||||
|
||||
function connect() {
|
||||
if (reconnectTimer) clearTimeout(reconnectTimer)
|
||||
setStatus('connecting...', false)
|
||||
|
||||
const wsProto = location.protocol === 'https:' ? 'wss:' : 'ws:'
|
||||
const wsUrl = `${wsProto}//${location.host}/api/ws?applet_id=${encodeURIComponent(appletId)}&port=${port}`
|
||||
ws = new WebSocket(wsUrl)
|
||||
ws.binaryType = 'arraybuffer'
|
||||
|
||||
ws.onopen = () => {
|
||||
setStatus('connected', true)
|
||||
reconnectDelay = 1000
|
||||
canvas.focus()
|
||||
}
|
||||
|
||||
ws.onclose = () => {
|
||||
setStatus(`disconnected — reconnecting in ${reconnectDelay / 1000}s...`, false)
|
||||
scheduleReconnect()
|
||||
}
|
||||
|
||||
ws.onerror = () => {
|
||||
setStatus('connection error', false)
|
||||
}
|
||||
|
||||
ws.onmessage = handleMessage
|
||||
}
|
||||
|
||||
function scheduleReconnect() {
|
||||
reconnectTimer = window.setTimeout(() => {
|
||||
// Re-login to get a fresh APPLET_ID, then reconnect
|
||||
relogin()
|
||||
}, reconnectDelay)
|
||||
reconnectDelay = Math.min(reconnectDelay * 2, 30000)
|
||||
}
|
||||
|
||||
async function relogin() {
|
||||
setStatus('re-authenticating...', false)
|
||||
try {
|
||||
const resp = await fetch('/api/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
username: sessionStorage.getItem('blekin_user') || 'administrator',
|
||||
password: sessionStorage.getItem('blekin_pass') || '',
|
||||
}),
|
||||
})
|
||||
if (!resp.ok) throw new Error('re-auth failed')
|
||||
const data = await resp.json()
|
||||
appletId = data.applet_id
|
||||
port = data.port
|
||||
connect()
|
||||
} catch {
|
||||
setStatus(`re-auth failed — retry in ${reconnectDelay / 1000}s...`, false)
|
||||
scheduleReconnect()
|
||||
}
|
||||
}
|
||||
|
||||
function handleMessage(ev: MessageEvent) {
|
||||
if (!(ev.data instanceof ArrayBuffer)) return
|
||||
const view = new DataView(ev.data)
|
||||
const tag = view.getUint8(0)
|
||||
|
||||
switch (tag) {
|
||||
case TAG_RESIZE: {
|
||||
const w = view.getUint16(1)
|
||||
const h = view.getUint16(3)
|
||||
canvas.width = w
|
||||
canvas.height = h
|
||||
break
|
||||
}
|
||||
case TAG_BLIT: {
|
||||
const x = view.getUint16(1)
|
||||
const y = view.getUint16(3)
|
||||
const w = view.getUint16(5)
|
||||
const h = view.getUint16(7)
|
||||
const rgba = new Uint8ClampedArray(ev.data, 9)
|
||||
const img = new ImageData(rgba, w, h)
|
||||
ctx.putImageData(img, x, y)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Keyboard input
|
||||
let buttonMask = 0
|
||||
|
||||
canvas.addEventListener('keydown', (e) => {
|
||||
e.preventDefault()
|
||||
const sc = codeToScancode(e.code)
|
||||
if (sc !== undefined && ws?.readyState === WebSocket.OPEN) {
|
||||
ws.send(makeKeyPress(sc))
|
||||
}
|
||||
})
|
||||
|
||||
canvas.addEventListener('keyup', (e) => {
|
||||
e.preventDefault()
|
||||
const sc = codeToScancode(e.code)
|
||||
if (sc !== undefined && ws?.readyState === WebSocket.OPEN) {
|
||||
ws.send(makeKeyRelease(sc))
|
||||
}
|
||||
})
|
||||
|
||||
// Mouse input
|
||||
function sendPointer(e: MouseEvent) {
|
||||
if (ws?.readyState !== WebSocket.OPEN) return
|
||||
const rect = canvas.getBoundingClientRect()
|
||||
const scaleX = canvas.width / rect.width
|
||||
const scaleY = canvas.height / rect.height
|
||||
const x = Math.round((e.clientX - rect.left) * scaleX)
|
||||
const y = Math.round((e.clientY - rect.top) * scaleY)
|
||||
ws.send(makePointer(
|
||||
Math.max(0, Math.min(x, canvas.width - 1)),
|
||||
Math.max(0, Math.min(y, canvas.height - 1)),
|
||||
buttonMask,
|
||||
))
|
||||
}
|
||||
|
||||
canvas.addEventListener('mousemove', sendPointer)
|
||||
|
||||
canvas.addEventListener('mousedown', (e) => {
|
||||
e.preventDefault()
|
||||
canvas.focus()
|
||||
if (e.button === 0) buttonMask |= 1
|
||||
else if (e.button === 1) buttonMask |= 2
|
||||
else if (e.button === 2) buttonMask |= 4
|
||||
sendPointer(e)
|
||||
})
|
||||
|
||||
canvas.addEventListener('mouseup', (e) => {
|
||||
e.preventDefault()
|
||||
if (e.button === 0) buttonMask &= ~1
|
||||
else if (e.button === 1) buttonMask &= ~2
|
||||
else if (e.button === 2) buttonMask &= ~4
|
||||
sendPointer(e)
|
||||
})
|
||||
|
||||
canvas.addEventListener('contextmenu', (e) => e.preventDefault())
|
||||
|
||||
canvas.addEventListener('wheel', (e) => {
|
||||
e.preventDefault()
|
||||
if (ws?.readyState !== WebSocket.OPEN) return
|
||||
const rect = canvas.getBoundingClientRect()
|
||||
const scaleX = canvas.width / rect.width
|
||||
const scaleY = canvas.height / rect.height
|
||||
const x = Math.round((e.clientX - rect.left) * scaleX)
|
||||
const y = Math.round((e.clientY - rect.top) * scaleY)
|
||||
const scrollMask = e.deltaY < 0 ? 8 : 16
|
||||
ws.send(makePointer(x, y, buttonMask | scrollMask))
|
||||
ws.send(makePointer(x, y, buttonMask))
|
||||
})
|
||||
|
||||
// Toolbar
|
||||
document.getElementById('btn-cad')!.addEventListener('click', () => {
|
||||
if (ws?.readyState === WebSocket.OPEN) {
|
||||
ws.send(makeCtrlAltDel())
|
||||
}
|
||||
canvas.focus()
|
||||
})
|
||||
|
||||
document.getElementById('btn-fs')!.addEventListener('click', () => {
|
||||
if (document.fullscreenElement) {
|
||||
document.exitFullscreen()
|
||||
} else {
|
||||
app.requestFullscreen()
|
||||
}
|
||||
canvas.focus()
|
||||
})
|
||||
|
||||
document.getElementById('btn-disconnect')!.addEventListener('click', () => {
|
||||
if (reconnectTimer) clearTimeout(reconnectTimer)
|
||||
ws?.close()
|
||||
ws = null
|
||||
showLogin(app)
|
||||
})
|
||||
|
||||
// Start connection
|
||||
connect()
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { startConsole } from './console'
|
||||
import { mountShell } from './shell'
|
||||
|
||||
interface LoginResponse {
|
||||
applet_id: string
|
||||
@@ -46,10 +46,13 @@ export function showLogin(app: HTMLElement) {
|
||||
}
|
||||
|
||||
const data: LoginResponse = await resp.json()
|
||||
// Store credentials for automatic reconnect
|
||||
sessionStorage.setItem('blekin_user', username)
|
||||
sessionStorage.setItem('blekin_pass', password)
|
||||
startConsole(app, data.applet_id, data.port, data.board_name)
|
||||
mountShell(app, {
|
||||
appletId: data.applet_id,
|
||||
port: data.port,
|
||||
boardName: data.board_name,
|
||||
})
|
||||
} catch (err) {
|
||||
errorDiv.textContent = (err as Error).message
|
||||
errorDiv.hidden = false
|
||||
|
||||
242
crates/ericrfb-frontend/src/pages/console.ts
Normal file
242
crates/ericrfb-frontend/src/pages/console.ts
Normal file
@@ -0,0 +1,242 @@
|
||||
import { codeToScancode } from '../input'
|
||||
import {
|
||||
TAG_BLIT, TAG_RESIZE,
|
||||
makeKeyPress, makeKeyRelease, makePointer, makeCtrlAltDel,
|
||||
} from '../protocol'
|
||||
import type { SessionInfo } from '../shell'
|
||||
|
||||
let ws: WebSocket | null = null
|
||||
let reconnectTimer: number | undefined
|
||||
let reconnectDelay = 1000
|
||||
let containerEl: HTMLElement | null = null
|
||||
let session: SessionInfo
|
||||
let buttonMask = 0
|
||||
|
||||
export function mountConsole(el: HTMLElement, s: SessionInfo) {
|
||||
containerEl = el
|
||||
session = s
|
||||
|
||||
el.innerHTML = `
|
||||
<div class="toolbar">
|
||||
<span>${s.boardName}</span>
|
||||
<select id="port-select" title="Switch KVM port"></select>
|
||||
<button id="btn-cad">Ctrl+Alt+Del</button>
|
||||
<button id="btn-fs">Fullscreen</button>
|
||||
<span class="status" id="status">connecting...</span>
|
||||
</div>
|
||||
<div class="console-wrap">
|
||||
<canvas id="canvas" tabindex="0"></canvas>
|
||||
</div>
|
||||
`
|
||||
|
||||
loadPortList()
|
||||
connect()
|
||||
wireInputHandlers()
|
||||
wireToolbar()
|
||||
}
|
||||
|
||||
export function unmountConsole() {
|
||||
if (reconnectTimer) clearTimeout(reconnectTimer)
|
||||
reconnectTimer = undefined
|
||||
ws?.close()
|
||||
ws = null
|
||||
buttonMask = 0
|
||||
if (containerEl) containerEl.innerHTML = ''
|
||||
containerEl = null
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// WebSocket
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function setStatus(text: string, connected: boolean) {
|
||||
const el = document.getElementById('status')
|
||||
if (el) {
|
||||
el.textContent = text
|
||||
el.classList.toggle('connected', connected)
|
||||
}
|
||||
}
|
||||
|
||||
function connect() {
|
||||
if (reconnectTimer) clearTimeout(reconnectTimer)
|
||||
setStatus('connecting...', false)
|
||||
|
||||
const wsProto = location.protocol === 'https:' ? 'wss:' : 'ws:'
|
||||
const wsUrl = `${wsProto}//${location.host}/api/ws?applet_id=${encodeURIComponent(session.appletId)}&port=${session.port}`
|
||||
ws = new WebSocket(wsUrl)
|
||||
ws.binaryType = 'arraybuffer'
|
||||
|
||||
ws.onopen = () => {
|
||||
setStatus('connected', true)
|
||||
reconnectDelay = 1000
|
||||
document.getElementById('canvas')?.focus()
|
||||
}
|
||||
|
||||
ws.onclose = () => {
|
||||
if (!containerEl) return // unmounted
|
||||
setStatus(`disconnected — reconnecting in ${reconnectDelay / 1000}s...`, false)
|
||||
scheduleReconnect()
|
||||
}
|
||||
|
||||
ws.onerror = () => setStatus('connection error', false)
|
||||
ws.onmessage = handleMessage
|
||||
}
|
||||
|
||||
function scheduleReconnect() {
|
||||
reconnectTimer = window.setTimeout(relogin, reconnectDelay)
|
||||
reconnectDelay = Math.min(reconnectDelay * 2, 30000)
|
||||
}
|
||||
|
||||
async function relogin() {
|
||||
if (!containerEl) return
|
||||
setStatus('re-authenticating...', false)
|
||||
try {
|
||||
const resp = await fetch('/api/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
username: sessionStorage.getItem('blekin_user') || 'administrator',
|
||||
password: sessionStorage.getItem('blekin_pass') || '',
|
||||
}),
|
||||
})
|
||||
if (!resp.ok) throw new Error('re-auth failed')
|
||||
const data = await resp.json()
|
||||
session = { ...session, appletId: data.applet_id, port: data.port }
|
||||
connect()
|
||||
} catch {
|
||||
setStatus(`re-auth failed — retry in ${reconnectDelay / 1000}s...`, false)
|
||||
scheduleReconnect()
|
||||
}
|
||||
}
|
||||
|
||||
function handleMessage(ev: MessageEvent) {
|
||||
if (!(ev.data instanceof ArrayBuffer)) return
|
||||
const view = new DataView(ev.data)
|
||||
const tag = view.getUint8(0)
|
||||
const canvas = document.getElementById('canvas') as HTMLCanvasElement | null
|
||||
if (!canvas) return
|
||||
const ctx = canvas.getContext('2d')!
|
||||
|
||||
switch (tag) {
|
||||
case TAG_RESIZE: {
|
||||
canvas.width = view.getUint16(1)
|
||||
canvas.height = view.getUint16(3)
|
||||
break
|
||||
}
|
||||
case TAG_BLIT: {
|
||||
const x = view.getUint16(1)
|
||||
const y = view.getUint16(3)
|
||||
const w = view.getUint16(5)
|
||||
const h = view.getUint16(7)
|
||||
const rgba = new Uint8ClampedArray(ev.data, 9)
|
||||
ctx.putImageData(new ImageData(rgba, w, h), x, y)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Port switcher
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
async function loadPortList() {
|
||||
try {
|
||||
const resp = await fetch('/api/kvm/ports')
|
||||
if (!resp.ok) return
|
||||
const data = await resp.json()
|
||||
const select = document.getElementById('port-select') as HTMLSelectElement
|
||||
if (!select) return
|
||||
select.innerHTML = ''
|
||||
for (const p of data.ports) {
|
||||
const opt = document.createElement('option')
|
||||
opt.value = String(p.index)
|
||||
opt.textContent = p.name || `Port ${p.index + 1}`
|
||||
opt.selected = p.index === data.active_port
|
||||
select.appendChild(opt)
|
||||
}
|
||||
select.addEventListener('change', async () => {
|
||||
const port = parseInt(select.value)
|
||||
await fetch('/api/kvm/switch', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ port }),
|
||||
})
|
||||
// Reconnect to pick up new video stream
|
||||
ws?.close()
|
||||
})
|
||||
} catch { /* port list optional */ }
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Input handlers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function wireInputHandlers() {
|
||||
const canvas = document.getElementById('canvas')! as HTMLCanvasElement
|
||||
|
||||
canvas.addEventListener('keydown', (e) => {
|
||||
e.preventDefault()
|
||||
const sc = codeToScancode(e.code)
|
||||
if (sc !== undefined && ws?.readyState === WebSocket.OPEN) ws.send(makeKeyPress(sc))
|
||||
})
|
||||
|
||||
canvas.addEventListener('keyup', (e) => {
|
||||
e.preventDefault()
|
||||
const sc = codeToScancode(e.code)
|
||||
if (sc !== undefined && ws?.readyState === WebSocket.OPEN) ws.send(makeKeyRelease(sc))
|
||||
})
|
||||
|
||||
function sendPointer(e: MouseEvent) {
|
||||
if (ws?.readyState !== WebSocket.OPEN) return
|
||||
const rect = canvas.getBoundingClientRect()
|
||||
const x = Math.round((e.clientX - rect.left) * canvas.width / rect.width)
|
||||
const y = Math.round((e.clientY - rect.top) * canvas.height / rect.height)
|
||||
ws.send(makePointer(
|
||||
Math.max(0, Math.min(x, canvas.width - 1)),
|
||||
Math.max(0, Math.min(y, canvas.height - 1)),
|
||||
buttonMask,
|
||||
))
|
||||
}
|
||||
|
||||
canvas.addEventListener('mousemove', sendPointer)
|
||||
canvas.addEventListener('mousedown', (e) => {
|
||||
e.preventDefault()
|
||||
canvas.focus()
|
||||
if (e.button === 0) buttonMask |= 1
|
||||
else if (e.button === 1) buttonMask |= 2
|
||||
else if (e.button === 2) buttonMask |= 4
|
||||
sendPointer(e)
|
||||
})
|
||||
canvas.addEventListener('mouseup', (e) => {
|
||||
e.preventDefault()
|
||||
if (e.button === 0) buttonMask &= ~1
|
||||
else if (e.button === 1) buttonMask &= ~2
|
||||
else if (e.button === 2) buttonMask &= ~4
|
||||
sendPointer(e)
|
||||
})
|
||||
canvas.addEventListener('contextmenu', (e) => e.preventDefault())
|
||||
canvas.addEventListener('wheel', (e) => {
|
||||
e.preventDefault()
|
||||
if (ws?.readyState !== WebSocket.OPEN) return
|
||||
const rect = canvas.getBoundingClientRect()
|
||||
const x = Math.round((e.clientX - rect.left) * canvas.width / rect.width)
|
||||
const y = Math.round((e.clientY - rect.top) * canvas.height / rect.height)
|
||||
const scrollMask = e.deltaY < 0 ? 8 : 16
|
||||
ws.send(makePointer(x, y, buttonMask | scrollMask))
|
||||
ws.send(makePointer(x, y, buttonMask))
|
||||
})
|
||||
}
|
||||
|
||||
function wireToolbar() {
|
||||
document.getElementById('btn-cad')?.addEventListener('click', () => {
|
||||
if (ws?.readyState === WebSocket.OPEN) ws.send(makeCtrlAltDel())
|
||||
document.getElementById('canvas')?.focus()
|
||||
})
|
||||
|
||||
document.getElementById('btn-fs')?.addEventListener('click', () => {
|
||||
const shell = document.querySelector('.shell')
|
||||
if (document.fullscreenElement) document.exitFullscreen()
|
||||
else shell?.requestFullscreen()
|
||||
document.getElementById('canvas')?.focus()
|
||||
})
|
||||
}
|
||||
165
crates/ericrfb-frontend/src/pages/ports.ts
Normal file
165
crates/ericrfb-frontend/src/pages/ports.ts
Normal file
@@ -0,0 +1,165 @@
|
||||
import type { SessionInfo } from '../shell'
|
||||
|
||||
let containerEl: HTMLElement | null = null
|
||||
|
||||
interface PortInfo {
|
||||
index: number
|
||||
name: string
|
||||
hotkey: string
|
||||
show_in_rc: boolean
|
||||
}
|
||||
|
||||
interface PortsData {
|
||||
port_count: number
|
||||
key_pause_duration: number
|
||||
active_port: number
|
||||
ports: PortInfo[]
|
||||
}
|
||||
|
||||
export function mountPorts(el: HTMLElement, _session: SessionInfo) {
|
||||
containerEl = el
|
||||
el.innerHTML = `
|
||||
<div class="ports-page">
|
||||
<div class="ports-header">
|
||||
<h2>KVM Port Configuration</h2>
|
||||
<div class="ports-actions">
|
||||
<button id="btn-reload" class="btn">Reload</button>
|
||||
<button id="btn-save" class="btn btn-primary">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ports-toast" id="toast" hidden></div>
|
||||
<div class="ports-global">
|
||||
<label>
|
||||
Port count
|
||||
<select id="port-count">
|
||||
${[1, 2, 4, 8, 12, 16, 24, 32, 48, 64].map(n => `<option value="${n}">${n}</option>`).join('')}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Key pause
|
||||
<input type="number" id="key-pause" min="0" max="9999" value="100" />
|
||||
<span>ms</span>
|
||||
</label>
|
||||
</div>
|
||||
<table class="ports-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Name</th>
|
||||
<th>Hotkey</th>
|
||||
<th>Show</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="ports-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
`
|
||||
|
||||
document.getElementById('btn-reload')?.addEventListener('click', loadPorts)
|
||||
document.getElementById('btn-save')?.addEventListener('click', savePorts)
|
||||
loadPorts()
|
||||
}
|
||||
|
||||
export function unmountPorts() {
|
||||
if (containerEl) containerEl.innerHTML = ''
|
||||
containerEl = null
|
||||
}
|
||||
|
||||
function showToast(msg: string, success: boolean) {
|
||||
const el = document.getElementById('toast')
|
||||
if (!el) return
|
||||
el.textContent = msg
|
||||
el.className = `ports-toast ${success ? 'toast-ok' : 'toast-err'}`
|
||||
el.hidden = false
|
||||
setTimeout(() => { el.hidden = true }, 3000)
|
||||
}
|
||||
|
||||
async function loadPorts() {
|
||||
try {
|
||||
const resp = await fetch('/api/kvm/ports')
|
||||
if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
|
||||
const data: PortsData = await resp.json()
|
||||
renderPorts(data)
|
||||
} catch (e) {
|
||||
showToast(`Failed to load: ${e}`, false)
|
||||
}
|
||||
}
|
||||
|
||||
function renderPorts(data: PortsData) {
|
||||
const countEl = document.getElementById('port-count') as HTMLSelectElement
|
||||
const pauseEl = document.getElementById('key-pause') as HTMLInputElement
|
||||
const tbody = document.getElementById('ports-body')!
|
||||
|
||||
if (countEl) countEl.value = String(data.port_count)
|
||||
if (pauseEl) pauseEl.value = String(data.key_pause_duration)
|
||||
|
||||
tbody.innerHTML = ''
|
||||
for (const p of data.ports) {
|
||||
const tr = document.createElement('tr')
|
||||
tr.className = p.index === data.active_port ? 'active-port' : ''
|
||||
tr.innerHTML = `
|
||||
<td class="port-num">${p.index + 1}</td>
|
||||
<td><input type="text" class="port-name" data-idx="${p.index}" value="${esc(p.name)}" maxlength="20" /></td>
|
||||
<td><input type="text" class="port-hotkey" data-idx="${p.index}" value="${esc(p.hotkey)}" maxlength="64" /></td>
|
||||
<td><input type="checkbox" class="port-show" data-idx="${p.index}" ${p.show_in_rc ? 'checked' : ''} /></td>
|
||||
<td><button class="btn btn-sm btn-switch" data-idx="${p.index}">Switch</button></td>
|
||||
`
|
||||
tbody.appendChild(tr)
|
||||
}
|
||||
|
||||
// Wire switch buttons
|
||||
tbody.querySelectorAll('.btn-switch').forEach(btn => {
|
||||
btn.addEventListener('click', async () => {
|
||||
const idx = parseInt((btn as HTMLElement).dataset.idx!)
|
||||
try {
|
||||
await fetch('/api/kvm/switch', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ port: idx }),
|
||||
})
|
||||
showToast(`Switched to port ${idx + 1}`, true)
|
||||
loadPorts() // refresh to show new active
|
||||
} catch (e) {
|
||||
showToast(`Switch failed: ${e}`, false)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
async function savePorts() {
|
||||
const countEl = document.getElementById('port-count') as HTMLSelectElement
|
||||
const pauseEl = document.getElementById('key-pause') as HTMLInputElement
|
||||
const portCount = parseInt(countEl?.value || '16')
|
||||
const keyPause = parseInt(pauseEl?.value || '100')
|
||||
|
||||
const ports: PortInfo[] = []
|
||||
for (let i = 0; i < portCount; i++) {
|
||||
const nameEl = document.querySelector(`.port-name[data-idx="${i}"]`) as HTMLInputElement
|
||||
const hotkeyEl = document.querySelector(`.port-hotkey[data-idx="${i}"]`) as HTMLInputElement
|
||||
const showEl = document.querySelector(`.port-show[data-idx="${i}"]`) as HTMLInputElement
|
||||
ports.push({
|
||||
index: i,
|
||||
name: nameEl?.value || '',
|
||||
hotkey: hotkeyEl?.value || '',
|
||||
show_in_rc: showEl?.checked || false,
|
||||
})
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await fetch('/api/kvm/ports', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ port_count: portCount, key_pause_duration: keyPause, ports }),
|
||||
})
|
||||
if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
|
||||
showToast('Configuration saved', true)
|
||||
loadPorts()
|
||||
} catch (e) {
|
||||
showToast(`Save failed: ${e}`, false)
|
||||
}
|
||||
}
|
||||
|
||||
function esc(s: string): string {
|
||||
return s.replace(/&/g, '&').replace(/"/g, '"').replace(/</g, '<')
|
||||
}
|
||||
60
crates/ericrfb-frontend/src/shell.ts
Normal file
60
crates/ericrfb-frontend/src/shell.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
import { mountConsole, unmountConsole } from './pages/console'
|
||||
import { mountPorts, unmountPorts } from './pages/ports'
|
||||
|
||||
export interface SessionInfo {
|
||||
appletId: string
|
||||
port: number
|
||||
boardName: string
|
||||
}
|
||||
|
||||
type PageId = 'console' | 'ports'
|
||||
|
||||
let currentPage: PageId | null = null
|
||||
let contentEl: HTMLElement
|
||||
let session: SessionInfo
|
||||
|
||||
const pages: Record<PageId, { mount: (el: HTMLElement, s: SessionInfo) => void; unmount: () => void }> = {
|
||||
console: { mount: mountConsole, unmount: unmountConsole },
|
||||
ports: { mount: mountPorts, unmount: unmountPorts },
|
||||
}
|
||||
|
||||
function navigate(page: PageId) {
|
||||
if (currentPage === page) return
|
||||
if (currentPage) pages[currentPage].unmount()
|
||||
|
||||
// Update nav links
|
||||
document.querySelectorAll('.nav-link').forEach(el => {
|
||||
el.classList.toggle('active', el.getAttribute('data-page') === page)
|
||||
})
|
||||
|
||||
currentPage = page
|
||||
pages[page].mount(contentEl, session)
|
||||
}
|
||||
|
||||
export function mountShell(app: HTMLElement, s: SessionInfo) {
|
||||
session = s
|
||||
app.innerHTML = `
|
||||
<div class="shell">
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-brand">blekin</div>
|
||||
<a href="#" data-page="console" class="nav-link active">Console</a>
|
||||
<a href="#" data-page="ports" class="nav-link">Ports</a>
|
||||
</nav>
|
||||
<main class="content" id="page-content"></main>
|
||||
</div>
|
||||
`
|
||||
|
||||
contentEl = document.getElementById('page-content')!
|
||||
|
||||
// Wire up navigation
|
||||
document.querySelectorAll('.nav-link').forEach(el => {
|
||||
el.addEventListener('click', (e) => {
|
||||
e.preventDefault()
|
||||
const page = el.getAttribute('data-page') as PageId
|
||||
if (page) navigate(page)
|
||||
})
|
||||
})
|
||||
|
||||
// Default to console
|
||||
navigate('console')
|
||||
}
|
||||
@@ -32,10 +32,7 @@ body {
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
.login-form h1 {
|
||||
font-size: 1.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
.login-form h1 { font-size: 1.25rem; text-align: center; }
|
||||
|
||||
.login-form input {
|
||||
padding: 0.5rem;
|
||||
@@ -58,26 +55,65 @@ body {
|
||||
|
||||
.login-form button:hover { background: #5a9c69; }
|
||||
.login-form button:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.login-error { color: #e74c3c; font-size: 0.85rem; text-align: center; }
|
||||
|
||||
.login-error {
|
||||
color: #e74c3c;
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
/* Shell layout */
|
||||
.shell {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Toolbar */
|
||||
.sidebar {
|
||||
width: 160px;
|
||||
min-width: 160px;
|
||||
background: #222;
|
||||
border-right: 1px solid #333;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #4a7c59;
|
||||
border-bottom: 1px solid #333;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
color: #999;
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.nav-link:hover { color: #ccc; background: #2a2a2a; }
|
||||
.nav-link.active { color: #e0e0e0; border-left-color: #4a7c59; background: #2a2a2a; }
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Console toolbar */
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: #222;
|
||||
background: #1e1e1e;
|
||||
border-bottom: 1px solid #333;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.toolbar button {
|
||||
padding: 0.25rem 0.75rem;
|
||||
.toolbar button, .toolbar select {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border: 1px solid #444;
|
||||
border-radius: 3px;
|
||||
background: #333;
|
||||
@@ -86,16 +122,11 @@ body {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.toolbar button:hover { background: #444; }
|
||||
|
||||
.toolbar .status {
|
||||
margin-left: auto;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.toolbar button:hover, .toolbar select:hover { background: #444; }
|
||||
.toolbar .status { margin-left: auto; color: #888; }
|
||||
.toolbar .status.connected { color: #4a7c59; }
|
||||
|
||||
/* Console */
|
||||
/* Console canvas */
|
||||
.console-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@@ -109,3 +140,107 @@ body {
|
||||
image-rendering: pixelated;
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
/* Ports config page */
|
||||
.ports-page {
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.ports-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ports-header h2 { font-size: 1.1rem; font-weight: 500; }
|
||||
|
||||
.ports-actions { display: flex; gap: 0.5rem; }
|
||||
|
||||
.ports-toast {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.toast-ok { background: #1a3a1a; color: #6ece6e; }
|
||||
.toast-err { background: #3a1a1a; color: #e74c3c; }
|
||||
|
||||
.ports-global {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.ports-global label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.ports-global input, .ports-global select {
|
||||
padding: 0.3rem 0.5rem;
|
||||
border: 1px solid #444;
|
||||
border-radius: 3px;
|
||||
background: #2a2a2a;
|
||||
color: #e0e0e0;
|
||||
font-size: 0.85rem;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.ports-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.ports-table th {
|
||||
text-align: left;
|
||||
padding: 0.4rem 0.5rem;
|
||||
border-bottom: 1px solid #444;
|
||||
color: #999;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ports-table td {
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
}
|
||||
|
||||
.ports-table .port-num { color: #666; width: 2rem; text-align: center; }
|
||||
|
||||
.ports-table input[type="text"] {
|
||||
padding: 0.25rem 0.4rem;
|
||||
border: 1px solid #444;
|
||||
border-radius: 3px;
|
||||
background: #2a2a2a;
|
||||
color: #e0e0e0;
|
||||
font-size: 0.85rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ports-table input[type="checkbox"] { cursor: pointer; }
|
||||
|
||||
.active-port { background: #1a2a1a; }
|
||||
.active-port .port-num { color: #4a7c59; font-weight: 600; }
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 0.35rem 0.75rem;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
background: #333;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.btn:hover { background: #444; }
|
||||
.btn-primary { background: #4a7c59; border-color: #4a7c59; color: white; }
|
||||
.btn-primary:hover { background: #5a9c69; }
|
||||
.btn-sm { padding: 0.2rem 0.5rem; font-size: 0.75rem; }
|
||||
|
||||
Reference in New Issue
Block a user