add serial api

frontend/views/customer/reception.php

@@ -1,11 +1,14 @@
 <?php
+
 use frontend\components\ReceptionWidget;
+
 ?>
 <?php
- \frontend\assets\AppAsset::register($this);
+\frontend\assets\AppAsset::register($this);
 ?>
 <h1>Recepció</h1>
-<?php echo ReceptionWidget::widget( ['form' => $model, 'route' => ['customer/reception'] ] )?>
+<?php
+echo ReceptionWidget::widget(['form' => $model, 'route' => ['customer/reception']]) ?>
 <script>
     const qrcodeReader = {
         usbVendorId: 0x0c2e, usbProductId: 0x1094, name: 'qrcode'
@@ -15,6 +18,8 @@ use frontend\components\ReceptionWidget;
         usbVendorId: 0x09d8, usbProductId: 0x0420, name: 'rfid'
     };
 
+    const readers = [qrcodeReader,rfidReader];
+
     let defaultOptions = {
         device: {
             name: '',
@@ -44,15 +49,15 @@ use frontend\components\ReceptionWidget;
         value = null;
         options = null;
 
-        constructor(options){
+        constructor(options) {
             this.options = options;
         }
 
-        initialize = async () =>{
+        initialize = async () => {
             await this.connect();
         }
 
-        listen = async  (options) => {
+        listen = async (options) => {
             const port = options.port;
             console.info("listening device", options?.device?.name);
             while (port.readable) {
@@ -82,15 +87,13 @@ use frontend\components\ReceptionWidget;
             const ports = await navigator.serial.getPorts([device]);
             return ports.find(value => {
                 const info = value.getInfo();
-                return info.usbProductId === device.usbProductId
+                return info.usbVendorId === device.usbVendorId;
-                    && info.usbVendorId === device.usbVendorId;
             });
 
         }
         connect = async () => {
             const options = this.options;
             this.port = await this.getPortByDevice({
-                usbProductId: options.device.usbProductId,
                 usbVendorId: options.device.usbVendorId
             });
             if (!this.port) {
@@ -113,7 +116,6 @@ use frontend\components\ReceptionWidget;
         };
 
 
-
         isConnected = () => {
             return this.connected;
         }
@@ -142,50 +144,95 @@ use frontend\components\ReceptionWidget;
     }
 
     const ready = async () => {
+        const   pikcAPort =
+        async () =>
+        {
+            const vendors = document.getElementById('vendors');
+            const deviceGroupName = vendors.value;
+            let filters = undefined;
+            const usbVendorId =  readers.find(reader => reader.name === deviceGroupName)
+            if (deviceGroupName) {
+                let vendor = (deviceGroupName == 'rfid') ? rfidReader.usbVendorId : qrcodeReader.usbVendorId;
 
-        const qrcode = new  SerialReader({
+                filters = [{
-            ...defaultOptions,
+                    usbVendorId
-            device: qrcodeReader,
+                }];
-            onChange: (value) => {
-                console.info(value)
             }
-        });
 
-        const rfid = new  SerialReader({
+            const requestedPort = await navigator.serial
-            ...defaultOptions,
+                .requestPort({
-            device: rfidReader,
+                    filters
-            onChange: (value) => {
+                })
-                console.info(value)
-            }
-        });
 
-        await qrcode.initialize();
+        }
-        await rfid.initialize();
 
-        const btnRfid =  document.getElementById("rfid");
+    }
-        const btnQRcode = document.getElementById("qrcode");
 
-        btnRfid.addEventListener('click', async () =>{
+    const qrcode = new SerialReader({
-            await rfid.requestPair();
+        ...defaultOptions,
-        });
+        device: qrcodeReader,
+        onChange: (value) => {
+            console.info(value)
+        }
+    });
 
-        btnQRcode.addEventListener('click', async () =>{
+    const rfid = new SerialReader({
-            await qrcode.requestPair();
+        ...defaultOptions,
-        })
+        device: rfidReader,
+        onChange: (value) => {
+            console.info(value)
+        }
+    });
 
+    await qrcode.initialize();
+    await rfid.initialize();
 
+    const btnRfid = document.getElementById("rfid");
+    const btnQRcode = document.getElementById("qrcode");
+
+    btnRfid.addEventListener('click', async () => {
+        await rfid.requestPair();
+    });
+
+    btnQRcode.addEventListener('click', async () => {
+        await qrcode.requestPair();
+    })
+
+    const sleep = m => new Promise(r => setTimeout(r, m))
+    const readStatus = async (millis) => {
+        const serialPorts = await navigator.serial.getPorts();
+        const infoDiv = document.getElementById('allowed_devices');
+        infoDiv.innerHTML = '';
+        for (let port of serialPorts) {
+            const {usbVendorId, usbProductId} = port.getInfo();
+            const infoDiv = document.createElement('div');
+            infoDiv.innerHTML = '' + usbVendorId + '|' + usbProductId;
+            infoDiv.append(infoDiv);
+
+        }
+        await sleep(millis);
+        await readStatus(millis);
+    }
     }
     document.addEventListener('DOMContentLoaded', ready);
 </script>
 <div class="mt-3 ">
+    <h3>Engedélyezett eszközök</h3>
+    <div id="allowed_devices"></div>
+    <label for="vendors">Gyártók</label>
+    <select name="vendors" id="vendors" class="vendors">
+        <option value="">Mind</option>
+        <option value="qrcode">QRCode</option>
+        <option value="rfid">RFID</option>
+    </select>
 
-<button class="btn btn-primary" id="rfid">Kártya Olvasó engedélyezése</button>
+    <button class="btn btn-primary" id="rfid">Kártya Olvasó engedélyezése</button>
-<button class="btn btn-primary" id="qrcode">QRCode Olvasó engedélyezése</button>
+    <button class="btn btn-primary" id="qrcode">QRCode Olvasó engedélyezése</button>
 </div>
 
-    <?php
+<?php
 
 // echo "Timezone:" . date_default_timezone_get();
- //echo date("Y-m-d H:i");
+//echo date("Y-m-d H:i");
 
 ?>