Stable version 1.0.2 (Compatible with OutSystems 11)

Uploaded

on 27 April 2024

4.7

(6 ratings)

Details

Elapsed Time component

This component provides a web block that displays the elapsed time (hours, minutes and secondes) from a given Date-Time.

It has no styling, so you can apply your own.

Release notes (1.0.2)

Revised and improved architecture
Component now supports elapsed time higher than 24 hours (thank you Scott Wolber)
Demo references updated to the new component version 1.0.2
Demo references updated to OutsystemsUI version 2.18.4

License (1.0.2)

BSD-3 license (https://opensource.org/licenses/BSD-3-Clause)

Reviews (1)

2023-10-27

in version 1.0.1

A good starting point, but the hours would not calculate anything over a day for me. It would just roll over since the code did not account for the date. I have fixed this for my purpose, and now I can show days when the hours gets >=24.

In the OnInitialize I revised the code to:
var endTime;
var timeDiff;
var seconds;
var minutes;
var hours;

elapsedTimeIntervalRef = setInterval(function() {
    // Process current date-time
    endTime = new Date();
    timeDiff = endTime - $parameters.StartDateTime; // Get the time difference in milliseconds

    // Calculate elapsed hours, minutes, and seconds
    hours = Math.floor(timeDiff / 3600000); // 1 hour = 3600000 milliseconds
    timeDiff %= 3600000;
    minutes = Math.floor(timeDiff / 60000); // 1 minute = 60000 milliseconds
    timeDiff %= 60000;
    seconds = Math.floor(timeDiff / 1000); // 1 second = 1000 milliseconds

    $actions.RefreshElapsedTime(hours, minutes, seconds);
}, 1000);

In the onReady I revised the code to:
var endTime;
var timeDiff;
var seconds;
var minutes;
var hours;

elapsedTimeIntervalRef = setInterval(function() {
    // Process current date-time
    endTime = new Date();
    timeDiff = endTime - $parameters.StartDateTime; // Get the time difference in milliseconds

    // Calculate elapsed hours, minutes, and seconds
    hours = Math.floor(timeDiff / 3600000); // 1 hour = 3600000 milliseconds
    timeDiff %= 3600000;
    minutes = Math.floor(timeDiff / 60000); // 1 minute = 60000 milliseconds
    timeDiff %= 60000;
    seconds = Math.floor(timeDiff / 1000); // 1 second = 1000 milliseconds

    $actions.RefreshElapsedTime(hours, minutes, seconds);
}, 1000);

Team