better datetime and duration formatting

README.md

@@ -28,9 +28,9 @@ Ui fixes
 
 * speed up console output
 * projects autocomplete
-* add time ago to build list
+* ~~add time ago to build list~~
 * show scm changes on build page
-* react says many many time to console:
+* react says many many times to console:
 	Warning: setState(...): Can only update a mounted or mounting component.
 	This usually means you called setState() on an unmounted component.
 	This is a no-op.
@@ -40,7 +40,7 @@ Ui fixes
 * don't appear build from other project on project page
 * update project info changes (avg duration, etc) on the fly - project page
 * long commit comment breakes build card makeup
-* comment start/duration should be on same place during all steps
+* ~~comment start/duration should be on same place during all steps~~
 
 ## Roadmap
 

static/js/app/components/builds/item.jade

@@ -50,8 +50,22 @@ mixin statusText(build)
 			if build.endDate
 				span.build_info
 					i.fa.fa-fw.fa-clock-o
+					| finished 
+					DateTime(date=new Date(build.endDate))
+					| ,
 					| 
-					Duration(duration=(build.endDate - build.startDate))
+					Duration(duration=(build.endDate - build.startDate), withSuffix=true)
+			else
+				if build.startDate
+					span.build_info
+						i.fa.fa-fw.fa-clock-o
+						| started 
+						DateTime(date=new Date(build.startDate))
+				else
+					span.build_info
+						i.fa.fa-fw.fa-clock-o
+						| queued 
+						DateTime(date=new Date(build.createDate))
 			| 
 			if build.scm
 				span.build_info
@@ -59,18 +73,6 @@ mixin statusText(build)
 					| 
 					span= build.scm.rev.comment
 			| 
-			if !build.endDate
-				if build.startDate
-					span.build_info
-						i.fa.fa-fw.fa-clock-o
-						| started at 
-						DateTime(date=new Date(build.startDate))
-				else
-					span.build_info
-						i.fa.fa-fw.fa-clock-o
-						| queued at 
-						DateTime(date=new Date(build.createDate))
-
 
 	.build_controls
 		if build.completed

static/js/app/components/builds/view.jade

@@ -60,17 +60,17 @@ div.row
 							i.fa.fa-fw.fa-clock-o
 							span 
 							if this.state.build.startDate
-								span Started at 
+								span Started 
 								DateTime(date=new Date(this.state.build.startDate))
 							else
-								span Queued at 
+								span Queued 
 								DateTime(date=new Date(this.state.build.createDate))
 
 						if this.state.build.status !== 'in-progress'
 							p
 								i.fa.fa-fw.fa-circle
 								| 
-								| Finished at 
+								| Finished 
 								if this.state.build.endDate
 									DateTime(date=new Date(this.state.build.endDate))
 								else

static/js/app/components/common/dateTime/index.js

@@ -2,8 +2,13 @@
 
 define([
 	'react',
-	'templates/app/components/common/dateTime/template'
+	'templates/app/components/common/dateTime/template',
-], function(React, template) {
+	'moment'
+], function(React, template, moment) {
+	template = template.locals({
+		moment: moment
+	});
+
 	var Component = React.createClass({
 		propTypes: {
 			date: React.PropTypes.instanceOf(Date)

static/js/app/components/common/dateTime/template.jade

@@ -1 +1,2 @@
-span= this.props.date.toLocaleDateString() + ' ' + this.props.date.toLocaleTimeString()
+- var date = moment(this.props.date);
+span(title= date.format())= date.fromNow()

static/js/app/components/common/duration/index.jade

@@ -1,9 +1,4 @@
-span
+- var sec = Math.round(this.props.duration / 1000);
-	if this.props.minutes
+- var min = sec >= 60 ? Math.round(sec / 60) : 0;
-		span= this.props.minutes
+- var suffix = this.props.withSuffix ? 'in ' : '';
-		| 
+span(title= sec + ' sec')= suffix + (min ? min + ' min' : sec + ' sec')
-		span min
-	| 
-	span= this.state.seconds
-	| 
-	span sec

static/js/app/components/common/duration/index.js

@@ -1,8 +1,12 @@
 'use strict';
 
 define([
-	'react', 'templates/app/components/common/duration/index'
+	'react', 'templates/app/components/common/duration/index', 'moment'
-], function(React, template) {
+], function(React, template, moment) {
+	template = template.locals({
+		moment: moment
+	});
+
 	return React.createClass({
 		render: template,
 		getInitialState: function() {

static/js/app/components/projects/view/index.jade

@@ -23,12 +23,13 @@
 
 		div.text-muted
 			- var lastDoneBuild = this.state.project.lastDoneBuild;
-			p Last successfully build: 
+			p Last successfully built: 
 				if lastDoneBuild
-					| build #
-					span= lastDoneBuild.number
-					|  at 
 					DateTime(date=new Date(lastDoneBuild.endDate))
+					| 
+					| (build #
+					span= lastDoneBuild.number
+					| )
 				else
 					| -
 

static/js/requirejs/development.js

@@ -10,6 +10,7 @@ require.config({
 		reflux: 'libs/reflux/dist/reflux',
 		jquery: 'libs/jquery/jquery',
 		ansi_up: 'libs/ansi_up/ansi_up',
+		moment: 'libs/moment/moment',
 		'bootstrap/collapse': 'libs/bootstrap/js/collapse',
 		'bootstrap/dropdown': 'libs/bootstrap/js/dropdown'
 	},