STONKS/templates/portfoliograph.html

112 lines
2.3 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Portfolio Debug View</title>
<link rel="stylesheet" href="/static/style.css">
<style>
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
.json-box {
flex: 1;
background: #0f1115;
border: 1px solid #2a2f3a;
border-radius: 8px;
padding: 15px;
overflow: auto;
white-space: pre;
font-family: monospace;
font-size: 13px;
margin-top: 10px;
}
.error {
color: #ff6b6b;
padding: 15px;
}
.meta {
font-size: 12px;
color: #9aa4b2;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="layout">
<!-- SIDEBAR -->
<div class="sidebar">
<div class="nav-item">Dashboard</div>
<div class="nav-item active">Debug View</div>
<div class="nav-item">Settings</div>
</div>
<!-- CONTENT -->
<div class="content">
<div class="page">
<div class="header">
<h2 class="section-title">Portfolio Debug View</h2>
<a href="/">Back</a>
</div>
<div class="meta" id="meta"></div>
<div id="output" class="json-box">Loading...</div>
</div>
</div>
</div>
<script>
function getParams() {
const url = new URL(window.location.href);
return {
tickers: url.searchParams.get("ticker"),
uuid: url.searchParams.get("uuid")
};
}
async function loadData() {
const { tickers, uuid } = getParams();
const meta = document.getElementById("meta");
const output = document.getElementById("output");
if (!tickers || !uuid) {
output.innerHTML = "Missing ?ticker or ?uuid parameter";
return;
}
meta.innerText = `Requesting: ticker=${tickers} | uuid=${uuid}`;
try {
const res = await fetch(
`/api/portfolio?ticker=${encodeURIComponent(tickers)}&uuid=${encodeURIComponent(uuid)}`
);
const data = await res.json();
output.innerText = JSON.stringify(data, null, 4);
} catch (err) {
output.innerHTML = `<div class="error">Error loading data: ${err}</div>`;
}
}
loadData();
</script>
</body>
</html>