Skip to main content
Question

Stopwatch built within form

  • June 19, 2018
  • 0 replies
  • 303 views
I 


I have the following form above for a fabrication department. The fabrication operator must fill out the form whenever he/she starts a new job. Instead of having the "Clock in" and "Clock out" fields, I'd like to create a stopwatch, similar to the one in the video below. I'd like the operator to be able to start and stop a timer whenever they'd like. The duration time would automatically appear in a field titled "Duration". I've looked into zapier.com and workato.com . I've also looked for other services, but most are very expensive and it'd be better to just let the operator manually opening their own stopwatch. Does anyone know any stopwatch that could be integrated into a form? I've found a quickbase app that is a timer, but that would be just as much work for the operator as manually opening their own stopwatch. Does anyone have any hints/tricks/resources?


    This topic has been closed for replies.

    • anomDiebolt
    • Registered
    • June 19, 2018
    I have a novel solution and halfway through creating a demo. The demo will work from a report or view record page and timers will continue to count if started even when the page holding the counters is not displayed! And you will be able to have multiple counters active at the same time.
    • anomDiebolt
    • Registered
    • June 20, 2018
    This was pretty easy to do. Here you go:




    StopWatch
    https://haversineconsulting.quickbase.com/db/bnsjt3e2s?a=td

    Paste Database
    https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=666

    Notes

    (1) I used the library FlipClock:

    FlipClockJS
    http://flipclockjs.com/

    (2) This demo is intended for a user to observe and manipulate their own timers. If multiple users are manipulating the same timer there will probably be some confusion as the underlying state of the time may become inconsistent with what is displayed for another user.
    I tried calculating the duration as shown in the comment above. I made a field and did Seconds([Last Saved Time]). However, the duration isn't saved. Is there another way I could display the duration?
    • anomDiebolt
    • Registered
    • June 27, 2018
    Seconds([Last Saved Time]) is the correct formula but it is only valid as the total elapsed time when the Timer is stopped. When the Timer is running the elapsed time is evolving and [Last Saved Time] merely represents the time the Timer was last stopped (or reset)..

    The [Last Saved Time] is saved with the timer is Stopped or when Reset.
    I put the formula in a duration field as shown below.




     But when I tried to start the timer and stop the timer at 8 seconds (as shown below), the duration field doesn't change. I understand the formula, but it's not working in the report. 

    • anomDiebolt
    • Registered
    • June 29, 2018
    If you wand to display the Duration field it will only be valid if the timer is stopped and you need to reload the page when stopped to display the correct value.

      $("a.QBU_Stop").on("click", function(event) {
        var rid = this.dataset.rid;
        $('a.QBU_Start[data-rid=${rid}]').css("visibility", "visible");
        $('a.QBU_Stop[data-rid=${rid}]').css("visibility", "hidden");
        clocks[rid].stop();
        var lastsavedtime = clocks[rid].getTime().time;
        $.post(dbidTimers, {
          act: "API_EditRecord",
          rid: rid,
          _fid_8: parseInt(new Date().getTime(), 10) / 1000,
          _fid_10: lastsavedtime 
        }).then(function() {
          document.location.reload(true);
        });
      });
    So I added a code page named duration.js and copied in the above code you commented. Would I only need to change the  _fid_ ? Would I need to change anything else? Or would I just insert the code into my existing code page for the timer?




    I changed my duration field to this, but the duration field on the table doesn't have anything in its column:





    >My script set the [Last Saved Time] through the API when the timer was stopped and your [Duration] field will react to this change. 

    How can the duration field automatically change if it's not referenced in the timer field's formula or in the script? I understand you reference the last start time, last saved time and last stop time in the formula, but the duration field isn't referenced.
    Since [Duration] is a duration formula field that is dependent on [Last Saved Time] , then this is all I need to have in as the duration, correct? 




    And since I need to reload the page, my code page should remain the same as the pastie, but include the highlighted part, correct?





    But when I create a new timer, I try to start the timer and let it go for a 7 seconds. When I stop the timer, the page refreshes and the timer resets just goes back to 0 and the duration field doesn't save as 7 seconds. Below is a picture of what the table looks like, when it automatically refreshes. Why is this? Is it because of the script where it resets the all of the _fid_ as 0?

    I am fairly new to Quickbase and was looking to add a timer to the app/form which I have built. Would you be able to guide me or direct me to the appropriate tutorial to add the time to track duration of time worked on a particular case?

    ------------------------------
    Mohammad Moqueet
    ------------------------------
    Terms & ConditionsAccessibility statement