Stop/Start Vue/Crono time clock



  • I’m a Vue and Quasar beginner, and I confess I don’t know what I’m doing some of the time.

    I’m trying to use the Vue Chrono plugin from https://www.npmjs.com/package/vue-crono

    I’ve been trying to adapt the sample code from that page into a time clock. By adapting the code they supply on that page, I can get it going as a regular clock (as it was written to be), but when I try to use:

    this.$cron.stop(methodName) and
    this.$cron.start(methodName)

    to stop and start the clock, I get an error: “Error: Cron method ‘function () { [native code] }’ does not exist and cannot be started.”

    If I can learn how to effectively use this.$cron.stop(methodName) and this.$cron.start(methodName), I think I have a chance to make my spa work after a lot more work, but I can’t seem to figure out how to access them correctly.

    Here’s my code so far. Any help would be appreciated.

    <template>
        <div class="q-pa-md q-gutter-sm">
            <h4 style="text-align: center;">
                Time Clock</h4>
            <h2
                style="text-align: center;"
                :class="this.clockStarted ? 'green' : 'red'"
                >
                {{ incrementalTimeCheck }}</h2>
            <q-btn
                @click="changeClockState()"
                @mousedown="timeEnd = Date.now()"
                rounded
                icon="av_timer"
                :label="this.clockStarted ? 'Click to Stop' : 'Click to Start'"
                stack
                class="full-width"
                size="xl"
                :color="this.clockStarted ? 'green' : 'red'"
                />
        </div>
    </template>
    
    <script>
    import Vue from 'vue'
    import crono from 'vue-crono'
    Vue.use(crono)
    export default {
        data () {
            return {
                clockStarted: false,
                label: '',
                timeStart: Date.now(),
                timeEnd: 0,
                timer: 0,
                time: undefined
            }
        },
        computed: {
            incrementalTimeCheck () {
                var result = '00:00:00'
                this.timeEnd = this.time
                if( this.timeEnd > this.timeStart ) {
                    this.timer =  this.timeEnd - this.timeStart
                    var milliseconds = parseInt((this.timer%1000)/100)
                    var seconds = parseInt((this.timer/1000)%60)
                    var minutes = parseInt((this.timer/(1000*60))%60)
                    var hours = parseInt((this.timer/(1000*60*60))%24);
                    hours = (hours < 10) ? "0" + hours : hours
                    minutes = (minutes < 10) ? "0" + minutes : minutes
                    seconds = (seconds < 10) ? "0" + seconds : seconds
                    result = hours + ":" + minutes + ":" + seconds
                }
                return result
            }
        },
        methods: {
            changeClockState () {
                var handle = 0
                this.clockStarted = !this.clockStarted
                if ( this.clockStarted === false ) {
                    this.$cron.stop(this.load)
                } else {
                    this.$cron.start(this.load)
                } 
            },
            load(){
                this.time = Date.now()
            }
        },
        mounted(){
            this.load()
        },
        cron:{
            time: 1000,
            method: 'load'
        }
    }
    </script>
    <style>
    .red {
        color: red;
    }
    .green {
        color: green;
    }
    </style>
    


  • @omgwalt the error is at your changeClockState method, i’m not sure what params type $cron is expecting since it wasnt stated this.load could be this.load() or most probably a string 'load' since the lib calls it methodName.


Log in to reply