admin/34729-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

3

Browse Source
This commit is contained in:
Flatlogic Bot 2025-10-06 16:28:41 +00:00
parent 9dd9dcbc9d
commit 518cd35214
1 changed files with 39 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
index.php
View File

@ -82,27 +82,29 @@ $servers = get_user_servers($user_id);
let activeServerId = null; let activeServerId = null;
let activeChannelId = null; let activeChannelId = null;
let messagePollingInterval = null;
servers.forEach(server => { servers.forEach(server => {
server.addEventListener('click', function() { server.addEventListener('click', function() {
const serverId = this.dataset.serverId; const serverId = this.dataset.serverId;
if (serverId === activeServerId) return; if (serverId === activeServerId) return;
// Update active state for server icons
servers.forEach(s => s.classList.remove('active')); servers.forEach(s => s.classList.remove('active'));
this.classList.add('active'); this.classList.add('active');
activeServerId = serverId; activeServerId = serverId;
activeChannelId = null; // Reset channel selection activeChannelId = null;
if (messagePollingInterval) {
clearInterval(messagePollingInterval);
messagePollingInterval = null;
}
// Clear UI
serverNameEl.textContent = 'Chargement...'; serverNameEl.textContent = 'Chargement...';
channelsListEl.innerHTML = ''; channelsListEl.innerHTML = '';
messagesListEl.innerHTML = '<div style="text-align: center; color: var(--text-muted); margin-top: 20px;">Sélectionnez un canal.</div>'; messagesListEl.innerHTML = '<div style="text-align: center; color: var(--text-muted); margin-top: 20px;">Sélectionnez un canal.</div>';
channelNameEl.textContent = ''; channelNameEl.textContent = '';
messageForm.style.display = 'none'; messageForm.style.display = 'none';
// Fetch server data (channels)
fetch(`get_channels.php?server_id=${serverId}`) fetch(`get_channels.php?server_id=${serverId}`)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
@ -113,7 +115,7 @@ $servers = get_user_servers($user_id);
} }
serverNameEl.textContent = data.server_name; serverNameEl.textContent = data.server_name;
channelsListEl.innerHTML = ''; // Clear loading state channelsListEl.innerHTML = '';
if (data.channels.length > 0) { if (data.channels.length > 0) {
data.channels.forEach(channel => { data.channels.forEach(channel => {
const channelEl = document.createElement('div'); const channelEl = document.createElement('div');
@ -123,7 +125,6 @@ $servers = get_user_servers($user_id);
channelEl.addEventListener('click', () => selectChannel(channel.id, channel.name)); channelEl.addEventListener('click', () => selectChannel(channel.id, channel.name));
channelsListEl.appendChild(channelEl); channelsListEl.appendChild(channelEl);
}); });
// Automatically select the first channel
selectChannel(data.channels[0].id, data.channels[0].name); selectChannel(data.channels[0].id, data.channels[0].name);
} else { } else {
channelsListEl.innerHTML = '<p style="color: var(--text-muted); padding: 0 16px;">Aucun canal trouvé.</p>'; 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; if (channelId === activeChannelId) return;
activeChannelId = channelId; activeChannelId = channelId;
// Update active state for channel list if (messagePollingInterval) {
document.querySelectorAll('.channel').forEach(c => { clearInterval(messagePollingInterval);
if (c.dataset.channelId === channelId.toString()) {
c.classList.add('active');
} else {
c.classList.remove('active');
} }
document.querySelectorAll('.channel').forEach(c => {
c.classList.toggle('active', c.dataset.channelId === channelId.toString());
}); });
channelNameEl.textContent = channelName; channelNameEl.textContent = channelName;
@ -157,39 +157,47 @@ $servers = get_user_servers($user_id);
messageInput.focus(); messageInput.focus();
fetchMessages(channelId); fetchMessages(channelId);
messagePollingInterval = setInterval(() => fetchMessages(channelId), 3000);
} }
function fetchMessages(channelId) { function fetchMessages(channelId) {
const wasScrolledToBottom = messagesListEl.scrollHeight - messagesListEl.clientHeight <= messagesListEl.scrollTop + 1;
fetch(`get_messages.php?channel_id=${channelId}`) fetch(`get_messages.php?channel_id=${channelId}`)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
messagesListEl.innerHTML = ''; let newHTML = '';
if (data.error) { if (data.error) {
messagesListEl.innerHTML = `<p style="color: #f04747; text-align:center;">${data.error}</p>`; newHTML = `<p style="color: #f04747; text-align:center;">${data.error}</p>`;
return; } else if (data.length > 0) {
}
if (data.length > 0) {
data.forEach(msg => { data.forEach(msg => {
const msgEl = document.createElement('div'); newHTML += `
msgEl.classList.add('message'); <div class="message">
msgEl.innerHTML = `
<div class="message-avatar"></div> <div class="message-avatar"></div>
<div class="message-content"> <div class="message-content">
<span class="message-author">${escapeHTML(msg.username)}</span> <span class="message-author">${escapeHTML(msg.username)}</span>
<div class="message-text">${escapeHTML(msg.message)}</div> <div class="message-text">${escapeHTML(msg.message)}</div>
</div> </div>
</div>
`; `;
messagesListEl.appendChild(msgEl);
}); });
} else { } 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; messagesListEl.scrollTop = messagesListEl.scrollHeight;
}
}
}) })
.catch(error => { .catch(error => {
console.error('Error fetching messages:', 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>'; 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 => { .then(data => {
if (data.success) { if (data.success) {
messageInput.value = ''; messageInput.value = '';
fetchMessages(activeChannelId); // Refresh messages fetchMessages(activeChannelId); // Refresh messages immediately
} else { } else {
alert('Erreur lors de l'envoi du message: ' + data.error); alert('Erreur lors de l'envoi du message: ' + data.error);
} }
@ -222,7 +230,7 @@ $servers = get_user_servers($user_id);
}); });
function escapeHTML(str) { function escapeHTML(str) {
return str.replace(/[&<>'"/]/g, function(match) { return str.replace(/[&<>"']/g, function(match) {
return { return {
'&': '&amp;', '&': '&amp;',
'<': '&lt;', '<': '&lt;',