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

<style>
    .warning-component {
        padding: 12px;
        border-radius: 6px;
        margin-top: 12px;
    }
</style>
<script>


    const qrcodeReader = {
        usbVendorId: 0x0c2e, usbProductId: 0x1094, name: 'qrcode'
    };

    const rfidReader = {
        usbVendorId: 0x09d8, usbProductId: 0x0420, name: 'rfid'
    };

    const readers = [qrcodeReader, rfidReader];
    const ports = {};


    class SerialReader {
        connected = false;
        port = null;
        value = null;
        options = null;

        constructor(options) {
            this.options = options;
        }


        listen = async () => {
            const options = this.options;
            const port = options.port;
            console.info("Listening port")
            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);
                        // Do something with |value|...
                    }
                } catch (error) {
                    console.info("Error while listening port", error);
                    // Handle |error|...
                    // options.onError(error, options.device, 'listen');
                } finally {
                    console.info("stopped listening port");
                    reader.releaseLock();
                }
            }
        }

        connect = async () => {
            const options = this.options;
            const port = options.port;
            console.info("opening port", options, this.options.port);
            await port.open({baudRate: 9600});
            this.connected = true;
            console.info("opened", options);

        };

    }

    const pageLoadedAt = new Date().getTime();

    const openCardNumber = (cardNumber) => {
        if ( (new Date().getTime() - pageLoadedAt ) < 400 ){
            return;
        }
        const input = document.getElementById('input-reception-card-number');
        const form = document.getElementById('reception-card-number-form');

        input.value = cardNumber;
        form.submit();
    }

    const ready = async () => {


        const startSerialReader = async (port) => {
            const info = port.getInfo();
            const id = info.usbVendorId + "_" + info.usbProductId;
            const serialReader = new SerialReader({
                    port,
                    id,
                    onChange: (cardNumber) => openCardNumber(cardNumber)

                }
            );
            ports[id] = serialReader;
            await serialReader.connect();
            serialReader.listen().then(() => console.info("listen finishend"))
        }

        const pickPort = async () => {
            const vendors = document.getElementById('vendors');
            const deviceGroupName = vendors.value;
            console.info("vendorgroup selected", deviceGroupName);
            let filters = readers
                .filter(reader => reader.name === deviceGroupName).map(reader => ({'usbVendorId': reader.usbVendorId}));

            console.info("Calling requestPort with filters", filters);
            try {

                const requestedPort = await navigator.serial
                    .requestPort({
                        filters: filters
                    });

                await startSerialReader(requestedPort);
                readStatus(0).then();


            } catch (e) {
                alert('Nem választott eszközt!')
            }

        }

        const btnRfid = document.getElementById("rfid");
        const btnQRcode = document.getElementById("qrcode");
        const btnSelectDevice = document.getElementById("selectDevice");

        // btnRfid.addEventListener('click', async () => {
        //     await rfid.requestPair();
        // });
        //
        // btnQRcode.addEventListener('click', async () => {
        //     await qrcode.requestPair();
        // });
        btnSelectDevice.addEventListener('click', async () => {
            await pickPort();
        });


        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 = '';
            const table = document.createElement("table");
            table.classList.add('table');
            table.classList.add('table-bordered');

            const header = document.createElement("thead");
            const tbody = document.createElement("tbody");
            const headerRow = document.createElement('tr');
            header.appendChild(headerRow);

            const createTd = (text) =>{
                const td = document.createElement('td');
                td.innerText = text;
                return td;
            }


            headerRow.appendChild(createTd("Vendor"))
            headerRow.appendChild(createTd("Product"))
            headerRow.appendChild(createTd("Típus"))
            table.appendChild(header);
            for (let port of serialPorts) {
                const {usbVendorId, usbProductId} = port.getInfo();
                const tableRow = document.createElement('tr');
                const devices = readers.filter(reader => (reader.usbVendorId === usbVendorId));
                let readerGroup = "Ismeretlen";
                if (devices && devices.length) {
                    readerGroup = devices[0].name;
                }
                tableRow.innerHTML =
                    '<td>' + usbVendorId + '</td><td>' + usbProductId + '</td><td>' + readerGroup+'</td>';
                tbody.appendChild(tableRow);
            }
            table.appendChild(tbody)
            infoDiv.appendChild(table);

            console.info("ports", serialPorts);
            console.info("qr found", serialPorts.find(port => qrcodeReader.usbVendorId === port.getInfo().usbVendorId));

            const displayWarningRfid = !serialPorts.find(port => rfidReader.usbVendorId === port.getInfo().usbVendorId);
            const displayWarningQRCode =  !serialPorts.find(port => qrcodeReader.usbVendorId === port.getInfo().usbVendorId);
            console.info("displayWarningQRCode", displayWarningQRCode);

            const warningComponentRfid = document.getElementById("warning-component-rfid");
            const warningComponentQrcode = document.getElementById("warning-component-qrcode");
            const setClassName = (element, className, active) => {
                if (element) {
                    if (active) {
                        element.classList.add(className);
                    } else {
                        element.classList.remove(className);
                    }
                }
            }
            setClassName(warningComponentRfid, 'show', displayWarningRfid);
            setClassName(warningComponentRfid, 'hide', !displayWarningRfid);
            setClassName(warningComponentQrcode, 'show', displayWarningQRCode);
            setClassName(warningComponentQrcode, 'hide', !displayWarningQRCode);
            if ( millis ){
                await sleep(millis);
                await readStatus(millis);
            }
        }

        const start = async () => {
            const serialPorts = await navigator.serial.getPorts();

            for (const port of serialPorts) {
                await startSerialReader(port)
            }
        }

        readStatus(1000).then();


        start().then(() => console.info("Startup process ready"))

    }
    document.addEventListener('DOMContentLoaded', ready);
</script>
<div class="mt-3 ">
    <h3>Engedélyezett eszközök</h3>
    <div class="alert-danger warning-component " id="warning-component-rfid">
        Rfid olvasó nem található
        <br>
        <ul>
            <li>Válaszd ki az 'Eszköztipusok' lenyiló listából az RFID olvasót</li>
            <li>Nyomd meg az olvasó engedélyezée gombot</li>
            <li>A felugró ablakban válaszd ki ismét az rfid olvasót</li>
            <li>Nyomd meg a csatlakozás (connect) gombot</li>
        </ul>

    </div>
    <div class="alert-danger warning-component" id="warning-component-qrcode">
        QRCode olvasó nem található
        <br>
        <ul>
            <li>Válaszd ki az 'Eszköztipusok' lenyiló listából az QRCode olvasót</li>
            <li>Nyomd meg az olvasó engedélyezée gombot</li>
            <li>A felugró ablakban válaszd ki ismét az QRCode olvasót (Pl.: HF680)</li>
            <li>Nyomd meg a csatlakozás (connect) gombot</li>
        </ul>
    </div>
    <div id="allowed_devices"></div>
    <label for="vendors">Eszköztipusok</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="selectDevice">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>-->
</div>