From b7d265d92a20a595cac5d476effb37a2964312b3 Mon Sep 17 00:00:00 2001
From: Schneider Roland <roland.schneider@extern.a1.at>
Date: Fri, 25 Aug 2023 18:27:54 +0200
Subject: [PATCH] serial-reader

---
 .../common/_reception_form_card_number.php    |   5 +-
 frontend/views/customer/reception.php         | 230 +--------------
 frontend/views/customer/serial.php            | 266 ++++++++++++++++++
 3 files changed, 274 insertions(+), 227 deletions(-)
 create mode 100644 frontend/views/customer/serial.php

diff --git a/frontend/views/common/_reception_form_card_number.php b/frontend/views/common/_reception_form_card_number.php
index 252489d..3696859 100644
--- a/frontend/views/common/_reception_form_card_number.php
+++ b/frontend/views/common/_reception_form_card_number.php
@@ -30,11 +30,12 @@ if ( isset($model->card)){
 	    <?php $form = ActiveForm::begin([
 			'enableAjaxValidation' => false,
 	    	'method' => 'get',
-	    	'action' => $route
+	    	'action' => $route,
+             'id' => 'reception-card-number-form'
 	    ]); ?>
 			<div  class="row" >
 				<div class='col-md-12'>
-						<?php echo Html::textInput("number", $number ,['class' => 'form-control', 'placeholder' => 'Kártya/kulcs szám'])?>
+						<?php echo Html::textInput("number", $number ,['class' => 'form-control', 'placeholder' => 'Kártya/kulcs szám', 'id' => 'input-reception-card-number'])?>
 				</div>
 			</div>
 			<div  class="row" >
diff --git a/frontend/views/customer/reception.php b/frontend/views/customer/reception.php
index 406de2c..f02fc85 100644
--- a/frontend/views/customer/reception.php
+++ b/frontend/views/customer/reception.php
@@ -9,230 +9,10 @@ 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'
-    };
+<?php  if ( !isset($model->card)){  ?>
+<?= $this->render('serial', [
+    'model' => $model,
+]) ?>
+<?php } ?>
 
-    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");
-
-?>
diff --git a/frontend/views/customer/serial.php b/frontend/views/customer/serial.php
new file mode 100644
index 0000000..cd1cb44
--- /dev/null
+++ b/frontend/views/customer/serial.php
@@ -0,0 +1,266 @@
+<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>
\ No newline at end of file