ACIL FM

Nama	Ukuran	Aksi
css	-	Open
.htaccess	647 B	View DL Edit
breadth.html	13 MB	View DL Edit
eslint.config.mjs	803 B	View DL Edit
guide_1.html	18.76 MB	View DL Edit
guide_market.html	18.76 MB	View DL Edit
guide_ranktop5.html	29.76 MB	View DL Edit
index.html	31.38 MB	View DL Edit
ls-bias.html	18.24 MB	View DL Edit
opsdeck-basic.html	7.11 MB	View DL Edit
opsdeck.html	4.96 MB	View DL Edit
rank_top5.html	24.79 MB	View DL Edit
risk.html	13.32 MB	View DL Edit
trade.html	13.87 MB	View DL Edit

Edit file: /home/benbot/public_html/monitor/opsdeck-basic.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>OpsDeck — Basic</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      :root {
        --bg: #0b0f14;
        --panel: #0f1520;
        --line: #243041;
        --fg: #e6eef7;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--fg);
        font-family:
          system-ui,
          Segoe UI,
          Roboto,
          Helvetica,
          Arial,
          sans-serif;
      }
      .wrap {
        max-width: 1280px;
        margin: 0 auto;
        padding: 16px;
      }
      .bar {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 12px;
        flex-wrap: wrap;
      }
      input,
      button {
        background: #121822;
        border: 1px solid var(--line);
        color: var(--fg);
        border-radius: 8px;
        padding: 8px;
      }
      .grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 12px;
      }
      .card {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 12px;
        min-height: 90px;
      }
      .muted {
        opacity: 0.7;
        font-size: 12px;
      }
      .dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 6px;
      }
      .ok {
        background: #2ecc71;
      }
      .err {
        background: #e74c3c;
      }
      .warn {
        background: #f1c40f;
      }
      .idle {
        background: #7f8c8d;
      }
      pre {
        white-space: pre-wrap;
        font-family: ui-monospace, Consolas, monospace;
        font-size: 12px;
        line-height: 1.4;
        margin: 0;
      }
      .btn {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="bar">
        <strong>OpsDeck • Basic</strong>
        <label
          >Server:
          <input id="base" value="http://127.0.0.1:8790" size="30" />
        </label>
        <button class="btn" id="connectBtn">Connect</button>
        <button class="btn" id="pingBtn">Send Test Log</button>
        <span id="status" class="muted"
          ><span class="dot idle"></span>disconnected</span
        >
        <span id="healthNote" class="muted"></span>
      </div>

<div class="card" style="grid-column: span 4">
          <h3>Health</h3>
          <div id="health">—</div>
          <div class="muted">/health auto-refresh every 5s</div>
        </div>

<div class="card" style="grid-column: span 12; min-height: 200px">
          <h3>Live Events</h3>
          <pre id="tape">(connect to start SSE stream)</pre>
        </div>
      </div>
    </div>

<script type="module">
      import createPnlCard from "./widgets/pnl-card.js";

const $ = (s) => document.querySelector(s);
      const statusEl = $("#status");
      const tape = $("#tape");
      const pnlRoot = $("#pnlCard");

let es = null; // EventSource
      let healthTimer = 0; // polling id
      const pnl = createPnlCard(pnlRoot, { title: "PnL", currency: "USDT" });

function setStatus(kind, text) {
        statusEl.innerHTML =
          `<span class="dot ${kind}"></span>` + (text || kind);
      }

async function pollHealth(base) {
        try {
          const r = await fetch(base.replace(/\/$/, "") + "/health", {
            cache: "no-store",
          });
          if (!r.ok) throw new Error(r.status);
          const j = await r.json();
          $("#health").textContent = JSON.stringify(j);
          $("#healthNote").textContent = "health OK";
          setStatus("ok", "connected");
        } catch (e) {
          $("#healthNote").textContent = "health error: " + e;
          setStatus("err", "health error");
        }
      }

function connectSSE(base) {
        if (es) es.close();
        const url = base.replace(/\/$/, "") + "/events";
        tape.textContent = "";
        setStatus("warn", "connecting…");

try {
          es = new EventSource(url);
        } catch (e) {
          setStatus("err", "SSE init error");
          return;
        }

es.addEventListener("open", () => setStatus("ok", "connected"));
        es.addEventListener("error", () => setStatus("warn", "retrying…"));

// generic message
        es.onmessage = (ev) => {
          try {
            const data = ev.data ? JSON.parse(ev.data) : null;
            tape.textContent =
              `[${new Date().toLocaleTimeString()}] ${JSON.stringify(data)}\n` +
              tape.textContent;
          } catch {
            tape.textContent =
              `[${new Date().toLocaleTimeString()}] ${ev.data}\n` +
              tape.textContent;
          }
        };

// heartbeat
        es.addEventListener("heartbeat", (ev) => {
          try {
            const hb = JSON.parse(ev.data || "{}");
            tape.textContent =
              `[HB ${hb.uptime_s}s clients=${hb.clients}] \n` +
              tape.textContent;
          } catch {}
        });

// log
        es.addEventListener("log", (ev) => {
          try {
            const m = JSON.parse(ev.data || "{}");
            tape.textContent =
              `[${new Date(m.t || Date.now()).toLocaleTimeString()}] ${m.level?.toUpperCase() || "LOG"}: ${m.message}\n` +
              tape.textContent;
          } catch {}
        });

// pnl event (widget)
        pnl.attachEventSource(es);
      }

// wire buttons
      $("#connectBtn").onclick = () => {
        const base = $("#base").value.trim();
        connectSSE(base);
        pollHealth(base);
        clearInterval(healthTimer);
        healthTimer = setInterval(() => pollHealth(base), 5000);
      };

// quick test: send one log line to server -> should appear in Live Events
      $("#pingBtn").onclick = async () => {
        const base = $("#base").value.trim().replace(/\/$/, "");
        try {
          await fetch(base + "/log", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              level: "info",
              message: "opsdeck basic ping",
              meta: { symbol: "BTCUSDT" },
            }),
          });
        } catch (e) {}
      };

// auto connect on load
      (function auto() {
        const base = $("#base").value.trim();
        connectSSE(base);
        pollHealth(base);
        clearInterval(healthTimer);
        healthTimer = setInterval(() => pollHealth(base), 5000);
      })();
    </script>
  </body>
</html>

Batal