jafreli/Linktree
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add first message board

Browse Source
This commit is contained in:
jafreli
2025-01-17 01:31:56 +01:00
parent 7a7c4b70b2
commit 8c38847610
4 changed files with 70 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitea/workflows/build-docker.yaml
View File

@@ -4,6 +4,7 @@ on:
push:
branches:
- main
- massage_board
jobs:
build-and-push:

2
view/index.html
View File

@@ -24,6 +24,8 @@
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Gitea_Logo.svg" alt="Gitea Logo" class="link-icon"> Gitea by jafreli
</a>
<br><br><br>
<a class="link" href="message-board.html">Message Board</a>
<br><br><br>
<!-- Links für Impressum und Datenschutzerklärung ohne Icons -->

23
view/message-board.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Message Board</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Message Board</h1>
<div id="messages">
<!-- Nachrichten werden hier dynamisch geladen -->
</div>
<form id="messageForm">
<input type="text" id="name" placeholder="Your Name" required>
<textarea id="message" placeholder="Your Message" required></textarea>
<button type="submit">Send</button>
</form>
</div>
<script src="message-board.js"></script>
</body>
</html>

44
view/message-board.js Normal file
View File

@@ -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();