Θ ThetaBoard

Managing Projects is Hard

ThetaBoard is Easy

Simple, powerful, real-time project management app for teams

ThetaBoard is currently in beta. Sign up for a FREE account today.

ThetaBoard Screenshot

Time Tracking in ThetaBoard with Harvest

Mar 24th, 2013 / Project Management Time Tracking Harvest

HarvestThetaBoard is designed to be simple enough that you can use it to manage any kind of project. That being said, most of our users are in the IT industry and use ThetaBoard to manage software development projects. One of the most requested features has been the ability to track time at the Card level. To make sure ThetaBoard doesn't get too bloated, we wanted to make sure that if we did add it, that it would not get in the way.

Harvest

Harvest is an excellent time tracking service that we use at ThetaBoard. It's simple to use and very powerful and offer a great tool--the Harvest Platform--that allowed us to add time tracking to ThetaBoard in a very unobtrusive way.

How to Track Time in ThetaBoard

Track time linkLike all of ThetaBoard's add-on features, Harvest time tracking is completely optional. To use this feature, you will need to enable it for your account or on a per-Board level. 

Once enabled, you will see a "Track Time with Harvest" link on each Card. Clicking this link will present you with a dialog box asking you to sign in or register with Harvest (if you haven't already done so). You then will need to associate your ThetaBoard Board with a project you have set up in Harvest.

Start timing Once you have associated your Board with the correct Harvest project, you will be prompted to start tracking time for the Card you have selected. While the timer is running, you will see an indicator on your ThetaBoard Card with a "Stop Timer" link. This indicator is visible even if the Card is collapsed. When you are done with the task, simply click the "Stop Timer" link and confirm the action in the popup dialog.

Stop timingFrom Harvest, you can view the time you have logged for each Card and follow a link from the Harvest time entry back to the related ThetaBoard Card.

Harvest Platform and BackboneJS

ThetaBoard uses BackboneJS to create a rich javascript user interface. The rest of this article will talk about how we added time tracking to ThetaBoard using the Harvest Platform and BackboneJS.

To get started, we needed to include the Harvest library in the bottom of the ThetaBoard html. This will load all of the javascript Harvest needs to integrate.

We need to configure this code slightly for ThetaBoard:

applicationName
Pretty straightforward here, our application name is "ThetaBoard".
permalink
This is a template that Harvest uses to enable links from its timesheets back to ThetaBoard. Placeholders are used for item ("Card"), project ("Board"), and account (not applicable in our case).
skipStyling
By default, Harvest will display its own time tracking image. To make the Harvest integration look more like ThetaBoard, we have set "skipStyling" to true and handle the CSS ourself.

Backbone Views in ThetaBoard

Before we can look at the Harvest Tracking, we need to look at the organization of Backbone views in the ThetaBoard project. At a high level we have a "BoardView" which has a collection of  "ColumnViews" which in turn has a collection of "CardViews".

Card views are even more complex. In addition to itself having several collections of subviews ("CommentViews", "ChecklistViews"  etc), it also has "child" views--single detailed views that encapsulate a single feature. We use these "child" views for items such as the Card title ("TitleView"), Description ("DescriptionView") and now time tracking ("HarvestView"). These "child" views are attached to elements in the "CardView" html template.

The "HarvestView"

To add the new "HarvestView" we first need to modify the "CardView" template to include a placeholder for the "HarvestView". The Harvest Platform code will look for elements with the class "harvest-timer". Because we are going to handle the styling of the timer on our end, we have added two child elements for starting and stopping the timer. This HTML is added to the html template for the "CardView".

The "HarvestView" will be a "child" view of the "CardView". When the "CardViews" are loaded into the Board, the "render" method of the view is called. In this method, we need to initialize and render all of the "child" views it contains--including our "HarvestView".

Typically, the Harvest Platform will bind itself to every element it can find that has a class "harvest-timer". Unfortunately, ThetaBoard loads Cards after the Harvest javascript snippet has loaded. We therefore need to add the Harvest timer to the Card when the Card renders. To do this, we trigger an event "harvest-event:timers:add" in the "HarvestView" render method.

Styling it Up

By default, Harvest Platform inserts a nice looking clock icon which turns a solid blue when you are tracking time. We decided to style the timer ourselves to make the integration with Harvest match the existing look and feel of ThetaBoard. By setting "skipStyling" to "false" when we include the Harvest javascript, we are free to display the timer any way we see fit:

When the timer start, Harvest adds a "running" class to the "harvest-timer" elements. This allows us to show and hide our start and stop buttons as necessary.

Conclusion

Check out Harvest if you are looking for a good time tracking solution and check out ThetaBoard if you are looking for a lightweight project management tool with integrated time tracking!
blog comments powered by Disqus