Duration display, time formatting, UI tweaks.
Client Behaviour (ts.js) ======================== - Created EntryView.getViewModel: translates model data to view data, specifically synthesizes the start time and duration from the timestamp. - Added nextModel option to EntryView, needed for calculating the entry duration. - Created EntryView.formatStart: given the timestamp, return the start time, in HH:MM format. Code is written for both 24hr and 12hr format, still need to write a selector mechanism. For now, uses 12hr format. - Created EntryView.formatDuration: Get the duration of the entry based on this entry's timestamp and and the next entry's timestamp in a display-able form. If nextModel is `null` or `undefined` it is assumed that `model` is the most recent model and duration is calculated against the current time. - Changed EntryView.render to use getViewModel. - Added 'blur' listeners to the mark and timestamp input fields to close them without persisting the changes. - Created EntryView.update: Refresh the display based on the model using the existing DOM elements. - EntryView.save() now uses EntryView.update() instead of EntryView.render() and no longer includes an implicit close() - EntryView.close() has been split into seperate save() and close() functions, to persist the changes and hide the input dialogs, respectively. - EntryListView.addOne now passes the nextModel to EntryViews is creates. - EntryListView.createNewEntryOnEnter() now clear the new intry input after creating a new entry. - EntryListView.render() now uses a for-structure to traverse the entry collection and passes the nextModel (if there is one) to EntryListView.addOne. Client UI (ts-screen.scss) ========================== - Font size, family, and color adjusted on timeline and user input fields. - Day seperator secondary header colors adjusted. - Mark column width shortened, timestamp and duration columns widened. - Styles added for notes UI Client UI (index.yaws) ====================== - Markup changes needed for getViewModel chanes. - Expanded day seperator.
This commit is contained in:
Jonathan Bernard
parent
b22c10c6c2
commit
036177cfed
@ -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; }
|
||||
|
||||
@ -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; }
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
87
www/js/ts.js
87
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() }
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user