web client: display user-friendly names rather than path names

2 files changed, 19 insertions, 10 deletions

diff --git a/web/client.css b/web/client.css
index e9dabbf..f24d6d2 100644
--- a/web/client.css
+++ b/web/client.css
@@ -42,7 +42,7 @@
 #modules li { list-style-type: none; }
 
 
-#tabs, #content { margin-left: 150px; }
+#tabs, #content { margin-left: 170px; }
 
 #tabs { padding: 0; }
 
diff --git a/web/client.js b/web/client.js
index 898d37d..d84181c 100644
--- a/web/client.js
+++ b/web/client.js
@@ -107,7 +107,7 @@ $(function() {
 	    if (value) {
 		el.attr({href: "javascript:void(0);"}).click(function() {
 		    $.bbq.pushState("#" + value);
-		}).text(value);
+		}).text("Show");
 	    }
 	    return el;
 	};
@@ -116,13 +116,16 @@ $(function() {
 	};
 
 	var Reference = Object.create(Path);
+	Reference.staticRender = function(value) {
+	    return Path.staticRender(value).text(value);
+	}
 	Reference.init = function(value, meta) {
 	    this.cbox = Object.create(ComboBox)
 	    this.cbox.init(value, meta);
 	    
 	    this.link = $("<div>");
 	    var update = _.bind(function() {
-		this.link.html(this.staticRender(this.get()));
+		this.link.html(Path.staticRender(this.get()));
 	    }, this);
 	    this.cbox.el.change(update);
 	    update();
@@ -207,9 +210,14 @@ $(function() {
 			] = "current";
 		    else if (selectFirst) status[first] = "current";
 
-		    _.each(data.data, function(path) {
+		    _.each(data.meta.fields, function(field) {
 			var el = $("<li>");
-			el.append(Path.format(path, status[path]));
+			var link = Path.format(
+			    data.data[field.name],
+			    status[data.data[field.name]]
+			);
+			link.text(field["ui-name"]);
+			el.append(link);
 			target.append(el);
 		    });
 
@@ -223,7 +231,7 @@ $(function() {
 	    var content = $("#content").empty();
 
 	    function renderContent(path, data) {
-		content.html($("<h1>").text(path));
+		content.html($("<h1>").text(data.meta["ui-name"]));
 			
 		if (!isTreeNode(data.meta)) {
 		    content.append(JSON.stringify(data));
@@ -243,7 +251,7 @@ $(function() {
 		    path += "/" + name;
 
 		    var row = $("<tr>");
-		    if (label) row.append($("<td>").text(meta["ui-name"]));
+		    row.append($("<td>").text(label));
 			
 		    var td = $("<td>");
 
@@ -380,18 +388,19 @@ $(function() {
 			    field.name,
 			    data.data[field.name],
 			    field,
-			    true,
+			    field["ui-name"],
 			    true
 			);
 		    });
 		
 		else _.each(data.data, function(value, name) {
+		    name = _.isArray(data.data) ? name + 1 : name;
 		    renderField(
 			path,
-			_.isArray(data.data) ? name + 1 : name,
+			name,
 			value,
 			data.meta.members,
-			false,
+			data.meta["ui-member"] + " " + name,
 			data.meta.type != "set"
 		    );
 		});