diff --git a/assets/html/layout.html b/assets/html/layout.html
index 824b7cc..1ba2196 100644
--- a/assets/html/layout.html
+++ b/assets/html/layout.html
@@ -14,6 +14,9 @@
+
+
+
diff --git a/assets/js/application.js b/assets/js/application.js
new file mode 100644
index 0000000..a7a16d8
--- /dev/null
+++ b/assets/js/application.js
@@ -0,0 +1,53 @@
+function Application()
+{
+}
+
+Application.prototype.init = function(menu) {
+ this.session = new Session("#sessid", "#sessinfo");
+ this.user = new User("#user", menu);
+
+ $(window).focus($.proxy(this.session.update, this.session));
+
+ $.getJSON("/version/", function(data) {
+ this.version = data.version;
+ $("#version").empty().append("version: " + this.version);
+ });
+}
+
+Application.prototype.logout = function() {
+ $.ajax({
+ dataType : "json",
+ url : "/authenticate/",
+ type : "DELETE",
+ success : $.proxy(this.user.update, this.user),
+ complete : $.proxy(this.session.update, this.session)
+ });
+}
+
+Application.prototype.login = function(ev) {
+ this._sendForm("#login", "/authenticate/", ev);
+}
+
+Application.prototype.signup = function(ev) {
+ this._sendForm("#signup", "/signup/", ev);
+}
+
+
+Application.prototype._sendForm = function(id, url, ev) {
+ ev.preventDefault();
+ $.ajax({
+ dataType : "json",
+ url : url,
+ type : "POST",
+ data : $(id + " form").serialize(),
+ success : $.proxy(this._formSuccess, this, id),
+ complete : $.proxy(this.session.update, this.session)
+ });
+}
+
+Application.prototype._formSuccess = function(id) {
+ this.user.update();
+ $(id + "-container").addClass("hide");
+}
+
+// vim: set ts=4 sw=4:
diff --git a/assets/js/init.js b/assets/js/init.js
index 47ddd9a..f63fe56 100644
--- a/assets/js/init.js
+++ b/assets/js/init.js
@@ -1,9 +1,11 @@
var sess = null;
$(document).ready(function() {
- var sval = new ServerVal("#randval");
- var asset_exp = /^.*\/(.*)/;
- var asset = '/_main.html';
+ var sval = new ServerVal("#randval");
+ var asset_exp = /^.*\/(.*)/;
+ var asset = '/_main.html';
+ var application = new Application();
+ var menu = new Menu("#menu", application);
var title_adds = {
'/_author.html' : ' - Author',
@@ -23,95 +25,34 @@ $(document).ready(function() {
$("#title").load("/_title.html");
$("#main").load(asset);
+ menu.init(application);
- $("#menu").load("/_menu.html", function() {
- $("div#menu ul li.signup").click(function(e) {
- if ($("#signup-container").hasClass("hide")) {
- $("#login-container").addClass("hide");
- $("#signup-container").css("top", e.pageY + 20);
- $("#signup-container").css("left", e.pageX - 100);
- $("#signup-container").removeClass("hide");
- } else {
- $("#signup-container").addClass("hide");
- }
- });
-
- $("div#menu ul li.login").click(function(e) {
- if ($("#login-container").hasClass("hide")) {
- $("#signup-container").addClass("hide");
- $("#login-container").css("top", e.pageY + 20);
- $("#login-container").css("left", e.pageX - 100);
- $("#login-container").removeClass("hide");
- } else {
- $("#login-container").addClass("hide");
- }
- });
+ $("#statusline").load("/_statusline.html", function() {
+ application.init(menu);
});
- $("#statusline").load("/_statusline.html", function (){
- sess = new Session("#sessinfo", "#sessid", "#user");
-
- $.getJSON(
- "/version/",
- function(data) {
- $("#version").empty().append("version: " + data.version);
- }
- );
-
- $.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess));
- $.getJSON("/currentuser/", $.proxy(sess.loadUserJSON, sess));
-
- $(window).focus(function() {
- $.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess));
+ $("#login").load("/_login.html", function() {
+ $(function() {
+ $("#login-container").draggable();
});
- $("div#menu ul li.logout").click(function() {
- $.ajax({
- dataType: "json",
- url: "/authenticate/",
- type: 'DELETE',
- success: $.proxy(sess.loadUserJSON, sess)
- });
- $.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess));
+ $("#login-close").click(function() {
+ $("#login-container").addClass("hide");
});
- $("#login").load("/_login.html", function (){
- $(function() {
- $("#login-container").draggable();
- });
-
- $("#login-close").click(function (e) {
- $("#login-container").addClass("hide");
- });
-
- $("#login form").submit(function(event) {
- event.preventDefault();
- $.post("/authenticate/",
- $("#login form").serialize(),
- $.proxy(sess.loadUserJSON, sess));
- $("#login-container").addClass("hide");
- $.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess));
- });
+ $("#login form").submit($.proxy(application.login, application));
+ });
+
+ $("#signup").load("/_signup.html", function (){
+ $(function() {
+ $("#signup-container").draggable();
});
- $("#signup").load("/_signup.html", function (){
- $(function() {
- $("#signup-container").draggable();
- });
-
- $("#signup-close").click(function (e) {
- $("#signup-container").addClass("hide");
- });
-
- $("#signup form").submit(function(event) {
- event.preventDefault();
- $.post("/signup/",
- $("#signup form").serialize(),
- $.proxy(sess.loadUserJSON, sess));
- $("#signup-container").addClass("hide");
- $.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess));
- });
+ $("#signup-close").click(function (e) {
+ $("#signup-container").addClass("hide");
});
+
+ $("#signup form").submit($.proxy(application.signup, application));
});
$("#footer").load("/_footer.html", function (){
diff --git a/assets/js/menu.js b/assets/js/menu.js
new file mode 100644
index 0000000..7336785
--- /dev/null
+++ b/assets/js/menu.js
@@ -0,0 +1,56 @@
+function Menu(menuSelector, application, user)
+{
+ this.application = application;
+
+ this.signupSelector = menuSelector + " ul li.signup";
+ this.loginSelector = menuSelector + " ul li.login";
+ this.logoutSelector = menuSelector + " ul li.logout";
+
+ this.menuElement = $(menuSelector);
+}
+
+Menu.prototype.init = function() {
+ this.menuElement.load("/_menu.html", $.proxy(this._menuActions, this));
+}
+
+Menu.prototype.update = function() {
+ if (this.application.user.isEmpty()) {
+ $(this.signupSelector).removeClass("hide");
+ $(this.loginSelector).removeClass("hide");
+ $(this.logoutSelector).addClass("hide");
+ } else {
+ $(this.signupSelector).addClass("hide");
+ $(this.loginSelector).addClass("hide");
+ $(this.logoutSelector).removeClass("hide");
+ }
+}
+
+
+Menu.prototype._menuActions = function() {
+ $(this.signupSelector).click(function(ev) {
+ if ($("#signup-container").hasClass("hide")) {
+ $("#login-container").addClass("hide");
+ $("#signup-container").css("top", ev.pageY + 20);
+ $("#signup-container").css("left", ev.pageX - 100);
+ $("#signup-container").removeClass("hide");
+ } else {
+ $("#signup-container").addClass("hide");
+ }
+ });
+
+ $(this.loginSelector).click(function(ev) {
+ if ($("#login-container").hasClass("hide")) {
+ $("#signup-container").addClass("hide");
+ $("#login-container").css("top", ev.pageY + 20);
+ $("#login-container").css("left", ev.pageX - 100);
+ $("#login-container").removeClass("hide");
+ } else {
+ $("#login-container").addClass("hide");
+ }
+ });
+
+ $(this.logoutSelector)
+ .click($.proxy(this.application.logout, this.application));
+}
+
+// vim: set ts=4 sw=4:
diff --git a/assets/js/session.js b/assets/js/session.js
index dfd1606..eb5528a 100644
--- a/assets/js/session.js
+++ b/assets/js/session.js
@@ -1,109 +1,81 @@
-function Session(sInfo, sId, sUser)
+function Session(idSelector, infoSelector)
{
- this.eUser = $(sUser);
- this.eId = $(sId);
- this.canvas = $(sInfo + " canvas").get(0);
- this.context = this.canvas.getContext("2d");
+ this.idElement = $(idSelector);
+ this.canvas = $(infoSelector + " canvas").get(0);
+ this.context = this.canvas.getContext("2d");
- this.id = "none"
- this.timeout = 0;
- this.timeleft = 0;
- this.email = "";
- this.firstname = "";
- this.surname = "";
- this.interval = null;
+ this._interval = null;
- //this.draw();
+ this.update();
}
-Session.prototype.loadUserJSON = function(data)
-{
- this.username = data.username;
- this.email = data.email;
- this.firstname = data.firstname;
- this.surname = data.surname;
-
- name = "";
- if ('' == this.username) {
- name = "not logged in";
- $("li.signup").removeClass("hide");
- $("li.login").removeClass("hide");
- $("li.logout").addClass("hide");
- } else {
- if ('' == this.firstname || '' == this.surname) {
- name += this.username;
- } else {
- name += this.firstname + " " + this.surname;
- }
- $("li.signup").addClass("hide");
- $("li.login").addClass("hide");
- $("li.logout").removeClass("hide");
- }
-
- this.eUser.empty().append(name);
+Session.prototype.update = function() {
+ $.getJSON("/sessinfo/", $.proxy(this._update, this));
}
-Session.prototype.loadJSON = function(data)
-{
- // this.stop();
-
- this.id = ("0" == data.id)? "none" : data.id;
- this.timeout = data.timeout * 10;
- this.timeleft = data.timeleft * 10;
+Session.prototype.clear = function() {
+ this.id = "none";
+ this.timeout = 0;
+ this.timeleft = 0;
- this.eId.empty().append(this.id);
+ this._fraction = 0.0;
+ this._leftWidth = 0.0;
- this.draw();
- if (0 < this.timeleft)
- this.start();
+ this.idElement.empty().append(this.id);
+ this._stop();
}
-Session.prototype.draw = function()
+/*
+ * not real private but as a convention I use _ prefix to indicate
+ * internal use only.
+ */
+Session.prototype._update = function(data)
{
- this.context.fillStyle = "rgb(255, 0, 0)";
- this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
+ this.id = ("0" == data.id)? "none" : data.id;
+ this.timeout = data.timeout;
+ this.timeleft = data.timeleft;
- this.context.fillStyle = "rgb(0, 255, 0)";
- this.context.fillRect(0, 0,
- this.canvas.width / this.timeout * this.timeleft,
- this.canvas.height);
+ this._fraction = this.canvas.width / this.timeout;
+ this._leftWidth = this._fraction * this.timeleft;
+
+ this.idElement.empty().append(this.id);
+
+ this._start();
}
-Session.prototype.start = function()
+Session.prototype._start = function()
{
- if (null === this.interval) {
- this.interval = setInterval($.proxy(this.process, this), 1000);
+ this._draw();
+ if (0 < this.timeleft && null === this._interval) {
+ this._interval = setInterval($.proxy(this._process, this), 5000);
}
}
-Session.prototype.process = function()
+Session.prototype._process = function()
{
if (0 >= this.timeleft) {
- this.stop();
+ this.clear();
}
else {
- this.timeleft -= 10;
- this.draw();
+ this.timeleft-=5;
+ this._leftWidth -= 5*this._fraction;
+ this._draw();
}
}
-Session.prototype.stop = function()
-{
- clearInterval(this.interval);
- this.interval = null;
- this.id = "none";
- this.timeout = 0;
- this.timeleft = 0;
- this.username = "";
- this.email = "";
- this.firstname = "";
- this.surname = "";
+Session.prototype._draw = function() {
+ this.context.fillStyle = "rgb(255, 0, 0)";
+ this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
- this.eId.empty().append("");
- this.eUser.empty().append("not logged in");
+ this.context.fillStyle = "rgb(0, 255, 0)";
+ this.context.fillRect(0, 0, this._leftWidth, this.canvas.height);
+}
- this.draw();
+Session.prototype._stop = function()
+{
+ clearInterval(this._interval);
+ this._interval = null;
}
// vim: set ts=4 sw=4:
diff --git a/assets/js/session.orig.js b/assets/js/session.orig.js
new file mode 100644
index 0000000..06ed5c2
--- /dev/null
+++ b/assets/js/session.orig.js
@@ -0,0 +1,110 @@
+function Session(sInfo, sId, sUser)
+{
+ this.eUser = $(sUser);
+ this.eId = $(sId);
+ this.canvas = $(sInfo + " canvas").get(0);
+ this.context = this.canvas.getContext("2d");
+
+ this.id = "none"
+ this.timeout = 0;
+ this.timeleft = 0;
+ this.user = null;
+
+ //this.draw();
+}
+
+Session.prototype.isAthenticated = function(data)
+{
+}
+
+Session.prototype.authenticate = function(data)
+{
+ this.username = data.username;
+ this.email = data.email;
+ this.firstname = data.firstname;
+ this.surname = data.surname;
+
+ name = "";
+ if ('' == this.username) {
+ name = "not logged in";
+ $("li.signup").removeClass("hide");
+ $("li.login").removeClass("hide");
+ $("li.logout").addClass("hide");
+ } else {
+ if ('' == this.firstname || '' == this.surname) {
+ name += this.username;
+ } else {
+ name += this.firstname + " " + this.surname;
+ }
+ $("li.signup").addClass("hide");
+ $("li.login").addClass("hide");
+ $("li.logout").removeClass("hide");
+ }
+
+ this.eUser.empty().append(name);
+}
+
+Session.prototype.loadJSON = function(data)
+{
+ // this.stop();
+
+ this.id = ("0" == data.id)? "none" : data.id;
+ this.timeout = data.timeout * 10;
+ this.timeleft = data.timeleft * 10;
+
+ this.eId.empty().append(this.id);
+
+ this.draw();
+ if (0 < this.timeleft)
+ this.start();
+}
+
+Session.prototype.draw = function()
+{
+ this.context.fillStyle = "rgb(255, 0, 0)";
+ this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
+
+ this.context.fillStyle = "rgb(0, 255, 0)";
+ this.context.fillRect(0, 0,
+ this.canvas.width / this.timeout * this.timeleft,
+ this.canvas.height);
+}
+
+Session.prototype.start = function()
+{
+ if (null === this.interval) {
+ this.interval = setInterval($.proxy(this.process, this), 1000);
+ }
+}
+
+Session.prototype.process = function()
+{
+ if (0 >= this.timeleft) {
+ this.stop();
+ }
+
+ else {
+ this.timeleft -= 10;
+ this.draw();
+ }
+}
+
+Session.prototype.stop = function()
+{
+ clearInterval(this.interval);
+ this.interval = null;
+ this.id = "none";
+ this.timeout = 0;
+ this.timeleft = 0;
+ this.username = "";
+ this.email = "";
+ this.firstname = "";
+ this.surname = "";
+
+ this.eId.empty().append("");
+ this.eUser.empty().append("not logged in");
+
+ this.draw();
+}
+
+// vim: set ts=4 sw=4:
diff --git a/assets/js/user.js b/assets/js/user.js
new file mode 100644
index 0000000..839002d
--- /dev/null
+++ b/assets/js/user.js
@@ -0,0 +1,54 @@
+function User(userSelector, menu)
+{
+ this.userElement = $(userSelector);
+ this.menu = menu;
+
+ this.update();
+}
+
+User.prototype.update = function() {
+ $.getJSON("/currentuser/", $.proxy(this._setData, this));
+}
+
+User.prototype.clear = function() {
+ this.username = "";
+ this.email = "";
+ this.firstname = "";
+ this.surname = "";
+
+ this._displayUser();
+}
+
+User.prototype.isEmpty = function() {
+ if ("" == this.username) {
+ return true;
+ }
+
+ return false;
+}
+
+
+User.prototype._setData = function(data) {
+ this.username = data.username;
+ this.email = data.email;
+ this.firstname = data.firstname;
+ this.surname = data.surname;
+
+ this._displayUser();
+ this.menu.update();
+}
+
+User.prototype._displayUser = function() {
+ if (this.isEmpty()) {
+ this.userElement.empty().append("not logged in");
+ } else {
+ if ("" == this.firstname || "" == this.surname) {
+ this.userElement.empty().append(this.username);
+ } else {
+ this.userElement.empty()
+ .append(this.firstname + " " + this.surname);
+ }
+ }
+}
+
+// vim: set ts=4 sw=4: