diff --git a/www/css/ts-screen.css b/www/css/ts-screen.css index d839ea9..4bfe532 100644 --- a/www/css/ts-screen.css +++ b/www/css/ts-screen.css @@ -47,6 +47,9 @@ input { #timeline .timeline-id { display: inline-block; } #timeline .timeline-desc-input, #timeline .timeline-id-input { + font-family: inherit; + font-size: inherit; + color: #222222; display: none; } #timeline.edit-id .timeline-id-input { display: inline-block; } @@ -117,6 +120,9 @@ input { display: inline-block; font-size: larger; } #user .fullname-input { + font-family: inherit; + font-size: inherit; + color: #222222; display: none; } #user.edit-fullname .fullname-input { display: inline-block; } @@ -147,6 +153,8 @@ input { padding: 0 2rem; } #entry-list .day-seperator h4, #entry-list .day-seperator h5 { display: inline-block; } + #entry-list .day-seperator h5 { + color: #667; } #entry-list #new-entry { margin-top: 0.5em; padding: 0 2em; @@ -154,9 +162,9 @@ input { padding: 0 2rem; } #entry-list .timestamp, #entry-list .timestamp-input, #entry-list .duration { text-align: right; - width: 10%; } + width: 14%; } #entry-list .mark, #entry-list .mark-input { - width: 78%; } + width: 70%; } #entry-list .entry { font-family: Cantarell; padding: 0 2em; @@ -165,7 +173,7 @@ input { display: inline-block; } #entry-list .entry .mark-input, #entry-list .entry .timestamp-input { display: none; } - #entry-list .entry .notes { + #entry-list .entry .notes, #entry-list .entry .notes-input { display: none; } #entry-list .entry.edit-mark .mark-input { display: inline-block; } @@ -175,6 +183,8 @@ input { display: inline-block; } #entry-list .entry.edit-timestamp .timestamp { display: none; } + #entry-list .entry.edit-notes .notes-input { + display: block; } .drop-menu { position: relative; } diff --git a/www/css/ts-screen.scss b/www/css/ts-screen.scss index 307f62c..009f712 100644 --- a/www/css/ts-screen.scss +++ b/www/css/ts-screen.scss @@ -65,7 +65,12 @@ input { .timeline-id { display: inline-block; } - .timeline-desc-input, .timeline-id-input { display: none; } + .timeline-desc-input, .timeline-id-input { + font-family: inherit; + font-size: inherit; + color: $darkBg; + display: none; + } &.edit-id { .timeline-id-input { display: inline-block; } @@ -165,7 +170,12 @@ input { font-size: larger; } - .fullname-input { display: none; } + .fullname-input { + font-family: inherit; + font-size: inherit; + color: $darkBg; + display: none; + } &.edit-fullname{ .fullname-input { display: inline-block; } @@ -204,6 +214,8 @@ input { padding: 0 2rem; h4, h5 { display: inline-block; } + + h5 { color: #667; } } #new-entry { @@ -216,10 +228,10 @@ input { .timestamp, .timestamp-input, .duration { text-align: right; - width: 10%; + width: 14%; } - .mark, .mark-input { width: 78%; } + .mark, .mark-input { width: 70%; } .entry { @@ -231,7 +243,7 @@ input { .mark-input, .timestamp-input { display: none; } - .notes { display: none; } + .notes, .notes-input { display: none; } &.edit-mark { .mark-input { display: inline-block; } @@ -243,6 +255,8 @@ input { .timestamp { display: none; } } + &.edit-notes .notes-input { display: block; } + } } diff --git a/www/js/ts.js b/www/js/ts.js index 2472c7c..e47d44a 100644 --- a/www/js/ts.js +++ b/www/js/ts.js @@ -98,18 +98,31 @@ $(document).ready(function(){ "keypress .timestamp-input" : "updateOnEnter" }, - initialize: function() { + initialize: function(options) { _.bindAll(this, 'render', 'close', 'editTImestamp', - 'editMark', 'updateOnEnter'); + 'editMark', 'updateOnEnter', 'getViewModel'); this.model.bind('change', this.render); this.model.view = this; + + this.nextModel = options.nextModel; }, render: function() { - $(this.el).html(ich.entryTemplate(this.model.toJSON())); + $(this.el).html(ich.entryTemplate(this.getViewModel())); + this.$(".mark-input").bind('blur', this.close); + this.$(".timestamp-input").bind('blur', this.close); return this; }, + update: function() { + var data = this.getViewModel(); + this.$('.mark').text(data.mark); + this.$('.mark-input').val(data.mark); + this.$('.timestamp').text(data.start); + this.$('.timestamp-input').val(data.timestamp); + this.$('.duration').text(data.duration); + }, + editMark: function() { $(this.el).addClass('edit-mark'); this.$('.mark-input').focus(); @@ -122,16 +135,62 @@ $(document).ready(function(){ return this; }, + getViewModel: function() { + var data = this.model.toJSON(); + + // create start and duration values + var tsDate = new Date(data.timestamp); + data.start = this.formatStart(tsDate); + data.duration = this.formatDuration(this.model, this.nextModel); + return data; + }, + close: function() { + $(this.el).removeClass('edit-mark edit-timestamp'); + }, + + save: function() { this.model.save({ mark: this.$('.mark-input').val(), timestamp: this.$('.timestamp-input').val()}); - $(this.el).removeClass('edit-mark edit-timestamp'); - this.render(); + this.update(); }, updateOnEnter: function(e) { - if(e.keyCode == 13) this.close(); + if(e.keyCode == 13) { this.save(); this.close(); } + }, + + formatStart: function(startDate) { + // 24 hour + // return startDate.getHours() + ":" + startDate.getMinutes(); + + // 12 hour + var hour = startDate.getHours() % 12; + return (hour == 0 ? 12 : hour) + ":" + startDate.getMinutes() + + " " + (startDate.getHours() > 11 ? "pm" : "am"); + }, + + formatDuration: function(model, nextModel) { + var d1 = new Date(model.get('timestamp')); + var d2, diff; + var day, hr, min; + + // if no next model, assume it's an onoing task + if (nextModel) { d2 = new Date(nextModel.get('timestamp')); } + else { d2 = new Date(); } + + diff= d2.getTime() - d1.getTime(); + day = Math.floor(diff / 86400000); // milliseconds in a day + diff %= 86400000; + + hr = Math.floor(diff / 3600000); // millis in an hour + diff %= 3600000; + + min = Math.floor(diff / 60000); // millis in a minute + + return (day > 0 ? day + "d " : "") + + (hr > 0 ? hr + "hr " : "") + + min + "m "; } }); @@ -151,8 +210,9 @@ $(document).ready(function(){ this.entryContainer = this.$("#entries") }, - addOne: function(entry) { + addOne: function(entry, nextEntry) { if (!entry.view) { new TS.EntryView({model: entry}); } + entry.view.nextModel = nextEntry this.entryContainer.prepend(entry.view.render().el); }, @@ -167,12 +227,21 @@ $(document).ready(function(){ this.collection.create({mark: entryMark, notes: '', timestamp: getUTCTimestamp()}).fetch(); - } + + // clear the input for the next entry + this.$("#new-entry-input").val(""); + + } }, render: function() { this.entryContainer.empty(); - this.collection.each(this.addOne); + for (var i = 0, len = this.collection.length; i < len; i++) { + var entry = this.collection.at(i); + var nextEntry = (i + 1 < len ? this.collection.at(i + 1) : null); + + this.addOne(entry, nextEntry); + } } }); @@ -236,7 +305,7 @@ $(document).ready(function(){ }, updateOnEnter: function(e) { - if (e.keyCode == 13) this.close(); + if (e.keyCode == 13) { this.close(); this.save() } } });