2026-06-28 13:15:53 -05:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
|
|
|
<title>ESP32-C3 Admin</title>
|
|
|
|
|
<link rel="stylesheet" href="/css/app.css">
|
|
|
|
|
<script defer src="/js/app.js"></script>
|
|
|
|
|
<script type="module" src="/components/status-card.js"></script>
|
2026-06-28 13:25:14 -05:00
|
|
|
<script type="module" src="/components/temperature-card.js"></script>
|
2026-06-28 16:25:55 -05:00
|
|
|
<script type="module" src="/components/program-card.js"></script>
|
2026-06-28 13:15:53 -05:00
|
|
|
<script type="module" src="/components/led-card.js"></script>
|
2026-06-28 16:25:55 -05:00
|
|
|
<script type="module" src="/components/pump-card.js"></script>
|
2026-06-28 13:15:53 -05:00
|
|
|
<script type="module" src="/components/add-card.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="appTitle" class="top">ESP32-C3 Admin</div>
|
|
|
|
|
<div id="busyChip" class="busyChip hidden"><span class="spinner"></span>Working...</div>
|
|
|
|
|
<main>
|
|
|
|
|
<div id="loginPanel" class="box">
|
|
|
|
|
<h2>Login</h2>
|
|
|
|
|
<label>User</label><input id="user" value="admin">
|
|
|
|
|
<label>Password</label><input id="pass" type="password">
|
|
|
|
|
<button id="loginBtn">Login</button>
|
|
|
|
|
<pre id="loginOut"></pre>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="app" class="hidden">
|
|
|
|
|
<div class="tabs">
|
|
|
|
|
<button class="tab active" data-tab="dashboard">Dashboard</button>
|
|
|
|
|
<button class="tab" data-tab="access">Access</button>
|
|
|
|
|
<button class="tab" data-tab="network">Networking</button>
|
|
|
|
|
<button class="tab" data-tab="ops">System</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="dashboard" class="panel active"><div class="grid">
|
|
|
|
|
<status-card></status-card>
|
2026-06-28 13:25:14 -05:00
|
|
|
<temperature-card></temperature-card>
|
2026-06-28 16:25:55 -05:00
|
|
|
<program-card></program-card>
|
|
|
|
|
<pump-card></pump-card>
|
2026-06-28 13:15:53 -05:00
|
|
|
<led-card></led-card>
|
|
|
|
|
<add-card></add-card>
|
|
|
|
|
</div></div>
|
|
|
|
|
<div id="access" class="panel">
|
|
|
|
|
<div class="tabs subtabs">
|
|
|
|
|
<button class="tab subtab active" data-subtab="users">User Management</button>
|
|
|
|
|
<button class="tab subtab" data-subtab="roles">Role Management</button>
|
|
|
|
|
<button class="tab subtab" data-subtab="apis">API Management</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="users" class="subpanel active">
|
|
|
|
|
<section id="usersOverview">
|
|
|
|
|
<div class="toolbar"><h3>User Overview</h3><button id="usersRefresh">Refresh</button><button id="userNew" class="secondary">New</button></div>
|
|
|
|
|
<div id="userList" class="list"></div>
|
|
|
|
|
</section>
|
|
|
|
|
<section id="userDetail" class="hidden">
|
|
|
|
|
<div class="toolbar"><button id="userBack" class="secondary">Back</button><h3 id="userTitle" class="detailTitle">User Detail</h3></div>
|
|
|
|
|
<label>Name</label><input id="userName">
|
|
|
|
|
<label>Password</label><input id="userPass" type="password" placeholder="Leave blank to keep unchanged">
|
|
|
|
|
<label class="inlineCheck"><input id="userActive" type="checkbox" checked> Active</label>
|
|
|
|
|
<label>Roles</label><div id="userRoles" class="checkGrid"></div>
|
|
|
|
|
<div class="detailActions"><button id="userSave">Save user</button></div>
|
|
|
|
|
<pre id="usersOut"></pre>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="roles" class="subpanel">
|
|
|
|
|
<section id="rolesOverview">
|
|
|
|
|
<div class="toolbar"><h3>Role Overview</h3><button id="rolesRefresh">Refresh</button><button id="roleNew" class="secondary">New</button></div>
|
|
|
|
|
<div id="rolesOut" class="list"></div>
|
|
|
|
|
</section>
|
|
|
|
|
<section id="roleDetail" class="hidden">
|
|
|
|
|
<div class="toolbar"><button id="roleBack" class="secondary">Back</button><h3 id="roleTitle" class="detailTitle">Role Detail</h3></div>
|
|
|
|
|
<label>Name</label><input id="roleName">
|
|
|
|
|
<div id="roleMeta" class="meta"></div>
|
|
|
|
|
<div id="roleUsage" class="usageGrid"></div>
|
|
|
|
|
<div class="detailActions"><button id="roleSave">Save role</button><button id="roleDelete" class="danger">Delete role</button></div>
|
|
|
|
|
<pre id="roleMsg"></pre>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="apis" class="subpanel">
|
|
|
|
|
<section id="apisOverview">
|
|
|
|
|
<div class="toolbar"><h3>API Overview</h3></div>
|
|
|
|
|
<div id="apiList" class="list"></div>
|
|
|
|
|
</section>
|
|
|
|
|
<section id="apiDetail" class="hidden">
|
|
|
|
|
<div class="toolbar"><button id="apiBack" class="secondary">Back</button><h3 id="apiTitle" class="detailTitle">API Detail</h3></div>
|
|
|
|
|
<label>Path</label><input id="apiPath" readonly>
|
|
|
|
|
<label>Method</label><input id="apiMethod" readonly>
|
|
|
|
|
<label>Required role</label><select id="apiRole"></select>
|
|
|
|
|
<button id="apiSave">Save ACL</button>
|
|
|
|
|
<pre id="apisOut"></pre>
|
|
|
|
|
<h3>Test</h3>
|
|
|
|
|
<label>JSON body</label><textarea id="apiTestBody" placeholder='{"key":"value"}'></textarea>
|
|
|
|
|
<div class="detailActions"><button id="apiTest">Run test</button><button id="apiTestClear" class="secondary">Clear body</button></div>
|
|
|
|
|
<pre id="apiTestOut"></pre>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="network" class="panel"><div class="grid">
|
|
|
|
|
<section><h3>Network</h3><label>Host name</label><input id="netHost" placeholder="Default host name"><label>Address mode</label><select id="netDhcp"><option value="true">DHCP</option><option value="false">Static IPv4</option></select><div id="netCurrent" class="muted"></div><label>Static IP</label><input id="netIp" inputmode="decimal" placeholder="192.168.1.50"><label>Gateway</label><input id="netGateway" inputmode="decimal" placeholder="192.168.1.1"><label>Subnet mask</label><input id="netSubnet" inputmode="decimal" placeholder="255.255.255.0"><div class="row"><div><label>DNS 1</label><input id="netDns1" inputmode="decimal" placeholder="192.168.1.1"></div><div><label>DNS 2</label><input id="netDns2" inputmode="decimal" placeholder="8.8.8.8"></div></div><button id="networkSaveBtn">Save network</button><pre id="networkOut"></pre></section>
|
|
|
|
|
<section><h3>HTTPS Certificate</h3><label>Certificate file</label><input id="certFile" type="file" accept=".pem,.cer,.crt,.txt,application/x-pem-file,application/pkix-cert"><button id="certSaveBtn">Save certificate</button><button id="certLoad" class="secondary">Load current</button><pre id="certOut"></pre></section>
|
|
|
|
|
</div></div>
|
|
|
|
|
<div id="ops" class="panel"><div class="grid">
|
|
|
|
|
<section><h3>Settings</h3><label>Log level</label><select id="logLevel"><option value="0">Error</option><option value="1">Warn</option><option value="2">SecurityAudit</option><option value="3" selected>Info</option><option value="4">Debug</option></select><label>Max log bytes</label><input id="logMax" type="number" value="51200"><label>Update package URL</label><input id="upd"><button id="settingsSave">Save</button><pre id="settingsOut"></pre></section>
|
|
|
|
|
<section><h3>Updates</h3><label>Update package</label><input id="pkg" type="file"><button id="uploadPkgBtn">Upload package</button><button id="otaCheck" class="secondary">Check URL</button><button id="otaRun" class="danger">Install from URL</button><pre id="fwOut"></pre></section>
|
|
|
|
|
<section><h3>Maintenance</h3><button id="configDownload">Download config</button><label>Restore configuration</label><input id="configFile" type="file" accept=".json,application/json"><button id="restoreConfigBtn" class="secondary">Restore config</button><button id="factoryReset" class="danger">Factory reset</button><pre id="maintOut"></pre></section>
|
|
|
|
|
<section class="fullWidth"><div class="toolbar"><h3>Files</h3><span id="filesPath" class="filePathChip">/</span></div><div id="fileList" class="list"></div><pre id="filesOut"></pre></section>
|
|
|
|
|
<section class="fullWidth"><h3>Logs</h3><div class="row"><button id="logsLoad">Load</button><button id="logsClear" class="danger">Clear</button></div><pre id="logsOut"></pre></section>
|
|
|
|
|
</div></div>
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
