Files
Linktree/view/message-board.js
2025-01-17 02:32:20 +01:00

52 lines
1.7 KiB
JavaScript

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, 8, {
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();
const messageInput = document.getElementById('message');
const charCount = document.getElementById('charCount');
// Event-Listener für Eingaben im Textfeld
messageInput.addEventListener('input', () => {
const currentLength = messageInput.value.length;
charCount.textContent = `${currentLength} / 100`;
});