Plugin tracking de tiempo

imagen / ashley.adcox
  
10 de Diciembre de 2016   0  

Hace algunos días en un proyecto de autos que estuve trabajando me surgió la necesidad de realizar un tipo de timer como para medir tiempos entre procesos, algo así como un toggl, bueno la idea era sencilla, obtener del server una hora, minuto y segundo especificado y a partir de ahí realizar un tracking del tiempo de forma visual con JS. Algo que me llamó la atención es que en internet habían muy pocos plugins o trozos de código que hicieran eso de forma sencilla, a lo que me propuse a hacer uno que me sirviera y que ademas pudiera compartir ya que una de las características que necesitaba era la de poder incrementar las horas sin que se reinicie como lo haría un reloj, ejemplo, si yo necesitara hacer un tracking de un proceso entonces la idea es que pueda tener la opción de visualizar talvez 53:20:22  (hr.min.sec).

A ese plugin le llamé jquery.clocktracking y decidí compartirlo por medio de un gist en github, ahora quiero platicarles sobre la implementación de este pequeño pero my util plugin (al menos para mí).

 

Lo primero que tenemos que tener es un tag html con esta estructura:

<h2 id="timer" data-hr="4" data-min="30" data-sec="50"></h2>

Como podemos ver este elemento tiene algunos "data-x" mismos que permiten al plugin saber a partir de que hora:minuto:segundo comenzará hacer el tracking del tiempo.

Ahora bien,  lo que tenemos que tener en cuenta es agregar al plugin seguido de jquery de la siguiente manera:

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

<!-- Plugin de tracking-->
  <script src="jquery.clocktracking.js"></script>

Ahora lo único que hace falta es usar al plugin:

  <script>
    $(document).on('ready',function(){
       $('#timer').tracking();
    });
  </script>  

Tendremos como resultado un "timer" que nos servirá para hacer un tracking del tiempo de forma visual, en donde el servidor nos proporcionará a partir de que tiempo tendremos que comenzar.

 

Les dejo el link del gist y del Plunker.

Plunker :  https://plnkr.co/edit/o5ENrBhq0ivKoBV9YZDv?p=preview

Gist: https://gist.github.com/gaspardzul/0b6081faea7fe7bbd61c0a7700094b2a

 

Espero que les sirva de algo este plugin para sus proyectos de tracking de tiempo. 

;)

 

 



Gaspar Dzul

Desarrollador Front End y Móvil.

Temas relacionados