Loggr: Timesheet generator in AJAX 27 August, 2006 — Stuart Brown

(Well, technically DHTML. But AJAX sounds cooler)

Posted in Web Design, Web Tools
Tagged with: , , , , , , ,

One thing that any freelance worker or outside consultant needs is a means to track billable hours - i.e. the time spent working. Time management is a critical part of independent working, and there are a plethora of different ways of recording it - from paper sheets to fully integrated expense calculators that run the gamut. I was having trouble finding one that suited my needs - all time tracking software I've seen is either too difficult to use, too complex, or not free - so I decided to write my own.


It's called Loggr (i.e. 'logger' without the e), and is available at loggr.co.uk. Apologies for the Web2.0 name and style - I know it's a big cliché but I figured I'd go with the current trends (if only to be ironic).

Simplicity is the main aim of Loggr - the interface is designed to be as intuitive as possible, with a minimum level of clutter. It's essentially a replacement for the paper timesheet - a list of events and actions, with their time recorded, and total working times added up. It's essentially a combination between a 'to-do' list and a split lap stopwatch.

loggr screenshot

For me, at least - it's invaluable, as I can note what I'm doing at certain times without much thought - just add the note, press return, and it's added to the bottom of the timesheet. If I'm working, I make sure the checkbox is ticked, put what I'm doing, and Loggr will record the time between stages of work, as well as the total amount of time I've spent working.

Green entries indicate work start points - amber are waypoints (i.e. actions or events that occur during work) and red indicates work stoppage (lunch breaks, etc). Any action outside of working periods will be in dark grey. Comments/notes can be added as well, and although timestamped are not included in staged calculations. They appear smaller, and in light grey.

And that's all there is to it - simple timesheets can be quickly and easily assembled, and Loggr will track the total time spent working, as well as the individual stages and split times.

The controls at the bottom allow you to print the timesheet - a special print-only stylesheet will hide all extraneous detail, leaving just the timesheet itself behind. You can also clear the timesheet, should you wish to start afresh.

Saving the timesheet works in a slightly unconventional manner - rather than prompting you to save a file, the timesheet will be saved automatically to your local computer in a cookie. The data is autosaved when the Loggr page is closed - meaning that when you return to the page, your timesheet will be intact until you elect to clear the sheet.

So there you have it - it's a very simple application, with little in the way of features - but as far as generating timesheets goes, it's ideal for my own needs - and if you can make any use of it, you're welcome to use it for your own needs.

If you have any feature requests, bug reports or any general questions - drop me a line at stuart@stuartbrown.biz. If you've got any great ideas for the development of the application, be sure to share them and I'll endeavor to make them happen!

Take me to the Loggr site!