Trying to tighten up the design. More functionality implemented.
This commit is contained in:
Jonathan Bernard
parent
cf5153c90b
commit
dd3387a0f1
@ -4,19 +4,29 @@
|
||||
*/
|
||||
/* _rounded.scss */
|
||||
* {
|
||||
color: #222222;
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
body {
|
||||
width: 70%;
|
||||
color: #222222;
|
||||
width: 75%;
|
||||
margin: auto; }
|
||||
|
||||
input {
|
||||
border: solid thin #555555;
|
||||
-webkit-box-shadow: inset 0px 2px 4px #CCC;
|
||||
box-shadow: inset 0px 2px 4px #CCC;
|
||||
margin-bottom: 0.5em;
|
||||
font-family: Cantarell; }
|
||||
|
||||
#top {
|
||||
background: #222222;
|
||||
color: #eeeeee;
|
||||
padding: 0.5rem 0;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
background: white;
|
||||
width: 70%; }
|
||||
width: 75%; }
|
||||
#top #fade-bar {
|
||||
background: url("img/fade.png") repeat-x;
|
||||
height: 32px;
|
||||
@ -24,35 +34,32 @@ body {
|
||||
|
||||
#user {
|
||||
font-family: "Josefin Sans";
|
||||
margin-top: -0.3rem;
|
||||
padding: 0 2rem;
|
||||
width: 100%; }
|
||||
#user .fullname, #user .username {
|
||||
display: inline-block;
|
||||
font-size: larger; }
|
||||
#user .fullname-input {
|
||||
display: none; }
|
||||
#user.fullname-edit .fullname-input {
|
||||
#user.edit-fullname .fullname-input {
|
||||
display: inline-block; }
|
||||
#user.fullname-edit .fullname {
|
||||
#user.edit-fullname .fullname {
|
||||
display: none; }
|
||||
#user .drop-menu {
|
||||
display: inline-block; }
|
||||
#user .drop-menu .drop-menu-items {
|
||||
float: right;
|
||||
list-style: none; }
|
||||
#user .drop-menu .drop-menu-items li {
|
||||
float: right;
|
||||
text-align: center;
|
||||
padding-right: 1em; }
|
||||
#user a {
|
||||
display: inline-block;
|
||||
text-decoration: none; }
|
||||
#user a:hover {
|
||||
text-decoration: underline; }
|
||||
margin-top: -0.5em;
|
||||
text-align: right;
|
||||
right: 0;
|
||||
list-style: none;
|
||||
width: 10em; }
|
||||
|
||||
#timeline {
|
||||
border-bottom: thin solid black;
|
||||
border-bottom: thin solid #eeeeee;
|
||||
font-family: Arvo;
|
||||
font-size: 1.5em; }
|
||||
font-size: 1.5em;
|
||||
padding: 0 2rem; }
|
||||
#timeline .timeline-desc {
|
||||
display: inline-block;
|
||||
width: 70%; }
|
||||
@ -76,65 +83,79 @@ body {
|
||||
width: 29%; }
|
||||
#timeline .drop-menu .drop-menu-items {
|
||||
text-align: right;
|
||||
right: 0; }
|
||||
right: 0;
|
||||
width: 172.41%; }
|
||||
#timeline .drop-menu .drop-menu-items .timeline-link {
|
||||
font-size: medium; }
|
||||
|
||||
#entry-list {
|
||||
margin-top: 6rem;
|
||||
padding-bottom: 1rem; }
|
||||
|
||||
#new-entry {
|
||||
margin-top: 5.5em;
|
||||
padding: 0.5em 0.5em; }
|
||||
#new-entry .mark-input, #new-entry .timestamp-input {
|
||||
border: solid thin #555555;
|
||||
-webkit-box-shadow: inset 0px 2px 4px #CCC;
|
||||
box-shadow: inset 0px 2px 4px #CCC;
|
||||
margin-bottom: 0.5em;
|
||||
font-family: Cantarell; }
|
||||
margin-top: 0.5rem;
|
||||
padding: 0 2rem; }
|
||||
#new-entry .mark-input {
|
||||
width: 78%; }
|
||||
#new-entry .edit-mark .mark-input {
|
||||
|
||||
#entries .entry {
|
||||
font-family: Cantarell;
|
||||
padding: 0 2rem; }
|
||||
#entries .entry div {
|
||||
display: inline-block; }
|
||||
#new-entry .edit-mark .mark {
|
||||
#entries .entry .timestamp, #entries .entry .timestamp-input {
|
||||
width: 10%; }
|
||||
#entries .entry .duration {
|
||||
width: 10%; }
|
||||
#entries .entry .mark {
|
||||
width: 78%; }
|
||||
#entries .entry .mark-input, #entries .entry .timestamp-input {
|
||||
display: none; }
|
||||
#new-entry .edit-timestamp .timestamp-input {
|
||||
#entries .entry .notes {
|
||||
display: none; }
|
||||
#entries .entry.edit-mark .mark-input {
|
||||
display: inline-block; }
|
||||
#new-entry .edit-timestamp .timestamp {
|
||||
#entries .entry.edit-mark .mark {
|
||||
display: none; }
|
||||
#entries .entry.edit-timestamp .timestamp-input {
|
||||
display: inline-block; }
|
||||
#entries .entry.edit-timestamp .timestamp {
|
||||
display: none; }
|
||||
|
||||
#entries {
|
||||
padding: 0.5em 0.5em; }
|
||||
#entries .entry {
|
||||
font-family: Cantarell; }
|
||||
#entries .entry div {
|
||||
display: inline-block; }
|
||||
#entries .entry .timestamp, #entries .entry .timestamp-input {
|
||||
width: 10%; }
|
||||
#entries .entry .duration {
|
||||
width: 10%; }
|
||||
#entries .entry .mark {
|
||||
width: 78%; }
|
||||
#entries .entry .mark-input, #entries .entry .timestamp-input {
|
||||
display: none; }
|
||||
#entries .entry .notes {
|
||||
display: none; }
|
||||
.day-seperator {
|
||||
background: #cccccc;
|
||||
color: #222222;
|
||||
font-family: Cantarell;
|
||||
font-weight: bold;
|
||||
margin-top: 1rem;
|
||||
padding: 0 2rem; }
|
||||
|
||||
.drop-menu {
|
||||
position: relative; }
|
||||
.drop-menu .drop-menu-items {
|
||||
background: white;
|
||||
display: none;
|
||||
list-style: none;
|
||||
position: absolute; }
|
||||
.drop-menu .drop-menu-items li {
|
||||
display: inline-block;
|
||||
padding-left: 0.5em; }
|
||||
.drop-menu:hover .drop-menu-items, .drop-menu .drop-menu-items:hover {
|
||||
display: block; }
|
||||
.drop-menu a {
|
||||
display: inline-block;
|
||||
text-decoration: none; }
|
||||
.drop-menu a:hover {
|
||||
text-decoration: underline; }
|
||||
|
||||
.footer {
|
||||
border-top: thin solid black;
|
||||
color: #888888;
|
||||
background: #222222;
|
||||
color: #eeeeee;
|
||||
font-family: Bentham;
|
||||
margin: 1em 0;
|
||||
padding-top: 1em;
|
||||
padding: 1rem 0;
|
||||
text-align: center;
|
||||
width: 100%; }
|
||||
.footer a {
|
||||
color: #888888;
|
||||
color: white;
|
||||
text-decoration: none; }
|
||||
.footer a:hover {
|
||||
text-decoration: underline; }
|
||||
|
||||
@ -5,24 +5,39 @@
|
||||
|
||||
@import "rounded";
|
||||
|
||||
$txtClr: #222;
|
||||
$darkTxt: #222;
|
||||
$lightTxt: #eee;
|
||||
$darkBg: #222;
|
||||
$lightBg: #eee;
|
||||
$medBg: #CCC;
|
||||
|
||||
* {
|
||||
color: $txtClr;
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 70%;
|
||||
color: $darkTxt;
|
||||
width: 75%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
input {
|
||||
border: solid thin lighten($darkTxt, 20%);
|
||||
-webkit-box-shadow: inset 0px 2px 4px #CCC;
|
||||
box-shadow: inset 0px 2px 4px #CCC;
|
||||
margin-bottom: 0.5em;
|
||||
font-family: Cantarell;
|
||||
}
|
||||
|
||||
#top {
|
||||
background: $darkBg;
|
||||
color: $lightTxt;
|
||||
padding: 0.5rem 0;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
background: white;
|
||||
width: 70%;
|
||||
width: 75%;
|
||||
|
||||
#fade-bar {
|
||||
background: url('img/fade.png') repeat-x;
|
||||
@ -34,6 +49,8 @@ body {
|
||||
#user {
|
||||
|
||||
font-family: "Josefin Sans";
|
||||
margin-top: -0.3rem;
|
||||
padding: 0 2rem;
|
||||
width: 100%;
|
||||
|
||||
.fullname, .username {
|
||||
@ -43,7 +60,7 @@ body {
|
||||
|
||||
.fullname-input { display: none; }
|
||||
|
||||
&.fullname-edit {
|
||||
&.edit-fullname{
|
||||
.fullname-input { display: inline-block; }
|
||||
.fullname { display: none; }
|
||||
}
|
||||
@ -51,33 +68,22 @@ body {
|
||||
.drop-menu { display: inline-block; }
|
||||
|
||||
.drop-menu .drop-menu-items {
|
||||
|
||||
float: right;
|
||||
margin-top: -0.5em;
|
||||
text-align: right;
|
||||
right: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
float: right;
|
||||
text-align: center;
|
||||
//margin-top: -0.5em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#timeline {
|
||||
|
||||
border-bottom: thin solid black;
|
||||
border-bottom: thin solid $lightBg;
|
||||
font-family: Arvo;
|
||||
font-size: 1.5em;
|
||||
padding: 0 2rem;
|
||||
|
||||
.timeline-desc {
|
||||
display: inline-block;
|
||||
@ -108,42 +114,34 @@ body {
|
||||
.drop-menu-items {
|
||||
text-align: right;
|
||||
right: 0;
|
||||
width: 172.41%;
|
||||
|
||||
.timeline-link {
|
||||
font-size: medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#new-entry {
|
||||
margin-top: 5.5em;
|
||||
padding: 0.5em 0.5em;
|
||||
#entry-list {
|
||||
margin-top: 6rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mark-input, .timestamp-input {
|
||||
border: solid thin lighten($txtClr, 20%);
|
||||
-webkit-box-shadow: inset 0px 2px 4px #CCC;
|
||||
box-shadow: inset 0px 2px 4px #CCC;
|
||||
margin-bottom: 0.5em;
|
||||
font-family: Cantarell;
|
||||
}
|
||||
#new-entry {
|
||||
margin-top: 0.5rem;
|
||||
padding: 0 2rem;
|
||||
|
||||
.mark-input { width: 78%; }
|
||||
|
||||
.edit-mark {
|
||||
.mark-input { display: inline-block; }
|
||||
.mark { display: none; }
|
||||
}
|
||||
|
||||
.edit-timestamp {
|
||||
.timestamp-input { display: inline-block; }
|
||||
.timestamp { display: none; }
|
||||
}
|
||||
}
|
||||
|
||||
#entries {
|
||||
|
||||
padding: 0.5em 0.5em;
|
||||
|
||||
.entry {
|
||||
|
||||
font-family: Cantarell;
|
||||
padding: 0 2rem;
|
||||
|
||||
div { display: inline-block; }
|
||||
|
||||
@ -157,38 +155,66 @@ body {
|
||||
|
||||
.notes { display: none; }
|
||||
|
||||
&.edit-mark {
|
||||
.mark-input { display: inline-block; }
|
||||
.mark { display: none; }
|
||||
}
|
||||
|
||||
&.edit-timestamp {
|
||||
.timestamp-input { display: inline-block; }
|
||||
.timestamp { display: none; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.day-seperator {
|
||||
background: $medBg;
|
||||
color: $darkBg;
|
||||
font-family: Cantarell;
|
||||
font-weight: bold;
|
||||
margin-top: 1rem;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.drop-menu {
|
||||
position: relative;
|
||||
|
||||
.drop-menu-items {
|
||||
background: white;
|
||||
display: none;
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .drop-menu-items, .drop-menu-items:hover {
|
||||
display: block;
|
||||
}
|
||||
&:hover .drop-menu-items, .drop-menu-items:hover { display: block; }
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
|
||||
border-top: thin solid black;
|
||||
color: lighten($txtClr, 40%);
|
||||
background: $darkBg;
|
||||
color: $lightTxt;
|
||||
font-family: Bentham;
|
||||
margin: 1em 0;
|
||||
padding-top: 1em;
|
||||
padding: 1rem 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
a {
|
||||
color: lighten($txtClr, 40%);
|
||||
color: lighten($lightTxt, 20%);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover { text-decoration: underline; }
|
||||
|
||||
122
www/index.yaws
122
www/index.yaws
@ -20,67 +20,100 @@
|
||||
<script type="text/javascript" src="/js/ICanHaz.js"></script>
|
||||
<script type="text/javascript" src="/js/backbone.js"></script>
|
||||
<script type="text/javascript" src="/js/ts.js"></script>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<script type="text/javascript">
|
||||
<erl>
|
||||
out(YArg) ->
|
||||
Session = ts_api_session:get_session(YArg),
|
||||
case Session of not_logged_in -> {html, "//not logged in"}; session_expired -> {html, "//session expired"};
|
||||
_S ->
|
||||
Username = element(2, Session),
|
||||
|
||||
<script id="timelineLink" type="text/html">
|
||||
<li class="timeline-link"><a href="#">{{id}}</a></li>
|
||||
% get the user
|
||||
{content, _, UserJSON} = ts_api:get_user(YArg, Username),
|
||||
UserRecord = ts_user:lookup(Username),
|
||||
|
||||
% get the timelines
|
||||
{content, _, TimelineListJSON} = ts_api:list_timelines(YArg, Username),
|
||||
|
||||
% get the selected timeline
|
||||
SelectedTimeline = case lists:keyfind(
|
||||
selected_timeline, 1, element(8, UserRecord)) of
|
||||
false -> ts_timeline:list(Username, 0, 1);
|
||||
T -> T
|
||||
end,
|
||||
|
||||
% get entries for this timeline
|
||||
{content, _, EntryListJSON} =
|
||||
ts_api:list_entries(YArg, Username, SelectedTimeline),
|
||||
|
||||
{html, f(
|
||||
"function bootstrap() {~n"
|
||||
" var data = {};~n"
|
||||
" data.user = ~p;~n"
|
||||
" data.timelines = ~p;~n"
|
||||
" data.initialTimelineId = ~p;~n"
|
||||
" data.entries = ~p;~n"
|
||||
" return data;~n"
|
||||
"};",
|
||||
[UserJSON, TimelineListJSON, SelectedTimeline, EntryListJSON])}
|
||||
end.
|
||||
</erl>
|
||||
</script>
|
||||
<script id="entry" type="text/html">
|
||||
<div class="entry">
|
||||
<div class="mark">{{mark}}</div>
|
||||
<input class="mark-input" type="text">{{mark}}</input>
|
||||
<div class="timestamp">{{timestamp}}</div>
|
||||
<input class="timestamp-input" type="text">{{timestamp}}</input>
|
||||
<div class="duration">4<span class="tick-tock">:</span>03<span class="tick-tock">:</span>57</div>
|
||||
<div class="notes">{{notes}}</div>
|
||||
</div>
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="top">
|
||||
<div id="timeline">
|
||||
<span class="timeline-desc">No timeline loaded.</span>
|
||||
<input class="timeline-desc-input" type="text"/>
|
||||
<div class="drop-menu">
|
||||
<div class="timeline-id">( none )</div>
|
||||
<input class="timeline-id-input" type="text"/>
|
||||
<ul class="drop-menu-items">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="user">
|
||||
<div class="fullname">Not Logged In</div>
|
||||
<input class='fullname-input' type='text'/>
|
||||
<script type="text/html" id="userTemplate">
|
||||
<div class="fullname">{{name}}</div>
|
||||
<input class='fullname-input' type='text' value='{{name}}'/></div>
|
||||
<div class='drop-menu'>
|
||||
<div class="username"> - not_logged_in</div>
|
||||
<div class="username"> - {{id}}</div>
|
||||
<ul class="drop-menu-items">
|
||||
<li><a href="#">logout</a></li>
|
||||
<li><a href="#">user info</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/html" id="timelineTemplate">
|
||||
<span class="timeline-desc">{{description}}</span>
|
||||
<input class="timeline-desc-input" type="text" value='{{description}}'/>
|
||||
<div class="drop-menu">
|
||||
<div class="timeline-id">( {{id}} )</div>
|
||||
<input class="timeline-id-input" type="text" value='{{id}}'/>
|
||||
<ul class="drop-menu-items">
|
||||
</ul>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/html" id="timelineLinkTemplate">
|
||||
<li class="timeline-link"><a href="#">{{id}}</a></li>
|
||||
</script>
|
||||
<script type="text/html" id="entryTemplate">
|
||||
<div class="mark">{{mark}}</div>
|
||||
<input class="mark-input" type="text" value="{{mark}}"/>
|
||||
<div class="timestamp">{{timestamp}}</div>
|
||||
<input class="timestamp-input" type="text" value="{{timestamp}}"/>
|
||||
<!-- TODO <div class="duration">4<span class="tick-tock">:</span>03<span class="tick-tock">:</span>57</div>-->
|
||||
<div class="notes">{{notes}}</div>
|
||||
</script>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="top">
|
||||
|
||||
<!-- == TIMELINE == -->
|
||||
<div id="timeline"><!-- rendered by app --></div>
|
||||
|
||||
<!-- == USER == -->
|
||||
<div id="user"><!-- rendered by app --></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="entry-list">
|
||||
<div class="day-seperator">Today</div>
|
||||
<div id="new-entry">
|
||||
<input id="new-entry-input" class="mark-input"
|
||||
placeholder="Start a new task..." type="text" />
|
||||
</div>
|
||||
|
||||
<div id="entries">
|
||||
<div class="entry">
|
||||
<div class="mark">ITHelp: Entering tickets.</div>
|
||||
<input class="mark-input" type="text"/>
|
||||
<div class="timestamp">12:32</div>
|
||||
<input class="timestamp-input" type="text"/>
|
||||
<div class="duration">4<span class="tick-tock">:</span>03<span class="tick-tock">:</span>57</div>
|
||||
<div class="notes">Some notes should go here, but they should be hidden by default</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="entries"></div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
@ -100,6 +133,7 @@
|
||||
</form>
|
||||
<p class="validate-tips"></p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
295
www/js/ts.js
295
www/js/ts.js
@ -20,7 +20,7 @@ $(document).ready(function(){
|
||||
/* Timeline model.
|
||||
* Attributes:
|
||||
* - id
|
||||
* - desc
|
||||
* - description
|
||||
* - created
|
||||
*/
|
||||
TS.TimelineModel = Backbone.Model.extend({
|
||||
@ -56,7 +56,7 @@ $(document).ready(function(){
|
||||
},
|
||||
|
||||
url: function() {
|
||||
return "/entries/" + this.timeline.get('user_id') + "/" + this.timeline.get('id');
|
||||
return "/ts_api/entries/" + this.timeline.get('user_id') + "/" + this.timeline.get('id');
|
||||
}
|
||||
});
|
||||
|
||||
@ -89,6 +89,8 @@ $(document).ready(function(){
|
||||
|
||||
model: TS.EntryModel,
|
||||
|
||||
className: 'entry',
|
||||
|
||||
events: {
|
||||
"dblclick div.mark" : "editMark",
|
||||
"dblclick div.timestamp" : "editTimestamp",
|
||||
@ -104,7 +106,7 @@ $(document).ready(function(){
|
||||
},
|
||||
|
||||
render: function() {
|
||||
$(this.el).html(ich.entry(this.model.toJSON()));
|
||||
$(this.el).html(ich.entryTemplate(this.model.toJSON()));
|
||||
return this;
|
||||
},
|
||||
|
||||
@ -125,6 +127,7 @@ $(document).ready(function(){
|
||||
mark: this.$('.mark-input').val(),
|
||||
timestamp: this.$('.timestamp-input').val()});
|
||||
$(this.el).removeClass('edit-mark edit-timestamp');
|
||||
this.render();
|
||||
},
|
||||
|
||||
updateOnEnter: function(e) {
|
||||
@ -137,7 +140,7 @@ $(document).ready(function(){
|
||||
el: $("#entry-list"),
|
||||
|
||||
events: {
|
||||
"#new-entry" : "createNewEntry"
|
||||
"keypress #new-entry-input" : "createNewEntryOnEnter"
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
@ -153,10 +156,18 @@ $(document).ready(function(){
|
||||
this.entryContainer.prepend(entry.view.render().el);
|
||||
},
|
||||
|
||||
createNewEntry: function() {
|
||||
var entryMark = this.$("#new-entry-input").val();
|
||||
var newEntry = TS.EntryModel({mark: entryMark});
|
||||
this.collection.create({mark: entryMark}).fetch();
|
||||
createNewEntryOnEnter: function(e) {
|
||||
|
||||
if (e.keyCode == 13) {
|
||||
|
||||
// grab the mark data
|
||||
var entryMark = this.$("#new-entry-input").val();
|
||||
|
||||
// create the mark. Immediately fetch to get server-side timestamp
|
||||
this.collection.create({mark: entryMark,
|
||||
notes: '',
|
||||
timestamp: getUTCTimestamp()}).fetch();
|
||||
}
|
||||
},
|
||||
|
||||
render: function() {
|
||||
@ -165,11 +176,10 @@ $(document).ready(function(){
|
||||
}
|
||||
});
|
||||
|
||||
TS.TimelineView = Backbone.View.extend({
|
||||
|
||||
TS.TimelineListView = Backbone.View.extend({
|
||||
el: $("#timeline"),
|
||||
|
||||
model: TS.TimelineModel,
|
||||
collection: TS.TimelineList,
|
||||
|
||||
events: {
|
||||
"dblclick .timeline-id" : "editId",
|
||||
@ -178,18 +188,31 @@ $(document).ready(function(){
|
||||
"keypress .timeline-desc-input" : "updateOnEnter"
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
_.bindAll(this, 'render', 'close', 'editId', 'editDesc',
|
||||
'updateOnEnter');
|
||||
this.model.bind('change', this.render);
|
||||
this.model.view = this;
|
||||
initialize: function(options) {
|
||||
_.bindAll(this, 'render', 'renderOne', 'editId',
|
||||
'editDesc', 'updateOnEnter');
|
||||
|
||||
if (options.initialTimelineId == undefined) {
|
||||
throw "Can not create a TimelineListView without an initial timeline."
|
||||
} else {
|
||||
this.selected = this.collection.get(options.initialTimelineId);
|
||||
}
|
||||
|
||||
this.collection.bind('add', this.renderOne);
|
||||
this.collection.bind('refresh', this.render);
|
||||
},
|
||||
|
||||
renderOne: function(timeline) {
|
||||
this.$('.drop-menu-items').append(
|
||||
ich.timelineLinkTemplate(timeline.toJSON()));
|
||||
},
|
||||
|
||||
render: function() {
|
||||
this.$('.timeline-id').html('( ' +
|
||||
this.model.get('id') + ' )');
|
||||
this.$('.timeline-desc').text(this.model.get('desc'));
|
||||
return this;
|
||||
// render the basic template
|
||||
$(this.el).html(ich.timelineTemplate(this.selected.toJSON()));
|
||||
|
||||
// render the selection list
|
||||
_.each(this.collection.without([this.selected]), this.renderOne);
|
||||
},
|
||||
|
||||
editId: function() {
|
||||
@ -205,39 +228,17 @@ $(document).ready(function(){
|
||||
},
|
||||
|
||||
close: function() {
|
||||
this.model.save({
|
||||
id: this.$('timeline-id-input').val(),
|
||||
desc: this.$('.timeline-desc-input').val()});
|
||||
$(this.el).removeClass('.edit-id .edit-desc');
|
||||
this.selected.save({
|
||||
id: this.$('.timeline-id-input').val(),
|
||||
description: this.$('.timeline-desc-input').val()});
|
||||
$(this.el).removeClass('edit-id edit-desc');
|
||||
this.render();
|
||||
},
|
||||
|
||||
updateOnEnter: function(e) {
|
||||
if (e.keyCode == 13) this.close();
|
||||
}
|
||||
});
|
||||
|
||||
TS.TimelineListView = Backbone.View.extend({
|
||||
el: $("#timeline .drop-menu-items"),
|
||||
|
||||
collection: TS.TimelineList,
|
||||
|
||||
initialize: function() {
|
||||
_.bindAll(this, 'render', 'renderOne');
|
||||
this.collection.bind('add', this.renderOne);
|
||||
this.collection.bind('refresh', this.render);
|
||||
this.collection.view = this;
|
||||
},
|
||||
|
||||
renderOne: function(timeline) {
|
||||
if (!timeline.view) { new TS.TimelineView(timeline); }
|
||||
$(this.el).append(ich.timelineLink(timeline.toJSON()));
|
||||
},
|
||||
|
||||
render: function() {
|
||||
$(this.el).remove(".timeline-link");
|
||||
this.collection.each(this.renderOne);
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
TS.UserView = Backbone.View.extend({
|
||||
@ -258,25 +259,24 @@ $(document).ready(function(){
|
||||
},
|
||||
|
||||
render: function() {
|
||||
this.$('.fullname').text(this.model.get('name'));
|
||||
this.$('.username').text(" - " + this.model.get('id'));
|
||||
$(this.el).html(ich.userTemplate(this.model.toJSON()));
|
||||
return this;
|
||||
},
|
||||
|
||||
editFullname: function() {
|
||||
$(this.el).addClass('.edit-fullname');
|
||||
$(this.el).addClass('edit-fullname');
|
||||
this.$('.fullname-input').focus();
|
||||
return this;
|
||||
},
|
||||
|
||||
close: function() {
|
||||
this.model.set({name: this.$('.fullname-input').val()});
|
||||
this.model.set({name: this.$('fullname-input').val()});
|
||||
this.model.save();
|
||||
$(this.el).removeClass('.edit-fullname');
|
||||
$(this.el).removeClass('edit-fullname');
|
||||
},
|
||||
|
||||
updateOnEnter: function(e) {
|
||||
if (keyCode == 13) this.close();
|
||||
if (e.keyCode == 13) this.close();
|
||||
}
|
||||
});
|
||||
|
||||
@ -285,71 +285,152 @@ $(document).ready(function(){
|
||||
el: $("body"),
|
||||
|
||||
events: {
|
||||
'click #timeline .drop-menu-items a': 'selectTimeline',
|
||||
'keypress #new-entry-input' : 'newTimestamp',
|
||||
'click #timeline .drop-menu-items a': 'selectTimeline'
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
_.bindAll(this, 'render');
|
||||
|
||||
_.bindAll(this, 'initializeViews', 'loadInitialData');
|
||||
|
||||
appThis = this;
|
||||
|
||||
// create the login dialog
|
||||
this.loginDialog = new TS.LoginView
|
||||
|
||||
if (window.bootstrap) { this.initializeData(window.bootstrap()) }
|
||||
else {
|
||||
// this is async (waiting for user input)
|
||||
this.loginDialog.authenticate(function() {
|
||||
appThis.initializeData(appThis.loadInitialData())});
|
||||
}
|
||||
},
|
||||
|
||||
renderTimelineList: function() {
|
||||
var tlUL = this.$('#timeline ul.drop-menu-items');
|
||||
//var curTimeline =
|
||||
//var remTimelines = TS.user.timelines.filter(function(timeline)
|
||||
initializeData: function(data) {
|
||||
|
||||
// create user data
|
||||
this.user = {};
|
||||
this.user.model = new TS.UserModel(data.user);
|
||||
this.user.view = new TS.UserView({model: this.user.model});
|
||||
|
||||
// create timeline models from the bootstrapped data
|
||||
var tlModels = _.map(data.timelines, function(timeline) {
|
||||
return new TS.TimelineModel(timeline);
|
||||
});
|
||||
|
||||
// create the timeline list collection
|
||||
this.timelines = {};
|
||||
this.timelines.collection = new TS.TimelineList(
|
||||
tlModels, {user: this.user.model});
|
||||
this.timelines.view = new TS.TimelineListView(
|
||||
{collection: this.timelines.collection,
|
||||
initialTimelineId: data.initialTimelineId});
|
||||
|
||||
// create entry models from the bootstrapped data
|
||||
var entryModels = _.map(data.entries, function(entry) {
|
||||
return new TS.EntryModel(entry);
|
||||
});
|
||||
|
||||
// create the entry collection
|
||||
this.entries = {};
|
||||
this.entries.collection = new TS.EntryList(entryModels,
|
||||
{timeline: this.timelines.view.selected});
|
||||
this.entries.view = new TS.EntryListView(
|
||||
{collection: this.entries.collection});
|
||||
|
||||
// render views
|
||||
this.user.view.render();
|
||||
this.timelines.view.render();
|
||||
this.entries.view.render();
|
||||
|
||||
|
||||
},
|
||||
|
||||
loadInitialData: function() {
|
||||
// assume we are authenticated
|
||||
|
||||
var username = $("#login-name").val(); // hackish
|
||||
var data = jQuery.parseJSON($.ajax({
|
||||
url: '/ts_api/app/user_summary/' + username,
|
||||
async: false}).responseText);
|
||||
|
||||
data.initialTimelineId = data.timelines[0].id;
|
||||
data.entries = jQuery.parseJSON($.ajax({
|
||||
url: '/ts_api/entries/' + username + '/' +
|
||||
data.initialTimelineId,
|
||||
async: false}).responseText);
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
TS.LoginView = Backbone.View.extend({
|
||||
el: $("#login-dialog"),
|
||||
|
||||
initialize: function() {
|
||||
_.bindAll(this, 'doLogin', 'authenticate');
|
||||
|
||||
var viewThis = this;
|
||||
$(this.el).dialog({
|
||||
autoOpen: false,
|
||||
height: 400,
|
||||
width: 400,
|
||||
modal: true,
|
||||
buttons: { Login: viewThis.doLogin}
|
||||
});
|
||||
},
|
||||
|
||||
action: function() {},
|
||||
|
||||
authenticate: function(nextAction) {
|
||||
this.action = nextAction;
|
||||
$(this.el).dialog("open");
|
||||
},
|
||||
|
||||
doLogin: function(){
|
||||
var viewThis = this;
|
||||
var name = $("#login-name");
|
||||
var pwd = $("#login-password");
|
||||
|
||||
// call the API via AJAX
|
||||
$.ajax({
|
||||
url: "/ts_api/login",
|
||||
processData: false,
|
||||
data: JSON.stringify({username: name.val(), password: pwd.val()}),
|
||||
type: "POST",
|
||||
async: false,
|
||||
|
||||
error: function(jqXHR, textStatus, error) {
|
||||
// assuming bad credentials (possible server error or bad request,
|
||||
// we should check that, FIXME
|
||||
var tips = $(".validate-tips");
|
||||
tips.text("Incorrect username/password combination.");
|
||||
tips.addClass("ui-state-error");
|
||||
tips.slideDown();
|
||||
},
|
||||
|
||||
success: function(data, textStatus, jqXHR) {
|
||||
$(viewThis.el).dialog("close");
|
||||
viewThis.action()
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// wire the login dialog using jQuery UI
|
||||
$("#login-dialog").dialog({
|
||||
autoOpen: false,
|
||||
height: 400,
|
||||
width: 400,
|
||||
modal: true,
|
||||
buttons: { Login: function(){login()} }
|
||||
});
|
||||
|
||||
$('#login-dialog').dialog('open');
|
||||
TS.app = new TS.AppView;
|
||||
|
||||
})
|
||||
|
||||
function login() {
|
||||
// lookup the login dialog elements
|
||||
var name = $("#login-name");
|
||||
var pwd = $("#login-password");
|
||||
function getUTCTimestamp() {
|
||||
var d = new Date();
|
||||
|
||||
// call the API via AJAX
|
||||
$.ajax({
|
||||
url: "/ts_api/login",
|
||||
processData: false,
|
||||
data: JSON.stringify({username: name.val(), password: pwd.val()}),
|
||||
type: "POST",
|
||||
function pad(n){return n<10 ? '0'+n : n}
|
||||
|
||||
error: function(jqXHR, textStatus, error) {
|
||||
// assuming bad credentials (possible server error or bad request,
|
||||
// we should check that, FIXME
|
||||
var tips = $(".validate-tips");
|
||||
tips.text("Incorrect username/password combination.");
|
||||
tips.addClass("ui-state-error");
|
||||
tips.slideDown();
|
||||
},
|
||||
|
||||
success: function(data, textStatus, jqXHR) {
|
||||
|
||||
// initialize the app data
|
||||
// TODO: possiblty replace by script generated server-side
|
||||
|
||||
// create the user model
|
||||
TS.user = new TS.UserModel({
|
||||
id: name.val(),
|
||||
name: '' });
|
||||
|
||||
// fetch the initial user data from the server
|
||||
TS.user.fetch();
|
||||
|
||||
// create the user view
|
||||
new TS.UserView({model: TS.user});
|
||||
TS.user.view.render();
|
||||
|
||||
}});
|
||||
return d.getUTCFullYear()+'-'
|
||||
+ pad(d.getUTCMonth()+1)+'-'
|
||||
+ pad(d.getUTCDate())+'T'
|
||||
+ pad(d.getUTCHours())+':'
|
||||
+ pad(d.getUTCMinutes())+':'
|
||||
+ pad(d.getUTCSeconds())+'Z';
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user