Add BLE device connection UI and quick BPM zone selection

index.html

@@ -172,6 +172,30 @@
             text-align: left;
         }
 
+        /* ---- QUICK BPM ZONES ---- */
+        .zone-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:12px 0; }
+        .zone-btn { background:#0f3460; border:1px solid #1a3a6e; border-radius:10px; color:#fff;
+            padding:10px 4px; font-size:13px; cursor:pointer; transition:0.2s;
+            display:flex; flex-direction:column; align-items:center; gap:3px; }
+        .zone-btn:hover { background:#1a4070; border-color:#4ecca3; }
+        .zone-btn.active-zone { border-color:#4ecca3; background:#0a2844; }
+        .zone-btn .zone-emoji { font-size:20px; }
+        .zone-btn .zone-label { font-size:10px; color:#a2a2bd; }
+        .zone-btn .zone-bpm { font-size:12px; color:#4ecca3; font-weight:bold; }
+        .auto-row { display:flex; align-items:center; justify-content:center; gap:10px;
+            margin-top:8px; font-size:13px; color:#a2a2bd; }
+        .toggle-wrap { position:relative; width:36px; height:20px; }
+        .toggle-wrap input { opacity:0; width:100%; height:100%; position:absolute; cursor:pointer; margin:0; z-index:2; }
+        .toggle-track { position:absolute; inset:0; background:#1a3a6e; border-radius:10px; transition:background 0.2s; }
+        .toggle-wrap input:checked ~ .toggle-track { background:#4ecca3; }
+        .toggle-thumb { position:absolute; top:3px; left:3px; width:14px; height:14px;
+            background:#fff; border-radius:50%; transition:transform 0.2s; pointer-events:none; }
+        .toggle-wrap input:checked ~ .toggle-thumb { transform:translateX(16px); }
+        #refresh-interval-wrap { display:none; align-items:center; gap:6px; }
+        #refresh-interval-wrap.visible { display:flex; }
+        #refresh-sec { width:52px; background:#0f3460; border:1px solid #4ecca3;
+            border-radius:6px; color:#fff; font-size:14px; text-align:center; padding:3px; }
+
         /* ---- NOTICE ---- */
         .notice {
             background: #0f2040;
@@ -184,6 +208,147 @@
             text-align: left;
         }
         .notice strong { color: #e94560; }
+
+        /* ---- BLE DEVICE CARD ---- */
+        #ble-idle { }
+        #ble-card { display:none; }
+
+        .scan-hint {
+            font-size: 12px; color: #4a5a7a; margin-top: 8px; font-style: italic;
+        }
+
+        /* Scanning animation */
+        .scan-ring-wrap {
+            display: flex; align-items: center; justify-content: center;
+            gap: 14px; margin: 12px 0 8px;
+        }
+        .scan-ring {
+            width: 44px; height: 44px; border-radius: 50%;
+            border: 3px solid transparent;
+            border-top-color: #4ecca3;
+            border-right-color: #4ecca366;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin { to { transform: rotate(360deg); } }
+        .scan-label { color: #4ecca3; font-size: 14px; font-weight: bold; }
+
+        /* Connected device card */
+        .device-card {
+            background: linear-gradient(135deg, #0a2040 0%, #0f3060 100%);
+            border: 1px solid #4ecca355;
+            border-radius: 14px;
+            padding: 16px 18px;
+            margin: 10px 0;
+            display: flex;
+            align-items: center;
+            gap: 14px;
+            text-align: left;
+            position: relative;
+            overflow: hidden;
+        }
+        .device-card::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(ellipse at 20% 50%, #4ecca318 0%, transparent 60%);
+            pointer-events: none;
+        }
+        .device-icon-wrap {
+            width: 52px; height: 52px; border-radius: 50%;
+            background: linear-gradient(135deg, #0f3460, #1a4a80);
+            border: 2px solid #4ecca355;
+            display: flex; align-items: center; justify-content: center;
+            font-size: 26px; flex-shrink: 0;
+        }
+        .device-info { flex: 1; min-width: 0; }
+        .device-name {
+            color: #fff; font-size: 15px; font-weight: bold;
+            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+        }
+        .device-sub {
+            color: #a2a2bd; font-size: 12px; margin-top: 2px;
+        }
+        .device-badges {
+            display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap;
+        }
+        .badge {
+            background: #0f3460; border: 1px solid #1a4a80;
+            border-radius: 20px; padding: 2px 9px;
+            font-size: 11px; color: #a2a2bd;
+        }
+        .badge.connected {
+            background: #0a3020; border-color: #4ecca355; color: #4ecca3;
+        }
+        .badge.subscribing {
+            background: #2a1a00; border-color: #e9a02055; color: #e9a020;
+        }
+        .badge.no-hr {
+            background: #300a0a; border-color: #e9456055; color: #e94560;
+        }
+
+        /* Signal bars */
+        .signal-wrap {
+            display: flex; align-items: flex-end; gap: 2px; height: 18px;
+        }
+        .sig-bar {
+            width: 4px; border-radius: 2px; background: #4ecca3;
+            opacity: 0.25; transition: opacity 0.4s;
+        }
+        .sig-bar.active { opacity: 1; }
+        .sig-bar:nth-child(1) { height: 5px; }
+        .sig-bar:nth-child(2) { height: 9px; }
+        .sig-bar:nth-child(3) { height: 13px; }
+        .sig-bar:nth-child(4) { height: 18px; }
+
+        /* Disconnect button */
+        #btn-disconnect {
+            background: transparent;
+            border: 1px solid #e9456066;
+            color: #e94560;
+            padding: 6px 13px;
+            font-size: 12px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-weight: bold;
+            transition: 0.2s;
+            flex-shrink: 0;
+        }
+        #btn-disconnect:hover {
+            background: #e9456020; border-color: #e94560;
+        }
+
+        /* Reconnect button (shown when disconnected) */
+        #btn-reconnect {
+            display: none;
+            background: #4ecca322;
+            border: 1px solid #4ecca355;
+            color: #4ecca3;
+            padding: 6px 13px;
+            font-size: 12px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-weight: bold;
+            transition: 0.2s;
+            flex-shrink: 0;
+        }
+        #btn-reconnect:hover { background: #4ecca344; }
+
+        /* Pulse dot (connection alive indicator) */
+        .pulse-dot {
+            width: 8px; height: 8px; border-radius: 50%;
+            background: #4ecca3;
+            box-shadow: 0 0 0 0 #4ecca3aa;
+            animation: pulseDot 1.8s ease infinite;
+            flex-shrink: 0;
+        }
+        @keyframes pulseDot {
+            0%   { box-shadow: 0 0 0 0 #4ecca3aa; }
+            70%  { box-shadow: 0 0 0 7px #4ecca300; }
+            100% { box-shadow: 0 0 0 0 #4ecca300; }
+        }
+        .pulse-dot.dead {
+            background: #e94560; box-shadow: none; animation: none;
+        }
     </style>
 </head>
 <body>
@@ -201,24 +366,107 @@
 
     <!-- TAB: BLE -->
     <div id="tab-ble" class="tab-panel active">
-        <div class="notice">
-            <strong>Lưu ý Xiaomi / Samsung:</strong> Đồng hồ thông minh dùng giao thức riêng, 
-            không truyền nhịp tim qua BLE chuẩn. Thử kết nối — nếu không ra BPM, 
-            hãy dùng tab <em>Nhập thủ công</em> hoặc một chest-strap HR monitor (Polar, Garmin…).
+
+        <!-- STATE: idle / scanning -->
+        <div id="ble-idle">
+            <div class="notice">
+                <strong>Galaxy Watch / Xiaomi / Huawei:</strong> Các đồng hồ này dùng giao thức riêng,
+                <em>không expose Heart Rate qua Web Bluetooth</em>.
+                Dùng tab <strong>Nhập thủ công</strong> hoặc chest-strap Polar/Garmin.
+            </div>
+            <div class="button-group">
+                <button id="btn-connect">📡 Quét thiết bị BLE</button>
+            </div>
+            <p class="scan-hint">Trình duyệt sẽ mở hộp thoại chọn thiết bị Bluetooth</p>
         </div>
-        <div class="button-group">
-            <button id="btn-connect">1. Kết nối đồng hồ</button>
+
+        <!-- STATE: scanning spinner (shown briefly) -->
+        <div id="ble-scanning" style="display:none; padding:8px 0 4px;">
+            <div class="scan-ring-wrap">
+                <div class="scan-ring"></div>
+                <span class="scan-label">Đang kết nối…</span>
+            </div>
         </div>
+
+        <!-- STATE: connected device card -->
+        <div id="ble-card" style="display:none;">
+            <div class="device-card">
+                <div class="device-icon-wrap" id="dev-icon">⌚</div>
+                <div class="device-info">
+                    <div class="device-name" id="dev-name">Unknown Device</div>
+                    <div class="device-sub" id="dev-sub">Đang kiểm tra characteristics…</div>
+                    <div class="device-badges">
+                        <span class="badge connected" id="badge-conn">● Đã kết nối</span>
+                        <span class="badge" id="badge-hr" style="display:none"></span>
+                        <span class="badge" id="badge-svc"></span>
+                    </div>
+                </div>
+                <div style="display:flex; flex-direction:column; align-items:center; gap:8px;">
+                    <div class="signal-wrap" id="signal-bars">
+                        <div class="sig-bar active"></div>
+                        <div class="sig-bar active"></div>
+                        <div class="sig-bar active"></div>
+                        <div class="sig-bar"></div>
+                    </div>
+                    <div class="pulse-dot" id="pulse-dot"></div>
+                </div>
+                <div style="display:flex; flex-direction:column; gap:6px; align-items:flex-end;">
+                    <button id="btn-disconnect">Ngắt kết nối</button>
+                    <button id="btn-reconnect">🔄 Kết nối lại</button>
+                </div>
+            </div>
+        </div>
+
     </div>
 
     <!-- TAB: MANUAL -->
     <div id="tab-manual" class="tab-panel">
-        <p style="color:#a2a2bd; font-size:14px; margin-bottom:10px;">
-            Nhập BPM từ app đồng hồ (Mi Fitness, Samsung Health…) rồi nhấn Set.
+        <p style="color:#a2a2bd; font-size:13px; margin-bottom:6px;">
+            Nhìn BPM trên Samsung Health → chọn vùng hoặc nhập chính xác bên dưới.
         </p>
+
+        <!-- Quick zone buttons -->
+        <div class="zone-grid">
+            <button class="zone-btn" onclick="setZone(55,'Nghỉ ngơi')">
+                <span class="zone-emoji">😴</span>
+                <span class="zone-label">Nghỉ ngơi</span>
+                <span class="zone-bpm">~55 BPM</span>
+            </button>
+            <button class="zone-btn" onclick="setZone(70,'Nhẹ nhàng')">
+                <span class="zone-emoji">🚶</span>
+                <span class="zone-label">Nhẹ nhàng</span>
+                <span class="zone-bpm">~70 BPM</span>
+            </button>
+            <button class="zone-btn" onclick="setZone(95,'Vận động')">
+                <span class="zone-emoji">🏃</span>
+                <span class="zone-label">Vận động</span>
+                <span class="zone-bpm">~95 BPM</span>
+            </button>
+            <button class="zone-btn" onclick="setZone(130,'Cường độ cao')">
+                <span class="zone-emoji">🔥</span>
+                <span class="zone-label">Cường độ cao</span>
+                <span class="zone-bpm">~130 BPM</span>
+            </button>
+        </div>
+
+        <!-- Precise input -->
         <div class="manual-group">
-            <input type="number" id="manual-bpm-input" min="30" max="220" value="75" />
-            <button id="btn-manual-set" onclick="setManualBpm()">Set BPM</button>
+            <input type="number" id="manual-bpm-input" min="30" max="220" value="75"
+                onkeydown="if(event.key==='Enter') setManualBpm()" />
+            <button id="btn-manual-set" onclick="setManualBpm()">Áp dụng</button>
+        </div>
+
+        <!-- Auto refresh reminder -->
+        <div class="auto-row">
+            <label class="toggle-wrap">
+                <input type="checkbox" id="auto-refresh-toggle" onchange="toggleAutoRefresh(this.checked)">
+                <span class="toggle-track"></span>
+                <span class="toggle-thumb"></span>
+            </label>
+            <span>Nhắc cập nhật BPM mỗi</span>
+            <span id="refresh-interval-wrap">
+                <input type="number" id="refresh-sec" min="10" max="300" value="30"> giây
+            </span>
         </div>
     </div>
 
@@ -322,6 +570,32 @@
         applyBpm(val, 'Nhập thủ công');
     }
 
+    function setZone(bpm, label) {
+        document.getElementById('manual-bpm-input').value = bpm;
+        bpmHistory = [];
+        applyBpm(bpm, label);
+        // Highlight active zone
+        document.querySelectorAll('.zone-btn').forEach(b => b.classList.remove('active-zone'));
+        event.currentTarget.classList.add('active-zone');
+    }
+
+    let autoRefreshTimer = null;
+    function toggleAutoRefresh(on) {
+        const wrap = document.getElementById('refresh-interval-wrap');
+        wrap.classList.toggle('visible', on);
+        if (autoRefreshTimer) { clearInterval(autoRefreshTimer); autoRefreshTimer = null; }
+        if (on) {
+            const sec = parseInt(document.getElementById('refresh-sec').value, 10) || 30;
+            autoRefreshTimer = setInterval(() => {
+                setStatus(`⏰ Hãy kiểm tra BPM trên Samsung Health và cập nhật!`, 'info');
+                // Flash BPM display
+                bpmDisplay.style.opacity = '0.4';
+                setTimeout(() => bpmDisplay.style.opacity = '1', 600);
+            }, sec * 1000);
+            setStatus(`Sẽ nhắc cập nhật BPM mỗi ${sec} giây`, 'ok');
+        }
+    }
+
     // ===============================
     // PARSE CHUẨN BLE Heart Rate (0x2A37)
     // ===============================
@@ -371,10 +645,76 @@
         }
     }
 
+    // ===============================
+    // BLE STATE
+    // ===============================
+    let bleDevice   = null;
+    let bleServer   = null;
+    let bleSubCount = 0;
+
+    const bleIdle      = document.getElementById('ble-idle');
+    const bleScanning  = document.getElementById('ble-scanning');
+    const bleCard      = document.getElementById('ble-card');
+    const devIcon      = document.getElementById('dev-icon');
+    const devName      = document.getElementById('dev-name');
+    const devSub       = document.getElementById('dev-sub');
+    const badgeConn    = document.getElementById('badge-conn');
+    const badgeHr      = document.getElementById('badge-hr');
+    const badgeSvc     = document.getElementById('badge-svc');
+    const pulseDot     = document.getElementById('pulse-dot');
+    const btnDisconnect = document.getElementById('btn-disconnect');
+    const btnReconnect  = document.getElementById('btn-reconnect');
+
+    function guessDeviceIcon(name) {
+        if (!name) return '📡';
+        const n = name.toLowerCase();
+        if (n.includes('polar') || n.includes('hrm') || n.includes('chest')) return '💓';
+        if (n.includes('garmin')) return '🏃';
+        if (n.includes('galaxy') || n.includes('watch') || n.includes('samsung')) return '⌚';
+        if (n.includes('mi band') || n.includes('xiaomi') || n.includes('amazfit')) return '📿';
+        if (n.includes('fitbit')) return '💪';
+        return '⌚';
+    }
+
+    function showBleCard(name, subText) {
+        bleIdle.style.display     = 'none';
+        bleScanning.style.display = 'none';
+        bleCard.style.display     = 'block';
+        devIcon.textContent       = guessDeviceIcon(name);
+        devName.textContent       = name || 'Unknown Device';
+        devSub.textContent        = subText || '';
+    }
+
+    function setBleConnected() {
+        badgeConn.textContent  = '● Đã kết nối';
+        badgeConn.className    = 'badge connected';
+        pulseDot.classList.remove('dead');
+        btnDisconnect.style.display = 'inline-block';
+        btnReconnect.style.display  = 'none';
+    }
+
+    function setBleDisconnected() {
+        badgeConn.textContent  = '○ Mất kết nối';
+        badgeConn.className    = 'badge no-hr';
+        pulseDot.classList.add('dead');
+        btnDisconnect.style.display = 'none';
+        btnReconnect.style.display  = 'inline-block';
+        // Animate signal bars off
+        document.querySelectorAll('.sig-bar').forEach(b => b.classList.remove('active'));
+    }
+
+    function resetBleUI() {
+        bleCard.style.display     = 'none';
+        bleScanning.style.display = 'none';
+        bleIdle.style.display     = 'block';
+        badgeHr.style.display     = 'none';
+        bleDevice = null; bleServer = null; bleSubCount = 0;
+    }
+
     // ===============================
     // BLE CONNECT — auto scan tất cả services
     // ===============================
-    btnConnect.addEventListener('click', async () => {
+    async function doBleConnect() {
         if (!navigator.bluetooth) {
             setStatus('Trình duyệt không hỗ trợ Web Bluetooth!', 'err');
             return;
@@ -384,49 +724,47 @@
             setStatus('Đang mở hộp thoại BLE…', 'info');
             log('Bắt đầu scan BLE...');
 
+            // Show scanning state while picker is open
+            bleIdle.style.display     = 'none';
+            bleScanning.style.display = 'block';
+
             const device = await navigator.bluetooth.requestDevice({
                 acceptAllDevices: true,
                 optionalServices: [
-                    // Chuẩn BLE
-                    'heart_rate',
-                    'battery_service',
-                    'device_information',
-                    'generic_access',
-                    // Xiaomi Mi Band 4/5/6/7 — proprietary
+                    'heart_rate', 'battery_service', 'device_information', 'generic_access',
                     '0000fee0-0000-1000-8000-00805f9b34fb',
                     '0000fee1-0000-1000-8000-00805f9b34fb',
-                    // Xiaomi Mi Band 7 / Amazfit
                     '0000181d-0000-1000-8000-00805f9b34fb',
-                    // Samsung Galaxy Watch — proprietary health
                     '0000fd00-0000-1000-8000-00805f9b34fb',
-                    // Generic HR secondary
                     '0000180d-0000-1000-8000-00805f9b34fb',
                 ]
             });
 
+            bleDevice = device;
             log(`Device: ${device.name || '(no name)'} id=${device.id}`);
+            showBleCard(device.name, 'Đang kết nối GATT…');
             setStatus('Đang kết nối GATT…', 'info');
 
-            const server   = await device.gatt.connect();
-            const services = await server.getPrimaryServices();
+            // Listen for unexpected disconnects
+            device.addEventListener('gattserverdisconnected', onGattDisconnected);
+
+            bleServer = await device.gatt.connect();
+            const services = await bleServer.getPrimaryServices();
             log(`Tìm thấy ${services.length} service(s)`);
 
+            badgeSvc.textContent = `${services.length} services`;
+
             let subscribed = 0;
 
             for (const svc of services) {
                 log(`Service: ${svc.uuid}`);
                 let chars;
-                try {
-                    chars = await svc.getCharacteristics();
-                } catch (e) {
-                    log(`  Không đọc được characteristics: ${e.message}`);
-                    continue;
-                }
+                try { chars = await svc.getCharacteristics(); }
+                catch (e) { log(`  Không đọc được chars: ${e.message}`); continue; }
 
                 for (const char of chars) {
                     const props = char.properties;
                     log(`  Char: ${char.uuid} [notify=${props.notify} indicate=${props.indicate} read=${props.read}]`);
-
                     if (props.notify || props.indicate) {
                         try {
                             await char.startNotifications();
@@ -434,27 +772,104 @@
                                 (ev) => handleCharData(ev, char.uuid, svc.uuid));
                             log(`  ✅ Subscribed: ${char.uuid}`);
                             subscribed++;
-                        } catch (e) {
-                            log(`  ❌ Subscribe failed: ${e.message}`);
-                        }
+                        } catch (e) { log(`  ❌ Subscribe failed: ${e.message}`); }
                     }
                 }
             }
 
-            btnConnect.textContent = '✓ BLE Connected';
-            btnConnect.disabled    = true;
+            bleSubCount = subscribed;
+            setBleConnected();
 
             if (subscribed === 0) {
-                setStatus('Kết nối OK nhưng không có characteristic nào để subscribe. Thử tab Nhập thủ công.', 'err');
+                badgeHr.textContent   = '✗ Không có HR';
+                badgeHr.className     = 'badge no-hr';
+                badgeHr.style.display = 'inline-block';
+                devSub.textContent    = 'Không đọc được HR — thử tab Nhập thủ công';
+                setStatus('Kết nối OK nhưng thiết bị không stream HR. Thử tab Nhập thủ công.', 'err');
             } else {
-                setStatus(`Đã subscribe ${subscribed} characteristic(s), đang chờ BPM…`, 'ok');
+                badgeHr.textContent   = `♥ ${subscribed} HR char`;
+                badgeHr.className     = 'badge subscribing';
+                badgeHr.style.display = 'inline-block';
+                devSub.textContent    = `Đã subscribe ${subscribed} characteristic — đang chờ BPM…`;
+                setStatus(`Đã subscribe ${subscribed} characteristic, đang chờ BPM…`, 'ok');
             }
 
         } catch (err) {
             log(`Lỗi: ${err.message}`);
             setStatus('Lỗi BLE: ' + err.message, 'err');
+            resetBleUI();
         }
-    });
+    }
+
+    // ===============================
+    // GATT DISCONNECTED EVENT
+    // ===============================
+    function onGattDisconnected() {
+        log('⚠ GATT server disconnected (đồng hồ tự ngắt hoặc ra khỏi tầm)');
+        setStatus('⚠ Mất kết nối BLE — nhấn "Kết nối lại" để thử lại.', 'err');
+        setBleDisconnected();
+        devSub.textContent = 'Mất kết nối — ra khỏi tầm Bluetooth?';
+    }
+
+    // ===============================
+    // DISCONNECT
+    // ===============================
+    function doDisconnect() {
+        if (bleDevice && bleDevice.gatt.connected) {
+            bleDevice.gatt.disconnect();
+            log('Đã ngắt kết nối BLE theo yêu cầu');
+        }
+        setBleDisconnected();
+        devSub.textContent = 'Đã ngắt kết nối';
+        setStatus('Đã ngắt kết nối BLE.', 'info');
+    }
+
+    // ===============================
+    // RECONNECT
+    // ===============================
+    async function doReconnect() {
+        if (!bleDevice) { resetBleUI(); return; }
+        try {
+            devSub.textContent = 'Đang kết nối lại…';
+            btnReconnect.disabled = true;
+            setStatus('Đang kết nối lại GATT…', 'info');
+
+            bleServer = await bleDevice.gatt.connect();
+            const services = await bleServer.getPrimaryServices();
+            let subscribed = 0;
+
+            for (const svc of services) {
+                let chars;
+                try { chars = await svc.getCharacteristics(); } catch { continue; }
+                for (const char of chars) {
+                    const props = char.properties;
+                    if (props.notify || props.indicate) {
+                        try {
+                            await char.startNotifications();
+                            char.addEventListener('characteristicvaluechanged',
+                                (ev) => handleCharData(ev, char.uuid, svc.uuid));
+                            subscribed++;
+                        } catch {}
+                    }
+                }
+            }
+
+            bleSubCount = subscribed;
+            setBleConnected();
+            devSub.textContent = `Kết nối lại thành công — ${subscribed} char`;
+            setStatus('Kết nối lại BLE thành công!', 'ok');
+        } catch (err) {
+            log(`Reconnect failed: ${err.message}`);
+            setStatus('Kết nối lại thất bại: ' + err.message, 'err');
+            devSub.textContent = 'Kết nối lại thất bại';
+        } finally {
+            btnReconnect.disabled = false;
+        }
+    }
+
+    btnConnect.addEventListener('click', doBleConnect);
+    btnDisconnect.addEventListener('click', doDisconnect);
+    btnReconnect.addEventListener('click', doReconnect);
 
     // ===============================
     // GENERATE MUSIC