| <!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> |
|
|
