USB Port reader Web solution
// TS
```typescript
import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { RfidService } from 'src/app/services/rfid.service';
import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { VehicleService } from 'src/app/services/vehicle.service';
import { CustomerService } from 'src/app/services/customer.service';
import { ToastrService } from 'ngx-toastr';
import { Connect, DisConnect, CheckStatus} from '../../../../assets/script/portscript.js'
@Component({
selector: 'app-rfid-add-update',
templateUrl: './rfid-add-update.component.html',
styleUrls: ['./rfid-add-update.component.scss']
})
export class RfidAddUpdateComponent implements OnInit,OnDestroy {
frm!: FormGroup;
submitClicked = false;
is_edit: boolean = true;
VehicleList: any;
DriverList:any;
CompanyList: any;
constructor(
@Inject(MAT_DIALOG_DATA) public data:any,
public router: Router,
public fb: FormBuilder,
private rfidService: RfidService,
private dialog: MatDialog,
private vehicleService: VehicleService,
private customerService: CustomerService,
private toastr: ToastrService,
) { }
ngOnInit(): void {
this.initialForm(this.data);
// this.getCompanyList();
this.getVehicleList();
CheckStatus();
}
initialForm(data: any){
this.frm = this.fb.group({
rfidid: [{value:'', disabled: !this.is_edit}],
rfidNo: ['', Validators.required],
serialNo: ['', Validators.required],
vehicleid: ['', Validators.required],
});
if (data.action == 'Edit' )
{
this.frm = this.fb.group({
rfidid: data.rfid.rfidid,
rfidNo: data.rfid.rfidNo,
serialNo: data.rfid.serialNo,
vehicleid: data.rfid.vehicleid
});
}
}
onConnect() {
Connect();
}
onDisConnect() {
DisConnect();
// window.location.reload();
}
ngOnDestroy(): void {
window.location.reload();
}
async onSubmit(frm:FormGroup) {
this.submitClicked = true;
if (this.data.action == 'New')
{
this.rfidService.addNewRfid(frm.value)
.subscribe({
next: data => {
if (data.status == 200)
{
this.toastr.success('A new record has added successfully !', 'Success',{timeOut: 5000});
this.dialog.closeAll(); ///close DialogComponent
this.reload(this.router.url);
}
},
error: error => {
console.error('There was an error in update!', error);
this.toastr.error('Add Fail', 'Error')
}})
// console.log(result);
}
else if (this.data.action == 'Edit') {
this.rfidService.editRfid(frm.value)
.subscribe({
next: data => {
if (data.status == 200)
{
this.toastr.success('Update Success', 'Success');
this.dialog.closeAll(); ///close DialogComponent
// this.reload(this.router.url);
}
},
error: error => {
console.error('There was an error in update!', error);
this.toastr.error('Update Fail', 'Error')
}})
}
}
async reload(url: string): Promise<boolean> {
await this.router.navigateByUrl('weighing', { skipLocationChange: true });
return this.router.navigateByUrl(url);
}
//#region dropdown list
getCompanyList(){
return this.customerService.getCompanyWithCustomerList()
.subscribe({
next: res=>{
this.CompanyList = res;
},
error: error => {
console.log("retrive Customer list error"+error);
}});
}
getVehicleList(){
return this.vehicleService.getAllVehicles()
.subscribe({
next: res=>{
this.VehicleList = res;
},
error: error => {
console.log("Error: retrive Vehicle list error"+error);
}});
}
//#endregion
}
```// UI
```html
<h2 mat-dialog-title>{{data.action}} Rfid </h2>
<button (click)="onConnect()" class="btn btn-outline-success btn-sm" id="connectButton">Connect RFID reader</button>
<button (click)="onDisConnect()" class="btn btn-outline-warning btn-sm" id="disconnectButton" >Disconnect</button>
<label class="text-info" style="padding-left: 100px;" id="PortStatus" >Not connected</label>
<br>
<!-- <div class="form-group mb-2">
<textarea id="monitor" readonly rows="2" cols="61"></textarea>
</div> -->
<hr><br>
<form [formGroup] = "frm" (ngSubmit)="onSubmit(frm)">
<mat-dialog-content >
<div class="form-group" hidden>
<label>Rfid Id</label>
<input class="form-control" [attr.disabled]="true" formControlName="rfidid" >
</div>
<div class="form-group mb-2">
<label>Rfid No</label> <span style="color: red;"> *</span>
<input class="form-control" formControlName="rfidNo" id="rfidNo" >
</div>
<div class="form-group mb-2">
<label>Serial No</label> <span style="color: red;"> *</span>
<input class="form-control" formControlName="serialNo" >
</div>
<div class="form-group mb-2">
<label>Vehicle</label> <span style="color: red;"> *</span>
<select class="form-select form-control" formControlName="vehicleid" id="inputGroupSelect03">
<option *ngFor="let vehicle of VehicleList" [ngValue]="vehicle.vehicleid" >{{vehicle.rego}}</option>
</select>
</div>
<div><span style="color: red;">*</span> is required</div>
</mat-dialog-content>
<div mat-dialog-actions align="center">
<button class="btn btn-block btn-outline-secondary btn-sm" mat-button mat-dialog-close>Cancel</button>
<span> </span> <span> </span>
<button type="submit" [disabled] = "!frm.valid || submitClicked" class="btn btn-outline-success btn-sm" mat-button>Save</button>
</div>
</form>
```
//
```typescript
rootURL = environment.backEndAPIEndpoint;
addNewRfid(formGroupData: any): Observable<any> {
var formData = this.buildFormData(formGroupData);
let endPoint = this.rootURL + 'api/rfid/create';
return this.httpClient
.post<HttpResponse<Object>>(endPoint, formData, { observe: 'response' })
.pipe((resp) => resp);
}
editRfid(formGroupData: any): Observable<any> {
var id = formGroupData['rfidid'];
var formData = this.buildFormData(formGroupData);
formData.append('Rfidid', id); //edit record need it,
// for(var pair of formData.entries()) { console.log(pair[0]+ ', '+ pair[1]); }
let endPoint = this.rootURL + 'api/rfid/edit/' + String(id);
return this.httpClient
.put<HttpResponse<Object>>(endPoint, formData, { observe: 'response' })
.pipe((resp) => resp);
}
//#region functions
buildFormData(formGroupData: any) {
var formData: any = new FormData();
formData.append(
'RfidNo', formGroupData['rfidNo'] != null ? formGroupData['rfidNo'] : "''"
);
formData.append('SerialNo', formGroupData['serialNo']);
formData.append('Customerid', formGroupData['customerid']);
formData.append('Vehicleid', formGroupData['vehicleid']);
return formData;
}
```// Some code// Angular, assets/script
```javascript
let port;
let reader;
let cancel = false;
let isConnect;
let endStr = 13;
let rfidCode = "";
export async function Connect() {
if ("serial" in navigator) {
// alert("Your browser supports Web Serial API!");
try {
port = await navigator.serial.requestPort();
await port.open({
baudRate: 57600,
});
CheckStatus();
while (port.readable) {
reader = port.readable.getReader();
try {
while (true) {
const { value, done } = await reader.read();
if (done) {
cancel = true;
console.log("Canceled\n");
break;
}
const foundEnd = value[value.length - 1];
const inputValue = new TextDecoder().decode(value);
rfidCode = rfidCode + inputValue;
if (foundEnd === endStr) {
add_rfid(rfidCode);
rfidCode = "";
}
else {
rfidCode = inputValue;
}
}
if (cancel) break;
reader.releaseLock();
} catch (error) {
console.log("[Error] Read" + error + "\n");
} finally {
CheckStatus();
break;
}
}
} catch (error) {
console.log("[Error]Open" + error + "\n");
}
} else {
alert(
"Your browser does not support Web Serial API, the latest version of Google Chrome is recommended!"
);
}
}
//-----------------------------------------------------------------
export async function DisConnect() {
try {
reader.releaseLock();
await port.close();
console.log("Serial port closed.");
} catch (error) {
console.error(error);
}
}
export function CheckStatus() {
isConnect = false;
var state = document.getElementById("PortStatus");
try {
if (port.readable) {
state.innerHTML = "Connected.";
document.getElementById("connectButton").disabled = true;
document.getElementById("disconnectButton").disabled = false;
isConnect = true;
} else {
state.innerHTML = "Not connected.";
document.getElementById("connectButton").disabled = false;
document.getElementById("disconnectButton").disabled = true;
}
} catch (error) {
state.innerHTML = "Not connected.";
document.getElementById("connectButton").disabled = false;
document.getElementById("disconnectButton").disabled = true;
console.log("[Error] Close" + error + "\n");
}
}
function add_rfid(rfidCode) {
let input = document.getElementById("rfidNo");
input.value = rfidCode;
input.dispatchEvent(new Event("input", { bubbles: true }));
//beep();
var audio = new Audio('../../../assets/sound/beep.mp3');
audio.play();
}
//-----------------------------------------------------------------
function beep() {
var snd = new Audio("data:audio/wav;base64,//uQRAAAAWMSLwUIYAAsYkXgoQwAEaYLWfkWgAI0wWs/ItAAAGDgYtAgAyN+QWaAAihwMWm4G8QQRDiMcCBcH3Cc+CDv/7xA4Tvh9Rz/y8QADBwMWgQAZG/ILNAARQ4GLTcDeIIIhxGOBAuD7hOfBB3/94gcJ3w+o5/5eIAIAAAVwWgQAVQ2ORaIQwEMAJiDg95G4nQL7mQVWI6GwRcfsZAcsKkJvxgxEjzFUgfHoSQ9Qq7KNwqHwuB13MA4a1q/DmBrHgPcmjiGoh//EwC5nGPEmS4RcfkVKOhJf+WOgoxJclFz3kgn//dBA+ya1GhurNn8zb//9NNutNuhz31f////9vt///z+IdAEAAAK4LQIAKobHItEIYCGAExBwe8jcToF9zIKrEdDYIuP2MgOWFSE34wYiR5iqQPj0JIeoVdlG4VD4XA67mAcNa1fhzA1jwHuTRxDUQ//iYBczjHiTJcIuPyKlHQkv/LHQUYkuSi57yQT//uggfZNajQ3Vmz+Zt//+mm3Wm3Q576v////+32///5/EOgAAADVghQAAAAA//uQZAUAB1WI0PZugAAAAAoQwAAAEk3nRd2qAAAAACiDgAAAAAAABCqEEQRLCgwpBGMlJkIz8jKhGvj4k6jzRnqasNKIeoh5gI7BJaC1A1AoNBjJgbyApVS4IDlZgDU5WUAxEKDNmmALHzZp0Fkz1FMTmGFl1FMEyodIavcCAUHDWrKAIA4aa2oCgILEBupZgHvAhEBcZ6joQBxS76AgccrFlczBvKLC0QI2cBoCFvfTDAo7eoOQInqDPBtvrDEZBNYN5xwNwxQRfw8ZQ5wQVLvO8OYU+mHvFLlDh05Mdg7BT6YrRPpCBznMB2r//xKJjyyOh+cImr2/4doscwD6neZjuZR4AgAABYAAAABy1xcdQtxYBYYZdifkUDgzzXaXn98Z0oi9ILU5mBjFANmRwlVJ3/6jYDAmxaiDG3/6xjQQCCKkRb/6kg/wW+kSJ5//rLobkLSiKmqP/0ikJuDaSaSf/6JiLYLEYnW/+kXg1WRVJL/9EmQ1YZIsv/6Qzwy5qk7/+tEU0nkls3/zIUMPKNX/6yZLf+kFgAfgGyLFAUwY//uQZAUABcd5UiNPVXAAAApAAAAAE0VZQKw9ISAAACgAAAAAVQIygIElVrFkBS+Jhi+EAuu+lKAkYUEIsmEAEoMeDmCETMvfSHTGkF5RWH7kz/ESHWPAq/kcCRhqBtMdokPdM7vil7RG98A2sc7zO6ZvTdM7pmOUAZTnJW+NXxqmd41dqJ6mLTXxrPpnV8avaIf5SvL7pndPvPpndJR9Kuu8fePvuiuhorgWjp7Mf/PRjxcFCPDkW31srioCExivv9lcwKEaHsf/7ow2Fl1T/9RkXgEhYElAoCLFtMArxwivDJJ+bR1HTKJdlEoTELCIqgEwVGSQ+hIm0NbK8WXcTEI0UPoa2NbG4y2K00JEWbZavJXkYaqo9CRHS55FcZTjKEk3NKoCYUnSQ0rWxrZbFKbKIhOKPZe1cJKzZSaQrIyULHDZmV5K4xySsDRKWOruanGtjLJXFEmwaIbDLX0hIPBUQPVFVkQkDoUNfSoDgQGKPekoxeGzA4DUvnn4bxzcZrtJyipKfPNy5w+9lnXwgqsiyHNeSVpemw4bWb9psYeq//uQZBoABQt4yMVxYAIAAAkQoAAAHvYpL5m6AAgAACXDAAAAD59jblTirQe9upFsmZbpMudy7Lz1X1DYsxOOSWpfPqNX2WqktK0DMvuGwlbNj44TleLPQ+Gsfb+GOWOKJoIrWb3cIMeeON6lz2umTqMXV8Mj30yWPpjoSa9ujK8SyeJP5y5mOW1D6hvLepeveEAEDo0mgCRClOEgANv3B9a6fikgUSu/DmAMATrGx7nng5p5iimPNZsfQLYB2sDLIkzRKZOHGAaUyDcpFBSLG9MCQALgAIgQs2YunOszLSAyQYPVC2YdGGeHD2dTdJk1pAHGAWDjnkcLKFymS3RQZTInzySoBwMG0QueC3gMsCEYxUqlrcxK6k1LQQcsmyYeQPdC2YfuGPASCBkcVMQQqpVJshui1tkXQJQV0OXGAZMXSOEEBRirXbVRQW7ugq7IM7rPWSZyDlM3IuNEkxzCOJ0ny2ThNkyRai1b6ev//3dzNGzNb//4uAvHT5sURcZCFcuKLhOFs8mLAAEAt4UWAAIABAAAAAB4qbHo0tIjVkUU//uQZAwABfSFz3ZqQAAAAAngwAAAE1HjMp2qAAAAACZDgAAAD5UkTE1UgZEUExqYynN1qZvqIOREEFmBcJQkwdxiFtw0qEOkGYfRDifBui9MQg4QAHAqWtAWHoCxu1Yf4VfWLPIM2mHDFsbQEVGwyqQoQcwnfHeIkNt9YnkiaS1oizycqJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU=");
snd.play();
}
export function add_message(message) {
let monitor = document.getElementById("monitor");
monitor.value += message;
monitor.schrollTop = monitor.scrollHeight;
}
async function send() {
let text = document.getElementById("sendBox").value;
document.getElementById("sendBox").value = "";
const encoder = new TextEncoder();
const writer = port.writable.getWriter();
await writer.write(encoder.encode(text + "\n"));
writer.releaseLock();
}
```error TS7016: Could not find a declaration file for module
tsconfig.json
//
rootURL = environment.backEndAPIEndpoint;
addNewRfid(formGroupData: any): Observable<any> {
var formData = this.buildFormData(formGroupData);
let endPoint = this.rootURL + 'api/rfid/create';
return this.httpClient
.post<HttpResponse<Object>>(endPoint, formData, { observe: 'response' })
.pipe((resp) => resp);
}
editRfid(formGroupData: any): Observable<any> {
var id = formGroupData['rfidid'];
var formData = this.buildFormData(formGroupData);
formData.append('Rfidid', id); //edit record need it,
// for(var pair of formData.entries()) { console.log(pair[0]+ ', '+ pair[1]); }
let endPoint = this.rootURL + 'api/rfid/edit/' + String(id);
return this.httpClient
.put<HttpResponse<Object>>(endPoint, formData, { observe: 'response' })
.pipe((resp) => resp);
}
//#region functions
buildFormData(formGroupData: any) {
var formData: any = new FormData();
formData.append(
'RfidNo', formGroupData['rfidNo'] != null ? formGroupData['rfidNo'] : "''"
);
formData.append('SerialNo', formGroupData['serialNo']);
formData.append('Customerid', formGroupData['customerid']);
formData.append('Vehicleid', formGroupData['vehicleid']);
return formData;
}// Some code // Angular, assets/script
let port;
let reader;
let cancel = false;
let isConnect;
let endStr = 13;
let rfidCode = "";
export async function Connect() {
if ("serial" in navigator) {
// alert("Your browser supports Web Serial API!");
try {
port = await navigator.serial.requestPort();
await port.open({
baudRate: 57600,
});
CheckStatus();
while (port.readable) {
reader = port.readable.getReader();
try {
while (true) {
const { value, done } = await reader.read();
if (done) {
cancel = true;
console.log("Canceled\n");
break;
}
const foundEnd = value[value.length - 1];
const inputValue = new TextDecoder().decode(value);
rfidCode = rfidCode + inputValue;
if (foundEnd === endStr) {
add_rfid(rfidCode);
rfidCode = "";
}
else {
rfidCode = inputValue;
}
}
if (cancel) break;
reader.releaseLock();
} catch (error) {
console.log("[Error] Read" + error + "\n");
} finally {
CheckStatus();
break;
}
}
} catch (error) {
console.log("[Error]Open" + error + "\n");
}
} else {
alert(
"Your browser does not support Web Serial API, the latest version of Google Chrome is recommended!"
);
}
}
//-----------------------------------------------------------------
export async function DisConnect() {
try {
reader.releaseLock();
await port.close();
console.log("Serial port closed.");
} catch (error) {
console.error(error);
}
}
export function CheckStatus() {
isConnect = false;
var state = document.getElementById("PortStatus");
try {
if (port.readable) {
state.innerHTML = "Connected.";
document.getElementById("connectButton").disabled = true;
document.getElementById("disconnectButton").disabled = false;
isConnect = true;
} else {
state.innerHTML = "Not connected.";
document.getElementById("connectButton").disabled = false;
document.getElementById("disconnectButton").disabled = true;
}
} catch (error) {
state.innerHTML = "Not connected.";
document.getElementById("connectButton").disabled = false;
document.getElementById("disconnectButton").disabled = true;
console.log("[Error] Close" + error + "\n");
}
}
function add_rfid(rfidCode) {
let input = document.getElementById("rfidNo");
input.value = rfidCode;
input.dispatchEvent(new Event("input", { bubbles: true }));
//beep();
var audio = new Audio('../../../assets/sound/beep.mp3');
audio.play();
}
//-----------------------------------------------------------------
function beep() {
var snd = new Audio("data:audio/wav;base64,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qJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
```typescript
rootURL = environment.backEndAPIEndpoint;
addNewRfid(formGroupData: any): Observable<any> {
var formData = this.buildFormData(formGroupData);
let endPoint = this.rootURL + 'api/rfid/create';
return this.httpClient
.post<HttpResponse<Object>>(endPoint, formData, { observe: 'response' })
.pipe((resp) => resp);
}
editRfid(formGroupData: any): Observable<any> {
var id = formGroupData['rfidid'];
var formData = this.buildFormData(formGroupData);
formData.append('Rfidid', id); //edit record need it,
// for(var pair of formData.entries()) { console.log(pair[0]+ ', '+ pair[1]); }
let endPoint = this.rootURL + 'api/rfid/edit/' + String(id);
return this.httpClient
.put<HttpResponse<Object>>(endPoint, formData, { observe: 'response' })
.pipe((resp) => resp);
}
//#region functions
buildFormData(formGroupData: any) {
var formData: any = new FormData();
formData.append(
'RfidNo', formGroupData['rfidNo'] != null ? formGroupData['rfidNo'] : "''"
);
formData.append('SerialNo', formGroupData['serialNo']);
formData.append('Customerid', formGroupData['customerid']);
formData.append('Vehicleid', formGroupData['vehicleid']);
return formData;
}// Some code // Angular, assets/script
let port;
let reader;
let cancel = false;
let isConnect;
let endStr = 13;
let rfidCode = "";
export async function Connect() {
if ("serial" in navigator) {
// alert("Your browser supports Web Serial API!");
try {
port = await navigator.serial.requestPort();
await port.open({
baudRate: 57600,
});
CheckStatus();
while (port.readable) {
reader = port.readable.getReader();
try {
while (true) {
const { value, done } = await reader.read();
if (done) {
cancel = true;
console.log("Canceled\n");
break;
}
const foundEnd = value[value.length - 1];
const inputValue = new TextDecoder().decode(value);
rfidCode = rfidCode + inputValue;
if (foundEnd === endStr) {
add_rfid(rfidCode);
rfidCode = "";
}
else {
rfidCode = inputValue;
}
}
if (cancel) break;
reader.releaseLock();
} catch (error) {
console.log("[Error] Read" + error + "\n");
} finally {
CheckStatus();
break;
}
}
} catch (error) {
console.log("[Error]Open" + error + "\n");
}
} else {
alert(
"Your browser does not support Web Serial API, the latest version of Google Chrome is recommended!"
);
}
}
//-----------------------------------------------------------------
export async function DisConnect() {
try {
reader.releaseLock();
await port.close();
console.log("Serial port closed.");
} catch (error) {
console.error(error);
}
}
export function CheckStatus() {
isConnect = false;
var state = document.getElementById("PortStatus");
try {
if (port.readable) {
state.innerHTML = "Connected.";
document.getElementById("connectButton").disabled = true;
document.getElementById("disconnectButton").disabled = false;
isConnect = true;
} else {
state.innerHTML = "Not connected.";
document.getElementById("connectButton").disabled = false;
document.getElementById("disconnectButton").disabled = true;
}
} catch (error) {
state.innerHTML = "Not connected.";
document.getElementById("connectButton").disabled = false;
document.getElementById("disconnectButton").disabled = true;
console.log("[Error] Close" + error + "\n");
}
}
function add_rfid(rfidCode) {
let input = document.getElementById("rfidNo");
input.value = rfidCode;
input.dispatchEvent(new Event("input", { bubbles: true }));
//beep();
var audio = new Audio('../../../assets/sound/beep.mp3');
audio.play();
}
//-----------------------------------------------------------------
function beep() {
var snd = new Audio("data:audio/wav;base64,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qJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU=");
snd.play();
}
export function add_message(message) {
let monitor = document.getElementById("monitor");
monitor.value += message;
monitor.schrollTop = monitor.scrollHeight;
}
async function send() {
let text = document.getElementById("sendBox").value;
document.getElementById("sendBox").value = "";
const encoder = new TextEncoder();
const writer = port.writable.getWriter();
await writer.write(encoder.encode(text + "\n"));
writer.releaseLock();
}
error TS7016: Could not find a declaration file for module tsconfig.json "compilerOptions": { "noImplicitAny":false, ... }
PreviousAngular read csv and upload to ServerNextDebug Angular app using JavaScript Debugger in VS Code
Last updated