100 lines
3.2 KiB
JavaScript
100 lines
3.2 KiB
JavaScript
let data = {};
|
|
|
|
function fetchData() {
|
|
fetch('/api/data').then(r => r.json()).then(d => {
|
|
data = d;
|
|
renderTable();
|
|
});
|
|
}
|
|
|
|
function saveData() {
|
|
fetch('/api/data', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(data)
|
|
});
|
|
}
|
|
|
|
function renderTable() {
|
|
const container = document.getElementById('attendance-table');
|
|
container.innerHTML = '';
|
|
const table = document.createElement('table');
|
|
// Header row
|
|
const thead = document.createElement('thead');
|
|
const headRow = document.createElement('tr');
|
|
headRow.appendChild(document.createElement('th')).innerText = 'Date';
|
|
data.players.forEach((name, i) => {
|
|
const th = document.createElement('th');
|
|
th.innerText = name;
|
|
headRow.appendChild(th);
|
|
});
|
|
// Guest column
|
|
const guestTh = document.createElement('th');
|
|
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
|
|
const dateTd = document.createElement('td');
|
|
dateTd.innerText = date;
|
|
tr.appendChild(dateTd);
|
|
// Player attendance
|
|
[...data.players, data.guest].forEach((player, colIdx) => {
|
|
const td = document.createElement('td');
|
|
td.className = 'clickable';
|
|
const key = `${date}|${colIdx}`;
|
|
if (data.attendance[key]) {
|
|
td.innerText = 'Yes';
|
|
td.classList.add('yes');
|
|
} else {
|
|
td.innerText = '';
|
|
}
|
|
td.onclick = () => {
|
|
if (data.attendance[key]) {
|
|
delete data.attendance[key];
|
|
} else {
|
|
data.attendance[key] = true;
|
|
}
|
|
saveData();
|
|
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);
|
|
container.appendChild(table);
|
|
}
|
|
|
|
document.getElementById('add-date').onclick = function() {
|
|
const date = prompt('Enter date (DD/MM/YY):');
|
|
if (date && !data.dates.includes(date)) {
|
|
data.dates.push(date);
|
|
saveData();
|
|
renderTable();
|
|
}
|
|
};
|
|
|
|
window.onload = fetchData;
|