`).join('');
}
// Format message time
function formatMessageTime(isoTime) {
const date = new Date(isoTime);
const now = new Date();
const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
if (diffDays === 0) {
return date.getHours().toString().padStart(2, '0') + ':' +
date.getMinutes().toString().padStart(2, '0');
} else if (diffDays === 1) {
return 'Gestern';
} else if (diffDays < 7) {
const days = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
return days[date.getDay()];
} else {
return date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' });
}
}
// Connect to Matrix server (mock)
function connectToMatrix() {
const dot = document.getElementById('messenger-connection-dot');
const text = document.getElementById('messenger-connection-text');
if (dot && text) {
dot.classList.add('connecting');
text.textContent = 'Verbinde mit Matrix...';
// Simulate connection
setTimeout(() => {
dot.classList.remove('connecting');
text.textContent = 'Verbunden mit Matrix';
}, 1500);
}
}
// Switch between tabs
function switchMessengerTab(tab) {
// Update tab buttons
document.querySelectorAll('.messenger-tab').forEach(btn => {
btn.classList.toggle('active', btn.dataset.tab === tab);
});
// Filter conversations
const convs = document.querySelectorAll('.messenger-conversation');
convs.forEach(conv => {
if (tab === 'all') {
conv.style.display = 'flex';
} else if (tab === 'parents') {
const isGroup = conv.querySelector('.messenger-avatar.group');
conv.style.display = isGroup ? 'none' : 'flex';
} else if (tab === 'groups') {
const isGroup = conv.querySelector('.messenger-avatar.group');
conv.style.display = isGroup ? 'flex' : 'none';
}
});
}
// Filter conversations by search
function filterConversations(query) {
const convs = document.querySelectorAll('.messenger-conversation');
const lowerQuery = query.toLowerCase();
convs.forEach(conv => {
const name = conv.querySelector('.messenger-conversation-name')?.textContent.toLowerCase() || '';
const preview = conv.querySelector('.messenger-conversation-preview')?.textContent.toLowerCase() || '';
const matches = name.includes(lowerQuery) || preview.includes(lowerQuery);
conv.style.display = matches ? 'flex' : 'none';
});
}
// Open a conversation
async function openConversation(id) {
currentConversationId = id;
// Update active state
document.querySelectorAll('.messenger-conversation').forEach(conv => {
conv.classList.toggle('active', conv.dataset.id == id);
if (conv.dataset.id == id) {
conv.classList.remove('unread');
const badge = conv.querySelector('.messenger-unread-badge');
if (badge) badge.remove();
}
});
// Show chat content
const emptyState = document.getElementById('messenger-empty-state');
const chatContent = document.getElementById('messenger-chat-content');
if (emptyState) emptyState.style.display = 'none';
if (chatContent) chatContent.style.display = 'flex';
// Update chat header based on conversation
const conv = document.querySelector(`.messenger-conversation[data-id="${id}"]`);
if (conv) {
const name = conv.querySelector('.messenger-conversation-name')?.textContent;
const avatar = conv.querySelector('.messenger-avatar')?.innerHTML;
const isOnline = conv.querySelector('.messenger-avatar.online');
document.getElementById('messenger-chat-name').textContent = name;
document.getElementById('messenger-chat-avatar').innerHTML = avatar;
const status = document.getElementById('messenger-chat-status');
if (status) {
status.textContent = isOnline ? 'Online' : 'Offline';
status.className = 'messenger-chat-status' + (isOnline ? ' online' : '');
}
}
// Load messages from API
await loadConversationMessages(id);
// Focus input
document.getElementById('messenger-input')?.focus();
}
// Load messages for a conversation
async function loadConversationMessages(conversationId) {
const container = document.getElementById('messenger-messages');
if (!container) return;
try {
const response = await fetch(`${MESSENGER_API}/conversations/${conversationId}/messages`);
if (!response.ok) {
console.error('Failed to load messages');
return;
}
const messages = await response.json();
messengerMessages[conversationId] = messages;
// Render messages
if (messages.length === 0) {
container.innerHTML = `
Keine Nachrichten
`;
} else {
renderMessages(messages, container);
}
// Scroll to bottom
container.scrollTop = container.scrollHeight;
} catch (error) {
console.error('Error loading messages:', error);
}
}
// Render messages in container
function renderMessages(messages, container) {
let html = '';
let lastDate = null;
messages.forEach(msg => {
const msgDate = new Date(msg.created_at).toDateString();
// Add date separator if needed
if (msgDate !== lastDate) {
const dateLabel = formatDateLabel(msg.created_at);
html += `
${dateLabel}
`;
lastDate = msgDate;
}
const isSent = msg.sender_id === 'teacher'; // TODO: Get actual user ID
const time = formatMessageTime(msg.created_at);
html += `