File size: 2,436 Bytes
f1d2cf1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guestbook</title>
</head>
<body>
<h2>Guestbook</h2>
<!-- Mostra i messaggi flash -->
{% include 'includes/flash.html' %}
<form id="message-form">
<textarea id="message" name="message" required></textarea><br>
<button type="submit">Submit</button>
</form>
<h3>Messages:</h3>
<ul id="messages-list"></ul>
<script>
// Azioni da eseguire quando il DOM è pronto
document.addEventListener('DOMContentLoaded', () => {
// Legge e mostra i messaggi al caricamento della pagina
loadMessages();
// Aggiunge un event listener al pulsante di invio del messaggio
document.getElementById('message-form').addEventListener('submit', sendMessage);
});
// Funzione per inviare un messaggio al guestbook
async function sendMessage(event) {
event.preventDefault();
let messageTextarea = document.getElementById('message')
const message = messageTextarea.value;
const response = await fetch('/api/guestbook', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({messaggio: message})
});
const result = await response.json();
if (result.success) {
loadMessages();
messageTextarea.value = '';
// document.getElementById('message-form').reset();
} else if (result.error){
alert(result.error);
} else {
alert("Errore sconosciuto durante l'invio del messaggio.");
}
}
// Funzione per leggere i messaggi dal guestbook
async function loadMessages() {
const response = await fetch('/api/guestbook');
const messages = await response.json();
const messagesList = document.getElementById('messages-list');
messagesList.innerHTML = '';
messages.forEach(message => {
const li = document.createElement('li');
li.textContent = `${message.nickname}: ${message.messaggio}`;
messagesList.appendChild(li);
});
}
</script>
</body>
</html> |