nngo/Personal-Finance-Management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

06/02 Modified transaction, transaction type switchable

Browse Source
This commit is contained in:
nngo
2026-06-02 10:30:47 -04:00
parent 04649530f7
commit ced33495ac
2 changed files with 95 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/transactions/form.html
+58 -3
View File
@@ -57,11 +57,28 @@
</div>
<!-- Transaction Form -->
<div class="pcard" style="border-top: 4px solid {% if txn_type=='income' %}var(--income){% else %}var(--expense){% endif %};">
<div class="pcard" id="txnCard" style="border-top: 4px solid {% if txn_type=='income' %}var(--income){% else %}var(--expense){% endif %};">
<form method="POST" novalidate id="txnForm">
{{ form.hidden_tag() }}
{{ form.transaction_type() }}
<!-- Type toggle — only for income/expense (not transfer) -->
<div class="mb-3">
<label class="form-label fw-medium" style="font-size:13px;">Type</label>
<div class="d-flex gap-2">
<button type="button" id="toggleIncome" onclick="setTxnType('income')"
class="btn btn-sm flex-fill {% if txn_type=='income' %}btn-success{% else %}btn-outline-secondary{% endif %}"
style="font-size:13px;">
<i class="bi bi-arrow-down-circle me-1"></i>Income
</button>
<button type="button" id="toggleExpense" onclick="setTxnType('expense')"
class="btn btn-sm flex-fill {% if txn_type=='expense' %}btn-danger{% else %}btn-outline-secondary{% endif %}"
style="font-size:13px;">
<i class="bi bi-arrow-up-circle me-1"></i>Expense
</button>
</div>
</div>
<div class="mb-3">
{{ form.description.label(class="form-label fw-medium", style="font-size:13px;") }}
{{ form.description(class="form-control" + (" is-invalid" if form.description.errors else ""),
@@ -103,10 +120,11 @@
</div>
<div class="d-flex gap-2">
<button type="submit" class="btn {% if txn_type=='income' %}btn-success{% else %}btn-danger{% endif %}">
<button type="submit" id="submitBtn"
class="btn {% if txn_type=='income' %}btn-success{% else %}btn-danger{% endif %}">
Save {{ txn_type | title }}
</button>
<a href="{{ url_for('transactions.index', tab=txn_type) }}" class="btn btn-outline-secondary">Cancel</a>
<a id="cancelLink" href="{{ url_for('transactions.index', tab=txn_type) }}" class="btn btn-outline-secondary">Cancel</a>
</div>
</form>
@@ -370,5 +388,42 @@ function autoOcrOnUpload(input) {
if (panel) { panel.style.display = 'block'; document.getElementById('ocrChevron').className = 'bi bi-chevron-up'; }
runOcr(file);
}
// ── Transaction type toggle ───────────────────────────────────────────────────
const incomeCats = {{ income_cats | tojson }};
const expenseCats = {{ expense_cats | tojson }};
function setTxnType(type) {
// Update hidden field
document.querySelector('[name=transaction_type]').value = type;
// Toggle button styles
const incBtn = document.getElementById('toggleIncome');
const expBtn = document.getElementById('toggleExpense');
incBtn.className = 'btn btn-sm flex-fill ' + (type === 'income' ? 'btn-success' : 'btn-outline-secondary');
expBtn.className = 'btn btn-sm flex-fill ' + (type === 'expense' ? 'btn-danger' : 'btn-outline-secondary');
// Card border + submit button
document.getElementById('txnCard').style.borderTopColor = type === 'income' ? 'var(--income)' : 'var(--expense)';
const submitBtn = document.getElementById('submitBtn');
submitBtn.className = 'btn ' + (type === 'income' ? 'btn-success' : 'btn-danger');
submitBtn.textContent = 'Save ' + (type === 'income' ? 'Income' : 'Expense');
// Update cancel link tab param
const cancelLink = document.getElementById('cancelLink');
if (cancelLink) {
cancelLink.href = cancelLink.href.replace(/([\?&]tab=)[^&]*/, '$1' + type);
}
// Swap category options, preserving current selection if still valid
const sel = document.getElementById('field_category');
const prevVal = sel.value;
const cats = type === 'income' ? incomeCats : expenseCats;
sel.innerHTML = '<option value="">— None —</option>' +
cats.map(c => `<option value="${c.id}">${c.name}</option>`).join('');
if (prevVal && cats.some(c => c.id === prevVal)) {
sel.value = prevVal;
}
}
</script>
{% endblock %}