incremental progress on new UI code, mod to AbstractLesson for menu

src/main/java/org/owasp/webgoat/lessons/AbstractLesson.java

@@ -563,12 +563,8 @@ public abstract class AbstractLesson extends Screen implements Comparable<Object
 
         // mvc update:
         link.append(getPath()).append("/");
-        //link.append(WebSession.SCREEN);
-        //link.append("=");
         link.append(getScreenId());
         link.append("/");
-        //link.append(WebSession.MENU);
-        //link.append("=");
         link.append(getCategory().getRanking());
         return link.toString();
     }

src/main/webapp/WEB-INF/pages/main_new.jsp

@@ -117,9 +117,10 @@
                                             <!--<span id="curHintContainer"></span>-->
                                         </div>                                    
                                     </div>
-                                    <div class="panel-body" id="lesson_content">    
-                                        <b>This should default to the "How to Work with Webgoat" lesson</b>
                                 </div>
+                            </div>
+                            <div class="col-md-12" align="left">
+                                <div id="lessonContentWrapper" class="panel">
 
                                 </div>
                             </div>

src/main/webapp/js/goatApp/controller/LessonController.js

@@ -4,7 +4,7 @@ define(['jquery',
 	'goatApp/model/LessonContentData',
 	'goatApp/view/LessonContentView'
 	], 
-	function($,_,Backbone,LessonContent) {
+	function($,_,Backbone,LessonContentData,LessonContentView) {
 		'use strict'
 		
 		
@@ -12,14 +12,15 @@ define(['jquery',
 			this.lessonView = options.lessonView;
 			this.lessonContent = new LessonContentData();
 
-			_.extend(this,Backbone.Events);
+			_.extend(Controller.prototype,Backbone.Events);
 			this.start = function() {
 				this.listenTo(this.lessonContent,'contentLoaded',this.onContentLoaded);
+				
 			}
 
 			//load View, which can pull data
 			this.loadLesson = function(scr,menu) {
-				this.lessonContent.loadContent({
+				this.lessonContent.loadData({
 					'screen': encodeURIComponent(scr),
 					'menu': encodeURIComponent(menu),
 				});
@@ -29,8 +30,19 @@ define(['jquery',
 
 			this.onContentLoaded = function() {
 				//this.lessonView  = new LessonContentView({content:LessonContent.content});
-				//this.lessonView.render();
+				this.lessonView.model = this.lessonContent;
-				console.debug('loading other stuff');
+				this.lessonView.render();
+				//load cookies/parameters view
+				
+				//load help view
+
+				//load title
+
+				//plan
+
+				//solution
+
+				//source
 			}
 			
 		};

src/main/webapp/js/goatApp/controller/MenuController.js

@@ -1,4 +1,17 @@
-define(['jquery','underscore','backbone','goatApp/model/MenuData','goatApp/view/MenuView'], 
+define(['jquery','underscore','backbone','goatApp/view/MenuView'], 
-	function($,_,Backbone,MenuData,MenuView) {
+	function($,_,Backbone,MenuView) {
+		 Controller = function(options){
+			options = options || {};
+			this.menuView = options.menuView;
+		 	this.initMenu = function() {
+		 		console.debug('initing menu');
+		 	}
 
+		 	this.updateMenu = function() {
+		 		
+		 	}
+
+		 };
+
+		 return Controller;
 });

src/main/webapp/js/goatApp/goatApp.js

@@ -1,13 +1,13 @@
-define(['jquery','underscore','backbone','goatApp/view/goatRouter','goatApp/controller/LessonController','goatApp/controller/MenuController'],
+define(['jquery','underscore','backbone','goatApp/view/GoatRouter'],
-	function($,_,Backbone,Router,LessonController,MenuController){
+	function($,_,Backbone,Router){
 		'use strict'
 		//var goatRouter = new Router();
-
 		return {
 			initApp: function() {
 				//TODO: add query/ability to load from where they left off 
 				console.log('initApp')
-				//Router.init();
+				var goatRouter = new Router();
-			}
+				goatRouter.init();
 			}
+		};
 });

src/main/webapp/js/goatApp/model/LessonContentData.js

@@ -1,4 +1,7 @@
-define(['jquery', 'underscore','backbone'], function($,_,Backbone){
+define(['jquery',
+	'underscore',
+	'backbone'],
+	 function($,_,Backbone){
 
 	return Backbone.Model.extend({
 		urlRoot:null,
@@ -12,11 +15,35 @@ define(['jquery', 'underscore','backbone'], function($,_,Backbone){
 		loadData: function(options) {
 			this.urlRoot = this.baseUrlRoot + +options.screen + '&menu=' + options.menu;
 			var self=this;
-			this.fetch().then(function(content){
+			this.fetch().then(function(data) {
-				alert('content loaded');
+				self.setContent(data);
-				self.content = content;
-				self.trigger('contentLoaded');
 			});
+			// 	success: function(content) {
+			// 		console.log("content:" + content);
+			// 	},
+			// 	error: function(err) {
+			// 		console.log("error:" + err);
+			// 	},
+			// 	done: function(a,b) {
+			// 		console.log(a);
+			// 		console.log(b);
+			// 	}
+			// });
+		},
+		setContent: function(content) {
+			this.set('content',content);
+			this.trigger('contentLoaded');
+		},
+		fetch: function (options) {
+			options = options || {};
+			return Backbone.Model.prototype.fetch.call(this, _.extend({ dataType: "html"}, options));
+			// var self=this;
+			// Backbone.Model.prototype.fetch.apply(this, arguments).then(
+			// 	function(content){
+			// 		self.setContent(content);
+			// 	});
+
+			// //override with prototype
 		}
 	});
 });

src/main/webapp/js/goatApp/model/MenuItemCollection.js

@@ -0,0 +1,21 @@
+define(['jquery',
+	'underscore',
+	'backbone',
+	'goatApp/model/MenuItemModel'], 
+	function($,_,Backbone,MenuItemModel) {
+
+	return Backbone.Collection.extend({
+		model: MenuItemModel,
+		url:'service/lessonmenu.mvc',
+		initialize: function () {
+			var self = this;
+			this.fetch().then(function (data) {
+				this.models = data;
+				self.onDataLoaded();
+			});
+		},
+		onDataLoaded:function() {
+			this.trigger('menuData:loaded');
+		}
+	});
+});

src/main/webapp/js/goatApp/model/MenuItemModel.js

@@ -0,0 +1,51 @@
+define(['jquery',
+	'underscore',
+	'backbone'],
+	function($,_,Backbone) {
+
+	return Backbone.Model.extend({
+
+	});
+
+});
+
+	// accordionMenu = function(id) {
+ //        if ($('ul#' + id).attr('isOpen') == 0) {
+ //            $scope.expandMe = true;
+ //        } else {
+ //            $('ul#' + id).slideUp(300).attr('isOpen', 0);u
+ //            return;
+ //        }
+ //        $scope.openMenu = id;
+ //        $('.lessonsAndStages').not('ul#' + id).slideUp(300).attr('isOpen', 0);
+ //        if ($scope.expandMe) {
+ //            $('ul#' + id).slideDown(300).attr('isOpen', 1);
+ //        }
+ //    }
+
+
+		//urlRoot:'service/lessonmenu.mvc',
+	// 	defaults: {
+	// 		items:null,
+	// 		selectedItem:null
+	// 	},
+	// 	initialize: function () {
+	// 		var self = this;
+	// 		this.fetch().then(function(menuItems){
+	// 			menuItems = goatUtils.enhanceMenuData(menuItems,this.selectedItem);
+	// 			this.setDataItems(menuItems);
+	// 		});
+	// 	},
+	
+	// 	update: function() {
+	// 		var self = this;
+	// 		this.fetch().then(function(menuItems) {
+	// 			menuItems = goatUtils.enhanceMenuData(menuItems,this.selectedItem);
+	// 			self.setDataItems(menuItems);
+	// 		});
+	// 	},
+
+	// 	setDataItems: function (data) {
+	// 		this.items = data;
+	// 	}
+	// });

src/main/webapp/js/goatApp/view/GoatRouter.js

@@ -0,0 +1,46 @@
+define(['jquery',
+	'underscore',
+	'backbone',
+	'goatApp/controller/LessonController',
+	'goatApp/controller/MenuController',
+	'goatApp/view/LessonContentView',
+	'goatApp/view/MenuView'
+	], function ($,_,Backbone,LessonController,MenuController,LessonContentView,MenuView) {
+
+		var lessonView = new LessonContentView();
+		var menuView = new MenuView(); 
+		var GoatAppRouter = Backbone.Router.extend({
+			routes: {
+				//#....
+				'welcome':'welcomeRoute',
+				'attack/:scr/:menu':'attackRoute' //	
+		 	},
+			lessonController: new LessonController({
+				lessonView:lessonView
+			}),
+			menuController: new MenuController({
+				menuView:menuView
+			}),
+
+			init:function() {
+				goatRouter =  new GoatAppRouter();
+				this.lessonController.start();
+				this.menuController.initMenu();
+
+				goatRouter.on('route:attackRoute', function(scr,menu) {
+					console.log('attack route');
+					this.lessonController.loadLesson(scr,menu);
+					this.menuController.updateMenu(scr,menu);
+					//update menu
+				});
+				goatRouter.on('route:welcomeRoute', function() {
+					alert('welcome route');
+				});
+				
+				Backbone.history.start();
+			}
+		});
+
+		return GoatAppRouter;
+
+});

src/main/webapp/js/goatApp/view/LessonContentView.js

@@ -4,22 +4,16 @@ define(['jquery',
 	'backbone',
 	'goatApp/model/LessonContentData'], 
 function($,_,Backbone,LessonData) {
-	var contentView = Backbone.View.extend({
+	return Backbone.View.extend({
-		el:'#lessonContent',
+		el:'#lessonContentWrapper', //TODO << get this fixed up in DOM
 		initialize: function(options) {
-			//this.content = options.content;
+			options = options || {};
-			this.lessonData = {};
-			this.listenTo(this.lessonData,'sync',this.render);
-		},
-		loadLesson: function(options) {
-			this.lessonData = new LessonData(options.screen,options.menu);
-			
 		},
 		render: function() {
-			alert('render');
+			//alert('render');
-			this.$el.html(this.content);
+			this.$el.html(this.model.get('content'));
 		}
 	});
 
-	return contentView;
+	
 });

src/main/webapp/js/goatApp/view/MenuItemView.js

@@ -0,0 +1,14 @@
+define(['jquery',
+	'underscore',
+	'backbone'], function($,_,Backbone) {
+
+	return Backbone.View.extend({
+		initialize: function(options) {
+			options = options || {};
+
+		}
+
+
+	});
+
+});

src/main/webapp/js/goatApp/view/MenuView.js

@@ -1,12 +1,19 @@
-define(['jquery','underscore','backbone','goatApp/model/MenuData'], function($,_,Backbone,MenuData) {
+define(['jquery',
+	'underscore',
+	'backbone',
+	'goatApp/model/MenuItemCollection'], 
+	function($,_,Backbone,MenuItemCollection) {
 
 	return  Backbone.View.extend({
 		el:'#menuContainer',
 		//TODO: set template
-
+		initialize: function() {
+			this.collection = new MenuItemCollection();
+			this.listenTo(this.collection,'menuData:loaded',this.render);
+		},
 		render: function (model){
 			//TODO: implement own HTML Encoder
-			this.$el.html(buildMenu(items));
+			this.$el.html('render ' + this.collection.length + ' items');//buildMenu(items)
 		},
 		buildMenu: function(items) {
 
@@ -44,6 +51,7 @@ define(['jquery','underscore','backbone','goatApp/model/MenuData'], function($,_
 				$(goatConstants.getDOMContainers().lessonMenu).html('').append($wholeMenu);
 			};
 			
-		}
+		},
+
 	});
 });