feat: add bluetooth device list

src/index.tsx

@@ -6,13 +6,15 @@ const jensen = new Jensen();
 
 export function Home() {
   const [files, setFiles] = useState<Jensen.FileInfo[]>([]);
+  const [devices, setDevices] = useState<Jensen.BluetoothDevice[]>([]);
+  const [greeting, setGreeting] = useState<string|null>(null);
 
   useEffect(() => {
     jensen.connect();
     jensen.onconnect = () => {
       console.log('connect successfully');
-      jensen.listFiles().then((res) => {
-        setFiles(res);
+      jensen.getDeviceInfo().then((info) => {
+        alert(info.sn + ' connected');
       });
     };
   }, []);
@@ -30,19 +32,12 @@ export function Home() {
 
   let bluetoothDevices: BluetoothDevice[] = [];
   const bluetoothScan  = async () => {
+    setDevices([]);
+    setGreeting('scan started at: ' + new Date().toLocaleString());
     let devices = await jensen.scanDevices();
-    console.log(devices);
-    bluetoothDevices = devices;
-  }
-
-  const connectBTDevice = async () => {
-    let idstr = prompt('请输入需要连接的设备序号(从0开始)：', '');
-    let did = parseInt(idstr || '');
-    if (isNaN(did)) return alert('已取消');
-    let dinfo = bluetoothDevices[did];
-    if (dinfo == null || dinfo == undefined) return alert('无效序号');
-    let r = await jensen.connectBTDevice(dinfo.mac);
-    console.log(r);
+    // console.log(devices);
+    setDevices(devices);
+    setGreeting(null)
   }
 
   const disconnectBTDevice = async () => {
@@ -50,17 +45,71 @@ export function Home() {
     console.log(r);
   }
 
+  const clsBtnConnect = {
+    height: '30px',
+    padding: '0px 20px',
+    position: 'absolute',
+    right: '0px',
+    top: '3px',
+    cursor: 'pointer'
+  }
+
+  const clsBleDevice = {
+    height: '40px',
+    lineHeight: '40px', 
+    minWidth: '500px',
+    position: 'relative',
+    display: 'inline-block'
+  }
+
+  const clsBleName = {
+    fontSize: '16px',
+    fontFamily: 'consolas'
+  }
+
+  const doConnectBluetooth = async (mac:string) => {
+    // alert(mac);
+    let rst = await jensen.connectBTDevice(mac, 10);
+    alert('connect: ' + rst.result);
+  }
+
+  const getTime = async () => {
+    let time = await jensen.getTime();
+    alert(JSON.stringify(time));
+  }
+
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px', alignItems: 'center' }}>
+    <>
+    <div style={{ display: 'flex', flexDirection: 'row', gap: '16px', padding: '16px', alignItems: 'center' }}>
       <button style={{ width: '200px', height: '50px' }} onClick={() => jensen.connect()}>
-        Click to connect
+        Connect
       </button>
       <button style={{ width: '200px', height: '50px' }} onClick={getFilePart}>
         get File Part
       </button>
+      <button style={{ width: '200px', height: '50px' }} onClick={getTime}>
+        Get Time
+      </button>
       <button style={{ width : '200px', height : '50px' }} onClick={bluetoothScan}>Bluetooth Scan</button>
-      <button style={{ width : '200px', height : '50px' }} onClick={connectBTDevice}>Bluetooth Connect</button>
       <button style={{ width : '200px', height : '50px' }} onClick={disconnectBTDevice}>Bluetooth Disconnect</button>
     </div>
+    <div style={{ padding: '0px 0px 0px 30px', width: '500px' }}>
+      <h3>Bluetooth Device List: </h3>
+      {
+        greeting ? <div>{greeting}</div> : <></>
+      }
+      {
+        devices && devices.length ? (
+          devices.map((item, index) => {
+            return (
+              <div style={clsBleDevice}><span style={clsBleName}>({item.mac}) {item.name}</span><button style={clsBtnConnect} onClick={() => { doConnectBluetooth(item.mac) }}>Connect</button></div>
+            );
+          })
+        ) : (
+          <div>no devices...</div>
+        )
+      }
+    </div>
+    </>
   );
 }