Giorgio Gilestro
a9b7d4d8bb
Replace the multi-row wizard-style form (Ticker / Qty on row 1, mode radios on row 2, Date+Cost on row 3) with a single horizontal strip that sits unobtrusively above the portfolio table. The radio toggle is gone; a small calendar icon next to the Cost input pops out a date picker that auto-fills cost on selection and then hides itself. Same input IDs, so the existing validate/Add/× handlers work unchanged. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
133 lines
5.4 KiB
HTML
133 lines
5.4 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ BRAND_NAME }} · Dashboard{% endblock %}
|
|
|
|
{% block main %}
|
|
<div id="dash-header-container"
|
|
style="grid-column: 1 / -1;"
|
|
hx-get="/api/summary/aggregate?as=html"
|
|
hx-trigger="load, every 300s, tone-changed"
|
|
hx-swap="innerHTML">
|
|
<div class="empty">loading aggregate read…</div>
|
|
</div>
|
|
|
|
<section id="indicators-panel" class="panel">
|
|
<div class="panel-header">
|
|
<span class="title">Indicators</span>
|
|
<span class="meta">{% if anchor %}anchor {{ anchor }} · {% endif %}ingest hourly @ :05 UTC</span>
|
|
</div>
|
|
<div class="group-tabs" id="group-tabs">
|
|
{% for g in groups %}
|
|
<button
|
|
class="{% if loop.first %}active{% endif %}"
|
|
hx-get="/api/indicators/{{ g }}?as=html"
|
|
hx-target="#indicators-body"
|
|
hx-trigger="click"
|
|
onclick="document.querySelectorAll('#group-tabs button').forEach(b=>b.classList.remove('active'));this.classList.add('active')"
|
|
>{{ g }}</button>
|
|
{% endfor %}
|
|
</div>
|
|
<div id="indicators-body"
|
|
class="panel-body panel-body--scroll"
|
|
hx-get="/api/indicators/{{ groups[0] }}?as=html"
|
|
hx-trigger="load, tone-changed"
|
|
hx-swap="innerHTML">
|
|
<div class="empty">loading…</div>
|
|
</div>
|
|
</section>
|
|
<script>
|
|
// Auto-refresh the *currently selected* group every 60s by simulating a
|
|
// click on the active tab. Replaces the hard-coded `every 60s` on
|
|
// #indicators-body which always re-fetched groups[0].
|
|
setInterval(function () {
|
|
var active = document.querySelector('#group-tabs button.active');
|
|
if (active) active.click();
|
|
}, 60000);
|
|
</script>
|
|
|
|
<section id="portfolio-panel" class="panel">
|
|
<div class="panel-header">
|
|
<span class="title">Portfolio</span>
|
|
<span class="meta">held locally · prices via /api/universe</span>
|
|
<button type="button" id="pf-edit-btn" class="pf-edit-btn"
|
|
title="Add or remove positions" aria-pressed="false">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" aria-hidden="true">
|
|
<path d="M12 20h9"/>
|
|
<path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
|
|
</svg>
|
|
<span class="pf-edit-btn__label">Edit</span>
|
|
</button>
|
|
<button type="button" id="pf-done-btn" class="pf-done-btn" hidden>Done</button>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div id="pf-add-form" class="pf-add-form" hidden>
|
|
<div class="pf-add-strip">
|
|
<input type="text" id="pf-add-ticker" class="pf-add-input pf-add-input--ticker"
|
|
autocomplete="off" spellcheck="false" maxlength="32"
|
|
placeholder="Ticker">
|
|
<input type="number" id="pf-add-qty" class="pf-add-input pf-add-input--qty"
|
|
min="0" step="any" placeholder="Qty">
|
|
<span class="pf-add-cost-wrap">
|
|
<input type="number" id="pf-add-cost" class="pf-add-input pf-add-input--cost"
|
|
min="0" step="any" placeholder="Cost / share">
|
|
<span id="pf-add-cost-currency" class="pf-add-currency"></span>
|
|
<button type="button" id="pf-add-date-btn" class="pf-add-icon-btn"
|
|
title="Auto-fill from historical date" aria-label="Pick date">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" aria-hidden="true">
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
|
|
<line x1="16" y1="2" x2="16" y2="6"/>
|
|
<line x1="8" y1="2" x2="8" y2="6"/>
|
|
<line x1="3" y1="10" x2="21" y2="10"/>
|
|
</svg>
|
|
</button>
|
|
<input type="date" id="pf-add-date" class="pf-add-input pf-add-input--date" hidden>
|
|
</span>
|
|
<button type="button" id="pf-add-submit" class="pf-add-submit"
|
|
disabled title="Add position">+</button>
|
|
</div>
|
|
<div class="pf-add-meta">
|
|
<span id="pf-add-ticker-status" class="pf-add-status"></span>
|
|
<span id="pf-add-date-status" class="pf-add-status"></span>
|
|
</div>
|
|
<div id="pf-add-warning" class="pf-add-warning" hidden></div>
|
|
</div>
|
|
<div id="pf-mount">
|
|
<div class="empty">loading…</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script src="{{ url_for('static', path='/js/portfolio-sync.js') }}" defer></script>
|
|
<script src="{{ url_for('static', path='/js/portfolio.js') }}" defer></script>
|
|
<script src="{{ url_for('static', path='/js/portfolio_edit.js') }}" defer></script>
|
|
|
|
<section id="log-panel" class="panel">
|
|
<div class="panel-header">
|
|
<span class="title">Strategic Log</span>
|
|
<span class="meta">
|
|
{% if paid %}refreshed hourly @ :20 UTC{% else %}refreshed every 6 hours · <a href="/pricing">hourly on Paid</a>{% endif %}
|
|
</span>
|
|
</div>
|
|
<div class="panel-body"
|
|
hx-get="/api/log/latest?as=html"
|
|
hx-trigger="load, every 300s, tone-changed"
|
|
hx-swap="innerHTML">
|
|
<div class="empty">awaiting first log…</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="news-panel" class="panel">
|
|
<div class="panel-header">
|
|
<span class="title">Flash News</span>
|
|
<span class="meta">
|
|
{% if paid %}last 24h · ingest hourly @ :10 UTC{% else %}last 6h · <a href="/pricing">full 24h on Paid</a>{% endif %}
|
|
</span>
|
|
</div>
|
|
<div class="panel-body panel-body--scroll"
|
|
hx-get="/api/news?as=html&limit=40"
|
|
hx-trigger="load, every 60s, tags-changed"
|
|
hx-swap="innerHTML">
|
|
<div class="empty">loading…</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|