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