add top bar

2026-06-16 11:17:28 +07:00
parent 9aee5f4100
commit 1156e1ab29
19 changed files with 1625 additions and 80 deletions
--- a/www/index.html
+++ b/www/index.html
@@ -6,7 +6,7 @@
    <title>LiDAR Manager</title>
    <link rel="stylesheet" href="/style.css" />
  </head>
-  <body>
+  <body class="auth-logged-out">
    <div id="loginScreen" class="loginScreen">
      <div class="loginFrame">
        <header class="loginHeader">
@@ -33,7 +33,7 @@
              <p>Nếu chưa có tài khoản, vui lòng liên hệ quản trị viên robot.</p>
            </div>
            <div class="loginForms">
-              <form id="loginForm" class="loginForm" action="#" method="post">
+              <form id="loginForm" class="loginForm" action="#" method="post" novalidate>
                <label class="loginField">
                  <span class="loginFieldLabel">Tên đăng nhập:</span>
                  <input id="loginUsername" name="username" type="text" autocomplete="username" placeholder="Admin" required />
@@ -131,25 +131,95 @@
      </aside>

      <div class="body">
-        <header class="topbar">
-          <div class="topbarTitle">
-            <div class="kicker">PhenikaaX Robotics</div>
-            <div class="pageTitle">Cấu Hình</div>
-          </div>
-          <div class="topbarActions">
-            <div class="userMenuWrap">
-              <button id="userMenuBtn" type="button" class="btn subtle userMenuBtn" aria-haspopup="true">…</button>
-              <div id="userMenuPanel" class="userMenuPanel" hidden>
-                <div class="userMenuHeader">
-                  <div id="userMenuName" class="userMenuName">—</div>
-                  <div id="userMenuGroup" class="userMenuGroup mutedNote">—</div>
-                </div>
-                <button id="userMenuChangePasswordBtn" type="button" class="userMenuItem">Đổi mật khẩu</button>
-                <button id="userMenuSignOutBtn" type="button" class="userMenuItem userMenuItemDanger">Đăng xuất</button>
+        <header class="mirTopbar" id="mirTopbar">
+          <div class="mirTopbarInner">
+            <div class="mirTopbarLeft">
+              <div class="mirRobotId" id="mirRobotId" title="Robot">RobotApp</div>
+
+              <button type="button" class="mirPauseBtn" id="mirSegControl" aria-label="Start / Pause robot" title="Start / Pause robot">
+                <svg class="mirPauseBtnIcon mirPauseBtnIcon--pause" id="mirControlIconPause" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
+                  <rect x="6" y="5" width="4.5" height="14" rx="1" fill="#f39c12"/>
+                  <rect x="13.5" y="5" width="4.5" height="14" rx="1" fill="#f39c12"/>
+                </svg>
+                <svg class="mirPauseBtnIcon mirPauseBtnIcon--play" id="mirControlIconPlay" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" hidden>
+                  <path d="M9 6.5v11l9-5.5-9-5.5z" fill="#7bed9f"/>
+                </svg>
+              </button>
+
+              <div class="mirMissionStrip" id="mirMissionStrip">
+                <span class="mirMissionMsg" id="mirMissionMsg">…</span>
+                <span class="mirStatePill" id="mirControlPill">PAUSED</span>
+              </div>
+            </div>
+
+            <div class="mirTopbarRight">
+              <button type="button" class="mirSegment mirSegment--status" id="mirSegStatus" aria-haspopup="true" aria-expanded="false">
+                <svg class="mirSvgIcon mirStatusSvg is-ok" id="mirStatusIcon" viewBox="0 0 20 20" width="18" height="18" aria-hidden="true">
+                  <circle cx="10" cy="10" r="9" fill="none" stroke="currentColor" stroke-width="1.5"/>
+                  <path d="M6 10.2l2.4 2.4L14 7.2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                <span class="mirSegmentLabel" id="mirStatusLabel" data-i18n="topbar.allOk">ALL OK</span>
+                <span class="mirCaret" aria-hidden="true">▴</span>
+              </button>
+              <div class="mirPanel mirPanel--status" id="mirStatusPanel" hidden>
+                <div class="mirPanelBody" id="mirStatusPanelBody"></div>
+                <div class="mirPanelFooter" id="mirStatusPanelFooter" hidden>
+                  <button type="button" class="mirBtn mirBtn--reset" id="mirErrorResetBtn" data-i18n="topbar.reset">RESET</button>
+                </div>
+              </div>
+
+              <button type="button" class="mirSegment mirSegment--locale" id="mirSegLocale" aria-haspopup="true" aria-expanded="false">
+                <span class="mirFlag" id="mirLocaleFlag" aria-hidden="true">🇻🇳</span>
+                <span class="mirSegmentLabel" id="mirLocaleLabel">TIẾNG VIỆT</span>
+                <span class="mirCaret" aria-hidden="true">▴</span>
+              </button>
+              <div class="mirPanel mirPanel--locale" id="mirLocalePanel" hidden>
+                <button type="button" class="mirLocaleOption" data-locale="vi">🇻🇳 Tiếng Việt</button>
+                <button type="button" class="mirLocaleOption" data-locale="en">🇺🇸 English</button>
+              </div>
+
+              <button type="button" class="mirSegment mirSegment--user" id="mirUserBtn" aria-haspopup="true" aria-expanded="false">
+                <svg class="mirSvgIcon mirUserSvg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
+                  <circle cx="12" cy="8" r="4" fill="currentColor"/>
+                  <path d="M5 20c0-4 3.5-6 7-6s7 2 7 6" fill="currentColor"/>
+                </svg>
+                <span class="mirSegmentLabel" id="mirUserLabel">USER</span>
+                <span class="mirCaret" aria-hidden="true">▴</span>
+              </button>
+              <div class="mirPanel mirPanel--user" id="mirUserPanel" hidden>
+                <div class="mirUserPanelHeader">
+                  <div class="mirUserPanelAvatar" aria-hidden="true">
+                    <svg viewBox="0 0 24 24" width="22" height="22" fill="#64748b"><circle cx="12" cy="8" r="4"/><path d="M5 20c0-4 3.5-6 7-6s7 2 7 6"/></svg>
+                  </div>
+                  <div>
+                    <div class="mirUserPanelRole" id="mirUserPanelRole">—</div>
+                    <div class="mirUserPanelName mutedNote" id="mirUserPanelName">—</div>
+                  </div>
+                </div>
+                <label class="mirProfileField">
+                  <span data-i18n="topbar.displayName">Tên hiển thị</span>
+                  <input id="mirProfileDisplayName" type="text" autocomplete="name" />
+                </label>
+                <button type="button" class="mirBtn mirBtn--primary" id="mirProfileSaveBtn" data-i18n="topbar.changeUserData">Đổi thông tin</button>
+                <button type="button" class="mirBtn mirBtn--primary subtle" id="mirUserChangePasswordBtn" data-i18n="topbar.changePassword">Đổi mật khẩu</button>
+                <button type="button" class="mirBtn mirBtn--danger" id="mirUserSignOutBtn" data-i18n="topbar.logout">Đăng xuất</button>
+              </div>
+
+              <button type="button" class="mirSegment mirSegment--joystick" id="mirSegJoystick" title="Engage joystick" aria-label="Joystick">
+                <svg class="mirSvgIcon mirJoystickSvg" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
+                  <rect x="7" y="10" width="10" height="10" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"/>
+                  <line x1="12" y1="10" x2="12" y2="4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+                  <circle cx="12" cy="3" r="2.2" fill="currentColor"/>
+                </svg>
+              </button>
+
+              <div class="mirSegment mirSegment--battery" id="mirSegBattery" title="Battery">
+                <span class="mirBatteryIcon" id="mirBatteryIcon" aria-hidden="true">
+                  <span class="mirBatteryLevel" id="mirBatteryLevel"></span>
+                </span>
+                <span class="mirSegmentLabel mirBatteryPct" id="mirBatteryLabel">—%</span>
              </div>
            </div>
