add first message board

view/message-board.js

@@ -0,0 +1,44 @@
+import PocketBase from 'pocketbase';
+
+const pb = new PocketBase('https://db.out.jafre.li');
+const messageContainer = document.getElementById('messages');
+const messageForm = document.getElementById('messageForm');
+
+// Funktion, um die letzten 10 Nachrichten zu laden
+async function loadMessages() {
+    const result = await pb.collection('message_board').getList(1, 10, {
+        sort: '-created', // Sortiert nach Erstellungsdatum absteigend
+    });
+
+    messageContainer.innerHTML = ''; // Löscht vorherige Inhalte
+
+    result.items.forEach((item) => {
+        const messageElement = document.createElement('div');
+        messageElement.className = 'message';
+        messageElement.innerHTML = `
+            <strong>${item.name}</strong>
+            <p>${item.message}</p>
+            <small>${new Date(item.created).toLocaleString()}</small>
+        `;
+        messageContainer.appendChild(messageElement);
+    });
+}
+
+// Event-Listener für das Formular
+messageForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+
+    const name = document.getElementById('name').value;
+    const message = document.getElementById('message').value;
+
+    try {
+        await pb.collection('message_board').create({ name, message });
+        loadMessages(); // Aktualisiert die Nachrichtenanzeige
+        messageForm.reset(); // Löscht das Formular
+    } catch (error) {
+        console.error('Error creating message:', error);
+    }
+});
+
+// Nachrichten beim Laden der Seite anzeigen
+loadMessages();