WummerMIB
126 lines
4.9 KiB
PHP
126 lines
4.9 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chat</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body class="flex h-screen bg-gray-100">
|
|
|
|
<!-- Kontakte links -->
|
|
<div class="w-1/4 bg-white shadow-lg flex flex-col">
|
|
<div class="p-4 border-b flex justify-between items-center">
|
|
<span class="font-bold"><?= htmlspecialchars($currentUser['vorname'] . ' ' . $currentUser['nachname']) ?></span>
|
|
<form method="POST" action="<?= PROJEKT_URL ?>/Login/logout">
|
|
<button type="submit" class="bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600 text-xs">Abmelden</button>
|
|
</form>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto" id="contacts-container">
|
|
<?php foreach ($allUsers as $user): ?>
|
|
<?php if ($user['id'] != $currentUserId): ?>
|
|
<div class="contact p-2 cursor-pointer hover:bg-gray-100 flex justify-between items-center" data-userid="<?= $user['id'] ?>">
|
|
<span><?= htmlspecialchars($user['vorname'] . ' ' . $user['nachname']) ?></span>
|
|
<span class="badge bg-red-500 text-white rounded-full px-2 py-1 text-xs"
|
|
id="contact-badge-<?= $user['id'] ?>" style="display:none;">0</span>
|
|
</div>
|
|
<?php endif; ?>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat rechts -->
|
|
<div class="w-3/4 flex flex-col bg-gray-50">
|
|
<div class="p-4 border-b flex justify-between items-center">
|
|
<span id="chat-with">Wähle einen Kontakt aus</span>
|
|
</div>
|
|
<div id="chat-window" class="flex-1 p-4 overflow-y-auto">
|
|
<?php if(!empty($messages)): ?>
|
|
<?php foreach($messages as $msg): ?>
|
|
<div class="flex <?= $msg['user_sender'] == $currentUserId ? 'justify-end' : 'justify-start' ?> mb-2">
|
|
<div class="<?= $msg['user_sender'] == $currentUserId ? 'bg-blue-500 text-white' : 'bg-gray-300 text-black' ?> p-2 rounded max-w-xs break-words">
|
|
<?= htmlspecialchars($msg['nachricht']) ?>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<?php else: ?>
|
|
<p class="text-gray-500">Keine Nachrichten.</p>
|
|
<?php endif; ?>
|
|
</div>
|
|
<form id="chat-form" class="flex p-4 border-t">
|
|
<input type="text" id="chat-input" class="flex-1 border rounded-l px-3 py-2" placeholder="Nachricht..." />
|
|
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-r hover:bg-blue-600">Senden</button>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
const currentUserId = <?= $currentUserId ?>;
|
|
let currentChatUserId = null;
|
|
|
|
const ws = new WebSocket('ws://localhost:8080');
|
|
|
|
ws.onopen = () => {
|
|
console.log('WebSocket verbunden');
|
|
ws.send(JSON.stringify({ type: 'init', userId: currentUserId }));
|
|
};
|
|
|
|
ws.onmessage = (event) => {
|
|
const data = JSON.parse(event.data);
|
|
if (data.type === 'new_message') {
|
|
if (currentChatUserId === data.senderId) {
|
|
addMessage(data.message, 'left');
|
|
} else {
|
|
const badge = document.getElementById(`contact-badge-${data.senderId}`);
|
|
badge.style.display = 'inline-block';
|
|
badge.textContent = parseInt(badge.textContent || 0) + 1;
|
|
}
|
|
}
|
|
};
|
|
|
|
// Kontakt anklicken
|
|
document.querySelectorAll('.contact').forEach(contact => {
|
|
contact.addEventListener('click', () => {
|
|
const userId = parseInt(contact.dataset.userid);
|
|
currentChatUserId = userId;
|
|
document.getElementById('chat-with').textContent = "Chat mit " + contact.querySelector('span').textContent;
|
|
|
|
const badge = document.getElementById(`contact-badge-${userId}`);
|
|
badge.style.display = 'none';
|
|
badge.textContent = '0';
|
|
|
|
document.getElementById('chat-window').innerHTML = '';
|
|
// Option: Alte Nachrichten via AJAX laden
|
|
});
|
|
});
|
|
|
|
// Formular senden
|
|
document.getElementById('chat-form').addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
const input = document.getElementById('chat-input');
|
|
const message = input.value.trim();
|
|
if (!message || !currentChatUserId) return;
|
|
|
|
ws.send(JSON.stringify({
|
|
type: 'message',
|
|
senderId: currentUserId,
|
|
receiverId: currentChatUserId,
|
|
message: message
|
|
}));
|
|
|
|
addMessage(message, 'right');
|
|
input.value = '';
|
|
});
|
|
|
|
// Nachrichten hinzufügen
|
|
function addMessage(text, side) {
|
|
const chatWindow = document.getElementById('chat-window');
|
|
const msgDiv = document.createElement('div');
|
|
msgDiv.className = side === 'right' ? 'flex justify-end mb-2' : 'flex justify-start mb-2';
|
|
msgDiv.innerHTML = `<div class="${side==='right'?'bg-blue-500 text-white':'bg-gray-300 text-black'} p-2 rounded max-w-xs break-words">${text}</div>`;
|
|
chatWindow.appendChild(msgDiv);
|
|
chatWindow.scrollTop = chatWindow.scrollHeight;
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|