100 lines
4.1 KiB
HTML
100 lines
4.1 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Arduino Playground</title>
|
||
<link rel="stylesheet" href="/styles.css">
|
||
</head>
|
||
<body>
|
||
<main>
|
||
<header>
|
||
<div>
|
||
<p class="eyebrow">Arduino UNO R4 WiFi</p>
|
||
<h1>Server activity</h1>
|
||
<p>Live overview of REST API traffic from Arduino boards.</p>
|
||
</div>
|
||
<div id="health" class="status">Connecting…</div>
|
||
</header>
|
||
|
||
<section class="metrics">
|
||
<article><span>Stored payloads</span><strong id="payloadCount">–</strong></article>
|
||
<article><span>API events</span><strong id="apiCount">–</strong></article>
|
||
<article><span>Server events</span><strong id="serverCount">–</strong></article>
|
||
</section>
|
||
|
||
<section class="panel">
|
||
<div class="panel-heading">
|
||
<div><p class="eyebrow">Activity</p><h2>Latest requests</h2></div>
|
||
<div class="refresh-actions">
|
||
<label class="toggle"><input id="autoRefresh" type="checkbox" checked> Auto-refresh</label>
|
||
<button id="refresh" type="button">Refresh</button>
|
||
</div>
|
||
</div>
|
||
<div class="request-controls" aria-label="Request controls">
|
||
<label class="search-control">Search
|
||
<input id="requestSearch" type="search" placeholder="Device, path, method…">
|
||
</label>
|
||
<label>Method
|
||
<select id="methodFilter"><option value="all">All</option></select>
|
||
</label>
|
||
<label>Status
|
||
<select id="statusFilter">
|
||
<option value="all">All</option>
|
||
<option value="2">2xx</option><option value="3">3xx</option>
|
||
<option value="4">4xx</option><option value="5">5xx</option>
|
||
</select>
|
||
</label>
|
||
<label>Sort
|
||
<select id="requestSort">
|
||
<option value="newest">Newest first</option>
|
||
<option value="oldest">Oldest first</option>
|
||
<option value="status-asc">Status: low to high</option>
|
||
<option value="status-desc">Status: high to low</option>
|
||
</select>
|
||
</label>
|
||
<label>Show
|
||
<select id="requestLimit">
|
||
<option value="10" selected>10</option><option value="25">25</option>
|
||
<option value="50">50</option><option value="100">100</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
<fieldset class="column-picker">
|
||
<legend>Visible columns</legend>
|
||
<label><input type="checkbox" data-column-toggle="deviceId" checked> Device ID</label>
|
||
<label><input type="checkbox" data-column-toggle="clientName" checked> Client name</label>
|
||
<label><input type="checkbox" data-column-toggle="path" checked> Path</label>
|
||
<label><input type="checkbox" data-column-toggle="method" checked> Method</label>
|
||
<label><input type="checkbox" data-column-toggle="status" checked> Status</label>
|
||
</fieldset>
|
||
<div class="activity-wrap">
|
||
<table class="activity-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Time</th>
|
||
<th data-column="deviceId">Device ID</th>
|
||
<th data-column="clientName">Client name</th>
|
||
<th data-column="path">Path</th>
|
||
<th data-column="method">Method</th>
|
||
<th data-column="status">Status</th>
|
||
<th>Payload</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="activity"></tbody>
|
||
</table>
|
||
</div>
|
||
<p id="requestSummary" class="request-summary"></p>
|
||
</section>
|
||
</main>
|
||
<dialog id="payloadModal" class="payload-modal">
|
||
<div class="modal-heading">
|
||
<div><p class="eyebrow">Request payload</p><h2 id="payloadModalTitle">Payload details</h2></div>
|
||
<button id="closePayloadModal" type="button" aria-label="Close payload details">Close</button>
|
||
</div>
|
||
<dl id="payloadMeta" class="payload-meta"></dl>
|
||
<pre id="payloadDetails"></pre>
|
||
</dialog>
|
||
<script src="/app.js"></script>
|
||
</body>
|
||
</html>
|