first commit
This commit is contained in:
@@ -0,0 +1,127 @@
|
||||
package web
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"strconv"
|
||||
"strings"
|
||||
"time"
|
||||
)
|
||||
|
||||
var currencySymbols = map[string]string{
|
||||
"USD": "$", "GBP": "£", "EUR": "€", "JPY": "¥",
|
||||
}
|
||||
|
||||
func currencySymbol(currency string) string {
|
||||
if sym, ok := currencySymbols[currency]; ok {
|
||||
return sym
|
||||
}
|
||||
return currency + " "
|
||||
}
|
||||
|
||||
// money formats an amount in the given currency with thousands separators,
|
||||
// e.g. money(-1234.5, "GBP") -> "-£1,234.50".
|
||||
func money(v float64, currency string) string {
|
||||
neg := v < 0
|
||||
if neg {
|
||||
v = -v
|
||||
}
|
||||
s := strconv.FormatFloat(v, 'f', 2, 64)
|
||||
intPart, decPart, _ := strings.Cut(s, ".")
|
||||
var out []byte
|
||||
n := len(intPart)
|
||||
for i := 0; i < n; i++ {
|
||||
if i > 0 && (n-i)%3 == 0 {
|
||||
out = append(out, ',')
|
||||
}
|
||||
out = append(out, intPart[i])
|
||||
}
|
||||
res := currencySymbol(currency) + string(out) + "." + decPart
|
||||
if neg {
|
||||
res = "-" + res
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
// amt formats a crypto quantity, trimming trailing zeros.
|
||||
func amt(v float64) string {
|
||||
s := strconv.FormatFloat(v, 'f', 8, 64)
|
||||
s = strings.TrimRight(s, "0")
|
||||
s = strings.TrimRight(s, ".")
|
||||
if s == "" || s == "-" {
|
||||
s = "0"
|
||||
}
|
||||
return s
|
||||
}
|
||||
|
||||
func pctStr(v *float64) string {
|
||||
if v == nil {
|
||||
return "—"
|
||||
}
|
||||
sign := ""
|
||||
if *v > 0 {
|
||||
sign = "+"
|
||||
}
|
||||
return fmt.Sprintf("%s%.2f%%", sign, *v)
|
||||
}
|
||||
|
||||
func pctClass(v *float64) string {
|
||||
if v == nil {
|
||||
return "flat"
|
||||
}
|
||||
return signClass(*v)
|
||||
}
|
||||
|
||||
func signClass(v float64) string {
|
||||
if v > 0 {
|
||||
return "gain"
|
||||
}
|
||||
if v < 0 {
|
||||
return "loss"
|
||||
}
|
||||
return "flat"
|
||||
}
|
||||
|
||||
func dateStr(t time.Time) string {
|
||||
return t.Format("Jan 2, 2006")
|
||||
}
|
||||
|
||||
// capitalize upper-cases the first letter of an entry type ("withdrawal" -> "Withdrawal").
|
||||
func capitalize(s string) string {
|
||||
if s == "" {
|
||||
return s
|
||||
}
|
||||
return strings.ToUpper(s[:1]) + s[1:]
|
||||
}
|
||||
|
||||
// sortVal renders a float64 or *float64 as a plain number string for a
|
||||
// data-sort-value attribute, so the client-side table sort compares numbers
|
||||
// rather than formatted display text ("£1,234.56", "+3.21%", "—").
|
||||
func sortVal(v interface{}) string {
|
||||
switch x := v.(type) {
|
||||
case float64:
|
||||
return strconv.FormatFloat(x, 'f', -1, 64)
|
||||
case *float64:
|
||||
if x == nil {
|
||||
return ""
|
||||
}
|
||||
return strconv.FormatFloat(*x, 'f', -1, 64)
|
||||
default:
|
||||
return fmt.Sprint(v)
|
||||
}
|
||||
}
|
||||
|
||||
func holdDuration(t time.Time) string {
|
||||
days := int(time.Since(t).Hours() / 24)
|
||||
switch {
|
||||
case days < 1:
|
||||
return "<1 day"
|
||||
case days == 1:
|
||||
return "1 day"
|
||||
case days < 30:
|
||||
return fmt.Sprintf("%d days", days)
|
||||
case days < 365:
|
||||
return fmt.Sprintf("%d mo", days/30)
|
||||
default:
|
||||
return fmt.Sprintf("%.1f yr", float64(days)/365)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,779 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
var body = document.body;
|
||||
var tabbar = document.getElementById("tabbar");
|
||||
var panels = document.getElementById("tab-panels");
|
||||
var chartRangeState = {}; // targetKey -> last-picked range, survives panel refresh
|
||||
var chartModeState = {}; // targetKey -> "simple" | "advanced"
|
||||
var baseCurrencySymbol = body.dataset.currencySymbol || "";
|
||||
var pollMs = (parseInt(body.dataset.poll, 10) || 60) * 1000;
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// Formatting (mirrors internal/web/format.go closely enough for live ticks)
|
||||
// ---------------------------------------------------------------------
|
||||
|
||||
function fmtMoney(v) {
|
||||
var neg = v < 0;
|
||||
if (neg) v = -v;
|
||||
var s = v.toFixed(2);
|
||||
var parts = s.split(".");
|
||||
var intPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
return (neg ? "-" : "") + baseCurrencySymbol + intPart + "." + parts[1];
|
||||
}
|
||||
|
||||
function signClass(v) {
|
||||
return v > 0 ? "gain" : v < 0 ? "loss" : "flat";
|
||||
}
|
||||
|
||||
function flash(el) {
|
||||
el.classList.remove("flash");
|
||||
void el.offsetWidth;
|
||||
el.classList.add("flash");
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// Kraken public WebSocket v2 — live ticker for price/value/P&L, purely a
|
||||
// between-poll smoothing layer. REST panel refresh remains the source of
|
||||
// truth for deltas, charts, and everything else.
|
||||
// ---------------------------------------------------------------------
|
||||
|
||||
var wsSocket = null;
|
||||
var wsSubscribers = {}; // symbol -> [callback, ...]
|
||||
var lastTickAt = {}; // symbol -> ms, throttles DOM writes to ~1/sec
|
||||
|
||||
function sendSubscribe(symbols) {
|
||||
if (wsSocket && wsSocket.readyState === 1 && symbols.length) {
|
||||
wsSocket.send(JSON.stringify({ method: "subscribe", params: { channel: "ticker", symbol: symbols } }));
|
||||
}
|
||||
}
|
||||
|
||||
function ensureWebSocket() {
|
||||
if (wsSocket && (wsSocket.readyState === 0 || wsSocket.readyState === 1)) return wsSocket;
|
||||
try {
|
||||
wsSocket = new WebSocket("wss://ws.kraken.com/v2");
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
wsSocket.addEventListener("open", function () {
|
||||
sendSubscribe(Object.keys(wsSubscribers));
|
||||
});
|
||||
wsSocket.addEventListener("message", function (e) {
|
||||
var msg;
|
||||
try { msg = JSON.parse(e.data); } catch (err) { return; }
|
||||
if (msg.channel !== "ticker" || !msg.data) return;
|
||||
msg.data.forEach(function (tick) {
|
||||
var callbacks = wsSubscribers[tick.symbol];
|
||||
if (!callbacks || typeof tick.last !== "number") return;
|
||||
var now = Date.now();
|
||||
if (lastTickAt[tick.symbol] && now - lastTickAt[tick.symbol] < 1000) return;
|
||||
lastTickAt[tick.symbol] = now;
|
||||
callbacks.forEach(function (cb) { cb(tick.last); });
|
||||
});
|
||||
});
|
||||
wsSocket.addEventListener("close", function () {
|
||||
wsSocket = null;
|
||||
setTimeout(ensureWebSocket, 4000);
|
||||
});
|
||||
wsSocket.addEventListener("error", function () {
|
||||
try { wsSocket.close(); } catch (e) { /* ignore */ }
|
||||
});
|
||||
return wsSocket;
|
||||
}
|
||||
|
||||
function subscribeTicker(symbol, callback) {
|
||||
if (!symbol) return;
|
||||
var isNew = !wsSubscribers[symbol] || wsSubscribers[symbol].length === 0;
|
||||
if (!wsSubscribers[symbol]) wsSubscribers[symbol] = [];
|
||||
wsSubscribers[symbol].push(callback);
|
||||
var ws = ensureWebSocket();
|
||||
if (isNew && ws && ws.readyState === 1) sendSubscribe([symbol]);
|
||||
}
|
||||
|
||||
function wireLiveTicker(root) {
|
||||
// Dashboard rows: live price/value/P&L per currency.
|
||||
root.querySelectorAll("tr[data-ws-symbol]").forEach(function (tr) {
|
||||
var symbol = tr.dataset.wsSymbol;
|
||||
var holdings = parseFloat(tr.dataset.holdings) || 0;
|
||||
var cost = parseFloat(tr.dataset.cost) || 0;
|
||||
var fxRate = parseFloat(tr.dataset.fxRate) || 1;
|
||||
var priceCell = tr.querySelector('[data-field="price"]');
|
||||
var valueCell = tr.querySelector('[data-field="value"]');
|
||||
var plCell = tr.querySelector('[data-field="pl"]');
|
||||
|
||||
subscribeTicker(symbol, function (last) {
|
||||
var price = last * fxRate;
|
||||
var value = holdings * price;
|
||||
if (priceCell) priceCell.textContent = fmtMoney(price);
|
||||
if (valueCell) valueCell.textContent = fmtMoney(value);
|
||||
if (plCell) {
|
||||
var pl = value - cost;
|
||||
plCell.textContent = fmtMoney(pl);
|
||||
plCell.classList.remove("gain", "loss", "flat");
|
||||
plCell.classList.add(signClass(pl));
|
||||
}
|
||||
flash(tr);
|
||||
});
|
||||
});
|
||||
|
||||
// Position page hero: single currency, live value/P&L.
|
||||
var hero = root.querySelector("[data-ws-hero]");
|
||||
if (hero) {
|
||||
var symbol = hero.dataset.wsHero;
|
||||
var holdings = parseFloat(hero.dataset.holdings) || 0;
|
||||
var cost = parseFloat(hero.dataset.cost) || 0;
|
||||
var fxRate = parseFloat(hero.dataset.fxRate) || 1;
|
||||
var valueEl = hero.querySelector('[data-field="hero-value"]');
|
||||
var plEl = hero.querySelector('[data-field="hero-pl"]');
|
||||
subscribeTicker(symbol, function (last) {
|
||||
var value = holdings * last * fxRate;
|
||||
var pl = value - cost;
|
||||
if (valueEl) valueEl.textContent = fmtMoney(value);
|
||||
if (plEl) {
|
||||
var pct = cost ? (pl / cost * 100) : 0;
|
||||
var sign = pct >= 0 ? "+" : "";
|
||||
plEl.textContent = fmtMoney(pl) + " (" + sign + pct.toFixed(2) + "%)";
|
||||
plEl.classList.remove("gain", "loss", "flat");
|
||||
plEl.classList.add(signClass(pl));
|
||||
}
|
||||
flash(hero);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Topbar portfolio total: lives in base.html outside any tab panel, so it
|
||||
// is wired once here (not per-panel) and stays live across every page.
|
||||
// Server-rendered value is the initial paint; /api/summary refresh (every
|
||||
// poll cycle) keeps holdings/cost authoritative, and Kraken WS ticks
|
||||
// smooth the value in between polls.
|
||||
function initTopbar() {
|
||||
var valueEl = document.querySelector('[data-field="topbar-value"]');
|
||||
var plEl = document.querySelector('[data-field="topbar-pl"]');
|
||||
var wrap = document.querySelector('[data-topbar]') || (valueEl && valueEl.closest(".topbar-total"));
|
||||
if (!valueEl) return;
|
||||
|
||||
var positions = []; // {symbol, holdings, cost, fxRate, value}
|
||||
var subscribed = {}; // ws symbol -> true, so refresh() never double-subscribes
|
||||
|
||||
function render() {
|
||||
var total = 0, cost = 0;
|
||||
positions.forEach(function (p) { total += p.value; cost += p.cost; });
|
||||
var pl = total - cost;
|
||||
var pct = cost ? (pl / cost * 100) : 0;
|
||||
var sign = pct >= 0 ? "+" : "";
|
||||
valueEl.textContent = fmtMoney(total);
|
||||
if (plEl) {
|
||||
plEl.textContent = fmtMoney(pl) + " (" + sign + pct.toFixed(2) + "%)";
|
||||
plEl.classList.remove("gain", "loss", "flat");
|
||||
plEl.classList.add(signClass(pl));
|
||||
}
|
||||
}
|
||||
|
||||
function refresh() {
|
||||
fetch("/api/summary").then(function (r) { return r.json(); }).then(function (data) {
|
||||
positions = (data.positions || []).map(function (p) {
|
||||
return { symbol: p.ws_symbol, holdings: p.holdings, cost: p.cost, fxRate: p.fx_rate, value: p.value };
|
||||
});
|
||||
render();
|
||||
positions.forEach(function (p) {
|
||||
if (!p.symbol || subscribed[p.symbol]) return;
|
||||
subscribed[p.symbol] = true;
|
||||
subscribeTicker(p.symbol, function (last) {
|
||||
positions.forEach(function (q) {
|
||||
if (q.symbol === p.symbol) q.value = q.holdings * last * q.fxRate;
|
||||
});
|
||||
render();
|
||||
if (wrap) flash(wrap);
|
||||
});
|
||||
});
|
||||
}).catch(function () { /* transient error: keep last known values */ });
|
||||
}
|
||||
|
||||
refresh();
|
||||
setInterval(refresh, pollMs);
|
||||
}
|
||||
|
||||
function initPanel(root) {
|
||||
root.querySelectorAll(".chart-controls").forEach(function (controls) {
|
||||
var kind = controls.dataset.chart; // "portfolio" | "currency"
|
||||
var currency = controls.dataset.currency;
|
||||
var targetKey = kind === "portfolio" ? "portfolio" : "currency:" + currency;
|
||||
var svg = root.querySelector('[data-chart-target="' + targetKey + '"]');
|
||||
var emptyEl = root.querySelector('[data-chart-empty="' + targetKey + '"]');
|
||||
var captionEl = root.querySelector('[data-chart-caption="' + targetKey + '"]');
|
||||
if (!svg) return;
|
||||
var symbol = svg.dataset.symbol || "";
|
||||
if (emptyEl && emptyEl.dataset.defaultText === undefined) {
|
||||
emptyEl.dataset.defaultText = emptyEl.textContent;
|
||||
}
|
||||
|
||||
var load = function (range) {
|
||||
chartRangeState[targetKey] = range;
|
||||
var url = kind === "portfolio"
|
||||
? "/api/chart/portfolio?range=" + range
|
||||
: "/api/chart/currency/" + encodeURIComponent(currency) + "?range=" + range;
|
||||
fetchJSON(targetKey, url).then(function (points) {
|
||||
if (points === STALE) return;
|
||||
renderChart(svg, emptyEl, captionEl, points, symbol);
|
||||
}).catch(function (err) {
|
||||
showChartError(svg, emptyEl, captionEl, err);
|
||||
});
|
||||
};
|
||||
|
||||
controls.querySelectorAll("button[data-range]").forEach(function (btn) {
|
||||
btn.addEventListener("click", function () {
|
||||
controls.querySelectorAll("button").forEach(function (b) { b.classList.remove("active"); });
|
||||
btn.classList.add("active");
|
||||
load(btn.dataset.range);
|
||||
});
|
||||
});
|
||||
|
||||
var savedRange = chartRangeState[targetKey] || "all";
|
||||
controls.querySelectorAll("button[data-range]").forEach(function (b) {
|
||||
b.classList.toggle("active", b.dataset.range === savedRange);
|
||||
});
|
||||
load(savedRange);
|
||||
});
|
||||
|
||||
initAdvancedCharts(root);
|
||||
initSortableTables(root);
|
||||
wireLiveTicker(root);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// Shared fetch helper for chart/candle data: turns a non-2xx response
|
||||
// into a real error (so a rate-limit or server error surfaces instead of
|
||||
// silently failing to parse as JSON), and drops out-of-order responses
|
||||
// when the user switches timeframes faster than requests return.
|
||||
// ---------------------------------------------------------------------
|
||||
|
||||
var STALE = {};
|
||||
var requestToken = {};
|
||||
|
||||
function fetchJSON(key, url) {
|
||||
var token = (requestToken[key] = (requestToken[key] || 0) + 1);
|
||||
return fetch(url).then(function (r) {
|
||||
if (!r.ok) return r.text().then(function (t) { throw new Error(t || ("HTTP " + r.status)); });
|
||||
return r.json();
|
||||
}).then(function (data) {
|
||||
return requestToken[key] === token ? data : STALE;
|
||||
}, function (err) {
|
||||
if (requestToken[key] !== token) return STALE;
|
||||
throw err;
|
||||
});
|
||||
}
|
||||
|
||||
function friendlyChartError(err) {
|
||||
var msg = String((err && err.message) || err);
|
||||
if (msg.indexOf("Too many requests") !== -1) {
|
||||
return "Kraken rate-limited this request — it'll work again in a moment.";
|
||||
}
|
||||
return "Couldn't load chart data right now — try again shortly.";
|
||||
}
|
||||
|
||||
function showChartError(svg, emptyEl, captionEl, err) {
|
||||
svg.hidden = true;
|
||||
if (emptyEl) {
|
||||
emptyEl.hidden = false;
|
||||
emptyEl.textContent = friendlyChartError(err);
|
||||
}
|
||||
if (captionEl) captionEl.textContent = "";
|
||||
}
|
||||
|
||||
var svgns = "http://www.w3.org/2000/svg";
|
||||
|
||||
function fmtAxisDate(unixSeconds, spanSeconds) {
|
||||
var d = new Date(unixSeconds * 1000);
|
||||
if (spanSeconds > 400 * 24 * 3600) return d.toLocaleDateString(undefined, { month: "short", year: "2-digit" });
|
||||
if (spanSeconds > 3 * 24 * 3600) return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
|
||||
return d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
|
||||
}
|
||||
|
||||
function fmtAxisValue(v, symbol) {
|
||||
var sign = v < 0 ? "-" : "";
|
||||
var abs = Math.abs(v);
|
||||
var s = abs >= 1000 ? (abs / 1000).toFixed(1) + "k" : abs.toFixed(abs < 10 ? 4 : 2);
|
||||
return sign + symbol + s;
|
||||
}
|
||||
|
||||
function svgEl(tag, attrs) {
|
||||
var el = document.createElementNS(svgns, tag);
|
||||
for (var k in attrs) el.setAttribute(k, attrs[k]);
|
||||
return el;
|
||||
}
|
||||
|
||||
// Picks up to targetCount tick indices, evenly spaced by TIME (not by
|
||||
// array index — data can have irregular gaps, e.g. after a restart),
|
||||
// then drops any tick that lands within minPxGap of the previous one so
|
||||
// labels never overlap on dense data. xAtIndex(i) must return that
|
||||
// point's pixel x position.
|
||||
function pickTicks(points, targetCount, minPxGap, xAtIndex) {
|
||||
var t0 = points[0].t, t1 = points[points.length - 1].t;
|
||||
var span = t1 - t0 || 1;
|
||||
var chosen = [];
|
||||
var lastX = -Infinity;
|
||||
for (var i = 0; i < targetCount; i++) {
|
||||
var targetT = t0 + (i / (targetCount - 1 || 1)) * span;
|
||||
var best = 0, bestDiff = Infinity;
|
||||
for (var j = 0; j < points.length; j++) {
|
||||
var diff = Math.abs(points[j].t - targetT);
|
||||
if (diff < bestDiff) { bestDiff = diff; best = j; }
|
||||
}
|
||||
var x = xAtIndex(best);
|
||||
if (x - lastX < minPxGap) continue;
|
||||
chosen.push(best);
|
||||
lastX = x;
|
||||
}
|
||||
return chosen;
|
||||
}
|
||||
|
||||
function renderChart(svg, emptyEl, captionEl, points, symbol) {
|
||||
while (svg.firstChild) svg.removeChild(svg.firstChild);
|
||||
if (!points || points.length < 2) {
|
||||
if (emptyEl) {
|
||||
emptyEl.hidden = false;
|
||||
emptyEl.textContent = emptyEl.dataset.defaultText || emptyEl.textContent;
|
||||
}
|
||||
if (captionEl) captionEl.textContent = "";
|
||||
svg.hidden = true;
|
||||
return;
|
||||
}
|
||||
if (emptyEl) emptyEl.hidden = true;
|
||||
svg.hidden = false;
|
||||
|
||||
var W = 600, H = 220, ML = 68, MR = 12, MT = 12, MB = 26;
|
||||
var plotW = W - ML - MR, plotH = H - MT - MB;
|
||||
svg.setAttribute("viewBox", "0 0 " + W + " " + H);
|
||||
|
||||
var values = points.map(function (p) { return p.v; });
|
||||
var min = Math.min.apply(null, values), max = Math.max.apply(null, values);
|
||||
var range = (max - min) || Math.abs(max) || 1;
|
||||
var t0 = points[0].t, t1 = points[points.length - 1].t;
|
||||
var tSpan = (t1 - t0) || 1;
|
||||
|
||||
function xAt(t) { return ML + ((t - t0) / tSpan) * plotW; }
|
||||
function yAt(v) { return MT + (1 - (v - min) / range) * plotH; }
|
||||
|
||||
// Y gridlines + value labels (min, mid, max)
|
||||
[min, (min + max) / 2, max].forEach(function (v) {
|
||||
var y = yAt(v);
|
||||
svg.appendChild(svgEl("line", { x1: ML, x2: W - MR, y1: y, y2: y, class: "chart-grid" }));
|
||||
var text = svgEl("text", { x: ML - 8, y: y, class: "chart-axis-label chart-axis-y" });
|
||||
text.textContent = fmtAxisValue(v, symbol);
|
||||
svg.appendChild(text);
|
||||
});
|
||||
|
||||
// X-axis date labels: evenly spaced by time, collision-avoided.
|
||||
pickTicks(points, 5, 70, function (i) { return xAt(points[i].t); }).forEach(function (idx) {
|
||||
var p = points[idx];
|
||||
var text = svgEl("text", { x: xAt(p.t), y: H - 6, class: "chart-axis-label chart-axis-x" });
|
||||
text.textContent = fmtAxisDate(p.t, tSpan);
|
||||
svg.appendChild(text);
|
||||
});
|
||||
|
||||
// Price/value line
|
||||
var coords = points.map(function (p) { return xAt(p.t).toFixed(2) + "," + yAt(p.v).toFixed(2); });
|
||||
var poly = svgEl("polyline", { points: coords.join(" ") });
|
||||
var trend = values[values.length - 1] === values[0] ? "flat" : (values[values.length - 1] > values[0] ? "gain" : "loss");
|
||||
poly.setAttribute("class", "chart-line " + trend);
|
||||
svg.appendChild(poly);
|
||||
|
||||
// Issue transparency: when a range shows the exact same span as "all"
|
||||
// available history, a shorter timeframe looks identical — say why.
|
||||
if (captionEl) {
|
||||
var spanDays = tSpan / 86400;
|
||||
var first = new Date(t0 * 1000).toLocaleDateString();
|
||||
var last = new Date(t1 * 1000).toLocaleDateString();
|
||||
captionEl.textContent = spanDays < 1
|
||||
? "Showing all recorded history (tracking started " + first + ") — longer ranges will look different once more history builds up."
|
||||
: "Showing " + first + " – " + last;
|
||||
}
|
||||
}
|
||||
|
||||
var sortState = {}; // sortKey -> {key, dir}
|
||||
|
||||
function cellSortValue(row, colIndex) {
|
||||
var cell = row.children[colIndex];
|
||||
if (!cell) return "";
|
||||
if (cell.dataset.sortValue !== undefined) {
|
||||
if (cell.dataset.sortValue === "") return -Infinity;
|
||||
var n = parseFloat(cell.dataset.sortValue);
|
||||
return isNaN(n) ? -Infinity : n;
|
||||
}
|
||||
return cell.textContent.trim().toLowerCase();
|
||||
}
|
||||
|
||||
function initSortableTables(root) {
|
||||
root.querySelectorAll("table.sortable[data-sort-key]").forEach(function (table) {
|
||||
var sortKey = table.dataset.sortKey;
|
||||
var tbody = table.querySelector("tbody");
|
||||
if (!tbody) return;
|
||||
|
||||
function applySort(colKey, dir) {
|
||||
var colIndex = -1;
|
||||
table.querySelectorAll("th[data-sort]").forEach(function (th) {
|
||||
th.classList.remove("sort-asc", "sort-desc");
|
||||
if (th.dataset.sort === colKey) {
|
||||
colIndex = Array.prototype.indexOf.call(th.parentElement.children, th);
|
||||
th.classList.add(dir === 1 ? "sort-asc" : "sort-desc");
|
||||
}
|
||||
});
|
||||
if (colIndex === -1) return;
|
||||
var rows = Array.prototype.slice.call(tbody.querySelectorAll("tr"));
|
||||
rows.sort(function (a, b) {
|
||||
var av = cellSortValue(a, colIndex), bv = cellSortValue(b, colIndex);
|
||||
if (av < bv) return -1 * dir;
|
||||
if (av > bv) return 1 * dir;
|
||||
return 0;
|
||||
});
|
||||
rows.forEach(function (r) { tbody.appendChild(r); });
|
||||
}
|
||||
|
||||
table.querySelectorAll("th[data-sort]").forEach(function (th) {
|
||||
th.addEventListener("click", function () {
|
||||
var key = th.dataset.sort;
|
||||
var prev = sortState[sortKey];
|
||||
var dir = prev && prev.key === key ? prev.dir * -1 : 1;
|
||||
sortState[sortKey] = { key: key, dir: dir };
|
||||
applySort(key, dir);
|
||||
});
|
||||
});
|
||||
|
||||
var saved = sortState[sortKey];
|
||||
if (saved) applySort(saved.key, saved.dir);
|
||||
});
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// Advanced chart: candlesticks + Bollinger Bands + RSI
|
||||
// ---------------------------------------------------------------------
|
||||
|
||||
function initAdvancedCharts(root) {
|
||||
root.querySelectorAll("[data-advanced-chart]").forEach(function (wrap) {
|
||||
var currency = wrap.dataset.currency;
|
||||
var targetKey = "currency:" + currency;
|
||||
var simpleEls = wrap.querySelectorAll("[data-chart-simple]");
|
||||
var advancedWrap = wrap.querySelector("[data-chart-advanced]");
|
||||
var priceSvg = wrap.querySelector("[data-candle-price]");
|
||||
var rsiSvg = wrap.querySelector("[data-candle-rsi]");
|
||||
var candleEmptyEl = wrap.querySelector("[data-candle-empty]");
|
||||
var toggle = wrap.querySelector("[data-chart-mode-toggle]");
|
||||
var rangeControls = wrap.querySelector(".chart-controls");
|
||||
if (!toggle || !advancedWrap) return;
|
||||
|
||||
function setMode(mode) {
|
||||
chartModeState[targetKey] = mode;
|
||||
var advanced = mode === "advanced";
|
||||
advancedWrap.hidden = !advanced;
|
||||
simpleEls.forEach(function (el) { el.hidden = advanced; });
|
||||
toggle.textContent = advanced ? "Simple view" : "Advanced view";
|
||||
if (advanced) loadCandles();
|
||||
}
|
||||
|
||||
function currentRange() {
|
||||
var active = rangeControls && rangeControls.querySelector("button.active");
|
||||
return active ? active.dataset.range : "all";
|
||||
}
|
||||
|
||||
function loadCandles() {
|
||||
var candleKey = "candles:" + currency;
|
||||
fetchJSON(candleKey, "/api/candles/" + encodeURIComponent(currency) + "?range=" + currentRange())
|
||||
.then(function (series) {
|
||||
if (series === STALE) return;
|
||||
if (candleEmptyEl) candleEmptyEl.hidden = true;
|
||||
priceSvg.hidden = false;
|
||||
renderCandles(priceSvg, rsiSvg, series);
|
||||
})
|
||||
.catch(function (err) { showChartError(priceSvg, candleEmptyEl, null, err); });
|
||||
}
|
||||
|
||||
toggle.addEventListener("click", function () {
|
||||
setMode(chartModeState[targetKey] === "advanced" ? "simple" : "advanced");
|
||||
});
|
||||
if (rangeControls) {
|
||||
rangeControls.querySelectorAll("button[data-range]").forEach(function (btn) {
|
||||
btn.addEventListener("click", function () {
|
||||
if (chartModeState[targetKey] === "advanced") loadCandles();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
setMode(chartModeState[targetKey] === "advanced" ? "advanced" : "simple");
|
||||
});
|
||||
}
|
||||
|
||||
function sma(values, period, idx) {
|
||||
if (idx + 1 < period) return null;
|
||||
var sum = 0;
|
||||
for (var i = idx + 1 - period; i <= idx; i++) sum += values[i];
|
||||
return sum / period;
|
||||
}
|
||||
|
||||
function renderCandles(priceSvg, rsiSvg, series) {
|
||||
if (!priceSvg) return;
|
||||
while (priceSvg.firstChild) priceSvg.removeChild(priceSvg.firstChild);
|
||||
if (rsiSvg) while (rsiSvg.firstChild) rsiSvg.removeChild(rsiSvg.firstChild);
|
||||
|
||||
var candles = series && series.candles ? series.candles : [];
|
||||
if (candles.length < 2) return;
|
||||
|
||||
var W = 600, PH = 260, ML = 56, MR = 12, MT = 10, MB = 4;
|
||||
var plotW = W - ML - MR, plotH = PH - MT - MB;
|
||||
priceSvg.setAttribute("viewBox", "0 0 " + W + " " + PH);
|
||||
|
||||
var lows = candles.map(function (c) { return c.l; });
|
||||
var highs = candles.map(function (c) { return c.h; });
|
||||
var bandVals = [];
|
||||
(series.bb_upper || []).forEach(function (v) { if (v !== null) bandVals.push(v); });
|
||||
(series.bb_lower || []).forEach(function (v) { if (v !== null) bandVals.push(v); });
|
||||
var min = Math.min.apply(null, lows.concat(bandVals.length ? bandVals : lows));
|
||||
var max = Math.max.apply(null, highs.concat(bandVals.length ? bandVals : highs));
|
||||
var range = (max - min) || 1;
|
||||
|
||||
var t0 = candles[0].t, t1 = candles[candles.length - 1].t;
|
||||
var tSpan = (t1 - t0) || 1;
|
||||
var slot = plotW / candles.length;
|
||||
|
||||
function xAt(i) { return ML + (i + 0.5) * slot; }
|
||||
function yAt(v) { return MT + (1 - (v - min) / range) * plotH; }
|
||||
|
||||
[min, (min + max) / 2, max].forEach(function (v) {
|
||||
var y = yAt(v);
|
||||
priceSvg.appendChild(svgEl("line", { x1: ML, x2: W - MR, y1: y, y2: y, class: "chart-grid" }));
|
||||
var text = svgEl("text", { x: ML - 8, y: y, class: "chart-axis-label chart-axis-y" });
|
||||
text.textContent = fmtAxisValue(v, "");
|
||||
priceSvg.appendChild(text);
|
||||
});
|
||||
|
||||
// Bollinger Bands band + lines. pathFor takes the y-scaler so it can be
|
||||
// reused for RSI below (0-100 scale) as well as price-scale series.
|
||||
function pathFor(arr, yFn) {
|
||||
var pts = [];
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
if (arr[i] === null || arr[i] === undefined) continue;
|
||||
pts.push(xAt(i).toFixed(2) + "," + yFn(arr[i]).toFixed(2));
|
||||
}
|
||||
return pts;
|
||||
}
|
||||
var upperPts = pathFor(series.bb_upper || [], yAt);
|
||||
var lowerPts = pathFor(series.bb_lower || [], yAt);
|
||||
if (upperPts.length && lowerPts.length) {
|
||||
var band = svgEl("polygon", { points: upperPts.join(" ") + " " + lowerPts.slice().reverse().join(" "), class: "bb-band" });
|
||||
priceSvg.appendChild(band);
|
||||
priceSvg.appendChild(svgEl("polyline", { points: upperPts.join(" "), class: "bb-line" }));
|
||||
priceSvg.appendChild(svgEl("polyline", { points: lowerPts.join(" "), class: "bb-line" }));
|
||||
}
|
||||
var midPts = pathFor(series.bb_middle || [], yAt);
|
||||
if (midPts.length) priceSvg.appendChild(svgEl("polyline", { points: midPts.join(" "), class: "bb-mid" }));
|
||||
|
||||
// Candlesticks
|
||||
candles.forEach(function (c, i) {
|
||||
var x = xAt(i);
|
||||
var up = c.c >= c.o;
|
||||
var cls = up ? "candle-up" : "candle-down";
|
||||
priceSvg.appendChild(svgEl("line", { x1: x, x2: x, y1: yAt(c.h), y2: yAt(c.l), class: "candle-wick " + cls }));
|
||||
var bodyTop = yAt(Math.max(c.o, c.c));
|
||||
var bodyH = Math.max(1, Math.abs(yAt(c.o) - yAt(c.c)));
|
||||
var bw = Math.max(1, slot * 0.6);
|
||||
priceSvg.appendChild(svgEl("rect", {
|
||||
x: (x - bw / 2).toFixed(2), y: bodyTop.toFixed(2),
|
||||
width: bw.toFixed(2), height: bodyH.toFixed(2), class: "candle-body " + cls,
|
||||
}));
|
||||
});
|
||||
|
||||
// X-axis dates (shared scale with RSI below): evenly spaced by time,
|
||||
// collision-avoided.
|
||||
pickTicks(candles, 5, 70, xAt).forEach(function (idx) {
|
||||
var text = svgEl("text", { x: xAt(idx), y: PH - 6, class: "chart-axis-label chart-axis-x" });
|
||||
text.textContent = fmtAxisDate(candles[idx].t, tSpan);
|
||||
priceSvg.appendChild(text);
|
||||
});
|
||||
|
||||
if (!rsiSvg) return;
|
||||
var RH = 90;
|
||||
rsiSvg.setAttribute("viewBox", "0 0 " + W + " " + RH);
|
||||
var rMT = 10, rMB = 20, rPlotH = RH - rMT - rMB;
|
||||
function ry(v) { return rMT + (1 - v / 100) * rPlotH; }
|
||||
[30, 50, 70].forEach(function (level) {
|
||||
var y = ry(level);
|
||||
rsiSvg.appendChild(svgEl("line", { x1: ML, x2: W - MR, y1: y, y2: y, class: "chart-grid" }));
|
||||
var text = svgEl("text", { x: ML - 8, y: y, class: "chart-axis-label chart-axis-y" });
|
||||
text.textContent = level;
|
||||
rsiSvg.appendChild(text);
|
||||
});
|
||||
var rsiPts = pathFor(series.rsi || [], ry);
|
||||
if (rsiPts.length) rsiSvg.appendChild(svgEl("polyline", { points: rsiPts.join(" "), class: "rsi-line" }));
|
||||
}
|
||||
|
||||
// Favourite star toggle works on any page (delegated), independent of tabs.
|
||||
document.addEventListener("click", function (e) {
|
||||
var btn = e.target.closest("[data-favourite-toggle]");
|
||||
if (!btn) return;
|
||||
var currency = btn.dataset.currency;
|
||||
var next = btn.dataset.favourite;
|
||||
fetch("/api/favourite", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||
body: "currency=" + encodeURIComponent(currency) + "&favourite=" + next,
|
||||
}).then(function () {
|
||||
if (typeof refreshPanel === "function") refreshPanel("portfolio");
|
||||
});
|
||||
});
|
||||
|
||||
initTopbar();
|
||||
|
||||
if (!tabbar || !panels) {
|
||||
// Settings page: no tab system, just wire up any charts on the page.
|
||||
initPanel(document);
|
||||
return;
|
||||
}
|
||||
|
||||
var STORAGE_KEY = "basis:tabs";
|
||||
var FIXED_TABS = { portfolio: "Portfolio", transfers: "Transfers" };
|
||||
var page = body.dataset.page; // "portfolio" | "position" | "transfers"
|
||||
var current = body.dataset.current;
|
||||
|
||||
function loadStoredTabs() {
|
||||
try {
|
||||
var raw = sessionStorage.getItem(STORAGE_KEY);
|
||||
return raw ? JSON.parse(raw) : [];
|
||||
} catch (e) {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
function saveStoredTabs(tabs) {
|
||||
try { sessionStorage.setItem(STORAGE_KEY, JSON.stringify(tabs)); } catch (e) { /* ignore */ }
|
||||
}
|
||||
|
||||
var openTabs = loadStoredTabs().filter(function (c) { return c !== current; });
|
||||
if (page === "position" && current) openTabs.push(current);
|
||||
saveStoredTabs(openTabs);
|
||||
|
||||
var activeKey = page === "position" ? "pos:" + current : (FIXED_TABS[page] ? page : "portfolio");
|
||||
|
||||
function panelKey(id) { return FIXED_TABS[id] ? id : "pos:" + id; }
|
||||
function panelURL(id) {
|
||||
if (id === "portfolio") return "/api/panel/portfolio";
|
||||
if (id === "transfers") return "/api/panel/transfers";
|
||||
return "/api/panel/position/" + encodeURIComponent(id);
|
||||
}
|
||||
function pageURL(id) {
|
||||
if (id === "portfolio") return "/";
|
||||
if (id === "transfers") return "/transfers";
|
||||
return "/position/" + encodeURIComponent(id);
|
||||
}
|
||||
|
||||
function renderTabbar() {
|
||||
tabbar.innerHTML = "";
|
||||
function make(key, label, closable) {
|
||||
var btn = document.createElement("button");
|
||||
btn.type = "button";
|
||||
btn.className = "tab-btn" + (key === activeKey ? " active" : "");
|
||||
btn.setAttribute("role", "tab");
|
||||
var span = document.createElement("span");
|
||||
span.textContent = label;
|
||||
btn.appendChild(span);
|
||||
if (closable) {
|
||||
var close = document.createElement("span");
|
||||
close.className = "tab-close";
|
||||
close.textContent = "×";
|
||||
close.addEventListener("click", function (e) { e.stopPropagation(); closeTab(key); });
|
||||
btn.appendChild(close);
|
||||
}
|
||||
btn.addEventListener("click", function () {
|
||||
activateTab(FIXED_TABS[key] ? key : key.slice(4));
|
||||
});
|
||||
tabbar.appendChild(btn);
|
||||
}
|
||||
make("portfolio", "Portfolio", false);
|
||||
make("transfers", "Transfers", false);
|
||||
openTabs.forEach(function (c) { make("pos:" + c, c, true); });
|
||||
}
|
||||
|
||||
function ensurePanel(id) {
|
||||
var key = panelKey(id);
|
||||
var el = panels.querySelector('[data-panel="' + key + '"]');
|
||||
if (el) return Promise.resolve(el);
|
||||
el = document.createElement("div");
|
||||
el.className = "tab-panel";
|
||||
el.dataset.panel = key;
|
||||
panels.appendChild(el);
|
||||
return fetch(panelURL(id)).then(function (r) { return r.text(); }).then(function (html) {
|
||||
el.innerHTML = html;
|
||||
initPanel(el);
|
||||
return el;
|
||||
});
|
||||
}
|
||||
|
||||
function activateTab(id) {
|
||||
if (!FIXED_TABS[id] && openTabs.indexOf(id) === -1) {
|
||||
openTabs.push(id);
|
||||
saveStoredTabs(openTabs);
|
||||
}
|
||||
ensurePanel(id).then(function () {
|
||||
var key = panelKey(id);
|
||||
panels.querySelectorAll(".tab-panel").forEach(function (p) {
|
||||
p.classList.toggle("active", p.dataset.panel === key);
|
||||
});
|
||||
activeKey = key;
|
||||
renderTabbar();
|
||||
var url = pageURL(id);
|
||||
if (location.pathname !== url) history.pushState({ tab: id }, "", url);
|
||||
});
|
||||
}
|
||||
|
||||
function closeTab(key) {
|
||||
var currency = key.slice(4);
|
||||
openTabs = openTabs.filter(function (c) { return c !== currency; });
|
||||
saveStoredTabs(openTabs);
|
||||
var el = panels.querySelector('[data-panel="' + key + '"]');
|
||||
if (el) el.remove();
|
||||
if (activeKey === key) {
|
||||
activateTab("portfolio");
|
||||
} else {
|
||||
renderTabbar();
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("popstate", function () {
|
||||
var path = location.pathname;
|
||||
if (path === "/") { activateTab("portfolio"); return; }
|
||||
if (path === "/transfers") { activateTab("transfers"); return; }
|
||||
var m = path.match(/^\/position\/([^/]+)/);
|
||||
if (m) activateTab(decodeURIComponent(m[1]));
|
||||
});
|
||||
|
||||
document.addEventListener("click", function (e) {
|
||||
var link = e.target.closest("[data-open-tab]");
|
||||
if (!link) return;
|
||||
e.preventDefault();
|
||||
activateTab(link.dataset.openTab);
|
||||
});
|
||||
|
||||
function refreshPanel(id) {
|
||||
if (!panels) return;
|
||||
var key = panelKey(id);
|
||||
var el = panels.querySelector('[data-panel="' + key + '"]');
|
||||
if (!el) return;
|
||||
fetch(panelURL(id)).then(function (r) { return r.text(); }).then(function (html) {
|
||||
el.innerHTML = html;
|
||||
initPanel(el);
|
||||
});
|
||||
}
|
||||
|
||||
setInterval(function () {
|
||||
var id = FIXED_TABS[activeKey] ? activeKey : activeKey.slice(4);
|
||||
refreshPanel(id);
|
||||
}, pollMs);
|
||||
|
||||
// --- initial render: wire up what the server already sent down. Other
|
||||
// previously-open tabs are NOT pre-created here — ensurePanel() lazily
|
||||
// fetches them the first time they're actually activated, whether by
|
||||
// clicking their tab button or a currency link. (A prior version created
|
||||
// empty placeholder panels here, which made ensurePanel() think they were
|
||||
// already loaded and skip fetching — that's the "only the last tab has
|
||||
// data after refresh" bug.) ---
|
||||
renderTabbar();
|
||||
var initialPanel = panels.querySelector(".tab-panel.active");
|
||||
if (initialPanel) initPanel(initialPanel);
|
||||
})();
|
||||
@@ -0,0 +1,563 @@
|
||||
:root {
|
||||
--bg: #0b0e11;
|
||||
--surface: #14181d;
|
||||
--surface-alt: #1b2027;
|
||||
--border: #232830;
|
||||
--text: #e6e8eb;
|
||||
--text-dim: #8b93a1;
|
||||
--gain: #3ddc84;
|
||||
--loss: #ff6b5e;
|
||||
--accent: #e8b34c;
|
||||
--font-body: "Inter", system-ui, -apple-system, sans-serif;
|
||||
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-body);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a { color: inherit; }
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.25rem 2rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.topbar-total {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.6rem;
|
||||
text-decoration: none;
|
||||
font-family: var(--font-mono);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.topbar-value {
|
||||
font-weight: 700;
|
||||
font-size: 1.05rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.topbar-pl {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.topbar nav a {
|
||||
text-decoration: none;
|
||||
color: var(--text-dim);
|
||||
margin-left: 1.5rem;
|
||||
font-size: 0.9rem;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.topbar nav a:hover, .topbar nav a:focus-visible {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.topbar nav a.active { color: var(--text); }
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
gap: 0.35rem;
|
||||
margin-bottom: 1.25rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px 8px 0 0;
|
||||
border-bottom: none;
|
||||
padding: 0.5rem 0.9rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
color: var(--text);
|
||||
background: var(--surface);
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.tab-btn .tab-close {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1;
|
||||
padding: 0.1rem 0.25rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tab-btn .tab-close:hover { color: var(--loss); background: var(--surface-alt); }
|
||||
|
||||
.tab-panel { display: none; }
|
||||
.tab-panel.active { display: block; }
|
||||
|
||||
.hero {
|
||||
padding: 2rem 0 2.5rem;
|
||||
}
|
||||
|
||||
.hero-label {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.hero-value {
|
||||
font-family: var(--font-mono);
|
||||
font-size: clamp(2rem, 6vw, 3.5rem);
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.hero-pl, .hero-sub {
|
||||
margin-top: 0.5rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1rem;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.back {
|
||||
text-decoration: none;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.back:hover { color: var(--accent); }
|
||||
|
||||
.notice, .hint {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.85rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.notice a, .hint a { color: var(--accent); }
|
||||
|
||||
.notice.error { color: var(--loss); }
|
||||
|
||||
.qr-code {
|
||||
display: block;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 0.75rem 0;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.secret-key {
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.08em;
|
||||
background: var(--surface-alt);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem 1rem;
|
||||
display: inline-block;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.logout-form { display: inline; margin-left: 1.5rem; }
|
||||
.logout-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.9rem;
|
||||
font-family: var(--font-body);
|
||||
cursor: pointer;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.logout-btn:hover { color: var(--text); }
|
||||
|
||||
.login-body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.login-main { width: 100%; max-width: 380px; padding: 1.5rem; }
|
||||
|
||||
.login-panel { padding: 2rem; }
|
||||
|
||||
.login-title {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.15em;
|
||||
color: var(--accent);
|
||||
font-size: 1.3rem;
|
||||
margin: 0 0 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-panel .form { flex-direction: column; align-items: stretch; }
|
||||
.login-panel .form label { flex: none; }
|
||||
.login-panel button[type="submit"] { margin-top: 0.5rem; }
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-overlay[hidden] { display: none; }
|
||||
|
||||
.modal {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 2rem;
|
||||
width: 100%;
|
||||
max-width: 340px;
|
||||
}
|
||||
|
||||
.modal h2 { margin-top: 0; font-size: 1.05rem; }
|
||||
.modal .form { flex-direction: column; align-items: stretch; }
|
||||
.modal .form label { flex: none; }
|
||||
.modal button[type="submit"] { margin-top: 0.5rem; }
|
||||
|
||||
.empty { color: var(--text-dim); }
|
||||
|
||||
.table-scroll {
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
table.ledger {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.star-cell { width: 2rem; text-align: center !important; padding-left: 0.5rem !important; padding-right: 0.25rem !important; }
|
||||
|
||||
.star-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--border);
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
padding: 0.15rem;
|
||||
line-height: 1;
|
||||
}
|
||||
.star-btn:hover { color: var(--accent); }
|
||||
.star-btn.active { color: var(--accent); }
|
||||
|
||||
tr.is-favourite { background: rgba(232, 179, 76, 0.05); }
|
||||
|
||||
.ledger th, .ledger td {
|
||||
padding: 0.65rem 0.5rem;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.ledger th:first-of-type, .ledger td:first-of-type {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
.ledger th:first-child, .ledger td:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ledger th {
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-dim);
|
||||
font-weight: 600;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.ledger th[data-sort] {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.ledger th[data-sort]:hover { color: var(--text); }
|
||||
.ledger th[data-sort]::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 0.6em;
|
||||
margin-left: 0.2em;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.ledger th[data-sort].sort-asc::after { content: "▲"; opacity: 1; color: var(--accent); }
|
||||
.ledger th[data-sort].sort-desc::after { content: "▼"; opacity: 1; color: var(--accent); }
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 5px;
|
||||
background: var(--surface-alt);
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.badge.buy { color: var(--gain); background: rgba(61, 220, 132, 0.12); }
|
||||
.badge.sell { color: var(--loss); background: rgba(255, 107, 94, 0.12); }
|
||||
.badge.deposit { color: var(--accent); background: rgba(232, 179, 76, 0.12); }
|
||||
.badge.withdrawal { color: var(--text-dim); background: var(--surface-alt); }
|
||||
|
||||
.ledger tbody tr:hover { background: var(--surface-alt); }
|
||||
.ledger tbody tr:last-child td { border-bottom: none; }
|
||||
|
||||
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
||||
|
||||
.chip {
|
||||
display: inline-block;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 6px;
|
||||
background: var(--surface-alt);
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.chip.gain { color: var(--gain); background: rgba(61, 220, 132, 0.12); }
|
||||
.chip.loss { color: var(--loss); background: rgba(255, 107, 94, 0.12); }
|
||||
|
||||
.gain { color: var(--gain); }
|
||||
.loss { color: var(--loss); }
|
||||
.flat { color: var(--text-dim); }
|
||||
|
||||
#rows.pulse { animation: pulse 0.6s ease-out; }
|
||||
@keyframes pulse { from { opacity: 0.55; } to { opacity: 1; } }
|
||||
|
||||
.panel {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem 1.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.panel h2 {
|
||||
margin-top: 0;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.status { color: var(--text-dim); font-size: 0.9rem; }
|
||||
.status.ok { color: var(--gain); }
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.form.grid label { min-width: 140px; }
|
||||
|
||||
.form label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-dim);
|
||||
flex: 1 1 160px;
|
||||
}
|
||||
|
||||
.form input, .form select {
|
||||
background: var(--surface-alt);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 0.55rem 0.65rem;
|
||||
color: var(--text);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.form input:focus-visible, .form select:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
button {
|
||||
background: var(--accent);
|
||||
color: #14181d;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 0.6rem 1.1rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover { filter: brightness(1.08); }
|
||||
button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
|
||||
|
||||
.toggle-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.toggle-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.6rem 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.toggle-list li:last-child { border-bottom: none; }
|
||||
|
||||
.toggle {
|
||||
background: var(--surface-alt);
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
font-size: 0.78rem;
|
||||
padding: 0.35rem 0.7rem;
|
||||
}
|
||||
.toggle.is-hidden { color: var(--text-dim); }
|
||||
|
||||
.chart-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 1rem 1.25rem 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.chart-controls {
|
||||
display: flex;
|
||||
gap: 0.35rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.chart-controls button {
|
||||
background: var(--surface-alt);
|
||||
color: var(--text-dim);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
padding: 0.3rem 0.6rem;
|
||||
}
|
||||
.chart-controls button.active { background: var(--accent); color: #14181d; }
|
||||
.chart-controls button.mode-toggle { margin-left: auto; }
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
aspect-ratio: 600 / 220;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
.chart[hidden] { display: none; }
|
||||
|
||||
.chart-line {
|
||||
fill: none;
|
||||
stroke-width: 1.6;
|
||||
vector-effect: non-scaling-stroke;
|
||||
}
|
||||
.chart-line.gain { stroke: var(--gain); }
|
||||
.chart-line.loss { stroke: var(--loss); }
|
||||
.chart-line.flat { stroke: var(--text-dim); }
|
||||
|
||||
.chart-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }
|
||||
|
||||
.chart-axis-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
fill: var(--text-dim);
|
||||
}
|
||||
.chart-axis-y { text-anchor: end; dominant-baseline: middle; }
|
||||
.chart-axis-x { text-anchor: middle; }
|
||||
|
||||
.chart-empty { color: var(--text-dim); font-size: 0.85rem; padding: 2.5rem 0; text-align: center; }
|
||||
|
||||
.chart-caption { color: var(--text-dim); font-size: 0.78rem; margin: 0.4rem 0 0.75rem; }
|
||||
|
||||
.chart-sublabel { color: var(--text-dim); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0.75rem 0 0.25rem; }
|
||||
|
||||
.candle-chart { aspect-ratio: 600 / 260; }
|
||||
.rsi-chart { aspect-ratio: 600 / 90; margin-bottom: 0.5rem; }
|
||||
|
||||
.candle-wick { stroke-width: 1; vector-effect: non-scaling-stroke; }
|
||||
.candle-wick.candle-up { stroke: var(--gain); }
|
||||
.candle-wick.candle-down { stroke: var(--loss); }
|
||||
.candle-body.candle-up { fill: var(--gain); }
|
||||
.candle-body.candle-down { fill: var(--loss); }
|
||||
|
||||
.bb-band { fill: rgba(139, 147, 161, 0.08); stroke: none; }
|
||||
.bb-line { fill: none; stroke: var(--text-dim); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
|
||||
.bb-mid { fill: none; stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; }
|
||||
.rsi-line { fill: none; stroke: var(--accent); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
|
||||
|
||||
.staked-note { color: var(--text-dim); font-size: 0.78rem; }
|
||||
|
||||
@keyframes live-flash { from { background: rgba(232, 179, 76, 0.18); } to { background: transparent; } }
|
||||
.flash { animation: live-flash 0.8s ease-out; }
|
||||
tr.flash { animation: none; } /* row background flash would fight is-favourite tint; cells still flash individually via inherited rule below */
|
||||
tr[data-ws-symbol].flash td { animation: live-flash 0.8s ease-out; }
|
||||
|
||||
@media (max-width: 860px) {
|
||||
table.ledger thead { display: none; }
|
||||
table.ledger, table.ledger tbody, table.ledger tr, table.ledger td { display: block; width: 100%; }
|
||||
.table-scroll { overflow-x: visible; }
|
||||
table.ledger tr {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
margin: 0.6rem;
|
||||
padding: 0.4rem 0.75rem;
|
||||
}
|
||||
table.ledger td {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
padding: 0.45rem 0;
|
||||
text-align: right;
|
||||
white-space: normal;
|
||||
}
|
||||
table.ledger td:last-child { border-bottom: none; }
|
||||
table.ledger td::before {
|
||||
content: attr(data-label);
|
||||
color: var(--text-dim);
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
text-align: left;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
table.ledger td.star-cell { justify-content: flex-end; padding: 0.3rem 0 !important; }
|
||||
table.ledger td.star-cell::before { content: ""; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.topbar { padding: 1rem 1.25rem; }
|
||||
main { padding: 1.25rem; }
|
||||
.form { flex-direction: column; align-items: stretch; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#rows.pulse { animation: none; }
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
{{define "content"}}
|
||||
<section class="panel">
|
||||
<h2>Account</h2>
|
||||
{{if .MustChangePassword}}
|
||||
<p class="notice">You're signed in with the default admin/admin login — set your own username and password below to continue.</p>
|
||||
{{end}}
|
||||
<p class="status">Signed in as <strong>{{.Username}}</strong>.</p>
|
||||
{{if .Error}}<p class="notice error">{{.Error}}</p>{{end}}
|
||||
<form method="post" action="/account/credentials" class="form">
|
||||
<label>Current Password <input type="password" name="current_password" autocomplete="current-password" required></label>
|
||||
<label>New Username <input type="text" name="new_username" value="{{.Username}}" maxlength="32" required></label>
|
||||
<label>New Password <input type="password" name="new_password" autocomplete="new-password" minlength="8" required></label>
|
||||
<label>Confirm New Password <input type="password" name="confirm_password" autocomplete="new-password" minlength="8" required></label>
|
||||
<button type="submit">Save</button>
|
||||
</form>
|
||||
<p class="hint">Username: 3-32 characters (letters, numbers, dot, underscore, hyphen). Password: at least 8 characters.</p>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Two-Factor Authentication (MFA)</h2>
|
||||
{{if .MFAError}}<p class="notice error">{{.MFAError}}</p>{{end}}
|
||||
{{if .MFAEnabled}}
|
||||
<p class="status ok">MFA is enabled — an authenticator code is required at sign-in.</p>
|
||||
<form method="post" action="/account/mfa/disable">
|
||||
<button type="submit" class="toggle is-hidden">Disable MFA</button>
|
||||
</form>
|
||||
{{else if .MFAPendingSecret}}
|
||||
<p class="status">Scan this with your authenticator app (Google Authenticator, Authy, 1Password, etc.), or enter the key manually, then enter the 6-digit code it shows to confirm:</p>
|
||||
{{if .MFAQRDataURI}}<img src="{{.MFAQRDataURI}}" alt="MFA setup QR code" class="qr-code">{{end}}
|
||||
<p class="mono secret-key">{{.MFAPendingSecret}}</p>
|
||||
<p class="hint">otpauth URI: <span class="mono">{{.MFAOtpauthURI}}</span></p>
|
||||
<form method="post" action="/account/mfa/confirm" class="form">
|
||||
<label>6-digit code <input type="text" name="code" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" autocomplete="one-time-code" required></label>
|
||||
<button type="submit">Confirm</button>
|
||||
</form>
|
||||
<form method="post" action="/account/mfa/disable">
|
||||
<button type="submit" class="toggle">Cancel setup</button>
|
||||
</form>
|
||||
{{else}}
|
||||
<p class="status">MFA is not enabled. 1 user account is currently supported.</p>
|
||||
<form method="post" action="/account/mfa/enable">
|
||||
<button type="submit">Enable MFA</button>
|
||||
</form>
|
||||
{{end}}
|
||||
</section>
|
||||
{{end}}
|
||||
@@ -0,0 +1,40 @@
|
||||
{{define "base"}}<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Basis — Crypto Portfolio</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
</head>
|
||||
<body data-page="{{.Page}}" data-current="{{.CurrentTab}}" data-poll="{{.PollSeconds}}" data-currency-symbol="{{curSymbol}}">
|
||||
<header class="topbar">
|
||||
<a href="/" class="topbar-total tab-link" data-topbar data-open-tab="portfolio">
|
||||
<span class="topbar-value" data-field="topbar-value">{{money .TotalValue}}</span>
|
||||
<span class="topbar-pl {{signClass .TotalPL}}" data-field="topbar-pl">{{money .TotalPL}} ({{printf "%+.2f" .TotalPLPercent}}%)</span>
|
||||
</a>
|
||||
<nav>
|
||||
<a href="/" class="{{if or (eq .Page "settings") (eq .Page "account")}}{{else}}active{{end}}">Dashboard</a>
|
||||
<a href="/settings" class="{{if eq .Page "settings"}}active{{end}}">Settings</a>
|
||||
<a href="/account" class="{{if eq .Page "account"}}active{{end}}">Account</a>
|
||||
<form method="post" action="/logout" class="logout-form"><button type="submit" class="logout-btn">Sign out</button></form>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
{{if or (eq .Page "settings") (eq .Page "account")}}
|
||||
{{template "content" .}}
|
||||
{{else}}
|
||||
<div class="tabbar" id="tabbar" role="tablist"></div>
|
||||
<div id="tab-panels">
|
||||
<div class="tab-panel active" data-panel="{{if eq .Page "position"}}pos:{{.CurrentTab}}{{else if eq .Page "transfers"}}transfers{{else}}portfolio{{end}}">
|
||||
{{template "content" .}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</main>
|
||||
<script src="/static/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
@@ -0,0 +1,44 @@
|
||||
{{define "content"}}
|
||||
{{if not .HasCredentials}}
|
||||
<p class="notice">No Kraken account connected yet — <a href="/settings">add your API key</a> to auto-import trades, or add purchases manually.</p>
|
||||
{{end}}
|
||||
|
||||
<div class="chart-card">
|
||||
<div class="chart-controls" data-chart="portfolio">
|
||||
<button type="button" data-range="24h">24H</button>
|
||||
<button type="button" data-range="7d">7D</button>
|
||||
<button type="button" data-range="30d">30D</button>
|
||||
<button type="button" data-range="1y">1Y</button>
|
||||
<button type="button" data-range="all" class="active">All</button>
|
||||
</div>
|
||||
<svg class="chart" data-chart-target="portfolio" data-symbol="{{curSymbol}}" viewBox="0 0 600 220" aria-hidden="true"></svg>
|
||||
<p class="chart-empty" data-chart-empty="portfolio" hidden>Not enough history yet — check back after a few polling cycles.</p>
|
||||
<p class="chart-caption" data-chart-caption="portfolio"></p>
|
||||
</div>
|
||||
|
||||
{{if .Rows}}
|
||||
<div class="table-scroll">
|
||||
<table class="ledger sortable" data-poll="{{.PollSeconds}}" data-sort-key="dashboard">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="star-cell"></th>
|
||||
<th data-sort="currency">Currency</th>
|
||||
<th data-sort="holdings">Holdings</th>
|
||||
<th data-sort="avgcost">Avg Cost</th>
|
||||
<th data-sort="price">Price</th>
|
||||
<th data-sort="value">Value</th>
|
||||
<th data-sort="4h">4H</th>
|
||||
<th data-sort="24h">24H</th>
|
||||
<th data-sort="7d">7D</th>
|
||||
<th data-sort="30d">30D</th>
|
||||
<th data-sort="all">All-time</th>
|
||||
<th data-sort="pl">P/L</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="rows">{{template "rows" .}}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{else}}
|
||||
<p class="empty">No purchases tracked yet. <a href="/settings">Add one</a> or connect Kraken.</p>
|
||||
{{end}}
|
||||
{{end}}
|
||||
@@ -0,0 +1,23 @@
|
||||
{{define "rows"}}{{range .Rows}}<tr class="{{if .Favourite}}is-favourite{{end}}"
|
||||
data-currency="{{.Currency}}"
|
||||
data-ws-symbol="{{if .Pair}}{{wsSymbol .Currency .Quote}}{{end}}"
|
||||
data-holdings="{{sortVal .TotalAmount}}"
|
||||
data-cost="{{sortVal .TotalCost}}"
|
||||
data-fx-rate="{{sortVal .FXRate}}"
|
||||
data-value="{{sortVal .CurrentValue}}">
|
||||
<td class="star-cell" data-label="">
|
||||
<button type="button" class="star-btn {{if .Favourite}}active{{end}}" data-favourite-toggle data-currency="{{.Currency}}" data-favourite="{{if .Favourite}}0{{else}}1{{end}}" aria-label="Toggle favourite" aria-pressed="{{if .Favourite}}true{{else}}false{{end}}">★</button>
|
||||
</td>
|
||||
<td data-label="Currency"><a href="/position/{{.Currency}}" class="tab-link" data-open-tab="{{.Currency}}">{{.Currency}}</a></td>
|
||||
<!-- {{if .Staked}} <span class="staked-note">({{amt .Staked}} staked)</span>{{end}} -->
|
||||
<td class="mono" data-label="Holdings" data-sort-value="{{sortVal .TotalAmount}}">{{amt .TotalAmount}}</td>
|
||||
<td class="mono" data-label="Avg Cost" data-sort-value="{{sortVal .AvgCost}}">{{money .AvgCost}}</td>
|
||||
<td class="mono" data-label="Price" data-field="price" data-sort-value="{{sortVal .CurrentPrice}}">{{money .CurrentPrice}}</td>
|
||||
<td class="mono" data-label="Value" data-field="value" data-sort-value="{{sortVal .CurrentValue}}">{{money .CurrentValue}}</td>
|
||||
<td data-label="4H" data-sort-value="{{sortVal .Change4h}}"><span class="chip {{pctClass .Change4h}}">{{pctStr .Change4h}}</span></td>
|
||||
<td data-label="24H" data-sort-value="{{sortVal .Change1d}}"><span class="chip {{pctClass .Change1d}}">{{pctStr .Change1d}}</span></td>
|
||||
<td data-label="7D" data-sort-value="{{sortVal .Change7d}}"><span class="chip {{pctClass .Change7d}}">{{pctStr .Change7d}}</span></td>
|
||||
<td data-label="30D" data-sort-value="{{sortVal .Change30d}}"><span class="chip {{pctClass .Change30d}}">{{pctStr .Change30d}}</span></td>
|
||||
<td data-label="All-time" data-sort-value="{{sortVal .ChangeAll}}"><span class="chip {{pctClass .ChangeAll}}">{{pctStr .ChangeAll}}</span></td>
|
||||
<td class="mono {{signClass .PLDollar}}" data-label="P/L" data-field="pl" data-sort-value="{{sortVal .PLDollar}}">{{money .PLDollar}}</td>
|
||||
</tr>{{end}}{{end}}
|
||||
@@ -0,0 +1,111 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Sign in — Basis</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
</head>
|
||||
<body class="login-body">
|
||||
<main class="login-main">
|
||||
<section class="panel login-panel">
|
||||
<h1 class="login-title">Basis</h1>
|
||||
<p class="notice error" id="login-error" hidden></p>
|
||||
<form id="login-form" class="form">
|
||||
<label>Username <input type="text" name="username" autocomplete="username" required autofocus></label>
|
||||
<label>Password <input type="password" name="password" autocomplete="current-password" required></label>
|
||||
<button type="submit">Sign in</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div class="modal-overlay" id="mfa-overlay" hidden>
|
||||
<div class="modal">
|
||||
<h2>Enter authenticator code</h2>
|
||||
<p class="hint">Your account has MFA enabled — enter the 6-digit code from your authenticator app.</p>
|
||||
<p class="notice error" id="mfa-error" hidden></p>
|
||||
<form id="mfa-form" class="form">
|
||||
<label>Code <input type="text" name="code" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" autocomplete="one-time-code" required></label>
|
||||
<button type="submit">Verify</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
var loginForm = document.getElementById("login-form");
|
||||
var loginError = document.getElementById("login-error");
|
||||
var overlay = document.getElementById("mfa-overlay");
|
||||
var mfaForm = document.getElementById("mfa-form");
|
||||
var mfaError = document.getElementById("mfa-error");
|
||||
var pendingToken = "";
|
||||
|
||||
function postForm(url, fields) {
|
||||
var body = Object.keys(fields).map(function (k) {
|
||||
return encodeURIComponent(k) + "=" + encodeURIComponent(fields[k]);
|
||||
}).join("&");
|
||||
return fetch(url, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||
body: body,
|
||||
}).then(function (r) { return r.json(); });
|
||||
}
|
||||
|
||||
function showError(el, msg) {
|
||||
el.textContent = msg;
|
||||
el.hidden = false;
|
||||
}
|
||||
|
||||
loginForm.addEventListener("submit", function (e) {
|
||||
e.preventDefault();
|
||||
loginError.hidden = true;
|
||||
var fd = new FormData(loginForm);
|
||||
postForm("/login", { username: fd.get("username"), password: fd.get("password") }).then(function (res) {
|
||||
if (res.error) {
|
||||
showError(loginError, res.error);
|
||||
return;
|
||||
}
|
||||
if (res.mfa_required) {
|
||||
pendingToken = res.pending_token;
|
||||
overlay.hidden = false;
|
||||
mfaForm.querySelector('input[name="code"]').focus();
|
||||
return;
|
||||
}
|
||||
window.location.href = res.redirect || "/";
|
||||
}).catch(function () {
|
||||
showError(loginError, "Something went wrong — try again.");
|
||||
});
|
||||
});
|
||||
|
||||
mfaForm.addEventListener("submit", function (e) {
|
||||
e.preventDefault();
|
||||
mfaError.hidden = true;
|
||||
var fd = new FormData(mfaForm);
|
||||
postForm("/login/mfa", { pending_token: pendingToken, code: fd.get("code") }).then(function (res) {
|
||||
if (res.error) {
|
||||
showError(mfaError, res.error);
|
||||
return;
|
||||
}
|
||||
window.location.href = res.redirect || "/";
|
||||
}).catch(function () {
|
||||
showError(mfaError, "Something went wrong — try again.");
|
||||
});
|
||||
});
|
||||
|
||||
overlay.addEventListener("click", function (e) {
|
||||
if (e.target === overlay) {
|
||||
overlay.hidden = true;
|
||||
pendingToken = "";
|
||||
mfaForm.reset();
|
||||
mfaError.hidden = true;
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,74 @@
|
||||
{{define "content"}}
|
||||
<section class="hero" data-ws-hero="{{if .Pair}}{{wsSymbol .Currency .Quote}}{{end}}" data-holdings="{{sortVal .Amount}}" data-cost="{{sortVal .Cost}}" data-fx-rate="{{sortVal .FXRate}}">
|
||||
<div class="hero-label"><a href="/" class="back tab-link" data-open-tab="portfolio">← Dashboard</a></div>
|
||||
<div class="hero-value">{{.Currency}}</div>
|
||||
<div class="hero-sub">
|
||||
<span class="mono">{{amt .Amount}} held{{if .Staked}} ({{amt .Staked}} staked){{end}}</span> ·
|
||||
<span class="mono" data-field="hero-value">{{money .Value}} value</span> ·
|
||||
<span class="mono {{signClass .PLDollar}}" data-field="hero-pl">{{money .PLDollar}} ({{printf "%+.2f" .PLPercent}}%)</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="chart-card" data-advanced-chart data-currency="{{.Currency}}">
|
||||
<div class="chart-controls" data-chart="currency" data-currency="{{.Currency}}">
|
||||
<button type="button" data-range="24h">24H</button>
|
||||
<button type="button" data-range="7d">7D</button>
|
||||
<button type="button" data-range="30d">30D</button>
|
||||
<button type="button" data-range="1y">1Y</button>
|
||||
<button type="button" data-range="all" class="active">All</button>
|
||||
<button type="button" class="mode-toggle" data-chart-mode-toggle>Advanced view</button>
|
||||
</div>
|
||||
<div data-chart-simple>
|
||||
<svg class="chart" data-chart-target="currency:{{.Currency}}" data-symbol="{{curSymbol}}" viewBox="0 0 600 220" aria-hidden="true"></svg>
|
||||
<p class="chart-empty" data-chart-empty="currency:{{.Currency}}" hidden>Not enough price history yet for this range.</p>
|
||||
<p class="chart-caption" data-chart-caption="currency:{{.Currency}}"></p>
|
||||
</div>
|
||||
<div data-chart-advanced hidden>
|
||||
<svg class="chart candle-chart" data-candle-price viewBox="0 0 600 260" aria-hidden="true"></svg>
|
||||
<p class="chart-empty" data-candle-empty hidden></p>
|
||||
<p class="chart-sublabel">RSI (14)</p>
|
||||
<svg class="chart rsi-chart" data-candle-rsi viewBox="0 0 600 90" aria-hidden="true"></svg>
|
||||
<p class="hint">Bollinger Bands (20, 2) and RSI computed from Kraken's own OHLC candles, in the pair's native price.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{if .Entries}}
|
||||
<div class="table-scroll">
|
||||
<table class="ledger sortable" data-sort-key="position:{{.Currency}}">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sort="date">Date</th>
|
||||
<th data-sort="type">Type</th>
|
||||
<th data-sort="source">Source</th>
|
||||
<th data-sort="amount">Amount</th>
|
||||
<th data-sort="price">Price</th>
|
||||
<th data-sort="fee">Fee</th>
|
||||
<th data-sort="cost">Cost / Proceeds</th>
|
||||
<th data-sort="value">Current Value</th>
|
||||
<th data-sort="pl">P/L</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range .Entries}}
|
||||
<tr>
|
||||
<td data-label="Date" data-sort-value="{{.OccurredAt.Unix}}">{{dateStr .OccurredAt}}</td>
|
||||
<td data-label="Type"><span class="badge {{.EntryType}}">{{capitalize .EntryType}}</span></td>
|
||||
<td class="source" data-label="Source">{{.Source}}</td>
|
||||
<td class="mono" data-label="Amount" data-sort-value="{{sortVal .Amount}}">{{amt .Amount}}</td>
|
||||
<td class="mono" data-label="Price" data-sort-value="{{sortVal .Price}}">{{if .Price}}{{money .Price}}{{else}}—{{end}}</td>
|
||||
<td class="mono" data-label="Fee" data-sort-value="{{sortVal .Fee}}">{{money .Fee}}</td>
|
||||
<td class="mono" data-label="Cost / Proceeds" data-sort-value="{{sortVal .Cost}}">{{if .Cost}}{{money .Cost}}{{else}}—{{end}}</td>
|
||||
<td class="mono" data-label="Current Value" data-sort-value="{{sortVal .CurrentValue}}">{{money .CurrentValue}}</td>
|
||||
<td class="mono {{if eq .EntryType "buy"}}{{signClass .PLDollar}}{{end}}" data-label="P/L" data-sort-value="{{if eq .EntryType "buy"}}{{sortVal .PLDollar}}{{end}}">
|
||||
{{if eq .EntryType "buy"}}{{money .PLDollar}} ({{printf "%+.1f" .PLPercent}}%){{else}}—{{end}}
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="hint">A buy row's P/L assumes that specific purchase is still fully held — the total above (which matches your live Kraken balance when connected) is the accurate figure once you've sold or moved coins around.</p>
|
||||
{{else}}
|
||||
<p class="empty">No activity recorded for {{.Currency}} yet.</p>
|
||||
{{end}}
|
||||
{{end}}
|
||||
@@ -0,0 +1,74 @@
|
||||
{{define "content"}}
|
||||
<section class="panel">
|
||||
<h2>Base Currency</h2>
|
||||
<p class="status">All values are shown in <strong>{{.BaseCurrency}}</strong>.</p>
|
||||
<form method="post" action="/settings/base-currency" class="form">
|
||||
<label>Base Currency
|
||||
<input type="text" name="base_currency" list="currency-options" value="{{.BaseCurrency}}" maxlength="3" required>
|
||||
</label>
|
||||
<datalist id="currency-options">
|
||||
<option value="GBP"><option value="USD"><option value="EUR"><option value="JPY">
|
||||
<option value="CHF"><option value="CAD"><option value="AUD">
|
||||
</datalist>
|
||||
<button type="submit">Save</button>
|
||||
</form>
|
||||
<p class="hint">Prices convert to this currency using Kraken's own FX crosses, refreshed on the same cycle as prices.</p>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Kraken Connection</h2>
|
||||
{{if .HasCredentials}}
|
||||
<p class="status ok">Connected — credentials encrypted at rest.</p>
|
||||
{{else}}
|
||||
<p class="status">Not connected.</p>
|
||||
{{end}}
|
||||
<form method="post" action="/settings/credentials" class="form">
|
||||
<label>API Key <input type="text" name="api_key" autocomplete="off" placeholder="{{if .HasCredentials}}leave blank to keep current{{else}}Kraken API key{{end}}"></label>
|
||||
<label>API Secret <input type="password" name="api_secret" autocomplete="off" placeholder="{{if .HasCredentials}}leave blank to keep current{{else}}Kraken API secret{{end}}"></label>
|
||||
<button type="submit">Save</button>
|
||||
</form>
|
||||
<p class="hint">Use a Kraken API key with only "Query Funds" and "Query Closed Orders & Trades" permissions — no withdrawal or trading rights are needed for read-only monitoring.</p>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Add a Ledger Entry</h2>
|
||||
<form method="post" action="/settings/purchase" class="form grid">
|
||||
<label>Type
|
||||
<select name="entry_type">
|
||||
<option value="buy">Buy</option>
|
||||
<option value="sell">Sell</option>
|
||||
<option value="deposit">Deposit</option>
|
||||
<option value="withdrawal">Withdrawal</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Currency <input type="text" name="currency" placeholder="BTC" required></label>
|
||||
<label>Kraken Pair <input type="text" name="pair" placeholder="XBTUSD" required></label>
|
||||
<label>Amount <input type="text" name="amount" placeholder="0.5" required></label>
|
||||
<label>Price (buy/sell only) <input type="text" name="price" placeholder="42000"></label>
|
||||
<label>Fee <input type="text" name="fee" placeholder="0"></label>
|
||||
<label>Date <input type="date" name="occurred_at" required></label>
|
||||
<button type="submit">Add Entry</button>
|
||||
</form>
|
||||
<p class="hint">The pair must be a market Kraken lists (used to fetch price data), even for a crypto deposit/withdrawal or a coin bought elsewhere. Price is only needed for buy/sell. Leave Pair blank for a real-money (GBP/USD/EUR) deposit or withdrawal — that shows on the Transfers tab instead.</p>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Visible Currencies</h2>
|
||||
{{if .Currencies}}
|
||||
<ul class="toggle-list">
|
||||
{{range .Currencies}}
|
||||
<li>
|
||||
<span>{{.Name}}</span>
|
||||
<form method="post" action="/settings/hidden">
|
||||
<input type="hidden" name="currency" value="{{.Name}}">
|
||||
<input type="hidden" name="hidden" value="{{if .Hidden}}0{{else}}1{{end}}">
|
||||
<button type="submit" class="toggle {{if .Hidden}}is-hidden{{end}}">{{if .Hidden}}Hidden — show{{else}}Visible — hide{{end}}</button>
|
||||
</form>
|
||||
</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
{{else}}
|
||||
<p class="empty">No currencies tracked yet.</p>
|
||||
{{end}}
|
||||
</section>
|
||||
{{end}}
|
||||
@@ -0,0 +1,37 @@
|
||||
{{define "content"}}
|
||||
<section class="hero">
|
||||
<div class="hero-label">Account Funding</div>
|
||||
<div class="hero-sub">Real-money deposits and withdrawals to/from Kraken (GBP, USD, EUR, ...) — how much cash you've put in or taken out, separate from what your crypto is worth. Crypto deposits/withdrawals show on that coin's own page.</div>
|
||||
</section>
|
||||
|
||||
{{if .Transfers}}
|
||||
<div class="table-scroll">
|
||||
<table class="ledger sortable" data-sort-key="transfers">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sort="date">Date</th>
|
||||
<th data-sort="currency">Currency</th>
|
||||
<th data-sort="type">Type</th>
|
||||
<th data-sort="source">Source</th>
|
||||
<th data-sort="amount">Amount</th>
|
||||
<th data-sort="value">Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range .Transfers}}
|
||||
<tr>
|
||||
<td data-label="Date" data-sort-value="{{.OccurredAt.Unix}}">{{dateStr .OccurredAt}}</td>
|
||||
<td data-label="Currency">{{.Currency}}</td>
|
||||
<td data-label="Type"><span class="badge {{.EntryType}}">{{capitalize .EntryType}}</span></td>
|
||||
<td class="source" data-label="Source">{{.Source}}</td>
|
||||
<td class="mono" data-label="Amount" data-sort-value="{{sortVal .Amount}}">{{amt .Amount}}</td>
|
||||
<td class="mono" data-label="Value" data-sort-value="{{sortVal .CurrentValue}}">{{money .CurrentValue}}</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{else}}
|
||||
<p class="empty">No account funding recorded yet.</p>
|
||||
{{end}}
|
||||
{{end}}
|
||||
@@ -0,0 +1,777 @@
|
||||
// Package web serves the dashboard, position-detail, and settings pages.
|
||||
// The dashboard and position pages also expose "panel" fragment endpoints
|
||||
// (just the inner content, no page chrome) that the client-side tab system
|
||||
// and auto-refresh use to swap content without a full page load.
|
||||
package web
|
||||
|
||||
import (
|
||||
"embed"
|
||||
"encoding/base64"
|
||||
"encoding/json"
|
||||
"html/template"
|
||||
"log/slog"
|
||||
"net/http"
|
||||
"strconv"
|
||||
"strings"
|
||||
"time"
|
||||
|
||||
qrcode "github.com/skip2/go-qrcode"
|
||||
|
||||
"cryptomon/internal/authsvc"
|
||||
"cryptomon/internal/kraken"
|
||||
"cryptomon/internal/portfolio"
|
||||
)
|
||||
|
||||
//go:embed templates/*.html
|
||||
var templatesFS embed.FS
|
||||
|
||||
//go:embed static
|
||||
var staticFS embed.FS
|
||||
|
||||
const sessionCookieName = "basis_session"
|
||||
|
||||
type Server struct {
|
||||
svc *portfolio.Service
|
||||
auth *authsvc.Service
|
||||
pollSeconds int
|
||||
dashboard *template.Template
|
||||
position *template.Template
|
||||
transfers *template.Template
|
||||
settings *template.Template
|
||||
account *template.Template
|
||||
login *template.Template
|
||||
}
|
||||
|
||||
func NewServer(svc *portfolio.Service, authSvc *authsvc.Service, pollSeconds int) *Server {
|
||||
funcs := template.FuncMap{
|
||||
"money": func(v float64) string { return money(v, svc.BaseCurrency()) },
|
||||
"curSymbol": func() string { return currencySymbol(svc.BaseCurrency()) },
|
||||
"amt": amt,
|
||||
"pctStr": pctStr,
|
||||
"pctClass": pctClass,
|
||||
"signClass": signClass,
|
||||
"dateStr": dateStr,
|
||||
"holdDuration": holdDuration,
|
||||
"capitalize": capitalize,
|
||||
"sortVal": sortVal,
|
||||
"wsSymbol": kraken.WSSymbol,
|
||||
}
|
||||
parse := func(files ...string) *template.Template {
|
||||
all := append([]string{"templates/base.html"}, files...)
|
||||
return template.Must(template.New("base").Funcs(funcs).ParseFS(templatesFS, all...))
|
||||
}
|
||||
return &Server{
|
||||
svc: svc,
|
||||
auth: authSvc,
|
||||
pollSeconds: pollSeconds,
|
||||
dashboard: parse("templates/dashboard.html", "templates/dashboard_rows.html"),
|
||||
position: parse("templates/position.html"),
|
||||
transfers: parse("templates/transfers.html"),
|
||||
settings: parse("templates/settings.html"),
|
||||
account: parse("templates/account.html"),
|
||||
login: template.Must(template.New("login.html").ParseFS(templatesFS, "templates/login.html")),
|
||||
}
|
||||
}
|
||||
|
||||
func (s *Server) Handler() http.Handler {
|
||||
mux := http.NewServeMux()
|
||||
mux.HandleFunc("GET /{$}", s.handleDashboard)
|
||||
mux.HandleFunc("GET /position/{currency}", s.handlePosition)
|
||||
mux.HandleFunc("GET /transfers", s.handleTransfers)
|
||||
mux.HandleFunc("GET /settings", s.handleSettingsGet)
|
||||
mux.HandleFunc("GET /api/panel/portfolio", s.handlePanelPortfolio)
|
||||
mux.HandleFunc("GET /api/panel/position/{currency}", s.handlePanelPosition)
|
||||
mux.HandleFunc("GET /api/panel/transfers", s.handlePanelTransfers)
|
||||
mux.HandleFunc("GET /api/chart/portfolio", s.handleChartPortfolio)
|
||||
mux.HandleFunc("GET /api/chart/currency/{currency}", s.handleChartCurrency)
|
||||
mux.HandleFunc("GET /api/candles/{currency}", s.handleCandles)
|
||||
mux.HandleFunc("GET /api/summary", s.handleSummary)
|
||||
mux.HandleFunc("POST /api/favourite", s.handleFavourite)
|
||||
mux.HandleFunc("POST /settings/credentials", s.handleSaveCredentials)
|
||||
mux.HandleFunc("POST /settings/purchase", s.handleAddEntry)
|
||||
mux.HandleFunc("POST /settings/hidden", s.handleSetHidden)
|
||||
mux.HandleFunc("POST /settings/base-currency", s.handleSetBaseCurrency)
|
||||
mux.HandleFunc("GET /login", s.handleLoginGet)
|
||||
mux.HandleFunc("POST /login", s.handleLoginPost)
|
||||
mux.HandleFunc("POST /login/mfa", s.handleLoginMFA)
|
||||
mux.HandleFunc("POST /logout", s.handleLogout)
|
||||
mux.HandleFunc("GET /account", s.handleAccountGet)
|
||||
mux.HandleFunc("POST /account/credentials", s.handleAccountCredentials)
|
||||
mux.HandleFunc("POST /account/mfa/enable", s.handleMFAEnable)
|
||||
mux.HandleFunc("POST /account/mfa/confirm", s.handleMFAConfirm)
|
||||
mux.HandleFunc("POST /account/mfa/disable", s.handleMFADisable)
|
||||
mux.Handle("GET /static/", http.FileServerFS(staticFS))
|
||||
return s.authMiddleware(mux)
|
||||
}
|
||||
|
||||
// authMiddleware gates every route except /login and /static/*: no valid
|
||||
// session cookie redirects to /login (or 401s for /api/* so fetch() calls
|
||||
// fail loudly instead of getting an HTML login page as "JSON"), and a valid
|
||||
// session with a pending forced password change is confined to /account
|
||||
// until it's resolved.
|
||||
func (s *Server) authMiddleware(next http.Handler) http.Handler {
|
||||
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
|
||||
path := r.URL.Path
|
||||
if path == "/login" || path == "/login/mfa" || strings.HasPrefix(path, "/static/") {
|
||||
next.ServeHTTP(w, r)
|
||||
return
|
||||
}
|
||||
valid, mustChange := false, false
|
||||
if cookie, err := r.Cookie(sessionCookieName); err == nil {
|
||||
valid, mustChange, _ = s.auth.CheckSession(cookie.Value)
|
||||
}
|
||||
if !valid {
|
||||
if strings.HasPrefix(path, "/api/") {
|
||||
http.Error(w, "unauthorized", http.StatusUnauthorized)
|
||||
return
|
||||
}
|
||||
http.Redirect(w, r, "/login", http.StatusSeeOther)
|
||||
return
|
||||
}
|
||||
if mustChange && path != "/account" && path != "/logout" && !strings.HasPrefix(path, "/account/") {
|
||||
http.Redirect(w, r, "/account", http.StatusSeeOther)
|
||||
return
|
||||
}
|
||||
next.ServeHTTP(w, r)
|
||||
})
|
||||
}
|
||||
|
||||
func (s *Server) setSessionCookie(w http.ResponseWriter, username string, version int) {
|
||||
http.SetCookie(w, &http.Cookie{
|
||||
Name: sessionCookieName,
|
||||
Value: s.auth.NewSession(username, version),
|
||||
Path: "/",
|
||||
HttpOnly: true,
|
||||
SameSite: http.SameSiteLaxMode,
|
||||
MaxAge: int(authsvc.SessionTTL.Seconds()),
|
||||
})
|
||||
}
|
||||
|
||||
func (s *Server) handleLoginGet(w http.ResponseWriter, r *http.Request) {
|
||||
if cookie, err := r.Cookie(sessionCookieName); err == nil {
|
||||
if valid, _, _ := s.auth.CheckSession(cookie.Value); valid {
|
||||
http.Redirect(w, r, "/", http.StatusSeeOther)
|
||||
return
|
||||
}
|
||||
}
|
||||
s.renderLogin(w)
|
||||
}
|
||||
|
||||
// loginStepResponse backs both /login and /login/mfa: the page is a single
|
||||
// form (username+password only) whose JS drives a second step — an in-page
|
||||
// modal asking for the authenticator code — only when the server says MFA
|
||||
// is required, rather than always showing that field up front.
|
||||
type loginStepResponse struct {
|
||||
Error string `json:"error,omitempty"`
|
||||
MFARequired bool `json:"mfa_required,omitempty"`
|
||||
PendingToken string `json:"pending_token,omitempty"`
|
||||
Redirect string `json:"redirect,omitempty"`
|
||||
}
|
||||
|
||||
func loginRedirect(mustChange bool) string {
|
||||
if mustChange {
|
||||
return "/account"
|
||||
}
|
||||
return "/"
|
||||
}
|
||||
|
||||
func (s *Server) handleLoginPost(w http.ResponseWriter, r *http.Request) {
|
||||
if err := r.ParseForm(); err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
username := r.FormValue("username")
|
||||
ok, err := s.auth.VerifyPassword(username, r.FormValue("password"))
|
||||
if err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
if !ok {
|
||||
s.writeJSON(w, loginStepResponse{Error: "Invalid username or password."})
|
||||
return
|
||||
}
|
||||
mustChange, version, mfaEnabled, err := s.auth.LoginStatus()
|
||||
if err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
if mfaEnabled {
|
||||
s.writeJSON(w, loginStepResponse{MFARequired: true, PendingToken: s.auth.NewPendingMFAToken(username)})
|
||||
return
|
||||
}
|
||||
s.setSessionCookie(w, username, version)
|
||||
s.writeJSON(w, loginStepResponse{Redirect: loginRedirect(mustChange)})
|
||||
}
|
||||
|
||||
func (s *Server) handleLoginMFA(w http.ResponseWriter, r *http.Request) {
|
||||
if err := r.ParseForm(); err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
ok, username, mustChange, version, err := s.auth.CompleteMFALogin(r.FormValue("pending_token"), r.FormValue("code"))
|
||||
if err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
if !ok {
|
||||
s.writeJSON(w, loginStepResponse{Error: "Invalid authenticator code."})
|
||||
return
|
||||
}
|
||||
s.setSessionCookie(w, username, version)
|
||||
s.writeJSON(w, loginStepResponse{Redirect: loginRedirect(mustChange)})
|
||||
}
|
||||
|
||||
func (s *Server) handleLogout(w http.ResponseWriter, r *http.Request) {
|
||||
http.SetCookie(w, &http.Cookie{Name: sessionCookieName, Value: "", Path: "/", MaxAge: -1})
|
||||
http.Redirect(w, r, "/login", http.StatusSeeOther)
|
||||
}
|
||||
|
||||
type accountData struct {
|
||||
pageMeta
|
||||
Username string
|
||||
MustChangePassword bool
|
||||
Error string
|
||||
MFAEnabled bool
|
||||
MFAPendingSecret string
|
||||
MFAOtpauthURI string
|
||||
MFAQRDataURI template.URL
|
||||
MFAError string
|
||||
}
|
||||
|
||||
func (s *Server) loadAccount() (accountData, error) {
|
||||
meta, _, err := s.newPageMeta("account", "")
|
||||
if err != nil {
|
||||
return accountData{}, err
|
||||
}
|
||||
username, err := s.auth.Username()
|
||||
if err != nil {
|
||||
return accountData{}, err
|
||||
}
|
||||
mustChange, err := s.auth.MustChangePassword()
|
||||
if err != nil {
|
||||
return accountData{}, err
|
||||
}
|
||||
mfaEnabled, err := s.auth.MFAEnabled()
|
||||
if err != nil {
|
||||
return accountData{}, err
|
||||
}
|
||||
d := accountData{pageMeta: meta, Username: username, MustChangePassword: mustChange, MFAEnabled: mfaEnabled}
|
||||
if !mfaEnabled {
|
||||
secret, uri, ok, err := s.auth.PendingMFASecret()
|
||||
if err != nil {
|
||||
return accountData{}, err
|
||||
}
|
||||
if ok {
|
||||
d.MFAPendingSecret = secret
|
||||
d.MFAOtpauthURI = uri
|
||||
if qr, err := qrDataURI(uri); err == nil {
|
||||
d.MFAQRDataURI = template.URL(qr)
|
||||
} else {
|
||||
slog.Error("generate MFA QR code", "err", err)
|
||||
}
|
||||
}
|
||||
}
|
||||
return d, nil
|
||||
}
|
||||
|
||||
func (s *Server) handleAccountGet(w http.ResponseWriter, r *http.Request) {
|
||||
d, err := s.loadAccount()
|
||||
if err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
s.render(w, s.account, d)
|
||||
}
|
||||
|
||||
func (s *Server) renderAccountError(w http.ResponseWriter, msg string) {
|
||||
d, err := s.loadAccount()
|
||||
if err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
d.Error = msg
|
||||
s.render(w, s.account, d)
|
||||
}
|
||||
|
||||
func (s *Server) renderAccountMFAError(w http.ResponseWriter, msg string) {
|
||||
d, err := s.loadAccount()
|
||||
if err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
d.MFAError = msg
|
||||
s.render(w, s.account, d)
|
||||
}
|
||||
|
||||
func (s *Server) handleAccountCredentials(w http.ResponseWriter, r *http.Request) {
|
||||
if err := r.ParseForm(); err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
currentUsername, err := s.auth.Username()
|
||||
if err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
ok, err := s.auth.VerifyPassword(currentUsername, r.FormValue("current_password"))
|
||||
if err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
if !ok {
|
||||
s.renderAccountError(w, "Current password is incorrect.")
|
||||
return
|
||||
}
|
||||
newUsername := r.FormValue("new_username")
|
||||
version, err := s.auth.SetCredentials(newUsername, r.FormValue("new_password"), r.FormValue("confirm_password"))
|
||||
if err != nil {
|
||||
s.renderAccountError(w, err.Error())
|
||||
return
|
||||
}
|
||||
s.setSessionCookie(w, newUsername, version)
|
||||
http.Redirect(w, r, "/account", http.StatusSeeOther)
|
||||
}
|
||||
|
||||
func (s *Server) handleMFAEnable(w http.ResponseWriter, r *http.Request) {
|
||||
if _, _, err := s.auth.BeginMFA(); err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
http.Redirect(w, r, "/account", http.StatusSeeOther)
|
||||
}
|
||||
|
||||
func (s *Server) handleMFAConfirm(w http.ResponseWriter, r *http.Request) {
|
||||
if err := r.ParseForm(); err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
if err := s.auth.ConfirmMFA(r.FormValue("code")); err != nil {
|
||||
s.renderAccountMFAError(w, err.Error())
|
||||
return
|
||||
}
|
||||
http.Redirect(w, r, "/account", http.StatusSeeOther)
|
||||
}
|
||||
|
||||
func (s *Server) handleMFADisable(w http.ResponseWriter, r *http.Request) {
|
||||
if err := s.auth.DisableMFA(); err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
http.Redirect(w, r, "/account", http.StatusSeeOther)
|
||||
}
|
||||
|
||||
// qrDataURI renders content as a PNG QR code, returned as a data: URI ready
|
||||
// for an <img src>, so no extra route/asset is needed to serve it.
|
||||
func qrDataURI(content string) (string, error) {
|
||||
png, err := qrcode.Encode(content, qrcode.Medium, 240)
|
||||
if err != nil {
|
||||
return "", err
|
||||
}
|
||||
return "data:image/png;base64," + base64.StdEncoding.EncodeToString(png), nil
|
||||
}
|
||||
|
||||
func (s *Server) renderLogin(w http.ResponseWriter) {
|
||||
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
||||
if err := s.login.Execute(w, nil); err != nil {
|
||||
slog.Error("render login", "err", err)
|
||||
}
|
||||
}
|
||||
|
||||
// pageMeta is embedded in every page's data struct so base.html can read
|
||||
// .Page/.CurrentTab/.PollSeconds via Go's promoted-field lookup regardless
|
||||
// of which concrete struct it's rendering.
|
||||
type pageMeta struct {
|
||||
Page string // "portfolio" | "position" | "transfers" | "settings"
|
||||
CurrentTab string // currency code, when Page == "position"
|
||||
PollSeconds int
|
||||
|
||||
// Portfolio totals shown live in the topbar on every page.
|
||||
TotalValue float64
|
||||
TotalPL float64
|
||||
TotalPLPercent float64
|
||||
}
|
||||
|
||||
// newPageMeta builds the pageMeta shared by every page, and returns the
|
||||
// dashboard rows it computed along the way so callers that also need them
|
||||
// (the dashboard page itself) don't run the aggregation twice.
|
||||
func (s *Server) newPageMeta(page, currentTab string) (pageMeta, []portfolio.DashboardRow, error) {
|
||||
rows, err := s.svc.Dashboard(false)
|
||||
if err != nil {
|
||||
return pageMeta{}, nil, err
|
||||
}
|
||||
m := pageMeta{Page: page, CurrentTab: currentTab, PollSeconds: s.pollSeconds}
|
||||
var totalCost float64
|
||||
for _, r := range rows {
|
||||
m.TotalValue += r.CurrentValue
|
||||
totalCost += r.TotalCost
|
||||
}
|
||||
m.TotalPL = m.TotalValue - totalCost
|
||||
if totalCost != 0 {
|
||||
m.TotalPLPercent = m.TotalPL / totalCost * 100
|
||||
}
|
||||
return m, rows, nil
|
||||
}
|
||||
|
||||
type dashboardData struct {
|
||||
pageMeta
|
||||
Rows []portfolio.DashboardRow
|
||||
HasCredentials bool
|
||||
}
|
||||
|
||||
func (s *Server) loadDashboard() (dashboardData, error) {
|
||||
meta, rows, err := s.newPageMeta("portfolio", "")
|
||||
if err != nil {
|
||||
return dashboardData{}, err
|
||||
}
|
||||
return dashboardData{
|
||||
pageMeta: meta,
|
||||
Rows: rows,
|
||||
HasCredentials: s.svc.HasCredentials(),
|
||||
}, nil
|
||||
}
|
||||
|
||||
func (s *Server) handleDashboard(w http.ResponseWriter, r *http.Request) {
|
||||
d, err := s.loadDashboard()
|
||||
if err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
s.render(w, s.dashboard, d)
|
||||
}
|
||||
|
||||
func (s *Server) handlePanelPortfolio(w http.ResponseWriter, r *http.Request) {
|
||||
d, err := s.loadDashboard()
|
||||
if err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
s.renderContent(w, s.dashboard, d)
|
||||
}
|
||||
|
||||
type positionData struct {
|
||||
pageMeta
|
||||
Currency string
|
||||
Entries []portfolio.LedgerRow
|
||||
portfolio.CurrencySummary
|
||||
}
|
||||
|
||||
func (s *Server) loadPosition(currency string) (positionData, error) {
|
||||
entries, err := s.svc.Position(currency)
|
||||
if err != nil {
|
||||
return positionData{}, err
|
||||
}
|
||||
summary, err := s.svc.CurrencySummary(currency)
|
||||
if err != nil {
|
||||
return positionData{}, err
|
||||
}
|
||||
meta, _, err := s.newPageMeta("position", currency)
|
||||
if err != nil {
|
||||
return positionData{}, err
|
||||
}
|
||||
return positionData{
|
||||
pageMeta: meta,
|
||||
Currency: currency,
|
||||
Entries: entries,
|
||||
CurrencySummary: summary,
|
||||
}, nil
|
||||
}
|
||||
|
||||
func (s *Server) handlePosition(w http.ResponseWriter, r *http.Request) {
|
||||
d, err := s.loadPosition(r.PathValue("currency"))
|
||||
if err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
s.render(w, s.position, d)
|
||||
}
|
||||
|
||||
func (s *Server) handlePanelPosition(w http.ResponseWriter, r *http.Request) {
|
||||
d, err := s.loadPosition(r.PathValue("currency"))
|
||||
if err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
s.renderContent(w, s.position, d)
|
||||
}
|
||||
|
||||
type transfersData struct {
|
||||
pageMeta
|
||||
Transfers []portfolio.TransferRow
|
||||
}
|
||||
|
||||
func (s *Server) loadTransfers() (transfersData, error) {
|
||||
rows, err := s.svc.Transfers()
|
||||
if err != nil {
|
||||
return transfersData{}, err
|
||||
}
|
||||
meta, _, err := s.newPageMeta("transfers", "")
|
||||
if err != nil {
|
||||
return transfersData{}, err
|
||||
}
|
||||
return transfersData{
|
||||
pageMeta: meta,
|
||||
Transfers: rows,
|
||||
}, nil
|
||||
}
|
||||
|
||||
func (s *Server) handleTransfers(w http.ResponseWriter, r *http.Request) {
|
||||
d, err := s.loadTransfers()
|
||||
if err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
s.render(w, s.transfers, d)
|
||||
}
|
||||
|
||||
func (s *Server) handlePanelTransfers(w http.ResponseWriter, r *http.Request) {
|
||||
d, err := s.loadTransfers()
|
||||
if err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
s.renderContent(w, s.transfers, d)
|
||||
}
|
||||
|
||||
type currencyRow struct {
|
||||
Name string
|
||||
Hidden bool
|
||||
}
|
||||
|
||||
type settingsData struct {
|
||||
pageMeta
|
||||
HasCredentials bool
|
||||
BaseCurrency string
|
||||
Currencies []currencyRow
|
||||
}
|
||||
|
||||
func (s *Server) loadSettings() (settingsData, error) {
|
||||
rows, err := s.svc.Dashboard(true)
|
||||
if err != nil {
|
||||
return settingsData{}, err
|
||||
}
|
||||
meta, _, err := s.newPageMeta("settings", "")
|
||||
if err != nil {
|
||||
return settingsData{}, err
|
||||
}
|
||||
d := settingsData{
|
||||
pageMeta: meta,
|
||||
HasCredentials: s.svc.HasCredentials(),
|
||||
BaseCurrency: s.svc.BaseCurrency(),
|
||||
}
|
||||
for _, r := range rows {
|
||||
d.Currencies = append(d.Currencies, currencyRow{Name: r.Currency, Hidden: r.Hidden})
|
||||
}
|
||||
return d, nil
|
||||
}
|
||||
|
||||
func (s *Server) handleSettingsGet(w http.ResponseWriter, r *http.Request) {
|
||||
d, err := s.loadSettings()
|
||||
if err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
s.render(w, s.settings, d)
|
||||
}
|
||||
|
||||
func (s *Server) handleSaveCredentials(w http.ResponseWriter, r *http.Request) {
|
||||
if err := r.ParseForm(); err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
apiKey := r.FormValue("api_key")
|
||||
apiSecret := r.FormValue("api_secret")
|
||||
if apiKey != "" && apiSecret != "" {
|
||||
if err := s.svc.SaveCredentials(apiKey, apiSecret); err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
}
|
||||
http.Redirect(w, r, "/settings", http.StatusSeeOther)
|
||||
}
|
||||
|
||||
var validEntryTypes = map[string]bool{"buy": true, "sell": true, "deposit": true, "withdrawal": true}
|
||||
|
||||
func (s *Server) handleAddEntry(w http.ResponseWriter, r *http.Request) {
|
||||
if err := r.ParseForm(); err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
entryType := r.FormValue("entry_type")
|
||||
currency := r.FormValue("currency")
|
||||
pair := r.FormValue("pair")
|
||||
amount, _ := strconv.ParseFloat(r.FormValue("amount"), 64)
|
||||
price, _ := strconv.ParseFloat(r.FormValue("price"), 64)
|
||||
fee, _ := strconv.ParseFloat(r.FormValue("fee"), 64)
|
||||
occurredAt, err := time.Parse("2006-01-02", r.FormValue("occurred_at"))
|
||||
if err != nil {
|
||||
occurredAt = time.Now()
|
||||
}
|
||||
needsPrice := entryType == "buy" || entryType == "sell"
|
||||
needsPair := !kraken.IsFiat(currency) // a real-money (fiat) deposit/withdrawal has no market to price against
|
||||
if validEntryTypes[entryType] && currency != "" && (!needsPair || pair != "") && amount > 0 && (!needsPrice || price > 0) {
|
||||
if !needsPair {
|
||||
pair = ""
|
||||
}
|
||||
if err := s.svc.AddManualEntry(entryType, currency, pair, amount, price, fee, occurredAt); err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
}
|
||||
http.Redirect(w, r, "/settings", http.StatusSeeOther)
|
||||
}
|
||||
|
||||
func (s *Server) handleSetHidden(w http.ResponseWriter, r *http.Request) {
|
||||
if err := r.ParseForm(); err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
currency := r.FormValue("currency")
|
||||
hidden := r.FormValue("hidden") == "1"
|
||||
if currency != "" {
|
||||
if err := s.svc.SetHidden(currency, hidden); err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
}
|
||||
http.Redirect(w, r, "/settings", http.StatusSeeOther)
|
||||
}
|
||||
|
||||
func (s *Server) handleSetBaseCurrency(w http.ResponseWriter, r *http.Request) {
|
||||
if err := r.ParseForm(); err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
if v := r.FormValue("base_currency"); v != "" {
|
||||
if err := s.svc.SetBaseCurrency(v); err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
}
|
||||
http.Redirect(w, r, "/settings", http.StatusSeeOther)
|
||||
}
|
||||
|
||||
// handleFavourite is called via fetch() from inside the tab panels, so it
|
||||
// responds with a status code only rather than redirecting.
|
||||
func (s *Server) handleFavourite(w http.ResponseWriter, r *http.Request) {
|
||||
if err := r.ParseForm(); err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
currency := r.FormValue("currency")
|
||||
if currency == "" {
|
||||
http.Error(w, "currency required", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
if err := s.svc.SetFavourite(currency, r.FormValue("favourite") == "1"); err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
w.WriteHeader(http.StatusNoContent)
|
||||
}
|
||||
|
||||
type summaryPosition struct {
|
||||
WSSymbol string `json:"ws_symbol"`
|
||||
Holdings float64 `json:"holdings"`
|
||||
Cost float64 `json:"cost"`
|
||||
Value float64 `json:"value"`
|
||||
FXRate float64 `json:"fx_rate"`
|
||||
}
|
||||
|
||||
type summaryResponse struct {
|
||||
TotalValue float64 `json:"total_value"`
|
||||
TotalPL float64 `json:"total_pl"`
|
||||
TotalPLPercent float64 `json:"total_pl_percent"`
|
||||
Positions []summaryPosition `json:"positions"`
|
||||
}
|
||||
|
||||
// handleSummary backs the topbar's live portfolio total, which is shown on
|
||||
// every page independent of which tab/panel is open.
|
||||
func (s *Server) handleSummary(w http.ResponseWriter, r *http.Request) {
|
||||
meta, rows, err := s.newPageMeta("", "")
|
||||
if err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
resp := summaryResponse{
|
||||
TotalValue: meta.TotalValue,
|
||||
TotalPL: meta.TotalPL,
|
||||
TotalPLPercent: meta.TotalPLPercent,
|
||||
Positions: make([]summaryPosition, 0, len(rows)),
|
||||
}
|
||||
for _, row := range rows {
|
||||
resp.Positions = append(resp.Positions, summaryPosition{
|
||||
WSSymbol: kraken.WSSymbol(row.Currency, row.Quote),
|
||||
Holdings: row.TotalAmount,
|
||||
Cost: row.TotalCost,
|
||||
Value: row.CurrentValue,
|
||||
FXRate: row.FXRate,
|
||||
})
|
||||
}
|
||||
s.writeJSON(w, resp)
|
||||
}
|
||||
|
||||
func (s *Server) handleChartPortfolio(w http.ResponseWriter, r *http.Request) {
|
||||
points, err := s.svc.PortfolioHistory(chartRange(r))
|
||||
if err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
if points == nil {
|
||||
points = []portfolio.ChartPoint{}
|
||||
}
|
||||
s.writeJSON(w, points)
|
||||
}
|
||||
|
||||
func (s *Server) handleChartCurrency(w http.ResponseWriter, r *http.Request) {
|
||||
points, err := s.svc.CurrencyHistory(r.PathValue("currency"), chartRange(r))
|
||||
if err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
if points == nil {
|
||||
points = []portfolio.ChartPoint{}
|
||||
}
|
||||
s.writeJSON(w, points)
|
||||
}
|
||||
|
||||
func (s *Server) handleCandles(w http.ResponseWriter, r *http.Request) {
|
||||
series, err := s.svc.CandleSeries(r.PathValue("currency"), chartRange(r))
|
||||
if err != nil {
|
||||
s.fail(w, err)
|
||||
return
|
||||
}
|
||||
s.writeJSON(w, series)
|
||||
}
|
||||
|
||||
func chartRange(r *http.Request) string {
|
||||
if v := r.URL.Query().Get("range"); v != "" {
|
||||
return v
|
||||
}
|
||||
return "all"
|
||||
}
|
||||
|
||||
func (s *Server) writeJSON(w http.ResponseWriter, v any) {
|
||||
w.Header().Set("Content-Type", "application/json")
|
||||
if err := json.NewEncoder(w).Encode(v); err != nil {
|
||||
slog.Error("encode json", "err", err)
|
||||
}
|
||||
}
|
||||
|
||||
func (s *Server) render(w http.ResponseWriter, t *template.Template, data any) {
|
||||
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
||||
if err := t.ExecuteTemplate(w, "base", data); err != nil {
|
||||
slog.Error("render template", "err", err)
|
||||
}
|
||||
}
|
||||
|
||||
func (s *Server) renderContent(w http.ResponseWriter, t *template.Template, data any) {
|
||||
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
||||
if err := t.ExecuteTemplate(w, "content", data); err != nil {
|
||||
slog.Error("render content", "err", err)
|
||||
}
|
||||
}
|
||||
|
||||
func (s *Server) fail(w http.ResponseWriter, err error) {
|
||||
slog.Error("handler error", "err", err)
|
||||
http.Error(w, "something went wrong: "+err.Error(), http.StatusInternalServerError)
|
||||
}
|
||||
Reference in New Issue
Block a user