web client: tabular layout for collections

1 files changed, 71 insertions, 2 deletions

diff --git a/web/client.js b/web/client.js
index 1a7cd51..08b7ccb 100644
--- a/web/client.js
+++ b/web/client.js
@@ -624,6 +624,49 @@ $(function() {
 
 	    Inline.widget = function(meta) { return widgets[meta.widget]; };
 
+	    Inline.wrap = function() { return this.el; };
+
+
+	    var Horizontal = Object.create(Inline);
+
+	    Horizontal.staticRender = function(value) {
+		this.previous = null;
+		return $("<tr>").html($("<td>").prop("class", "placeholder"));
+	    };
+
+	    Horizontal.appendWidget = function(el, label) {
+		if (!el.is("td")) return false;
+		if (this.previous) this.previous.after(el);
+		else {
+		    var ph = this.el.find(".placeholder");
+		    ph.after(el);
+		    ph.remove();
+		}
+		this.previous = el;
+		return true;
+	    };
+
+
+	    var HeaderHorizontal = Object.create(Horizontal);
+
+	    HeaderHorizontal.init = function(
+		data, name, meta, level, editable, removable
+	    ) {
+		this.header = $("<tr>");
+		var table = $("<table>").html(this.header);
+		table.append(
+		    _.bind(Horizontal.init, this)(
+			data, name, meta, level, editable, removable
+		    )
+		);
+		return table;
+	    };
+
+	    HeaderHorizontal.appendWidget = function(el, label) {
+		if (_.bind(Horizontal.appendWidget, this)(el, label))
+		    this.header.append($("<th>").text(label));
+	    };
+
 
 	    var Vertical = Object.create(Inline);
 
@@ -632,7 +675,7 @@ $(function() {
 	    Vertical.wrap = function() { return $("<div>").html(this.el); };
 
 	    Vertical.renderObject = function(data) {
-		this.el.html(
+		this.el.append(
 		    $("<h" + this.level + ">").text(data.meta["ui-name"])
 		);
 
@@ -698,12 +741,22 @@ $(function() {
 	    };
 
 	    Vertical.appendWidget = function(el, label) {
+		var self = this;
 		el = makeRow(el);
 
 		if (el.is("tr")) {
 		    el.prepend($("<td>").text(label));
 		    this.appendRow(el);
 		}
+		else if (el.is("table")) {
+		    var td;
+		    el.find("tr").each(function(index, row) {
+			td = $("<td>");
+			$(row).prepend(td);
+			self.appendRow(row);
+		    });
+		    td.text(label);
+		}
 		else {
 		    this.table = null;
 		    this.div.append(el);
@@ -765,6 +818,21 @@ $(function() {
 	    };
 
 
+	    var Tabular = Object.create(Vertical);
+
+	    Tabular.renderObject = function(data) {
+		this.header = true;
+		_.bind(Vertical.renderObject, this)(data);
+	    };
+
+	    Tabular.widget = function(meta) {
+		if (!isTreeNode(meta)) return Vertical.widget(meta);
+		if (!this.header) return Horizontal;
+		this.header = false;
+		return HeaderHorizontal;
+	    };
+
+
 	    var Stacked = Object.create(Vertical);
 
 	    Stacked.widget = function(meta) {
@@ -772,7 +840,7 @@ $(function() {
 	    };
 
 
-	    var layouts = {stacked: Stacked};
+	    var layouts = {stacked: Stacked, tabular: Tabular};
 
 
 	    function renderObject(path, data) {
@@ -789,6 +857,7 @@ $(function() {
 		    };
 		    form.wrap = function() { return this.el; };
 		    form.requestData = function(path) {
+			this.el.empty();
 			this.renderObject(data);
 		    };