hints view fix. still a redundant call issue, but logging separately

webgoat-container/src/main/resources/static/css/main.css

@@ -1030,10 +1030,11 @@ span.show-next-page, span.show-prev-page {
 }
 
 #lesson-hint {
-    background-color: #ccc;
+    background-color: #f1f1f1;
     border-radius: 4px;
-    border-color: #999;
+    border-color: #4fa44c;
-    margin-top:4px;
+    margin-top: 4px;
+    border: 2px solid #24b054;
 }
 
 #hintsViewTop{

webgoat-container/src/main/resources/static/js/goatApp/controller/LessonController.js

@@ -64,13 +64,29 @@ define(['jquery',
                 this.menuButtonView = new MenuButtonView();
                 this.listenTo(this.lessonContentView, 'assignment:complete', this.updateMenu);
                 this.listenTo(this.lessonContentView, 'assignment:complete', this.updateLessonOverview);
+                this.listenTo(this.lessonContentView, 'endpoints:filtered', this.filterPageHints);
             };
 
-            this.loadLesson = function(name,pageNum) {
+            this.filterPageHints = function(endpoints) {
+                //filter hints for page by
+                this.lessonHintView.filterHints(endpoints);
+            }
 
+            this.onHideHintsButton = function() {
+                this.helpControlsView.hideHintsButton();
+            }
+
+            this.onShowHintsButton = function() {
+                this.helpControlsView.showHintsButton();
+            }
+
+            this.loadLesson = function(name,pageNum) {
                 if (this.name === name) {
+                    this.listenTo(this.lessonHintView, 'hints:showButton', this.onShowHintsButton);
+                    this.listenTo(this.lessonHintView, 'hints:hideButton', this.onHideHintsButton);
                     this.lessonContentView.navToPage(pageNum);
                     this.lessonHintView.hideHints();
+                    //this.lessonHintView.selectHints();
                     this.titleView.render(this.lessonInfoModel.get('lessonTitle'));
                     return;
                 }
@@ -83,7 +99,7 @@ define(['jquery',
 //                this.planView = {};
 //                this.solutionView = {};
 //                this.sourceView = {};
-                this.lessonHintView = {};
+//                this.lessonHintView = {};
                 this.name = name;
             };
 
@@ -96,15 +112,13 @@ define(['jquery',
 
                 this.listenTo(this.helpControlsView,'hints:show',this.showHints);
                 this.listenTo(this.helpControlsView,'lessonOverview:show',this.showLessonOverview)
-//              this.listenTo(this.helpControlsView,'solution:show',this.hideShowHelps);
+
-//              this.listenTo(this.helpControlsView,'source:show',this.hideShowHelps);
                 this.listenTo(this.helpControlsView,'lesson:restart',this.restartLesson);
                 this.listenTo(this.developerControlsView, 'dev:labels', this.restartLesson);
 
                 this.helpControlsView.render();
                 this.lessonOverview.hideLessonOverview();
                 this.titleView.render(this.lessonInfoModel.get('lessonTitle'));
-                this.helpControlsView.showHideHintsButton({});
             };
 
             this.updateMenu = function() {
@@ -127,6 +141,10 @@ define(['jquery',
                     //this.planView = new PlanView();
                     //this.solutionView = new SolutionView();
                     //this.sourceView = new SourceView();
+                    if (this.lessonHintView) {
+                        this.lessonHintView.stopListening();
+                        this.lessonHintView = null;
+                    }
                     this.lessonHintView = new HintView();
 
                     //TODO: instantiate model with values (not sure why was not working before)

webgoat-container/src/main/resources/static/js/goatApp/view/HelpControlsView.js

@@ -12,18 +12,14 @@ function($,_,Backbone) {
 			this.hasPlan = options.hasPlan;
 			this.hasSolution = options.hasSolution;
 			this.hasSource = options.hasSource;
-			var self = this;
-            Backbone.on('navigatedToPage', function(nav) {
-                self.showHideHintsButton(nav)
-            });
 		},
 
-        showHideHintsButton: function(nav) {
+        showHintsButton: function(nav) {
-		    if (typeof nav['assignmentPath'] !== 'undefined') {
+            this.$el.find('#show-hints-button').unbind().on('click',this.showHints.bind(this)).show();
-                this.$el.find('#show-hints-button').unbind().on('click',this.showHints.bind(this)).show();
+        },
-            } else {
+
-                $('#show-hints-button').hide();
+        hideHintsButton: function(){
-            }
+           $('#show-hints-button').hide();
         },
 
 		render:function(title) {

webgoat-container/src/main/resources/static/js/goatApp/view/HintView.js

@@ -19,8 +19,10 @@ function($,
 			this.listenTo(this.collection,'loaded',this.onModelLoaded);
 			this.hideHints();
             var self = this;
+            // different way to do this?
             Backbone.on('navigatedToPage', function(nav){
-                self.selectHints(nav)
+                self.selectHints(nav);
+                // end event delegation??
             });
 		},
 
@@ -61,14 +63,25 @@ function($,
 		 *
          * @param nav the json structure for navigating
          */
-        selectHints: function(nav) {
+        filterHints: function(endpoints) {
-        	this.curHint = 0;
+            this.hintsToShow = [];
-        	var assignmentPath = nav['assignmentPath'];
+            _.each(endpoints, this.filterHint, this);
-			if (assignmentPath != null) {
+
-                this.hintsToShow = this.collection.getHintsForAssignment(assignmentPath);
+            if (this.hintsToShow.length > 0) {
+                this.trigger('hints:showButton');
             } else {
-				this.hintsToShow = new Array();
+                this.trigger('hints:hideButton');
-			}
+            }
+        },
+
+        filterHint: function(endpoint) {
+            var self = this;
+            _.each(this.collection.models, function(hintModel) {
+                if (endpoint.indexOf(hintModel.get('assignmentPath')) > -1) {
+                    self.hintsToShow.push(hintModel.get('hint'));
+                }
+            });
+            console.log(this.hintsToShow);
         },
 
 		onModelLoaded: function() {
@@ -97,7 +110,7 @@ function($,
             if(this.hintsToShow.length == 0) {
                // this.hideHints();
             } else {
-                this.$el.find('#lesson-hint-content').html(polyglot.t(this.hintsToShow[curHint].get('hint')));
+                this.$el.find('#lesson-hint-content').html(polyglot.t(this.hintsToShow[curHint]));
             }
 		},
 

webgoat-container/src/main/resources/static/js/goatApp/view/LessonContentView.js

@@ -153,13 +153,15 @@ define(['jquery',
             this.$el.find(this.$contentPages[pageNum]).show();
         },
 
-        findAssigmentEndpointOnPage: function(pageNumber) {
+        findAssigmentEndpointsOnPage: function(pageNumber) {
-            var contentPage = this.$contentPages[this.currentPage];
+            var contentPage = this.$contentPages[pageNumber];
-            var form = $('form.attack-form', contentPage);
+            var endpoints = []; //going to assume uniqueness since these are assignments
-            var action = form.attr('action')
+            var pageForms = $(contentPage).find('form.attack-form');
-            if (action !== undefined) {
+            for (var i=0; i<pageForms.length; i++) {
-                return action;
+                endpoints.push(pageForms[i].action);
             }
+            console.log(endpoints);
+            return endpoints;
         },
 
         navToPage: function (pageNum) {
@@ -167,8 +169,8 @@ define(['jquery',
             this.showCurContentPage(this.paginationControlView.currentPage);
             this.paginationControlView.render();
             this.paginationControlView.hideShowNavButtons();
-            var assignmentPath = this.findAssigmentEndpointOnPage(pageNum);
+            var assignmentPaths = this.findAssigmentEndpointsOnPage(pageNum);
-            Backbone.trigger('navigatedToPage',{'pageNumber':pageNum, 'assignmentPath' : assignmentPath});
+            this.trigger('endpoints:filtered',assignmentPaths);
         },
 
         /* for testing */