From 5d4b1aa88d026de3c868318a6ca19c090bc8c71d Mon Sep 17 00:00:00 2001
From: "Marco.Mohr" <Marco.Mohr@kks.kbs.schule>
Date: Thu, 4 Dec 2025 23:26:51 +0100
Subject: [PATCH] Dateien nach "Abgabe_Mohr" hochladen

---
 Abgabe_Mohr/index.php        | 126 +++++++++++++++++++++++++++++++++++
 Abgabe_Mohr/registrieren.php |  57 ++++++++++++++++
 2 files changed, 183 insertions(+)
 create mode 100644 Abgabe_Mohr/index.php
 create mode 100644 Abgabe_Mohr/registrieren.php
diff --git a/Abgabe_Mohr/index.php b/Abgabe_Mohr/index.php
new file mode 100644
index 0000000..a7e1a96
--- /dev/null
+++ b/Abgabe_Mohr/index.php
@@ -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>
\ No newline at end of file
diff --git a/Abgabe_Mohr/registrieren.php b/Abgabe_Mohr/registrieren.php
new file mode 100644
index 0000000..2db30df
--- /dev/null
+++ b/Abgabe_Mohr/registrieren.php
@@ -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>
