Skip to content

Commit

Permalink
Merge pull request #43 from misfir3/master
Browse files Browse the repository at this point in the history 
menu and routing work
  • Loading branch information
@mayhew64
mayhew64 committed Aug 23, 2015
2 parents 06d025d + a61f9c8 commit b2316c6
Show file tree
Hide file tree
Showing 11 changed files with 92 additions and 69 deletions.
1 change: 1 addition & 0 deletions webgoat-container/src/main/java/org/owasp/webgoat/lessons/AbstractLesson.java
View file
Expand Up @@ -567,6 +567,7 @@ public String getLink() {
link.append(getScreenId());
link.append("/");
link.append(getCategory().getRanking());

return link.toString();
}

Expand Down
2 changes: 1 addition & 1 deletion webgoat-container/src/main/java/org/owasp/webgoat/service/LessonMenuService.java
View file
Expand Up @@ -113,7 +113,7 @@ List<LessonMenuItem> showLeftNav(HttpSession session) {
LessonMenuItem stageItem = new LessonMenuItem();
stageItem.setName("Stage " + stageIdx + ": " + stage);
// build the link for the stage
String stageLink = lessonLink + "&stage=" + stageIdx;
String stageLink = lessonLink + "/" + stageIdx;
stageItem.setLink(stageLink);
stageItem.setType(LessonMenuItemType.STAGE);
if (rla.isStageComplete(ws, stage)) {
Expand Down
10 changes: 7 additions & 3 deletions webgoat-container/src/main/webapp/css/main.css
View file
Expand Up @@ -851,19 +851,23 @@ cookie-container {
color: #e84c3d;
}

.sidebar ul span.lesson-complete {
#menu-container ul span.lesson-complete {
float: right;
margin-left: -5px;
/*margin-right: 5px;*/
padding-top: 15px;
display:inline-block;
}

#menu-container ul li.selected {
#menu-container ul li.selected, #menu-container li a.selected {
background-color: #555;
}

#menu-container ul li.selected a.selected {
#menu-container ul li.stage {
padding-left:3px;
}

#menu-container li.selected, #menu-container a.selected {
color:white;
}

