From daaf361dd274b712df6673a8b67a644ad243746f Mon Sep 17 00:00:00 2001 From: Jason White Date: Mon, 3 Jul 2017 12:14:01 -0400 Subject: [PATCH 1/2] Lesson Overview updates --- .../src/main/resources/static/css/main.css | 20 ++++++---- .../js/goatApp/controller/LessonController.js | 22 +--------- .../js/goatApp/model/AssignmentStatusModel.js | 6 +++ .../goatApp/model/LessonOverviewCollection.js | 14 +++++++ .../js/goatApp/model/LessonOverviewModel.js | 10 ----- .../js/goatApp/view/HelpControlsView.js | 4 -- .../js/goatApp/view/LessonContentView.js | 2 + .../js/goatApp/view/LessonOverviewView.js | 10 ++--- .../js/goatApp/view/PaginationControlView.js | 40 +++++++++++-------- 9 files changed, 65 insertions(+), 63 deletions(-) create mode 100644 webgoat-container/src/main/resources/static/js/goatApp/model/AssignmentStatusModel.js create mode 100644 webgoat-container/src/main/resources/static/js/goatApp/model/LessonOverviewCollection.js delete mode 100644 webgoat-container/src/main/resources/static/js/goatApp/model/LessonOverviewModel.js diff --git a/webgoat-container/src/main/resources/static/css/main.css b/webgoat-container/src/main/resources/static/css/main.css index 93edc7081..0c3d66785 100644 --- a/webgoat-container/src/main/resources/static/css/main.css +++ b/webgoat-container/src/main/resources/static/css/main.css @@ -973,15 +973,8 @@ cookie-container { padding-top:2px; } -.attack-link.solved-true { - color:#88FB88; -} - .attack-link.solved-false { - color:#f2baba; -} - -.attack-link.cur-page, .page-link.cur-page { + background-color:#ac2925; color:#fff; } @@ -989,6 +982,17 @@ cookie-container { color:#eee; } +.attack-link.solved-true { + /*color:#88FB88;*/ + background-color:#247506; + color:#fff; +} + +.attack-link.cur-page, .page-link.cur-page { + color:#fff; + font-weight:bold; +} + .page-link-wrapper { display:inline-block; } 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 07a64c502..a18a68f65 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 @@ -18,17 +18,13 @@ define(['jquery', 'goatApp/view/TitleView', 'goatApp/model/LessonProgressModel', 'goatApp/view/LessonProgressView', - 'goatApp/view/LessonOverviewView', - 'goatApp/model/LessonOverviewModel' + 'goatApp/view/LessonOverviewView' ], function($, _, Backbone, LessonContentModel, LessonContentView, -// PlanView, -// SourceView, -// SolutionView, HintView, HelpControlsView, ParamView, @@ -41,8 +37,7 @@ define(['jquery', TitleView, LessonProgressModel, LessonProgressView, - LessonOverviewView, - LessonOverviewModel + LessonOverviewView ) { 'use strict' @@ -50,8 +45,6 @@ define(['jquery', this.lessonContent = new LessonContentModel(); this.lessonProgressModel = new LessonProgressModel(); this.lessonProgressView = new LessonProgressView(this.lessonProgressModel); - this.lessonOverviewModel = new LessonOverviewModel(); - this.lessonOverview = new LessonOverviewView(this.lessonOverviewModel); this.lessonContentView = options.lessonContentView; this.titleView = options.titleView; this.developerControlsView = new DeveloperControlsView(); @@ -63,7 +56,6 @@ define(['jquery', this.userAndInfoView = new UserAndInfoView(); 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); }; @@ -111,13 +103,11 @@ define(['jquery', }); this.listenTo(this.helpControlsView,'hints:show',this.showHints); - this.listenTo(this.helpControlsView,'lessonOverview:show',this.showLessonOverview) 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')); }; @@ -125,10 +115,6 @@ define(['jquery', this.trigger('menu:reload') }; - this.updateLessonOverview = function() { - this.lessonOverviewModel.fetch(); - } - this.onContentLoaded = function(loadHelps) { this.lessonInfoModel = new LessonInfoModel(); this.listenTo(this.lessonInfoModel,'info:loaded',this.onInfoLoaded); @@ -198,10 +184,6 @@ define(['jquery', this.lessonHintView.render(); }; - this.showLessonOverview = function() { - this.lessonOverviewModel.fetch().then(this.lessonOverview.render()); - }; - this.restartLesson = function() { var self=this; $.ajax({ diff --git a/webgoat-container/src/main/resources/static/js/goatApp/model/AssignmentStatusModel.js b/webgoat-container/src/main/resources/static/js/goatApp/model/AssignmentStatusModel.js new file mode 100644 index 000000000..ad28d205f --- /dev/null +++ b/webgoat-container/src/main/resources/static/js/goatApp/model/AssignmentStatusModel.js @@ -0,0 +1,6 @@ +define([ + 'backbone'], + function( + Backbone) { + return Backbone.Model.extend({}); +}); \ No newline at end of file diff --git a/webgoat-container/src/main/resources/static/js/goatApp/model/LessonOverviewCollection.js b/webgoat-container/src/main/resources/static/js/goatApp/model/LessonOverviewCollection.js new file mode 100644 index 000000000..9df696f0e --- /dev/null +++ b/webgoat-container/src/main/resources/static/js/goatApp/model/LessonOverviewCollection.js @@ -0,0 +1,14 @@ +define([ + 'backbone', + 'goatApp/model/AssignmentStatusModel' + ], + function( + Backbone, + AssignmentStatusModel) { + return Backbone.Collection.extend({ + //tagName: 'ul', + url: 'service/lessonoverview.mvc', + model: AssignmentStatusModel + }); +}); + diff --git a/webgoat-container/src/main/resources/static/js/goatApp/model/LessonOverviewModel.js b/webgoat-container/src/main/resources/static/js/goatApp/model/LessonOverviewModel.js deleted file mode 100644 index 17c906bd5..000000000 --- a/webgoat-container/src/main/resources/static/js/goatApp/model/LessonOverviewModel.js +++ /dev/null @@ -1,10 +0,0 @@ -define([ - 'backbone'], - function( - Backbone) { - return Backbone.Collection.extend({ - //tagName: 'ul', - url: 'service/lessonoverview.mvc' - }); -}); - 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 c317ba0f3..4986c1284 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 @@ -34,7 +34,6 @@ function($,_,Backbone) { this.$el.find('#show-solution-button').unbind().on('click',_.bind(this.showSolution,this)).show(); } - //this.$el.find('#show-lesson-overview-button').unbind().on('click', _.bind(this.showLessonOverview, this)).show(); this.$el.find('#restart-lesson-button').unbind().on('click',_.bind(this.restartLesson,this)).show(); }, @@ -52,9 +51,6 @@ function($,_,Backbone) { restartLesson: function() { this.trigger('lesson:restart'); - }, - showLessonOverview: function() { - this.trigger('lessonOverview:show'); } }); }); \ No newline at end of file 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 dd96905cb..1cd3ae286 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 @@ -60,6 +60,7 @@ define(['jquery', this.paginationControlView = new PaginationControlView(this.$contentPages,this.model.get('lessonUrl')); }, + getCurrentPage: function () { return this.currentPage; }, @@ -120,6 +121,7 @@ define(['jquery', markAssignmentComplete: function () { this.curForm.reset(); $(this.curForm).siblings('.assignment-success').find('i').removeClass('hidden'); + this.paginationControlView.updateModel(); }, markAssignmentIncomplete: function () { diff --git a/webgoat-container/src/main/resources/static/js/goatApp/view/LessonOverviewView.js b/webgoat-container/src/main/resources/static/js/goatApp/view/LessonOverviewView.js index c073fbe9f..1f2497565 100644 --- a/webgoat-container/src/main/resources/static/js/goatApp/view/LessonOverviewView.js +++ b/webgoat-container/src/main/resources/static/js/goatApp/view/LessonOverviewView.js @@ -1,19 +1,19 @@ define(['jquery', 'underscore', 'backbone', - 'goatApp/model/LessonOverviewModel', + 'goatApp/model/LessonOverviewCollection', 'text!templates/lesson_overview.html'], function($, _, Backbone, - LessonOverviewModel, + LessonOverviewCollection, LessonOverviewTemplate) { return Backbone.View.extend({ template: LessonOverviewTemplate, el:'#lesson-overview', - initialize: function (lessonOverviewModel) { - this.model = lessonOverviewModel; - this.listenTo(this.model, 'change add remove update reset', this.render); + initialize: function (lessonOverviewCollection) { + this.collection = lessonOverviewModel; + this.listenTo(this.collection, 'change add remove update reset', this.render); this.hideLessonOverview(); }, diff --git a/webgoat-container/src/main/resources/static/js/goatApp/view/PaginationControlView.js b/webgoat-container/src/main/resources/static/js/goatApp/view/PaginationControlView.js index d156a6756..66e5c75bb 100644 --- a/webgoat-container/src/main/resources/static/js/goatApp/view/PaginationControlView.js +++ b/webgoat-container/src/main/resources/static/js/goatApp/view/PaginationControlView.js @@ -1,12 +1,12 @@ define(['jquery', 'underscore', 'backbone', - 'goatApp/model/LessonOverviewModel', + 'goatApp/model/LessonOverviewCollection', 'text!templates/paging_controls.html'], function ($, _, Backbone, - LessonOverviewModel, + LessonOverviewCollection, PaginationTemplate) { return Backbone.View.extend({ template: PaginationTemplate, @@ -14,24 +14,28 @@ define(['jquery', initialize: function ($contentPages,baseLessonUrl) { this.$contentPages = $contentPages; - this.model = new LessonOverviewModel(); - this.listenTo(this.model, 'change add remove update reset', this.render); + this.collection = new LessonOverviewCollection(); + this.listenTo(this.collection, 'change add reset delete update', this.render); this.numPages = this.$contentPages.length; this.baseUrl = baseLessonUrl; - this.model.fetch(); + this.collection.fetch(); this.initPagination(); this.render(); }, - render: function () { + render: function (e) { this.parseLinks(); var t = _.template(this.template); this.$el.html(t({'overview':this.lessonOverview})); - this.bindNavButtons(); + this.bindNavButtons(); this.hideShowNavButtons(); }, + updateModel: function() { + this.collection.fetch(); + }, + bindNavButtons: function() { this.$el.find('span.glyphicon-class.glyphicon.glyphicon-circle-arrow-right.show-next-page').unbind().on('click',this.incrementPageView.bind(this)); this.$el.find('span.glyphicon-class.glyphicon.glyphicon-circle-arrow-left.show-prev-page').unbind().on('click', this.decrementPageView.bind(this)); @@ -42,17 +46,20 @@ define(['jquery', var assignmentCount = this.$contentPages.find('.attack-container'); var solvedMap = {}; var pages = []; - // one pass on solved assignmets - _.each(this.model.toJSON(), function(assignment) { - if (assignment.solved) { - var key = assignment.assignment.path; //.replace(/\//g,''); - solvedMap[key] = assignment.assignment.name; - } + + _.each(this.collection.models, function(model) { + //alert (model.get('solved')); + if (model.get('solved')) { + var key = model.get('assignment').path.replace(/\//g,''); + solvedMap[key] = model.get('assignment').name; + } + }); isAttackSolved = function (path) { //strip var newPath = path.replace(/^\/WebGoat/,''); + var newPath = newPath.replace(/\//g,''); if (typeof solvedMap[newPath] !== 'undefined') { return true; } @@ -68,7 +75,7 @@ define(['jquery', pageClass = 'page-link'; pages.push({content:'content',pageClass:pageClass,curPageClass:curPageClass}); } else { - var $assignmentForms = $(page).find('.attack-container form'); + var $assignmentForms = $(page).find('.attack-container form.attack-form'); // use for loop to avoid anonymous function scope hell //var pageAssignments = {content:'attack',attacks:[]} pageClass = 'attack-link' @@ -87,6 +94,7 @@ define(['jquery', pages.push({solvedClass:solvedClass,content:'assignment',curPageClass:curPageClass,pageClass:pageClass}); } }); + //assign to the view this.lessonOverview = { baseUrl: this.baseUrl, @@ -134,7 +142,7 @@ define(['jquery', this.hideNextPageButton(); this.showPrevPageButton; } - this.render(); + this.model.fetch(); }, decrementPageView: function() { @@ -151,7 +159,7 @@ define(['jquery', this.hidePrevPageButton(); this.showNextPageButton() } - this.render(); + this.model.fetch(); }, hideShowNavButtons: function () { From 2e4e4ea71684a983baf308b2b52b28fd1fc71609 Mon Sep 17 00:00:00 2001 From: Jason White Date: Mon, 3 Jul 2017 12:37:15 -0400 Subject: [PATCH 2/2] including restart lesson fix for lesson overview --- .../js/goatApp/controller/LessonController.js | 6 ++++++ .../static/js/goatApp/view/LessonContentView.js | 5 ++++- .../js/goatApp/view/PaginationControlView.js | 15 +++++++-------- 3 files changed, 17 insertions(+), 9 deletions(-) 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 a18a68f65..8fcb97c0d 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 @@ -192,6 +192,7 @@ define(['jquery', }).done(function(lessonLink) { self.loadLesson(self.name); self.updateMenu(); + self.callPaginationUpdate(); }); }; @@ -200,9 +201,14 @@ define(['jquery', this.lessonContentView.showTestParam(param); }; + this.callPaginationUpdate = function () { + this.lessonContentView.updatePagination(); + } + }; + return Controller; }); 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 1cd3ae286..fbc2abf94 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 @@ -60,6 +60,9 @@ define(['jquery', this.paginationControlView = new PaginationControlView(this.$contentPages,this.model.get('lessonUrl')); }, + updatePagination: function() { + this.paginationControlView.updateCollection(); + }, getCurrentPage: function () { return this.currentPage; @@ -121,7 +124,7 @@ define(['jquery', markAssignmentComplete: function () { this.curForm.reset(); $(this.curForm).siblings('.assignment-success').find('i').removeClass('hidden'); - this.paginationControlView.updateModel(); + this.paginationControlView.updateCollection(); }, markAssignmentIncomplete: function () { diff --git a/webgoat-container/src/main/resources/static/js/goatApp/view/PaginationControlView.js b/webgoat-container/src/main/resources/static/js/goatApp/view/PaginationControlView.js index 66e5c75bb..2dcecf136 100644 --- a/webgoat-container/src/main/resources/static/js/goatApp/view/PaginationControlView.js +++ b/webgoat-container/src/main/resources/static/js/goatApp/view/PaginationControlView.js @@ -15,13 +15,12 @@ define(['jquery', initialize: function ($contentPages,baseLessonUrl) { this.$contentPages = $contentPages; this.collection = new LessonOverviewCollection(); - this.listenTo(this.collection, 'change add reset delete update', this.render); + this.listenTo(this.collection, 'reset', this.render); this.numPages = this.$contentPages.length; this.baseUrl = baseLessonUrl; - - this.collection.fetch(); + this.collection.fetch({reset:true}); this.initPagination(); - this.render(); + //this.render(); }, render: function (e) { @@ -32,8 +31,8 @@ define(['jquery', this.hideShowNavButtons(); }, - updateModel: function() { - this.collection.fetch(); + updateCollection: function() { + this.collection.fetch({reset:true}); }, bindNavButtons: function() { @@ -142,7 +141,7 @@ define(['jquery', this.hideNextPageButton(); this.showPrevPageButton; } - this.model.fetch(); + this.collection.fetch({reset:true}); }, decrementPageView: function() { @@ -159,7 +158,7 @@ define(['jquery', this.hidePrevPageButton(); this.showNextPageButton() } - this.model.fetch(); + this.collection.fetch({reset:true}); }, hideShowNavButtons: function () {