Yei.J. (AskaEth)
100 lines
4.1 KiB
JavaScript
100 lines
4.1 KiB
JavaScript
const PageHome = {
|
|
_el: null,
|
|
_refreshTimer: null,
|
|
|
|
init() {
|
|
this._el = document.getElementById('page-home');
|
|
},
|
|
|
|
async render() {
|
|
this._el.innerHTML = this._template();
|
|
this._startRefresh();
|
|
await this._refreshCards();
|
|
},
|
|
|
|
async _refreshCards() {
|
|
try {
|
|
const status = await API.getStatus();
|
|
this._updateCard('card-server', status.server_running ? '运行中' : '已停止', status.server_running ? 'success' : 'danger');
|
|
this._updateCard('card-telemetry', status.telemetry_running ? '监听中' : '未启动', status.telemetry_running ? 'success' : 'warning');
|
|
this._updateCard('card-game', status.selected_game_id || '未选择', 'info');
|
|
this._updateCard('card-connections', `${status.ws_clients} 个客户端`, status.ws_clients > 0 ? 'success' : 'secondary');
|
|
this._updateCard('card-packets', `${status.packet_count} 包`, status.packet_count > 0 ? 'success' : 'secondary');
|
|
|
|
const lastTime = status.last_packet_time;
|
|
if (lastTime > 0) {
|
|
const ago = Math.round((Date.now() / 1000) - lastTime);
|
|
this._updateCard('card-last-packet', `${ago}秒前`, ago < 5 ? 'success' : 'warning');
|
|
} else {
|
|
this._updateCard('card-last-packet', '暂无数据', 'secondary');
|
|
}
|
|
|
|
const td = status.latest_data;
|
|
if (td) {
|
|
this._updateCard('card-speed', `${(td.speed_kmh || 0).toFixed(1)} km/h`, 'primary');
|
|
this._updateCard('card-rpm', `${(td.rpm || 0).toFixed(0)} RPM`, 'primary');
|
|
this._updateCard('card-gear', `档位 ${td.gear || 'N'}`, 'primary');
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to refresh status:', e);
|
|
}
|
|
},
|
|
|
|
_updateCard(id, value, type) {
|
|
const el = document.getElementById(id);
|
|
if (!el) return;
|
|
const valEl = el.querySelector('.status-card-value');
|
|
if (valEl) valEl.textContent = value;
|
|
const badgeEl = el.querySelector('.badge');
|
|
if (badgeEl) {
|
|
badgeEl.className = `badge badge-${type}`;
|
|
}
|
|
},
|
|
|
|
_startRefresh() {
|
|
if (this._refreshTimer) clearInterval(this._refreshTimer);
|
|
this._refreshTimer = setInterval(() => this._refreshCards(), 2000);
|
|
},
|
|
|
|
cleanup() {
|
|
if (this._refreshTimer) {
|
|
clearInterval(this._refreshTimer);
|
|
this._refreshTimer = null;
|
|
}
|
|
},
|
|
|
|
_template() {
|
|
return `
|
|
<div class="animated">
|
|
<h2 style="font-size:24px;font-weight:700;margin-bottom:8px;">系统概览</h2>
|
|
<p style="color:var(--text-secondary);margin-bottom:24px;">实时监控 TurboSu 运行状态与游戏遥测连接</p>
|
|
</div>
|
|
<div class="status-grid animated" style="animation-delay:0.1s">
|
|
${this._cardHtml('card-server', '服务器状态', '运行中', 'success')}
|
|
${this._cardHtml('card-telemetry', '遥测监听', '未启动', 'warning')}
|
|
${this._cardHtml('card-connections', 'WebSocket 连接', '0 个客户端', 'secondary')}
|
|
${this._cardHtml('card-packets', '数据包接收', '0 包', 'secondary')}
|
|
${this._cardHtml('card-last-packet', '最后数据包', '暂无数据', 'secondary')}
|
|
${this._cardHtml('card-game', '当前游戏', '未选择', 'info')}
|
|
</div>
|
|
<div class="status-grid animated" style="animation-delay:0.2s">
|
|
${this._cardHtml('card-speed', '实时速度', '-- km/h', 'primary')}
|
|
${this._cardHtml('card-rpm', '实时转速', '-- RPM', 'primary')}
|
|
${this._cardHtml('card-gear', '当前档位', 'N', 'primary')}
|
|
</div>`;
|
|
},
|
|
|
|
_cardHtml(id, title, value, type) {
|
|
return `
|
|
<div class="glass-card status-card" id="${id}">
|
|
<div class="status-card-header">
|
|
<span class="status-card-title">${title}</span>
|
|
<span class="badge badge-${type}">●</span>
|
|
</div>
|
|
<div class="status-card-value">${value}</div>
|
|
</div>`;
|
|
}
|
|
};
|
|
|
|
window.PageHome = PageHome;
|