Goal-Calibration/public/js/home.js

55 lines
1.7 KiB
JavaScript

document.addEventListener('DOMContentLoaded', () => {
const textsList = document.getElementById('texts-list');
const createPlanModal = document.getElementById('create-plan-modal');
async function loadTexts() {
const response = await fetch('/api/texts');
const texts = await response.json();
textsList.innerHTML = texts
.map(text =>
'<li>' + text.name +
' <button class="create-plan" data-text-id="' +
text.id + '">Create plan</button></li>'
)
.join('');
}
const cancelPlanButton = createPlanModal.querySelector(
'button.cancel-plan'
);
const planNameInput = createPlanModal.querySelector('input.plan-name');
const planDateStartInput = createPlanModal.querySelector(
'input.plan-date-start'
);
const planDateEndInput = createPlanModal.querySelector(
'input.plan-date-end'
);
function openCreatePlanModal(textId) {
createPlanModal.dataset.textId = textId;
createPlanModal.hidden = false;
}
function closeCreatePlanModal() {
createPlanModal.hidden = true;
planNameInput.value = '';
planDateStartInput.value = '';
planDateEndInput.value = '';
}
textsList.addEventListener('click', (clickEvent) => {
const createPlanButton = clickEvent.target.closest(
'button.create-plan'
);
if (createPlanButton === null) {
return;
}
openCreatePlanModal(createPlanButton.dataset.textId);
});
cancelPlanButton.addEventListener('click', () => {
closeCreatePlanModal();
});
loadTexts();
});