diff --git a/app/index.html b/app/index.html index 2304702..e406223 100644 --- a/app/index.html +++ b/app/index.html @@ -865,11 +865,36 @@ function render() { totals.appendChild(grandRow); actCard.appendChild(totals); - const actionRow = el('div', {style:{display:'flex', gap:'12px', marginTop:'16px', flexWrap:'wrap'}}); - const saveBtn = el('button', {className:'kb-btn kb-btn--soft', onClick: onSave}, 'Save form'); - const genBtn = el('button', {className:'kb-btn kb-btn--primary kb-btn--lg', id:'gen-btn', style:{flex:'1'}, onClick: onGenerate}); - genBtn.innerHTML = `Generate PDF`; - actionRow.append(saveBtn, genBtn); + const actionRow = el('div', {style:{display:'flex', gap:'10px', marginTop:'16px'}}); + + const saveBtn = el('button', {className:'kb-btn kb-btn--ghost', style:{flex:'0 0 20%'}, onClick: onSave}, 'Save'); + + const validateBtn = el('button', {className:'kb-btn kb-btn--ghost', style:{flex:'0 0 20%'}}); + validateBtn.textContent = 'Validate'; + validateBtn.addEventListener('click', () => { + const valBox = $('#val-box'); + valBox.innerHTML = ''; + const errs = validate(); + if (errs.length) { + const note = el('div', {className:'kb-note kb-note--error'}); + note.innerHTML = ``; + const txt = el('div'); + txt.innerHTML = 'Please fix the following:
' + errs.join('
'); + note.appendChild(txt); + valBox.appendChild(note); + valBox.scrollIntoView({behavior:'smooth'}); + } else { + const note = el('div', {className:'kb-note kb-note--success'}); + note.innerHTML = `
All good. The form is ready to download.
`; + valBox.appendChild(note); + valBox.scrollIntoView({behavior:'smooth'}); + } + }); + + const genBtn = el('button', {className:'kb-btn kb-btn--primary kb-btn--lg', id:'gen-btn', style:{flex:'0 0 calc(60% - 20px)'}, onClick: onGenerate}); + genBtn.innerHTML = `Download reimbursement form`; + + actionRow.append(saveBtn, validateBtn, genBtn); actCard.appendChild(actionRow); wrap.appendChild(actCard);