|
|
<!doctype html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="utf-8" /> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" /> |
|
|
<title>MPTrading Admin</title> |
|
|
<style> |
|
|
:root{ |
|
|
--bg:#0b1020; |
|
|
--panel:#111a33; |
|
|
--panel2:#0f1730; |
|
|
--text:#e7eaf3; |
|
|
--muted:#aab2d5; |
|
|
--line:#233055; |
|
|
--green:#22c55e; |
|
|
--red:#ef4444; |
|
|
--blue:#60a5fa; |
|
|
} |
|
|
*{ box-sizing:border-box; } |
|
|
body{ |
|
|
margin:0; |
|
|
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; |
|
|
background:var(--bg); |
|
|
color:var(--text); |
|
|
} |
|
|
header{ |
|
|
height:52px; |
|
|
display:flex; |
|
|
align-items:center; |
|
|
justify-content:space-between; |
|
|
padding:0 14px; |
|
|
border-bottom:1px solid var(--line); |
|
|
background:rgba(0,0,0,0.15); |
|
|
gap:12px; |
|
|
} |
|
|
header .title{ |
|
|
font-weight:700; |
|
|
letter-spacing:0.3px; |
|
|
white-space:nowrap; |
|
|
} |
|
|
.small{ font-size:12px; color:var(--muted); } |
|
|
code{ color:#c7d2fe; } |
|
|
main{ |
|
|
padding:12px; |
|
|
display:grid; |
|
|
grid-template-columns: 1.2fr 1fr; |
|
|
gap:12px; |
|
|
height: calc(100vh - 52px); |
|
|
} |
|
|
@media (max-width: 1000px){ |
|
|
main{ grid-template-columns: 1fr; height:auto; } |
|
|
} |
|
|
.card{ |
|
|
background:var(--panel); |
|
|
border:1px solid var(--line); |
|
|
border-radius:10px; |
|
|
overflow:hidden; |
|
|
display:flex; |
|
|
flex-direction:column; |
|
|
min-height:0; |
|
|
} |
|
|
.card h2{ |
|
|
margin:0; |
|
|
padding:10px 12px; |
|
|
font-size:13px; |
|
|
color:var(--muted); |
|
|
text-transform:uppercase; |
|
|
letter-spacing:0.08em; |
|
|
border-bottom:1px solid var(--line); |
|
|
background:var(--panel2); |
|
|
} |
|
|
.content{ |
|
|
padding:12px; |
|
|
overflow:auto; |
|
|
min-height:0; |
|
|
} |
|
|
label{ |
|
|
display:block; |
|
|
font-size:12px; |
|
|
color:var(--muted); |
|
|
margin:10px 0 6px; |
|
|
} |
|
|
input, textarea, button{ |
|
|
font:inherit; |
|
|
border-radius:10px; |
|
|
border:1px solid var(--line); |
|
|
background:#0c1430; |
|
|
color:var(--text); |
|
|
padding:10px 12px; |
|
|
} |
|
|
textarea{ |
|
|
width:100%; |
|
|
min-height:260px; |
|
|
resize:vertical; |
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; |
|
|
font-size:12px; |
|
|
line-height:1.35; |
|
|
} |
|
|
input{ width:100%; } |
|
|
.row{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; } |
|
|
.row3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px; } |
|
|
.actions{ |
|
|
display:flex; |
|
|
gap:10px; |
|
|
flex-wrap:wrap; |
|
|
margin-top:10px; |
|
|
align-items:center; |
|
|
} |
|
|
button{ cursor:pointer; } |
|
|
button.primary:hover{ background:rgba(96,165,250,0.12); } |
|
|
button.danger{ border-color:rgba(239,68,68,0.5); } |
|
|
button.danger:hover{ background:rgba(239,68,68,0.12); } |
|
|
table{ |
|
|
width:100%; |
|
|
border-collapse:collapse; |
|
|
font-size:13px; |
|
|
} |
|
|
th, td{ |
|
|
text-align:left; |
|
|
padding:8px 6px; |
|
|
border-bottom:1px solid rgba(35,48,85,0.6); |
|
|
vertical-align:top; |
|
|
} |
|
|
th{ color:var(--muted); font-weight:600; } |
|
|
td.mono{ |
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; |
|
|
} |
|
|
.ok{ color:var(--green); } |
|
|
.err{ color:var(--red); } |
|
|
.hint{ |
|
|
font-size:12px; |
|
|
color:var(--muted); |
|
|
margin-top:6px; |
|
|
line-height:1.35; |
|
|
} |
|
|
.pill{ |
|
|
display:inline-block; |
|
|
padding:2px 8px; |
|
|
border-radius:999px; |
|
|
border:1px solid var(--line); |
|
|
font-size:12px; |
|
|
color:var(--muted); |
|
|
background:rgba(255,255,255,0.02); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<header> |
|
|
<div class="title">MPTrading Admin</div> |
|
|
<div class="small"> |
|
|
Endpoints: |
|
|
<code>/admin/state</code>, <code>/admin/load_scenario</code>, <code>/admin/add_event</code>, <code>/admin/clear_events</code> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main> |
|
|
|
|
|
<section class="card"> |
|
|
<h2>Scenario loader</h2> |
|
|
<div class="content"> |
|
|
<label>Admin token (sent as <code>X-ADMIN-TOKEN</code>)</label> |
|
|
<input id="token" type="password" placeholder="Enter ADMIN_TOKEN" autocomplete="off" /> |
|
|
|
|
|
<div class="row"> |
|
|
<div> |
|
|
<label>Market length override (optional)</label> |
|
|
<input id="marketLength" type="number" min="600" step="1" placeholder="Leave blank = auto" /> |
|
|
<div class="hint"> |
|
|
Blank = auto-size to at least <span class="pill">600</span> and at least the highest scenario day + 1. |
|
|
Set a number to force a specific length (minimum 600). |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label>Server state</label> |
|
|
<div class="small"> |
|
|
Day: <span class="mono" id="curDay">--</span><br/> |
|
|
Vol: <span class="mono" id="curVol">--</span><br/> |
|
|
Market length: <span class="mono" id="curMktLen">--</span><br/> |
|
|
Tick rate: <span class="mono" id="curTickRate">--</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<label>Scenario JSON</label> |
|
|
<textarea id="scenario" spellcheck="false"></textarea> |
|
|
|
|
|
<div class="actions"> |
|
|
<button class="primary" id="loadBtn">Load scenario</button> |
|
|
<button class="danger" id="clearBtn">Clear events</button> |
|
|
<button id="refreshBtn">Refresh state</button> |
|
|
<span id="msg" class="small"></span> |
|
|
</div> |
|
|
|
|
|
<div class="small" style="margin-top:12px;"> |
|
|
Scenario format: |
|
|
<pre class="small" style="white-space:pre-wrap;margin:8px 0 0;color:var(--muted);"> |
|
|
{ |
|
|
"name": "FOMC week", |
|
|
"startDay": 0, |
|
|
"basePrice": 100.0, |
|
|
"defaultVolatility": 0.8, |
|
|
"events": [ |
|
|
{"day": 20, "shockPct": 5.0, "volatility": 1.4, "news": "Rumor of rate cut"} |
|
|
] |
|
|
} |
|
|
</pre> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="card"> |
|
|
<h2>Add event schedule</h2> |
|
|
<div class="content"> |
|
|
<div class="row3"> |
|
|
<div> |
|
|
<label>Offset ticks ahead</label> |
|
|
<input id="offset" type="number" value="10" min="0" step="1" /> |
|
|
</div> |
|
|
<div> |
|
|
<label>Shock % (e.g. 5 or -3)</label> |
|
|
<input id="shockPct" type="number" value="5" step="0.1" /> |
|
|
</div> |
|
|
<div> |
|
|
<label>Volatility (optional)</label> |
|
|
<input id="vol" type="number" placeholder="leave blank" step="0.1" /> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<label>News (optional)</label> |
|
|
<input id="news" type="text" placeholder="Headline to broadcast at that tick" /> |
|
|
|
|
|
<div class="actions"> |
|
|
<button class="primary" id="addBtn">Add event</button> |
|
|
</div> |
|
|
|
|
|
<div style="height:12px;"></div> |
|
|
|
|
|
<table> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>Day</th> |
|
|
<th>Shock</th> |
|
|
<th>Vol</th> |
|
|
<th>News</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="eventsBody"> |
|
|
<tr><td colspan="4" class="small">No events loaded.</td></tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<script> |
|
|
const id = (x) => document.getElementById(x); |
|
|
|
|
|
const token = id("token"); |
|
|
const scenario = id("scenario"); |
|
|
const marketLength = id("marketLength"); |
|
|
|
|
|
const curDay = id("curDay"); |
|
|
const curVol = id("curVol"); |
|
|
const curMktLen = id("curMktLen"); |
|
|
const curTickRate = id("curTickRate"); |
|
|
|
|
|
const msg = id("msg"); |
|
|
const eventsBody = id("eventsBody"); |
|
|
|
|
|
const loadBtn = id("loadBtn"); |
|
|
const clearBtn = id("clearBtn"); |
|
|
const refreshBtn = id("refreshBtn"); |
|
|
const addBtn = id("addBtn"); |
|
|
|
|
|
const offset = id("offset"); |
|
|
const shockPct = id("shockPct"); |
|
|
const vol = id("vol"); |
|
|
const news = id("news"); |
|
|
|
|
|
function setMsg(text, ok = true){ |
|
|
msg.textContent = text; |
|
|
msg.className = ok ? "small ok" : "small err"; |
|
|
} |
|
|
|
|
|
function headers(){ |
|
|
const t = token.value; |
|
|
return { |
|
|
"Content-Type": "application/json", |
|
|
"X-ADMIN-TOKEN": t |
|
|
}; |
|
|
} |
|
|
|
|
|
async function apiGet(path){ |
|
|
const r = await fetch(path, { method: "GET", headers: headers() }); |
|
|
const txt = await r.text(); |
|
|
let data = null; |
|
|
try { data = JSON.parse(txt); } catch { data = { raw: txt }; } |
|
|
if (!r.ok) throw new Error((data && data.detail) ? data.detail : ("HTTP " + r.status)); |
|
|
return data; |
|
|
} |
|
|
|
|
|
async function apiPost(path, body){ |
|
|
const r = await fetch(path, { method: "POST", headers: headers(), body: JSON.stringify(body) }); |
|
|
const txt = await r.text(); |
|
|
let data = null; |
|
|
try { data = JSON.parse(txt); } catch { data = { raw: txt }; } |
|
|
if (!r.ok) throw new Error((data && data.detail) ? data.detail : ("HTTP " + r.status)); |
|
|
return data; |
|
|
} |
|
|
|
|
|
function escapeHtml(s){ |
|
|
return String(s).replace(/[&<>"']/g, (c) => ({ |
|
|
"&":"&","<":"<",">":">",'"':""","'":"'" |
|
|
}[c])); |
|
|
} |
|
|
|
|
|
function renderEvents(events){ |
|
|
const tb = eventsBody; |
|
|
tb.innerHTML = ""; |
|
|
if (!events || !events.length){ |
|
|
tb.innerHTML = '<tr><td colspan="4" class="small">No events loaded.</td></tr>'; |
|
|
return; |
|
|
} |
|
|
for (const e of events){ |
|
|
const tr = document.createElement("tr"); |
|
|
const shock = Number(e.shockPct || 0).toFixed(2); |
|
|
const v = (e.volatility === null || e.volatility === undefined) ? "" : Number(e.volatility).toFixed(2); |
|
|
tr.innerHTML = ` |
|
|
<td class="mono">${Number(e.day)}</td> |
|
|
<td class="mono">${shock}</td> |
|
|
<td class="mono">${v}</td> |
|
|
<td>${escapeHtml(e.news || "")}</td> |
|
|
`; |
|
|
tb.appendChild(tr); |
|
|
} |
|
|
} |
|
|
|
|
|
async function refresh(){ |
|
|
const st = await apiGet("/admin/state"); |
|
|
curDay.textContent = st.day; |
|
|
curVol.textContent = st.currentVolatility; |
|
|
curMktLen.textContent = st.marketLength; |
|
|
curTickRate.textContent = st.tickRate; |
|
|
renderEvents(st.events); |
|
|
} |
|
|
|
|
|
|
|
|
scenario.value = JSON.stringify({ |
|
|
name: "Example scenario", |
|
|
startDay: 0, |
|
|
basePrice: 100.0, |
|
|
defaultVolatility: 0.8, |
|
|
events: [ |
|
|
{ day: 20, shockPct: 5.0, volatility: 1.4, news: "Rumor of rate cut" }, |
|
|
{ day: 30, shockPct: -3.0, volatility: 2.0, news: "Unexpected hike" } |
|
|
] |
|
|
}, null, 2); |
|
|
|
|
|
refreshBtn.addEventListener("click", async () => { |
|
|
try{ |
|
|
await refresh(); |
|
|
setMsg("State refreshed."); |
|
|
}catch(e){ |
|
|
setMsg(e.message, false); |
|
|
} |
|
|
}); |
|
|
|
|
|
clearBtn.addEventListener("click", async () => { |
|
|
try{ |
|
|
await apiPost("/admin/clear_events", {}); |
|
|
await refresh(); |
|
|
setMsg("Events cleared."); |
|
|
}catch(e){ |
|
|
setMsg(e.message, false); |
|
|
} |
|
|
}); |
|
|
|
|
|
loadBtn.addEventListener("click", async () => { |
|
|
try{ |
|
|
const obj = JSON.parse(scenario.value); |
|
|
|
|
|
const ml = marketLength.value.trim(); |
|
|
if (ml){ |
|
|
obj.marketLength = Number(ml); |
|
|
} else { |
|
|
delete obj.marketLength; |
|
|
} |
|
|
|
|
|
const res = await apiPost("/admin/load_scenario", obj); |
|
|
await refresh(); |
|
|
setMsg(`Scenario loaded. startDay=${res.startDay}, eventsLoaded=${res.eventsLoaded}, marketLength=${res.marketLength} (${res.marketLengthMode})`); |
|
|
}catch(e){ |
|
|
setMsg(e.message, false); |
|
|
} |
|
|
}); |
|
|
|
|
|
addBtn.addEventListener("click", async () => { |
|
|
try{ |
|
|
const off = Number(offset.value); |
|
|
const sh = Number(shockPct.value); |
|
|
|
|
|
const volRaw = vol.value.trim(); |
|
|
const volatility = volRaw ? Number(volRaw) : null; |
|
|
|
|
|
const n = news.value.trim(); |
|
|
|
|
|
const body = { offset: off, shockPct: sh }; |
|
|
if (volatility !== null && Number.isFinite(volatility)) body.volatility = volatility; |
|
|
if (n) body.news = n; |
|
|
|
|
|
await apiPost("/admin/add_event", body); |
|
|
await refresh(); |
|
|
setMsg("Event added."); |
|
|
}catch(e){ |
|
|
setMsg(e.message, false); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
refresh().catch(() => {}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
