Jonathan Bernard 122a3bd1e3 Started implementing entry loading in client side.
- Bug fix in ts_entry:new/1. Msspelled ``atomic``.
- Bug fix in ts_json:record_to_ejson/1. For ``ts_entry`` records, the
  Username and TimelineId elements were not being converted from atoms to list.
- Added the entry template for loaded and created entry elements.
- Added ICanHaz.js (which wraps mustache.js) and underscore.js.
- Implemented a naive version of displayEntries() in ts.js.
- Added debug alerts for error cases in ts.js.
- Styling the new entry elements.
2011-03-03 17:09:13 -06:00

193 lines
5.6 KiB
JavaScript

var user = [];
var timelines = [];
var activeTimeline = [];
var entries = [];
var newEntryBar;
/* Setup after the document is ready for manipulation. */
$(document).ready(function(){
newEntryBar = $("#new-entry");
// wire the login dialog using jQuery UI
$("#login-dialog").dialog({
autoOpen: false,
height: 300,
width: 300,
modal: true,
buttons: { Login: function(){login()} }
});
// try to load user information for an authenticated user
$.ajax({
url: "/ts_api/users/",
type: "GET",
error: function(jqXHR, textStatus, error) {
// assume there is no authenticated user, show login dialog
$("#login-dialog").dialog("open"); },
success: function(data, textStatus, jqXHR) {
// load the user information
loadUser(data.user.username); }});
})
/* Read the user's credentials from the login form and perform
* an AJAX request to the API to set the session cookie. */
function login() {
// lookup the login dialog elements
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",
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) {
// load the user information and hide the login dialog
loadUser(name.val());
$("#login-dialog").dialog("close");
}});
}
/* End the current user session and expire any session credentials we
* have aquired. */
function logout(event) {
alert("TODO: log user out via AJAX.");
// TODO: wipe username, timeline, entry variables and displays
event.preventDefault();
}
/* Load and display the user's information and timelines. */
function loadUser(username) {
// call the user_summary API function
$.ajax({
url: "/ts_api/app/user_summary/" + username,
type: "GET",
success: function(data, textStatus, jqXHR) {
// set the user variable
user = data.user;
// set the timelines variable
timelines = data.timelines;
// update the user id display
$("#fullname").text(user.name);
$("#username").text("- " + user.username);
// pre-populate the editable user-info fields
// TODO: not working
$("#fullname-input").text(user.name);
$("#email-input").text(user.email);
// set the active timeline to the first in the list
// TODO: implement a mechanism to remember the last used timeline
// on the server side and respond to that here.
activeTimeline = timelines[0];
// update the timeline display
$("#timeline-name").text(activeTimeline.timeline_id + " |");
$("#timeline-desc").text(activeTimeline.description);
// TODO: populate the drop-down list for the available timeline
// choices
// load the entries for this timeline
loadEntries(user, activeTimeline)
},
error: function(jqXHR, textStatus, error) {
// TODO
alert("TODO: handle error for user load.")
alert(jqXHR.responseText)
}
});
}
/* Read the first 50 entries for a timeline. */
function loadEntries(user, timeline) {
// call the API list_entries function via AJAX
$.ajax({
url: "/ts_api/entries/" + user.username + "/" + timeline.timeline_id + "?order=desc",
type: "GET",
success: function(data, textStatus, jqXHR) {
entries = data.entries;
// push the entries onto the page
displayEntries(entries)
},
error: function(jqXHR, textStatus, error) {
alert(jqXHR.responseText);
}
});
}
/* Push the entries onto the top of the entry display. */
function displayEntries(entries) {
_.each(entries, function(entry) {
newEntryBar.after(ich.entry(entry));
});
}
/* Show/hide the editable user-info panel. */
function toggleUserInfo(event) {
$("#user-info").slideToggle("slow");
event.preventDefault();
}
/* Show/hide the password change controls. */
function showChangePwd(event) { $("#change-pwd").slideToggle("slow"); }
/* Update the user information based on the editable user-info panel. */
function updateUser(event) {
alert("TODO: update user via AJAX.");
event.preventDefault();
}
/* Show/hide the editable timeline-info panel. */
function toggleTimelineInfo(event) {
$("#timeline-info").slideToggle("slow");
event.preventDefault();
}
/* Show the change timeline menu. */
function showTimelineMenu(event) {
alert("TODO: show other timelines via a popup menu");
event.preventDefault();
}
/* Update the timeline details based on the editable timeline-info panel. */
function updateTimeline(event) {
alert("TODO: update timeline via AJAX.");
event.preventDefault();
}
/* Show/hide the add notes panel. */
function showNewNotes(event) { $("#add-notes").slideToggle("slow"); }
/* Create a new entry based on the user's input in the new-entry panel. */
function newEntry(event) {
alert("TODO: create entry vi AJAX");
event.preventDefault();
}