1925 lines
95 KiB
HTML
1925 lines
95 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Device Registry | Soundbox Ops</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|
|
[data-weight="fill"] .material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 1;
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #E2E8F0;
|
|
border-radius: 10px;
|
|
}
|
|
.data-table-container {
|
|
scrollbar-gutter: stable;
|
|
}
|
|
</style>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-tertiary": "#ffffff",
|
|
"secondary-fixed-dim": "#b7c8e1",
|
|
"warning": "#F59E0B",
|
|
"on-primary-fixed-variant": "#003ea8",
|
|
"inverse-surface": "#2e3039",
|
|
"surface": "#faf8ff",
|
|
"surface-container-low": "#f3f3fe",
|
|
"outline": "#737686",
|
|
"on-primary": "#ffffff",
|
|
"tertiary-fixed": "#ffdbcd",
|
|
"primary": "#004ac6",
|
|
"on-error-container": "#93000a",
|
|
"surface-tint": "#0053db",
|
|
"tertiary-container": "#bc4800",
|
|
"surface-variant": "#e1e2ed",
|
|
"on-tertiary-fixed": "#360f00",
|
|
"surface-container-high": "#e7e7f3",
|
|
"info": "#0EA5E9",
|
|
"slate-500": "#64748B",
|
|
"tertiary-fixed-dim": "#ffb596",
|
|
"on-surface": "#191b23",
|
|
"outline-variant": "#c3c6d7",
|
|
"error": "#ba1a1a",
|
|
"inverse-on-surface": "#f0f0fb",
|
|
"on-primary-fixed": "#00174b",
|
|
"surface-bright": "#faf8ff",
|
|
"surface-container": "#ededf9",
|
|
"error-container": "#ffdad6",
|
|
"slate-900": "#0F172A",
|
|
"inverse-primary": "#b4c5ff",
|
|
"on-tertiary-fixed-variant": "#7d2d00",
|
|
"slate-700": "#334155",
|
|
"slate-200": "#E2E8F0",
|
|
"on-background": "#191b23",
|
|
"on-error": "#ffffff",
|
|
"on-secondary": "#ffffff",
|
|
"secondary": "#505f76",
|
|
"on-secondary-fixed": "#0b1c30",
|
|
"on-secondary-fixed-variant": "#38485d",
|
|
"danger": "#DC2626",
|
|
"on-primary-container": "#eeefff",
|
|
"success": "#16A34A",
|
|
"on-tertiary-container": "#ffede6",
|
|
"surface-container-highest": "#e1e2ed",
|
|
"primary-fixed": "#dbe1ff",
|
|
"on-surface-variant": "#434655",
|
|
"secondary-container": "#d0e1fb",
|
|
"primary-container": "#2563eb",
|
|
"background": "#F8FAFC",
|
|
"primary-fixed-dim": "#b4c5ff",
|
|
"tertiary": "#943700",
|
|
"secondary-fixed": "#d3e4fe",
|
|
"surface-dim": "#d9d9e5",
|
|
"on-secondary-container": "#54647a",
|
|
"slate-100": "#F1F5F9"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"page-padding": "24px",
|
|
"gutter": "24px",
|
|
"topbar-height": "72px",
|
|
"card-padding": "20px",
|
|
"row-height": "52px"
|
|
},
|
|
"fontFamily": {
|
|
"display-lg": ["Plus Jakarta Sans"],
|
|
"label-md": ["Inter"],
|
|
"headline-md": ["Plus Jakarta Sans"],
|
|
"body-md": ["Inter"],
|
|
"headline-lg": ["Plus Jakarta Sans"],
|
|
"body-lg": ["Inter"],
|
|
"metric-lg": ["Inter"],
|
|
"metric-sm": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"display-lg": ["36px", { "lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "600" }],
|
|
"label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.01em", "fontWeight": "500" }],
|
|
"headline-md": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
|
|
"body-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
|
|
"headline-lg": ["28px", { "lineHeight": "36px", "fontWeight": "600" }],
|
|
"body-lg": ["16px", { "lineHeight": "24px", "fontWeight": "400" }],
|
|
"metric-lg": ["32px", { "lineHeight": "40px", "fontWeight": "600" }],
|
|
"metric-sm": ["14px", { "lineHeight": "20px", "fontWeight": "600" }]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-background font-body-md text-on-background min-h-screen">
|
|
<!-- Sidebar Navigation -->
|
|
<aside class="fixed inset-y-0 left-0 z-50 hidden w-64 border-r border-slate-200 bg-white px-4 py-6 lg:flex lg:flex-col">
|
|
<div class="px-2">
|
|
<h1 class="text-[22px] font-extrabold leading-tight text-blue-700">Soundbox Ops</h1>
|
|
<p class="mt-1 text-[12px] font-bold uppercase leading-none text-slate-500">Monitoring Console</p>
|
|
</div>
|
|
<nav class="mt-8 flex flex-1 flex-col gap-1">
|
|
<a class="flex h-11 items-center gap-3 rounded-lg px-3 text-[15px] font-semibold leading-none transition-colors text-slate-600 hover:bg-slate-100 hover:text-blue-700" href="/ui/soundbox-ops">
|
|
<span class="material-symbols-outlined text-[22px] shrink-0">monitor_heart</span>
|
|
<span class="truncate">Monitoring</span>
|
|
</a>
|
|
<a class="flex h-11 items-center gap-3 rounded-lg px-3 text-[15px] font-semibold leading-none transition-colors bg-blue-50 text-blue-700" href="/ui/device-registry-monitoring">
|
|
<span class="material-symbols-outlined text-[22px] shrink-0">speaker_group</span>
|
|
<span class="truncate">Registry</span>
|
|
</a>
|
|
<a class="flex h-11 items-center gap-3 rounded-lg px-3 text-[15px] font-semibold leading-none transition-colors text-slate-600 hover:bg-slate-100 hover:text-blue-700" href="/ui/mqtt-trace">
|
|
<span class="material-symbols-outlined text-[22px] shrink-0">lan</span>
|
|
<span class="truncate">MQTT Trace</span>
|
|
</a>
|
|
<a class="flex h-11 items-center gap-3 rounded-lg px-3 text-[15px] font-semibold leading-none transition-colors text-slate-600 hover:bg-slate-100 hover:text-blue-700" href="/ui/config-commands">
|
|
<span class="material-symbols-outlined text-[22px] shrink-0">settings_remote</span>
|
|
<span class="truncate">Config & Commands</span>
|
|
</a>
|
|
<a class="flex h-11 items-center gap-3 rounded-lg px-3 text-[15px] font-semibold leading-none transition-colors text-slate-600 hover:bg-slate-100 hover:text-blue-700" href="/ui/soundbox-catalog">
|
|
<span class="material-symbols-outlined text-[22px] shrink-0">category</span>
|
|
<span class="truncate">Catalog</span>
|
|
</a>
|
|
</nav>
|
|
<div class="border-t border-slate-200 pt-4">
|
|
<a class="flex h-11 items-center gap-3 rounded-lg px-3 text-[15px] font-semibold leading-none transition-colors text-slate-600 hover:bg-slate-100 hover:text-blue-700" href="/ui/admin-login">
|
|
<span class="material-symbols-outlined text-[22px] shrink-0">logout</span>
|
|
<span class="truncate">Logout</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- Top Navigation Bar -->
|
|
<header class="fixed top-0 right-0 h-[72px] flex justify-between items-center w-[calc(100%-256px)] ml-64 px-page-padding bg-surface-container-lowest z-40">
|
|
<div class="flex items-center gap-8">
|
|
<div class="relative w-96">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">search</span>
|
|
<input id="device-search-input" class="w-full bg-slate-50 border-none rounded-full pl-10 pr-4 py-2 text-body-md focus:ring-2 focus:ring-primary/20" placeholder="Search devices, merchants..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button id="device-refresh-button" class="bg-white border border-slate-200 px-4 py-2 rounded-xl font-bold text-on-surface-variant flex items-center gap-2 hover:bg-slate-50">
|
|
<span class="material-symbols-outlined text-[18px]">sync</span>
|
|
Refresh
|
|
</button>
|
|
<button id="topbar-register-device-open" class="bg-primary hover:bg-primary-container text-on-primary px-4 py-2 rounded-xl font-bold flex items-center gap-2 transition-all active:scale-95">
|
|
<span class="material-symbols-outlined text-[18px]">add</span>
|
|
Register
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Area -->
|
|
<main class="ml-64 pt-[72px] p-page-padding">
|
|
<!-- Page Header -->
|
|
<div class="mb-8">
|
|
<div>
|
|
<h2 class="font-headline-lg text-headline-lg text-on-surface mb-1">Device Registry</h2>
|
|
<p class="text-body-md text-on-surface-variant">Manage and monitor all IoT soundbox units across the network.</p>
|
|
</div>
|
|
</div>
|
|
<!-- Summary KPI Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter mb-8">
|
|
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl shadow-sm">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div class="w-10 h-10 bg-primary/10 text-primary rounded-lg flex items-center justify-center">
|
|
<span class="material-symbols-outlined" data-icon="devices">devices</span>
|
|
</div>
|
|
<span id="device-kpi-total-note" class="text-slate-500 text-metric-sm font-metric-sm flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-[16px]">trending_up</span>
|
|
Live
|
|
</span>
|
|
</div>
|
|
<h3 class="text-label-md font-label-md text-slate-500 uppercase tracking-wider">Total Registered</h3>
|
|
<p id="device-kpi-total-registered" class="text-metric-lg font-metric-lg text-on-surface">0</p>
|
|
<div class="mt-4 w-full bg-slate-100 h-1.5 rounded-full overflow-hidden">
|
|
<div id="device-kpi-total-bar" class="bg-primary h-full" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl shadow-sm">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div class="w-10 h-10 bg-success/10 text-success rounded-lg flex items-center justify-center">
|
|
<span class="material-symbols-outlined" data-icon="router">router</span>
|
|
</div>
|
|
<span id="device-kpi-active-note" class="text-slate-500 text-metric-sm font-metric-sm flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-[16px]">check_circle</span>
|
|
0% Rate
|
|
</span>
|
|
</div>
|
|
<h3 class="text-label-md font-label-md text-slate-500 uppercase tracking-wider">Active Units</h3>
|
|
<p id="device-kpi-active-units" class="text-metric-lg font-metric-lg text-on-surface">0</p>
|
|
<div class="mt-4 w-full bg-slate-100 h-1.5 rounded-full overflow-hidden">
|
|
<div id="device-kpi-active-bar" class="bg-success h-full" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl shadow-sm">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div class="w-10 h-10 bg-warning/10 text-warning rounded-lg flex items-center justify-center">
|
|
<span class="material-symbols-outlined" data-icon="inventory_2">inventory_2</span>
|
|
</div>
|
|
<span id="device-kpi-unassigned-note" class="text-slate-500 text-metric-sm font-metric-sm">Unassigned</span>
|
|
</div>
|
|
<h3 class="text-label-md font-label-md text-slate-500 uppercase tracking-wider">Stock Available</h3>
|
|
<p id="device-kpi-unassigned" class="text-metric-lg font-metric-lg text-on-surface">0</p>
|
|
<div class="mt-4 w-full bg-slate-100 h-1.5 rounded-full overflow-hidden">
|
|
<div id="device-kpi-unassigned-bar" class="bg-warning h-full" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Filter Bar & Data Table -->
|
|
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl shadow-sm overflow-hidden">
|
|
<!-- Filters -->
|
|
<div class="p-4 border-b border-slate-200 flex flex-wrap items-center gap-4 bg-slate-50/50">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-slate-400" data-icon="filter_list">filter_list</span>
|
|
<span class="font-bold text-body-md">Filters</span>
|
|
</div>
|
|
<div class="h-6 w-[1px] bg-slate-300 mx-2"></div>
|
|
<select id="device-model-filter" class="bg-white border-slate-200 rounded-lg text-body-md py-1.5 px-3 focus:ring-primary focus:border-primary">
|
|
<option value="">All Models</option>
|
|
</select>
|
|
<select id="device-merchant-filter" class="bg-white border-slate-200 rounded-lg text-body-md py-1.5 px-3 focus:ring-primary focus:border-primary">
|
|
<option value="">All Merchants</option>
|
|
</select>
|
|
<select id="device-connection-filter" class="bg-white border-slate-200 rounded-lg text-body-md py-1.5 px-3 focus:ring-primary focus:border-primary">
|
|
<option value="">All Connections</option>
|
|
<option value="static">Static</option>
|
|
<option value="mqtt">MQTT</option>
|
|
<option value="api">API</option>
|
|
</select>
|
|
<div class="ml-auto flex items-center gap-2">
|
|
<button id="device-clear-filter" class="text-primary font-bold text-body-md hover:underline">Clear All</button>
|
|
<button class="bg-white border border-slate-200 px-3 py-1.5 rounded-lg text-body-md flex items-center gap-2 hover:bg-slate-50">
|
|
<span class="material-symbols-outlined text-[18px]" data-icon="download">download</span>
|
|
Export List
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Table Container -->
|
|
<div class="overflow-x-auto data-table-container">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="bg-slate-50 border-b border-slate-200">
|
|
<th class="px-6 py-4 font-bold text-label-md text-slate-500 uppercase tracking-wider">Serial Number</th>
|
|
<th class="px-6 py-4 font-bold text-label-md text-slate-500 uppercase tracking-wider">Model</th>
|
|
<th class="px-6 py-4 font-bold text-label-md text-slate-500 uppercase tracking-wider">Merchant Binding</th>
|
|
<th class="px-6 py-4 font-bold text-label-md text-slate-500 uppercase tracking-wider">Connection</th>
|
|
<th class="px-6 py-4 font-bold text-label-md text-slate-500 uppercase tracking-wider">Status</th>
|
|
<th class="px-6 py-4 font-bold text-label-md text-slate-500 uppercase tracking-wider">Health</th>
|
|
<th class="px-6 py-4 font-bold text-label-md text-slate-500 uppercase tracking-wider text-right">Last Seen</th>
|
|
<th class="px-6 py-4"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="device-table-body" class="divide-y divide-slate-100">
|
|
<tr>
|
|
<td id="device-table-empty" colspan="8" class="px-6 py-10 text-center text-slate-500">Loading device registry...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Pagination -->
|
|
<div class="p-4 border-t border-slate-200 flex items-center justify-between bg-white">
|
|
<span id="device-pagination-label" class="text-body-md text-slate-500">Loading devices...</span>
|
|
<div class="flex items-center gap-3">
|
|
<label class="flex items-center gap-2 text-body-md text-slate-500">
|
|
Rows
|
|
<select id="device-page-size" class="rounded-lg border-slate-200 py-1.5 text-body-md focus:border-primary focus:ring-primary">
|
|
<option value="10">10</option>
|
|
<option value="25">25</option>
|
|
<option value="50">50</option>
|
|
</select>
|
|
</label>
|
|
<div id="device-pagination-controls" class="flex items-center gap-1"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Register Device Modal -->
|
|
<div id="device-register-modal" class="fixed inset-0 z-[70] hidden">
|
|
<div id="device-register-overlay" class="absolute inset-0 bg-slate-900/45 backdrop-blur-sm"></div>
|
|
<div class="relative ml-auto flex h-full w-full max-w-[720px] flex-col bg-white shadow-2xl">
|
|
<div class="flex items-center justify-between border-b border-slate-200 px-6 py-5">
|
|
<div>
|
|
<h3 class="text-headline-md font-bold text-on-surface">Register Device</h3>
|
|
<p class="mt-1 text-body-md text-on-surface-variant">Provision a QF soundbox and optionally bind it to a merchant terminal.</p>
|
|
</div>
|
|
<button id="device-register-close" class="flex h-10 w-10 items-center justify-center rounded-lg text-slate-500 hover:bg-slate-100">
|
|
<span class="material-symbols-outlined">close</span>
|
|
</button>
|
|
</div>
|
|
<form id="device-register-form" class="flex min-h-0 flex-1 flex-col">
|
|
<div class="flex-1 space-y-6 overflow-y-auto px-6 py-6">
|
|
<section>
|
|
<div class="mb-4 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary">badge</span>
|
|
<h4 class="font-bold text-on-surface">Device Identity</h4>
|
|
</div>
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<label class="block">
|
|
<span class="mb-1 block text-label-md font-bold uppercase text-slate-500">Device Code</span>
|
|
<input id="register-device-code" class="w-full rounded-lg border-slate-200 bg-slate-50 text-body-md text-slate-500" disabled type="text" value="Generated after create"/>
|
|
</label>
|
|
<label class="block">
|
|
<span class="mb-1 block text-label-md font-bold uppercase text-slate-500">Serial Number / dev-sn</span>
|
|
<input id="register-serial-number" class="w-full rounded-lg border-slate-200 font-mono text-body-md focus:border-primary focus:ring-primary" placeholder="SN-QF100-0001" required type="text"/>
|
|
</label>
|
|
<label class="block">
|
|
<span class="mb-1 block text-label-md font-bold uppercase text-slate-500">Vendor</span>
|
|
<select id="register-vendor" class="w-full rounded-lg border-slate-200 text-body-md focus:border-primary focus:ring-primary">
|
|
<option value="QF">QF</option>
|
|
</select>
|
|
</label>
|
|
<label class="block">
|
|
<span class="mb-1 block text-label-md font-bold uppercase text-slate-500">Model</span>
|
|
<select id="register-model" class="w-full rounded-lg border-slate-200 text-body-md focus:border-primary focus:ring-primary">
|
|
<option value="QF100">QF100</option>
|
|
</select>
|
|
</label>
|
|
<label class="block">
|
|
<span class="mb-1 block text-label-md font-bold uppercase text-slate-500">Firmware Version</span>
|
|
<input id="register-firmware-version" class="w-full rounded-lg border-slate-200 text-body-md focus:border-primary focus:ring-primary" placeholder="Optional" type="text"/>
|
|
</label>
|
|
<label class="block">
|
|
<span class="mb-1 block text-label-md font-bold uppercase text-slate-500">Status</span>
|
|
<select id="register-status" class="w-full rounded-lg border-slate-200 text-body-md focus:border-primary focus:ring-primary">
|
|
<option value="active">Active</option>
|
|
<option value="inactive">Inactive</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<div class="mb-4 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary">speaker_group</span>
|
|
<h4 class="font-bold text-on-surface">Device Capability</h4>
|
|
</div>
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<label class="block">
|
|
<span class="mb-1 block text-label-md font-bold uppercase text-slate-500">Device Type</span>
|
|
<select id="register-device-type" class="w-full rounded-lg border-slate-200 text-body-md focus:border-primary focus:ring-primary">
|
|
<option value="static_soundbox">Static sound-only</option>
|
|
<option value="dynamic_screen_soundbox">Dynamic screen QR</option>
|
|
</select>
|
|
</label>
|
|
<label class="block">
|
|
<span class="mb-1 block text-label-md font-bold uppercase text-slate-500">Communication</span>
|
|
<select id="register-communication-mode" class="w-full rounded-lg border-slate-200 text-body-md focus:border-primary focus:ring-primary">
|
|
<option value="mqtt">MQTT</option>
|
|
<option value="static">Static</option>
|
|
<option value="api">API</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div id="register-capability-preview" class="mt-4 rounded-lg border border-slate-200 bg-slate-50 p-4 text-body-md text-slate-600"></div>
|
|
</section>
|
|
<section>
|
|
<div class="mb-4 flex items-center justify-between gap-3">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary">storefront</span>
|
|
<h4 class="font-bold text-on-surface">Merchant Binding</h4>
|
|
</div>
|
|
<span class="text-label-md font-bold uppercase text-slate-400">Optional</span>
|
|
</div>
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
|
|
<label class="block">
|
|
<span class="mb-1 block text-label-md font-bold uppercase text-slate-500">Merchant</span>
|
|
<select id="register-merchant" class="w-full rounded-lg border-slate-200 text-body-md focus:border-primary focus:ring-primary">
|
|
<option value="">Unassigned</option>
|
|
</select>
|
|
</label>
|
|
<label class="block">
|
|
<span class="mb-1 block text-label-md font-bold uppercase text-slate-500">Outlet</span>
|
|
<select id="register-outlet" class="w-full rounded-lg border-slate-200 text-body-md focus:border-primary focus:ring-primary" disabled>
|
|
<option value="">Select merchant first</option>
|
|
</select>
|
|
</label>
|
|
<label class="block">
|
|
<span class="mb-1 block text-label-md font-bold uppercase text-slate-500">Terminal</span>
|
|
<select id="register-terminal" class="w-full rounded-lg border-slate-200 text-body-md focus:border-primary focus:ring-primary" disabled>
|
|
<option value="">Select outlet first</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<label class="flex items-start gap-3 rounded-lg border border-slate-200 bg-slate-50 p-4">
|
|
<input id="register-rotate-credential" class="mt-1 rounded border-slate-300 text-primary focus:ring-primary" type="checkbox"/>
|
|
<span>
|
|
<span class="block font-bold text-on-surface">Issue MQTT credential after create</span>
|
|
<span class="block text-body-md text-slate-500">Use this when each device should get its own username and one-time password.</span>
|
|
</span>
|
|
</label>
|
|
<div id="register-result" class="mt-4 hidden rounded-lg border border-slate-200 bg-slate-50 p-4 text-body-md"></div>
|
|
</section>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 border-t border-slate-200 px-6 py-4">
|
|
<p id="register-form-status" class="min-h-5 text-body-md text-slate-500"></p>
|
|
<div class="flex items-center gap-3">
|
|
<button id="device-register-cancel" type="button" class="rounded-lg border border-slate-200 px-4 py-2.5 font-bold text-slate-700 hover:bg-slate-50">Cancel</button>
|
|
<button id="device-register-submit" type="submit" class="rounded-lg bg-primary px-5 py-2.5 font-bold text-white hover:bg-primary-container">Create Device</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- Edit Device Modal -->
|
|
<div id="device-edit-modal" class="fixed inset-0 z-[70] hidden">
|
|
<div id="device-edit-overlay" class="absolute inset-0 bg-slate-900/45 backdrop-blur-sm"></div>
|
|
<div class="relative ml-auto flex h-full w-full max-w-[640px] flex-col bg-white shadow-2xl">
|
|
<div class="flex items-center justify-between border-b border-slate-200 px-6 py-5">
|
|
<div>
|
|
<h3 class="text-headline-md font-bold text-on-surface">Edit Device</h3>
|
|
<p class="mt-1 text-body-md text-on-surface-variant">Correct serial number, model, and operational metadata.</p>
|
|
</div>
|
|
<button id="device-edit-close" class="flex h-10 w-10 items-center justify-center rounded-lg text-slate-500 hover:bg-slate-100">
|
|
<span class="material-symbols-outlined">close</span>
|
|
</button>
|
|
</div>
|
|
<form id="device-edit-form" class="flex min-h-0 flex-1 flex-col">
|
|
<div class="flex-1 space-y-5 overflow-y-auto px-6 py-6">
|
|
<input id="edit-device-id" type="hidden"/>
|
|
<div class="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm font-semibold text-amber-800">
|
|
Changing SN affects config pull lookup and MQTT topic routing. Use the physical dev-sn printed on the device.
|
|
</div>
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<label class="block">
|
|
<span class="mb-1 block text-label-md font-bold uppercase text-slate-500">Device Code</span>
|
|
<input id="edit-device-code" class="w-full rounded-lg border-slate-200 bg-slate-50 text-body-md text-slate-500" disabled type="text"/>
|
|
</label>
|
|
<label class="block">
|
|
<span class="mb-1 block text-label-md font-bold uppercase text-slate-500">Serial Number / dev-sn</span>
|
|
<input id="edit-serial-number" class="w-full rounded-lg border-slate-200 text-body-md focus:border-primary focus:ring-primary" required type="text"/>
|
|
</label>
|
|
<label class="block">
|
|
<span class="mb-1 block text-label-md font-bold uppercase text-slate-500">Vendor</span>
|
|
<select id="edit-vendor" class="w-full rounded-lg border-slate-200 text-body-md focus:border-primary focus:ring-primary"></select>
|
|
</label>
|
|
<label class="block">
|
|
<span class="mb-1 block text-label-md font-bold uppercase text-slate-500">Model</span>
|
|
<select id="edit-model" class="w-full rounded-lg border-slate-200 text-body-md focus:border-primary focus:ring-primary"></select>
|
|
</label>
|
|
<label class="block">
|
|
<span class="mb-1 block text-label-md font-bold uppercase text-slate-500">Communication</span>
|
|
<select id="edit-communication-mode" class="w-full rounded-lg border-slate-200 text-body-md focus:border-primary focus:ring-primary">
|
|
<option value="static">Static</option>
|
|
<option value="mqtt">MQTT</option>
|
|
<option value="api">API</option>
|
|
</select>
|
|
</label>
|
|
<label class="block">
|
|
<span class="mb-1 block text-label-md font-bold uppercase text-slate-500">Status</span>
|
|
<select id="edit-status" class="w-full rounded-lg border-slate-200 text-body-md focus:border-primary focus:ring-primary">
|
|
<option value="active">Active</option>
|
|
<option value="inactive">Inactive</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<label class="block">
|
|
<span class="mb-1 block text-label-md font-bold uppercase text-slate-500">Firmware Version</span>
|
|
<input id="edit-firmware-version" class="w-full rounded-lg border-slate-200 text-body-md focus:border-primary focus:ring-primary" placeholder="Optional" type="text"/>
|
|
</label>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 border-t border-slate-200 px-6 py-4">
|
|
<p id="edit-form-status" class="min-h-5 text-body-md text-slate-500"></p>
|
|
<div class="flex items-center gap-3">
|
|
<button id="device-edit-cancel" type="button" class="rounded-lg border border-slate-200 px-4 py-2.5 font-bold text-slate-700 hover:bg-slate-50">Cancel</button>
|
|
<button id="device-edit-submit" type="submit" class="rounded-lg bg-primary px-5 py-2.5 font-bold text-white hover:bg-primary-container">Save Changes</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- Side Inspection Drawer (Initially hidden, triggered by row interaction) -->
|
|
<div class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-[60] opacity-0 pointer-events-none transition-opacity duration-300" id="device-detail-overlay"></div>
|
|
<div class="fixed inset-y-0 right-0 w-[450px] bg-white shadow-2xl z-[60] transform translate-x-full transition-transform duration-300 ease-in-out border-l border-slate-200" id="device-detail-drawer">
|
|
<div class="h-full flex flex-col">
|
|
<div class="p-6 border-b border-slate-200 flex justify-between items-center">
|
|
<h3 class="font-headline-md text-headline-md">Device Detail</h3>
|
|
<button class="p-2 hover:bg-slate-100 rounded-full" id="device-detail-close">
|
|
<span class="material-symbols-outlined">close</span>
|
|
</button>
|
|
</div>
|
|
<div class="p-6 overflow-y-auto flex-1">
|
|
<div class="flex items-center gap-4 mb-8">
|
|
<img alt="Soundbox V2 Product" class="w-20 h-20 rounded-xl bg-slate-100" data-alt="A clean professional studio product shot of a minimalist electronic soundbox speaker device with a small LCD screen and premium matte plastic finish. The lighting is soft and corporate with subtle blue reflections on the surface consistent with a high-end fintech hardware brand. The background is a clean neutral white studio setting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuC-CSPTCnxQuDTN1XM0atRPM9hIcVzf3zpbuxEUGTIlC-c1BivDqPa9osmBscvoiUcJeMBwUaXbZ6Ut5FuG2a91sVtZjzWRTgLck34kJJJy3N2E9O3uVtZw6InOpX9Gkph2OJxu_Z-PkR_t3F56EVZY3u8o2iZO3iH8hj9_ajrku7g1r_l54uobcRoN3dRH3k_at6GTuGbMtSSD4ew24sX8nePUsVvILKJauQLcMKD14J6mtAGm0x5PfViQQKdJzf_pYMqKswr3Yz4"/>
|
|
<div>
|
|
<h4 class="font-bold text-headline-md mb-1" id="device-detail-title">-</h4>
|
|
<p class="font-mono text-body-md text-slate-500" id="device-detail-serial">SN: -</p>
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold bg-slate-100 text-slate-600" id="device-detail-model">Device</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-6" id="device-detail-content"></div>
|
|
</div>
|
|
<div class="p-6 border-t border-slate-200 grid grid-cols-2 gap-4">
|
|
<button id="drawer-reboot-device" class="w-full py-2.5 border border-slate-200 rounded-xl font-bold hover:bg-slate-50 transition-colors">Reboot Device</button>
|
|
<button class="w-full py-2.5 bg-danger/10 text-danger rounded-xl font-bold hover:bg-danger/20 transition-colors">Unbind Merchant</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/ui/shared/admin-api.js"></script>
|
|
<script>
|
|
(function () {
|
|
const api = window.AdminUIAPI;
|
|
if (!api) {
|
|
return;
|
|
}
|
|
|
|
const tableBody = document.getElementById("device-table-body");
|
|
const searchInput = document.getElementById("device-search-input");
|
|
const modelFilter = document.getElementById("device-model-filter");
|
|
const merchantFilter = document.getElementById("device-merchant-filter");
|
|
const connectionFilter = document.getElementById("device-connection-filter");
|
|
const clearFilter = document.getElementById("device-clear-filter");
|
|
const kpiTotal = document.getElementById("device-kpi-total-registered");
|
|
const kpiActive = document.getElementById("device-kpi-active-units");
|
|
const kpiUnassigned = document.getElementById("device-kpi-unassigned");
|
|
const kpiActiveNote = document.getElementById("device-kpi-active-note");
|
|
const kpiTotalBar = document.getElementById("device-kpi-total-bar");
|
|
const kpiActiveBar = document.getElementById("device-kpi-active-bar");
|
|
const kpiUnassignedBar = document.getElementById("device-kpi-unassigned-bar");
|
|
const paginationLabel = document.getElementById("device-pagination-label");
|
|
const paginationControls = document.getElementById("device-pagination-controls");
|
|
const pageSizeSelect = document.getElementById("device-page-size");
|
|
|
|
const detailOverlay = document.getElementById("device-detail-overlay");
|
|
const detailDrawer = document.getElementById("device-detail-drawer");
|
|
const detailCloseButton = document.getElementById("device-detail-close");
|
|
const detailTitle = document.getElementById("device-detail-title");
|
|
const detailSerial = document.getElementById("device-detail-serial");
|
|
const detailModel = document.getElementById("device-detail-model");
|
|
const detailContent = document.getElementById("device-detail-content");
|
|
const drawerRebootButton = document.getElementById("drawer-reboot-device");
|
|
const registerModal = document.getElementById("device-register-modal");
|
|
const registerForm = document.getElementById("device-register-form");
|
|
const topbarRegisterOpenButton = document.getElementById("topbar-register-device-open");
|
|
const refreshButton = document.getElementById("device-refresh-button");
|
|
const registerCloseButton = document.getElementById("device-register-close");
|
|
const registerCancelButton = document.getElementById("device-register-cancel");
|
|
const registerOverlay = document.getElementById("device-register-overlay");
|
|
const registerSubmitButton = document.getElementById("device-register-submit");
|
|
const registerStatus = document.getElementById("register-form-status");
|
|
const registerResult = document.getElementById("register-result");
|
|
const registerDeviceType = document.getElementById("register-device-type");
|
|
const registerMerchant = document.getElementById("register-merchant");
|
|
const registerOutlet = document.getElementById("register-outlet");
|
|
const registerTerminal = document.getElementById("register-terminal");
|
|
const registerCapabilityPreview = document.getElementById("register-capability-preview");
|
|
const registerVendor = document.getElementById("register-vendor");
|
|
const registerModel = document.getElementById("register-model");
|
|
const editModal = document.getElementById("device-edit-modal");
|
|
const editForm = document.getElementById("device-edit-form");
|
|
const editCloseButton = document.getElementById("device-edit-close");
|
|
const editCancelButton = document.getElementById("device-edit-cancel");
|
|
const editOverlay = document.getElementById("device-edit-overlay");
|
|
const editSubmitButton = document.getElementById("device-edit-submit");
|
|
const editStatus = document.getElementById("edit-form-status");
|
|
const editVendor = document.getElementById("edit-vendor");
|
|
const editModel = document.getElementById("edit-model");
|
|
let activeEditDevice = null;
|
|
let deviceCatalog = [
|
|
{
|
|
vendor: "QF",
|
|
label: "QF",
|
|
id: "vendor_qf",
|
|
models: [
|
|
{ model: "QF100", label: "QF100", communication_mode: "mqtt" }
|
|
]
|
|
}
|
|
];
|
|
|
|
const normalizeText = (value) => String(value || "").toLowerCase().trim();
|
|
const escapeHtml = (value) => String(value ?? "")
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """)
|
|
.replace(/'/g, "'");
|
|
const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
|
|
const percent = (value, total) => total > 0 ? Math.round((value / total) * 100) : 0;
|
|
const getLastSeenAt = (device) =>
|
|
device?.latest_heartbeat?.received_at ||
|
|
device?.latest_heartbeat?.timestamp ||
|
|
device?.last_seen_at ||
|
|
null;
|
|
|
|
const formatLastSeen = (value) => {
|
|
if (!value) {
|
|
return "No heartbeat";
|
|
}
|
|
|
|
const now = new Date();
|
|
const then = new Date(value);
|
|
if (Number.isNaN(then.getTime())) {
|
|
return value;
|
|
}
|
|
|
|
const diffMinutes = Math.floor((now.getTime() - then.getTime()) / (1000 * 60));
|
|
if (diffMinutes < 1) {
|
|
return "Just now";
|
|
}
|
|
if (diffMinutes < 60) {
|
|
return `${diffMinutes} min ago`;
|
|
}
|
|
if (diffMinutes < 60 * 24) {
|
|
const hours = Math.floor(diffMinutes / 60);
|
|
return `${hours} hour${hours === 1 ? "" : "s"} ago`;
|
|
}
|
|
const days = Math.floor(diffMinutes / (60 * 24));
|
|
return `${days} day${days === 1 ? "" : "s"} ago`;
|
|
};
|
|
|
|
const healthMeta = (value, summary) => {
|
|
if (summary && typeof summary.score === "number") {
|
|
if (summary.score >= 90) {
|
|
return { value: `${summary.score}%`, className: "text-success", icon: "favorite" };
|
|
}
|
|
if (summary.score >= 65) {
|
|
return { value: `${summary.score}%`, className: "text-success", icon: "favorite" };
|
|
}
|
|
if (summary.score >= 35) {
|
|
return { value: `${summary.score}%`, className: "text-warning", icon: "heart_minus" };
|
|
}
|
|
return { value: `${summary.score}%`, className: "text-danger", icon: "heart_broken" };
|
|
}
|
|
if (!value) {
|
|
return { value: "N/A", className: "text-slate-500", icon: "heart_broken" };
|
|
}
|
|
const then = new Date(value);
|
|
if (Number.isNaN(then.getTime())) {
|
|
return { value: "N/A", className: "text-slate-500", icon: "heart_broken" };
|
|
}
|
|
const diffMinutes = Math.floor((Date.now() - then.getTime()) / (1000 * 60));
|
|
if (diffMinutes <= 10) {
|
|
return { value: "Excellent", className: "text-success", icon: "favorite" };
|
|
}
|
|
if (diffMinutes <= 60) {
|
|
return { value: "Good", className: "text-success", icon: "favorite" };
|
|
}
|
|
if (diffMinutes <= 180) {
|
|
return { value: "Fair", className: "text-warning", icon: "heart_minus" };
|
|
}
|
|
return { value: "Poor", className: "text-danger", icon: "heart_broken" };
|
|
};
|
|
|
|
const reasonLabels = {
|
|
no_heartbeat: "No heartbeat",
|
|
offline_threshold_exceeded: "Offline threshold",
|
|
stale_threshold_exceeded: "Stale heartbeat",
|
|
low_signal: "Low signal",
|
|
low_battery: "Low battery"
|
|
};
|
|
|
|
const configStatusMeta = (status) => {
|
|
const value = normalizeText(status);
|
|
if (value === "applied") {
|
|
return { label: "Applied", className: "bg-success/10 text-success border-success/20", icon: "check_circle" };
|
|
}
|
|
if (value === "pulled_not_pushed") {
|
|
return { label: "Pulled by Device", className: "bg-success/10 text-success border-success/20", icon: "check_circle" };
|
|
}
|
|
if (value === "pending_ack") {
|
|
return { label: "Pending ACK", className: "bg-warning/10 text-warning border-warning/20", icon: "pending" };
|
|
}
|
|
if (value === "failed_ack") {
|
|
return { label: "Failed ACK", className: "bg-danger/10 text-danger border-danger/20", icon: "error" };
|
|
}
|
|
if (value === "stale_ack") {
|
|
return { label: "Stale ACK", className: "bg-warning/10 text-warning border-warning/20", icon: "sync_problem" };
|
|
}
|
|
return { label: "Never pushed", className: "bg-slate-100 text-slate-600 border-slate-200", icon: "cloud_off" };
|
|
};
|
|
|
|
const statusMeta = (status) => {
|
|
const value = normalizeText(status);
|
|
if (value === "online") {
|
|
return {
|
|
label: "Online",
|
|
className: "bg-success/10 text-success border border-success/20",
|
|
dot: "bg-success"
|
|
};
|
|
}
|
|
if (value === "degraded") {
|
|
return {
|
|
label: "Degraded",
|
|
className: "bg-warning/10 text-warning border border-warning/20",
|
|
dot: "bg-warning"
|
|
};
|
|
}
|
|
if (value === "stale") {
|
|
return {
|
|
label: "Stale",
|
|
className: "bg-warning/10 text-warning border border-warning/20",
|
|
dot: "bg-warning"
|
|
};
|
|
}
|
|
return {
|
|
label: "Offline",
|
|
className: "bg-slate-100 text-slate-500 border border-slate-200",
|
|
dot: "bg-slate-400"
|
|
};
|
|
};
|
|
|
|
const connectionMeta = (mode) => {
|
|
const value = normalizeText(mode);
|
|
if (value === "static") {
|
|
return { label: "Static", icon: "settings_ethernet" };
|
|
}
|
|
if (value === "mqtt") {
|
|
return { label: "MQTT", icon: "cell_tower" };
|
|
}
|
|
if (value === "api") {
|
|
return { label: "API", icon: "hub" };
|
|
}
|
|
return { label: value || "Unknown", icon: "device_hub" };
|
|
};
|
|
|
|
const selectLabel = (item, fallback) =>
|
|
item?.legal_name ||
|
|
item?.brand_name ||
|
|
item?.company_name ||
|
|
item?.name ||
|
|
item?.merchant_code ||
|
|
item?.outlet_code ||
|
|
item?.terminal_code ||
|
|
item?.id ||
|
|
fallback;
|
|
|
|
const setSelectOptions = (select, items, placeholder, labelFn) => {
|
|
if (!select) {
|
|
return;
|
|
}
|
|
select.innerHTML = "";
|
|
const emptyOption = document.createElement("option");
|
|
emptyOption.value = "";
|
|
emptyOption.textContent = placeholder;
|
|
select.appendChild(emptyOption);
|
|
items.forEach((item) => {
|
|
const option = document.createElement("option");
|
|
option.value = item.id;
|
|
option.textContent = labelFn ? labelFn(item) : selectLabel(item, item.id);
|
|
select.appendChild(option);
|
|
});
|
|
};
|
|
|
|
const getCatalogModel = (vendor, model) => {
|
|
const catalog = deviceCatalog.find((item) => item.vendor === vendor) || deviceCatalog[0];
|
|
return (catalog?.models || []).find((item) => item.model === model) || (catalog?.models || [])[0];
|
|
};
|
|
|
|
const buildCapabilityProfileForModel = (selectedModel, communicationMode, fallbackProfile = {}) => {
|
|
const template = selectedModel?.capability_template_json || {};
|
|
const dynamic = Boolean(
|
|
selectedModel?.screen_flag ||
|
|
String(selectedModel?.qr_mode || template.qr_mode || fallbackProfile.qr_mode || "").startsWith("dynamic") ||
|
|
fallbackProfile.device_type === "dynamic_screen_soundbox"
|
|
);
|
|
const payloadProfile = selectedModel?.mqtt_payload_profile || template.mqtt_payload_profile || fallbackProfile.mqtt_payload_profile || "";
|
|
return {
|
|
...fallbackProfile,
|
|
...template,
|
|
device_type: dynamic ? "dynamic_screen_soundbox" : "static_soundbox",
|
|
screen: dynamic,
|
|
qr_mode: dynamic ? "dynamic_mqtt" : "static",
|
|
...(payloadProfile ? { mqtt_payload_profile: payloadProfile } : {}),
|
|
flows: dynamic ? ["static_payment_notification", "dynamic_qr:mqtt"] : ["static_payment_notification"],
|
|
features: {
|
|
...(typeof fallbackProfile.features === "object" && fallbackProfile.features ? fallbackProfile.features : {}),
|
|
...(typeof template.features === "object" && template.features ? template.features : {}),
|
|
payment_sound: true,
|
|
dynamic_qr: dynamic ? { mqtt: communicationMode === "mqtt", display: "screen" } : false
|
|
}
|
|
};
|
|
};
|
|
|
|
const buildCapabilityProfile = (type, communicationMode) => {
|
|
const dynamic = type === "dynamic_screen_soundbox";
|
|
const selectedModel = getSelectedCatalogModel();
|
|
const template = selectedModel?.capability_template_json || {};
|
|
const payloadProfile = selectedModel?.mqtt_payload_profile || template.mqtt_payload_profile || "";
|
|
return {
|
|
...template,
|
|
device_type: dynamic ? "dynamic_screen_soundbox" : "static_soundbox",
|
|
screen: dynamic,
|
|
qr_mode: dynamic ? "dynamic_mqtt" : "static",
|
|
...(payloadProfile ? { mqtt_payload_profile: payloadProfile } : {}),
|
|
flows: dynamic ? ["static_payment_notification", "dynamic_qr:mqtt"] : ["static_payment_notification"],
|
|
features: {
|
|
...(typeof template.features === "object" && template.features ? template.features : {}),
|
|
payment_sound: true,
|
|
dynamic_qr: dynamic ? { mqtt: communicationMode === "mqtt", display: "screen" } : false
|
|
}
|
|
};
|
|
};
|
|
|
|
const getSelectedCatalogModel = () => {
|
|
const vendor = registerVendor?.value;
|
|
const model = registerModel?.value;
|
|
return getCatalogModel(vendor, model);
|
|
};
|
|
|
|
const updateCapabilityPreview = () => {
|
|
if (!registerCapabilityPreview) {
|
|
return;
|
|
}
|
|
const type = registerDeviceType?.value || "static_soundbox";
|
|
const mode = document.getElementById("register-communication-mode")?.value || "mqtt";
|
|
const profile = buildCapabilityProfile(type, mode);
|
|
registerCapabilityPreview.innerHTML = `
|
|
<div class="mb-2 flex items-center gap-2 font-bold text-on-surface">
|
|
<span class="material-symbols-outlined text-[18px]">${profile.screen ? "qr_code_scanner" : "volume_up"}</span>
|
|
${profile.screen ? "Dynamic screen QR device" : "Static sound-only device"}
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-3 text-sm">
|
|
<div><span class="text-slate-500">QR Mode</span><p class="font-mono font-bold">${profile.qr_mode}</p></div>
|
|
<div><span class="text-slate-500">Payload</span><p class="font-mono font-bold">${profile.mqtt_payload_profile || "-"}</p></div>
|
|
</div>
|
|
`;
|
|
};
|
|
|
|
const resetBindingSelects = () => {
|
|
setSelectOptions(registerOutlet, [], "Select merchant first");
|
|
setSelectOptions(registerTerminal, [], "Select outlet first");
|
|
if (registerOutlet) {
|
|
registerOutlet.disabled = true;
|
|
}
|
|
if (registerTerminal) {
|
|
registerTerminal.disabled = true;
|
|
}
|
|
};
|
|
|
|
const hydrateRegisterMerchants = () => {
|
|
setSelectOptions(registerMerchant, merchants, "Unassigned", (merchant) => selectLabel(merchant, "Merchant"));
|
|
};
|
|
|
|
const loadDeviceCatalog = async () => {
|
|
try {
|
|
const [vendorRows, modelRows] = await Promise.all([
|
|
api.listSoundboxVendors({ status: "active" }),
|
|
api.listSoundboxModels({ status: "active" })
|
|
]);
|
|
const vendors = Array.isArray(vendorRows) ? vendorRows : [];
|
|
const models = Array.isArray(modelRows) ? modelRows : [];
|
|
if (!vendors.length) {
|
|
return;
|
|
}
|
|
deviceCatalog = vendors.map((vendor) => ({
|
|
id: vendor.id,
|
|
vendor: vendor.vendor_code,
|
|
label: vendor.name || vendor.vendor_code,
|
|
models: models
|
|
.filter((model) => model.vendor_id === vendor.id)
|
|
.map((model) => ({
|
|
id: model.id,
|
|
model: model.model_code,
|
|
label: model.name || model.model_code,
|
|
communication_mode: model.communication_mode,
|
|
screen_flag: model.screen_flag,
|
|
qr_mode: model.qr_mode,
|
|
mqtt_payload_profile: model.mqtt_payload_profile,
|
|
capability_template_json: model.capability_template_json || {}
|
|
}))
|
|
})).filter((vendor) => vendor.models.length);
|
|
} catch (error) {
|
|
console.warn("[device-registry] using fallback device catalog", error);
|
|
}
|
|
};
|
|
|
|
const hydrateCatalogVendorSelect = (vendorSelect, modelSelect, selectedVendor = "") => {
|
|
if (!vendorSelect || !modelSelect) {
|
|
return;
|
|
}
|
|
vendorSelect.innerHTML = "";
|
|
deviceCatalog.forEach((item) => {
|
|
const option = document.createElement("option");
|
|
option.value = item.vendor;
|
|
option.textContent = item.label || item.vendor;
|
|
vendorSelect.appendChild(option);
|
|
});
|
|
vendorSelect.value = selectedVendor && deviceCatalog.some((item) => item.vendor === selectedVendor)
|
|
? selectedVendor
|
|
: deviceCatalog[0]?.vendor || "QF";
|
|
hydrateCatalogModelSelect(vendorSelect.value, modelSelect);
|
|
};
|
|
|
|
const hydrateCatalogModelSelect = (vendor, modelSelect, selectedModel = "") => {
|
|
if (!modelSelect) {
|
|
return;
|
|
}
|
|
const catalog = deviceCatalog.find((item) => item.vendor === vendor) || deviceCatalog[0];
|
|
modelSelect.innerHTML = "";
|
|
(catalog?.models || []).forEach((item) => {
|
|
const option = document.createElement("option");
|
|
option.value = item.model;
|
|
option.textContent = item.label || item.model;
|
|
if (item.communication_mode) {
|
|
option.dataset.communicationMode = item.communication_mode;
|
|
}
|
|
if (item.mqtt_payload_profile) {
|
|
option.dataset.payloadProfile = item.mqtt_payload_profile;
|
|
}
|
|
modelSelect.appendChild(option);
|
|
});
|
|
if (selectedModel && (catalog?.models || []).some((item) => item.model === selectedModel)) {
|
|
modelSelect.value = selectedModel;
|
|
}
|
|
};
|
|
|
|
const hydrateDeviceCatalog = () => {
|
|
hydrateCatalogVendorSelect(registerVendor, registerModel);
|
|
const catalog = deviceCatalog.find((item) => item.vendor === registerVendor?.value) || deviceCatalog[0];
|
|
const selectedModel = (catalog?.models || [])[0];
|
|
if (selectedModel?.communication_mode) {
|
|
document.getElementById("register-communication-mode").value = selectedModel.communication_mode;
|
|
}
|
|
updateCapabilityPreview();
|
|
};
|
|
|
|
const hydrateDeviceModels = (vendor) => {
|
|
hydrateCatalogModelSelect(vendor, registerModel);
|
|
const catalog = deviceCatalog.find((item) => item.vendor === vendor) || deviceCatalog[0];
|
|
const selectedModel = (catalog?.models || [])[0];
|
|
if (selectedModel?.communication_mode) {
|
|
document.getElementById("register-communication-mode").value = selectedModel.communication_mode;
|
|
}
|
|
updateCapabilityPreview();
|
|
};
|
|
|
|
let rows = [];
|
|
let filteredRows = [];
|
|
let currentPage = 1;
|
|
let pageSize = Number(pageSizeSelect?.value || 10);
|
|
let currentSearchQuery = "";
|
|
let activeDrawerDevice = null;
|
|
let merchants = [];
|
|
let outlets = [];
|
|
let terminals = [];
|
|
const merchantMap = new Map();
|
|
let timeoutId;
|
|
|
|
const renderRows = (items) => {
|
|
if (!tableBody) {
|
|
return;
|
|
}
|
|
if (!items.length) {
|
|
const message = currentSearchQuery
|
|
? `No devices found for "${escapeHtml(currentSearchQuery)}".`
|
|
: "No devices found.";
|
|
tableBody.innerHTML = `<tr><td colspan="8" class="px-6 py-10 text-center text-slate-500">${message}</td></tr>`;
|
|
return;
|
|
}
|
|
|
|
tableBody.innerHTML = items
|
|
.map((device) => {
|
|
const id = device.device_code || device.id || "";
|
|
const serialNumber = escapeHtml(device.serial_number || "-");
|
|
const model = device.model || "Unknown";
|
|
const binding = device.binding_summary || {};
|
|
const merchantName = merchantMap.get(binding.merchant_id) || "Unassigned";
|
|
const status = statusMeta(device.derived_status);
|
|
const connection = connectionMeta(device.communication_mode);
|
|
const lastSeenAt = getLastSeenAt(device);
|
|
const health = healthMeta(lastSeenAt, device.health_summary);
|
|
|
|
return `
|
|
<tr class="hover:bg-slate-50 transition-colors group">
|
|
<td class="px-6 py-row-height">
|
|
<div class="space-y-1">
|
|
<span class="block font-mono text-primary font-bold">${serialNumber}</span>
|
|
<span class="block font-mono text-[12px] text-slate-500">${id ? `Code: ${escapeHtml(id)}` : "Code: -"}</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-row-height">${model}</td>
|
|
<td class="px-6 py-row-height">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-6 h-6 rounded bg-slate-100 flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-[16px]">${merchantName === "Unassigned" ? "block" : "store"}</span>
|
|
</div>
|
|
<span>${merchantName}</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-row-height">
|
|
<span class="flex items-center gap-1.5 text-slate-600">
|
|
<span class="material-symbols-outlined text-[18px]">${connection.icon}</span>
|
|
${connection.label}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-row-height">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold ${status.className}">
|
|
<span class="w-1.5 h-1.5 rounded-full ${status.dot} mr-1.5"></span>
|
|
${status.label}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-row-height">
|
|
<span class="flex items-center gap-1 ${health.className}">
|
|
<span class="material-symbols-outlined text-[18px]">${health.icon}</span>
|
|
${health.value}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-row-height text-right font-mono text-slate-500">${formatLastSeen(lastSeenAt)}</td>
|
|
<td class="relative px-6 py-row-height text-right">
|
|
<button class="p-2 text-slate-500 hover:bg-slate-200 hover:text-slate-900 rounded-lg" data-action="toggle-device-actions" data-id="${id}" aria-label="Device actions">
|
|
<span class="material-symbols-outlined">more_vert</span>
|
|
</button>
|
|
<div class="absolute right-6 top-12 z-30 hidden w-48 rounded-lg border border-slate-200 bg-white p-1 text-left shadow-lg" data-device-menu="${id}">
|
|
<a class="flex items-center gap-2 rounded-md px-3 py-2 text-sm font-bold text-slate-700 hover:bg-slate-50" href="/ui/device-technical-detail?device_id=${encodeURIComponent(device.id)}">
|
|
<span class="material-symbols-outlined text-[18px]">settings_input_component</span>
|
|
View Device Detail
|
|
</a>
|
|
<button class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm font-bold text-slate-700 hover:bg-slate-50" data-action="quick-inspect" data-id="${id}">
|
|
<span class="material-symbols-outlined text-[18px]">visibility</span>
|
|
Quick Inspect
|
|
</button>
|
|
<button class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm font-bold text-slate-700 hover:bg-slate-50" data-action="edit-device" data-device-id="${device.id}">
|
|
<span class="material-symbols-outlined text-[18px]">edit_square</span>
|
|
Edit Device
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
})
|
|
.join("");
|
|
|
|
tableBody.querySelectorAll("button[data-action='toggle-device-actions']").forEach((button) => {
|
|
button.addEventListener("click", (event) => {
|
|
event.stopPropagation();
|
|
const rowId = event.currentTarget.getAttribute("data-id");
|
|
tableBody.querySelectorAll("[data-device-menu]").forEach((menu) => {
|
|
menu.classList.toggle("hidden", menu.getAttribute("data-device-menu") !== rowId || !menu.classList.contains("hidden"));
|
|
});
|
|
});
|
|
});
|
|
|
|
tableBody.querySelectorAll("button[data-action='quick-inspect']").forEach((button) => {
|
|
button.addEventListener("click", (event) => {
|
|
event.stopPropagation();
|
|
const rowId = event.currentTarget.getAttribute("data-id");
|
|
tableBody.querySelectorAll("[data-device-menu]").forEach((menu) => menu.classList.add("hidden"));
|
|
const item = rows.find((row) => (row.device_code || row.id) === rowId);
|
|
if (item) {
|
|
openDrawer(item);
|
|
}
|
|
});
|
|
});
|
|
|
|
tableBody.querySelectorAll("button[data-action='edit-device']").forEach((button) => {
|
|
button.addEventListener("click", (event) => {
|
|
event.stopPropagation();
|
|
tableBody.querySelectorAll("[data-device-menu]").forEach((menu) => menu.classList.add("hidden"));
|
|
const deviceId = event.currentTarget.getAttribute("data-device-id");
|
|
const item = rows.find((row) => row.id === deviceId);
|
|
if (item) {
|
|
openEditModal(item);
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
const applyFilters = () => {
|
|
const q = normalizeText(searchInput?.value);
|
|
currentSearchQuery = searchInput?.value?.trim() || "";
|
|
const model = normalizeText(modelFilter?.value);
|
|
const merchant = merchantFilter?.value || "";
|
|
const connection = normalizeText(connectionFilter?.value);
|
|
|
|
filteredRows = rows.filter((device) => {
|
|
const currentModel = normalizeText(device.model);
|
|
const merchantId = device.binding_summary?.merchant_id || "";
|
|
const merchantName = normalizeText(merchantMap.get(merchantId) || "");
|
|
const deviceId = normalizeText(device.device_code || device.id);
|
|
const binding = device.binding_summary || {};
|
|
const status = statusMeta(device.derived_status);
|
|
const connectionInfo = connectionMeta(device.communication_mode);
|
|
const searchText = [
|
|
deviceId,
|
|
normalizeText(device.id),
|
|
normalizeText(device.device_code),
|
|
normalizeText(device.serial_number),
|
|
normalizeText(device.vendor),
|
|
currentModel,
|
|
normalizeText(device.firmware_version),
|
|
normalizeText(device.communication_mode),
|
|
normalizeText(connectionInfo.label),
|
|
normalizeText(device.status),
|
|
normalizeText(device.derived_status),
|
|
normalizeText(status.label),
|
|
normalizeText(device.credential_status),
|
|
merchantId,
|
|
merchantName,
|
|
normalizeText(binding.outlet_id),
|
|
normalizeText(binding.terminal_id),
|
|
normalizeText(device.mqtt_username)
|
|
].filter(Boolean).join(" ");
|
|
|
|
const matchesQ = !q || searchText.includes(q);
|
|
|
|
const matchesModel = !model || normalizeText(device.model) === model;
|
|
const matchesMerchant = !merchant || merchantId === merchant;
|
|
const matchesConnection = !connection || normalizeText(device.communication_mode) === connection;
|
|
|
|
return matchesQ && matchesModel && matchesMerchant && matchesConnection;
|
|
});
|
|
|
|
const activeCount = filteredRows.filter((item) => normalizeText(item.derived_status) === "online").length;
|
|
const unassignedCount = filteredRows.filter((item) => !(item.binding_summary && item.binding_summary.merchant_id)).length;
|
|
const activeRate = percent(activeCount, filteredRows.length);
|
|
const unassignedRate = percent(unassignedCount, filteredRows.length);
|
|
|
|
if (kpiTotal) {
|
|
kpiTotal.textContent = String(filteredRows.length);
|
|
}
|
|
if (kpiActive) {
|
|
kpiActive.textContent = String(activeCount);
|
|
}
|
|
if (kpiUnassigned) {
|
|
kpiUnassigned.textContent = String(unassignedCount);
|
|
}
|
|
if (kpiActiveNote) {
|
|
kpiActiveNote.innerHTML = `<span class="material-symbols-outlined text-[16px]">check_circle</span>${activeRate}% Rate`;
|
|
kpiActiveNote.className = `${activeRate > 0 ? "text-success" : "text-slate-500"} text-metric-sm font-metric-sm flex items-center gap-1`;
|
|
}
|
|
if (kpiTotalBar) {
|
|
kpiTotalBar.style.width = filteredRows.length ? "100%" : "0%";
|
|
}
|
|
if (kpiActiveBar) {
|
|
kpiActiveBar.style.width = `${activeRate}%`;
|
|
}
|
|
if (kpiUnassignedBar) {
|
|
kpiUnassignedBar.style.width = `${unassignedRate}%`;
|
|
}
|
|
|
|
renderCurrentPage();
|
|
};
|
|
|
|
const goToPage = (page) => {
|
|
const totalPages = Math.max(1, Math.ceil(filteredRows.length / pageSize));
|
|
currentPage = clamp(page, 1, totalPages);
|
|
renderCurrentPage();
|
|
};
|
|
|
|
const pageWindow = (page, totalPages) => {
|
|
const pages = new Set([1, totalPages]);
|
|
for (let offset = -1; offset <= 1; offset += 1) {
|
|
const candidate = page + offset;
|
|
if (candidate >= 1 && candidate <= totalPages) {
|
|
pages.add(candidate);
|
|
}
|
|
}
|
|
return Array.from(pages).sort((a, b) => a - b);
|
|
};
|
|
|
|
const renderPagination = () => {
|
|
const total = filteredRows.length;
|
|
const totalPages = Math.max(1, Math.ceil(total / pageSize));
|
|
currentPage = clamp(currentPage, 1, totalPages);
|
|
const start = total === 0 ? 0 : ((currentPage - 1) * pageSize) + 1;
|
|
const end = Math.min(currentPage * pageSize, total);
|
|
|
|
if (paginationLabel) {
|
|
paginationLabel.innerHTML = total
|
|
? `Showing <span class="font-bold text-on-surface">${start}-${end}</span> of <span class="font-bold text-on-surface">${total}</span> devices`
|
|
: `Showing <span class="font-bold text-on-surface">0</span> devices`;
|
|
}
|
|
if (!paginationControls) {
|
|
return;
|
|
}
|
|
|
|
const pageButtons = [];
|
|
let previousPage = 0;
|
|
pageWindow(currentPage, totalPages).forEach((page) => {
|
|
if (previousPage && page - previousPage > 1) {
|
|
pageButtons.push('<span class="px-2 text-slate-400">...</span>');
|
|
}
|
|
pageButtons.push(`
|
|
<button class="h-10 min-w-10 px-3 rounded-lg font-bold ${page === currentPage ? "bg-primary text-on-primary" : "text-on-surface hover:bg-slate-50"}" data-page="${page}">
|
|
${page}
|
|
</button>
|
|
`);
|
|
previousPage = page;
|
|
});
|
|
|
|
paginationControls.innerHTML = `
|
|
<button class="p-2 border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed" data-page="prev" ${currentPage === 1 ? "disabled" : ""}>
|
|
<span class="material-symbols-outlined">chevron_left</span>
|
|
</button>
|
|
${pageButtons.join("")}
|
|
<button class="p-2 border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed" data-page="next" ${currentPage === totalPages ? "disabled" : ""}>
|
|
<span class="material-symbols-outlined">chevron_right</span>
|
|
</button>
|
|
`;
|
|
|
|
paginationControls.querySelectorAll("button[data-page]").forEach((button) => {
|
|
button.addEventListener("click", (event) => {
|
|
const value = event.currentTarget.getAttribute("data-page");
|
|
if (value === "prev") {
|
|
goToPage(currentPage - 1);
|
|
return;
|
|
}
|
|
if (value === "next") {
|
|
goToPage(currentPage + 1);
|
|
return;
|
|
}
|
|
goToPage(Number(value));
|
|
});
|
|
});
|
|
};
|
|
|
|
const renderCurrentPage = () => {
|
|
const totalPages = Math.max(1, Math.ceil(filteredRows.length / pageSize));
|
|
currentPage = clamp(currentPage, 1, totalPages);
|
|
const start = (currentPage - 1) * pageSize;
|
|
const pageRows = filteredRows.slice(start, start + pageSize);
|
|
renderRows(pageRows);
|
|
renderPagination();
|
|
};
|
|
|
|
const renderMerchantFilter = () => {
|
|
if (!merchantFilter) {
|
|
return;
|
|
}
|
|
const options = Array.from(merchantMap.entries())
|
|
.map(([id, name]) => ({ id, name }))
|
|
.filter((item) => item.id)
|
|
.sort((a, b) => normalizeText(a.name).localeCompare(normalizeText(b.name)));
|
|
|
|
merchantFilter.innerHTML = '<option value="">All Merchants</option>';
|
|
options.forEach((item) => {
|
|
const option = document.createElement("option");
|
|
option.value = item.id;
|
|
option.textContent = item.name;
|
|
merchantFilter.appendChild(option);
|
|
});
|
|
};
|
|
|
|
const renderModelFilter = () => {
|
|
if (!modelFilter) {
|
|
return;
|
|
}
|
|
const models = new Set(
|
|
rows
|
|
.map((item) => item.model)
|
|
.filter(Boolean)
|
|
);
|
|
|
|
modelFilter.innerHTML = '<option value="">All Models</option>';
|
|
Array.from(models)
|
|
.sort((a, b) => normalizeText(a).localeCompare(normalizeText(b)))
|
|
.forEach((model) => {
|
|
const option = document.createElement("option");
|
|
option.value = model;
|
|
option.textContent = model;
|
|
modelFilter.appendChild(option);
|
|
});
|
|
};
|
|
|
|
const openDrawer = (device) => {
|
|
if (!detailDrawer || !detailOverlay || !detailTitle || !detailModel || !detailContent) {
|
|
return;
|
|
}
|
|
activeDrawerDevice = device;
|
|
|
|
const binding = device.binding_summary || {};
|
|
const connection = connectionMeta(device.communication_mode);
|
|
const status = statusMeta(device.derived_status);
|
|
const lastSeenAt = getLastSeenAt(device);
|
|
const health = healthMeta(lastSeenAt, device.health_summary);
|
|
const summary = device.health_summary || {};
|
|
const reasons = Array.isArray(summary.reasons) && summary.reasons.length
|
|
? summary.reasons.map((item) => reasonLabels[item] || item).join(", ")
|
|
: "No active warning";
|
|
|
|
const id = device.device_code || device.id || "-";
|
|
const serialNumber = escapeHtml(device.serial_number || "-");
|
|
detailTitle.textContent = id;
|
|
if (detailSerial) {
|
|
detailSerial.textContent = `SN: ${serialNumber}`;
|
|
}
|
|
detailModel.textContent = device.model || "Unknown";
|
|
detailModel.className = `inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold ${status.className}`;
|
|
|
|
detailContent.innerHTML = `
|
|
<section>
|
|
<h5 class="text-label-md font-label-md text-slate-500 uppercase mb-3">Device Detail</h5>
|
|
<div class="bg-slate-50 p-4 rounded-xl border border-slate-100">
|
|
<div class="flex justify-between gap-4 mb-2">
|
|
<span class="text-on-surface-variant">Serial Number</span>
|
|
<span class="font-mono font-bold text-right">${serialNumber}</span>
|
|
</div>
|
|
<div class="flex justify-between mb-2">
|
|
<span class="text-on-surface-variant">Model</span>
|
|
<span class="font-bold">${device.model || "Unknown"}</span>
|
|
</div>
|
|
<div class="flex justify-between mb-2">
|
|
<span class="text-on-surface-variant">Connection</span>
|
|
<span class="font-bold">${connection.label}</span>
|
|
</div>
|
|
<div class="flex justify-between mb-2">
|
|
<span class="text-on-surface-variant">Status</span>
|
|
<span class="inline-flex items-center gap-1.5 ${status.className}">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-current"></span>
|
|
${status.label}
|
|
</span>
|
|
</div>
|
|
<div class="flex justify-between mb-2">
|
|
<span class="text-on-surface-variant">Last Seen</span>
|
|
<span class="font-bold">${formatLastSeen(lastSeenAt)}</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-on-surface-variant">Health</span>
|
|
<span class="${health.className}">${health.value}</span>
|
|
</div>
|
|
<div class="mt-3 pt-3 border-t border-slate-200">
|
|
<div class="flex justify-between mb-2">
|
|
<span class="text-on-surface-variant">Heartbeat Age</span>
|
|
<span class="font-bold">${typeof summary.age_seconds === "number" ? `${summary.age_seconds}s` : "-"}</span>
|
|
</div>
|
|
<div class="flex justify-between gap-4">
|
|
<span class="text-on-surface-variant">Reason</span>
|
|
<span class="text-right font-bold">${reasons}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="device-config-section">
|
|
<h5 class="text-label-md font-label-md text-slate-500 uppercase mb-3">Config Delivery</h5>
|
|
<div class="bg-slate-50 p-4 rounded-xl border border-slate-100" id="device-config-status-box">
|
|
<p class="text-slate-500">Loading config status...</p>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<h5 class="text-label-md font-label-md text-slate-500 uppercase mb-3">Binding Info</h5>
|
|
<div class="bg-slate-50 p-4 rounded-xl border border-slate-100">
|
|
<div class="flex justify-between mb-2">
|
|
<span class="text-on-surface-variant">Merchant</span>
|
|
<span class="font-bold">${merchantMap.get(binding.merchant_id) || "Unassigned"}</span>
|
|
</div>
|
|
<div class="flex justify-between mb-2">
|
|
<span class="text-on-surface-variant">Outlet</span>
|
|
<span class="font-mono">${binding.outlet_id || "-"}</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-on-surface-variant">Terminal</span>
|
|
<span class="font-mono">${binding.terminal_id || "-"}</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<h5 class="text-label-md font-label-md text-slate-500 uppercase mb-3">Live Payload</h5>
|
|
<div class="bg-slate-900 text-slate-300 p-4 rounded-xl font-mono text-[12px]">
|
|
<pre>${JSON.stringify(device, null, 2)}</pre>
|
|
</div>
|
|
</section>
|
|
`;
|
|
|
|
detailOverlay.classList.remove("pointer-events-none", "opacity-0");
|
|
detailOverlay.classList.add("opacity-100");
|
|
detailDrawer.classList.remove("translate-x-full");
|
|
|
|
loadDrawerConfig(device.id);
|
|
};
|
|
|
|
const sendDrawerRebootCommand = async () => {
|
|
if (!activeDrawerDevice || !drawerRebootButton) {
|
|
return;
|
|
}
|
|
|
|
const originalText = drawerRebootButton.textContent || "Reboot Device";
|
|
drawerRebootButton.disabled = true;
|
|
drawerRebootButton.textContent = "Sending...";
|
|
try {
|
|
const result = await api.createDeviceCommand(activeDrawerDevice.id, {
|
|
command: "device.reboot",
|
|
payload: { requested_from: "device_registry_drawer" }
|
|
});
|
|
drawerRebootButton.textContent = result.status === "delivered" ? "Reboot Sent" : "Reboot Queued";
|
|
window.setTimeout(() => {
|
|
drawerRebootButton.textContent = originalText;
|
|
drawerRebootButton.disabled = false;
|
|
}, 1800);
|
|
} catch (error) {
|
|
drawerRebootButton.textContent = "Reboot Failed";
|
|
window.setTimeout(() => {
|
|
drawerRebootButton.textContent = originalText;
|
|
drawerRebootButton.disabled = false;
|
|
}, 2200);
|
|
}
|
|
};
|
|
|
|
const loadDrawerConfig = async (deviceId) => {
|
|
const box = document.getElementById("device-config-status-box");
|
|
if (!box || !deviceId) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const configStatus = await api.getDeviceConfigStatus(deviceId);
|
|
const meta = configStatusMeta(configStatus.drift_status);
|
|
const latestPush = configStatus.latest_push;
|
|
const latestAck = configStatus.latest_ack;
|
|
const latestPull = configStatus.latest_config_pull;
|
|
const canRetry = configStatus.retry_recommended;
|
|
box.innerHTML = `
|
|
<div class="flex items-center justify-between gap-3 mb-3">
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold border ${meta.className}">
|
|
<span class="material-symbols-outlined text-[16px]">${meta.icon}</span>
|
|
${meta.label}
|
|
</span>
|
|
<span class="font-mono text-slate-500">v${configStatus.desired_config_version || "-"}</span>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-3 text-sm mb-4">
|
|
<div>
|
|
<p class="text-slate-500">Latest Pull</p>
|
|
<p class="font-bold">${latestPull ? formatLastSeen(latestPull.received_at || latestPull.timestamp) : "-"}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-slate-500">Latest Push</p>
|
|
<p class="font-bold">${latestPush ? formatLastSeen(latestPush.created_at) : "-"}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-slate-500">Latest ACK</p>
|
|
<p class="font-bold">${latestAck ? latestAck.status : "-"}</p>
|
|
</div>
|
|
</div>
|
|
<button id="device-config-retry" class="w-full px-3 py-2 rounded-lg text-sm font-bold border ${canRetry ? "bg-primary text-white border-primary" : "bg-white text-slate-500 border-slate-200"}">
|
|
${canRetry ? "Retry Config Push" : "Config Applied"}
|
|
</button>
|
|
`;
|
|
const retryButton = document.getElementById("device-config-retry");
|
|
retryButton?.addEventListener("click", async () => {
|
|
retryButton.disabled = true;
|
|
retryButton.textContent = "Retrying...";
|
|
try {
|
|
await api.retryDeviceConfigPush(deviceId, canRetry ? {} : { force: true });
|
|
await loadDrawerConfig(deviceId);
|
|
} catch (error) {
|
|
retryButton.disabled = false;
|
|
retryButton.textContent = "Retry Failed";
|
|
}
|
|
});
|
|
} catch (error) {
|
|
box.innerHTML = '<p class="text-danger">Unable to load config status.</p>';
|
|
}
|
|
};
|
|
|
|
const openRegisterModal = () => {
|
|
if (!registerModal || !registerForm) {
|
|
return;
|
|
}
|
|
registerForm.reset();
|
|
hydrateDeviceCatalog();
|
|
const defaultVendor = deviceCatalog[0]?.vendor || "QF";
|
|
const defaultModel = deviceCatalog[0]?.models?.[0];
|
|
registerVendor.value = defaultVendor;
|
|
hydrateDeviceModels(defaultVendor);
|
|
if (defaultModel) {
|
|
registerModel.value = defaultModel.model;
|
|
}
|
|
document.getElementById("register-communication-mode").value = defaultModel?.communication_mode || "mqtt";
|
|
document.getElementById("register-status").value = "active";
|
|
if (registerStatus) {
|
|
registerStatus.textContent = "";
|
|
registerStatus.className = "min-h-5 text-body-md text-slate-500";
|
|
}
|
|
if (registerResult) {
|
|
registerResult.classList.add("hidden");
|
|
registerResult.innerHTML = "";
|
|
}
|
|
hydrateRegisterMerchants();
|
|
resetBindingSelects();
|
|
updateCapabilityPreview();
|
|
registerModal.classList.remove("hidden");
|
|
document.getElementById("register-serial-number")?.focus();
|
|
};
|
|
|
|
const closeRegisterModal = () => {
|
|
registerModal?.classList.add("hidden");
|
|
};
|
|
|
|
const openEditModal = (device) => {
|
|
if (!editModal || !editForm) {
|
|
return;
|
|
}
|
|
activeEditDevice = device;
|
|
editForm.reset();
|
|
hydrateCatalogVendorSelect(editVendor, editModel, device.vendor || deviceCatalog[0]?.vendor || "QF");
|
|
hydrateCatalogModelSelect(editVendor?.value, editModel, device.model || "");
|
|
document.getElementById("edit-device-id").value = device.id || "";
|
|
document.getElementById("edit-device-code").value = device.device_code || device.id || "";
|
|
document.getElementById("edit-serial-number").value = device.serial_number || "";
|
|
document.getElementById("edit-communication-mode").value = device.communication_mode || "mqtt";
|
|
document.getElementById("edit-status").value = device.status || "active";
|
|
document.getElementById("edit-firmware-version").value = device.firmware_version || "";
|
|
if (editStatus) {
|
|
editStatus.textContent = "";
|
|
editStatus.className = "min-h-5 text-body-md text-slate-500";
|
|
}
|
|
if (editSubmitButton) {
|
|
editSubmitButton.disabled = false;
|
|
editSubmitButton.textContent = "Save Changes";
|
|
}
|
|
editModal.classList.remove("hidden");
|
|
document.getElementById("edit-serial-number")?.focus();
|
|
};
|
|
|
|
const closeEditModal = () => {
|
|
editModal?.classList.add("hidden");
|
|
activeEditDevice = null;
|
|
};
|
|
|
|
const handleEditSubmit = async (event) => {
|
|
event.preventDefault();
|
|
if (!activeEditDevice || !editSubmitButton) {
|
|
return;
|
|
}
|
|
|
|
const serialNumber = document.getElementById("edit-serial-number").value.trim();
|
|
const vendor = editVendor?.value || "";
|
|
const model = editModel?.value || "";
|
|
const communicationMode = document.getElementById("edit-communication-mode").value || "mqtt";
|
|
const status = document.getElementById("edit-status").value || "active";
|
|
const firmwareVersion = document.getElementById("edit-firmware-version").value.trim();
|
|
|
|
if (!serialNumber) {
|
|
document.getElementById("edit-serial-number")?.focus();
|
|
if (editStatus) {
|
|
editStatus.textContent = "Serial number / dev-sn is required.";
|
|
editStatus.className = "min-h-5 text-body-md text-danger";
|
|
}
|
|
return;
|
|
}
|
|
|
|
editSubmitButton.disabled = true;
|
|
editSubmitButton.textContent = "Saving...";
|
|
if (editStatus) {
|
|
editStatus.textContent = "Saving device metadata...";
|
|
editStatus.className = "min-h-5 text-body-md text-slate-500";
|
|
}
|
|
|
|
try {
|
|
const selectedModel = getCatalogModel(vendor, model);
|
|
const updated = await api.patchDevice(activeEditDevice.id, {
|
|
serial_number: serialNumber,
|
|
vendor,
|
|
model,
|
|
communication_mode: communicationMode,
|
|
capability_profile_json: buildCapabilityProfileForModel(
|
|
selectedModel,
|
|
communicationMode,
|
|
activeEditDevice.capability_profile_json || {}
|
|
),
|
|
status,
|
|
firmware_version: firmwareVersion || undefined
|
|
});
|
|
rows = rows.map((item) => (item.id === updated.id ? { ...item, ...updated } : item));
|
|
if (activeDrawerDevice?.id === updated.id) {
|
|
activeDrawerDevice = { ...activeDrawerDevice, ...updated };
|
|
openDrawer(activeDrawerDevice);
|
|
}
|
|
applyFilters();
|
|
closeEditModal();
|
|
} catch (error) {
|
|
if (editStatus) {
|
|
editStatus.textContent = error?.message || "Unable to save device metadata.";
|
|
editStatus.className = "min-h-5 text-body-md text-danger";
|
|
}
|
|
editSubmitButton.disabled = false;
|
|
editSubmitButton.textContent = "Save Changes";
|
|
}
|
|
};
|
|
|
|
const loadRegisterOutlets = async (merchantId) => {
|
|
resetBindingSelects();
|
|
if (!merchantId || !registerOutlet) {
|
|
return;
|
|
}
|
|
registerOutlet.disabled = true;
|
|
setSelectOptions(registerOutlet, [], "Loading outlets...");
|
|
try {
|
|
outlets = await api.listOutlets({ merchant_id: merchantId, status: "active" });
|
|
setSelectOptions(registerOutlet, outlets, "No outlet binding", (outlet) => selectLabel(outlet, "Outlet"));
|
|
registerOutlet.disabled = false;
|
|
} catch (error) {
|
|
setSelectOptions(registerOutlet, [], "Unable to load outlets");
|
|
}
|
|
};
|
|
|
|
const loadRegisterTerminals = async (outletId) => {
|
|
setSelectOptions(registerTerminal, [], "Select outlet first");
|
|
if (registerTerminal) {
|
|
registerTerminal.disabled = true;
|
|
}
|
|
if (!outletId || !registerTerminal) {
|
|
return;
|
|
}
|
|
setSelectOptions(registerTerminal, [], "Loading terminals...");
|
|
try {
|
|
terminals = await api.listTerminals({ outlet_id: outletId, status: "active" });
|
|
setSelectOptions(registerTerminal, terminals, "No terminal binding", (terminal) => {
|
|
const mode = terminal.qr_mode ? ` - ${terminal.qr_mode}` : "";
|
|
return `${selectLabel(terminal, "Terminal")}${mode}`;
|
|
});
|
|
registerTerminal.disabled = false;
|
|
} catch (error) {
|
|
setSelectOptions(registerTerminal, [], "Unable to load terminals");
|
|
}
|
|
};
|
|
|
|
const handleRegisterSubmit = async (event) => {
|
|
event.preventDefault();
|
|
if (!registerForm || !registerSubmitButton) {
|
|
return;
|
|
}
|
|
|
|
const serialNumber = document.getElementById("register-serial-number").value.trim();
|
|
const vendor = registerVendor?.value || "QF";
|
|
const model = registerModel?.value || "QF100";
|
|
const firmwareVersion = document.getElementById("register-firmware-version").value.trim();
|
|
const communicationMode = document.getElementById("register-communication-mode").value || "mqtt";
|
|
const status = document.getElementById("register-status").value || "active";
|
|
const deviceType = registerDeviceType?.value || "static_soundbox";
|
|
const merchantId = registerMerchant?.value || "";
|
|
const outletId = registerOutlet?.value || "";
|
|
const terminalId = registerTerminal?.value || "";
|
|
const rotateCredential = document.getElementById("register-rotate-credential")?.checked;
|
|
|
|
if (!serialNumber) {
|
|
document.getElementById("register-serial-number")?.focus();
|
|
if (registerStatus) {
|
|
registerStatus.textContent = "Serial number / dev-sn is required.";
|
|
registerStatus.className = "min-h-5 text-body-md text-danger";
|
|
}
|
|
return;
|
|
}
|
|
|
|
if ((merchantId || outletId || terminalId) && (!merchantId || !outletId || !terminalId)) {
|
|
if (registerStatus) {
|
|
registerStatus.textContent = "Binding needs merchant, outlet, and terminal.";
|
|
registerStatus.className = "min-h-5 text-body-md text-danger";
|
|
}
|
|
return;
|
|
}
|
|
|
|
registerSubmitButton.disabled = true;
|
|
registerSubmitButton.textContent = "Creating...";
|
|
if (registerStatus) {
|
|
registerStatus.textContent = "Creating device...";
|
|
registerStatus.className = "min-h-5 text-body-md text-slate-500";
|
|
}
|
|
if (registerResult) {
|
|
registerResult.classList.add("hidden");
|
|
registerResult.innerHTML = "";
|
|
}
|
|
|
|
try {
|
|
const created = await api.createDevice({
|
|
serial_number: serialNumber,
|
|
vendor,
|
|
model,
|
|
communication_mode: communicationMode,
|
|
capability_profile_json: buildCapabilityProfile(deviceType, communicationMode),
|
|
status,
|
|
...(firmwareVersion ? { firmware_version: firmwareVersion } : {})
|
|
});
|
|
|
|
let binding = null;
|
|
if (merchantId && outletId && terminalId) {
|
|
binding = await api.bindDevice(created.id, {
|
|
merchant_id: merchantId,
|
|
outlet_id: outletId,
|
|
terminal_id: terminalId
|
|
});
|
|
}
|
|
|
|
let credential = null;
|
|
if (rotateCredential) {
|
|
const rotated = await api.rotateDeviceCredential(created.id);
|
|
credential = rotated?.credential || null;
|
|
}
|
|
|
|
if (registerResult) {
|
|
const credentialBlock = credential
|
|
? `
|
|
<div class="mt-3 rounded-lg bg-white p-3">
|
|
<p class="font-bold text-on-surface">MQTT credential</p>
|
|
<p class="mt-1 font-mono text-xs text-slate-700">username: ${credential.mqtt_username}</p>
|
|
<p class="mt-1 break-all font-mono text-xs text-slate-700">password: ${credential.mqtt_password}</p>
|
|
</div>
|
|
`
|
|
: "";
|
|
registerResult.classList.remove("hidden");
|
|
registerResult.innerHTML = `
|
|
<div class="flex items-center gap-2 font-bold text-success">
|
|
<span class="material-symbols-outlined text-[18px]">check_circle</span>
|
|
Device created
|
|
</div>
|
|
<div class="mt-2 grid grid-cols-2 gap-3 text-sm">
|
|
<div><span class="text-slate-500">Serial Number</span><p class="font-mono font-bold">${created.serial_number || "-"}</p></div>
|
|
<div><span class="text-slate-500">Model</span><p class="font-mono font-bold">${created.model || "-"}</p></div>
|
|
<div><span class="text-slate-500">Device Code</span><p class="font-mono font-bold">${created.device_code}</p></div>
|
|
<div><span class="text-slate-500">Binding</span><p class="font-bold">${binding ? "Bound" : "Unassigned"}</p></div>
|
|
</div>
|
|
${credentialBlock}
|
|
`;
|
|
}
|
|
if (registerStatus) {
|
|
registerStatus.textContent = "Done. Registry refreshed.";
|
|
registerStatus.className = "min-h-5 text-body-md text-success";
|
|
}
|
|
await refresh();
|
|
} catch (error) {
|
|
if (registerStatus) {
|
|
registerStatus.textContent = error?.message || "Unable to create device.";
|
|
registerStatus.className = "min-h-5 text-body-md text-danger";
|
|
}
|
|
} finally {
|
|
registerSubmitButton.disabled = false;
|
|
registerSubmitButton.textContent = "Create Device";
|
|
}
|
|
};
|
|
|
|
const closeDrawer = () => {
|
|
if (!detailDrawer || !detailOverlay) {
|
|
return;
|
|
}
|
|
activeDrawerDevice = null;
|
|
detailDrawer.classList.add("translate-x-full");
|
|
detailOverlay.classList.remove("opacity-100");
|
|
detailOverlay.classList.add("opacity-0", "pointer-events-none");
|
|
};
|
|
|
|
const onSearch = () => {
|
|
if (timeoutId) {
|
|
clearTimeout(timeoutId);
|
|
}
|
|
timeoutId = setTimeout(() => {
|
|
currentPage = 1;
|
|
applyFilters();
|
|
}, 180);
|
|
};
|
|
|
|
const refresh = async () => {
|
|
try {
|
|
api.requireToken();
|
|
await loadDeviceCatalog();
|
|
const [deviceRows, merchantRows] = await Promise.all([
|
|
api.listDevices(),
|
|
api.listMerchants()
|
|
]);
|
|
rows = Array.isArray(deviceRows) ? deviceRows : [];
|
|
merchants = Array.isArray(merchantRows) ? merchantRows : [];
|
|
merchantMap.clear();
|
|
|
|
merchants.forEach((merchant) => {
|
|
const id = merchant.id || merchant.merchant_id || merchant.merchant_code;
|
|
const name = merchant.legal_name || merchant.brand_name || merchant.company_name || merchant.name || id || "Unknown";
|
|
if (id) {
|
|
merchantMap.set(id, name);
|
|
}
|
|
});
|
|
|
|
renderMerchantFilter();
|
|
renderModelFilter();
|
|
const params = new URLSearchParams(window.location.search);
|
|
const initialQuery = params.get("q") || params.get("focus") || "";
|
|
if (initialQuery && searchInput && !searchInput.value) {
|
|
const focusedDevice = rows.find((item) => item.id === initialQuery || item.device_code === initialQuery || item.serial_number === initialQuery);
|
|
searchInput.value = focusedDevice?.serial_number || initialQuery;
|
|
}
|
|
currentPage = 1;
|
|
applyFilters();
|
|
} catch (error) {
|
|
console.error("[device-registry] failed loading", error);
|
|
if (tableBody) {
|
|
tableBody.innerHTML = '<tr><td colspan="8" class="px-6 py-6 text-center text-danger">Unable to load device data</td></tr>';
|
|
}
|
|
}
|
|
};
|
|
|
|
clearFilter?.addEventListener("click", () => {
|
|
if (searchInput) {
|
|
searchInput.value = "";
|
|
}
|
|
if (modelFilter) {
|
|
modelFilter.value = "";
|
|
}
|
|
if (merchantFilter) {
|
|
merchantFilter.value = "";
|
|
}
|
|
if (connectionFilter) {
|
|
connectionFilter.value = "";
|
|
}
|
|
currentPage = 1;
|
|
applyFilters();
|
|
});
|
|
|
|
searchInput?.addEventListener("input", onSearch);
|
|
searchInput?.addEventListener("keydown", (event) => {
|
|
if (event.key === "Enter") {
|
|
event.preventDefault();
|
|
if (timeoutId) {
|
|
clearTimeout(timeoutId);
|
|
}
|
|
currentPage = 1;
|
|
applyFilters();
|
|
}
|
|
if (event.key === "Escape" && searchInput.value) {
|
|
event.preventDefault();
|
|
searchInput.value = "";
|
|
currentPage = 1;
|
|
applyFilters();
|
|
}
|
|
});
|
|
modelFilter?.addEventListener("change", () => {
|
|
currentPage = 1;
|
|
applyFilters();
|
|
});
|
|
merchantFilter?.addEventListener("change", () => {
|
|
currentPage = 1;
|
|
applyFilters();
|
|
});
|
|
connectionFilter?.addEventListener("change", () => {
|
|
currentPage = 1;
|
|
applyFilters();
|
|
});
|
|
pageSizeSelect?.addEventListener("change", (event) => {
|
|
pageSize = Number(event.currentTarget.value || 10);
|
|
currentPage = 1;
|
|
renderCurrentPage();
|
|
});
|
|
detailOverlay?.addEventListener("click", closeDrawer);
|
|
detailCloseButton?.addEventListener("click", closeDrawer);
|
|
drawerRebootButton?.addEventListener("click", sendDrawerRebootCommand);
|
|
topbarRegisterOpenButton?.addEventListener("click", openRegisterModal);
|
|
refreshButton?.addEventListener("click", refresh);
|
|
registerCloseButton?.addEventListener("click", closeRegisterModal);
|
|
registerCancelButton?.addEventListener("click", closeRegisterModal);
|
|
registerOverlay?.addEventListener("click", closeRegisterModal);
|
|
registerForm?.addEventListener("submit", handleRegisterSubmit);
|
|
editCloseButton?.addEventListener("click", closeEditModal);
|
|
editCancelButton?.addEventListener("click", closeEditModal);
|
|
editOverlay?.addEventListener("click", closeEditModal);
|
|
editForm?.addEventListener("submit", handleEditSubmit);
|
|
editVendor?.addEventListener("change", (event) => {
|
|
hydrateCatalogModelSelect(event.currentTarget.value, editModel);
|
|
const selectedModel = getCatalogModel(event.currentTarget.value, editModel?.value);
|
|
if (selectedModel?.communication_mode) {
|
|
document.getElementById("edit-communication-mode").value = selectedModel.communication_mode;
|
|
}
|
|
});
|
|
editModel?.addEventListener("change", () => {
|
|
const catalog = deviceCatalog.find((item) => item.vendor === editVendor?.value) || deviceCatalog[0];
|
|
const selectedModel = (catalog?.models || []).find((item) => item.model === editModel?.value);
|
|
if (selectedModel?.communication_mode) {
|
|
document.getElementById("edit-communication-mode").value = selectedModel.communication_mode;
|
|
}
|
|
});
|
|
registerDeviceType?.addEventListener("change", updateCapabilityPreview);
|
|
registerVendor?.addEventListener("change", (event) => hydrateDeviceModels(event.currentTarget.value));
|
|
registerModel?.addEventListener("change", () => {
|
|
const selectedModel = getSelectedCatalogModel();
|
|
if (selectedModel?.communication_mode) {
|
|
document.getElementById("register-communication-mode").value = selectedModel.communication_mode;
|
|
}
|
|
updateCapabilityPreview();
|
|
});
|
|
document.getElementById("register-communication-mode")?.addEventListener("change", updateCapabilityPreview);
|
|
registerMerchant?.addEventListener("change", (event) => loadRegisterOutlets(event.currentTarget.value));
|
|
registerOutlet?.addEventListener("change", (event) => loadRegisterTerminals(event.currentTarget.value));
|
|
|
|
document.addEventListener("keydown", (event) => {
|
|
if (event.key === "Escape") {
|
|
tableBody?.querySelectorAll("[data-device-menu]").forEach((menu) => menu.classList.add("hidden"));
|
|
closeDrawer();
|
|
closeRegisterModal();
|
|
}
|
|
});
|
|
|
|
document.addEventListener("click", (event) => {
|
|
if (!event.target.closest("[data-action='toggle-device-actions']") && !event.target.closest("[data-device-menu]")) {
|
|
tableBody?.querySelectorAll("[data-device-menu]").forEach((menu) => menu.classList.add("hidden"));
|
|
}
|
|
});
|
|
|
|
refresh();
|
|
})();
|
|
</script>
|
|
</body></html>
|