Issue #22, reloading menu on content load. Can use enhancements/optimizations, but working for now

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

@@ -851,7 +851,7 @@ cookie-container {
   color: #e84c3d;
 }
 
-.sidebar ul span.lesson-complete {
+#menu-container ul span.lesson-complete {
     float: right;
     margin-left: -5px;
     /*margin-right: 5px;*/
@@ -859,11 +859,15 @@ cookie-container {
     display:inline-block;
 }
 
-#menu-container ul li.selected {
+#menu-container ul li.selected, #menu-container li a.selected {
     background-color: #555;
 }
 
-#menu-container ul li.selected a.selected {
+#menu-container ul li.stage {
+  padding-left:3px;
+}
+
+#menu-container li.selected, #menu-container a.selected {
   color:white;
 }
 

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

@@ -77,20 +77,24 @@ define(['jquery',
 				//
 				this.cookieView = new CookieView();
 				// parameter model & view
-				//TODO: instantiate model with values at once (not sure why was not working before)
+				//TODO: instantiate model with values (not sure why was not working before)
 				var paramModel = new ParamModel({
 				});
 				paramModel.set('screenParam',this.lessonContent.get('screenParam'));
 				paramModel.set('menuParam',this.lessonContent.get('menuParam'));
+				paramModel.set('stageParam',this.lessonContent.get('stageParam'));
 				this.paramView = new ParamView({model:paramModel});
+
 				this.hideShowHelps(null);
+				this.trigger('menu:reload');
 			};
 
 			this.areHelpsReady = function (curHelp) {
+				//TODO: significantly refactor (remove) this once LessonInfoService can be used to support lazy loading
 				this.addCurHelpState(curHelp);
 				// check if all are ready
 				if (this.helpsLoaded['hints'] && this.helpsLoaded['plan'] && this.helpsLoaded['solution'] && this.helpsLoaded['source'] && !this.helpControlsView) {
-					//
+					
 					this.helpControlsView = new HelpControlsView({
 						hasPlan:(this.planView.model.get('content') !== null),
 						hasSolution:(this.solutionView.model.get('content') !== null),
@@ -98,7 +102,7 @@ define(['jquery',
 						hasHints:(this.lessonHintView.collection.length > 0),
 					});
 					this.helpControlsView.render();
-					//
+					
 					this.listenTo(this.helpControlsView,'plan:show',this.hideShowHelps);
 					this.listenTo(this.helpControlsView,'solution:show',this.hideShowHelps);	
 					this.listenTo(this.helpControlsView,'hints:show',this.onShowHints)

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

@@ -1,5 +1,12 @@
-define(['jquery','underscore','backbone','goatApp/view/MenuView'], 
+define(['jquery',
-	function($,_,Backbone,MenuView) {
+	'underscore',
+	'backbone',
+	'goatApp/view/MenuView'
+	], 
+	function($,
+		_,
+		Backbone,
+		MenuView) {
 		 Controller = function(options){
 		 	_.extend(Controller.prototype,Backbone.Events);
 			options = options || {};
@@ -10,8 +17,8 @@ define(['jquery','underscore','backbone','goatApp/view/MenuView'],
 		 		this.listenTo(this.menuView,'lesson:click',this.renderTitle);
 		 	}
 
-		 	this.updateMenu = function(curLesson) {
+		 	this.updateMenu = function(){
-		 		
+		 		this.menuView.updateMenu();
 		 	},
 
 		 	//TODO: move title rendering into lessonContent/View pipeline once data can support it
@@ -19,6 +26,7 @@ define(['jquery','underscore','backbone','goatApp/view/MenuView'],
 		 		this.titleView.render(title);
 		 	}
 
+
 		 };
 
 		 return Controller;

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

@@ -9,13 +9,21 @@ define(['jquery',
 		url:'service/lessonmenu.mvc',
 		initialize: function () {
 			var self = this;
-			this.fetch().then(function (data) {
+			this.fetch();
-				this.models = data;
-				self.onDataLoaded();
-			});
 		},
+
 		onDataLoaded: function() {
 			this.trigger('menuData:loaded');
+		},
+
+		fetch: function() {
+			var self=this;
+			Backbone.Collection.prototype.fetch.apply(this,arguments).then(
+				function(data) {
+					this.models = data;
+					self.onDataLoaded();
+				}
+			);
 		}
 	});
 });

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

@@ -30,28 +30,3 @@ var menuData = Backbone.Model.extend({
 	});
 
 });
-
-/*
-var menuData = Backbone.Model.extend({
-		urlRoot:'/webgoat/service/lessonmenu.mvc',
-		defaults: {
-			items:null,
-			selectedItem:null
-		},
-		initialize: function () {
-			var self = this;
-			this.fetch().then(function(menuItems){
-				menuItems = goatUtils.enhanceMenuData(menuItems,this.selectedItem);
-				self.items = menuItems;
-			});
-		},
-	
-		update: function() {
-			var self = this;
-			this.fetch().then(function(data) {
-				self.items = data;
-				self.render(0);
-			});
-		}
-	});
-*/

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

@@ -43,11 +43,11 @@ define(['jquery',
             });
 
             Backbone.history.start();
-            this.listenTo(this.menuController, 'menu:reload',this.reloadMenu)
+            this.listenTo(this.lessonController, 'menu:reload',this.reloadMenu)
         },
 
         reloadMenu: function (curLesson) {
-            this.menuController.updateMenu(curLesson);
+            this.menuController.updateMenu();
         }
 
 

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

@@ -17,10 +17,11 @@ define(['jquery',
 		initialize: function() {
 			this.collection = new MenuCollection();
 			this.listenTo(this.collection,'menuData:loaded',this.render);
-			this.listenTo(this,'menu:click',this.accordionMenu);
+			// this.listenTo(this,'menu:click',this.accordionMenu);
+			this.curLessonLinkId = '';
 		},
 		// rendering top level menu
-		render: function (model){
+		render: function (){
 			//for now, just brute force
 			//TODO: refactor into sub-views/components
 			var items, catItems, stages;
@@ -47,11 +48,14 @@ define(['jquery',
 				if (lessons) {
 					var categoryLessonList = $('<ul>',{class:'slideDown lessonsAndStages',id:catId}); //keepOpen
 					for (var j=0; j < lessons.length;j++) {
-						var lessonItem = $('<li>');
+						var lessonItem = $('<li>',{class:'lesson'});
-						lessonName = lessons[j].name;
+						var lessonName = lessons[j].name;
-						
+						var lessonId = GoatUtils.makeId(lessonName);
-						var lessonLink = $('<a>',{href:lessons[j].link,text:lessonName,id:lessonName});
+						if (this.curLessonLinkId === lessonId) {
-						lessonLink.click(_.bind(this.titleRender,this,lessonName));
+							lessonItem.addClass('selected');
+						}
+						var lessonLink = $('<a>',{href:lessons[j].link,text:lessonName,id:lessonId});
+						lessonLink.click(_.bind(this.onLessonClick,this,lessonName));
 						lessonItem.append(lessonLink);
 						//check for lab/stages
 						categoryLessonList.append(lessonItem);
@@ -60,13 +64,18 @@ define(['jquery',
 						}
 						var stages = lessons[j].children;
 						for (k=0; k < stages.length; k++) {
+							var stageItem = $('<li>',{class:'stage'});
 							var stageName = stages[k].name;
-							var stageLink = $('<a>',{href:stages[k].link,text:stageName,id:GoatUtils.makeId(stageName)});
+							var stageId = GoatUtils.makeId(stageName);
-							var stageSpan = $('<span>');
+							if (this.curLessonLinkId === stageId) {
-							stageSpan.append(stageLink);
+								stageItem.addClass('selected');
-							categoryLessonList.append(stageSpan);
+							}
+							var stageLink = $('<a>',{href:stages[k].link,text:stageName,id:stageId});
+							stageLink.click(_.bind(this.onLessonClick,this,stageName));
+							stageItem.append(stageLink);
+							categoryLessonList.append(stageItem);
 							if (stages[k].complete) {
-								stageSpan.append($('<span>',{class:'glyphicon glyphicon-check lesson-complete'}));
+								stageItem.append($('<span>',{class:'glyphicon glyphicon-check lesson-complete'}));
 							}
 						}
 					}
@@ -75,15 +84,26 @@ define(['jquery',
 
 				menuUl.append(category);
 			}
-			this.$el.append(menuUl);
+			this.$el.html(menuUl);
 			//if we need to keep a menu open
 			if (this.openMenu) {
-				this.accordionMenu(this.openMenu);
+				$('#'+this.openMenu).show();
 			}
 		},
 
-		titleRender: function (title) {
+		updateMenu: function() {
-			this.trigger('lesson:click',title);
+			//for now ...
+			this.collection.fetch();
+		},
+
+		onLessonClick: function (title) {
+			var oldLinkId = GoatUtils.makeId(this.curLessonLinkId);
+			$('#'+oldLinkId).removeClass('selected');
+			//update
+			this.curLessonLinkId = GoatUtils.makeId(title);
+			var newLinkId = GoatUtils.makeId(this.curLessonLinkId)
+			$('#'+newLinkId).addClass('selected');
+			this.trigger('lesson:click', title); // will cause menu reload
 		},
 
 		expandCategory: function (id) {
@@ -94,6 +114,7 @@ define(['jquery',
 
 		accordionMenu: function(id) {
 	        if (this.openMenu !== id) {
+	        	this.$el.find('#' + this.openMenu).slideUp(200);
 	        	this.$el.find('#' + id).slideDown(300);
 	        	this.openMenu = id;
 	        } else { //it's open

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

@@ -22,8 +22,9 @@ function($,
 			var paramsTable = $('<table>',{'class':'param-table table-striped table-nonfluid'});
 			var self = this;
 			_.each(this.model.keys(), function(attribute) {
+				var attributeLabel = attribute.replace(/Param/,'');
 				var newRow = $('<tr>');
-				newRow.append($('<th>',{text:_.escape(attribute)}))
+				newRow.append($('<th>',{text:_.escape(attributeLabel)}))
 				newRow.append($('<td>',{text:_.escape(self.model.get(attribute))}));
 				paramsTable.append(newRow);
 			});