Scan codes

REMEMBER.txt

@@ -22,3 +22,8 @@ ionic generate component taskactivities
 npm install angularx-qrcode@14.0.0 --save
 
 npm install bn-ng-idle
+
+npm install @capacitor-community/barcode-scanner
+npx cap sync
+
+https://github.com/capacitor-community/barcode-scanner

src/app/pages/familylogin/familylogin.page.html

@@ -4,6 +4,8 @@
   </div>
 
   <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/jobinterest.jpg)'">
+    <ion-button (click)="startScan()">Scan Qr Code</ion-button>
+
     <div class="ion-padding">
       <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>
     </div>
@@ -15,7 +17,7 @@
         <ion-label class="simp_lbl">Family Login</ion-label>
         <ion-item lines="none">
           <ion-icon slot="start" name="mail-outline"></ion-icon>
-          <ion-input type="email" placeholder="Username"  maxlength="12" [(ngModel)]='username'></ion-input>
+          <ion-input type="email" placeholder="UserCode"  maxlength="12" [(ngModel)]='username'></ion-input>
         </ion-item>
 
         <ion-item lines="none">

src/app/pages/familylogin/familylogin.page.ts

@@ -5,6 +5,7 @@ import { SessionDataProviderService } from 'src/app/store/session-data-provider.
 import { BlogDataService } from 'src/app/store/blog-data.service';
 import {NavController} from "@ionic/angular";
 import { AlertController } from '@ionic/angular';
+import { BarcodeScanner } from '@capacitor-community/barcode-scanner';
 
 @Component({
   selector: 'app-familylogin',
@@ -19,6 +20,7 @@ export class FamilyloginPage implements OnInit {
   @ViewChild('pin') pin;
   loginResult: any;
   blogResult:any;
+  content_visibility = '';
 
   constructor(
       private router: Router,
@@ -88,4 +90,50 @@ export class FamilyloginPage implements OnInit {
   userLogin(){
     this.router.navigate(['login']);
   }
+
+
+  async checkPermission() {
+    try {
+      // check or request permission
+      const status = await BarcodeScanner.checkPermission({ force: true });
+      if (status.granted) {
+        // the user granted permission
+        return true;
+      }
+      return false;
+    } catch(e) {
+      console.log(e);
+    }
+  }
+  scannedResult:any;
+  async startScan() {
+    try {
+      const permission = await this.checkPermission();
+      if(!permission) {
+        return;
+      }
+      await BarcodeScanner.hideBackground();
+      document.querySelector('body').classList.add('scanner-active');
+      this.content_visibility = 'hidden';
+      const result = await BarcodeScanner.startScan();
+      console.log(result);
+      BarcodeScanner.showBackground();
+      document.querySelector('body').classList.remove('scanner-active');
+      this.content_visibility = '';
+      if(result?.hasContent) {
+        this.scannedResult = result.content;
+        console.log(this.scannedResult);
+      }
+    } catch(e) {
+      console.log(e);
+      this.stopScan();
+    }
+  }
+
+  stopScan() {
+    BarcodeScanner.showBackground();
+    BarcodeScanner.stopScan();
+    document.querySelector('body').classList.remove('scanner-active');
+    this.content_visibility = '';
+  }
 }

src/app/pages/my-course/my-course.page.html

@@ -1,4 +1,3 @@
-
 <ion-header mode="ios" class="ion-no-border">
   <ion-toolbar>
 <!--    <ion-buttons slot="end">-->

src/app/pages/profile/profile.page.html

@@ -133,11 +133,11 @@
           <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
         </ion-item>
 
-        <!--    <ion-item lines="none" (click)="onPayment()">-->
-        <!--      <ion-icon name="wallet-outline" color="dark"></ion-icon>-->
-        <!--      <ion-label>Payment & Accounts</ion-label>-->
-        <!--      <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>-->
-        <!--    </ion-item>-->
+        <ion-item lines="none" (click)="onPayment()">
+          <ion-icon name="wallet-outline" color="dark"></ion-icon>
+          <ion-label>Payment & Accounts</ion-label>
+          <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
+        </ion-item>
 
         <ion-item lines="none" (click)="onSecurity()">
           <ion-icon name="shield-checkmark-outline" color="dark"></ion-icon>

src/global.scss

@@ -226,4 +226,12 @@ ion-modal.custom_modal_bottom {
       font-size: 15px;
     }
   }
+}
+ion-header{
+  margin-top: 0px !important;
+}
+
+body.scanner-active {
+  --background: transparent;
+  --ion-background-color: transparent;
 }