chức năng dashboard
This commit is contained in:
132
www/index.html
132
www/index.html
@@ -19,9 +19,9 @@
|
||||
|
||||
<div class="navTitle">WORKSPACE</div>
|
||||
<nav class="nav">
|
||||
<a class="navItem active" href="#" data-page="overview" aria-current="page">
|
||||
<a class="navItem active" href="#" data-page="dashboard" aria-current="page">
|
||||
<span class="navDot"></span>
|
||||
Tổng quan
|
||||
Dashboard
|
||||
</a>
|
||||
<a class="navItem" href="#" data-page="config">
|
||||
<span class="navDot"></span>
|
||||
@@ -58,48 +58,52 @@
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
<div class="page" id="pageOverview" data-page-content="overview" hidden>
|
||||
<section class="card">
|
||||
<div class="cardHeader">
|
||||
<div>
|
||||
<div class="cardTitle">Phần mềm</div>
|
||||
<div class="cardSub">Thông tin phiên bản và trạng thái backend.</div>
|
||||
<div class="page" id="pageOverview" data-page-content="dashboard" hidden>
|
||||
<div class="dashboardPage">
|
||||
<section class="card">
|
||||
<div class="cardHeader">
|
||||
<div>
|
||||
<div class="cardTitle">Dashboard</div>
|
||||
<div class="cardSub">Widget mission — chạy, xếp hàng và tạm dừng giống MiR Fleet.</div>
|
||||
</div>
|
||||
<div class="dashboardToolbar">
|
||||
<button id="dashboardAddWidgetBtn" type="button" class="btn subtle">Thêm widget</button>
|
||||
<button id="dashboardEditBtn" type="button" class="btn subtle">Sửa layout</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cardBody">
|
||||
<div class="row rowWide">
|
||||
<label>Backend</label>
|
||||
<div id="overviewBackend" class="mutedNote">—</div>
|
||||
<div class="cardBody">
|
||||
<div id="dashboardGrid" class="dashboardGrid"></div>
|
||||
<p id="dashboardEmpty" class="mutedNote dashboardEmpty" hidden>Chưa có widget. Bấm «Thêm widget» để bắt đầu.</p>
|
||||
</div>
|
||||
<div class="row rowWide">
|
||||
<label>Dữ liệu</label>
|
||||
<div class="mutedNote">`data/state.json` (catalog) + `data/models/{id}.json` (layout)</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="cardHeader">
|
||||
<div>
|
||||
<div class="cardTitle">Cấu hình đang active</div>
|
||||
<div class="cardSub">Tóm tắt layout đang mở.</div>
|
||||
<section class="card dashboardInfoCard">
|
||||
<div class="cardHeader">
|
||||
<div>
|
||||
<div class="cardTitle">Hệ thống</div>
|
||||
<div class="cardSub">Trạng thái backend và layout đang active.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cardBody">
|
||||
<div class="row rowWide">
|
||||
<label>Layout</label>
|
||||
<div id="overviewActiveLayout" class="mutedNote">—</div>
|
||||
<div class="cardBody dashboardInfoGrid">
|
||||
<div class="row rowWide">
|
||||
<label>Backend</label>
|
||||
<div id="overviewBackend" class="mutedNote">—</div>
|
||||
</div>
|
||||
<div class="row rowWide">
|
||||
<label>Layout</label>
|
||||
<div id="overviewActiveLayout" class="mutedNote">—</div>
|
||||
</div>
|
||||
<div class="row rowWide">
|
||||
<label>Model robot</label>
|
||||
<div id="overviewActiveModel" class="mutedNote">—</div>
|
||||
</div>
|
||||
<div class="row rowWide">
|
||||
<label>LiDAR / IMU</label>
|
||||
<div id="overviewActiveSensors" class="mutedNote">—</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row rowWide">
|
||||
<label>Model robot</label>
|
||||
<div id="overviewActiveModel" class="mutedNote">—</div>
|
||||
</div>
|
||||
<div class="row rowWide">
|
||||
<label>LiDAR / IMU</label>
|
||||
<div id="overviewActiveSensors" class="mutedNote">—</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page" id="pageConfig" data-page-content="config">
|
||||
@@ -720,7 +724,57 @@
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
</dialog>
|
||||
|
||||
<dialog id="dashboardAddWidgetDialog" class="missionDialog">
|
||||
<form id="dashboardAddWidgetForm" method="dialog" class="missionDialogForm">
|
||||
<div class="missionDialogHeader">
|
||||
<h3>Thêm widget</h3>
|
||||
<button type="button" class="iconBtn missionDialogClose" data-close-dialog="dashboardAddWidgetDialog" aria-label="Đóng">×</button>
|
||||
</div>
|
||||
<div class="missionDialogBody">
|
||||
<div class="row rowWide">
|
||||
<label for="dashboardWidgetType">Loại widget</label>
|
||||
<select id="dashboardWidgetType" required>
|
||||
<option value="mission_button">Mission button</option>
|
||||
<option value="mission_group">Mission group</option>
|
||||
<option value="mission_queue">Mission queue</option>
|
||||
<option value="pause_continue">Pause / Continue</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="dashboardAddWidgetFields" class="missionConfigGrid"></div>
|
||||
</div>
|
||||
<div class="missionDialogFooter">
|
||||
<button type="button" class="btn subtle" data-close-dialog="dashboardAddWidgetDialog">Hủy</button>
|
||||
<button type="submit" class="btn primary">Thêm</button>
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<dialog id="dashboardEditWidgetDialog" class="missionDialog">
|
||||
<form id="dashboardEditWidgetForm" method="dialog" class="missionDialogForm">
|
||||
<div class="missionDialogHeader">
|
||||
<h3>Cấu hình widget</h3>
|
||||
<button type="button" class="iconBtn missionDialogClose" data-close-dialog="dashboardEditWidgetDialog" aria-label="Đóng">×</button>
|
||||
</div>
|
||||
<div class="missionDialogBody">
|
||||
<input type="hidden" id="dashboardEditWidgetId" />
|
||||
<div class="row rowWide">
|
||||
<label for="dashboardEditWidgetType">Loại</label>
|
||||
<input id="dashboardEditWidgetType" type="text" readonly />
|
||||
</div>
|
||||
<div id="dashboardEditWidgetFields" class="missionConfigGrid"></div>
|
||||
</div>
|
||||
<div class="missionDialogFooter">
|
||||
<button type="button" class="btn subtle danger" id="dashboardDeleteWidgetBtn">Xóa widget</button>
|
||||
<button type="button" class="btn subtle" data-close-dialog="dashboardEditWidgetDialog">Hủy</button>
|
||||
<button type="submit" class="btn primary">Lưu</button>
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<script src="/missions.js"></script>
|
||||
<script src="/dashboard.js"></script>
|
||||
<script src="/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user