add serial api

frontend/views/customer/reception.php

@@ -6,8 +6,185 @@ use frontend\components\ReceptionWidget;
 ?>
 <h1>Recepció</h1>
 <?php echo ReceptionWidget::widget( ['form' => $model, 'route' => ['customer/reception'] ] )?>
+<script>
+    const qrcodeReader = {
+        usbVendorId: 0x0c2e, usbProductId: 0x1094, name: 'qrcode'
+    };
+
+    const rfidReader = {
+        usbVendorId: 0x09d8, usbProductId: 0x0420, name: 'rfid'
+    };
+
+    let defaultOptions = {
+        device: {
+            name: '',
+            usbVendorId: 0x0,
+            usbProductId: 0x0
+        },
+        onChange: (value) => {
+            console.info('change', value)
+        },
+        onConnect: (e) => {
+            console.info('connect', e)
+        },
+        onDisConnect: () => {
+            console.info('disconnect', e)
+        },
+        onError: () => {
+        },
+        onPairRequired: (device) => {
+            console.info('pair required', device)
+        }
+    }
+
+    class SerialReader {
+        connected = false;
+        port = null;
+        paired = false;
+        value = null;
+        options = null;
+
+        constructor(options){
+            this.options = options;
+        }
+
+        initialize = async () =>{
+            await this.connect();
+        }
+
+        listen = async  (options) => {
+            const port = options.port;
+            console.info("listening device", options?.device?.name);
+            while (port.readable) {
+                const reader = port.readable.getReader();
+                try {
+                    while (true) {
+                        const {value, done} = await reader.read();
+                        const str = String.fromCharCode.apply(null, value);
+                        if (done) {
+                            // |reader| has been canceled.
+                            break;
+                        }
+                        options.onChange(str, options.device);
+                        // Do something with |value|...
+                    }
+                } catch (error) {
+                    // Handle |error|...
+                    options.onError(e, options.device, 'listen');
+                } finally {
+                    reader.releaseLock();
+                }
+            }
+        }
+
+
+        getPortByDevice = async (device) => {
+            const ports = await navigator.serial.getPorts([device]);
+            return ports.find(value => {
+                const info = value.getInfo();
+                return info.usbProductId === device.usbProductId
+                    && 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) {
+                options.onPairRequired({device: options.device});
+                return;
+            }
+            this.paired = true;
+            console.info("opening port", options, this.port);
+// Wait for the serial port to open.
+            await this.port.open({baudRate: 9600});
+            this.connected = true;
+            console.info("opened", this.port, options)
+
+            await this.listen({
+                ...options,
+                port: this.port, onChange: (str) => {
+                    options.onChange(str);
+                }
+            });
+        };
+
+
+
+        isConnected = () => {
+            return this.connected;
+        }
+
+        isPaired = () => {
+            return this.paired;
+        }
+
+        getValue = () => {
+            return this.value;
+        }
+
+        requestPair = async () => {
+            await navigator.serial
+                .requestPort({
+                    filters: [{
+                        usbProductId: this.options.device.usbProductId,
+                        usbVendorId: this.options.device.usbVendorId
+                    }]
+                })
+            // .requestPort({filters: [{usbVendorId}]})
+            console.info("connecting");
+            await this.connect();
+        }
+
+    }
+
+    const ready = async () => {
+
+        const qrcode = new  SerialReader({
+            ...defaultOptions,
+            device: qrcodeReader,
+            onChange: (value) => {
+                console.info(value)
+            }
+        });
+
+        const rfid = new  SerialReader({
+            ...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();
+        })
+
+
+    }
+    document.addEventListener('DOMContentLoaded', ready);
+</script>
+<div class="mt-3 ">
+
+<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>
+</div>
 
     <?php
+
 // echo "Timezone:" . date_default_timezone_get();
  //echo date("Y-m-d H:i");