3
This commit is contained in:
Flatlogic Bot
parent
9dd9dcbc9d
commit
518cd35214
58
index.php
58
index.php
@ -82,27 +82,29 @@ $servers = get_user_servers($user_id);
|
||||
|
||||
let activeServerId = null;
|
||||
let activeChannelId = null;
|
||||
let messagePollingInterval = null;
|
||||
|
||||
servers.forEach(server => {
|
||||
server.addEventListener('click', function() {
|
||||
const serverId = this.dataset.serverId;
|
||||
if (serverId === activeServerId) return;
|
||||
|
||||
// Update active state for server icons
|
||||
servers.forEach(s => s.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
|
||||
activeServerId = serverId;
|
||||
activeChannelId = null; // Reset channel selection
|
||||
activeChannelId = null;
|
||||
if (messagePollingInterval) {
|
||||
clearInterval(messagePollingInterval);
|
||||
messagePollingInterval = null;
|
||||
}
|
||||
|
||||
// Clear UI
|
||||
serverNameEl.textContent = 'Chargement...';
|
||||
channelsListEl.innerHTML = '';
|
||||
messagesListEl.innerHTML = '<div style="text-align: center; color: var(--text-muted); margin-top: 20px;">Sélectionnez un canal.</div>';
|
||||
channelNameEl.textContent = '';
|
||||
messageForm.style.display = 'none';
|
||||
|
||||
// Fetch server data (channels)
|
||||
fetch(`get_channels.php?server_id=${serverId}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
@ -113,7 +115,7 @@ $servers = get_user_servers($user_id);
|
||||
}
|
||||
|
||||
serverNameEl.textContent = data.server_name;
|
||||
channelsListEl.innerHTML = ''; // Clear loading state
|
||||
channelsListEl.innerHTML = '';
|
||||
if (data.channels.length > 0) {
|
||||
data.channels.forEach(channel => {
|
||||
const channelEl = document.createElement('div');
|
||||
@ -123,7 +125,6 @@ $servers = get_user_servers($user_id);
|
||||
channelEl.addEventListener('click', () => selectChannel(channel.id, channel.name));
|
||||
channelsListEl.appendChild(channelEl);
|
||||
});
|
||||
// Automatically select the first channel
|
||||
selectChannel(data.channels[0].id, data.channels[0].name);
|
||||
} else {
|
||||
channelsListEl.innerHTML = '<p style="color: var(--text-muted); padding: 0 16px;">Aucun canal trouvé.</p>';
|
||||
@ -140,13 +141,12 @@ $servers = get_user_servers($user_id);
|
||||
if (channelId === activeChannelId) return;
|
||||
activeChannelId = channelId;
|
||||
|
||||
// Update active state for channel list
|
||||
document.querySelectorAll('.channel').forEach(c => {
|
||||
if (c.dataset.channelId === channelId.toString()) {
|
||||
c.classList.add('active');
|
||||
} else {
|
||||
c.classList.remove('active');
|
||||
if (messagePollingInterval) {
|
||||
clearInterval(messagePollingInterval);
|
||||
}
|
||||
|
||||
document.querySelectorAll('.channel').forEach(c => {
|
||||
c.classList.toggle('active', c.dataset.channelId === channelId.toString());
|
||||
});
|
||||
|
||||
channelNameEl.textContent = channelName;
|
||||
@ -157,39 +157,47 @@ $servers = get_user_servers($user_id);
|
||||
messageInput.focus();
|
||||
|
||||
fetchMessages(channelId);
|
||||
messagePollingInterval = setInterval(() => fetchMessages(channelId), 3000);
|
||||
}
|
||||
|
||||
function fetchMessages(channelId) {
|
||||
const wasScrolledToBottom = messagesListEl.scrollHeight - messagesListEl.clientHeight <= messagesListEl.scrollTop + 1;
|
||||
|
||||
fetch(`get_messages.php?channel_id=${channelId}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
messagesListEl.innerHTML = '';
|
||||
let newHTML = '';
|
||||
if (data.error) {
|
||||
messagesListEl.innerHTML = `<p style="color: #f04747; text-align:center;">${data.error}</p>`;
|
||||
return;
|
||||
}
|
||||
if (data.length > 0) {
|
||||
newHTML = `<p style="color: #f04747; text-align:center;">${data.error}</p>`;
|
||||
} else if (data.length > 0) {
|
||||
data.forEach(msg => {
|
||||
const msgEl = document.createElement('div');
|
||||
msgEl.classList.add('message');
|
||||
msgEl.innerHTML = `
|
||||
newHTML += `
|
||||
<div class="message">
|
||||
<div class="message-avatar"></div>
|
||||
<div class="message-content">
|
||||
<span class="message-author">${escapeHTML(msg.username)}</span>
|
||||
<div class="message-text">${escapeHTML(msg.message)}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
messagesListEl.appendChild(msgEl);
|
||||
});
|
||||
} else {
|
||||
messagesListEl.innerHTML = '<p style="text-align:center; color: var(--text-muted);">Aucun message. Soyez le premier à en envoyer un !</p>';
|
||||
newHTML = '<p style="text-align:center; color: var(--text-muted);">Aucun message. Soyez le premier à en envoyer un !</p>';
|
||||
}
|
||||
// Scroll to bottom
|
||||
|
||||
if (messagesListEl.innerHTML !== newHTML) {
|
||||
messagesListEl.innerHTML = newHTML;
|
||||
if (wasScrolledToBottom) {
|
||||
messagesListEl.scrollTop = messagesListEl.scrollHeight;
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching messages:', error);
|
||||
// Avoid replacing content on intermittent network errors during polling
|
||||
if (messagesListEl.innerHTML.includes('Chargement des messages...')) {
|
||||
messagesListEl.innerHTML = '<p style="color: #f04747; text-align:center;">Erreur de chargement des messages.</p>';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -210,7 +218,7 @@ $servers = get_user_servers($user_id);
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
messageInput.value = '';
|
||||
fetchMessages(activeChannelId); // Refresh messages
|
||||
fetchMessages(activeChannelId); // Refresh messages immediately
|
||||
} else {
|
||||
alert('Erreur lors de l'envoi du message: ' + data.error);
|
||||
}
|
||||
@ -222,7 +230,7 @@ $servers = get_user_servers($user_id);
|
||||
});
|
||||
|
||||
function escapeHTML(str) {
|
||||
return str.replace(/[&<>'"/]/g, function(match) {
|
||||
return str.replace(/[&<>"']/g, function(match) {
|
||||
return {
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user