123 lines
3.8 KiB
HTML
123 lines
3.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Lambda IoT Web Client</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<header class="top-bar">
|
|
<div class="brand">
|
|
<div class="brand-mark">λ</div>
|
|
<div>
|
|
<div class="brand-title">Lambda IoT</div>
|
|
<div class="brand-subtitle">Device Control Console</div>
|
|
</div>
|
|
</div>
|
|
<div class="status" id="authStatus">Not signed in</div>
|
|
</header>
|
|
|
|
<main class="layout">
|
|
<aside class="panel devices-panel">
|
|
<div class="panel-header">
|
|
<h2>Devices</h2>
|
|
<button class="ghost" id="refreshDevices" type="button">Refresh All</button>
|
|
</div>
|
|
<div class="panel-body">
|
|
<ul class="device-list" id="deviceList"></ul>
|
|
</div>
|
|
</aside>
|
|
|
|
<section class="panel details-panel">
|
|
<div class="panel-header">
|
|
<h2>Device Details</h2>
|
|
<div class="device-meta" id="deviceMeta">Select a device</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<section class="auth-block" id="authBlock">
|
|
<div class="auth-title">Sign in for protected endpoints</div>
|
|
<form class="auth-form" id="loginForm">
|
|
<input
|
|
id="username"
|
|
type="text"
|
|
placeholder="Username"
|
|
autocomplete="username"
|
|
required
|
|
/>
|
|
<input
|
|
id="password"
|
|
type="password"
|
|
placeholder="Password"
|
|
autocomplete="current-password"
|
|
required
|
|
/>
|
|
<button type="submit">Login</button>
|
|
</form>
|
|
<div class="auth-actions is-hidden" id="authActions">
|
|
<button class="ghost" type="button" id="logoutButton">Logout</button>
|
|
</div>
|
|
<div class="auth-message" id="authMessage"></div>
|
|
</section>
|
|
|
|
<section class="detail-section">
|
|
<div class="section-header">
|
|
<h3>Sensors</h3>
|
|
<div class="section-note" id="sensorNote">No device selected.</div>
|
|
</div>
|
|
<div id="sensorList" class="stack"></div>
|
|
</section>
|
|
|
|
<section class="detail-section">
|
|
<div class="section-header">
|
|
<h3>Actors</h3>
|
|
<div class="section-note" id="actorNote">No device selected.</div>
|
|
</div>
|
|
<div id="actorList" class="stack"></div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<template id="sensorCardTemplate">
|
|
<article class="card">
|
|
<div class="card-header">
|
|
<div>
|
|
<div class="card-title"></div>
|
|
<div class="card-subtitle"></div>
|
|
</div>
|
|
<div class="pill"></div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="readings-header">Recent readings</div>
|
|
<div class="readings-list"></div>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<template id="actorCardTemplate">
|
|
<article class="card">
|
|
<div class="card-header">
|
|
<div>
|
|
<div class="card-title"></div>
|
|
<div class="card-subtitle"></div>
|
|
</div>
|
|
<div class="pill"></div>
|
|
</div>
|
|
<div class="card-body"></div>
|
|
</article>
|
|
</template>
|
|
|
|
<template id="readingRowTemplate">
|
|
<div class="reading-row">
|
|
<div class="reading-value"></div>
|
|
<div class="reading-time"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|