hints working, restar working and complete decorations (still need to wire up menu update on lesson completion)

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

@@ -50,12 +50,14 @@ define(['jquery',
 				this.solutionView = {};
 				this.sourceView = {};
 				this.lessonHintView = {};
+				this.screen = scr;
+				this.menu = menu;
 				//
 				
 			};
 
 			this.onContentLoaded = function() {
-				//this.lessonView  = new LessonContentView({content:LessonContent.content});
+				this.helpControlsView = null;
 				this.lessonView.model = this.lessonContent;
 				this.lessonView.render();
 
@@ -64,22 +66,24 @@ define(['jquery',
 				//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();
-				this.listenTo(this.planView,'plan:loaded',this.areHelpsReady);
+				this.listenToOnce(this.planView,'plan:loaded',this.areHelpsReady);
 				//solution view (initially hidden)
 				this.solutionView = new SolutionView();
-				this.listenTo(this.solutionView,'solution:loaded',this.areHelpsReady);
+				this.listenToOnce(this.solutionView,'solution:loaded',this.areHelpsReady);
 				//source (initially hidden)
 				this.sourceView = new SourceView();
-				this.listenTo(this.sourceView,'source:loaded',this.areHelpsReady);
+				this.listenToOnce(this.sourceView,'source:loaded',this.areHelpsReady);
 				//load help controls view (contextul to what helps are available)
 				this.lessonHintView = new LessonHintView();
-				this.listenTo(this.lessonHintView,'hints:loaded',this.areHelpsReady);
+				this.listenToOnce(this.lessonHintView,'hints:loaded',this.areHelpsReady);
+				//
+				this.hideShowHelps(null);
 			};
 
 			this.areHelpsReady = function (curHelp) {
 				this.addCurHelpState(curHelp);
 				// check if all are ready
-				if (this.helpsLoaded['hints'] && this.helpsLoaded['plan'] && this.helpsLoaded['solution'] && this.helpsLoaded['source']) {
+				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),
@@ -91,7 +95,7 @@ define(['jquery',
 					//
 					this.listenTo(this.helpControlsView,'plan:show',this.hideShowHelps);
 					this.listenTo(this.helpControlsView,'solution:show',this.hideShowHelps);	
-					this.listenTo(this.helpControlsView,'hints:show',this.showHints)
+					this.listenTo(this.helpControlsView,'hints:show',this.onShowHints)
 					this.listenTo(this.helpControlsView,'source:show',this.hideShowHelps);
 					this.listenTo(this.helpControlsView,'lesson:restart',this.restartLesson);
 				}
@@ -103,27 +107,38 @@ define(['jquery',
 
 			this.hideShowHelps = function(showHelp) {
 				var showId = '#lesson-' + showHelp + '-row';
+				var contentId = '#lesson-' + showHelp + '-content';
 				$('.lesson-help').not(showId).hide();
+				if (!showId) { 
+					return;
+				}
 				switch(showHelp) {
 					case 'plan':
-						$(showId).html(this.planView.model.get('content')).show();
+						$(contentId).html(this.planView.model.get('content'));
 						break;
 					case 'solution':
-						$(showId).html(this.solutionView.model.get('content')).show();
+						$(showId).html(this.solutionView.model.get('content'));
 						break;
 					case 'source':
-						$(showId).html(this.sourceView.model.get('content')).show();
+						$(contentId).html('<pre>' + this.sourceView.model.get('content') + '</pre>');
 						break;
 				}
+				$(showId).show();
 				GoatUtils.scrollToHelp()
-			};;
+			};
 
-			this.showHints = function() {
-				console.log('show Hints');
+			this.onShowHints = function() {
+				this.lessonHintView.render();
 			};
 
 			this.restartLesson = function() {
-				console.log('restart lesson');
+				self=this;
+				$.ajax({
+					url:'service/restartlesson.mvc',
+					method:'GET'
+				}).then(function() {
+					self.loadLesson(self.screen,self.menu);
+				});
 			};
 
 		};

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

@@ -10,7 +10,7 @@ define(['jquery','underscore','backbone','goatApp/view/MenuView'],
 		 		this.listenTo(this.menuView,'lesson:click',this.renderTitle);
 		 	}
 
-		 	this.updateMenu = function() {
+		 	this.updateMenu = function(curLesson) {
 		 		
 		 	},
 

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

@@ -2,26 +2,24 @@ define(['jquery',
 	'underscore',
 	'backbone'],
 	function($,_,Backbone) {
-	//TODO: make a base class to extend for items with 'traditional data' (e.g. LessonContentData, this ... others?)
 	return Backbone.Model.extend({
 		//url:'service/lessonplan.mvc',
 		fetch: function (options) {
 			options = options || {};
 			return Backbone.Model.prototype.fetch.call(this, _.extend({ dataType: "html"}, options));
 		},
+
 		loadData: function() {
 			var self=this;
 			this.fetch().then(function(data) {
 				self.setContent(data);
-				self.onModelLoaded();
 			});
 		},
+
 		setContent: function(content) {
 			this.set('content',content);
-			this.trigger('loaded');
-		},
-		onModelLoaded: function() {
 			this.checkNullModel();
+			this.trigger('loaded');
 		}
 	});
 });

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

@@ -2,23 +2,31 @@ define(['jquery',
 	'underscore',
 	'backbone',
 	'goatApp/model/LessonHintModel'], 
-	function($,_,Backbone,LessonHintModel) {
+	
+	function($,
+	_,
+	Backbone,
+	LessonHintModel) {
+		return Backbone.Collection.extend({
+			model: LessonHintModel,
+			url:'service/hint.mvc',
+			initialize: function () {
+				var self = this;
+				this.fetch().then(function (data) {
+					this.models = data;
+					self.onDataLoaded();
+				});
+			},
 
-	return Backbone.Collection.extend({
-		model: LessonHintModel,
-		url:'service/hint.mvc',
-		initialize: function () {
-			var self = this;
-			this.fetch().then(function (data) {
-				this.models = data;
-				self.onDataLoaded();
-			});
-		},
-		onDataLoaded:function() {
-			this.trigger('hints:loaded');//copied over as boiler-plate ... use this event trigger?
-		},
-		checkNullModel:function() {
-			//
-		}
-	});
+			onDataLoaded:function() {
+				this.trigger('loaded');
+			},
+
+			checkNullModel:function() {
+				if (this.models[0].indexOf('There are no hints defined.') > -1) {
+					this.reset([]);
+					//return this.models;
+				}
+			}
+		});
 });

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

@@ -9,10 +9,9 @@ define(['jquery',
 	return HTMLContentModel.extend({
 		url:'service/lessonplan.mvc',
 		checkNullModel: function() {
-			if (this.get('content').indexOf('Plan is not available for this lesson.') > -1) {
+			if (this.get('content').indexOf('Could not find lesson plan for') > -1) {
 				this.set('content',null);
 			}
 		}
-		
 	});
 });

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

@@ -9,7 +9,7 @@ define(['jquery',
 	return HTMLContentModel.extend({
 		url:'service/solution.mvc',
 		checkNullModel: function() {
-			if (this.get('content').indexOf('Solution  is not available. Contact') === 0) {
+			if (this.get('content').indexOf('Could not find the solution file or solution file does not exist') === 0) {
 				this.set('content',null);
 			}
 		}

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

@@ -10,7 +10,7 @@ define(['jquery',
 		url:'service/source.mvc',
 		checkNullModel: function () {
 			//TODO: move this function into HTMLContentModel and make the string a property of this 'child' model
-			if (this.get('content').indexOf("No source listing found") > -1) {
+			if (this.get('content').indexOf("Could not find the source file or") > -1) {
 				this.set('content',null);
 			}
 		}

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

@@ -18,9 +18,11 @@ define(['jquery',
             'welcome':'welcomeRoute',
             'attack/:scr/:menu':'attackRoute' //
         },
+
         lessonController: new LessonController({
             lessonView:lessonView
         }),
+
         menuController: new MenuController({
             menuView:menuView,
             titleView:titleView
@@ -32,7 +34,6 @@ define(['jquery',
             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
@@ -42,7 +43,14 @@ define(['jquery',
             });
 
             Backbone.history.start();
+            this.listenTo('menu:reload',this.reloadMenu)
+        },
+
+        reloadMenu: function (curLesson) {
+            this.menuController.updateMenu(curLesson);
         }
+
+
     });
 
     return GoatAppRouter;

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

@@ -22,6 +22,8 @@ function($,_,Backbone) {
 			this.hasHints = options.hasHints;
 		},
 		render:function(title) {
+			this.$el.html();
+			
 			if (this.hasSource) {
 				this.helpButtons.showSource.unbind().on('click',_.bind(this.showSource,this));
 				this.$el.append(this.helpButtons.showSource);
@@ -38,7 +40,8 @@ function($,_,Backbone) {
 				this.helpButtons.showHints.unbind().on('click',_.bind(this.showHints,this));
 				this.$el.append(this.helpButtons.showHints);
 			}
-			//
+			
+			this.helpButtons.restartLesson.unbind().on('click',_.bind(this.restartLesson,this));
 			this.$el.append(this.helpButtons.restartLesson);
 		},
 
@@ -56,6 +59,9 @@ function($,_,Backbone) {
 
 		showHints: function() {
 			this.trigger('hints:show','hints');
+		},
+		restartLesson: function() {
+			this.trigger('lesson:restart');
 		}
 	});
 });

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

@@ -6,7 +6,7 @@ define(['jquery',
 	'goatApp/model/LessonContentData'], 
 function($,_,Backbone,JQueryForm,LessonData) {
 	return Backbone.View.extend({
-		el:'#lessonContentWrapper', //TODO << get this fixed up in DOM
+		el:'#lesson-content-wrapper', //TODO << get this fixed up in DOM
 		initialize: function(options) {
 			options = options || {};
 		},

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

@@ -7,16 +7,65 @@ function($,
 	Backbone,
 	LessonHintCollection) {
 	return Backbone.View.extend({
-		el:'#lessonHelpWrapper .lessonHelp.lessonHint',
-		initialize: function() {
-			this.collection = new LessonHintCollection();
-			this.listenTo(this.collection,'hints:loaded',this.onModelLoaded);
+		el:'#lesson-hint-container',
+		events: {
+			"click #show-next-hint": "showNextHint",
+			"click #show-prev-hint": "showPrevHint"
 		},
-		render:function(title) {
+		initialize: function() {
+			this.curHint=0;
+			this.collection = new LessonHintCollection();
+			this.listenTo(this.collection,'loaded',this.onModelLoaded);
 			
 		},
+
+		render:function() {
+			if (this.$el.is(':visible')) {
+				this.$el.hide(350);
+			} else {
+				this.$el.show(350);
+			}
+			
+			if (this.collection.length > 0) {
+				this.hideShowPrevNextButtons();
+			}
+			this.displayHint(this.curHint);
+			
+		},
+
 		onModelLoaded: function() {
 			this.trigger('hints:loaded',{'helpElement':'hints','value':true})
+		},
+
+		showNextHint: function() {
+			this.curHint = (this.curHint < this.collection.length -1) ? this.curHint+1 : this.curHint;
+			this.hideShowPrevNextButtons();
+			this.displayHint(this.curHint);
+		},
+
+		showPrevHint: function() {
+			this.curHint = (this.curHint > 0) ? this.curHint-1 : this.curHint;
+			this.hideShowPrevNextButtons();
+			this.displayHint(this.curHint);
+		},
+
+		displayHint: function(curHint) {
+			this.$el.find('#lesson-hint-content').html(this.collection.models[curHint].get('hint'));
+		},
+
+		hideShowPrevNextButtons: function() {
+			if (this.curHint === this.collection.length -1) {
+				this.$el.find('#show-next-hint').css('visibility','hidden');
+			} else {
+				this.$el.find('#show-next-hint').css('visibility','visible');
+			}
+
+			if (this.curHint === 0) {
+				this.$el.find('#show-prev-hint').css('visibility','hidden');
+			} else {
+				this.$el.find('#show-prev-hint').css('visibility','visible');
+			}
 		}
+
 	});
 });

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

@@ -49,18 +49,24 @@ define(['jquery',
 					for (var j=0; j < lessons.length;j++) {
 						var lessonItem = $('<li>');
 						lessonName = lessons[j].name;
+						
 						var lessonLink = $('<a>',{href:lessons[j].link,text:lessonName,id:lessonName});
-						lessonLink.click(_.bind(this.triggerTitleRender,this,lessonName));
+						lessonLink.click(_.bind(this.titleRender,this,lessonName));
 						lessonItem.append(lessonLink);
 						//check for lab/stages
 						categoryLessonList.append(lessonItem);
+						if (lessons[j].complete) { 
+							lessonItem.append($('<span>',{class:'glyphicon glyphicon-check lesson-complete'}));
+						}
 						var stages = lessons[j].children;
 						for (k=0; k < stages.length; k++) {
 							var stageName = stages[k].name;
-							var stageSpan = $('<span>');
 							var stageLink = $('<a>',{href:stages[k].link,text:stageName,id:GoatUtils.makeId(stageName)});
 							stageSpan.append(stageLink);
 							categoryLessonList.append(stageSpan);
+							if (stages[j].complete) {
+								stageSpan.append($('<span>',{class:'glyphicon glyphicon-check lesson-complete'}));
+							}
 						}
 					}
 					category.append(categoryLessonList);
@@ -74,14 +80,17 @@ define(['jquery',
 				this.accordionMenu(this.openMenu);
 			}
 		},
-		triggerTitleRender: function (title) {
+
+		titleRender: function (title) {
 			this.trigger('lesson:click',title);
 		},
+
 		expandCategory: function (id) {
 			if (id) {
 				this.accordionMenu(id);
 			}
 		},
+
 		accordionMenu: function(id) {
 	        if (this.openMenu !== id) {
 	        	this.$el.find('#' + id).slideDown(300);