admin/homelab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: replace month input with month/year dropdowns in goal modal

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gonçalo Rodrigues 2026-06-13 16:28:58 +01:00
parent be0c2bd89e
commit 99be71be8a
1 changed files with 56 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
apps/finance/services/api/main/templates/goals.html
View File

@ -155,19 +155,39 @@
</p> </p>
</div> </div>
<div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;"> <div>
<div> <label style="font-size:12px; color:var(--text2); display:block; margin-bottom:6px;">Target amount (€)</label>
<label style="font-size:12px; color:var(--text2); display:block; margin-bottom:6px;">Target amount (€)</label> <input name="target_euros" type="number" min="1" step="0.01" required placeholder="500"
<input name="target_euros" type="number" min="1" step="0.01" required placeholder="500" style="width:100%; padding:9px 12px; background:var(--bg3); border:1px solid var(--border);
style="width:100%; padding:9px 12px; background:var(--bg3); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:14px;">
border-radius:8px; color:var(--text); font-size:14px;"> </div>
</div>
<div> <div>
<label style="font-size:12px; color:var(--text2); display:block; margin-bottom:6px;">Target date</label> <label style="font-size:12px; color:var(--text2); display:block; margin-bottom:6px;">Target date</label>
<input name="deadline" type="month" required <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
style="width:100%; padding:9px 12px; background:var(--bg3); border:1px solid var(--border); <select id="deadline-month"
border-radius:8px; color:var(--text); font-size:14px;"> style="padding:9px 12px; background:var(--bg3); border:1px solid var(--border);
border-radius:8px; color:var(--text); font-size:14px;">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="deadline-year"
style="padding:9px 12px; background:var(--bg3); border:1px solid var(--border);
border-radius:8px; color:var(--text); font-size:14px;">
</select>
</div> </div>
<!-- hidden field submitted to server -->
<input type="hidden" name="deadline" id="deadline-value">
</div> </div>
<div style="display:flex; gap:10px; justify-content:flex-end; margin-top:4px;"> <div style="display:flex; gap:10px; justify-content:flex-end; margin-top:4px;">
@ -190,6 +210,30 @@ function updateTypeHint(v) {
document.getElementById('type-hint').textContent = typeHints[v] || ''; document.getElementById('type-hint').textContent = typeHints[v] || '';
} }
// populate year dropdown: current year + 10 years ahead
(function() {
const now = new Date();
const yearSel = document.getElementById('deadline-year');
const monthSel = document.getElementById('deadline-month');
for (let y = now.getFullYear(); y <= now.getFullYear() + 10; y++) {
const opt = document.createElement('option');
opt.value = String(y);
opt.textContent = String(y);
yearSel.appendChild(opt);
}
// default month to next month
const nextMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1);
monthSel.value = String(nextMonth.getMonth() + 1).padStart(2, '0');
yearSel.value = String(nextMonth.getFullYear());
})();
// wire hidden field before submit
document.querySelector('#new-goal-modal form').addEventListener('submit', function() {
const m = document.getElementById('deadline-month').value;
const y = document.getElementById('deadline-year').value;
document.getElementById('deadline-value').value = y + '-' + m;
});
// close modal on backdrop click // close modal on backdrop click
document.getElementById('new-goal-modal').addEventListener('click', function(e) { document.getElementById('new-goal-modal').addEventListener('click', function(e) {
if (e.target === this) this.style.display = 'none'; if (e.target === this) this.style.display = 'none';