update giao diện web
This commit is contained in:
admin committed
1 parent
1682808956
commit
4b5e95500f
5 files changed
+643
-76
No files matched your search
@@ -130,55 +130,89 @@
|
||||
<!-- ======= RIGHT / BOTTOM: INFO PANELS ======= -->
|
||||
<section class="panel panel-side">
|
||||
|
||||
<!-- Stats card -->
|
||||
<div class="card stats-card">
|
||||
<h3 data-i18n="statistics">Thống kê</h3>
|
||||
<div class="stats-grid">
|
||||
<div class="stat">
|
||||
<div class="stat-label" data-i18n="frames_received">Frames nhận</div>
|
||||
<div class="stat-value" id="statFrames">0</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label" data-i18n="last_update">Cập nhật cách đây</div>
|
||||
<div class="stat-value"><span id="statLastUpdate">—</span><small>s</small></div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label" data-i18n="valid_targets">Target hợp lệ</div>
|
||||
<div class="stat-value" id="statValid">0 / 3</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label" data-i18n="zones_occupied">Vùng có người</div>
|
||||
<div class="stat-value" id="statZones">0 / 3</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ===================================================== -->
|
||||
<!-- TOP TABS: Radar / Lịch sử -->
|
||||
<!-- ===================================================== -->
|
||||
<div class="tabs-row" role="tablist" aria-label="Views">
|
||||
<button role="tab" class="tab-btn tab-active" data-tab="radar" aria-selected="true">
|
||||
<span class="tab-dot" style="background: var(--accent-green);"></span>
|
||||
<span data-i18n="tab_radar">Radar</span>
|
||||
</button>
|
||||
<button role="tab" class="tab-btn" data-tab="history" aria-selected="false">
|
||||
<span class="tab-dot" style="background: var(--accent-blue);"></span>
|
||||
<span data-i18n="tab_history">Lịch sử</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Targets list -->
|
||||
<div class="card targets-card">
|
||||
<h3 data-i18n="targets_detail">Chi tiết Target</h3>
|
||||
<div class="targets-list" id="targetsList">
|
||||
<!-- Populated by JS -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab: Radar (stats + targets + zones) -->
|
||||
<div class="tab-panel" data-tab-panel="radar">
|
||||
|
||||
<!-- Zones list + editor -->
|
||||
<div class="card zones-card">
|
||||
<div class="card-header-row">
|
||||
<!-- Stats card -->
|
||||
<div class="card stats-card">
|
||||
<h3 data-i18n="statistics">Thống kê</h3>
|
||||
<div class="stats-grid">
|
||||
<div class="stat">
|
||||
<div class="stat-label" data-i18n="frames_received">Frames nhận</div>
|
||||
<div class="stat-value" id="statFrames">0</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label" data-i18n="last_update">Cập nhật cách đây</div>
|
||||
<div class="stat-value"><span id="statLastUpdate">—</span><small>s</small></div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label" data-i18n="valid_targets">Target hợp lệ</div>
|
||||
<div class="stat-value" id="statValid">0 / 3</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label" data-i18n="zones_occupied">Vùng có người</div>
|
||||
<div class="stat-value" id="statZones">0 / 3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Targets list -->
|
||||
<div class="card targets-card">
|
||||
<h3 data-i18n="targets_detail">Chi tiết Target</h3>
|
||||
<div class="targets-list" id="targetsList">
|
||||
<!-- Populated by JS -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zones list (editor removed per user request — defaults are final) -->
|
||||
<div class="card zones-card">
|
||||
<h3 data-i18n="zones">Zones</h3>
|
||||
<button class="btn-link" id="btnEditZones" data-i18n="edit_zones">Sửa zones</button>
|
||||
<div class="zones-list" id="zonesList"></div>
|
||||
</div>
|
||||
<div class="zones-list" id="zonesList"></div>
|
||||
</div>
|
||||
|
||||
<!-- Zone editor (hidden by default) -->
|
||||
<form class="zone-editor" id="zoneEditor" hidden>
|
||||
<div class="editor-title" data-i18n="zone_editor_title">Chỉnh sửa tọa độ zone (mm)</div>
|
||||
<div class="editor-grid" id="editorGrid"></div>
|
||||
<div class="editor-actions">
|
||||
<button type="button" class="btn btn-ghost" id="btnCancelZones" data-i18n="cancel">Hủy</button>
|
||||
<button type="button" class="btn btn-ghost" id="btnResetZones" data-i18n="reset_default">Mặc định</button>
|
||||
<button type="submit" class="btn btn-primary" data-i18n="save_and_apply">Lưu & Áp dụng</button>
|
||||
<!-- Tab: History (SQLite-backed detections with date/hour filters) -->
|
||||
<div class="tab-panel" data-tab-panel="history" hidden>
|
||||
<div class="card history-card">
|
||||
<div class="history-toolbar">
|
||||
<div class="history-toolbar-title">
|
||||
<h3 data-i18n="history_title">Lịch sử phát hiện</h3>
|
||||
<div class="history-summary" id="historySummary" data-i18n="history_summary_empty">Chưa có dữ liệu</div>
|
||||
</div>
|
||||
<div class="history-filters">
|
||||
<label class="field">
|
||||
<span data-i18n="history_date">Ngày</span>
|
||||
<input type="date" id="historyDate">
|
||||
</label>
|
||||
<label class="field field-range">
|
||||
<span data-i18n="history_hour">Giờ</span>
|
||||
<div class="range">
|
||||
<input type="number" id="hourStart" min="0" max="23" step="1" placeholder="0">
|
||||
<span class="sep">→</span>
|
||||
<input type="number" id="hourEnd" min="0" max="23" step="1" placeholder="23">
|
||||
</div>
|
||||
</label>
|
||||
<button class="btn btn-primary btn-sm" id="btnRefreshHistory" data-i18n="history_refresh">Tải lại</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="history-hourly" id="historyHourly"><!-- 24-hour bar summary --></div>
|
||||
<div class="history-list" id="historyList"><!-- Detection cards --></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in new issue
Block a user