Our company SEKAS GmbH has a proprietary system for keeping track of employee work hours. The system has been in place since 1992. Its an Oracle Forms based system. Recently we decided for various reasons, that we wanted something new. One of the problems with the old system is that employees working at clients sites have no way to book times from remote.

The new system will be a browser based system with a backend running in our company. The browser UI will consist of two parts built with different technologies.

The management side allows maintenance of  core data like available projects and work packages, users, billing information etc. It also allows company management to generate reports and bills etc. This part of the UI will use a classical round trip approach and will only be available on company premises.

The UI for employees on the other hand will allow booking of work time and project/work package times and is based on AngularJS which is an ideal framework for the purpose. It will provide an offline mode which stores entered data in browser local storage and an online mode which keeps the data in sync with the server on premises.

The picture below shows my prototype for the employee UI.

The red rows in the left hand table are weekends and German hollidays. The golden row is the selected day, for which details are shown on the right.

The Start Stop and Break columns allow the user to enter the working times for a given day. Those times then have to be allotted to projects (or rather work packages which are organized into projects). Various validations highlight different kinds of errors (time > 24:00, illegal time format, Stop Time < Start Time etc.)

Over the next weeks I plan to post a few articles on the gritty details of how this all works and especially how AngularJS can be used effectively to build applications like this.

In the meantime, please play around with the prototype. The link will always take you to the current version. Feel free to View Source and have a look at the JavaScript. It’s not minified. Also if you are interested in tests, have a look at the unit tests and the e2e tests.