feat: add guest name tracking and implement client-side attendance table UI

This commit is contained in:
Greg 2025-05-10 12:34:07 +02:00
parent d8c5448bc5
commit d120f11a7d
2 changed files with 24 additions and 11 deletions

View File

@ -1,7 +1,8 @@
{
"attendance": {
"08/05/25|4": true,
"08/05/25|8": true,
"08/05/25|4": true
"5=5|8": true
},
"dates": [
"08/05/25",
@ -17,5 +18,8 @@
"Frank",
"Grace",
"Hannah"
]
],
"guestNames": {
"08/05/25": "Robert"
}
}

View File

@ -30,20 +30,17 @@ function renderTable() {
});
// Guest column
const guestTh = document.createElement('th');
const guestInput = document.createElement('input');
guestInput.type = 'text';
guestInput.value = data.guest;
guestInput.onchange = e => {
data.guest = e.target.value;
saveData();
renderTable();
};
guestTh.appendChild(guestInput);
guestTh.innerText = data.guest || 'Guest';
headRow.appendChild(guestTh);
// Guest Name column (per date)
const guestNameTh = document.createElement('th');
guestNameTh.innerText = 'Guest Name';
headRow.appendChild(guestNameTh);
thead.appendChild(headRow);
table.appendChild(thead);
// Body rows
const tbody = document.createElement('tbody');
if (!data.guestNames) data.guestNames = {};
data.dates.forEach((date, rowIdx) => {
const tr = document.createElement('tr');
// Date cell
@ -72,6 +69,18 @@ function renderTable() {
};
tr.appendChild(td);
});
// Guest Name column (input per date)
const guestNameTd = document.createElement('td');
const guestNameInput = document.createElement('input');
guestNameInput.type = 'text';
guestNameInput.value = data.guestNames[date] || '';
guestNameInput.placeholder = 'Enter guest name';
guestNameInput.onchange = e => {
data.guestNames[date] = e.target.value;
saveData();
};
guestNameTd.appendChild(guestNameInput);
tr.appendChild(guestNameTd);
tbody.appendChild(tr);
});
table.appendChild(tbody);