No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Stop/Start Vue/Crono time clock

    Framework
    2
    2
    795
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • O
      omgwalt last edited by

      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 1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman @omgwalt last edited by 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.

        1 Reply Last reply Reply Quote 0
        • First post
          Last post