1152 lines
57 KiB
HTML
1152 lines
57 KiB
HTML
<!doctype html>
|
||
<html lang="vi">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>LiDAR Manager</title>
|
||
<link rel="stylesheet" href="/style.css" />
|
||
</head>
|
||
<body class="auth-logged-out">
|
||
<div id="loginScreen" class="loginScreen">
|
||
<div class="loginFrame">
|
||
<header class="loginHeader">
|
||
<div class="loginHeaderBrand" id="loginRobotLabel">RobotApp</div>
|
||
<div class="loginHeaderRight">
|
||
<span class="loginHeaderPrompt">Chọn cách đăng nhập:</span>
|
||
<div class="loginTabs" role="tablist">
|
||
<button id="loginTabPassword" type="button" class="loginTab active" role="tab" aria-selected="true">
|
||
Tên đăng nhập và mật khẩu
|
||
</button>
|
||
<button id="loginTabPin" type="button" class="loginTab" role="tab" aria-selected="false">
|
||
Mã PIN
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="loginCard">
|
||
<div id="loginPanelPassword" class="loginPanel">
|
||
<div id="loginHelpPassword" class="loginHelp">
|
||
<h2 class="loginHelpTitle">Đăng nhập bằng tên và mật khẩu</h2>
|
||
<p>Nhập tên đăng nhập và mật khẩu để truy cập robot.</p>
|
||
<p>Tài khoản do quản trị viên cấp hoặc xem trong tài liệu hướng dẫn robot.</p>
|
||
<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" 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 />
|
||
</label>
|
||
<label class="loginField">
|
||
<span class="loginFieldLabel">Mật khẩu:</span>
|
||
<input id="loginPasswordInput" name="password" type="password" autocomplete="current-password" placeholder="" required />
|
||
</label>
|
||
<button type="submit" class="loginSubmit" data-mode="password">
|
||
<svg class="loginSubmitIcon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
|
||
<path fill="currentColor" d="M12.65 10A5.99 5.99 0 0 0 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6a5.99 5.99 0 0 0 5.65-4H17v2h3v-2h1v-3h-3V9h-1.35zM7 14a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/>
|
||
</svg>
|
||
<span class="loginSubmitLabel">Đăng nhập</span>
|
||
</button>
|
||
</form>
|
||
<p id="loginError" class="loginError" hidden></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="loginPanelPin" class="loginPanel loginPanel--pin" hidden>
|
||
<div class="loginPinLeft">
|
||
<div class="loginHelp">
|
||
<h2 class="loginHelpTitle">Đăng nhập bằng mã PIN</h2>
|
||
<p>Người dùng được kích hoạt PIN có thể đăng nhập tại đây.</p>
|
||
<p>Nếu chưa có mã PIN 4 chữ số, vui lòng liên hệ quản trị viên robot.</p>
|
||
<p class="loginHelpNote">Không có mã PIN cấu hình sẵn — quản trị viên phải gán PIN trước.</p>
|
||
</div>
|
||
<div class="loginPinBoxes" id="loginPinBoxes" role="group" aria-label="Mã PIN 4 chữ số">
|
||
<div class="loginPinCell" data-idx="0"></div>
|
||
<div class="loginPinCell" data-idx="1"></div>
|
||
<div class="loginPinCell" data-idx="2"></div>
|
||
<div class="loginPinCell" data-idx="3"></div>
|
||
</div>
|
||
<input id="loginPin" type="hidden" value="" autocomplete="off" />
|
||
<p id="loginPinError" class="loginError loginPinError" hidden></p>
|
||
</div>
|
||
<div class="loginKeypad" id="loginKeypad" aria-label="Bàn phím số">
|
||
<button type="button" class="loginKey" data-key="1">1</button>
|
||
<button type="button" class="loginKey" data-key="2">2</button>
|
||
<button type="button" class="loginKey" data-key="3">3</button>
|
||
<button type="button" class="loginKey" data-key="4">4</button>
|
||
<button type="button" class="loginKey" data-key="5">5</button>
|
||
<button type="button" class="loginKey" data-key="6">6</button>
|
||
<button type="button" class="loginKey" data-key="7">7</button>
|
||
<button type="button" class="loginKey" data-key="8">8</button>
|
||
<button type="button" class="loginKey" data-key="9">9</button>
|
||
<button type="button" class="loginKey loginKey--wide" data-key="0">0</button>
|
||
<button type="button" class="loginKey loginKey--back" data-key="back" aria-label="Xóa">✕</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="shell auth-locked">
|
||
<aside class="sidebar">
|
||
<div class="brand">
|
||
<div class="brandIcon">R</div>
|
||
<div class="brandText">
|
||
<div class="brandTitle">PhenikaaX</div>
|
||
<div class="brandSub">RobotApp</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="navTitle">WORKSPACE</div>
|
||
<nav class="nav">
|
||
<a class="navItem active" href="#" data-page="dashboard" aria-current="page">
|
||
<span class="navDot"></span>
|
||
Dashboard
|
||
</a>
|
||
<a class="navItem" href="#" data-page="config">
|
||
<span class="navDot"></span>
|
||
Cấu hình
|
||
</a>
|
||
</nav>
|
||
|
||
<div class="navTitle">CÀI ĐẶT</div>
|
||
<nav class="nav">
|
||
<a class="navItem" href="#" data-page="missions">
|
||
<span class="navDot"></span>
|
||
Missions
|
||
</a>
|
||
<a class="navItem" href="#" data-page="integrations">
|
||
<span class="navDot"></span>
|
||
Tích hợp
|
||
</a>
|
||
</nav>
|
||
|
||
<div class="sidebarFooter">
|
||
<div class="statusBadge">
|
||
<span class="statusLed"></span>
|
||
<span id="status" class="statusText">…</span>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="body">
|
||
<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>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="content">
|
||
<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 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>
|
||
</section>
|
||
|
||
<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 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>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page" id="pageConfig" data-page-content="config">
|
||
<div class="contentLeft">
|
||
<section class="card" id="layoutManagerCard">
|
||
<div class="cardHeader">
|
||
<div>
|
||
<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">
|
||
<label>Layout hiện tại</label>
|
||
<select id="layoutSelect"></select>
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label>Tên layout mới</label>
|
||
<input id="layoutNewName" type="text" placeholder="VD: AGV kho A" />
|
||
</div>
|
||
<div class="checkRow">
|
||
<label>
|
||
<input id="layoutCloneCurrent" type="checkbox" />
|
||
Sao chép từ layout đang mở
|
||
</label>
|
||
</div>
|
||
<div class="layoutManagerActions">
|
||
<button id="layoutCreateBtn" type="button" class="btn subtle">Tạo layout</button>
|
||
<button id="layoutDeleteBtn" type="button" class="btn subtle danger">Xóa</button>
|
||
</div>
|
||
<p id="layoutActiveHint" class="mutedNote">—</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="card collapsible" id="lidarListCard">
|
||
<div
|
||
class="cardHeader cardHeaderToggle"
|
||
id="lidarListCardToggle"
|
||
role="button"
|
||
tabindex="0"
|
||
aria-expanded="true"
|
||
aria-controls="lidarListCardBody"
|
||
>
|
||
<div>
|
||
<div class="cardTitle">LiDARs</div>
|
||
<div class="cardSub">Đăng ký tên, IP, port và chỉnh pose theo robot frame.</div>
|
||
</div>
|
||
<span class="cardChevron" aria-hidden="true"></span>
|
||
</div>
|
||
|
||
<div class="cardBody" id="lidarListCardBody">
|
||
<form id="lidarForm" class="form">
|
||
<div class="row">
|
||
<label>Tên</label>
|
||
<input id="name" placeholder="Lidar trước" required />
|
||
</div>
|
||
<div class="row">
|
||
<label>IP</label>
|
||
<input id="ip" placeholder="192.168.0.10" required />
|
||
</div>
|
||
<div class="row">
|
||
<label>Port</label>
|
||
<input id="port" type="number" min="1" max="65535" value="2112" required />
|
||
</div>
|
||
<div class="actions">
|
||
<button id="addLidarBtn" class="btn primary" type="button">Thêm</button>
|
||
</div>
|
||
<p id="lidarFormHint" class="formHint" hidden></p>
|
||
</form>
|
||
|
||
<div id="lidarList" class="list"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="card collapsible" id="imuListCard">
|
||
<div
|
||
class="cardHeader cardHeaderToggle"
|
||
id="imuListCardToggle"
|
||
role="button"
|
||
tabindex="0"
|
||
aria-expanded="true"
|
||
aria-controls="imuListCardBody"
|
||
>
|
||
<div>
|
||
<div class="cardTitle">IMU</div>
|
||
<div class="cardSub">Cảm biến quán tính — frame, topic và pose trên robot.</div>
|
||
</div>
|
||
<span class="cardChevron" aria-hidden="true"></span>
|
||
</div>
|
||
|
||
<div class="cardBody" id="imuListCardBody">
|
||
<form id="imuForm" class="form">
|
||
<div class="row">
|
||
<label>Tên</label>
|
||
<input id="imuName" placeholder="IMU chính" required />
|
||
</div>
|
||
<div class="row">
|
||
<label>Frame ID</label>
|
||
<input id="imuFrameId" placeholder="imu_link" required />
|
||
</div>
|
||
<div class="row">
|
||
<label>Topic</label>
|
||
<input id="imuTopic" placeholder="imu/data" value="imu/data" required />
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label>Nguồn</label>
|
||
<select id="imuSource">
|
||
<option value="external">Ngoài (ROS topic)</option>
|
||
<option value="lidar_builtin">Tích hợp LiDAR</option>
|
||
<option value="onboard">Onboard robot</option>
|
||
</select>
|
||
</div>
|
||
<div class="row">
|
||
<label>Tần số (Hz)</label>
|
||
<input id="imuRateHz" type="number" min="1" max="1000" step="1" value="100" />
|
||
</div>
|
||
<div class="checkRow">
|
||
<label>
|
||
<input id="imuEnabled" type="checkbox" checked />
|
||
Bật IMU
|
||
</label>
|
||
</div>
|
||
<div class="actions">
|
||
<button id="addImuBtn" class="btn primary" type="button">Thêm IMU</button>
|
||
</div>
|
||
<p id="imuFormHint" class="formHint" hidden></p>
|
||
</form>
|
||
|
||
<div id="imuList" class="list"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="card collapsible" id="robotModelCard">
|
||
<div
|
||
class="cardHeader cardHeaderToggle"
|
||
id="robotModelCardToggle"
|
||
role="button"
|
||
tabindex="0"
|
||
aria-expanded="true"
|
||
aria-controls="robotModelCardBody"
|
||
>
|
||
<div>
|
||
<div class="cardTitle">Model robot</div>
|
||
<div class="cardSub">Kinematic differential — bánh, động cơ và giới hạn vận tốc.</div>
|
||
</div>
|
||
<span class="cardChevron" aria-hidden="true"></span>
|
||
</div>
|
||
<div class="cardBody" id="robotModelCardBody">
|
||
<div class="modelForm">
|
||
<div class="row rowWide">
|
||
<label>Model</label>
|
||
<select id="robotModel">
|
||
<option value="diff">Differential (2 bánh)</option>
|
||
<option value="bicycle">Bicycle</option>
|
||
</select>
|
||
</div>
|
||
<div id="diffParams" class="modelParams">
|
||
<details class="acc" open>
|
||
<summary>Hình học bánh</summary>
|
||
<div class="accBody">
|
||
<div class="row rowWide">
|
||
<label>Khoảng cách 2 bánh</label>
|
||
<div class="inputUnit">
|
||
<input id="wheelSeparationM" type="number" min="0.05" max="5" step="0.01" value="1.0" />
|
||
<span class="unit">m</span>
|
||
</div>
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label>Bán kính bánh</label>
|
||
<div class="inputUnit">
|
||
<input id="wheelRadiusM" type="number" min="0.02" max="1" step="0.01" value="0.3" />
|
||
<span class="unit">m</span>
|
||
</div>
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label>Tỷ lệ hiển thị</label>
|
||
<div class="inputUnit">
|
||
<input id="scaleMPerPx" type="number" min="0.001" max="0.1" step="0.001" value="0.005" />
|
||
<span class="unit">m/px</span>
|
||
</div>
|
||
</div>
|
||
<details class="acc accNested">
|
||
<summary>Hiệu chỉnh (nâng cao)</summary>
|
||
<div class="accBody">
|
||
<div class="row rowWide">
|
||
<label>b multiplier</label>
|
||
<input id="wheelSeparationMult" type="number" min="0.5" max="2" step="0.01" value="1.0" />
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label>r multiplier</label>
|
||
<input id="wheelRadiusMult" type="number" min="0.5" max="2" step="0.01" value="1.0" />
|
||
</div>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</details>
|
||
|
||
<details class="acc">
|
||
<summary>Động cơ</summary>
|
||
<div class="accBody">
|
||
<p class="mutedNote">Mỗi bánh gán một động cơ — chọn hãng và model.</p>
|
||
<div id="motorWheels" class="motorWheels"></div>
|
||
</div>
|
||
</details>
|
||
|
||
<details class="acc">
|
||
<summary>Giới hạn vận tốc</summary>
|
||
<div class="accBody">
|
||
<div class="row rowWide">
|
||
<label>cmd_vel timeout</label>
|
||
<div class="inputUnit">
|
||
<input id="cmdVelTimeout" type="number" min="0.05" max="5" step="0.05" value="0.25" />
|
||
<span class="unit">s</span>
|
||
</div>
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label>Linear max</label>
|
||
<div class="inputUnit">
|
||
<input id="linearMaxVel" type="number" min="0.01" max="5" step="0.05" value="1.0" />
|
||
<span class="unit">m/s</span>
|
||
</div>
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label>Linear min</label>
|
||
<div class="inputUnit">
|
||
<input id="linearMinVel" type="number" min="-5" max="0" step="0.05" value="-0.5" />
|
||
<span class="unit">m/s</span>
|
||
</div>
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label>Linear accel max</label>
|
||
<div class="inputUnit">
|
||
<input id="linearMaxAccel" type="number" min="0.01" max="10" step="0.05" value="0.8" />
|
||
<span class="unit">m/s²</span>
|
||
</div>
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label>Angular max</label>
|
||
<div class="inputUnit">
|
||
<input id="angularMaxVel" type="number" min="0.01" max="10" step="0.05" value="1.7" />
|
||
<span class="unit">rad/s</span>
|
||
</div>
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label>Angular accel max</label>
|
||
<div class="inputUnit">
|
||
<input id="angularMaxAccel" type="number" min="0.01" max="10" step="0.05" value="1.5" />
|
||
<span class="unit">rad/s²</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
|
||
<p id="diffValidation" class="validation" hidden></p>
|
||
</div>
|
||
|
||
<div id="bicycleParams" class="modelParams" hidden>
|
||
<p class="mutedNote">
|
||
Kinematic bicycle — tham chiếu trục sau, quan hệ
|
||
<span class="mono">ω = v·tan(δ)/L</span>
|
||
(<a href="https://thomasfermi.github.io/Algorithms-for-Automated-Driving/Control/BicycleModel.html" target="_blank" rel="noopener">mô hình</a>).
|
||
</p>
|
||
<details class="acc" open>
|
||
<summary>Hình học (wheelbase)</summary>
|
||
<div class="accBody">
|
||
<div class="row rowWide">
|
||
<label>Wheelbase L</label>
|
||
<div class="inputUnit">
|
||
<input id="bicycleWheelbaseM" type="number" min="0.2" max="5" step="0.05" value="1.2" />
|
||
<span class="unit">m</span>
|
||
</div>
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label>Bán kính bánh</label>
|
||
<div class="inputUnit">
|
||
<input id="bicycleWheelRadiusM" type="number" min="0.02" max="1" step="0.01" value="0.15" />
|
||
<span class="unit">m</span>
|
||
</div>
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label>Tỷ lệ hiển thị</label>
|
||
<div class="inputUnit">
|
||
<input id="bicycleScaleMPerPx" type="number" min="0.001" max="0.1" step="0.001" value="0.005" />
|
||
<span class="unit">m/px</span>
|
||
</div>
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label>Góc lái xem trước</label>
|
||
<div class="inputUnit">
|
||
<input id="bicycleSteerPreviewDeg" type="number" min="-45" max="45" step="1" value="15" />
|
||
<span class="unit">°</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
<details class="acc">
|
||
<summary>Động cơ</summary>
|
||
<div class="accBody">
|
||
<p class="mutedNote">Bánh sau (drive) và bánh trước (steer).</p>
|
||
<div id="bicycleMotorWheels" class="motorWheels"></div>
|
||
</div>
|
||
</details>
|
||
<details class="acc">
|
||
<summary>Giới hạn</summary>
|
||
<div class="accBody">
|
||
<div class="row rowWide">
|
||
<label>δ max (lái)</label>
|
||
<div class="inputUnit">
|
||
<input id="bicycleSteerMaxDeg" type="number" min="5" max="60" step="1" value="35" />
|
||
<span class="unit">°</span>
|
||
</div>
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label>cmd_vel timeout</label>
|
||
<div class="inputUnit">
|
||
<input id="bicycleCmdVelTimeout" type="number" min="0.05" max="5" step="0.05" value="0.25" />
|
||
<span class="unit">s</span>
|
||
</div>
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label>Linear max</label>
|
||
<div class="inputUnit">
|
||
<input id="bicycleLinearMaxVel" type="number" min="0.01" max="5" step="0.05" value="1.0" />
|
||
<span class="unit">m/s</span>
|
||
</div>
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label>Linear accel max</label>
|
||
<div class="inputUnit">
|
||
<input id="bicycleLinearMaxAccel" type="number" min="0.01" max="10" step="0.05" value="0.8" />
|
||
<span class="unit">m/s²</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
<p id="bicycleValidation" class="validation" hidden></p>
|
||
</div>
|
||
|
||
<details class="acc">
|
||
<summary>Footprint</summary>
|
||
<div class="accBody">
|
||
<p class="mutedNote">Hình dạng robot (ROS polygon) — tọa độ theo robot frame.</p>
|
||
<div class="row rowWide">
|
||
<label>Hình dạng</label>
|
||
<select id="footprintShape">
|
||
<option value="rectangle">Hình chữ nhật</option>
|
||
<option value="circle">Hình tròn</option>
|
||
<option value="regular_polygon">Đa giác đều</option>
|
||
<option value="custom">Tùy chỉnh (đa giác)</option>
|
||
</select>
|
||
</div>
|
||
<div id="footprintPresetPanel" class="footprintPresetPanel">
|
||
<div id="fpRectParams" class="fpShapeParams">
|
||
<div class="row rowWide">
|
||
<label>Chiều dài</label>
|
||
<div class="inputUnit">
|
||
<input id="fpLengthM" type="number" min="0.1" max="10" step="0.05" value="1.4" />
|
||
<span class="unit">m</span>
|
||
</div>
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label>Chiều rộng</label>
|
||
<div class="inputUnit">
|
||
<input id="fpWidthM" type="number" min="0.1" max="10" step="0.05" value="1.1" />
|
||
<span class="unit">m</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="fpCircleParams" class="fpShapeParams" hidden>
|
||
<div class="row rowWide">
|
||
<label>Bán kính</label>
|
||
<div class="inputUnit">
|
||
<input id="fpRadiusM" type="number" min="0.1" max="5" step="0.05" value="0.55" />
|
||
<span class="unit">m</span>
|
||
</div>
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label>Độ mịn (cạnh)</label>
|
||
<input id="fpCircleSegments" type="number" min="8" max="64" step="1" value="32" />
|
||
</div>
|
||
</div>
|
||
<div id="fpPolyParams" class="fpShapeParams" hidden>
|
||
<div class="row rowWide">
|
||
<label>Bán kính</label>
|
||
<div class="inputUnit">
|
||
<input id="fpPolyRadiusM" type="number" min="0.1" max="5" step="0.05" value="0.6" />
|
||
<span class="unit">m</span>
|
||
</div>
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label>Số cạnh</label>
|
||
<input id="fpPolySides" type="number" min="3" max="32" step="1" value="6" />
|
||
</div>
|
||
</div>
|
||
<button id="applyFootprintPresetBtn" type="button" class="btn subtle btnBlock">Áp dụng hình dạng</button>
|
||
</div>
|
||
<div id="footprintCustomPanel" class="footprintCustomPanel hidden">
|
||
<div class="fpVertexRow">
|
||
<span class="fpVertexLabel">Số đỉnh: <strong id="fpVertexCount">0</strong></span>
|
||
<span id="fpSelectedVertexText" class="fpSelectedVertex mutedNote">—</span>
|
||
</div>
|
||
<div class="fpVertexActions">
|
||
<button id="fpAddVertexBtn" type="button" class="btn subtle">Thêm đỉnh</button>
|
||
<button id="fpRemoveVertexBtn" type="button" class="btn subtle" disabled>Xóa đỉnh</button>
|
||
</div>
|
||
</div>
|
||
<button id="editFootprintBtn" type="button" class="btn subtle btnBlock">Sửa footprint</button>
|
||
<div id="footprintEditHint" class="fpHint" hidden></div>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="page" id="pageMissions" data-page-content="missions" hidden>
|
||
<div id="missionsListView" class="missionsPage">
|
||
<section class="card">
|
||
<div class="cardHeader">
|
||
<div>
|
||
<div class="cardTitle">Missions</div>
|
||
<div class="cardSub">Setup → Missions — danh sách nhiệm vụ robot.</div>
|
||
</div>
|
||
<button id="missionCreateOpenBtn" type="button" class="btn primary">Create mission</button>
|
||
</div>
|
||
<div class="cardBody">
|
||
<div id="missionListEmpty" class="mutedNote" hidden>Chưa có mission. Bấm Create mission để bắt đầu.</div>
|
||
<div id="missionList" class="missionList"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="card" id="missionQueueCard">
|
||
<div class="cardHeader">
|
||
<div>
|
||
<div class="cardTitle">Mission queue</div>
|
||
<div class="cardSub">Thêm mission bằng biểu tượng queue — robot chạy theo thứ tự từ trên xuống.</div>
|
||
</div>
|
||
<div class="missionQueueCardActions">
|
||
<button id="missionQueueCancelBtn" type="button" class="btn subtle danger" title="Hủy mission đang chạy">Hủy chạy</button>
|
||
<button id="missionQueueClearBtn" type="button" class="btn subtle danger">Xóa queue</button>
|
||
</div>
|
||
</div>
|
||
<div class="cardBody">
|
||
<div id="missionQueueRunner" class="missionQueueRunner mutedNote">—</div>
|
||
<div id="missionQueueEmpty" class="mutedNote">Queue trống. Bấm <span class="mono">▤</span> trên mission để thêm.</div>
|
||
<div id="missionQueueList" class="missionQueueList"></div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<div id="missionEditorView" class="missionsPage" hidden>
|
||
<section class="card missionEditorCard">
|
||
<div class="missionEditorTop">
|
||
<div class="missionEditorTitleWrap">
|
||
<button id="missionEditorBackBtn" type="button" class="btn subtle missionBackBtn" aria-label="Quay lại danh sách">←</button>
|
||
<div>
|
||
<div class="missionEditorKicker">Mission editor</div>
|
||
<div class="missionEditorTitleRow">
|
||
<h2 id="missionEditorTitle" class="missionEditorTitle">—</h2>
|
||
<button id="missionSettingsBtn" type="button" class="iconBtn" title="Cài đặt mission" aria-label="Cài đặt mission">⚙</button>
|
||
</div>
|
||
<div id="missionEditorMeta" class="missionEditorMeta">—</div>
|
||
</div>
|
||
</div>
|
||
<div class="missionEditorTopActions">
|
||
<span id="missionEditorDirty" class="missionDirtyBadge" hidden>Chưa lưu</span>
|
||
<button id="missionSaveAsBtn" type="button" class="btn subtle">Save as</button>
|
||
<button id="missionSaveBtn" type="button" class="btn primary">Save</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="missionActionBar" id="missionActionBar" role="toolbar" aria-label="Thêm action">
|
||
<div class="missionGroupTabs" id="missionGroupTabs"></div>
|
||
</div>
|
||
|
||
<div class="missionEditorBody">
|
||
<p class="missionFlowHint">Thực thi từ trên xuống dưới. Kéo biểu tượng ↔ để đổi thứ tự. Với Loop: kéo action vào vùng bên trong.</p>
|
||
<div id="missionActionList" class="missionActionList"></div>
|
||
<div id="missionActionListEmpty" class="missionActionListEmpty mutedNote">Chọn action từ menu phía trên để bắt đầu.</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page" id="pageIntegrations" data-page-content="integrations" hidden>
|
||
<div class="integrationsPage">
|
||
<section class="card">
|
||
<div class="cardHeader">
|
||
<div>
|
||
<div class="cardTitle">Modbus trigger</div>
|
||
<div class="cardSub">System → Triggers — coil 1001–2000 gắn mission_id. Thiết bị remote bật coil (Modbus TCP :5502) → mission vào queue.</div>
|
||
</div>
|
||
<button id="integrationAddTriggerBtn" type="button" class="btn primary">Thêm trigger</button>
|
||
</div>
|
||
<div class="cardBody">
|
||
<div id="integrationTriggerEmpty" class="mutedNote">Chưa có trigger Modbus.</div>
|
||
<div id="integrationTriggerList" class="missionList"></div>
|
||
<div class="integrationCoilSection">
|
||
<div class="integrationSectionLabel">Coil đã gán (bấm để mô phỏng rising edge)</div>
|
||
<div id="integrationCoilGrid" class="integrationCoilGrid"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="card">
|
||
<div class="cardHeader">
|
||
<div>
|
||
<div class="cardTitle">REST API — MiR v2.0.0</div>
|
||
<div class="cardSub">Hệ thống bên ngoài POST mission vào queue qua REST.</div>
|
||
</div>
|
||
</div>
|
||
<div class="cardBody integrationApiBody">
|
||
<div class="row rowWide">
|
||
<label>Base URL</label>
|
||
<div id="integrationApiBaseUrl" class="mono integrationCode">—</div>
|
||
</div>
|
||
<div class="integrationApiBlock">
|
||
<div class="integrationSectionLabel">POST /mission_queue</div>
|
||
<pre class="integrationPre">curl -X POST "<span class="integrationCurlHost">http://localhost:8080</span>/api/v2.0.0/mission_queue" \
|
||
-H "Content-Type: application/json" \
|
||
-d '{"mission_id":"<mission_id>","priority":0,"robot_id":"default"}'</pre>
|
||
</div>
|
||
<div class="integrationApiBlock">
|
||
<div class="integrationSectionLabel">GET /mission_queue · GET /missions · GET /status</div>
|
||
<pre class="integrationPre">GET /api/v2.0.0/mission_queue
|
||
GET /api/v2.0.0/missions
|
||
GET /api/v2.0.0/status</pre>
|
||
</div>
|
||
<div class="row rowWide integrationTestRow">
|
||
<label for="integrationRestMission">Thử nhanh</label>
|
||
<div class="integrationTestActions">
|
||
<select id="integrationRestMission"></select>
|
||
<button id="integrationRestTestBtn" type="button" class="btn subtle">POST queue</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="card">
|
||
<div class="cardHeader">
|
||
<div>
|
||
<div class="cardTitle">MiRFleet — Lên lịch mission</div>
|
||
<div class="cardSub">Ưu tiên, gán robot, chạy ASAP hoặc theo thời gian.</div>
|
||
</div>
|
||
<div class="integrationHeaderActions">
|
||
<button id="integrationRefreshBtn" type="button" class="btn subtle">Tải lại</button>
|
||
<button id="integrationAddScheduleBtn" type="button" class="btn primary">Thêm lịch</button>
|
||
</div>
|
||
</div>
|
||
<div class="cardBody">
|
||
<div id="integrationScheduleEmpty" class="mutedNote">Chưa có lịch fleet.</div>
|
||
<div id="integrationScheduleList" class="missionList"></div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="configSplitter" class="splitter" role="separator" aria-orientation="vertical" tabindex="0"></div>
|
||
|
||
<div class="contentRight" id="contentRight">
|
||
<section class="card">
|
||
<div class="cardHeader">
|
||
<div>
|
||
<div class="cardTitle">Bố trí trên robot</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cardBody">
|
||
<div class="canvasWrap" id="canvasWrap">
|
||
<canvas id="canvas"></canvas>
|
||
</div>
|
||
<div class="metaBar">
|
||
<div class="viewHint">Cuộn chuột: zoom • Shift + kéo: di chuyển vùng nhìn</div>
|
||
<div id="robotDiffSummary" class="robotDiffSummary">—</div>
|
||
<div>Robot center: <span id="robotCenterText"></span></div>
|
||
<div>Selected: <span id="selectedText">none</span></div>
|
||
<div>Pose: <span id="selectedRelText">—</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<dialog id="missionCreateDialog" class="missionDialog">
|
||
<form id="missionCreateForm" method="dialog" class="missionDialogForm">
|
||
<div class="missionDialogHeader">
|
||
<h3>Create mission</h3>
|
||
<button type="button" class="iconBtn missionDialogClose" data-close-dialog="missionCreateDialog" aria-label="Đóng">×</button>
|
||
</div>
|
||
<div class="missionDialogBody">
|
||
<div class="row rowWide">
|
||
<label for="missionCreateName">Tên mission</label>
|
||
<input id="missionCreateName" type="text" required placeholder="VD: Go to charging station" />
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label for="missionCreateGroup">Nhóm mission</label>
|
||
<select id="missionCreateGroup"></select>
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label for="missionCreateGroupNew">Hoặc nhóm mới</label>
|
||
<input id="missionCreateGroupNew" type="text" placeholder="Tùy chọn" />
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label for="missionCreateDesc">Mô tả</label>
|
||
<textarea id="missionCreateDesc" rows="2" placeholder="Tùy chọn"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="missionDialogFooter">
|
||
<button type="button" class="btn subtle" data-close-dialog="missionCreateDialog">Hủy</button>
|
||
<button type="submit" class="btn primary">Create mission</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<dialog id="missionSettingsDialog" class="missionDialog">
|
||
<form id="missionSettingsForm" method="dialog" class="missionDialogForm">
|
||
<div class="missionDialogHeader">
|
||
<h3>Cài đặt mission</h3>
|
||
<button type="button" class="iconBtn missionDialogClose" data-close-dialog="missionSettingsDialog" aria-label="Đóng">×</button>
|
||
</div>
|
||
<div class="missionDialogBody">
|
||
<div class="row rowWide">
|
||
<label for="missionSettingsName">Tên</label>
|
||
<input id="missionSettingsName" type="text" required />
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label for="missionSettingsGroup">Nhóm</label>
|
||
<select id="missionSettingsGroup"></select>
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label for="missionSettingsDesc">Mô tả</label>
|
||
<textarea id="missionSettingsDesc" rows="2"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="missionDialogFooter">
|
||
<button type="button" class="btn subtle" data-close-dialog="missionSettingsDialog">Hủy</button>
|
||
<button type="submit" class="btn primary">Áp dụng</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<dialog id="missionSaveAsDialog" class="missionDialog">
|
||
<form id="missionSaveAsForm" method="dialog" class="missionDialogForm">
|
||
<div class="missionDialogHeader">
|
||
<h3>Save mission as</h3>
|
||
<button type="button" class="iconBtn missionDialogClose" data-close-dialog="missionSaveAsDialog" aria-label="Đóng">×</button>
|
||
</div>
|
||
<div class="missionDialogBody">
|
||
<div class="row rowWide">
|
||
<label for="missionSaveAsName">Tên mission mới</label>
|
||
<input id="missionSaveAsName" type="text" required />
|
||
</div>
|
||
</div>
|
||
<div class="missionDialogFooter">
|
||
<button type="button" class="btn subtle" data-close-dialog="missionSaveAsDialog">Hủy</button>
|
||
<button type="submit" class="btn primary">Lưu bản sao</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<dialog id="missionActionConfigDialog" class="missionDialog missionDialogWide">
|
||
<form id="missionActionConfigForm" method="dialog" class="missionDialogForm">
|
||
<div class="missionDialogHeader">
|
||
<h3 id="missionActionConfigTitle">Cấu hình action</h3>
|
||
<button type="button" class="iconBtn missionDialogClose" data-close-dialog="missionActionConfigDialog" aria-label="Đóng">×</button>
|
||
</div>
|
||
<div class="missionDialogBody" id="missionActionConfigBody"></div>
|
||
<div class="missionDialogFooter">
|
||
<button type="button" class="btn subtle" data-close-dialog="missionActionConfigDialog">Hủy</button>
|
||
<button type="submit" class="btn primary">Áp dụng</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<dialog id="missionQueueDialog" class="missionDialog">
|
||
<form id="missionQueueForm" method="dialog" class="missionDialogForm">
|
||
<div class="missionDialogHeader">
|
||
<h3>Thêm vào mission queue</h3>
|
||
<button type="button" class="iconBtn missionDialogClose" data-close-dialog="missionQueueDialog" aria-label="Đóng">×</button>
|
||
</div>
|
||
<div class="missionDialogBody">
|
||
<p id="missionQueueDialogMission" class="mutedNote">—</p>
|
||
<div id="missionQueueVarFields" class="missionConfigGrid"></div>
|
||
<p id="missionQueueVarHint" class="mutedNote" hidden>Tham số đã chọn sẽ hiển thị màu xanh trong queue.</p>
|
||
</div>
|
||
<div class="missionDialogFooter">
|
||
<button type="button" class="btn subtle" data-close-dialog="missionQueueDialog">Hủy</button>
|
||
<button type="submit" class="btn primary">Thêm vào queue</button>
|
||
</div>
|
||
</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>
|
||
|
||
<dialog id="integrationAddTriggerDialog" class="missionDialog">
|
||
<form id="integrationAddTriggerForm" method="dialog" class="missionDialogForm">
|
||
<div class="missionDialogHeader">
|
||
<h3>Modbus trigger</h3>
|
||
<button type="button" class="iconBtn missionDialogClose" data-close-dialog="integrationAddTriggerDialog" aria-label="Đóng">×</button>
|
||
</div>
|
||
<div class="missionDialogBody">
|
||
<div class="row rowWide">
|
||
<label for="integrationTriggerName">Tên trigger</label>
|
||
<input id="integrationTriggerName" type="text" required placeholder="VD: PLC line 1 start" />
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label for="integrationTriggerCoil">Coil ID</label>
|
||
<input id="integrationTriggerCoil" type="number" min="1001" max="2000" value="1001" required />
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label for="integrationTriggerMission">Mission</label>
|
||
<select id="integrationTriggerMission" required></select>
|
||
</div>
|
||
</div>
|
||
<div class="missionDialogFooter">
|
||
<button type="button" class="btn subtle" data-close-dialog="integrationAddTriggerDialog">Hủy</button>
|
||
<button type="submit" class="btn primary">Thêm</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<dialog id="integrationAddScheduleDialog" class="missionDialog">
|
||
<form id="integrationAddScheduleForm" method="dialog" class="missionDialogForm">
|
||
<div class="missionDialogHeader">
|
||
<h3>Lịch MiRFleet</h3>
|
||
<button type="button" class="iconBtn missionDialogClose" data-close-dialog="integrationAddScheduleDialog" aria-label="Đóng">×</button>
|
||
</div>
|
||
<div class="missionDialogBody">
|
||
<div class="row rowWide">
|
||
<label for="integrationScheduleName">Tên lịch</label>
|
||
<input id="integrationScheduleName" type="text" required placeholder="VD: Ca sáng — đi dock" />
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label for="integrationScheduleMission">Mission</label>
|
||
<select id="integrationScheduleMission" required></select>
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label for="integrationScheduleRobot">Robot</label>
|
||
<select id="integrationScheduleRobot"></select>
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label for="integrationSchedulePriority">Ưu tiên</label>
|
||
<input id="integrationSchedulePriority" type="number" value="0" />
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label for="integrationScheduleMode">Chế độ</label>
|
||
<select id="integrationScheduleMode">
|
||
<option value="asap">ASAP — vào queue ngay</option>
|
||
<option value="scheduled">Scheduled — theo thời gian</option>
|
||
</select>
|
||
</div>
|
||
<div class="row rowWide" id="integrationScheduleStartAtRow" hidden>
|
||
<label for="integrationScheduleStartAt">Thời gian bắt đầu</label>
|
||
<input id="integrationScheduleStartAt" type="datetime-local" />
|
||
</div>
|
||
</div>
|
||
<div class="missionDialogFooter">
|
||
<button type="button" class="btn subtle" data-close-dialog="integrationAddScheduleDialog">Hủy</button>
|
||
<button type="submit" class="btn primary">Thêm</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<dialog id="changePasswordDialog" class="missionDialog">
|
||
<form id="changePasswordForm" method="dialog" class="missionDialogForm">
|
||
<div class="missionDialogHeader">
|
||
<h3>Đổi mật khẩu</h3>
|
||
<button type="button" class="iconBtn missionDialogClose" onclick="document.getElementById('changePasswordDialog').close()" aria-label="Đóng">×</button>
|
||
</div>
|
||
<div class="missionDialogBody">
|
||
<div class="row rowWide">
|
||
<label for="changePasswordCurrent">Mật khẩu hiện tại</label>
|
||
<input id="changePasswordCurrent" type="password" autocomplete="current-password" required />
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label for="changePasswordNew">Mật khẩu mới</label>
|
||
<input id="changePasswordNew" type="password" autocomplete="new-password" required minlength="4" />
|
||
</div>
|
||
<div class="row rowWide">
|
||
<label for="changePasswordConfirm">Xác nhận mật khẩu mới</label>
|
||
<input id="changePasswordConfirm" type="password" autocomplete="new-password" required minlength="4" />
|
||
</div>
|
||
<p id="changePasswordError" class="loginError"></p>
|
||
</div>
|
||
<div class="missionDialogFooter">
|
||
<button type="button" class="btn subtle" onclick="document.getElementById('changePasswordDialog').close()">Hủy</button>
|
||
<button type="submit" class="btn primary">Lưu</button>
|
||
</div>
|
||
</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>
|
||
</body>
|
||
</html>
|