116 lines
3.4 KiB
HTML
116 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Party Signup 🎉</title>
|
|
<style>
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 600px;
|
|
}
|
|
th, td {
|
|
border-collapse: collapse;
|
|
border: 1px solid black;
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Party Signup 🎉</h1>
|
|
<p>A simple list of people and what they're bringing!</p>
|
|
|
|
<table id="entries-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Bringing</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3>Register below!</h3>
|
|
<div>
|
|
<label for="name-input">Name</label>
|
|
<input id="name-input" />
|
|
</div>
|
|
<div>
|
|
<label for="comment-input">What are you bringing?</label>
|
|
<input id="comment-input" />
|
|
</div>
|
|
<div>
|
|
<button type="button" id="register-button">Register</button>
|
|
</div>
|
|
|
|
<script>
|
|
const partyName = "grace-birthday"
|
|
const entriesTable = document.getElementById("entries-table")
|
|
const tableBody = entriesTable.getElementsByTagName("tbody")[0]
|
|
const nameInput = document.getElementById("name-input")
|
|
const commentInput = document.getElementById("comment-input")
|
|
const registerButton = document.getElementById("register-button")
|
|
|
|
registerButton.onclick = addEntry
|
|
nameInput.onchange = validateInput
|
|
nameInput.onkeyup = validateInput
|
|
commentInput.onchange = validateInput
|
|
commentInput.onkeyup = validateInput
|
|
validateInput()
|
|
|
|
window.onload = () => {
|
|
loadEntries()
|
|
}
|
|
|
|
|
|
async function loadEntries() {
|
|
tableBody.innerHTML = ''
|
|
const response = await fetch("http://localhost:8080?party=" + partyName)
|
|
if (!response.ok) {
|
|
console.error(await response.text())
|
|
} else {
|
|
for (const entry of await response.json()) {
|
|
const row = document.createElement("tr")
|
|
const td1 = document.createElement("td")
|
|
td1.innerText = entry.name
|
|
const td2 = document.createElement("td")
|
|
td2.innerText = entry.comment
|
|
row.appendChild(td1)
|
|
row.appendChild(td2)
|
|
tableBody.appendChild(row)
|
|
}
|
|
}
|
|
}
|
|
|
|
async function addEntry() {
|
|
const name = nameInput.value
|
|
const comment = commentInput.value
|
|
const payload = {
|
|
name: name,
|
|
comment: comment,
|
|
partyName: partyName
|
|
}
|
|
const response = await fetch("http://localhost:8080", {
|
|
method: "POST",
|
|
body: JSON.stringify(payload)
|
|
})
|
|
if (!response.ok) {
|
|
console.error(await response.text())
|
|
} else {
|
|
nameInput.value = ''
|
|
commentInput.value = ''
|
|
validateInput()
|
|
await loadEntries()
|
|
}
|
|
}
|
|
|
|
function validateInput() {
|
|
const name = nameInput.value
|
|
const comment = commentInput.value
|
|
const valid = name.trim().length >= 3 && comment.trim().length >= 3
|
|
console.log(valid)
|
|
registerButton.disabled = !valid
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |