Merge pull request #875 from andy-g/live_update_durations

Implementing angular-moment to automatically update dates / durations

server/app/index.html

@@ -29,6 +29,7 @@
 		<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.8/angular-resource.min.js"></script>
 		<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
 		<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/moment.min.js"></script>
+		<script src="//cdnjs.cloudflare.com/ajax/libs/angular-moment/0.9.0/angular-moment.min.js"></script>
 
 		<!-- main javascript application -->
 		<script src="/static/scripts/line_formatter.js"></script>

server/app/scripts/app.js

@@ -2,9 +2,14 @@
 
 var app = angular.module('app', [
   'ngRoute',
-  'ui.filters'
+  'ui.filters',
+  'angularMoment'
 ]);
 
+angular.module('app').constant('angularMomentConfig', {
+    preprocess: 'unix'
+});
+
 // First, parse the query string
 var params = {}, queryString = location.hash.substring(1),
 	regex  = /([^&=]+)=([^&]*)/g, m;

server/app/scripts/filters/filters.js

@@ -25,7 +25,7 @@
 
   /**
    * toDate is a helper function that returns a human readable
-   * string gor the given unix date.
+   * string for the given unix date.
    */
   function toDate() {
     return function(date) {

server/app/views/commit.html

@@ -8,14 +8,14 @@
 		</div>
 
 		<dl ng-if="commit.duration != 0">
-			<dd><h1>{{ commit.duration | toDuration}}</h1></dd>
+			<dd><h1>{{ commit.duration | amDurationFormat:'seconds':false }}</h1></dd>
 		</dl>
 
 		<dl ng-include="'/static/views/commit_detail.html'" ng-show="commit.pull_request.length == 0"></dl>
 		<dl ng-include="'/static/views/commit_detail_pr.html'" ng-show="commit.pull_request.length != 0"></dl>
-		<dd ng-if="commit.finished_at != 0">{{ commit.finished_at | fromNow }}</dd>
+		<dd ng-if="commit.finished_at != 0" am-time-ago="{{ commit.finished_at }}"></dd>
-		<dd ng-if="commit.finished_at == 0 && commit.started_at != 0">Started {{ commit.started_at | fromNow }}</dd>
+		<dd ng-if="commit.finished_at == 0 && commit.started_at != 0">Started <span am-time-ago="{{ commit.started_at }}"></span></dd>
-		<dd ng-if="commit.finished_at == 0 && commit.started_at == 0">Created {{ commit.created_at}}</dd>
+		<dd ng-if="commit.finished_at == 0 && commit.started_at == 0">Created <span am-time-ago="{{ commit.created_at }}"></span></dd>
 	</div>
 </aside>
 

server/app/views/repo.html

@@ -70,11 +70,11 @@
 							<td><a href='{{ repo.url }}/commit/{{ commit.sha }}'>{{ commit.sha | shortHash }}</a> (<a href='{{ repo.url }}/tree/{{ commit.branch }}'>{{ commit.branch }}</a>)</td>
 							<td>{{ commit.author }}</td>
 
-							<td ng-if="commit.finished_at != 0" title="{{ commit.duration }} seconds">{{ commit.duration | toDuration }}</td>
+							<td ng-if="commit.finished_at != 0" title="{{ commit.duration }} seconds">{{ commit.duration | amDurationFormat:'seconds':false }}</td>
-							<td ng-if="commit.finished_at == 0 && commit.started_at != 0">{{ commit.started_at | fromNow }}</td>
+							<td ng-if="commit.finished_at == 0 && commit.started_at != 0" am-time-ago="{{ commit.started_at }}" am-without-suffix="true"></td>
-							<td ng-if="commit.finished_at == 0 && commit.started_at == 0">-</td>
+							<td ng-if="commit.finished_at == 0 && commit.started_at == 0" am-time-ago="{{ commit.created_at }}" am-without-suffix="true"></td>
 
-							<td ng-if="commit.finished_at != 0" title="{{ commit.finished_at * 1000 | date:'medium' }}">{{ commit.finished_at | fromNow }}</td>
+							<td ng-if="commit.finished_at != 0" title="{{ commit.finished_at * 1000 | date:'medium' }}" am-time-ago="{{ commit.finished_at }}"></td>
 							<td ng-if="commit.finished_at == 0">-</td>
 						</tr>
 					</tbody>
@@ -88,24 +88,24 @@
 				<a class="pure-u-1 pure-u-md-1-4 pure-u-lg-1-4 pure-u-xl-1-4 card card" ng-href="/{{ repo | fullPath }}/{{ commit.branch }}/{{ commit.sha }}" ng-repeat="commit in commits | filter:{ branch:group.branch }:true | limitTo:4" data-status="{{ commit.status }}">
 					<div class="l-box">
 						<h2>{{ commit.message }}</h2>
-						<em ng-if="commit.finished_at != 0">{{ commit.author }}<br/>{{ commit.finished_at | fromNow }}</em>
+						<em ng-if="commit.finished_at != 0">{{ commit.author }}<br/><span am-time-ago="{{ commit.finished_at }}"></span></em>
-						<em ng-if="commit.finished_at == 0 && commit.started_at != 0">{{ commit.author }}<br/>Started {{ commit.started_at | fromNow }}</em>
+						<em ng-if="commit.finished_at == 0 && commit.started_at != 0">{{ commit.author }}<br/>Started <span am-time-ago="{{ commit.started_at }}"></span></em>
-						<em ng-if="commit.finished_at == 0 && commit.started_at == 0">{{ commit.author }}<br/>Created {{ commit.created_at}}</em>
+						<em ng-if="commit.finished_at == 0 && commit.started_at == 0">{{ commit.author }}<br/>Created <span am-time-ago="{{ commit.created_at }}"></span></em>
 						<img ng-src="{{ commit.gravatar | gravatar }}" />
 					</div>
 				</a>
 			</div>
 		</section>
 
-		<section ng-if="(commits | pullRequests).length!=0 && layout == 'grid'"">
+		<section ng-if="(commits | pullRequests).length!=0 && layout == 'grid'">
 			<div class="pure-g cards">
 				<h2 class="pure-u-1" style="font-size:22px;margin-bottom:20px;"><i class="fa fa-code-fork"></i> Pull Requests</h2>
 				<a class="pure-u-1 pure-u-md-1-4 pure-u-lg-1-4 pure-u-xl-1-4 card card" ng-href="/{{ repo | fullPath }}/{{ commit.branch }}/{{ commit.sha }}" ng-repeat="commit in commits | pullRequests | limitTo:4" data-status="{{ commit.status }}">
 					<div class="l-box">
 						<h2>{{ commit.message }}</h2>
-						<em ng-if="commit.finished_at != 0">{{ commit.author }}<br/>{{ commit.finished_at | fromNow }}</em>
+						<em ng-if="commit.finished_at != 0">{{ commit.author }}<br/><span am-time-ago="{{ commit.finished_at }}"></span></em>
-						<em ng-if="commit.finished_at == 0 && commit.started_at != 0">{{ commit.author }}<br/>Started {{ commit.started_at | fromNow }}</em>
+						<em ng-if="commit.finished_at == 0 && commit.started_at != 0">{{ commit.author }}<br/>Started <span am-time-ago="{{ commit.started_at }}"></span></em>
-						<em ng-if="commit.finished_at == 0 && commit.started_at == 0">{{ commit.author }}<br/>Created {{ commit.created_at}}</em>
+						<em ng-if="commit.finished_at == 0 && commit.started_at == 0">{{ commit.author }}<br/>Created <span am-time-ago="{{ commit.created_at }}"></span></em>
 						<img ng-src="{{ commit.gravatar | gravatar }}" />
 					</div>
 				</a>