|
const DateTime = luxon.DateTime; |
|
const handleSubmit = (e) => { |
|
e.preventDefault(); |
|
let myForm = document.querySelector('form[name="guestbook"]'); |
|
let formData = new FormData(myForm); |
|
fetch("/", { |
|
method: "POST", |
|
headers: { "Content-Type": "application/x-www-form-urlencoded" }, |
|
body: new URLSearchParams(formData).toString(), |
|
}).then(renderSubmissions); |
|
}; |
|
|
|
document |
|
.querySelector('form[name="guestbook"]') |
|
.addEventListener("submit", handleSubmit); |
|
|
|
const getSubmissions = () => { |
|
return fetch("/.netlify/functions/submissions", {method: "GET"}) |
|
.then((response) => response.json()); |
|
}; |
|
|
|
function createTitle(submission) { |
|
const dt = DateTime.fromISO(submission.created_at).setLocale('nl'); |
|
|
|
const h3El = document.createElement('h3'); |
|
h3El.classList.add('guestbook-header'); |
|
h3El.title = submission.created_at; |
|
h3El.innerText = |
|
`${submission.name} schreef op ${dt.toLocaleString(DateTime.DATE_HUGE)} het volgende `; |
|
return h3El; |
|
} |
|
|
|
function createMessage(submission) { |
|
const pEl = document.createElement('p'); |
|
pEl.classList.add('guestbook-messsage') |
|
pEl.innerText = submission.message; |
|
return pEl; |
|
} |
|
|
|
function createSubmission(submission) { |
|
const el = document.createElement("div"); |
|
el.id = "guestbookSubmission_" + submission.id; |
|
|
|
const titleEl = createTitle(submission); |
|
const messageEl = createMessage(submission); |
|
|
|
el.appendChild(titleEl); |
|
el.appendChild(messageEl); |
|
return el; |
|
} |
|
|
|
const renderSubmissions = () => { |
|
const output = document.querySelector("#guestbookOutput"); |
|
output.innerHTML = ""; |
|
|
|
getSubmissions(output).then((submissions) => { |
|
submissions.forEach((submission) => { |
|
output.appendChild(createSubmission(submission)); |
|
}); |
|
}); |
|
}; |
|
|
|
renderSubmissions(); |