Files
Personal-Finance-Management/app/templates/investments/form.html
T
2026-05-31 21:39:18 -04:00

98 lines
4.7 KiB
HTML

{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block page_title %}{{ title }}{% endblock %}
{% block content %}
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-6">
<div class="pcard">
<form method="POST" novalidate>
{{ form.hidden_tag() }}
<div class="mb-3">
{{ form.asset_name.label(class="form-label fw-medium", style="font-size:13px;") }}
{{ form.asset_name(class="form-control" + (" is-invalid" if form.asset_name.errors else ""),
placeholder="e.g. Apple Inc., Bitcoin, Vanguard S&P 500") }}
{% for e in form.asset_name.errors %}<div class="invalid-feedback">{{ e }}</div>{% endfor %}
</div>
<div class="row g-3 mb-3">
<div class="col-6">
{{ form.asset_type.label(class="form-label fw-medium", style="font-size:13px;") }}
{{ form.asset_type(class="form-select") }}
</div>
<div class="col-6">
{{ form.ticker.label(class="form-label fw-medium", style="font-size:13px;") }}
<div class="input-group">
{{ form.ticker(class="form-control", placeholder="AAPL", id="tickerInput", style="text-transform:uppercase;") }}
<button type="button" class="btn btn-outline-secondary" id="checkTicker" style="font-size:12px;">Check</button>
</div>
<div id="tickerResult" style="font-size:12px;margin-top:4px;"></div>
<small class="text-muted" style="font-size:11px;">Yahoo Finance format. e.g. AAPL, BTC-USD, ETH-USD</small>
</div>
</div>
{% if inv %}
<div class="mb-3 p-3" style="background:#f0fdf4;border-radius:8px;border:1px solid #bbf7d0;">
<div style="font-size:12px;font-weight:600;color:#166534;margin-bottom:10px;">
<i class="bi bi-pencil-square me-1"></i>Manual Override — Shares & Cost Basis
</div>
<div class="row g-3">
<div class="col-6">
{{ form.shares.label(class="form-label fw-medium", style="font-size:13px;") }}
{{ form.shares(class="form-control", placeholder="e.g. 10.5", id="sharesOverride") }}
<small class="text-muted" style="font-size:11px;">Current: {{ inv.shares | shares }}</small>
</div>
<div class="col-6">
{{ form.avg_cost_basis.label(class="form-label fw-medium", style="font-size:13px;") }}
<div class="input-group">
<span class="input-group-text" style="font-size:12px;">{{ current_user.currency_symbol }}</span>
{{ form.avg_cost_basis(class="form-control", placeholder="e.g. 150.25") }}
</div>
<small class="text-muted" style="font-size:11px;">Current: {{ inv.avg_cost_basis | currency }}</small>
</div>
</div>
<div style="font-size:11px;color:#166534;margin-top:8px;">
<i class="bi bi-info-circle me-1"></i>
Leave at current values to keep unchanged. These override the transaction log calculation.
</div>
</div>
{% endif %}
<div class="mb-4">
{{ form.notes.label(class="form-label fw-medium", style="font-size:13px;") }}
{{ form.notes(class="form-control", rows=2, placeholder="Optional notes") }}
</div>
<div class="d-flex gap-2">
{{ form.submit(class="btn btn-primary") }}
<a href="{{ url_for('investments.index') }}" class="btn btn-outline-secondary">Cancel</a>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script>
document.getElementById('checkTicker').addEventListener('click', function() {
const ticker = document.getElementById('tickerInput').value.trim().toUpperCase();
const result = document.getElementById('tickerResult');
if (!ticker) { result.textContent = ''; return; }
result.innerHTML = '<span class="text-muted">Fetching…</span>';
fetch('/investments/api/price/' + encodeURIComponent(ticker))
.then(r => r.json())
.then(data => {
if (data.price) {
result.innerHTML = '<span class="text-success"><i class="bi bi-check-circle me-1"></i>' + ticker + ' → {{ current_user.currency_symbol }}' + data.price.toFixed(4) + '</span>';
} else {
result.innerHTML = '<span class="text-danger"><i class="bi bi-x-circle me-1"></i>Ticker not found or no data</span>';
}
})
.catch(() => { result.innerHTML = '<span class="text-warning">Could not fetch price</span>'; });
});
</script>
{% endblock %}