1591 lines
81 KiB
HTML
1591 lines
81 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 Detail | 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;700&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"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"tertiary-fixed": "#ffdbcd",
|
|
"on-primary": "#ffffff",
|
|
"primary-fixed-dim": "#b4c5ff",
|
|
"error-container": "#ffdad6",
|
|
"warning": "#F59E0B",
|
|
"slate-200": "#E2E8F0",
|
|
"outline-variant": "#c3c6d7",
|
|
"surface-dim": "#d9d9e5",
|
|
"on-tertiary-container": "#ffede6",
|
|
"inverse-surface": "#2e3039",
|
|
"inverse-on-surface": "#f0f0fb",
|
|
"slate-100": "#F1F5F9",
|
|
"tertiary-fixed-dim": "#ffb596",
|
|
"on-tertiary-fixed-variant": "#7d2d00",
|
|
"on-surface": "#191b23",
|
|
"on-error-container": "#93000a",
|
|
"surface-tint": "#0053db",
|
|
"inverse-primary": "#b4c5ff",
|
|
"outline": "#737686",
|
|
"slate-500": "#64748B",
|
|
"secondary": "#505f76",
|
|
"on-primary-container": "#eeefff",
|
|
"surface-variant": "#e1e2ed",
|
|
"surface-container": "#ededf9",
|
|
"success": "#16A34A",
|
|
"on-tertiary-fixed": "#360f00",
|
|
"secondary-container": "#d0e1fb",
|
|
"on-primary-fixed-variant": "#003ea8",
|
|
"surface": "#faf8ff",
|
|
"slate-900": "#0F172A",
|
|
"primary-fixed": "#dbe1ff",
|
|
"secondary-fixed-dim": "#b7c8e1",
|
|
"on-tertiary": "#ffffff",
|
|
"on-secondary-fixed": "#0b1c30",
|
|
"on-secondary-fixed-variant": "#38485d",
|
|
"on-error": "#ffffff",
|
|
"on-secondary-container": "#54647a",
|
|
"background": "#F8FAFC",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-surface-variant": "#434655",
|
|
"surface-container-low": "#f3f3fe",
|
|
"on-background": "#191b23",
|
|
"surface-container-highest": "#e1e2ed",
|
|
"info": "#0EA5E9",
|
|
"danger": "#DC2626",
|
|
"surface-bright": "#faf8ff",
|
|
"error": "#ba1a1a",
|
|
"primary-container": "#2563eb",
|
|
"primary": "#004ac6",
|
|
"tertiary": "#943700",
|
|
"secondary-fixed": "#d3e4fe",
|
|
"tertiary-container": "#bc4800",
|
|
"surface-container-high": "#e7e7f3",
|
|
"on-secondary": "#ffffff",
|
|
"on-primary-fixed": "#00174b",
|
|
"slate-700": "#334155"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"page-padding": "24px",
|
|
"topbar-height": "72px",
|
|
"row-height": "52px",
|
|
"gutter": "24px",
|
|
"card-padding": "20px"
|
|
},
|
|
"fontFamily": {
|
|
"headline-md": ["Plus Jakarta Sans"],
|
|
"metric-sm": ["Inter"],
|
|
"metric-lg": ["Inter"],
|
|
"label-md": ["Inter"],
|
|
"headline-lg": ["Plus Jakarta Sans"],
|
|
"body-md": ["Inter"],
|
|
"display-lg": ["Plus Jakarta Sans"],
|
|
"body-lg": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"metric-sm": ["14px", {"lineHeight": "20px", "fontWeight": "600"}],
|
|
"metric-lg": ["32px", {"lineHeight": "40px", "fontWeight": "600"}],
|
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.01em", "fontWeight": "500"}],
|
|
"headline-lg": ["28px", {"lineHeight": "36px", "fontWeight": "600"}],
|
|
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.code-font { font-family: 'JetBrains Mono', monospace; }
|
|
.custom-scroll::-webkit-scrollbar { width: 4px; }
|
|
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
|
|
.custom-scroll::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 10px; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-surface font-body-md antialiased">
|
|
<!-- Side Navigation Shell -->
|
|
<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 Shell -->
|
|
<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 border-b border-slate-200 z-40">
|
|
<div class="flex items-center gap-4 bg-surface-container-low px-3 py-1.5 rounded-full w-96 border border-slate-200">
|
|
<span class="material-symbols-outlined text-slate-500">search</span>
|
|
<input id="detail-device-search" class="bg-transparent border-none focus:ring-0 text-body-md w-full" placeholder="Search devices, merchants, or serials..." type="text"/>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex items-center gap-4 text-on-surface-variant">
|
|
<button id="detail-notification-button" class="hover:text-primary transition-colors flex items-center gap-1">
|
|
<span class="material-symbols-outlined">notifications</span>
|
|
</button>
|
|
<button id="detail-calendar-button" class="hover:text-primary transition-colors flex items-center gap-1">
|
|
<span class="material-symbols-outlined">calendar_today</span>
|
|
</button>
|
|
</div>
|
|
<div class="h-8 w-px bg-slate-200"></div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="text-right">
|
|
<p class="text-label-md font-bold text-on-surface">Admin_User</p>
|
|
<p class="text-[10px] text-slate-500 uppercase tracking-wider">Super Admin</p>
|
|
</div>
|
|
<img alt="Admin Avatar" class="w-10 h-10 rounded-full border-2 border-slate-100" data-alt="A professional headshot of a corporate technology administrator in a bright, modern office setting. The person has a friendly but authoritative expression. The lighting is crisp and natural, with a soft-focus background of a contemporary workstation and glass partitions, emphasizing a clean and efficient workspace." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBK5Bznv_N0fDPHYNOfdTITCcx2J24NhdTXOayYDW1Ve1g8JyTVuXORa1X-hvMSGk8VneyDK8kxQXLikdOs44c4a3-DanQUdKM7BqiizwA_m3MnULvWUBXydth4D6uac3UFSwU5Qx8ckVSYTrpoG0AvnxANAbvSv0CD2yCs21O8lpHokxv-vVCCaheQRGC5Wyw0TYY5o1V_D87PhtYXIVRL0yCMUz1e0pMoGhGY5g5BjNrQSg2gCTBVSJc9SHvTB9r_7EQPnBMV-0E"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Area -->
|
|
<main class="ml-64 pt-[72px] min-h-screen">
|
|
<div class="p-page-padding">
|
|
<!-- Breadcrumb & Back Action -->
|
|
<div class="flex items-center gap-2 mb-6 text-on-surface-variant">
|
|
<a class="flex items-center hover:text-primary transition-colors" href="/ui/device-registry-monitoring">
|
|
<span class="material-symbols-outlined text-sm mr-1">arrow_back</span>
|
|
<span class="text-label-md">Back to Registry</span>
|
|
</a>
|
|
<span class="text-slate-300">/</span>
|
|
<span class="text-label-md" id="device-breadcrumb-code">SND-10293</span>
|
|
</div>
|
|
<!-- Device Header Summary -->
|
|
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl p-card-padding mb-gutter flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
|
|
<div class="flex items-start gap-5">
|
|
<div class="w-16 h-16 bg-primary-fixed rounded-xl flex items-center justify-center text-primary">
|
|
<span class="material-symbols-outlined text-[40px]">speaker_group</span>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-1">
|
|
<h2 class="font-headline-lg text-headline-lg text-on-surface" id="device-title">SND-10293</h2>
|
|
<span id="device-status-badge" class="bg-success/10 text-success text-[10px] font-bold px-2 py-0.5 rounded-full border border-success/20 uppercase tracking-wider flex items-center gap-1">
|
|
<span id="device-status-dot" class="w-1.5 h-1.5 rounded-full bg-success"></span>
|
|
Online
|
|
</span>
|
|
</div>
|
|
<div class="flex flex-wrap gap-x-6 gap-y-1">
|
|
<p class="text-body-md text-on-surface-variant flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-sm">settings_input_component</span>
|
|
<span id="device-model">Soundbox V2 Pro</span>
|
|
</p>
|
|
<p class="text-body-md text-on-surface-variant flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-sm">tag</span>
|
|
<span id="device-serial-number">Code: -</span>
|
|
</p>
|
|
<p class="text-body-md text-on-surface-variant flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-sm">schedule</span>
|
|
<span id="device-last-seen">Last seen 2 mins ago</span>
|
|
</p>
|
|
<p class="text-body-md text-on-surface-variant flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-sm">location_on</span>
|
|
<span id="device-location">Mumbai, Central Region</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button class="px-4 py-2 border border-slate-200 text-on-surface-variant font-bold text-body-md rounded-lg hover:bg-slate-50 transition-all flex items-center gap-2" id="export-device-logs">
|
|
<span class="material-symbols-outlined text-[20px]">download</span>
|
|
Export Logs
|
|
</button>
|
|
<button class="px-4 py-2 bg-primary text-on-primary font-bold text-body-md rounded-lg hover:opacity-90 active:scale-95 transition-all flex items-center gap-2" id="refresh-device-state">
|
|
<span class="material-symbols-outlined text-[20px]">sync</span>
|
|
Refresh State
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Tab Navigation -->
|
|
<div class="border-b border-slate-200 mb-8 flex gap-8">
|
|
<button class="pb-4 text-body-md font-bold text-primary border-b-2 border-primary" data-scroll-target="overview-section">Overview</button>
|
|
<button class="pb-4 text-body-md font-medium text-on-surface-variant hover:text-primary transition-colors" data-scroll-target="payload-stream">Heartbeat</button>
|
|
<button class="pb-4 text-body-md font-medium text-on-surface-variant hover:text-primary transition-colors" data-scroll-target="configuration-section">Configuration</button>
|
|
<button class="pb-4 text-body-md font-medium text-on-surface-variant hover:text-primary transition-colors" data-scroll-target="binding-section">Binding History</button>
|
|
<button id="dynamic-qr-tab" class="hidden pb-4 text-body-md font-medium text-on-surface-variant hover:text-primary transition-colors" data-scroll-target="dynamic-qr-panel">Dynamic QR</button>
|
|
</div>
|
|
<!-- Grid Layout -->
|
|
<div class="grid grid-cols-12 gap-gutter">
|
|
<!-- Left Column: Primary Content -->
|
|
<div class="col-span-12 lg:col-span-8 space-y-gutter">
|
|
<!-- KPI Metrics Bento Grid -->
|
|
<div id="overview-section" class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
|
|
<div id="configuration-section" class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl shadow-sm">
|
|
<p class="text-label-md text-on-surface-variant mb-2">Signal Strength (4G)</p>
|
|
<div class="flex items-end justify-between">
|
|
<h3 class="font-metric-lg text-metric-lg text-on-surface" id="device-signal-strength">-78 dBm</h3>
|
|
<span class="material-symbols-outlined text-success">signal_cellular_4_bar</span>
|
|
</div>
|
|
<p class="text-metric-sm text-success mt-2 flex items-center gap-1" id="device-signal-status">
|
|
<span class="material-symbols-outlined text-[16px]">check_circle</span>
|
|
Excellent
|
|
</p>
|
|
</div>
|
|
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl shadow-sm">
|
|
<p class="text-label-md text-on-surface-variant mb-2">Battery Health</p>
|
|
<div class="flex items-end justify-between">
|
|
<h3 class="font-metric-lg text-metric-lg text-on-surface" id="device-battery-level">92%</h3>
|
|
<span class="material-symbols-outlined text-primary">battery_5_bar</span>
|
|
</div>
|
|
<p class="text-metric-sm text-on-surface-variant mt-2 flex items-center gap-1" id="device-battery-status">
|
|
<span class="material-symbols-outlined text-[16px]">bolt</span>
|
|
Discharging (External OFF)
|
|
</p>
|
|
</div>
|
|
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl shadow-sm">
|
|
<p class="text-label-md text-on-surface-variant mb-2">Firmware Version</p>
|
|
<div class="flex items-end justify-between">
|
|
<h3 class="font-metric-lg text-metric-lg text-on-surface" id="device-firmware-version">v2.4.1</h3>
|
|
<span class="material-symbols-outlined text-slate-400">verified</span>
|
|
</div>
|
|
<p class="text-metric-sm text-info mt-2 flex items-center gap-1" id="device-firmware-status">
|
|
<span class="material-symbols-outlined text-[16px]">info</span>
|
|
Latest version available
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- Fase 2 Ops Summary -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-gutter">
|
|
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl shadow-sm">
|
|
<div class="flex items-start justify-between gap-4 mb-4">
|
|
<div>
|
|
<p class="text-label-md text-on-surface-variant mb-1">Health Summary</p>
|
|
<h3 class="font-headline-lg text-headline-lg text-on-surface" id="device-health-score">-</h3>
|
|
</div>
|
|
<span id="device-health-status" class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold border bg-slate-100 text-slate-600 border-slate-200">
|
|
<span class="material-symbols-outlined text-[16px]">monitor_heart</span>
|
|
Unknown
|
|
</span>
|
|
</div>
|
|
<p class="text-body-md text-on-surface-variant" id="device-health-reasons">No health summary yet.</p>
|
|
</div>
|
|
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl shadow-sm">
|
|
<div class="flex items-start justify-between gap-4 mb-4">
|
|
<div>
|
|
<p class="text-label-md text-on-surface-variant mb-1">Config Delivery</p>
|
|
<h3 class="font-headline-md text-headline-md text-on-surface" id="device-config-version">Config -</h3>
|
|
</div>
|
|
<span id="device-config-status" class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold border bg-slate-100 text-slate-600 border-slate-200">
|
|
<span class="material-symbols-outlined text-[16px]">pending</span>
|
|
Loading
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3">
|
|
<p class="text-body-md text-on-surface-variant" id="device-config-detail">Waiting for config status.</p>
|
|
<button id="device-config-retry" class="px-3 py-2 bg-primary text-white rounded-lg text-label-md font-bold hover:opacity-90 disabled:opacity-50">Retry Push</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Dynamic QR Operations: shown only for dynamic-capable devices -->
|
|
<div id="dynamic-qr-panel" class="hidden bg-surface-container-lowest border border-slate-200 rounded-xl p-card-padding shadow-sm">
|
|
<div class="flex items-start justify-between gap-4 mb-4">
|
|
<div>
|
|
<p class="text-label-md text-on-surface-variant mb-1">Dynamic QR Operations</p>
|
|
<h3 class="font-headline-md text-headline-md text-on-surface" id="dynamic-qr-title">Screen QR enabled</h3>
|
|
</div>
|
|
<span class="material-symbols-outlined text-primary">qr_code_2</span>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|
<div class="bg-slate-50 border border-slate-100 rounded-lg p-3">
|
|
<p class="text-[11px] uppercase text-slate-500 font-bold">QR Mode</p>
|
|
<p id="dynamic-qr-mode" class="text-body-md font-bold text-on-surface">dynamic</p>
|
|
</div>
|
|
<div class="bg-slate-50 border border-slate-100 rounded-lg p-3">
|
|
<p class="text-[11px] uppercase text-slate-500 font-bold">Display</p>
|
|
<p id="dynamic-qr-display" class="text-body-md font-bold text-on-surface">Screen required</p>
|
|
</div>
|
|
<div class="bg-slate-50 border border-slate-100 rounded-lg p-3">
|
|
<p class="text-[11px] uppercase text-slate-500 font-bold">Command Path</p>
|
|
<p id="dynamic-qr-command-path" class="text-body-md font-bold text-on-surface">MQTT</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 flex flex-wrap gap-3">
|
|
<button id="dynamic-qr-open-preview" class="px-3 py-2 bg-primary text-white rounded-lg text-label-md font-bold hover:opacity-90">Open QR Display Preview</button>
|
|
<button class="px-3 py-2 border border-slate-200 rounded-lg text-label-md font-bold hover:bg-slate-50" id="dynamic-qr-send-test">Send Test QR</button>
|
|
</div>
|
|
</div>
|
|
<!-- Merchant Binding Info -->
|
|
<div id="binding-section" class="bg-surface-container-lowest border border-slate-200 rounded-xl overflow-hidden">
|
|
<div class="px-card-padding py-4 border-b border-slate-100 flex justify-between items-center bg-surface-container-low">
|
|
<h4 class="font-headline-md text-headline-md">Current Merchant Binding</h4>
|
|
<button id="change-merchant-binding" class="text-primary text-label-md font-bold hover:underline">Change Merchant</button>
|
|
</div>
|
|
<div class="p-card-padding flex items-center gap-6">
|
|
<div class="w-14 h-14 rounded-full bg-slate-100 border border-slate-200 flex items-center justify-center overflow-hidden">
|
|
<img alt="Bakery A Logo" data-alt="A macro photograph of fresh, golden-brown sourdough bread and artisan pastries in a boutique bakery window. The lighting is warm and inviting, highlighting textures and powdered sugar. The overall aesthetic is rustic yet clean, using a natural color palette of ambers and creams to convey quality and craft." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBLL97IiG98RevWkfNoNu5bn4vTZ2kcq5CEVVFZhDo7FSSiL-KDp4dkGB2euEyy3qjWqJZcyEnIvEUF-zIgZAQb_fcnVzjHHCpHXhk3_iLjEuviUvlCULxDy3FSwdqNYnVWQI8hJlttUDVMHQWjGvmF5J-DU-1UpRll2tilFoGJsiRPOY9w077s67RaPXE2AQUDPnJqcUcXN-C8Vs-FndxWkqGGTnLLjPbGLJIVy4mQHd9PAT2uhjppmienzUToJxGVMX84pTk53WI"/>
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="text-headline-md font-bold text-on-surface" id="device-binding-merchant">Bakery A - Mumbai Outlet</p>
|
|
<p class="text-body-md text-on-surface-variant">Merchant ID: <span id="device-binding-merchant-id">MID-99201-B02</span></p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-label-md text-slate-500">Bound Since</p>
|
|
<p class="text-body-md font-bold" id="device-binding-since">12 Oct 2023, 11:45 AM</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Live Payload Viewer -->
|
|
<div class="bg-slate-900 rounded-xl overflow-hidden flex flex-col h-[400px]">
|
|
<div class="px-4 py-3 bg-slate-800 flex justify-between items-center border-b border-slate-700">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-2 h-2 rounded-full bg-success animate-pulse"></span>
|
|
<span class="text-label-md text-slate-100 font-bold uppercase tracking-widest">Live Payload Stream</span>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button id="copy-payload-stream" class="text-slate-400 hover:text-white transition-colors">
|
|
<span class="material-symbols-outlined text-[18px]">content_copy</span>
|
|
</button>
|
|
<button class="text-slate-400 hover:text-white transition-colors" id="clearConsole">
|
|
<span class="material-symbols-outlined text-[18px]">block</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="payload-stream" data-section="heartbeat-section" class="p-4 flex-1 overflow-y-auto code-font text-[13px] text-green-400 space-y-1 custom-scroll">
|
|
<p class="text-slate-500">[14:02:11] INITIALIZING WEBSOCKET CONNECTION...</p>
|
|
<p class="text-slate-500">[14:02:12] CONNECTED TO SND-10293_GATEWAY_V4</p>
|
|
<p class="text-success">[14:02:15] RECV: {"event": "heartbeat", "status": "online", "v_batt": 4.12, "rssi": -78, "ts": 1715421255}</p>
|
|
<p class="text-blue-400">[14:03:01] SEND: {"cmd": "ack_config", "token": "fx-2291"}</p>
|
|
<p class="text-success">[14:03:02] RECV: {"event": "tx_confirm", "tx_id": "QR-90112", "amount": 12.50, "currency": "INR"}</p>
|
|
<p class="text-slate-500">[14:04:15] IDLE: STANDBY MODE ACTIVE</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right Column: Sidebar Panels -->
|
|
<div class="col-span-12 lg:col-span-4 space-y-gutter">
|
|
<!-- Remote Actions Panel -->
|
|
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl overflow-hidden shadow-sm">
|
|
<div class="p-card-padding border-b border-slate-100">
|
|
<h4 class="font-headline-md text-headline-md">Remote Actions</h4>
|
|
</div>
|
|
<div class="p-card-padding space-y-3">
|
|
<button id="reboot-device" class="w-full flex items-center justify-between p-3 border border-slate-200 rounded-lg hover:bg-slate-50 transition-all group">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">restart_alt</span>
|
|
<span class="font-body-md font-bold">Reboot Device</span>
|
|
</div>
|
|
<span class="material-symbols-outlined text-slate-300">chevron_right</span>
|
|
</button>
|
|
<button id="poweroff-device" class="w-full flex items-center justify-between p-3 border border-danger/20 bg-danger/5 rounded-lg hover:bg-danger/10 transition-all group">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-danger">power_settings_new</span>
|
|
<span class="font-body-md font-bold text-danger">Power Off Device</span>
|
|
</div>
|
|
<span class="material-symbols-outlined text-danger/50">chevron_right</span>
|
|
</button>
|
|
<button id="update-device-firmware" class="w-full flex items-center justify-between p-3 border border-slate-200 rounded-lg hover:bg-slate-50 transition-all group">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">system_update</span>
|
|
<span class="font-body-md font-bold">Update Firmware</span>
|
|
</div>
|
|
<span class="bg-primary/10 text-primary text-[10px] font-bold px-2 py-0.5 rounded-full">OTA Ready</span>
|
|
</button>
|
|
<button id="unbind-device" class="w-full flex items-center justify-between p-3 border border-slate-200 rounded-lg hover:bg-slate-50 transition-all group">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">lock_open</span>
|
|
<span class="font-body-md font-bold">Unbind Merchant</span>
|
|
</div>
|
|
<span class="material-symbols-outlined text-slate-300">chevron_right</span>
|
|
</button>
|
|
<button id="rotate-device-credential" class="w-full flex items-center justify-between p-3 border border-slate-200 rounded-lg hover:bg-slate-50 transition-all group">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">vpn_key</span>
|
|
<span class="font-body-md font-bold">Rotate MQTT Credential</span>
|
|
</div>
|
|
<span class="material-symbols-outlined text-slate-300">chevron_right</span>
|
|
</button>
|
|
<div class="pt-2">
|
|
<button id="decommission-device" class="w-full py-2.5 bg-danger/10 text-danger border border-danger/20 font-bold text-body-md rounded-lg hover:bg-danger/20 transition-all flex items-center justify-center gap-2">
|
|
<span class="material-symbols-outlined text-[20px]">delete_forever</span>
|
|
Decommission Device
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- MQTT Credential Panel -->
|
|
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl p-card-padding shadow-sm">
|
|
<div class="flex items-start justify-between gap-4 mb-4">
|
|
<div>
|
|
<p class="text-label-md text-on-surface-variant mb-1">MQTT Credential</p>
|
|
<h4 class="font-headline-md text-headline-md text-on-surface" id="device-credential-status">Not Issued</h4>
|
|
</div>
|
|
<span class="material-symbols-outlined text-primary">key</span>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div>
|
|
<p class="text-[11px] uppercase tracking-wider text-slate-500 font-bold">Username</p>
|
|
<p class="code-font text-[12px] text-on-surface break-all" id="device-mqtt-username">-</p>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<p class="text-[11px] uppercase tracking-wider text-slate-500 font-bold">Issued</p>
|
|
<p class="text-body-md text-on-surface" id="device-credential-issued">-</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-[11px] uppercase tracking-wider text-slate-500 font-bold">Rotated</p>
|
|
<p class="text-body-md text-on-surface" id="device-credential-rotated">-</p>
|
|
</div>
|
|
</div>
|
|
<button id="rotate-device-credential-secondary" class="w-full py-2.5 bg-primary text-on-primary font-bold text-body-md rounded-lg hover:opacity-90 active:scale-95 transition-all flex items-center justify-center gap-2">
|
|
<span class="material-symbols-outlined text-[20px]">sync_lock</span>
|
|
Rotate Credential
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Device Health Timeline -->
|
|
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl p-card-padding shadow-sm">
|
|
<h4 class="font-headline-md text-headline-md mb-6">Device Events</h4>
|
|
<div class="space-y-6 relative before:content-[''] before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-[2px] before:bg-slate-100" id="device-events">
|
|
</div>
|
|
<button class="w-full mt-6 text-primary text-label-md font-bold hover:bg-slate-50 py-2 rounded-lg transition-colors" id="view-all-events">View All Events</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- FAB for Quick Config (Suppressed on detail pages as per mandate but kept for utility context if needed, hidden here) -->
|
|
<div class="fixed bottom-6 right-6 z-50 hidden">
|
|
<button class="w-14 h-14 bg-primary text-on-primary rounded-full shadow-lg flex items-center justify-center hover:scale-110 transition-transform">
|
|
<span class="material-symbols-outlined">add</span>
|
|
</button>
|
|
</div>
|
|
<div id="qr-preview-modal" class="fixed inset-0 z-[105] hidden items-center justify-center bg-slate-900/60 px-4">
|
|
<div class="w-full max-w-2xl overflow-hidden rounded-xl border border-slate-200 bg-white shadow-2xl">
|
|
<div class="flex items-start justify-between gap-4 border-b border-slate-100 p-card-padding">
|
|
<div>
|
|
<h3 class="font-headline-md text-headline-md text-on-surface">QR Display Preview</h3>
|
|
<p class="mt-1 text-body-md text-on-surface-variant">Simulasi tampilan layar dynamic soundbox untuk device ini.</p>
|
|
</div>
|
|
<button id="qr-preview-close" class="flex h-10 w-10 items-center justify-center rounded-lg text-on-surface-variant hover:bg-slate-100">
|
|
<span class="material-symbols-outlined">close</span>
|
|
</button>
|
|
</div>
|
|
<div class="grid gap-5 p-card-padding md:grid-cols-[260px_minmax(0,1fr)]">
|
|
<div class="rounded-[28px] border-[10px] border-slate-900 bg-slate-950 p-4 shadow-xl">
|
|
<div class="rounded-2xl bg-white p-4 text-center">
|
|
<p class="text-[11px] font-bold uppercase tracking-wider text-slate-500">QRIS Payment</p>
|
|
<div id="qr-preview-grid" class="mx-auto my-4 flex h-40 w-40 items-center justify-center rounded-lg bg-white p-2"></div>
|
|
<p id="qr-preview-amount" class="text-xl font-extrabold text-slate-950">Rp 1.000</p>
|
|
<p id="qr-preview-device" class="mt-1 font-mono text-[11px] text-slate-500">-</p>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div class="rounded-lg border border-slate-200 bg-slate-50 p-3">
|
|
<p class="text-[11px] font-bold uppercase text-slate-500">Command Path</p>
|
|
<p id="qr-preview-command-path" class="mt-1 font-bold text-on-surface">MQTT</p>
|
|
</div>
|
|
<div class="rounded-lg border border-slate-200 bg-slate-50 p-3">
|
|
<p class="text-[11px] font-bold uppercase text-slate-500">QR Mode</p>
|
|
<p id="qr-preview-mode" class="mt-1 font-bold text-on-surface">dynamic</p>
|
|
</div>
|
|
<div class="rounded-lg border border-slate-200 bg-slate-50 p-3">
|
|
<p class="text-[11px] font-bold uppercase text-slate-500">Payload</p>
|
|
<pre id="qr-preview-payload" class="mt-2 max-h-44 overflow-auto whitespace-pre-wrap font-mono text-[12px] text-slate-700"></pre>
|
|
</div>
|
|
<button id="qr-preview-send-test" class="w-full rounded-lg bg-primary px-4 py-2.5 font-bold text-white hover:opacity-90">Send Test QR to Device</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="detail-confirm-modal" class="fixed inset-0 z-[110] hidden items-center justify-center bg-slate-900/60 px-4">
|
|
<div class="w-full max-w-md overflow-hidden rounded-xl border border-slate-200 bg-white shadow-2xl">
|
|
<div class="border-b border-slate-100 p-card-padding">
|
|
<h3 id="detail-confirm-title" class="font-headline-md text-headline-md text-on-surface">Confirm action</h3>
|
|
<p id="detail-confirm-message" class="mt-2 text-body-md text-on-surface-variant"></p>
|
|
</div>
|
|
<div class="flex justify-end gap-2 p-card-padding">
|
|
<button id="detail-confirm-cancel" class="rounded-lg border border-slate-200 px-4 py-2 font-bold text-body-md hover:bg-slate-50">Cancel</button>
|
|
<button id="detail-confirm-submit" class="rounded-lg bg-danger px-4 py-2 font-bold text-body-md text-white hover:opacity-90">Continue</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="credential-modal" class="fixed inset-0 z-[100] hidden items-center justify-center bg-slate-900/60 px-4">
|
|
<div class="bg-surface-container-lowest rounded-xl border border-slate-200 shadow-2xl w-full max-w-xl overflow-hidden">
|
|
<div class="p-card-padding border-b border-slate-100 flex items-start justify-between gap-4">
|
|
<div>
|
|
<h3 class="font-headline-md text-headline-md text-on-surface">MQTT Credential Rotated</h3>
|
|
<p class="text-body-md text-on-surface-variant mt-1">Password ini hanya ditampilkan satu kali.</p>
|
|
</div>
|
|
<button id="credential-modal-close" class="w-10 h-10 rounded-lg hover:bg-slate-100 flex items-center justify-center text-on-surface-variant">
|
|
<span class="material-symbols-outlined">close</span>
|
|
</button>
|
|
</div>
|
|
<div class="p-card-padding space-y-4">
|
|
<div>
|
|
<p class="text-[11px] uppercase tracking-wider text-slate-500 font-bold mb-1">Username</p>
|
|
<div class="flex items-center gap-2">
|
|
<code id="credential-modal-username" class="code-font flex-1 bg-slate-100 border border-slate-200 rounded-lg px-3 py-2 text-[13px] break-all">-</code>
|
|
<button id="credential-copy-username" class="w-10 h-10 rounded-lg border border-slate-200 hover:bg-slate-50 flex items-center justify-center text-on-surface-variant" title="Copy username">
|
|
<span class="material-symbols-outlined text-[20px]">content_copy</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="text-[11px] uppercase tracking-wider text-slate-500 font-bold mb-1">Password</p>
|
|
<div class="flex items-center gap-2">
|
|
<code id="credential-modal-password" class="code-font flex-1 bg-slate-900 text-green-400 rounded-lg px-3 py-2 text-[13px] break-all">-</code>
|
|
<button id="credential-copy-password" class="w-10 h-10 rounded-lg border border-slate-200 hover:bg-slate-50 flex items-center justify-center text-on-surface-variant" title="Copy password">
|
|
<span class="material-symbols-outlined text-[20px]">content_copy</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="text-[11px] uppercase tracking-wider text-slate-500 font-bold mb-1">Mosquitto Command</p>
|
|
<code id="credential-modal-command" class="code-font block bg-slate-100 border border-slate-200 rounded-lg px-3 py-2 text-[12px] break-all">-</code>
|
|
</div>
|
|
<div class="flex justify-end gap-2 pt-2">
|
|
<button id="credential-copy-command" class="px-4 py-2 border border-slate-200 rounded-lg font-bold text-body-md hover:bg-slate-50 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-[20px]">terminal</span>
|
|
Copy Command
|
|
</button>
|
|
<button id="credential-modal-done" class="px-4 py-2 bg-primary text-on-primary rounded-lg font-bold text-body-md hover:opacity-90">Done</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/ui/shared/admin-api.js"></script>
|
|
<script>
|
|
const DeviceDetail = (() => {
|
|
const api = window.AdminUIAPI;
|
|
if (!api) {
|
|
return;
|
|
}
|
|
|
|
const qs = new URLSearchParams(window.location.search);
|
|
const deviceId = qs.get("device_id") || qs.get("deviceId") || qs.get("id") || "";
|
|
let activeDeviceId = deviceId;
|
|
const stream = document.getElementById("payload-stream") || document.getElementById("heartbeat-section");
|
|
const clearBtn = document.getElementById("clearConsole");
|
|
const exportBtn = document.getElementById("export-device-logs");
|
|
const refreshBtn = document.getElementById("refresh-device-state");
|
|
const viewAllEventsBtn = document.getElementById("view-all-events");
|
|
const deviceSearch = document.getElementById("detail-device-search");
|
|
const notificationButton = document.getElementById("detail-notification-button");
|
|
const calendarButton = document.getElementById("detail-calendar-button");
|
|
const copyPayloadButton = document.getElementById("copy-payload-stream");
|
|
const rebootButton = document.getElementById("reboot-device");
|
|
const poweroffButton = document.getElementById("poweroff-device");
|
|
const updateFirmwareButton = document.getElementById("update-device-firmware");
|
|
const unbindButton = document.getElementById("unbind-device");
|
|
const decommissionButton = document.getElementById("decommission-device");
|
|
const changeMerchantButton = document.getElementById("change-merchant-binding");
|
|
const qrPreviewOpen = document.getElementById("dynamic-qr-open-preview");
|
|
const qrPreviewModal = document.getElementById("qr-preview-modal");
|
|
const qrPreviewClose = document.getElementById("qr-preview-close");
|
|
const qrPreviewGrid = document.getElementById("qr-preview-grid");
|
|
const qrPreviewAmount = document.getElementById("qr-preview-amount");
|
|
const qrPreviewDevice = document.getElementById("qr-preview-device");
|
|
const qrPreviewCommandPath = document.getElementById("qr-preview-command-path");
|
|
const qrPreviewMode = document.getElementById("qr-preview-mode");
|
|
const qrPreviewPayload = document.getElementById("qr-preview-payload");
|
|
const qrPreviewSendTest = document.getElementById("qr-preview-send-test");
|
|
const confirmModal = document.getElementById("detail-confirm-modal");
|
|
const confirmTitle = document.getElementById("detail-confirm-title");
|
|
const confirmMessage = document.getElementById("detail-confirm-message");
|
|
const confirmCancel = document.getElementById("detail-confirm-cancel");
|
|
const confirmSubmit = document.getElementById("detail-confirm-submit");
|
|
const rotateCredentialButtons = [
|
|
document.getElementById("rotate-device-credential"),
|
|
document.getElementById("rotate-device-credential-secondary")
|
|
].filter(Boolean);
|
|
const credentialModal = document.getElementById("credential-modal");
|
|
const credentialModalClose = document.getElementById("credential-modal-close");
|
|
const credentialModalDone = document.getElementById("credential-modal-done");
|
|
const credentialCopyUsername = document.getElementById("credential-copy-username");
|
|
const credentialCopyPassword = document.getElementById("credential-copy-password");
|
|
const credentialCopyCommand = document.getElementById("credential-copy-command");
|
|
const backLink = document.querySelector("a[href='#']");
|
|
const eventHost = document.getElementById("device-events");
|
|
let currentDevice = null;
|
|
let currentHeartbeats = [];
|
|
let showingAllEvents = false;
|
|
let confirmResolver = null;
|
|
let latestCredentialCommand = "";
|
|
let liveRefreshTimer = null;
|
|
|
|
const els = {
|
|
breadcrumbCode: document.getElementById("device-breadcrumb-code"),
|
|
title: document.getElementById("device-title"),
|
|
statusBadge: document.getElementById("device-status-badge"),
|
|
statusDot: document.getElementById("device-status-dot"),
|
|
model: document.getElementById("device-model"),
|
|
serialNumber: document.getElementById("device-serial-number"),
|
|
lastSeen: document.getElementById("device-last-seen"),
|
|
location: document.getElementById("device-location"),
|
|
signalStrength: document.getElementById("device-signal-strength"),
|
|
signalStatus: document.getElementById("device-signal-status"),
|
|
batteryLevel: document.getElementById("device-battery-level"),
|
|
batteryStatus: document.getElementById("device-battery-status"),
|
|
firmwareVersion: document.getElementById("device-firmware-version"),
|
|
firmwareStatus: document.getElementById("device-firmware-status"),
|
|
bindingMerchant: document.getElementById("device-binding-merchant"),
|
|
bindingMerchantId: document.getElementById("device-binding-merchant-id"),
|
|
bindingSince: document.getElementById("device-binding-since"),
|
|
healthScore: document.getElementById("device-health-score"),
|
|
healthStatus: document.getElementById("device-health-status"),
|
|
healthReasons: document.getElementById("device-health-reasons"),
|
|
configVersion: document.getElementById("device-config-version"),
|
|
configStatus: document.getElementById("device-config-status"),
|
|
configDetail: document.getElementById("device-config-detail"),
|
|
configRetry: document.getElementById("device-config-retry"),
|
|
dynamicQrTab: document.getElementById("dynamic-qr-tab"),
|
|
dynamicQrPanel: document.getElementById("dynamic-qr-panel"),
|
|
dynamicQrMode: document.getElementById("dynamic-qr-mode"),
|
|
dynamicQrDisplay: document.getElementById("dynamic-qr-display"),
|
|
dynamicQrCommandPath: document.getElementById("dynamic-qr-command-path"),
|
|
dynamicQrSendTest: document.getElementById("dynamic-qr-send-test"),
|
|
credentialStatus: document.getElementById("device-credential-status"),
|
|
mqttUsername: document.getElementById("device-mqtt-username"),
|
|
credentialIssued: document.getElementById("device-credential-issued"),
|
|
credentialRotated: document.getElementById("device-credential-rotated"),
|
|
credentialModalUsername: document.getElementById("credential-modal-username"),
|
|
credentialModalPassword: document.getElementById("credential-modal-password"),
|
|
credentialModalCommand: document.getElementById("credential-modal-command")
|
|
};
|
|
|
|
const setText = (el, value, fallback = "-") => {
|
|
if (el) {
|
|
el.textContent = value || fallback;
|
|
}
|
|
};
|
|
|
|
const setStatus = (status) => {
|
|
const normalized = String(status || "").toLowerCase();
|
|
const styleMap = {
|
|
online: {
|
|
badge: "bg-success/10 text-success border-success/20",
|
|
dot: "bg-success",
|
|
label: "ONLINE"
|
|
},
|
|
degraded: {
|
|
badge: "bg-warning/10 text-warning border-warning/20",
|
|
dot: "bg-warning",
|
|
label: "DEGRADED"
|
|
},
|
|
stale: {
|
|
badge: "bg-warning/10 text-warning border-warning/20",
|
|
dot: "bg-warning",
|
|
label: "STALE"
|
|
},
|
|
offline: {
|
|
badge: "bg-danger/10 text-danger border-danger/20",
|
|
dot: "bg-danger",
|
|
label: "OFFLINE"
|
|
}
|
|
};
|
|
const meta = styleMap[normalized] || {
|
|
badge: "bg-slate-100 text-slate-600 border-slate-200",
|
|
dot: "bg-slate-400",
|
|
label: normalized ? status.toUpperCase() : "UNKNOWN"
|
|
};
|
|
|
|
if (!els.statusBadge || !els.statusDot) {
|
|
return;
|
|
}
|
|
els.statusBadge.className = `${meta.badge} text-[10px] font-bold px-2 py-0.5 rounded-full border uppercase tracking-wider flex items-center gap-1`;
|
|
els.statusDot.className = `w-1.5 h-1.5 rounded-full ${meta.dot}`;
|
|
els.statusBadge.innerHTML = "";
|
|
els.statusBadge.appendChild(els.statusDot);
|
|
els.statusBadge.append(` ${meta.label || "UNKNOWN"}`);
|
|
};
|
|
|
|
const toNumber = (value) => {
|
|
const num = Number(value);
|
|
return Number.isFinite(num) ? num : null;
|
|
};
|
|
|
|
const normalizeTimestamp = (value) => {
|
|
if (!value && value !== 0) {
|
|
return null;
|
|
}
|
|
const num = Number(value);
|
|
if (Number.isFinite(num)) {
|
|
return String(value).length === 10 ? num * 1000 : num;
|
|
}
|
|
const date = new Date(value);
|
|
return Number.isNaN(date.getTime()) ? null : date.getTime();
|
|
};
|
|
|
|
const formatDateTime = (value, fallback = "-") => {
|
|
const ms = normalizeTimestamp(value);
|
|
if (!ms) {
|
|
return fallback;
|
|
}
|
|
return new Intl.DateTimeFormat("en-GB", { dateStyle: "medium", timeStyle: "short" }).format(ms);
|
|
};
|
|
|
|
const formatClock = (value) => {
|
|
const ms = normalizeTimestamp(value) || Date.now();
|
|
return new Intl.DateTimeFormat("en-GB", {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
second: "2-digit",
|
|
hour12: false
|
|
}).format(ms);
|
|
};
|
|
|
|
const escapeHtml = (value) =>
|
|
String(value ?? "")
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """)
|
|
.replace(/'/g, "'");
|
|
|
|
const formatEventTitle = (item) => {
|
|
const state = String(item?.state || item?.event || item?.type || item?.status || "heartbeat")
|
|
.replace(/_/g, " ")
|
|
.trim();
|
|
return state ? state.replace(/\b\w/g, (char) => char.toUpperCase()) : "Heartbeat";
|
|
};
|
|
|
|
const compactPayload = (item) => {
|
|
const payload = item?.payload && typeof item.payload === "object" ? item.payload : item;
|
|
const picked = {
|
|
id: payload?.id,
|
|
serial: payload?.["dev-sn"] || payload?.serial_number || currentDevice?.serial_number,
|
|
state: payload?.state || item?.state,
|
|
firmware: payload?.["fw-version"] || item?.firmware_version,
|
|
signal: item?.network_strength ?? payload?.network_strength ?? payload?.rssi ?? payload?.["wifi-ap"]?.rssi,
|
|
battery: item?.battery_level ?? payload?.battery_level ?? payload?.["battery-level"],
|
|
received_at: item?.received_at,
|
|
timestamp: item?.timestamp || payload?.time
|
|
};
|
|
return Object.fromEntries(Object.entries(picked).filter(([, value]) => value !== undefined && value !== null && value !== ""));
|
|
};
|
|
|
|
const extractHeartbeatMetrics = (heartbeat) => {
|
|
if (!heartbeat || typeof heartbeat !== "object") {
|
|
return {};
|
|
}
|
|
return {
|
|
signal: heartbeat.network_strength ?? heartbeat.rssi ?? heartbeat.rssi_dbm ?? heartbeat.signal ?? heartbeat.signal_strength ?? heartbeat.rsrp,
|
|
battery: heartbeat.battery_level ?? heartbeat.battery_voltage ?? heartbeat.v_batt ?? heartbeat.voltage ?? heartbeat.battery ?? heartbeat.batt ?? null,
|
|
ts: heartbeat.ts ?? heartbeat.timestamp ?? heartbeat.created_at ?? heartbeat.updated_at
|
|
};
|
|
};
|
|
|
|
const renderSignalStatus = (signal, battery, statusLabel) => {
|
|
if (signal === null || signal === undefined) {
|
|
setText(els.signalStrength, "N/A");
|
|
setText(els.signalStatus, "Signal unavailable");
|
|
} else {
|
|
setText(els.signalStrength, `${signal} dBm`);
|
|
if (toNumber(signal) !== null && toNumber(signal) <= -100) {
|
|
setText(els.signalStatus, "Weak");
|
|
} else if (toNumber(signal) !== null && toNumber(signal) <= -80) {
|
|
setText(els.signalStatus, "Fair");
|
|
} else {
|
|
setText(els.signalStatus, "Excellent");
|
|
}
|
|
}
|
|
|
|
if (battery === null || battery === undefined) {
|
|
setText(els.batteryLevel, "N/A");
|
|
setText(els.batteryStatus, "Battery snapshot unavailable");
|
|
} else if (toNumber(battery) !== null && toNumber(battery) <= 10) {
|
|
setText(els.batteryLevel, `${battery}%`);
|
|
setText(els.batteryStatus, "Critical");
|
|
} else if (toNumber(battery) !== null && toNumber(battery) <= 20) {
|
|
setText(els.batteryLevel, `${battery}%`);
|
|
setText(els.batteryStatus, "Low");
|
|
} else {
|
|
setText(els.batteryLevel, toNumber(battery) !== null && toNumber(battery) > 100 ? `${battery} V` : `${battery}%`);
|
|
setText(els.batteryStatus, statusLabel || "Normal");
|
|
}
|
|
};
|
|
|
|
const renderEvents = (heartbeats, showAll = false) => {
|
|
if (!eventHost) {
|
|
return;
|
|
}
|
|
|
|
const rows = Array.isArray(heartbeats)
|
|
? (showAll ? heartbeats : heartbeats.slice(0, 6))
|
|
: [];
|
|
if (!rows.length) {
|
|
eventHost.innerHTML =
|
|
'<p class="text-label-md text-slate-400">No recent events yet.</p>';
|
|
return;
|
|
}
|
|
|
|
const iconClass = (status) => {
|
|
const normalized = String(status || "").toLowerCase();
|
|
if (["success", "confirmed", "online", "up"].includes(normalized)) {
|
|
return { color: "bg-success", icon: "check" };
|
|
}
|
|
if (["sync", "update", "ack", "heartbeat"].includes(normalized)) {
|
|
return { color: "bg-blue-500", icon: "sync" };
|
|
}
|
|
return { color: "bg-warning", icon: "bolt" };
|
|
};
|
|
|
|
eventHost.innerHTML = rows
|
|
.map((item) => {
|
|
const metric = extractHeartbeatMetrics(item);
|
|
const when = formatDateTime(
|
|
item.timestamp || item.ts || item.created_at || item.updated_at,
|
|
"unknown"
|
|
);
|
|
const title = formatEventTitle(item);
|
|
const summary = compactPayload(item);
|
|
const marker = iconClass(item.status || item.event || item.state);
|
|
return `<div class="relative pl-8 min-w-0">
|
|
<div class="absolute left-0 top-1 w-6 h-6 rounded-full ${marker.color} border-4 border-white shadow-sm flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-[12px] text-white" style="font-variation-settings: 'FILL' 1;">${marker.icon}</span>
|
|
</div>
|
|
<div class="min-w-0 rounded-lg border border-slate-100 bg-slate-50/60 p-3">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<p class="text-label-md font-bold text-slate-900">${escapeHtml(title)}</p>
|
|
<p class="shrink-0 text-[10px] text-slate-400">${escapeHtml(when)}</p>
|
|
</div>
|
|
<p class="mt-1 text-[12px] text-on-surface-variant">Signal: ${escapeHtml(metric.signal ?? "N/A")}, Battery: ${escapeHtml(metric.battery ?? "N/A")}</p>
|
|
<pre class="mt-2 max-h-24 overflow-auto whitespace-pre-wrap break-words rounded-md bg-white px-2 py-1.5 text-[11px] leading-5 text-slate-600">${escapeHtml(JSON.stringify(summary, null, 2))}</pre>
|
|
</div>
|
|
</div>`;
|
|
})
|
|
.join("");
|
|
};
|
|
|
|
const renderStream = (heartbeats) => {
|
|
if (!stream) {
|
|
return;
|
|
}
|
|
const rows = Array.isArray(heartbeats) ? heartbeats : [];
|
|
stream.innerHTML = "";
|
|
if (!rows.length) {
|
|
stream.innerHTML = '<p class="text-slate-500">No heartbeat payload available for this device.</p>';
|
|
return;
|
|
}
|
|
|
|
rows.slice(0, 20).forEach((item) => {
|
|
const when = formatClock(item.timestamp || item.ts || item.created_at || item.updated_at || item.received_at);
|
|
const line = document.createElement("pre");
|
|
line.className = "whitespace-pre-wrap break-words text-green-400 leading-5";
|
|
line.textContent = `[${when}] RECV heartbeat\n${JSON.stringify(compactPayload(item), null, 2)}`;
|
|
stream.appendChild(line);
|
|
});
|
|
stream.scrollTop = stream.scrollHeight;
|
|
};
|
|
|
|
const setDerivedStatus = (device, heartbeats) => {
|
|
const derivedStatus =
|
|
device.derived_status || device.status || device.connection_status || "";
|
|
if (derivedStatus) {
|
|
setStatus(derivedStatus);
|
|
return;
|
|
}
|
|
|
|
if (!heartbeats || !heartbeats.length) {
|
|
setStatus("offline");
|
|
return;
|
|
}
|
|
|
|
const latestTs = normalizeTimestamp(
|
|
extractHeartbeatMetrics(heartbeats[0]).ts
|
|
);
|
|
if (!latestTs) {
|
|
setStatus("unknown");
|
|
return;
|
|
}
|
|
const age = Date.now() - latestTs;
|
|
if (age <= 90 * 1000) {
|
|
setStatus("online");
|
|
} else if (age <= 15 * 60 * 1000) {
|
|
setStatus("degraded");
|
|
} else {
|
|
setStatus("offline");
|
|
}
|
|
};
|
|
|
|
const healthReasonLabels = {
|
|
no_heartbeat: "No heartbeat",
|
|
offline_threshold_exceeded: "Offline threshold exceeded",
|
|
stale_threshold_exceeded: "Heartbeat is stale",
|
|
low_signal: "Low signal",
|
|
low_battery: "Low battery"
|
|
};
|
|
|
|
const statusPillClass = (status) => {
|
|
const normalized = String(status || "").toLowerCase();
|
|
if (normalized === "online" || normalized === "applied" || normalized === "pulled_not_pushed") {
|
|
return "bg-success/10 text-success border-success/20";
|
|
}
|
|
if (normalized === "degraded" || normalized === "stale" || normalized === "pending_ack" || normalized === "stale_ack") {
|
|
return "bg-warning/10 text-warning border-warning/20";
|
|
}
|
|
if (normalized === "offline" || normalized === "failed_ack") {
|
|
return "bg-danger/10 text-danger border-danger/20";
|
|
}
|
|
return "bg-slate-100 text-slate-600 border-slate-200";
|
|
};
|
|
|
|
const renderHealthSummary = (summary) => {
|
|
if (!summary) {
|
|
setText(els.healthScore, "-");
|
|
setText(els.healthReasons, "No health summary yet.");
|
|
return;
|
|
}
|
|
|
|
setText(els.healthScore, typeof summary.score === "number" ? `${summary.score}%` : "-");
|
|
const status = summary.status || "unknown";
|
|
if (els.healthStatus) {
|
|
els.healthStatus.className = `inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold border ${statusPillClass(status)}`;
|
|
els.healthStatus.innerHTML = `<span class="material-symbols-outlined text-[16px]">monitor_heart</span>${String(status).replace("_", " ").toUpperCase()}`;
|
|
}
|
|
const reasons = Array.isArray(summary.reasons) && summary.reasons.length
|
|
? summary.reasons.map((item) => healthReasonLabels[item] || item).join(", ")
|
|
: "No active warning";
|
|
setText(
|
|
els.healthReasons,
|
|
`${reasons}${typeof summary.age_seconds === "number" ? ` · ${summary.age_seconds}s since heartbeat` : ""}`
|
|
);
|
|
};
|
|
|
|
const renderConfigStatus = (status) => {
|
|
if (!status) {
|
|
return;
|
|
}
|
|
|
|
const drift = status.drift_status || "unknown";
|
|
const version = status.desired_config_version || status.config?.config_version || "-";
|
|
setText(els.configVersion, `Config v${version}`);
|
|
if (els.configStatus) {
|
|
const label = drift === "pulled_not_pushed" ? "PULLED BY DEVICE" : String(drift).replace(/_/g, " ").toUpperCase();
|
|
const icon = drift === "applied" || drift === "pulled_not_pushed" ? "check_circle" : drift === "failed_ack" ? "error" : "pending";
|
|
els.configStatus.className = `inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold border ${statusPillClass(drift)}`;
|
|
els.configStatus.innerHTML = `<span class="material-symbols-outlined text-[16px]">${icon}</span>${label}`;
|
|
}
|
|
|
|
const ack = status.latest_ack ? `${status.latest_ack.status} at ${formatDateTime(status.latest_ack.acked_at, "-")}` : "No ACK";
|
|
const push = status.latest_push ? formatDateTime(status.latest_push.created_at, "-") : "No push";
|
|
const pull = status.latest_config_pull ? formatDateTime(status.latest_config_pull.received_at || status.latest_config_pull.timestamp, "-") : "No pull";
|
|
setText(els.configDetail, `Pull: ${pull} · Push: ${push} · ACK: ${ack}`);
|
|
if (els.configRetry) {
|
|
els.configRetry.disabled = status.retry_recommended === false;
|
|
els.configRetry.textContent = status.retry_recommended === false
|
|
? (drift === "pulled_not_pushed" ? "Pulled" : "Applied")
|
|
: "Retry Push";
|
|
}
|
|
};
|
|
|
|
const parseJsonMaybe = (value) => {
|
|
if (!value) {
|
|
return {};
|
|
}
|
|
if (typeof value === "object") {
|
|
return value;
|
|
}
|
|
try {
|
|
return JSON.parse(value);
|
|
} catch (_error) {
|
|
return {};
|
|
}
|
|
};
|
|
|
|
const isDynamicDevice = (device) => {
|
|
const capability = parseJsonMaybe(device.capability_profile_json || device.capability_summary);
|
|
const text = [
|
|
device.qr_mode,
|
|
device.terminal_qr_mode,
|
|
device.device_type,
|
|
device.model,
|
|
device.communication_mode,
|
|
capability?.qr_mode,
|
|
capability?.terminal_qr_mode,
|
|
capability?.features?.dynamic_qr ? "dynamic_qr" : "",
|
|
Array.isArray(capability?.flows) ? capability.flows.join(" ") : ""
|
|
]
|
|
.map((item) => String(item || "").toLowerCase())
|
|
.join(" ");
|
|
|
|
return text.includes("dynamic") || text.includes("screen") || text.includes("dynamic_qr");
|
|
};
|
|
|
|
const renderDynamicQrPanel = (device) => {
|
|
const dynamic = isDynamicDevice(device);
|
|
els.dynamicQrTab?.classList.toggle("hidden", !dynamic);
|
|
els.dynamicQrPanel?.classList.toggle("hidden", !dynamic);
|
|
if (!dynamic) {
|
|
return;
|
|
}
|
|
|
|
const capability = parseJsonMaybe(device.capability_profile_json || device.capability_summary);
|
|
const commandPath = String(device.communication_mode || "").toLowerCase() === "api" ? "API" : "MQTT";
|
|
setText(els.dynamicQrMode, device.qr_mode || device.terminal_qr_mode || "dynamic");
|
|
setText(els.dynamicQrDisplay, capability?.features?.dynamic_qr?.display || "Screen required");
|
|
setText(els.dynamicQrCommandPath, commandPath);
|
|
};
|
|
|
|
const shellQuote = (value) => `'${String(value || "").replace(/'/g, "'\\''")}'`;
|
|
|
|
const renderCredentialSummary = (device) => {
|
|
const status = device?.credential_status || "not_issued";
|
|
const statusLabel = String(status).replace(/_/g, " ").toUpperCase();
|
|
setText(els.credentialStatus, statusLabel);
|
|
if (els.credentialStatus) {
|
|
els.credentialStatus.className = `font-headline-md text-headline-md ${status === "active" ? "text-success" : status === "revoked" ? "text-danger" : "text-on-surface"}`;
|
|
}
|
|
setText(els.mqttUsername, device?.mqtt_username || device?.id || "-");
|
|
setText(els.credentialIssued, formatDateTime(device?.credential_issued_at, "-"));
|
|
setText(els.credentialRotated, formatDateTime(device?.credential_rotated_at, "-"));
|
|
};
|
|
|
|
const setRotateLoading = (loading) => {
|
|
rotateCredentialButtons.forEach((button) => {
|
|
button.disabled = loading;
|
|
button.classList.toggle("opacity-60", loading);
|
|
const label = button.querySelector(".font-body-md, .text-body-md");
|
|
if (label) {
|
|
label.textContent = loading ? "Rotating..." : "Rotate MQTT Credential";
|
|
}
|
|
});
|
|
};
|
|
|
|
const showCredentialModal = (credential) => {
|
|
const username = credential?.mqtt_username || "";
|
|
const password = credential?.mqtt_password || "";
|
|
latestCredentialCommand = `sudo mosquitto_passwd -b /etc/mosquitto/passwd ${shellQuote(username)} ${shellQuote(password)}`;
|
|
setText(els.credentialModalUsername, username);
|
|
setText(els.credentialModalPassword, password);
|
|
setText(els.credentialModalCommand, latestCredentialCommand);
|
|
credentialModal?.classList.remove("hidden");
|
|
credentialModal?.classList.add("flex");
|
|
};
|
|
|
|
const closeCredentialModal = () => {
|
|
credentialModal?.classList.add("hidden");
|
|
credentialModal?.classList.remove("flex");
|
|
setText(els.credentialModalPassword, "-");
|
|
latestCredentialCommand = "";
|
|
};
|
|
|
|
const copyText = async (value) => {
|
|
if (!value || !navigator.clipboard) {
|
|
return;
|
|
}
|
|
await navigator.clipboard.writeText(value);
|
|
};
|
|
|
|
const appendStreamLine = (message, className = "text-blue-400") => {
|
|
if (!stream) {
|
|
return;
|
|
}
|
|
const p = document.createElement("pre");
|
|
p.className = className;
|
|
p.classList.add("whitespace-pre-wrap", "break-words", "leading-5");
|
|
p.textContent = `[${formatClock(Date.now())}] ${message}`;
|
|
stream.appendChild(p);
|
|
stream.scrollTop = stream.scrollHeight;
|
|
};
|
|
|
|
const setButtonLoading = (button, loading, label) => {
|
|
if (!button) {
|
|
return;
|
|
}
|
|
if (!button.dataset.originalHtml) {
|
|
button.dataset.originalHtml = button.innerHTML;
|
|
}
|
|
button.disabled = loading;
|
|
button.classList.toggle("opacity-60", loading);
|
|
if (loading && label) {
|
|
button.innerHTML = `<span class="material-symbols-outlined text-[18px]">sync</span>${label}`;
|
|
} else if (!loading) {
|
|
button.innerHTML = button.dataset.originalHtml;
|
|
}
|
|
};
|
|
|
|
const closeConfirm = (value) => {
|
|
confirmModal?.classList.add("hidden");
|
|
confirmModal?.classList.remove("flex");
|
|
if (confirmResolver) {
|
|
confirmResolver(Boolean(value));
|
|
confirmResolver = null;
|
|
}
|
|
};
|
|
|
|
const confirmAction = ({ title, message, buttonLabel = "Continue" }) => {
|
|
setText(confirmTitle, title);
|
|
setText(confirmMessage, message);
|
|
setText(confirmSubmit, buttonLabel);
|
|
confirmModal?.classList.remove("hidden");
|
|
confirmModal?.classList.add("flex");
|
|
confirmCancel?.focus();
|
|
return new Promise((resolve) => {
|
|
confirmResolver = resolve;
|
|
});
|
|
};
|
|
|
|
const buildQrPreviewPayload = () => ({
|
|
header: {
|
|
category: 4
|
|
},
|
|
data: {
|
|
"qr-url": `https://sms.bizone.id/pay/test/${encodeURIComponent(currentDevice?.serial_number || activeDeviceId || "soundbox")}`,
|
|
amount: 1000,
|
|
"expire-seconds": 60
|
|
}
|
|
});
|
|
|
|
const renderFallbackQrPreviewGrid = (qrUrl) => {
|
|
if (!qrPreviewGrid) {
|
|
return;
|
|
}
|
|
const seed = String(qrUrl || activeDeviceId || currentDevice?.device_code || "soundbox");
|
|
qrPreviewGrid.innerHTML = "";
|
|
qrPreviewGrid.className = "mx-auto my-4 grid h-40 w-40 grid-cols-9 grid-rows-9 gap-1 rounded-lg bg-white p-2";
|
|
for (let index = 0; index < 81; index += 1) {
|
|
const char = seed.charCodeAt(index % seed.length) || 37;
|
|
const dark = index < 9 || index % 9 === 0 || ((char + index * 7) % 5 < 2);
|
|
const cell = document.createElement("span");
|
|
cell.className = `${dark ? "bg-slate-950" : "bg-white"} rounded-[2px]`;
|
|
qrPreviewGrid.appendChild(cell);
|
|
}
|
|
};
|
|
|
|
const renderQrPreviewCode = (qrUrl) => {
|
|
if (!qrPreviewGrid) {
|
|
return;
|
|
}
|
|
qrPreviewGrid.innerHTML = "";
|
|
qrPreviewGrid.className = "mx-auto my-4 flex h-40 w-40 items-center justify-center rounded-lg bg-white p-2";
|
|
const image = document.createElement("img");
|
|
image.alt = "QR code preview";
|
|
image.className = "h-full w-full object-contain";
|
|
image.src = `https://api.qrserver.com/v1/create-qr-code/?size=192x192&margin=8&data=${encodeURIComponent(qrUrl)}`;
|
|
image.addEventListener("error", () => renderFallbackQrPreviewGrid(qrUrl), { once: true });
|
|
qrPreviewGrid.appendChild(image);
|
|
};
|
|
|
|
const openQrPreview = () => {
|
|
const payload = buildQrPreviewPayload();
|
|
renderQrPreviewCode(payload.data["qr-url"]);
|
|
setText(qrPreviewAmount, new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
maximumFractionDigits: 0
|
|
}).format(payload.data.amount));
|
|
setText(qrPreviewDevice, currentDevice?.device_code || currentDevice?.serial_number || activeDeviceId || "-");
|
|
setText(qrPreviewCommandPath, els.dynamicQrCommandPath?.textContent || "MQTT");
|
|
setText(qrPreviewMode, els.dynamicQrMode?.textContent || "dynamic");
|
|
setText(qrPreviewPayload, JSON.stringify(payload, null, 2));
|
|
qrPreviewModal?.classList.remove("hidden");
|
|
qrPreviewModal?.classList.add("flex");
|
|
};
|
|
|
|
const closeQrPreview = () => {
|
|
qrPreviewModal?.classList.add("hidden");
|
|
qrPreviewModal?.classList.remove("flex");
|
|
};
|
|
|
|
const sendDeviceCommand = async (command, payload = {}, button = null) => {
|
|
if (!activeDeviceId) {
|
|
return null;
|
|
}
|
|
setButtonLoading(button, true, "Sending...");
|
|
try {
|
|
const result = await api.createDeviceCommand(activeDeviceId, { command, payload });
|
|
appendStreamLine(`SEND: ${JSON.stringify({ command, payload, command_id: result.id })}`);
|
|
return result;
|
|
} catch (error) {
|
|
appendStreamLine(`ERROR: ${error?.message || `Unable to send ${command}`}`, "text-danger");
|
|
throw error;
|
|
} finally {
|
|
setButtonLoading(button, false);
|
|
}
|
|
};
|
|
|
|
const rotateCredential = async () => {
|
|
if (!activeDeviceId) {
|
|
return;
|
|
}
|
|
setRotateLoading(true);
|
|
try {
|
|
const result = await api.rotateDeviceCredential(activeDeviceId);
|
|
renderCredentialSummary(result.device);
|
|
showCredentialModal(result.credential);
|
|
} catch (error) {
|
|
console.error("[device detail] credential rotate failed", error);
|
|
setText(els.credentialStatus, "ROTATE FAILED");
|
|
} finally {
|
|
setRotateLoading(false);
|
|
}
|
|
};
|
|
|
|
const loadConfigStatus = async () => {
|
|
if (!activeDeviceId) {
|
|
return;
|
|
}
|
|
try {
|
|
const status = await api.getDeviceConfigStatus(activeDeviceId);
|
|
renderConfigStatus(status);
|
|
} catch (error) {
|
|
setText(els.configDetail, "Unable to load config status.");
|
|
if (els.configRetry) {
|
|
els.configRetry.disabled = true;
|
|
}
|
|
}
|
|
};
|
|
|
|
const loadBindingDetails = async (device) => {
|
|
const binding = device?.binding_summary || {};
|
|
let merchantName = binding.merchant_id || "Unbound";
|
|
let merchantCode = merchantName;
|
|
let bindingDate = binding.created_at || device.created_at || device.updated_at;
|
|
|
|
if (binding.merchant_id) {
|
|
try {
|
|
const merchant = await api.getMerchant(binding.merchant_id);
|
|
merchantName = merchant.legal_name || merchant.brand_name || merchantName;
|
|
merchantCode = merchant.merchant_code || binding.merchant_id;
|
|
} catch (error) {
|
|
console.warn("[device detail] merchant lookup failed", error);
|
|
}
|
|
}
|
|
|
|
let outletName = "";
|
|
if (binding.outlet_id) {
|
|
try {
|
|
const outlet = await api.getOutlet(binding.outlet_id);
|
|
outletName = outlet.name || outlet.outlet_name || outlet.outlet_code || "";
|
|
} catch (error) {
|
|
outletName = "";
|
|
}
|
|
}
|
|
const name = outletName ? `${merchantName} - ${outletName}` : merchantName;
|
|
setText(els.bindingMerchant, name);
|
|
setText(els.bindingMerchantId, merchantCode);
|
|
setText(els.bindingSince, formatDateTime(bindingDate, "-"));
|
|
};
|
|
|
|
const loadDevice = async ({ preserveEventView = false } = {}) => {
|
|
try {
|
|
api.requireToken();
|
|
let selectedDeviceId = deviceId;
|
|
if (!selectedDeviceId) {
|
|
const devices = await api.listDevices();
|
|
selectedDeviceId = Array.isArray(devices) && devices.length ? devices[0].id : "";
|
|
}
|
|
activeDeviceId = selectedDeviceId;
|
|
|
|
if (!selectedDeviceId) {
|
|
setText(els.breadcrumbCode, "Missing device_id");
|
|
setText(els.title, "Missing device");
|
|
return;
|
|
}
|
|
|
|
const [device, heartbeatResponse] = await Promise.all([
|
|
api.getDevice(selectedDeviceId),
|
|
(async () => {
|
|
try {
|
|
return await api.getDeviceHeartbeats(selectedDeviceId);
|
|
} catch (error) {
|
|
console.warn("[device detail] heartbeat fetch failed", error);
|
|
return [];
|
|
}
|
|
})()
|
|
]);
|
|
const heartbeats = Array.isArray(heartbeatResponse)
|
|
? heartbeatResponse
|
|
: Array.isArray(heartbeatResponse?.heartbeats)
|
|
? heartbeatResponse.heartbeats
|
|
: [];
|
|
currentDevice = device;
|
|
currentHeartbeats = heartbeats;
|
|
if (!preserveEventView) {
|
|
showingAllEvents = false;
|
|
}
|
|
|
|
const serialNumber = device.serial_number || device.device_code || device.code || device.id || "Unknown Device";
|
|
const deviceCode = device.device_code || device.code || device.id || "-";
|
|
setText(els.breadcrumbCode, serialNumber);
|
|
setText(els.title, serialNumber);
|
|
setText(els.model, device.model || device.device_model || "Unknown model");
|
|
setText(els.serialNumber, `Code: ${deviceCode}`);
|
|
setText(els.location, device.location || device.last_known_city || "Unknown");
|
|
|
|
const latest = Array.isArray(heartbeats) && heartbeats.length ? heartbeats[0] : null;
|
|
setText(
|
|
els.lastSeen,
|
|
latest
|
|
? `Last seen ${formatDateTime(latest.timestamp || latest.ts || latest.created_at || latest.updated_at, "No heartbeat")}`
|
|
: "Last seen unavailable"
|
|
);
|
|
|
|
const latestMetric = extractHeartbeatMetrics(latest);
|
|
setDerivedStatus(device, heartbeats);
|
|
renderHealthSummary(device.health_summary);
|
|
renderDynamicQrPanel(device);
|
|
renderCredentialSummary(device);
|
|
setText(
|
|
els.firmwareVersion,
|
|
device.firmware_version || device.fw_version || device.firmware || "-"
|
|
);
|
|
setText(els.firmwareStatus, device.communication_mode || "Operational");
|
|
renderSignalStatus(latestMetric.signal, latestMetric.battery, latestMetric.status);
|
|
renderStream(heartbeats);
|
|
renderEvents(heartbeats, showingAllEvents);
|
|
if (viewAllEventsBtn) {
|
|
viewAllEventsBtn.textContent = heartbeats.length > 6 ? "View All Events" : "All Events Shown";
|
|
viewAllEventsBtn.disabled = heartbeats.length <= 6;
|
|
}
|
|
await loadBindingDetails(device);
|
|
await loadConfigStatus();
|
|
} catch (error) {
|
|
console.error("[device detail] failed loading", error);
|
|
setText(els.title, "Unable to load device");
|
|
}
|
|
};
|
|
|
|
const startLiveRefresh = () => {
|
|
if (liveRefreshTimer) {
|
|
window.clearInterval(liveRefreshTimer);
|
|
}
|
|
liveRefreshTimer = window.setInterval(() => {
|
|
if (document.visibilityState === "visible") {
|
|
loadDevice({ preserveEventView: true });
|
|
}
|
|
}, 10000);
|
|
};
|
|
|
|
refreshBtn?.addEventListener("click", () => loadDevice());
|
|
rotateCredentialButtons.forEach((button) => button.addEventListener("click", rotateCredential));
|
|
credentialModalClose?.addEventListener("click", closeCredentialModal);
|
|
credentialModalDone?.addEventListener("click", closeCredentialModal);
|
|
credentialModal?.addEventListener("click", (event) => {
|
|
if (event.target === credentialModal) {
|
|
closeCredentialModal();
|
|
}
|
|
});
|
|
credentialCopyUsername?.addEventListener("click", () => copyText(els.credentialModalUsername?.textContent || ""));
|
|
credentialCopyPassword?.addEventListener("click", () => copyText(els.credentialModalPassword?.textContent || ""));
|
|
credentialCopyCommand?.addEventListener("click", () => copyText(latestCredentialCommand));
|
|
els.configRetry?.addEventListener("click", async () => {
|
|
if (!activeDeviceId || !els.configRetry) {
|
|
return;
|
|
}
|
|
els.configRetry.disabled = true;
|
|
els.configRetry.textContent = "Retrying...";
|
|
try {
|
|
await api.retryDeviceConfigPush(activeDeviceId, {});
|
|
await loadConfigStatus();
|
|
} catch (error) {
|
|
try {
|
|
await api.retryDeviceConfigPush(activeDeviceId, { force: true });
|
|
await loadConfigStatus();
|
|
} catch (retryError) {
|
|
els.configRetry.textContent = "Retry Failed";
|
|
}
|
|
}
|
|
});
|
|
els.dynamicQrSendTest?.addEventListener("click", () => {
|
|
sendDeviceCommand("dynamic_qr.display", {
|
|
...buildQrPreviewPayload(),
|
|
source: "device_detail"
|
|
}, els.dynamicQrSendTest);
|
|
});
|
|
clearBtn?.addEventListener("click", () => {
|
|
if (stream) {
|
|
stream.innerHTML = '<p class="text-slate-500">--- CONSOLE CLEARED ---</p>';
|
|
}
|
|
});
|
|
const copyStream = async () => {
|
|
if (!stream || !navigator.clipboard) {
|
|
return;
|
|
}
|
|
try {
|
|
await navigator.clipboard.writeText(stream.textContent || "");
|
|
appendStreamLine("INFO: payload stream copied to clipboard", "text-slate-400");
|
|
} catch (error) {
|
|
console.warn("[device detail] copy failed", error);
|
|
}
|
|
};
|
|
copyPayloadButton?.addEventListener("click", copyStream);
|
|
exportBtn?.addEventListener("click", async () => {
|
|
await copyStream();
|
|
});
|
|
viewAllEventsBtn?.addEventListener("click", () => {
|
|
showingAllEvents = !showingAllEvents;
|
|
renderEvents(currentHeartbeats, showingAllEvents);
|
|
viewAllEventsBtn.textContent = showingAllEvents ? "Show Recent Events" : "View All Events";
|
|
});
|
|
rebootButton?.addEventListener("click", () => sendDeviceCommand("device.reboot", { requested_from: "device_detail" }, rebootButton));
|
|
poweroffButton?.addEventListener("click", async () => {
|
|
const confirmed = await confirmAction({
|
|
title: "Power off device",
|
|
message: `This will send a power-off command to ${currentDevice?.serial_number || activeDeviceId || "this device"}. The device may stop reporting until manually powered on again.`,
|
|
buttonLabel: "Power Off"
|
|
});
|
|
if (!confirmed) {
|
|
return;
|
|
}
|
|
await sendDeviceCommand("device.poweroff", { requested_from: "device_detail" }, poweroffButton);
|
|
});
|
|
updateFirmwareButton?.addEventListener("click", () => sendDeviceCommand("firmware.update", {
|
|
requested_from: "device_detail",
|
|
target_version: currentDevice?.firmware_version || "latest"
|
|
}, updateFirmwareButton));
|
|
unbindButton?.addEventListener("click", async () => {
|
|
const confirmed = await confirmAction({
|
|
title: "Unbind merchant",
|
|
message: "This will remove the active merchant/outlet/terminal binding from this device.",
|
|
buttonLabel: "Unbind"
|
|
});
|
|
if (!confirmed || !activeDeviceId) {
|
|
return;
|
|
}
|
|
setButtonLoading(unbindButton, true, "Unbinding...");
|
|
try {
|
|
await api.unbindDevice(activeDeviceId);
|
|
appendStreamLine("INFO: device merchant binding removed", "text-slate-400");
|
|
await loadDevice();
|
|
} catch (error) {
|
|
appendStreamLine(`ERROR: ${error?.message || "Unable to unbind device"}`, "text-danger");
|
|
} finally {
|
|
setButtonLoading(unbindButton, false);
|
|
}
|
|
});
|
|
decommissionButton?.addEventListener("click", async () => {
|
|
const confirmed = await confirmAction({
|
|
title: "Decommission device",
|
|
message: "This will mark the device inactive. It will remain in records but should no longer be treated as an active unit.",
|
|
buttonLabel: "Decommission"
|
|
});
|
|
if (!confirmed || !activeDeviceId) {
|
|
return;
|
|
}
|
|
setButtonLoading(decommissionButton, true, "Decommissioning...");
|
|
try {
|
|
await api.patchDevice(activeDeviceId, { status: "inactive" });
|
|
await sendDeviceCommand("device.decommission", { requested_from: "device_detail" });
|
|
appendStreamLine("INFO: device marked inactive", "text-slate-400");
|
|
await loadDevice();
|
|
} catch (error) {
|
|
appendStreamLine(`ERROR: ${error?.message || "Unable to decommission device"}`, "text-danger");
|
|
} finally {
|
|
setButtonLoading(decommissionButton, false);
|
|
}
|
|
});
|
|
qrPreviewOpen?.addEventListener("click", openQrPreview);
|
|
qrPreviewClose?.addEventListener("click", closeQrPreview);
|
|
qrPreviewModal?.addEventListener("click", (event) => {
|
|
if (event.target === qrPreviewModal) {
|
|
closeQrPreview();
|
|
}
|
|
});
|
|
qrPreviewSendTest?.addEventListener("click", () => {
|
|
sendDeviceCommand("dynamic_qr.display", {
|
|
...buildQrPreviewPayload(),
|
|
source: "qr_preview_modal"
|
|
}, qrPreviewSendTest);
|
|
});
|
|
changeMerchantButton?.addEventListener("click", () => {
|
|
window.location.href = `/ui/device-registry-monitoring?focus=${encodeURIComponent(activeDeviceId || "")}`;
|
|
});
|
|
notificationButton?.addEventListener("click", () => {
|
|
window.location.href = activeDeviceId
|
|
? `/ui/mqtt-trace`
|
|
: "/ui/soundbox-ops";
|
|
});
|
|
calendarButton?.addEventListener("click", () => {
|
|
document.getElementById("device-events")?.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
});
|
|
document.querySelectorAll("[data-scroll-target]").forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
const target = document.getElementById(button.getAttribute("data-scroll-target"));
|
|
target?.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
});
|
|
});
|
|
deviceSearch?.addEventListener("keydown", async (event) => {
|
|
if (event.key !== "Enter") {
|
|
return;
|
|
}
|
|
event.preventDefault();
|
|
const q = deviceSearch.value.trim().toLowerCase();
|
|
if (!q) {
|
|
return;
|
|
}
|
|
try {
|
|
const devices = await api.listDevices();
|
|
const match = (Array.isArray(devices) ? devices : []).find((device) =>
|
|
[
|
|
device.id,
|
|
device.device_code,
|
|
device.serial_number,
|
|
device.vendor,
|
|
device.model,
|
|
device.mqtt_username
|
|
].filter(Boolean).join(" ").toLowerCase().includes(q)
|
|
);
|
|
if (match) {
|
|
window.location.href = `/ui/device-technical-detail?device_id=${encodeURIComponent(match.id)}`;
|
|
} else {
|
|
appendStreamLine(`INFO: no device matched search "${q}"`, "text-slate-400");
|
|
}
|
|
} catch (error) {
|
|
appendStreamLine(`ERROR: ${error?.message || "Search failed"}`, "text-danger");
|
|
}
|
|
});
|
|
confirmCancel?.addEventListener("click", () => closeConfirm(false));
|
|
confirmSubmit?.addEventListener("click", () => closeConfirm(true));
|
|
confirmModal?.addEventListener("click", (event) => {
|
|
if (event.target === confirmModal) {
|
|
closeConfirm(false);
|
|
}
|
|
});
|
|
document.addEventListener("keydown", (event) => {
|
|
if (event.key === "Escape") {
|
|
closeQrPreview();
|
|
closeConfirm(false);
|
|
closeCredentialModal();
|
|
}
|
|
});
|
|
if (backLink) {
|
|
backLink.href = "/ui/device-registry-monitoring";
|
|
}
|
|
|
|
loadDevice();
|
|
startLiveRefresh();
|
|
})();
|
|
</script>
|
|
</body></html>
|