AskaEth
858a5b4b93
- DataForwarder class in listener: sends raw packets to all enabled targets - REST API: GET/PUT /api/forward for managing targets - Settings page: add/remove/edit forward targets with host/port/name/enabled - Status endpoint includes forward_active count - Config persisted in data/config.json via forward_targets array
135 lines
10 KiB
JavaScript
135 lines
10 KiB
JavaScript
const PageSettings = {
|
||
_el: null,
|
||
|
||
init() {
|
||
this._el = document.getElementById('page-settings');
|
||
},
|
||
|
||
async render() {
|
||
const cfg = await API.getConfig();
|
||
const games = await API.getGames();
|
||
const forwards = await this._getForwards();
|
||
this._el.innerHTML = this._template(cfg, games, forwards);
|
||
this._bindEvents();
|
||
},
|
||
|
||
async _getForwards() {
|
||
try { const res = await fetch('/api/forward'); return await res.json(); }
|
||
catch (e) { return []; }
|
||
},
|
||
|
||
async _saveForwards(targets) {
|
||
await fetch('/api/forward', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ targets }) });
|
||
},
|
||
|
||
_bindEvents() {
|
||
document.getElementById('settings-telemetry-port')?.addEventListener('change', async (e) => {
|
||
await API.updateConfig({ telemetry_port: parseInt(e.target.value) || 20777 });
|
||
Toast.show('遥测端口已更新，重启监听后生效', 'info');
|
||
});
|
||
|
||
document.getElementById('settings-restart-telemetry')?.addEventListener('click', async () => {
|
||
await API.stopTelemetry(); await API.startTelemetry();
|
||
Toast.show('遥测监听已重启', 'success');
|
||
});
|
||
|
||
document.getElementById('btn-add-forward')?.addEventListener('click', () => this._addForward());
|
||
document.getElementById('forward-list')?.addEventListener('click', async (e) => {
|
||
if (e.target.closest('.btn-del-forward')) {
|
||
e.target.closest('.forward-row').remove();
|
||
this._collectAndSave();
|
||
}
|
||
});
|
||
document.getElementById('btn-save-forwards')?.addEventListener('click', () => this._collectAndSave());
|
||
|
||
document.getElementById('btn-import-plugin')?.addEventListener('click', () => {
|
||
const input = document.createElement('input'); input.type = 'file'; input.accept = '.tsp';
|
||
input.onchange = async (e) => {
|
||
const file = e.target.files[0]; if (!file) return;
|
||
const fd = new FormData(); fd.append('file', file);
|
||
const res = await fetch('/api/games/install', { method: 'POST', body: fd });
|
||
const data = await res.json();
|
||
if (data.ok) { Toast.show('插件安装成功', 'success'); this.render(); }
|
||
else Toast.show('安装失败', 'error');
|
||
}; input.click();
|
||
});
|
||
|
||
document.getElementById('btn-reload-plugins')?.addEventListener('click', async () => {
|
||
await API.reloadGamePlugins(); Toast.show('插件已重新加载', 'success'); this.render();
|
||
});
|
||
|
||
document.getElementById('settings-game-list')?.addEventListener('click', async (e) => {
|
||
const exportBtn = e.target.closest('.btn-export-plugin');
|
||
const removeBtn = e.target.closest('.btn-remove-plugin');
|
||
if (exportBtn) {
|
||
const pid = exportBtn.dataset.pluginId;
|
||
const a = document.createElement('a'); a.href = '/api/games/' + pid + '/export'; a.download = pid + '.tsp'; a.click();
|
||
}
|
||
if (removeBtn) {
|
||
if (confirm('移除？')) { await API.removeGamePlugin(removeBtn.dataset.pluginId); Toast.show('已移除', 'info'); this.render(); }
|
||
}
|
||
});
|
||
|
||
document.getElementById('btn-import-dashboard')?.addEventListener('click', () => {
|
||
const input = document.createElement('input'); input.type = 'file'; input.accept = '.tsd';
|
||
input.onchange = async (e) => {
|
||
const file = e.target.files[0]; if (!file) return;
|
||
const fd = new FormData(); fd.append('file', file);
|
||
const res = await fetch('/api/dashboards/import', { method: 'POST', body: fd });
|
||
const data = await res.json();
|
||
Toast.show(data.ok ? '导入成功' : '导入失败', data.ok ? 'success' : 'error');
|
||
}; input.click();
|
||
});
|
||
},
|
||
|
||
_addForward() {
|
||
const list = document.getElementById('forward-list');
|
||
const row = document.createElement('div');
|
||
row.className = 'forward-row glass-card';
|
||
row.style.cssText = 'padding:12px;margin-bottom:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap';
|
||
row.innerHTML = '<input class="fw-host" placeholder="IP/域名" style="flex:2;min-width:120px"><input class="fw-port" type="number" placeholder="端口" style="flex:1;min-width:70px" min="1" max="65535"><input class="fw-name" placeholder="名称" style="flex:1;min-width:80px"><label style="display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-secondary);white-space:nowrap"><input type="checkbox" class="forward-toggle" checked> 启用</label><button class="btn btn-sm btn-danger btn-del-forward">×</button>';
|
||
list.appendChild(row);
|
||
},
|
||
|
||
_collectAndSave() {
|
||
const rows = document.querySelectorAll('#forward-list .forward-row');
|
||
const targets = [];
|
||
rows.forEach(r => {
|
||
const host = r.querySelector('.fw-host')?.value?.trim();
|
||
const port = parseInt(r.querySelector('.fw-port')?.value) || 0;
|
||
const name = r.querySelector('.fw-name')?.value?.trim() || '';
|
||
const enabled = r.querySelector('.forward-toggle')?.checked !== false;
|
||
if (host && port > 0) targets.push({ host, port, name, enabled });
|
||
});
|
||
this._saveForwards(targets).then(() => Toast.show('已保存 ' + targets.length + ' 个转发目标', 'success'));
|
||
},
|
||
|
||
_forwardListHtml(forwards) {
|
||
if (!forwards || forwards.length === 0) return '<p style="color:var(--text-tertiary);font-size:13px;padding:8px 0">暂无转发目标，点击下方添加</p>';
|
||
return forwards.map(f => '<div class="forward-row glass-card" style="padding:12px;margin-bottom:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap"><input class="fw-host" placeholder="IP/域名" style="flex:2;min-width:120px" value="' + (f.host||'') + '"><input class="fw-port" type="number" placeholder="端口" style="flex:1;min-width:70px" value="' + (f.port||'') + '" min="1" max="65535"><input class="fw-name" placeholder="名称" style="flex:1;min-width:80px" value="' + (f.name||'') + '"><label style="display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-secondary);white-space:nowrap"><input type="checkbox" class="forward-toggle" ' + (f.enabled!==false?'checked':'') + '> 启用</label><button class="btn btn-sm btn-danger btn-del-forward">×</button></div>').join('');
|
||
},
|
||
|
||
_gamePluginListHtml(games) {
|
||
if (!games || games.length === 0) return '<p style="color:var(--text-tertiary);font-size:13px;">暂无游戏插件</p>';
|
||
return games.map(g => '<div class="glass-card" style="padding:16px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between"><div><div style="font-weight:600">' + g.name + '</div><div style="font-size:12px;color:var(--text-tertiary)">' + (g.description||'') + ' | v' + g.version + ' | ' + (g.author||'') + '<span class="badge ' + (g.is_builtin?'badge-info':'badge-success') + '" style="margin-left:6px">' + (g.is_builtin?'内置':'社区') + '</span></div></div><div style="display:flex;gap:6px"><button class="btn btn-sm btn-secondary btn-export-plugin" data-plugin-id="' + g.id + '">导出 .tsp</button>' + (g.is_builtin?'':'<button class="btn btn-sm btn-danger btn-remove-plugin" data-plugin-id="' + g.id + '">移除</button>') + '</div></div>').join('');
|
||
},
|
||
|
||
_template(cfg, games, forwards) {
|
||
return '<div class="animated"><h2 style="font-size:24px;font-weight:700;margin-bottom:24px">设置</h2>' +
|
||
|
||
'<div class="settings-section"><h3>数据转发</h3><p style="font-size:12px;color:var(--text-tertiary);margin-bottom:12px">将收到的游戏原始 UDP 数据包完整转发到下游物理外设</p><div id="forward-list">' + this._forwardListHtml(forwards) + '</div><div style="display:flex;gap:8px;margin-top:8px"><button id="btn-add-forward" class="btn btn-sm btn-secondary">+ 添加目标</button><button id="btn-save-forwards" class="btn btn-sm btn-primary">保存并生效</button></div></div>' +
|
||
|
||
'<div class="settings-section"><h3>连接设置</h3><div class="settings-row"><div><div class="settings-label">遥测监听端口</div><div class="settings-desc">游戏内 UDP 输出端口 (默认 20777)</div></div><div class="settings-control"><input type="number" id="settings-telemetry-port" value="' + (cfg.telemetry_port||20777) + '" min="1024" max="65535"></div></div><div class="settings-row"><div><div class="settings-label">重启遥测监听</div><div class="settings-desc">修改端口或切换游戏后</div></div><div class="settings-control"><button id="settings-restart-telemetry" class="btn btn-secondary btn-sm">重启监听</button></div></div></div>' +
|
||
|
||
'<div class="settings-section"><h3>仪表盘管理</h3><div style="display:flex;gap:8px;margin-bottom:16px"><button id="btn-import-dashboard" class="btn btn-secondary btn-sm">导入 .tsd</button><span style="font-size:12px;color:var(--text-tertiary);display:flex;align-items:center">右键卡片导出</span></div></div>' +
|
||
|
||
'<div class="settings-section"><h3>游戏插件管理</h3><div style="display:flex;gap:8px;margin-bottom:16px"><button id="btn-import-plugin" class="btn btn-secondary btn-sm">导入 .tsp</button><button id="btn-reload-plugins" class="btn btn-secondary btn-sm">重新加载</button></div><div id="settings-game-list">' + this._gamePluginListHtml(games) + '</div><div class="glass-card" style="padding:16px;margin-top:12px;font-size:12px;color:var(--text-tertiary);line-height:1.6"><strong style="color:var(--text-secondary)">社区插件开发指南：</strong><br>1. 创建包含 manifest.json + parser.py 的文件夹<br>2. manifest.json 定义元信息，parser.py 实现 get_parser() 函数<br>3. 返回对象实现 game_id() 和 parse(data, addr) 方法<br>4. 打包 zip 改后缀 .tsp 即可导入<br>5. TelemetryData 字段参考 server/telemetry/data.py</div></div>' +
|
||
|
||
'<div class="settings-section"><h3>关于</h3><div class="settings-row"><div><div class="settings-label">TurboSu</div><div class="settings-desc">赛车遥测仪表盘 v1.0.0 · Yei.J. (AskaEth)</div></div></div></div>' +
|
||
|
||
'</div>';
|
||
}
|
||
};
|
||
|
||
window.PageSettings = PageSettings;
|