Expand Down
18 changes: 11 additions & 7 deletions webgoat-container/src/main/webapp/js/goatApp/controller/LessonController.js
View file
Expand Up @@ -39,13 +39,13 @@ define(['jquery',
this.start = function() {
this.listenTo(this.lessonContent,'contentLoaded',this.onContentLoaded);
};

//load View, which can pull data
this.loadLesson = function(scr,menu) {
this.loadLesson = function(scr,menu,stage) {
this.helpsLoaded = {};
this.lessonContent.loadData({
'screen': encodeURIComponent(scr),
'menu': encodeURIComponent(menu),
'screen': scr,
'menu': menu,
'stage': stage
});
this.planView = {};
this.solutionView = {};
Expand Down Expand Up @@ -77,28 +77,32 @@ define(['jquery',
//
this.cookieView = new CookieView();
// parameter model & view
//TODO: instantiate model with values at once (not sure why was not working before)
//TODO: instantiate model with values (not sure why was not working before)
var paramModel = new ParamModel({
});
paramModel.set('screenParam',this.lessonContent.get('screenParam'));
paramModel.set('menuParam',this.lessonContent.get('menuParam'));
paramModel.set('stageParam',this.lessonContent.get('stageParam'));
this.paramView = new ParamView({model:paramModel});

this.hideShowHelps(null);
this.trigger('menu:reload');
};

this.areHelpsReady = function (curHelp) {
//TODO: significantly refactor (remove) this once LessonInfoService can be used to support lazy loading
this.addCurHelpState(curHelp);
// check if all are ready
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),
hasSolution:(this.solutionView.model.get('content') !== null),
hasSource:(this.sourceView.model.get('content') !== null),
hasHints:(this.lessonHintView.collection.length > 0),
});
this.helpControlsView.render();
//

this.listenTo(this.helpControlsView,'plan:show',this.hideShowHelps);
this.listenTo(this.helpControlsView,'solution:show',this.hideShowHelps);
this.listenTo(this.helpControlsView,'hints:show',this.onShowHints)
Expand Down
16 changes: 12 additions & 4 deletions webgoat-container/src/main/webapp/js/goatApp/controller/MenuController.js
View file
@@ -1,5 +1,12 @@
define(['jquery','underscore','backbone','goatApp/view/MenuView'],
function($,_,Backbone,MenuView) {
define(['jquery',
'underscore',
'backbone',
'goatApp/view/MenuView'
],
function($,
_,
Backbone,
MenuView) {
Controller = function(options){
_.extend(Controller.prototype,Backbone.Events);
options = options || {};
Expand All @@ -10,15 +17,16 @@ define(['jquery','underscore','backbone','goatApp/view/MenuView'],
this.listenTo(this.menuView,'lesson:click',this.renderTitle);
}

this.updateMenu = function(curLesson) {

this.updateMenu = function(){
this.menuView.updateMenu();
},

//TODO: move title rendering into lessonContent/View pipeline once data can support it
this.renderTitle = function(title) {
this.titleView.render(title);
}


};

return Controller;
Expand Down
5 changes: 3 additions & 2 deletions webgoat-container/src/main/webapp/js/goatApp/model/LessonContentModel.js
View file
Expand Up @@ -16,13 +16,14 @@ define(['jquery',
initialize: function (options) {
this.screenParam = null;
this.menuParam = null;
this.stageParam = null;
this.baseUrlRoot = 'attack?Screen=';
},
loadData: function(options) {
this.urlRoot = this.baseUrlRoot +options.screen + '&menu=' + options.menu;
this.urlRoot = this.baseUrlRoot +options.screen + '&menu=' + options.menu + '&stage=' + options.stage;
this.set('menuParam',options.menu);
this.set('screenParam',options.screen);

this.set('stageParam',options.stage)
var self=this;
this.fetch().then(function(data) {
self.setContent(data);
Expand Down
18 changes: 13 additions & 5 deletions webgoat-container/src/main/webapp/js/goatApp/model/MenuCollection.js
View file
Expand Up @@ -9,13 +9,21 @@ define(['jquery',
url:'service/lessonmenu.mvc',
initialize: function () {
var self = this;
this.fetch().then(function (data) {
this.models = data;
self.onDataLoaded();
});
this.fetch();
},
onDataLoaded:function() {

onDataLoaded: function() {
this.trigger('menuData:loaded');
},

fetch: function() {
var self=this;
Backbone.Collection.prototype.fetch.apply(this,arguments).then(
function(data) {
this.models = data;
self.onDataLoaded();
}
);
}
});
});
25 changes: 0 additions & 25 deletions webgoat-container/src/main/webapp/js/goatApp/model/MenuData.js
View file
Expand Up @@ -30,28 +30,3 @@ var menuData = Backbone.Model.extend({
});

});

/*
var menuData = Backbone.Model.extend({
urlRoot:'/webgoat/service/lessonmenu.mvc',
defaults: {
items:null,
selectedItem:null
},
initialize: function () {
var self = this;
this.fetch().then(function(menuItems){
menuItems = goatUtils.enhanceMenuData(menuItems,this.selectedItem);
self.items = menuItems;
});
},
update: function() {
var self = this;
this.fetch().then(function(data) {
self.items = data;
self.render(0);
});
}
});
*/
10 changes: 5 additions & 5 deletions webgoat-container/src/main/webapp/js/goatApp/view/GoatRouter.js
View file
Expand Up @@ -16,7 +16,7 @@ define(['jquery',
routes: {
//#....
'welcome':'welcomeRoute',
'attack/:scr/:menu':'attackRoute' //
'attack/:scr/:menu(/:stage)':'attackRoute' //
},

lessonController: new LessonController({
Expand All @@ -33,8 +33,8 @@ define(['jquery',
this.lessonController.start();
this.menuController.initMenu();

goatRouter.on('route:attackRoute', function(scr,menu) {
this.lessonController.loadLesson(scr,menu);
goatRouter.on('route:attackRoute', function(scr,menu,stage) {
this.lessonController.loadLesson(scr,menu,stage);
this.menuController.updateMenu(scr,menu);
//update menu
});
Expand All @@ -43,11 +43,11 @@ define(['jquery',
});

Backbone.history.start();
this.listenTo(this.menuController, 'menu:reload',this.reloadMenu)
this.listenTo(this.lessonController, 'menu:reload',this.reloadMenu)
},

reloadMenu: function (curLesson) {
this.menuController.updateMenu(curLesson);
this.menuController.updateMenu();
}


Expand Down
53 changes: 37 additions & 16 deletions webgoat-container/src/main/webapp/js/goatApp/view/MenuView.js
View file
Expand Up @@ -17,10 +17,11 @@ define(['jquery',
initialize: function() {
this.collection = new MenuCollection();
this.listenTo(this.collection,'menuData:loaded',this.render);
this.listenTo(this,'menu:click',this.accordionMenu);
// this.listenTo(this,'menu:click',this.accordionMenu);
this.curLessonLinkId = '';
},
// rendering top level menu
render: function (model){
render: function (){
//for now, just brute force
//TODO: refactor into sub-views/components
var items, catItems, stages;
Expand All @@ -47,11 +48,14 @@ define(['jquery',
if (lessons) {
var categoryLessonList = $('<ul>',{class:'slideDown lessonsAndStages',id:catId}); //keepOpen
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.titleRender,this,lessonName));
var lessonItem = $('<li>',{class:'lesson'});
var lessonName = lessons[j].name;
var lessonId = GoatUtils.makeId(lessonName);
if (this.curLessonLinkId === lessonId) {
lessonItem.addClass('selected');
}
var lessonLink = $('<a>',{href:lessons[j].link,text:lessonName,id:lessonId});
lessonLink.click(_.bind(this.onLessonClick,this,lessonName));
lessonItem.append(lessonLink);
//check for lab/stages
categoryLessonList.append(lessonItem);
Expand All @@ -60,13 +64,18 @@ define(['jquery',
}
var stages = lessons[j].children;
for (k=0; k < stages.length; k++) {
var stageItem = $('<li>',{class:'stage'});
var stageName = stages[k].name;
var stageLink = $('<a>',{href:stages[k].link,text:stageName,id:GoatUtils.makeId(stageName)});
var stageSpan = $('<span>');
stageSpan.append(stageLink);
categoryLessonList.append(stageSpan);
var stageId = GoatUtils.makeId(stageName);
if (this.curLessonLinkId === stageId) {
stageItem.addClass('selected');
}
var stageLink = $('<a>',{href:stages[k].link,text:stageName,id:stageId});
stageLink.click(_.bind(this.onLessonClick,this,stageName));
stageItem.append(stageLink);
categoryLessonList.append(stageItem);
if (stages[k].complete) {
stageSpan.append($('<span>',{class:'glyphicon glyphicon-check lesson-complete'}));
stageItem.append($('<span>',{class:'glyphicon glyphicon-check lesson-complete'}));
}
}
}
Expand All @@ -75,15 +84,26 @@ define(['jquery',

menuUl.append(category);
}
this.$el.append(menuUl);
this.$el.html(menuUl);
//if we need to keep a menu open
if (this.openMenu) {
this.accordionMenu(this.openMenu);
$('#'+this.openMenu).show();
}
},

titleRender: function (title) {
this.trigger('lesson:click',title);
updateMenu: function() {
//for now ...
this.collection.fetch();
},

onLessonClick: function (title) {
var oldLinkId = GoatUtils.makeId(this.curLessonLinkId);
$('#'+oldLinkId).removeClass('selected');
//update
this.curLessonLinkId = GoatUtils.makeId(title);
var newLinkId = GoatUtils.makeId(this.curLessonLinkId)
$('#'+newLinkId).addClass('selected');
this.trigger('lesson:click', title); // will cause menu reload
},

expandCategory: function (id) {
Expand All @@ -94,6 +114,7 @@ define(['jquery',

accordionMenu: function(id) {
if (this.openMenu !== id) {
this.$el.find('#' + this.openMenu).slideUp(200);
this.$el.find('#' + id).slideDown(300);
this.openMenu = id;
} else { //it's open
Expand Down
3 changes: 2 additions & 1 deletion webgoat-container/src/main/webapp/js/goatApp/view/ParamView.js
View file
Expand Up @@ -22,8 +22,9 @@ function($,
var paramsTable = $('<table>',{'class':'param-table table-striped table-nonfluid'});
var self = this;
_.each(this.model.keys(), function(attribute) {
var attributeLabel = attribute.replace(/Param/,'');
var newRow = $('<tr>');
newRow.append($('<th>',{text:_.escape(attribute)}))
newRow.append($('<th>',{text:_.escape(attributeLabel)}))
newRow.append($('<td>',{text:_.escape(self.model.get(attribute))}));
paramsTable.append(newRow);
});
Expand Down

0 comments on commit b2316c6

Please sign in to comment.