add serial api

frontend/views/customer/reception.php

@@ -1,11 +1,14 @@
 <?php
+
 use frontend\components\ReceptionWidget;
+
 ?>
 <?php
 \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: '',
@@ -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
-                    && info.usbVendorId === device.usbVendorId;
+                return 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,6 +144,29 @@ 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;
+
+                filters = [{
+                    usbVendorId
+                }];
+            }
+
+            const requestedPort = await navigator.serial
+                .requestPort({
+                    filters
+                })
+
+        }
+
+    }
 
     const qrcode = new SerialReader({
         ...defaultOptions,
@@ -173,11 +198,33 @@ use frontend\components\ReceptionWidget;
         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="qrcode">QRCode Olvasó engedélyezése</button>