{"id":176,"date":"2012-06-15T12:13:46","date_gmt":"2012-06-15T10:13:46","guid":{"rendered":"http:\/\/bininda.com\/blog\/?p=176"},"modified":"2012-06-15T14:14:13","modified_gmt":"2012-06-15T12:14:13","slug":"ptr","status":"publish","type":"post","link":"http:\/\/bininda.com\/blog\/2012\/06\/ptr\/","title":{"rendered":"Project Time Recorder &#8211; Powered by AngularJS"},"content":{"rendered":"<p><a href=\"http:\/\/www.sekas.de\/ptr\"><img decoding=\"async\" loading=\"lazy\" class=\"alignright size-thumbnail wp-image-216\" title=\"PTR\" src=\"http:\/\/bininda.com\/blog\/wp-content\/uploads\/2012\/06\/scalendar-5122-150x150.png\" alt=\"\" width=\"150\" height=\"150\" srcset=\"http:\/\/bininda.com\/blog\/wp-content\/uploads\/2012\/06\/scalendar-5122-150x150.png 150w, http:\/\/bininda.com\/blog\/wp-content\/uploads\/2012\/06\/scalendar-5122-500x500.png 500w, http:\/\/bininda.com\/blog\/wp-content\/uploads\/2012\/06\/scalendar-5122.png 512w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/a><br \/>\nOur company\u00a0<a title=\"SEKAS GmbH\" href=\"http:\/\/www.sekas.de\">SEKAS GmbH<\/a>\u00a0has a\u00a0proprietary 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.<\/p>\n<p>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.<\/p>\n<p>The management side allows maintenance of \u00a0core 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.<\/p>\n<p>The UI for employees on the other hand will allow booking of work time and project\/work package times and is based on\u00a0<a title=\"AngularJS\" href=\"http:\/\/angularjs.org\">AngularJS<\/a>\u00a0which 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.<\/p>\n<p>The picture below shows my\u00a0<a title=\"SEKAS PTR\" href=\"http:\/\/sekas.de\/ptr\">prototype for the employee UI<\/a>.<\/p>\n<p style=\"text-align: center;\"><a title=\"AZVW\" href=\"http:\/\/sekas.de\/ptr\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\" wp-image-193 aligncenter\" title=\"SEKAS AZVW\" src=\"http:\/\/bininda.com\/blog\/wp-content\/uploads\/2012\/06\/azvwscreen.png\" alt=\"\" width=\"710\" height=\"530\" srcset=\"http:\/\/bininda.com\/blog\/wp-content\/uploads\/2012\/06\/azvwscreen.png 1184w, http:\/\/bininda.com\/blog\/wp-content\/uploads\/2012\/06\/azvwscreen-500x373.png 500w, http:\/\/bininda.com\/blog\/wp-content\/uploads\/2012\/06\/azvwscreen-1024x764.png 1024w\" sizes=\"(max-width: 710px) 100vw, 710px\" \/><\/a><\/p>\n<p>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.<\/p>\n<p>The Start Stop and Break columns allow the user to enter the working times for a given day. Those times then have to be\u00a0allotted\u00a0to projects (or rather work packages which are organized into projects). Various validations highlight different kinds of errors (time &gt; 24:00, illegal time format, Stop Time &lt; Start Time etc.)<\/p>\n<p>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.<\/p>\n<p>In the meantime, please play around with the\u00a0<a href=\"http:\/\/www.sekas.de\/ptr\" target=\"_top\">prototype<\/a>. The link will always take you to the current version. Feel free to\u00a0<em>View Source<\/em>\u00a0and have a look at the JavaScript. It&#8217;s not minified. Also if you are\u00a0interested\u00a0in tests, have a look at the\u00a0<a title=\"PTR Unit Tests\" href=\"http:\/\/www.sekas.de\/ptr\/ptr-0.2.0\/test\/html\/SpecRunner.html\" target=\"_top\">unit tests<\/a>\u00a0and the\u00a0<a title=\"AZVW End to End Tests\" href=\"http:\/\/www.sekas.de\/ptr\/ptr-0.2.0\/test\/e2e\/runner.html\" target=\"_top\">e2e tests<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Our company\u00a0SEKAS GmbH\u00a0has a\u00a0proprietary 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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32,31],"tags":[],"_links":{"self":[{"href":"http:\/\/bininda.com\/blog\/wp-json\/wp\/v2\/posts\/176"}],"collection":[{"href":"http:\/\/bininda.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/bininda.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/bininda.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/bininda.com\/blog\/wp-json\/wp\/v2\/comments?post=176"}],"version-history":[{"count":37,"href":"http:\/\/bininda.com\/blog\/wp-json\/wp\/v2\/posts\/176\/revisions"}],"predecessor-version":[{"id":209,"href":"http:\/\/bininda.com\/blog\/wp-json\/wp\/v2\/posts\/176\/revisions\/209"}],"wp:attachment":[{"href":"http:\/\/bininda.com\/blog\/wp-json\/wp\/v2\/media?parent=176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/bininda.com\/blog\/wp-json\/wp\/v2\/categories?post=176"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/bininda.com\/blog\/wp-json\/wp\/v2\/tags?post=176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}