From 893e2acf89717fedb289547d53c4443c7cd6b93c Mon Sep 17 00:00:00 2001 From: oleg Date: Wed, 26 Aug 2015 01:13:31 +0300 Subject: [PATCH] better datetime and duration formatting --- README.md | 6 ++-- static/js/app/components/builds/item.jade | 28 ++++++++++--------- static/js/app/components/builds/view.jade | 6 ++-- .../app/components/common/dateTime/index.js | 9 ++++-- .../components/common/dateTime/template.jade | 3 +- .../app/components/common/duration/index.jade | 13 +++------ .../app/components/common/duration/index.js | 8 ++++-- .../app/components/projects/view/index.jade | 9 +++--- static/js/requirejs/development.js | 1 + 9 files changed, 46 insertions(+), 37 deletions(-) diff --git a/README.md b/README.md index 420dfe2..88f8c05 100644 --- a/README.md +++ b/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 diff --git a/static/js/app/components/builds/item.jade b/static/js/app/components/builds/item.jade index acf9d80..95c8491 100644 --- a/static/js/app/components/builds/item.jade +++ b/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 diff --git a/static/js/app/components/builds/view.jade b/static/js/app/components/builds/view.jade index a05ae18..3d38152 100644 --- a/static/js/app/components/builds/view.jade +++ b/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 diff --git a/static/js/app/components/common/dateTime/index.js b/static/js/app/components/common/dateTime/index.js index 54de4d4..6e3240b 100644 --- a/static/js/app/components/common/dateTime/index.js +++ b/static/js/app/components/common/dateTime/index.js @@ -2,8 +2,13 @@ define([ 'react', - 'templates/app/components/common/dateTime/template' -], function(React, template) { + 'templates/app/components/common/dateTime/template', + 'moment' +], function(React, template, moment) { + template = template.locals({ + moment: moment + }); + var Component = React.createClass({ propTypes: { date: React.PropTypes.instanceOf(Date) diff --git a/static/js/app/components/common/dateTime/template.jade b/static/js/app/components/common/dateTime/template.jade index 016cea4..4a8e76a 100644 --- a/static/js/app/components/common/dateTime/template.jade +++ b/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() diff --git a/static/js/app/components/common/duration/index.jade b/static/js/app/components/common/duration/index.jade index 161545e..164a77b 100644 --- a/static/js/app/components/common/duration/index.jade +++ b/static/js/app/components/common/duration/index.jade @@ -1,9 +1,4 @@ -span - if this.props.minutes - span= this.props.minutes - | - span min - | - span= this.state.seconds - | - span sec +- var sec = Math.round(this.props.duration / 1000); +- var min = sec >= 60 ? Math.round(sec / 60) : 0; +- var suffix = this.props.withSuffix ? 'in ' : ''; +span(title= sec + ' sec')= suffix + (min ? min + ' min' : sec + ' sec') diff --git a/static/js/app/components/common/duration/index.js b/static/js/app/components/common/duration/index.js index 413b4ee..5ef4ec6 100644 --- a/static/js/app/components/common/duration/index.js +++ b/static/js/app/components/common/duration/index.js @@ -1,8 +1,12 @@ 'use strict'; define([ - 'react', 'templates/app/components/common/duration/index' -], function(React, template) { + 'react', 'templates/app/components/common/duration/index', 'moment' +], function(React, template, moment) { + template = template.locals({ + moment: moment + }); + return React.createClass({ render: template, getInitialState: function() { diff --git a/static/js/app/components/projects/view/index.jade b/static/js/app/components/projects/view/index.jade index 4933e03..931fada 100644 --- a/static/js/app/components/projects/view/index.jade +++ b/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 | - diff --git a/static/js/requirejs/development.js b/static/js/requirejs/development.js index 1e28885..900973d 100644 --- a/static/js/requirejs/development.js +++ b/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' },