Dateien nach "Abgabe_Mohr" hochladen
This commit is contained in:
@@ -0,0 +1,126 @@
|
||||
<!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'] != $currentUser['id']): ?>
|
||||
<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'] == $currentUser['id'] ? 'justify-end' : 'justify-start' ?> mb-2">
|
||||
<div class="<?= $msg['user_sender'] == $currentUser['id'] ? '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 = <?= $currentUser['id'] ?>;
|
||||
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>
|
||||
@@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Registrieren</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
|
||||
|
||||
<div class="bg-white shadow-md rounded-lg p-8 w-full max-w-md">
|
||||
<h2 class="text-2xl font-bold mb-6 text-center">Registrieren</h2>
|
||||
|
||||
<form action="#" method="POST" class="space-y-5">
|
||||
<div>
|
||||
<label for="vorname" class="block text-sm font-medium text-gray-700">Vorname</label>
|
||||
<input type="text" id="vorname" name="vorname" required
|
||||
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="nachname" class="block text-sm font-medium text-gray-700">Nachname</label>
|
||||
<input type="text" id="nachname" name="nachname" required
|
||||
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium text-gray-700">E-Mail</label>
|
||||
<input type="email" id="email" name="email" required
|
||||
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium text-gray-700">Passwort</label>
|
||||
<input type="password" id="password" name="password" required
|
||||
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="passwordWid" class="block text-sm font-medium text-gray-700">Passwort bestätigen</label>
|
||||
<input type="password" id="passwordWid" name="passwordWid" required
|
||||
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
|
||||
</div>
|
||||
|
||||
<button type="submit" name="submit"
|
||||
class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition duration-200">
|
||||
Registrieren
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="mt-6 text-center text-sm text-gray-600">
|
||||
Schon ein Konto? <a href="<?= PROJEKT_URL ?>/Login" class="text-blue-600 hover:underline">Login</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user