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

View File

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