Cordova Barcode Scanner Plugin

llfritz

So I’m trying to push to another vue once I’ve gotten results from cordova.plugins.barcodeScanner.scan():
scanBarcode() {

            var permissions = cordova.plugins.permissions;
            
            permissions.hasPermission(permissions.CAMERA, function( status ){
            if ( status.hasPermission ) {
                console.log("Yes :D ");
                state.hasCameraPermission = true;
            }
            
            else {
                permissions.requestPermission(permissions.CAMERA, success, error);

                function error() {
                console.warn('Camera permission is not turned on');
                //alert("To use barcode scanner, enable camera permissions")
                state.hasCameraPermission = false;
                }

                function success( status ) {
                if( !status.hasPermission ) {
                    alert("To use barcode scanner, enable camera permissions")
                    state.hasCameraPermission = false;
                    error();
                    }
                else {
                    state.hasCameraPermission = true;
                    }
                }
            }
            });

            if(state.hasCameraPermission)
            {
              var code = '';
              cordova.plugins.barcodeScanner.scan(
              
              function (result) {
              setTimeout(function() {
              if(result.text)
                {
                alert("Your barcode scanned! Text: " + result.text)
                code += result.text
                code = code.replace("+", "%2B")
                alert("Code after formatting: ");
                alert(code);
                state.fastPassCode = code;
                sessionStorage.setItem('fastPassCode', state.fastPassCode)
                router.push({ name: 'verify' });
                alert("Pushing to verify page: ");
                
                }
              else
                {
                  alert("Scanning cancelled or failed")
                }
              }, 1000);
              }, 
            
              function (error) {
              alert("Scanning failed: " + error);
              }
              );
            }
          
          // if(state.fastPassCode)
          //     {
          //     alert("Pushing to verify page: ")
          //     router.push({ name: 'verify' });
          //     }
       }

But no matter what I do it will not push to the new Vue. Does anyone here have experience with this plugin? The plugin successfully gets me data but cannot seem to push to a new vue.

rstoenescu

@llfritz Hi, what do you mean by “push to the new Vue”? Are you referring to changing Vue route? If so and your code above is a method of a Vue component, then you need to use ES6 arrow functions and push on “this.$router” or set “const router = this.$router” at the beginning of your method. In your example “router” is not defined.

llfritz

This is a method in a Vue component. May I ask why arrow functions are needed? I get the this.$router, but are the arrow functions needed whenever you’re directing to a new Vue inside a method?

rstoenescu

Google for ES6 arrow functions. Basic summary for your case: it’s about handling scope for this in Javascript.

methods: {
  myMethod () {
     // `this` --> refers to your Vue component
     function x () {
        // `this` --> refers to x() function scope
     }
     const y = () => {
        // `this` --> refers to the outer scope of "y", which is the Vue component
     }
  }
}

llfritz

Will do, thank you. Quasar is pretty awesome by the way, I appreciate all the work you’ve put into this framework!

llfritz

So I’m going to post all of my code because I’ve realized my situation is a bit more complicated.

<topbar slot="header"></topbar>

<div class="layout-view">
    <div class="layout-padding">
        <errorDisplay></errorDisplay>
        <div class="card" v-if="state.availableClubPlans.length > 0">
          <div class="card-title bg-secondary text-white">
            Car Care Club
          </div>
          <div class="card-content card-force-top-padding">
            <p>
                Loyalty rewards!<br />Pay from your phone!<br />
                <button class="secondary" @click="newPlanSignup('club')">
                  Join Car Care Club Now
                </button>
            </p>
            <p>
                Already a member?<br />
                
                    <button class="bg-secondary text-white" @click="getBarcodePermissions">
                      Scan your window sticker
                    </button>
                
                  <br />or enter plan number below:<br />
                <!-- <signin v-on:submit='verify'></signin> -->
                <input v-model="clubCustCode" placeholder="plan number">
                <button class="bg-secondary text-white" @click="verify('club')">
                  Submit
                </button>
            </p>
          </div>

        </div>

        <div class="card" v-if="state.availablePassPlans.length > 0">
          <div class="card-title bg-faded text-white">
            Monthly Pass Plan
          </div>
          <div class="card-content card-force-top-padding">
            <p>
                One monthly fee gets you unlimited washes!<br />
                <button class="bg-faded text-white" @click="newPlanSignup('pass')">
                  Join Monthly Pass Now
                </button>
            </p>
            <p>
                Already a member?<br />
                
                    <button class="bg-faded text-white" @click="scanBarcode" disabled>
                      Scan your window sticker
                    </button>
                
                  <br />or enter plan number below:<br />
                <!-- <signin v-on:submit='verify'></signin> -->
                <input v-model="passCustCode" placeholder="plan number">
                <button class="bg-faded text-white" @click="verify('pass')">
                  Submit
                </button>
            </p>
          </div>

        </div>

        <!-- <div class="card sign-in">
          <div class="card-title bg-primary text-white">
            Already a member?
          </div>
          <router-link :to="{ name:'select' }">
              <button class="bg-light-blue-4 text-white" disabled>
                Scan your window sticker
              </button>
          </router-link>
          <div class="card-content card-force-top-padding">
            Or enter plan number below:
          </div>
          <signin v-on:submit='verify'></signin>
        </div> -->
     </div>

