initial cut of paramView re-enabled

webgoat-container/src/main/webapp/css/main.css

@@ -736,13 +736,31 @@ cookie-container {
 	margin-bottom:4px;
 }
 
-.cookie-table tr td, .params-table tr td {
+.cookie-table, .param-table {
+  border:1px solid #eee;
+}
+
+.cookie-table tr td, .param-table tr td {
   padding:3px ;
-  max-width: 220px;
+  padding-left: 5px;
+  width:220px;
+  max-width: 240px;
   font-size: x-small;
   word-wrap: break-word;
 }
 
+.cookie-table th, .param-table th {
+  border:none;
+  border-right:1px solid #ccc;
+  padding-right:3px;
+}
+
+
+.cookie-table td, .param-table td {
+  border:none;
+  padding-left:3px;
+}
+
 /* ==========================================================================
    MENU / Sidebar
    ========================================================================== */

webgoat-container/src/main/webapp/js/goatApp/controller/LessonController.js

@@ -9,6 +9,8 @@ define(['jquery',
 	'goatApp/view/LessonHintView',
 	'goatApp/view/HelpControlsView',
 	'goatApp/view/CookieView',
+	'goatApp/view/ParamView',
+	'goatApp/model/ParamModel',
 	'goatApp/support/GoatUtils'
 	], 
 	function($,
@@ -22,6 +24,8 @@ define(['jquery',
 		LessonHintView,
 		HelpControlsView,
 		CookieView,
+		ParamView,
+		ParamModel,
 		GoatUtils
 	) {
 		'use strict'
@@ -38,7 +42,7 @@ define(['jquery',
 
 			_.extend(Controller.prototype,Backbone.Events);
 			this.start = function() {
-				this.listenTo(this.lessonContent,'contentLoaded',this.onContentLoaded);
+				this.listenToOnce(this.lessonContent,'contentLoaded',this.onContentLoaded);
 			};
 
 			//load View, which can pull data
@@ -52,7 +56,7 @@ define(['jquery',
 				this.solutionView = {};
 				this.sourceView = {};
 				this.lessonHintView = {};
-				this.screen = scr;
+				this.screen = scr; //needed anymore?
 				this.menu = menu;
 				//
 				
@@ -62,9 +66,6 @@ define(['jquery',
 				this.helpControlsView = null;
 				this.lessonView.model = this.lessonContent;
 				this.lessonView.render();
-
-				//load cookies/parameters view
-
 				//load title view (initially hidden) << //TODO: currently handled via menu click but need to be able to handle via routed request
 				//plan view (initially hidden)
 				this.planView = new PlanView();
@@ -80,6 +81,13 @@ define(['jquery',
 				this.listenToOnce(this.lessonHintView,'hints:loaded',this.areHelpsReady);
 				//
 				this.cookieView = new CookieView();
+				// parameter model & view
+				//TODO: instantiate model with values at once (not sure why was not working before)
+				var paramModel = new ParamModel({
+				});
+				paramModel.set('screenParam',this.lessonContent.get('screenParam'));
+				paramModel.set('menuParam',this.lessonContent.get('screenParam'));
+				this.paramView = new ParamView({model:paramModel});
 				this.hideShowHelps(null);
 			};
 

webgoat-container/src/main/webapp/js/goatApp/model/ParamModel.js

@@ -0,0 +1,12 @@
+define([
+	'backbone'],
+	function(
+		Backbone) {
+	return Backbone.Model.extend({
+		initialize: function(options) {
+			for (var key in options) {
+				this.set(key, options.key);
+			}
+		}
+	});
+});

webgoat-container/src/main/webapp/js/goatApp/view/CookieView.js

@@ -27,6 +27,7 @@ function($,
     				cookieTable.append(newRow);
     			});
 			});
+			this.$el.append($('<h4>',{text:'Cookie/s'}));
 			this.$el.append(cookieTable);
 		}
 	});

webgoat-container/src/main/webapp/js/goatApp/view/ParamView.js

@@ -0,0 +1,35 @@
+define(['jquery',
+	'underscore',
+	'backbone',
+	'goatApp/model/ParamsModel'],
+function($,
+	_,
+	Backbone,
+	LessonCookieCollection) {
+	return Backbone.View.extend({
+		el:'#params-view',
+
+		initialize: function(options) {
+			this.model = options.model;
+			if (options.model)	{
+				this.listenTo(this.model,'change',this.render);
+			}
+			this.render();
+		},
+
+		render: function() {
+			this.$el.html('');
+			var paramsTable = $('<table>',{'class':'param-table table-striped table-nonfluid'});
+			var self = this;
+			_.each(this.model.keys(), function(attribute) {
+				var newRow = $('<tr>');
+				newRow.append($('<th>',{text:_.escape(attribute)}))
+				newRow.append($('<td>',{text:_.escape(self.model.get(attribute))}));
+				paramsTable.append(newRow);
+			});
+			
+			this.$el.append($('<h4>',{text:'Parameters'}));
+			this.$el.append(paramsTable);
+		}
+	});
+});