angryzeroandCopilot
1bfca0d1e0
- 'Loading…' shown in charts/fields/output areas while waiting for server response - Console + chat: clears loading state on first output line - Player list: table body shows loading row until refresh completes - Player info / Server info: fields show loading until data arrives Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
76 lines
2.6 KiB
JavaScript
76 lines
2.6 KiB
JavaScript
/**
|
|
* Chat page — live chat viewer with message sending.
|
|
*/
|
|
function ChatPage(params, container) {
|
|
var address = Rcon.getAddress() || '';
|
|
|
|
var html =
|
|
'<div id="ChatController">' +
|
|
'<div id="chat-output" style="height:600px" class="Output scrollable text-white-50">Loading…</div>' +
|
|
'<form id="chat-form">' +
|
|
'<input id="chat-input" class="form-control" style="width:100%" placeholder="Type a message...">' +
|
|
'</form>' +
|
|
'</div>';
|
|
container.innerHTML = html;
|
|
|
|
var outputEl = document.getElementById('chat-output');
|
|
var inputEl = document.getElementById('chat-input');
|
|
var firstMessage = true;
|
|
|
|
function addMessage(msg) {
|
|
if (firstMessage) { outputEl.innerHTML = ''; outputEl.classList.remove('text-white-50'); firstMessage = false; }
|
|
var div = document.createElement('div');
|
|
var t = new Date((msg.Time || 0) * 1000);
|
|
var timeStr = t.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
|
|
var ts = document.createElement('span');
|
|
ts.style.cssText = 'min-width:60px;display:inline-block;';
|
|
ts.textContent = timeStr;
|
|
div.appendChild(ts);
|
|
|
|
var ns = document.createElement('span');
|
|
ns.style.cssText = 'min-width:130px;display:inline-block;text-align:right;';
|
|
var a = document.createElement('a');
|
|
a.href = '#/' + address + '/player/' + (msg.UserId || '');
|
|
a.textContent = stripHtml(msg.Username || '') + ' :';
|
|
ns.appendChild(a);
|
|
div.appendChild(ns);
|
|
|
|
var ms = document.createElement('span');
|
|
ms.style.display = 'inline-block';
|
|
ms.textContent = stripHtml(msg.Message || '');
|
|
div.appendChild(ms);
|
|
|
|
outputEl.appendChild(div);
|
|
if (isScrolledToBottom(outputEl)) outputEl.scrollTop = outputEl.scrollHeight;
|
|
}
|
|
|
|
function onSubmit() {
|
|
var cmd = inputEl.value.trim();
|
|
if (!cmd) return;
|
|
Rcon.command('say ' + cmd, 1);
|
|
inputEl.value = '';
|
|
}
|
|
|
|
function onMessage(msg) {
|
|
if (msg.Type !== 'Chat') return;
|
|
addMessage(JSON.parse(msg.Message));
|
|
}
|
|
|
|
function fetchHistory() {
|
|
Rcon.request('chat.tail 512', function (response) {
|
|
var messages = JSON.parse(response.Message);
|
|
for (var i = 0; i < messages.length; i++) addMessage(messages[i]);
|
|
outputEl.scrollTop = outputEl.scrollHeight;
|
|
});
|
|
}
|
|
|
|
document.getElementById('chat-form').addEventListener('submit', function (e) { e.preventDefault(); onSubmit(); });
|
|
Rcon.on('message', onMessage);
|
|
|
|
if (Rcon.isConnected()) fetchHistory();
|
|
else { var _c = function () { fetchHistory(); Rcon.off('connected', _c); }; Rcon.on('connected', _c); }
|
|
|
|
return function cleanup() { Rcon.off('message', onMessage); };
|
|
}
|