radon/radchat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Radon 2025-01-18 20:03:30 -06:00
parent 0f1b78047a
commit 98d8225667
1 changed files with 138 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

224
root.js
View File

@ -1,37 +1,44 @@
function toggleSettings() { function toggleSettings() {
const panel = document.getElementById('settings-panel'); const panel = document.getElementById("settings-panel");
panel.style.display = panel.style.display === 'none' ? 'block' : 'none'; panel.style.display = panel.style.display === "none" ? "block" : "none";
if (panel.style.display === 'block') { if (panel.style.display === "block") {
const username = document.getElementById('username'); const username = document.getElementById("username");
username.focus(); username.focus();
username.selectionStart = username.selectionEnd = username.value.length username.selectionStart = username.selectionEnd = username.value
.length;
} }
} }
function toggleUsers() { function toggleUsers() {
const panel = document.getElementById('users-panel'); const panel = document.getElementById("users-panel");
panel.style.display = panel.style.display === 'none' ? 'block' : 'none'; panel.style.display = panel.style.display === "none" ? "block" : "none";
} }
document.addEventListener('click', function(event) { document.addEventListener("click", function (event) {
const settingsPanel = document.getElementById('settings-panel'); const settingsPanel = document.getElementById("settings-panel");
const settingsButton = document.querySelector('.settings-button'); const settingsButton = document.querySelector(".settings-button");
const usersPanel = document.getElementById('users-panel'); const usersPanel = document.getElementById("users-panel");
const usersButton = document.querySelector('.users-button'); const usersButton = document.querySelector(".users-button");
if (!settingsPanel.contains(event.target) && !settingsButton.contains(event.target)) { if (
settingsPanel.style.display = 'none'; !settingsPanel.contains(event.target) &&
!settingsButton.contains(event.target)
) {
settingsPanel.style.display = "none";
} }
if (!usersPanel.contains(event.target) && !usersButton.contains(event.target)) { if (
usersPanel.style.display = 'none'; !usersPanel.contains(event.target) &&
!usersButton.contains(event.target)
) {
usersPanel.style.display = "none";
} }
}); });
document.addEventListener('keypress', function(event) { document.addEventListener("keypress", function (event) {
if (event.key === 'Enter' && !event.shiftKey) { if (event.key === "Enter" && !event.shiftKey) {
const settingsPanel = document.getElementById('settings-panel'); const settingsPanel = document.getElementById("settings-panel");
const inputPanel = document.getElementById('message'); const inputPanel = document.getElementById("message");
if (settingsPanel.contains(event.target)) { if (settingsPanel.contains(event.target)) {
setUsername(); setUsername();
} }
@ -42,205 +49,250 @@ document.addEventListener('keypress', function(event) {
} }
}); });
document.addEventListener('input', function(event) { document.addEventListener("input", function (event) {
const msg = document.getElementById('message'); const msg = document.getElementById("message");
msg.style.height = 'auto'; msg.style.height = "auto";
msg.style.height = (msg.scrollHeight) + 'px'; msg.style.height = (msg.scrollHeight) + "px";
}); });
async function loadUsers() { async function loadUsers() {
try { try {
const response = await fetch('/users'); const response = await fetch("/users");
const data = await response.json(); const data = await response.json();
const usersList = document.getElementById('users-list'); const usersList = document.getElementById("users-list");
usersList.innerHTML = ''; usersList.innerHTML = "";
data.users.sort().forEach(user => { data.users.sort().forEach((user) => {
const userDiv = document.createElement('div'); const userDiv = document.createElement("div");
userDiv.className = 'user-item'; userDiv.className = "user-item";
userDiv.textContent = user; userDiv.textContent = user;
usersList.appendChild(userDiv); usersList.appendChild(userDiv);
}); });
} catch (error) { } catch (error) {
console.error('Error loading users:', error); console.error("Error loading users:", error);
} }
} }
let lastMessageCount = 0; let lastMessageCount = 0;
async function loadMessages() { async function loadMessages() {
try { try {
const messagesDiv = document.getElementById('messages'); const messagesDiv = document.getElementById("messages");
const response = await fetch('/messages'); const response = await fetch("/messages");
const text = await response.text(); const text = await response.text();
const tempDiv = document.createElement('div'); const tempDiv = document.createElement("div");
tempDiv.innerHTML = text; tempDiv.innerHTML = text;
if (messagesDiv.scrollTop != bottom) { if (messagesDiv.scrollTop != bottom) {
// show a button to scroll to the bottom // show a button to scroll to the bottom
const scrollToBottomButton = document.getElementById('scroll'); const scrollToBottomButton = document.getElementById(
scrollToBottomButton.style.display = 'block'; "scroll",
);
scrollToBottomButton.style.display = "block";
scrollToBottomButton.onclick = scrollToBottom; scrollToBottomButton.onclick = scrollToBottom;
} else { } else {
// hide the button // hide the button
const scrollToBottomButton = document.getElementById('scroll'); const scrollToBottomButton = document.getElementById(
scrollToBottomButton.style.display = 'none'; "scroll",
);
scrollToBottomButton.style.display = "none";
} }
const messages = tempDiv.getElementsByTagName('p'); const messages = tempDiv.getElementsByTagName("p");
const newMessageCount = messages.length; const newMessageCount = messages.length;
if (newMessageCount > lastMessageCount || lastMessageCount === 0) { if (
messagesDiv.innerHTML = ''; newMessageCount > lastMessageCount ||
Array.from(messages).forEach(msg => { lastMessageCount === 0
const messageDiv = document.createElement('div'); ) {
messageDiv.className = 'message'; messagesDiv.innerHTML = "";
const [username, content] = msg.innerHTML.split('<br>'); Array.from(messages).forEach((msg) => {
messageDiv.innerHTML = '<div class="username">' + username + '</div>' + const messageDiv = document.createElement(
'<div class="content">' + content + '</div>'; "div",
);
messageDiv.className = "message";
const [username, content] = msg.innerHTML.split(
"<br>",
);
messageDiv.innerHTML =
'<div class="username">' + username +
"</div>" +
'<div class="content">' + content +
"</div>";
messagesDiv.appendChild(messageDiv); messagesDiv.appendChild(messageDiv);
}); });
scrollToBottom(); scrollToBottom();
lastMessageCount = newMessageCount; lastMessageCount = newMessageCount;
} }
} catch (error) { } catch (error) {
console.error('Error loading messages:', error); console.error("Error loading messages:", error);
} }
} }
var bottom = 0; var bottom = 0;
function scrollToBottom() { function scrollToBottom() {
const messagesDiv = document.getElementById('messages'); const messagesDiv = document.getElementById("messages");
messagesDiv.scrollTop = messagesDiv.scrollHeight; messagesDiv.scrollTop = messagesDiv.scrollHeight;
bottom = messagesDiv.scrollTop; bottom = messagesDiv.scrollTop;
} }
async function checkUsername() { async function checkUsername() {
try { try {
const response = await fetch('/username/status'); const response = await fetch("/username/status");
const data = await response.json(); const data = await response.json();
if (!data.hasUsername) { if (!data.hasUsername) {
document.getElementById('settings-panel').style.display = 'block' document.getElementById("settings-panel").style
const username = document.getElementById('username'); .display = "block";
const username = document.getElementById("username");
username.focus(); username.focus();
username.selectionStart = username.selectionEnd = username.value.length username.selectionStart =
username.selectionEnd =
username.value.length;
} }
} catch (error) { } catch (error) {
console.error('Error checking username status:', error); console.error("Error checking username status:", error);
} }
} }
async function updateCurrentUser() { async function updateCurrentUser() {
try { try {
const response = await fetch('/username/status'); const response = await fetch("/username/status");
const data = await response.json(); const data = await response.json();
const userDiv = document.getElementById('current-user'); const userDiv = document.getElementById("current-user");
if (data.hasUsername) { if (data.hasUsername) {
userDiv.textContent = data.username; userDiv.textContent = data.username;
} else { } else {
userDiv.textContent = ''; userDiv.textContent = "";
} }
} catch (error) { } catch (error) {
console.error('Error getting username:', error); console.error("Error getting username:", error);
} }
} }
async function setUsername() { async function setUsername() {
const username = document.getElementById('username').value; const username = document.getElementById("username").value;
if (!username) { if (!username) {
showUsernameStatus('Please enter a username', 'red'); showUsernameStatus("Please enter a username", "red");
return; return;
} }
try { try {
const response = await fetch('/username', { const response = await fetch("/username", {
method: 'PUT', method: "PUT",
headers: { headers: {
'Content-Type': 'application/json' "Content-Type": "application/json",
}, },
body: JSON.stringify({ username: username }) body: JSON.stringify({ username: username }),
}); });
const data = await response.json(); const data = await response.json();
if (response.ok) { if (response.ok) {
showUsernameStatus('Username set successfully!', 'green'); showUsernameStatus(
"Username set successfully!",
"green",
);
updateCurrentUser(); updateCurrentUser();
setTimeout(() => { setTimeout(() => {
document.getElementById('settings-panel').style.display = 'none'; document.getElementById("settings-panel").style
.display = "none";
}, 500); }, 500);
location.reload(); location.reload();
} else { } else {
showUsernameStatus(data.error || 'Failed to set username', 'red'); showUsernameStatus(
data.error || "Failed to set username",
"red",
);
} }
} catch (error) { } catch (error) {
showUsernameStatus('Error connecting to server', 'red'); showUsernameStatus("Error connecting to server", "red");
} }
} }
async function sendMessage() { async function sendMessage() {
const messageInput = document.getElementById('message'); const messageInput = document.getElementById("message");
const message = messageInput.value; const message = messageInput.value;
if (!message) { if (!message) {
return; return;
} }
try { try {
const response = await fetch('/messages', { const response = await fetch("/messages", {
method: 'PUT', method: "PUT",
headers: { headers: {
'Content-Type': 'application/json' "Content-Type": "application/json",
}, },
body: JSON.stringify({ message: message }) body: JSON.stringify({ message: message }),
}); });
const data = await response.json(); const data = await response.json();
if (response.ok) { if (response.ok) {
messageInput.value = ''; messageInput.value = "";
messageInput.style.height = 'auto'; messageInput.style.height = "auto";
loadMessages(); loadMessages();
} else { } else {
showStatus(data.error || 'Failed to send message', 'red'); showStatus(
data.error || "Failed to send message",
"red",
);
} }
} catch (error) { } catch (error) {
showStatus('Error connecting to server', 'red'); showStatus("Error connecting to server", "red");
} }
} }
function showStatus(message, color) { function showStatus(message, color) {
const status = document.getElementById('status'); const status = document.getElementById("status");
status.textContent = message; status.textContent = message;
status.style.color = color; status.style.color = color;
setTimeout(() => { setTimeout(() => {
status.textContent = ''; status.textContent = "";
}, 3000); }, 3000);
} }
function showUsernameStatus(message, color) { function showUsernameStatus(message, color) {
const status = document.getElementById('username-status'); const status = document.getElementById("username-status");
status.textContent = message; status.textContent = message;
status.style.color = color; status.style.color = color;
setTimeout(() => { setTimeout(() => {
status.textContent = ''; status.textContent = "";
}, 3000); }, 3000);
} }
async function pingCheck() { async function pingCheck() {
try { try {
await fetch('/ping', {method: 'POST'}); await fetch("/ping", { method: "POST" });
} catch (error) { } catch (error) {
console.error('Ping failed:', error); console.error("Ping failed:", error);
}
}
async function timeZoneCheck() {
try {
const timeZone =
Intl.DateTimeFormat().resolvedOptions().timeZone;
const response = await fetch("/timezone", {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ timezone: timeZone }),
});
const data = await response.json();
console.log(data);
} catch (error) {
console.error("Error checking timezone:", error);
} }
} }
async function initialize() { async function initialize() {
await loadMessages(); await loadMessages();
document.getElementById('users-panel').style.display = 'none'; document.getElementById("users-panel").style.display = "none";
document.getElementById('settings-panel').style.display = 'none'; document.getElementById("settings-panel").style.display = "none";
checkUsername(); checkUsername();
updateCurrentUser(); updateCurrentUser();
setInterval(loadMessages, 1000); setInterval(loadMessages, 1000);