Stop/Start Vue/Crono time clock

omgwalt

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>

metalsadman

@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.