86 lines
3.1 KiB
JavaScript
86 lines
3.1 KiB
JavaScript
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const holesToggle = document.getElementById('holesToggle');
|
|
const scoreTable = document.getElementById('scoreTable');
|
|
const form = document.getElementById('scoreForm');
|
|
|
|
if (!holesToggle || !scoreTable || !form) return;
|
|
|
|
const updateTotal = () => {
|
|
let totalScore = 0;
|
|
let totalPutts = 0;
|
|
let totalPenalties = 0;
|
|
let totalSandLies = 0;
|
|
|
|
const holes = holesToggle.checked ? 18 : 9;
|
|
|
|
for (let i = 1; i <= holes; i++) {
|
|
const score = parseInt(document.getElementById(`hole${i}_score`).value) || 0;
|
|
const putts = parseInt(document.getElementById(`hole${i}_putts`).value) || 0;
|
|
const penalties = parseInt(document.getElementById(`hole${i}_penalties`).value) || 0;
|
|
const sandLie = document.getElementById(`hole${i}_sand`).checked;
|
|
|
|
totalScore += score;
|
|
totalPutts += putts;
|
|
totalPenalties += penalties;
|
|
if (sandLie) totalSandLies++;
|
|
}
|
|
|
|
document.getElementById('totalScore').textContent = totalScore;
|
|
document.getElementById('totalPutts').textContent = totalPutts;
|
|
document.getElementById('totalPenalties').textContent = totalPenalties;
|
|
document.getElementById('totalSandLies').textContent = totalSandLies;
|
|
};
|
|
|
|
const renderTable = () => {
|
|
const holes = holesToggle.checked ? 18 : 9;
|
|
let html = '';
|
|
for (let i = 1; i <= 18; i++) {
|
|
const hidden = i > holes ? ' style="display: none;"' : '';
|
|
html += `
|
|
<tr id="hole_row_${i}" ${hidden}>
|
|
<th scope="row">${i}</th>
|
|
<td><input type="number" class="form-control" id="hole${i}_score" min="1"></td>
|
|
<td><input type="number" class="form-control" id="hole${i}_putts" min="0"></td>
|
|
<td><input type="number" class="form-control" id="hole${i}_penalties" min="0"></td>
|
|
<td><div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="hole${i}_sand"></div></td>
|
|
</tr>
|
|
`;
|
|
}
|
|
scoreTable.innerHTML = html;
|
|
attachInputListeners();
|
|
};
|
|
|
|
const attachInputListeners = () => {
|
|
form.querySelectorAll('input').forEach(input => {
|
|
input.addEventListener('input', updateTotal);
|
|
});
|
|
};
|
|
|
|
holesToggle.addEventListener('change', () => {
|
|
const holes = holesToggle.checked ? 18 : 9;
|
|
for (let i = 1; i <= 18; i++) {
|
|
const row = document.getElementById(`hole_row_${i}`);
|
|
if (row) {
|
|
row.style.display = i > holes ? 'none' : 'table-row';
|
|
}
|
|
}
|
|
updateTotal();
|
|
});
|
|
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const successToast = document.getElementById('successToast');
|
|
if (successToast) {
|
|
const toast = new bootstrap.Toast(successToast);
|
|
toast.show();
|
|
}
|
|
form.reset();
|
|
renderTable();
|
|
updateTotal();
|
|
});
|
|
|
|
renderTable();
|
|
updateTotal();
|
|
});
|