timestamper/www/index.yaws
Jonathan Bernard 98032e2b89 Added UUIDs to timestamps, refactored the build process
* Added UUIDs to `ts_entry` records. Updated `ts_json:construct_record` to
  respond to `uuid` member properties if present. UUIDs are not required by the
  strict parsing functions in `ts_json` because the client will make a request
  with no UUID if it is a purely new timestamp. IN fact, this is the normal
  case. The UUID is only present when another tool is syncing its copy of this
  timeline wand adding entries that it has created and assigned UUIDs to.
* `ts_entry:new` will create a UUID for a new entry if it does not already have
  one.
* Restructured the build process to put all build artifacts into a dedicated
  `build` subdirectory, instead of mising them in an amongst the source code.
* Added the `uuid` module to the project. It can be found at

      https://gitorious.org/avtobiff/erlang-uuid

* Rewrote asset URLs to use relative paths instead of absolute paths. Relative
  paths are correct in this case, becuase assets always live alongside the HTML
  pages. This change was needed to accomodate the new organization of the JDB
  Labs dev environment, where all projects live under subdirectories of the
  same virtual server instead of subdomains.
* Tweaked the timestamp entry fields in the web UI to save when the field is
  blurred, not just when <Enter> or <Ctrl>-<Enter> is pressed (though those
  still work).
2013-10-11 20:06:31 +00:00

171 lines
7.0 KiB
Plaintext

<!DOCTYPE html>
<html>
<head>
<title>TimeStamper - Simple Time Tracking</title>
<link href='//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="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="//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">(&nbsp;{{id}}&nbsp;)</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>