diff --git a/.gitea/workflows/build-docker.yaml b/.gitea/workflows/build-docker.yaml index ef8ff2f..ba01525 100644 --- a/.gitea/workflows/build-docker.yaml +++ b/.gitea/workflows/build-docker.yaml @@ -4,6 +4,7 @@ on: push: branches: - main + - massage_board jobs: build-and-push: diff --git a/view/index.html b/view/index.html index 8c88d6b..b7f4109 100644 --- a/view/index.html +++ b/view/index.html @@ -24,6 +24,8 @@ Gitea Logo Gitea by jafreli +


+ Message Board


diff --git a/view/message-board.html b/view/message-board.html new file mode 100644 index 0000000..9e4523e --- /dev/null +++ b/view/message-board.html @@ -0,0 +1,23 @@ + + + + + + Message Board + + + +
+

Message Board

+
+ +
+
+ + + +
+
+ + + diff --git a/view/message-board.js b/view/message-board.js new file mode 100644 index 0000000..2f1f7f6 --- /dev/null +++ b/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 = ` + ${item.name} +

${item.message}

+ ${new Date(item.created).toLocaleString()} + `; + 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();