</div>

   <!--<div slot="footer" v-if="showWallet" class="toolbar wallet" @click="openWallet()">
      <q-toolbar-title :padding="0">
        Wallet
      </q-toolbar-title>
  </div>-->

</q-layout>
</template>

export default {
    data () {
        return {
            state,
            clubCustCode: '',
            passCustCode: '',
            showWallet: true,
            scanBarcodeComplete: false
        }
    },
    components: {
        topbar,
        signin,
        errorDisplay
    },
    methods: {
        newPlanSignup: function (type) {
            state.planType = type
            sessionStorage.setItem('planType', type)
            router.push({ name: 'select' })
        },
        
        verify: function (type) {
            state.planType = type
            sessionStorage.setItem('planType', type)
            state.customer.Code = type === 'club' ? this.clubCustCode : this.passCustCode
            sessionStorage.setItem('customer', JSON.stringify(state.customer))
            router.push({ name: 'verify' })
        },

        indexOpenWallet: function (gallery) {
          this.openWallet(gallery);
        },

        getBarcodePermissions() {
            var self = this;
            var permissions = cordova.plugins.permissions;
            
            permissions.hasPermission(permissions.CAMERA, function( status ){
            if ( status.hasPermission ) {
                console.log("Yes :D ");
                //state.hasCameraPermission = true;
              self.scanBarcode();
            }
            
            else {
                permissions.requestPermission(permissions.CAMERA, success, error);
                function error() {
                console.warn('Camera permission is not turned on');
                //alert("To use barcode scanner, enable camera permissions")
                //state.hasCameraPermission = false;
                return;
                }

            function success( status ) {
              if( !status.hasPermission ) 
              {
              alert("To use barcode scanner, enable camera permissions")
              //state.hasCameraPermission = false;
              error();
              return;
              }
              
              else  
              {                  
              self.scanBarcode();
              }
            }
            }
            
            

            //if(state.hasCameraPermission)
            //{

            //}
        });
        },
       scanBarcode () {
        
        var code = '';
              cordova.plugins.barcodeScanner.scan(
              
                  function (result) {
              
                    if(result.text)
                    {
                    alert("Your barcode scanned! Text: " + result.text)
                    code += result.text
                    code = code.replace("+", "%2B")
                    alert("Code after formatting: ");
                    alert(code);
                    state.fastPassCode = code;
                    sessionStorage.setItem('fastPassCode', state.fastPassCode)
                    alert("Pushing to verify page: ");
                    self.$router.push({ name: 'verify' });                                       
                    }
                  
                    else
                    {
                    //alert("Scanning cancelled or failed")
                    }
              
                  }, 
            
                  function (error) {
                  alert("Scanning failed: " + error);
                  }
              );
       }
    },
    created () {
        // Clear sessionStorage variables
        sessionStorage.clear();

        

        if(state.items.length < 1) {
            apiRequest.makeRequest('GetItemList')
        }

    },
    mixins:[walletMixin]
}

</script>

<style scoped> .layout-padding { text-align: center; } .card { padding-bottom: 1.2em; } .sign-in button { margin: 1.2em 0; } .sign-in .card-content { padding-bottom: 0; } button { margin: 0 0 5px 0; } </style>

Right now I am referring to “this” by assigning it to a variable at the beginning of both of my methods. I am calling my scanBarcode method from my getBarcodePermissions method and this seemed to be the only way to make that call happen. But in scanBarcode(), at one point I decide to route to another Vue. Currently I have “self.$router.push({ name: ‘verify’ }).” I am not sure which function needs to be turned into an arrow function to make this work.

rstoenescu

scanBarcode() seems to not have a similar “self” variable defined.

llfritz

I am now defining that at the beginning of scanBarcode() in the same way. But once I have scanned a barcode, the vue should be routed to a new page (verify.vue) but instead stays at the one before the barcode scan. It almost seems like the router is stuck after attempting to route to another vue because none of the html elements work once the barcode has been scanned.

rstoenescu

It means you got JS errors which break the flow. Fix them.

No More Posting New Topics!

Cordova Barcode Scanner Plugin