From 118079233d0e82209902f38a351639e94cea5dde Mon Sep 17 00:00:00 2001 From: Jason White Date: Wed, 10 May 2017 13:07:29 +0100 Subject: [PATCH] hints view fix. still a redundant call issue, but logging separately --- .../src/main/resources/static/css/main.css | 7 +++-- .../js/goatApp/controller/LessonController.js | 28 ++++++++++++++--- .../js/goatApp/view/HelpControlsView.js | 16 ++++------ .../static/js/goatApp/view/HintView.js | 31 +++++++++++++------ .../js/goatApp/view/LessonContentView.js | 18 ++++++----- 5 files changed, 65 insertions(+), 35 deletions(-) diff --git a/webgoat-container/src/main/resources/static/css/main.css b/webgoat-container/src/main/resources/static/css/main.css index 01558e568..17a5e864f 100644 --- a/webgoat-container/src/main/resources/static/css/main.css +++ b/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; - margin-top:4px; + border-color: #4fa44c; + margin-top: 4px; + border: 2px solid #24b054; } #hintsViewTop{ diff --git a/webgoat-container/src/main/resources/static/js/goatApp/controller/LessonController.js b/webgoat-container/src/main/resources/static/js/goatApp/controller/LessonController.js index 52a341f13..07a64c502 100644 --- a/webgoat-container/src/main/resources/static/js/goatApp/controller/LessonController.js +++ b/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) diff --git a/webgoat-container/src/main/resources/static/js/goatApp/view/HelpControlsView.js b/webgoat-container/src/main/resources/static/js/goatApp/view/HelpControlsView.js index 72610c84c..c317ba0f3 100644 --- a/webgoat-container/src/main/resources/static/js/goatApp/view/HelpControlsView.js +++ b/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) { - if (typeof nav['assignmentPath'] !== 'undefined') { - this.$el.find('#show-hints-button').unbind().on('click',this.showHints.bind(this)).show(); - } else { - $('#show-hints-button').hide(); - } + showHintsButton: function(nav) { + this.$el.find('#show-hints-button').unbind().on('click',this.showHints.bind(this)).show(); + }, + + hideHintsButton: function(){ + $('#show-hints-button').hide(); }, render:function(title) { diff --git a/webgoat-container/src/main/resources/static/js/goatApp/view/HintView.js b/webgoat-container/src/main/resources/static/js/goatApp/view/HintView.js index 042b17c54..85508c432 100644 --- a/webgoat-container/src/main/resources/static/js/goatApp/view/HintView.js +++ b/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) { - this.curHint = 0; - var assignmentPath = nav['assignmentPath']; - if (assignmentPath != null) { - this.hintsToShow = this.collection.getHintsForAssignment(assignmentPath); + filterHints: function(endpoints) { + this.hintsToShow = []; + _.each(endpoints, this.filterHint, this); + + 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])); } }, diff --git a/webgoat-container/src/main/resources/static/js/goatApp/view/LessonContentView.js b/webgoat-container/src/main/resources/static/js/goatApp/view/LessonContentView.js index 264ceb5c8..beb0f6fa6 100644 --- a/webgoat-container/src/main/resources/static/js/goatApp/view/LessonContentView.js +++ b/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) { - var contentPage = this.$contentPages[this.currentPage]; - var form = $('form.attack-form', contentPage); - var action = form.attr('action') - if (action !== undefined) { - return action; + findAssigmentEndpointsOnPage: function(pageNumber) { + var contentPage = this.$contentPages[pageNumber]; + var endpoints = []; //going to assume uniqueness since these are assignments + var pageForms = $(contentPage).find('form.attack-form'); + for (var i=0; i