f3ef7db088
* Resolved D0003: Add day separators.
* Created ``daySeparatorTemplate`` for ICanHaz templating.
* Refactored ``EntryListView.render`` to spit out day separators in between
days on the timeline. Fixed the "Today" separator to the top of the entry
container. We no longer prepend entries to the entry container, we now put
them after the top separator in the entry container.
* Created ``EntryListView.formatDaySeparator`` to format the labels
according to the relative time to today: "Yesterday", "Last Monday",
"Friday, May 28" for example.
* Removed the cludgier ``toWords``, ``daysApart``, and `` capitalize``
functions that were going to serve the same purpose.
* Resolved D0021: Constrain notes width to mark.
171 lines
7.0 KiB
Plaintext
171 lines
7.0 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>TimeStamper - Simple Time Tracking</title>
|
|
<link href='http://fonts.googleapis.com/css?family=Anonymous+Pro|Arvo|Bentham|Cantarell|Josefin+Sans' rel='stylesheet' type='text/css'>
|
|
<link rel="stylesheet" media="screen" href="/css/ts-screen.css" type="text/css"/>
|
|
<!-- Needed for IE, but I'm not sure if I'm going to support IE with this tool. -->
|
|
<!--<script type="text/javascript" src="/js/json2.js"></script>-->
|
|
<!-- PROD -->
|
|
<!--
|
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
|
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
|
|
-->
|
|
<!-- DEV -->
|
|
<script type="text/javascript" src="/js/jquery-1.5.js"></script>
|
|
|
|
<script type="text/javascript" src="/js/showdown.js"></script>
|
|
<script type="text/javascript" src="/js/underscore.js"></script>
|
|
<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>
|
|
<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),
|
|
|
|
% 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 type="text/html" id="userTemplate">
|
|
<div class="fullname">{{name}}</div>
|
|
<input class="fullname-input" type="text" value="{{name}}"/></div>
|
|
<div class="user-menu">
|
|
<div class="username"> - {{id}}</div>
|
|
<ul class="user-menu-items">
|
|
<li><a href="#">logout</a></li>
|
|
<li><a href="#">user info</a></li>
|
|
</ul>
|
|
</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">
|
|
<li class="new-timeline-link"><a href="#">
|
|
<img src="/img/round_plus_icon_16.png"/>new</a></li>
|
|
</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">
|
|
<img class="expand-entry" src="/img/br_down_icon_16.png"/>
|
|
<img class="collapse-entry" src="/img/br_up_icon_16.png"/>
|
|
<span>{{mark}}</span>
|
|
</div>
|
|
<input class="mark-input" type="text" value="{{mark}}"/>
|
|
<div class="timestamp">{{start}}</div>
|
|
<input class="timestamp-input" type="text" value="{{timestamp}}"/>
|
|
<div class="duration">{{duration}}</div>
|
|
<div class="notes">
|
|
<div class="notes-text">{{notes}}</div>
|
|
<textarea class="notes-input" rows="10">{{notes}}</textarea>
|
|
</div>
|
|
</script>
|
|
<script type="text/html" id="daySeparatorTemplate">
|
|
<div class="day-seperator">
|
|
<h4 class="mark">{{separatorLabel}}</h4>
|
|
<h5 class="timestamp">start</h5>
|
|
<h5 class="duration">duration</h5>
|
|
</div>
|
|
</script>
|
|
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- == LOGIN FORM == -->
|
|
<div id="login" class="hidden dialog">
|
|
<div class="container">
|
|
<h2>Login</h2>
|
|
<div><label>Username: </label><input type="text" id="username-input"></input></div>
|
|
<div><label>Password: </label><input type="password" id="password-input"></input></div>
|
|
<div class="button-panel">
|
|
<span class='validate-tips'></span>
|
|
<div id="login-button" class="dialog-button"><a href="#">login</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- == NEW TIMELINE FORM == -->
|
|
<div id="new-timeline" class="hidden dialog">
|
|
<div class="container">
|
|
<h2>Create a new timeline:</h2>
|
|
<div><label>Timeline ID: </label><input type="text" id="new-timeline-id"></input></div>
|
|
<div><label>Description: </label><input type="text" id="new-timeline-desc"></input></div>
|
|
<div class="button-panel">
|
|
<span class='validate-tips'></span>
|
|
<div id="new-timeline-create" class="dialog-button"><a href="#">create</a></div>
|
|
<div id="new-timeline-cancel" class="dialog-button"><a href="#">cancel</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="top">
|
|
|
|
<!-- == TIMELINE == -->
|
|
<div id="timeline"><!-- replaced on login by app -->
|
|
<div class="timeline-desc">Login</div>
|
|
</div>
|
|
|
|
<!-- == USER == -->
|
|
<div id="user"><!-- replaced on login by app -->
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="entry-list">
|
|
<div id="new-entry">
|
|
<input id="new-entry-input" class="mark-input"
|
|
placeholder="Start a new task..." type="text" />
|
|
</div>
|
|
|
|
<div id="entries"></div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
Copyright 2011 <a href="http://www.jdb-labs.com"><span class="logo">JDB Labs</span> LLC.</a>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|