path: root/web/client.js

/*
 * Copyright (c) 2012-2013 Kaarle Ritvanen
 * See LICENSE file for license details
 */

$(function() {
    $.ajax("/login", {
	type: "POST",
	data: JSON.stringify({username: "admin", password: "admin"})
    }).done(function(data, status, xhr) {

	var token = xhr.getResponseHeader("X-ACF-Auth-Token");
	var txn;

	function request(url, options) {
	    options = options || {};
	    options.headers = {"X-ACF-Auth-Token": token};
	    if (txn) options.headers["X-ACF-Transaction-ID"] = txn;
	    return $.ajax(url, options);
	}

	function objRequest(path, options) {
	    return request("/config" + path, options);
	}

	var changed, invalid;

	function startTxn() {
	    var def = $.Deferred();
	    txn = null;
	    request("/", {type: "POST"}).done(function(data, status, xhr) {
		txn = xhr.getResponseHeader("X-ACF-Transaction-ID");
		changed = {};
		invalid = {};
		$("#status").empty();
		def.resolve();
	    });
	    return def;
	}


	var Field = {
	    format: function(value) { return $("<div>").text(value); },
	    init: function(value, meta) {
		this.el = $("<input>").attr({type: "text", value: value});
	    },
	    get: function() { return this.el.val() || null; }
	}

	var ComboBox = Object.create(Field);
	ComboBox.init = function(value, meta) {
	    var el = $("<select>");
	    this.el = el;

	    function opt(value, ui_value, selected) {
		el.append($("<option>").attr(
		    {value: value, selected: selected}
		).text(ui_value));
	    }

	    if (!meta.required)
		opt("", "(none)", value == null)

	    _.each(
		_.zip(meta.choice, meta["ui-choice"]),
		function(choice) {
		    opt(choice[0], choice[1], value == choice[0]);
		}
	    );
	}

	var Path = {
	    format: function(value) {
		var el = $("<a>");
		if (value) {
		    el.attr({href: "javascript:void(0);"}).click(function() {
			$.bbq.pushState("#" + value);
		    }).text(value);
		}
		return el;
	    },
	    init: function(value, meta) { this.el = this.format(value); }
	}

	var widgets = {
	    boolean: {
		format: function(value) { return value ? "Yes" : "No"; },
		init: function(value, meta) {
		    this.el = $("<input>").attr(
			{type: "checkbox", checked: value}
		    );
		},
		get: function() { return this.el.is(":checked"); }
	    },
	    collection: Path,
	    combobox: ComboBox,
	    field: Field,
	    model: Path,
	    reference: {
		format: Path.format,
		init: function(value, meta) {
		    this.cbox = Object.create(ComboBox)
		    this.cbox.init(value, meta);
		    
		    var link = $("<div>");
		    var update = _.bind(function() {
			link.html(this.format(this.get()));
		    }, this);
		    this.cbox.el.change(update);
		    update();
		    
		    this.el = $("<div>");
		    this.el.append(this.cbox.el);
		    this.el.append(" ");
		    this.el.append(link);
		},
		get: function() { return this.cbox.get(); }
	    }
	}


	function render() {
	    var path = $.param.fragment();

	    objRequest(path).done(function(data) {
		var content = $("#content");
		content.html($("<h1>").text(path));
			
		if (!_.contains([
		    "collection", "model", "set"
		], data.meta.type)) {
		    content.append(JSON.stringify(data));
		    return;
		}

		var table = $("<table>");
		    
		function renderField(
		    path, name, value, meta, label, editable
		) {
		    if (_.isString(name)) {
			name = name.replace(/([\\\/])/g, "\\$1");
			if (!isNaN(Number(name))) name = "\\" + name;
		    }
		    path += "/" + name;

		    var row = $("<tr>");
		    if (label) row.append($("<td>").text(meta["ui-name"]));
			
		    var td = $("<td>");

		    var msg = $("<div>");
		    if (path in changed) msg.text("[changed]");
		    td.html(msg);

		    if (meta.widget in widgets) {
			var widget = widgets[meta.widget];
			var el;

			if (editable) {
			    var widget = Object.create(widget);
			    widget.init(
				path in invalid ? invalid[path] : value, meta
			    );
			    el = widget.el;
			    el.change(function() {
				var options;
				var newValue = widget.get();
				if (newValue == null)
				    options = {type: "DELETE"}
				else options = {
				    type: "PUT",
				    data: JSON.stringify(newValue),
				    statusCode: {
					422: function(xhr) {
					    msg.html(_.reduce(
						_.map(
						    $.parseJSON(
							xhr.responseText
						    ),
						    _.escape
						),
						function(a, b) {
						    return a + "<br/>" + b;
						}
					    ));
					}
				    }
				}
				var task = objRequest(path, options);

				if (!(path in changed)) changed[path] = value;
				if (newValue == changed[path])
				    delete changed[path];
				invalid[path] = newValue;

				msg.text("[checking]");

				function showError(el, msg, xhr) {
				    msg += " " + xhr.statusCode().status;
				    if (xhr.responseText)
					msg += ': ' + xhr.responseText;
				    el.text(msg);
				}

				function newTxn() {
				    return startTxn().done(render);
				}

				function abortTxn() {
				    request("/", {type: "DELETE"});
				    return newTxn();
				}

				var statusBar = $("#status");
				statusBar.html(
				    "You have uncommitted changes.<br/>"
				);
				statusBar.append($("<input>").attr({
				    id: "commit",
				    type: "submit",
				    value: "Commit",
				    disabled: true
				}).click(function() {
				    request("/", {type: "PUT"})
					.done(newTxn)
					.fail(function(xhr) {
					    abortTxn().done(function() {
						showError(
						    statusBar,
						    "Commit failed",
						    xhr
						);
					    });
					});
				}));
				statusBar.append($("<input>").attr({
				    type: "submit", value: "Revert"
				}).click(abortTxn));
			
				task.done(function() {
				    if (path in changed) msg.text("[changed]");
				    else msg.empty();
				    
				    delete invalid[path];
				    if (!(_.size(invalid)))
					$("#commit").prop("disabled", false);
				    
				}).fail(function(xhr) {
				    showError(msg, "Error", xhr);
				});
			    });

			    if (path in invalid) el.trigger("change");
			}

			else el = widget.format(value);

			td.append(el);
		    }
		    
		    else td.text(value);
		    
		    row.append(td);
		    row.append($("<td>").text(JSON.stringify(meta)));
		    table.append(row);
		}
		    
		if (data.meta.type == "model")
		    _.each(data.meta.fields, function(field) {
			renderField(
			    path,
			    field.name,
			    data.data[field.name],
			    field,
			    true,
			    true
			);
		    });
		
		else _.each(data.data, function(value, name) {
		    renderField(
			path,
			_.isArray(data.data) ? name + 1 : name,
			value,
			data.meta.members,
			false,
			data.meta.type != "set"
		    );
		});
		
		content.append(table);
	    });
	}

	startTxn().done(function() {
	    $(window).bind("hashchange", render);
	    $.bbq.pushState("#/");
	});    
    });
});