-            <button id="refreshBtn" type="button" class="btn subtle">Tải lại</button>
-            <button id="saveLayoutBtn" class="btn primary" type="button">Lưu layout</button>
          </div>
        </header>

@@ -210,6 +280,10 @@
                <div class="cardTitle">Quản lý layout</div>
                <div class="cardSub">Nhiều cấu hình robot — mỗi layout có LiDAR và model riêng.</div>
              </div>
+              <div class="configPageActions">
+                <button id="refreshBtn" type="button" class="btn subtle">Tải lại</button>
+                <button id="saveLayoutBtn" type="button" class="btn primary">Lưu layout</button>
+              </div>
            </div>
            <div class="cardBody">
              <div class="row rowWide">
@@ -1042,8 +1116,34 @@ GET /api/v2.0.0/status</pre>
      </form>
    </dialog>

+    <div id="joystickOverlay" class="joystickOverlay" hidden>
+      <div class="joystickOverlayCard">
+        <div class="joystickOverlayHeader">
+          <strong data-i18n="topbar.joystickTitle">Điều khiển tay (Joystick)</strong>
+          <span class="mutedNote" id="joystickSpeedLabel">fast</span>
+        </div>
+        <div class="joystickPadWrap">
+          <div class="joystickPad" id="joystickPad">
+            <div class="joystickStick" id="joystickStick"></div>
+          </div>
+        </div>
+        <div class="joystickOverlayActions">
+          <label class="joystickSpeedSelect">
+            <span data-i18n="topbar.joystickSpeed">Tốc độ</span>
+            <select id="joystickSpeedSelect">
+              <option value="slow">Slow</option>
+              <option value="medium">Medium</option>
+              <option value="fast" selected>Fast</option>
+            </select>
+          </label>
+          <button type="button" class="mirBtn mirBtn--danger" id="joystickDisengageBtn" data-i18n="topbar.joystickOff">Tắt joystick</button>
+        </div>
+      </div>
+    </div>
+
    <script src="/auth.js"></script>
    <script src="/missions.js"></script>
+    <script src="/topbar.js"></script>
    <script src="/dashboard.js"></script>
    <script src="/integrations.js"></script>
    <script src="/app.js"></script>