fitness-web/frontend/views/customer/reception.php

<?php

use frontend\components\ReceptionWidget;

?>
<?php
\frontend\assets\AppAsset::register($this);
?>
<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'
    };

    const readers = [qrcodeReader,rfidReader];

    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.usbVendorId === device.usbVendorId;
            });

        }
        connect = async () => {
            const options = this.options;
            this.port = await this.getPortByDevice({
                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   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,
        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();
    })

    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>
</div>

<?php

// echo "Timezone:" . date_default_timezone_get();
//echo date("Y-m-d H:i");

?>