Spaces:

Almaatla
/

MPTrading

Sleeping

App Files Files Community

Almaatla commited on Dec 24, 2025

Commit

1d771a0

verified ·

1 Parent(s): 811d19d

Create admin.html

Browse files

Files changed (1) hide show

admin.html +260 -0

admin.html ADDED Viewed

	@@ -0,0 +1,260 @@

+<!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); }
+    header .title{ font-weight:700; letter-spacing:0.3px; }
+    main{ padding:12px; display:grid; grid-template-columns: 1.2fr 1fr; gap:12px; height: calc(100vh - 52px); }
+    .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; }
+    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; }
+    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); }
+    th{ color:var(--muted); font-weight:600; }
+    td.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
+    .small{ font-size:12px; color:var(--muted); }
+    .ok{ color:var(--green); }
+    .err{ color:var(--red); }
+    code{ color:#c7d2fe; }
+  </style>
+</head>
+<body>
+<header>
+  <div class="title">MPTrading Admin</div>
+  <div class="small">Endpoints: <code>/admin/load_scenario</code>, <code>/admin/add_event</code>, <code>/admin/state</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" />
+      <label>Scenario JSON</label>
+      <textarea id="scenario"></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>
+      </div>
+      <div id="msg" class="small" style="margin-top:10px;"></div>
+      <div class="small" style="margin-top:10px;">
+        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>
+      <div class="small">
+        Current day: <span class="mono" id="curDay">--</span> · Current volatility: <span class="mono" id="curVol">--</span>
+      </div>
+      <div style="height:10px"></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) => document.getElementById(id);
+  function setMsg(text, ok=true){
+    $("msg").textContent = text;
+    $("msg").className = "small " + (ok ? "ok" : "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 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");
+      tr.innerHTML = `
+        <td class="mono">${e.day}</td>
+        <td class="mono">${Number(e.shockPct || 0).toFixed(2)}</td>
+        <td class="mono">${(e.volatility === null || e.volatility === undefined) ? "" : Number(e.volatility).toFixed(2)}</td>
+        <td>${escapeHtml(e.news || "")}</td>
+      `;
+      tb.appendChild(tr);
+    }
+  }
+  function escapeHtml(s){
+    return String(s).replace(/[&<>"']/g, (c) => ({
+      "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#039;"
+    }[c]));
+  }
+  async function refresh(){
+    const st = await apiGet("/admin/state");
+    $("curDay").textContent = st.day;
+    $("curVol").textContent = st.currentVolatility;
+    renderEvents(st.events || []);
+  }
+  // Default scenario template in textarea
+  $("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 res = await apiPost("/admin/load_scenario", obj);
+      await refresh();
+      setMsg(`Scenario loaded. startDay=${res.startDay}, eventsLoaded=${res.eventsLoaded}`);
+    } catch(e) {
+      setMsg(e.message, false);
+    }
+  });
+  $("addBtn").addEventListener("click", async () => {
+    try {
+      const offset = Number($("offset").value);
+      const shockPct = Number($("shockPct").value);
+      const volRaw = ($("vol").value || "").trim();
+      const volatility = volRaw === "" ? null : Number(volRaw);
+      const news = ($("news").value || "").trim();
+      const body = { offset, shockPct };
+      if (volatility !== null && Number.isFinite(volatility)) body.volatility = volatility;
+      if (news) body.news = news;
+      await apiPost("/admin/add_event", body);
+      await refresh();
+      setMsg("Event added.");
+    } catch(e) {
+      setMsg(e.message, false);
+    }
+  });
+  // Initial
+  refresh().catch(() => {
+    // likely missing token; leave quiet
+  });
+</script>
+</body>
+</html>