honeywellScanner/HoneyWellScanner.tsx

import React from 'react';
import {
  IonContent,
  IonInput,
  IonButton,
  IonItem,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar, IonRow, IonCol, IonTabBar, IonLabel, IonImg, IonTabButton, IonIcon, IonText, IonRouterLink
} from '@ionic/react';
import './HoneywellScanner.css';
import { scan, logOut, settings, documentTextOutline } from "ionicons/icons";
import { updateDataByCursor, getDataByCursor, saveScannedData } from '../../services/indexedDb';
interface IProps {
  history: any
}
/**
 * 
 * This will allow the user of the app to scan the barcode of a product. 
 * When the barcode of a product has been successfully scanned, 
 * the product will appear on the scan summary page where the user
 * can submit that product for processing.   
 @category Category
 */
class HoneyWellScanner extends React.Component<IProps>{
  // window = Window;

  constructor(props: IProps) {
    super(props);
    // console.log(this.window);  
    this.state = { showManually: false, showScanner: true }
  }
  /**
   * Create a barcode scanner area with the ability to scan the items.
   * Scans barcode a barcode and checks it present in return table ,if its present then 
   * stores in new indexeddb table as valid product, if its not present then item will invalid.
   * Successfully scanned products will be listed on the scan summary page
   */
  componentDidMount() {
    console.log("component did mount ");

    (window as any).plugins.honeywell.listen((data: any) => {
      getDataByCursor(data).then(function (resp) {
        saveScannedData(resp).then(function (response) {
          updateDataByCursor('barcode', data).then(function (dataNew) {
          }).catch(function () {
          });
        })
      })
    }, function (error: any) {
      //alert('Error occured: ' + error);
    });

  }

   /**
   * This function will redirect to barcodelist page 
   */
  showBarcodeList = () => {
    this.props.history.push({
      pathname: '/dashboard/barcodeList'
    })
  }
/**
   * This function will redirect to entering barcode or min manually
   */
  enterManualBarcode = () => {
    this.props.history.push({
      pathname: '/dashboard/manualEntry'
    })
  }

  render() {
    return (
      <IonPage>
        <IonHeader>
          <IonToolbar className="bg-green">
            <IonTitle className="text-yellow">Scan Barcode</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding">
          <IonRow>
            <IonCol className="ion-text-center">
              <IonImg className="custom-login-logo" src="assets/img/scan_instructions.png"></IonImg>
            </IonCol>
          </IonRow>
          <div>
            <IonRow>
              <IonCol className="ion-text-center margin-top-10">
                <IonButton className="bg-yellow text-green font-12 capitalize_case" onClick={this.showBarcodeList}>View Product List</IonButton>
              </IonCol>
            </IonRow>

            <IonRow>
              <IonCol className="ion-text-center">
                <IonButton className="bg-yellow text-green font-12 capitalize_case" onClick={this.enterManualBarcode}>Enter Barcode Manually</IonButton>
              </IonCol>
            </IonRow>
          </div>
        </IonContent>
      </IonPage>
    )
  }


}
export default HoneyWellScanner;