145 lines
5.1 KiB
HTML
145 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Qlogic Device User</title>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div id="messagesList">
|
|
</div>
|
|
<div>
|
|
<div>BCR Data:</div>
|
|
<div>
|
|
<textarea style="background-color: white" disabled=disabled id="BC-data" rows="5" cols="85"></textarea>
|
|
</div>
|
|
</div>
|
|
<div> </div>
|
|
<div>
|
|
<div>OCR Data:</div>
|
|
<div>
|
|
<textarea style="background-color: white" disabled=disabled id="OC-data" rows="3" cols="85"></textarea>
|
|
</div>
|
|
</div>
|
|
<div> </div>
|
|
<div>
|
|
<div>Boarding Pass Data:</div>
|
|
<div>
|
|
<textarea id="BP-data" rows="14" cols="85"></textarea>
|
|
</div>
|
|
<div>
|
|
<input id="BP-send" type="button" value="Send" />
|
|
</div>
|
|
</div>
|
|
<div> </div>
|
|
<div>
|
|
<div>Bag Tag Data:</div>
|
|
<div>
|
|
<textarea id="BT-data" rows="12" cols="85"></textarea>
|
|
</div>
|
|
<div>
|
|
<input id="BT-send" type="button" value="Send" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--Script references. -->
|
|
<script src="Scripts/jquery-3.7.1.min.js"></script>
|
|
|
|
<!-- Library required for SignalR Framework client -->
|
|
<script src="Scripts/jquery.signalR-2.4.3.min.js"></script>
|
|
|
|
<!-- Library required for SignalR Core client -->
|
|
<script src="Scripts/signalr.min.js"></script>
|
|
|
|
<!-- Wrapper that automatically implements the SignalR client that is compatible with the server -->
|
|
<script src="Scripts/qlogic-signal.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
//
|
|
// QSS API callback class used to handle connection events (not required)
|
|
//
|
|
|
|
class QssApiCallback {
|
|
framework_starting() {
|
|
console.log('QSS Framework API: starting');
|
|
}
|
|
framework_received(data) {
|
|
console.log('QSS Framework API: received.');
|
|
}
|
|
framework_connectionSlow() {
|
|
console.warn('QSS Framework API: connectionSlow');
|
|
}
|
|
framework_reconnecting() {
|
|
console.warn('QSS Framework API: reconnecting');
|
|
}
|
|
framework_reconnected() {
|
|
console.log('QSS Framework API: reconnected');
|
|
}
|
|
framework_stateChanged(change) {
|
|
let oldStateStr = SIGNALR_CONNECTION_STATE_LABEL[change.oldState];
|
|
let newStateStr = SIGNALR_CONNECTION_STATE_LABEL[change.newState];
|
|
console.log('QSS Framework API: stateChanged - oldState:'
|
|
+ oldStateStr + '; newState:' + newStateStr);
|
|
}
|
|
framework_disconnected() {
|
|
console.warn('QSS Framework API: disconnected');
|
|
}
|
|
|
|
core_onreconnecting(error) {
|
|
if (error) {
|
|
console.error('QSS Core API: onreconnecting - Reconnecting after error:',
|
|
error);
|
|
} else {
|
|
console.log('QSS Core API: onreconnecting - Reconnecting');
|
|
}
|
|
}
|
|
core_onreconnected(connectionId) {
|
|
console.log('QSS Core API: onreconnected - Connection ID: ' + connectionId);
|
|
}
|
|
core_onclose(error) {
|
|
if (error) {
|
|
console.error('QSS Core API: onclose - Closed due to an error:', error);
|
|
} else {
|
|
console.log('QSS Core API: onclose - Closed gracefully.');
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initialize the client wrapper so that it can be used to make server-side calls and register
|
|
// client-side listeners.
|
|
$(document).ready(async function () {
|
|
|
|
// QSS API: set up API wrapper and connect
|
|
const qssApiCallback = new QssApiCallback();
|
|
await startSignalR(qssApiCallback);
|
|
|
|
// QSS API: server-side calls
|
|
$('#BP-send').on('click', function (event) {
|
|
const data = $('#BP-data').val();
|
|
console.info(data);
|
|
QSS_API_WRAPPER.invokeServerMethod('SendPrinterData', 'BP', data);
|
|
event.preventDefault();
|
|
});
|
|
|
|
$('#BT-send').on('click', function (event) {
|
|
const data = $('#BT-data').val();
|
|
console.info(data);
|
|
QSS_API_WRAPPER.invokeServerMethod('SendPrinterData', 'BT', data);
|
|
event.preventDefault();
|
|
});
|
|
|
|
// QSS API: register client-side listeners
|
|
if (QSS_API_WRAPPER.connection !== null) {
|
|
QSS_API_WRAPPER.onClientMethod('OnReaderDataReceived', function (deviceType, data) {
|
|
if (deviceType == 'BC') {
|
|
$('#BC-data').append(data);
|
|
} else {
|
|
$('#OC-data').append(data);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |