From 22a76624e6829870cece805559cc46dfbdbf2b96 Mon Sep 17 00:00:00 2001 From: Jason White Date: Wed, 12 Oct 2016 14:02:18 -0400 Subject: [PATCH] Pagination fixes, lesson completion update --- .../src/main/resources/static/css/main.css | 4 +++ .../js/goatApp/controller/LessonController.js | 17 +++++----- .../static/js/goatApp/view/GoatRouter.js | 4 +-- .../js/goatApp/view/LessonContentView.js | 32 +++++++++++++++---- 4 files changed, 41 insertions(+), 16 deletions(-) diff --git a/webgoat-container/src/main/resources/static/css/main.css b/webgoat-container/src/main/resources/static/css/main.css index 48d3a455a..197ea1b26 100644 --- a/webgoat-container/src/main/resources/static/css/main.css +++ b/webgoat-container/src/main/resources/static/css/main.css @@ -910,6 +910,10 @@ cookie-container { cursor:pointer; } +.show-prev-page { + margin-right: 10px; +} + .show-prev-page:hover { cursor:pointer; } 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 ffffb464a..d2568cfc4 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 @@ -50,7 +50,7 @@ define(['jquery', this.lessonContent = new LessonContentModel(); this.lessonProgressModel = new LessonProgressModel(); this.lessonProgressView = new LessonProgressView(this.lessonProgressModel); - this.lessonView = options.lessonView; + this.lessonContentView = options.lessonContentView; this.developerControlsView = new DeveloperControlsView(); _.extend(Controller.prototype,Backbone.Events); @@ -69,10 +69,6 @@ define(['jquery', } this.lessonContent.loadData({ 'name':name -// 'scr': scr, -// 'menu': menu, -// 'stage': stage, -// 'num': num, }); this.planView = {}; this.solutionView = {}; @@ -96,6 +92,7 @@ define(['jquery', 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.listenTo(this.lessonContentView, 'lesson:complete', this.updateMenu) this.listenTo(this,'hints:show',this.onShowHints); @@ -104,14 +101,18 @@ define(['jquery', this.titleView.render(this.lessonInfoModel.get('lessonTitle')); }; + this.updateMenu = function() { + this.trigger('menu:reload') + }; + this.onContentLoaded = function(loadHelps) { this.lessonInfoModel = new LessonInfoModel(); this.listenTo(this.lessonInfoModel,'info:loaded',this.onInfoLoaded); if (loadHelps) { this.helpControlsView = null; - this.lessonView.model = this.lessonContent; - this.lessonView.render(); + this.lessonContentView.model = this.lessonContent; + this.lessonContentView.render(); this.planView = new PlanView(); this.solutionView = new SolutionView(); @@ -179,7 +180,7 @@ define(['jquery', }); if (this.lessonInfoModel.get('numberHints') > 0) { - this.lessonView.$el.find('#show-hints-button').unbind().on('click',_.bind(this.showHints,this)).show(); + this.lessonContentView.$el.find('#show-hints-button').unbind().on('click',_.bind(this.showHints,this)).show(); } } }; diff --git a/webgoat-container/src/main/resources/static/js/goatApp/view/GoatRouter.js b/webgoat-container/src/main/resources/static/js/goatApp/view/GoatRouter.js index a24d2fb59..2a6079e2c 100644 --- a/webgoat-container/src/main/resources/static/js/goatApp/view/GoatRouter.js +++ b/webgoat-container/src/main/resources/static/js/goatApp/view/GoatRouter.js @@ -15,7 +15,7 @@ define(['jquery', MenuView, DeveloperControlsView) { - var lessonView = new LessonContentView(); + var lessonContentView = new LessonContentView(); var menuView = new MenuView(); var developerControlsView = new DeveloperControlsView(); @@ -28,7 +28,7 @@ define(['jquery', }, lessonController: new LessonController({ - lessonView: lessonView + lessonContentView: lessonContentView }), menuController: new MenuController({ 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 fe69ca349..6cf30b0cd 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 @@ -75,8 +75,11 @@ define(['jquery', onSuccessResponse: function(data) { console.log(data); this.renderFeedback(data.feedback); - // update menu if lessonCompleted is true + this.renderOutput(data.output || ""); + if (data.lessonComplete) { + this.trigger('lesson:complete'); + } return false; }, @@ -107,17 +110,26 @@ define(['jquery', }, addPaginationControls: function() { + var pagingControlsDiv + this.$el.html(); this.$prevPageButton = $('',{class:'glyphicon-class glyphicon glyphicon-circle-arrow-left show-prev-page'}); this.$prevPageButton.unbind().on('click',this.decrementPageView.bind(this)); this.$nextPageButton = $('',{class:'glyphicon-class glyphicon glyphicon-circle-arrow-right show-next-page'}); this.$nextPageButton.unbind().on('click',this.incrementPageView.bind(this)); - var pagingControlsDiv = $('
',{class:'panel-body', id:'lessong-page-controls'}); - pagingControlsDiv.append(this.$prevPageButton); - pagingControlsDiv.append(this.$nextPageButton); - this.$el.append(pagingControlsDiv); - this.$prevPageButton.hide() + if (this.$el.find('#lesson-page-controls').length < 1) { + pagingControlsDiv = $('
',{class:'panel-body', id:'lesson-page-controls'}); + pagingControlsDiv.append(this.$prevPageButton); + pagingControlsDiv.append(this.$nextPageButton); + this.$el.append(pagingControlsDiv); + } + // + if (this.numPages > 0 ) { + this.$nextPageButton.show(); + } + this.$prevPageButton.hide(); + }, incrementPageView: function() { @@ -126,6 +138,10 @@ define(['jquery', this.showCurContentPage(true); } + if (this.currentPage > 0) { + this.$prevPageButton.show(); + } + if (this.currentPage >= this.numPages -1) { this.$nextPageButton.hide(); this.$prevPageButton.show() @@ -138,6 +154,10 @@ define(['jquery', this.showCurContentPage(false); } + if (this.currentPage < this.numPages -1) { + this.$nextPageButton.show(); + } + if (this.currentPage == 0) { this.$prevPageButton.hide(); this.$nextPageButton.show();