Moved Maven multiproject setup
This commit is contained in:
@ -0,0 +1,146 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'libs/backbone',
|
||||
'goatApp/model/LessonContentData',
|
||||
'goatApp/view/LessonContentView',
|
||||
'goatApp/view/PlanView',
|
||||
'goatApp/view/SourceView',
|
||||
'goatApp/view/SolutionView',
|
||||
'goatApp/view/LessonHintView',
|
||||
'goatApp/view/HelpControlsView',
|
||||
'goatApp/support/GoatUtils'
|
||||
],
|
||||
function($,
|
||||
_,
|
||||
Backbone,
|
||||
LessonContentData,
|
||||
LessonContentView,
|
||||
PlanView,
|
||||
SourceView,
|
||||
SolutionView,
|
||||
LessonHintView,
|
||||
HelpControlsView,
|
||||
GoatUtils
|
||||
) {
|
||||
'use strict'
|
||||
|
||||
|
||||
var Controller = function(options) {
|
||||
this.lessonContent = new LessonContentData();
|
||||
this.lessonView = options.lessonView;
|
||||
|
||||
/*this.planView = new PlanView();
|
||||
this.solutionView = new SolutionView();
|
||||
this.sourceView = new SourceView();
|
||||
*/
|
||||
|
||||
_.extend(Controller.prototype,Backbone.Events);
|
||||
this.start = function() {
|
||||
this.listenTo(this.lessonContent,'contentLoaded',this.onContentLoaded);
|
||||
};
|
||||
|
||||
//load View, which can pull data
|
||||
this.loadLesson = function(scr,menu) {
|
||||
this.helpsLoaded = {};
|
||||
this.lessonContent.loadData({
|
||||
'screen': encodeURIComponent(scr),
|
||||
'menu': encodeURIComponent(menu),
|
||||
});
|
||||
this.planView = {};
|
||||
this.solutionView = {};
|
||||
this.sourceView = {};
|
||||
this.lessonHintView = {};
|
||||
this.screen = scr;
|
||||
this.menu = menu;
|
||||
//
|
||||
|
||||
};
|
||||
|
||||
this.onContentLoaded = function() {
|
||||
this.helpControlsView = null;
|
||||
this.lessonView.model = this.lessonContent;
|
||||
this.lessonView.render();
|
||||
|
||||
//load cookies/parameters view
|
||||
|
||||
//load title view (initially hidden) << //TODO: currently handled via menu click but need to be able to handle via routed request
|
||||
//plan view (initially hidden)
|
||||
this.planView = new PlanView();
|
||||
this.listenToOnce(this.planView,'plan:loaded',this.areHelpsReady);
|
||||
//solution view (initially hidden)
|
||||
this.solutionView = new SolutionView();
|
||||
this.listenToOnce(this.solutionView,'solution:loaded',this.areHelpsReady);
|
||||
//source (initially hidden)
|
||||
this.sourceView = new SourceView();
|
||||
this.listenToOnce(this.sourceView,'source:loaded',this.areHelpsReady);
|
||||
//load help controls view (contextul to what helps are available)
|
||||
this.lessonHintView = new LessonHintView();
|
||||
this.listenToOnce(this.lessonHintView,'hints:loaded',this.areHelpsReady);
|
||||
//
|
||||
this.hideShowHelps(null);
|
||||
};
|
||||
|
||||
this.areHelpsReady = function (curHelp) {
|
||||
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)
|
||||
this.listenTo(this.helpControlsView,'source:show',this.hideShowHelps);
|
||||
this.listenTo(this.helpControlsView,'lesson:restart',this.restartLesson);
|
||||
}
|
||||
};
|
||||
|
||||
this.addCurHelpState = function (curHelp) {
|
||||
this.helpsLoaded[curHelp.helpElement] = curHelp.value;
|
||||
};
|
||||
|
||||
this.hideShowHelps = function(showHelp) {
|
||||
var showId = '#lesson-' + showHelp + '-row';
|
||||
var contentId = '#lesson-' + showHelp + '-content';
|
||||
$('.lesson-help').not(showId).hide();
|
||||
if (!showId) {
|
||||
return;
|
||||
}
|
||||
switch(showHelp) {
|
||||
case 'plan':
|
||||
$(contentId).html(this.planView.model.get('content'));
|
||||
break;
|
||||
case 'solution':
|
||||
$(showId).html(this.solutionView.model.get('content'));
|
||||
break;
|
||||
case 'source':
|
||||
$(contentId).html('<pre>' + this.sourceView.model.get('content') + '</pre>');
|
||||
break;
|
||||
}
|
||||
$(showId).show();
|
||||
GoatUtils.scrollToHelp()
|
||||
};
|
||||
|
||||
this.onShowHints = function() {
|
||||
this.lessonHintView.render();
|
||||
};
|
||||
|
||||
this.restartLesson = function() {
|
||||
self=this;
|
||||
$.ajax({
|
||||
url:'service/restartlesson.mvc',
|
||||
method:'GET'
|
||||
}).then(function() {
|
||||
self.loadLesson(self.screen,self.menu);
|
||||
});
|
||||
};
|
||||
|
||||
};
|
||||
return Controller;
|
||||
});
|
@ -0,0 +1,25 @@
|
||||
define(['jquery','underscore','backbone','goatApp/view/MenuView'],
|
||||
function($,_,Backbone,MenuView) {
|
||||
Controller = function(options){
|
||||
_.extend(Controller.prototype,Backbone.Events);
|
||||
options = options || {};
|
||||
this.menuView = options.menuView;
|
||||
this.titleView = options.titleView;
|
||||
|
||||
this.initMenu = function() {
|
||||
this.listenTo(this.menuView,'lesson:click',this.renderTitle);
|
||||
}
|
||||
|
||||
this.updateMenu = function(curLesson) {
|
||||
|
||||
},
|
||||
|
||||
//TODO: move title rendering into lessonContent/View pipeline once data can support it
|
||||
this.renderTitle = function(title) {
|
||||
this.titleView.render(title);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return Controller;
|
||||
});
|
12
webgoat-container/src/main/webapp/js/goatApp/goatApp.js
Normal file
12
webgoat-container/src/main/webapp/js/goatApp/goatApp.js
Normal file
@ -0,0 +1,12 @@
|
||||
define(['jquery','underscore','backbone','goatApp/view/GoatRouter'],
|
||||
function($,_,Backbone,Router){
|
||||
'use strict'
|
||||
//var goatRouter = new Router();
|
||||
return {
|
||||
initApp: function() {
|
||||
//TODO: add query/ability to load from where they left off
|
||||
var goatRouter = new Router();
|
||||
goatRouter.init();
|
||||
}
|
||||
};
|
||||
});
|
@ -0,0 +1,25 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone'],
|
||||
function($,_,Backbone) {
|
||||
return Backbone.Model.extend({
|
||||
//url:'service/lessonplan.mvc',
|
||||
fetch: function (options) {
|
||||
options = options || {};
|
||||
return Backbone.Model.prototype.fetch.call(this, _.extend({ dataType: "html"}, options));
|
||||
},
|
||||
|
||||
loadData: function() {
|
||||
var self=this;
|
||||
this.fetch().then(function(data) {
|
||||
self.setContent(data);
|
||||
});
|
||||
},
|
||||
|
||||
setContent: function(content) {
|
||||
this.set('content',content);
|
||||
this.checkNullModel();
|
||||
this.trigger('loaded');
|
||||
}
|
||||
});
|
||||
});
|
@ -0,0 +1,40 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'goatApp/model/HTMLContentModel'],
|
||||
function($,
|
||||
_,
|
||||
Backbone,
|
||||
HTMLContentModel){
|
||||
|
||||
return HTMLContentModel.extend({
|
||||
urlRoot:null,
|
||||
defaults: {
|
||||
items:null,
|
||||
selectedItem:null
|
||||
},
|
||||
initialize: function (options) {
|
||||
this.screenParam = null;
|
||||
this.menuParam = null;
|
||||
this.baseUrlRoot = 'attack?Screen=';//
|
||||
},
|
||||
loadData: function(options) {
|
||||
this.urlRoot = this.baseUrlRoot +options.screen + '&menu=' + options.menu;
|
||||
this.set('menuParam',options.menu);
|
||||
this.set('screenParam',options.screen);
|
||||
|
||||
var self=this;
|
||||
this.fetch().then(function(data) {
|
||||
self.setContent(data);
|
||||
});
|
||||
},
|
||||
setContent: function(content) {
|
||||
this.set('content',content);
|
||||
this.trigger('contentLoaded');
|
||||
},
|
||||
fetch: function (options) {
|
||||
options = options || {};
|
||||
return Backbone.Model.prototype.fetch.call(this, _.extend({ dataType: "html"}, options));
|
||||
}
|
||||
});
|
||||
});
|
@ -0,0 +1,32 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'goatApp/model/LessonHintModel'],
|
||||
|
||||
function($,
|
||||
_,
|
||||
Backbone,
|
||||
LessonHintModel) {
|
||||
return Backbone.Collection.extend({
|
||||
model: LessonHintModel,
|
||||
url:'service/hint.mvc',
|
||||
initialize: function () {
|
||||
var self = this;
|
||||
this.fetch().then(function (data) {
|
||||
this.models = data;
|
||||
self.onDataLoaded();
|
||||
});
|
||||
},
|
||||
|
||||
onDataLoaded:function() {
|
||||
this.trigger('loaded');
|
||||
},
|
||||
|
||||
checkNullModel:function() {
|
||||
if (this.models[0].indexOf('There are no hints defined.') > -1) {
|
||||
this.reset([]);
|
||||
//return this.models;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
@ -0,0 +1,10 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone'],
|
||||
function($,
|
||||
_,
|
||||
Backbone,
|
||||
HTMLContentModel) {
|
||||
return Backbone.Model.extend({
|
||||
});
|
||||
});
|
@ -0,0 +1,17 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'goatApp/model/HTMLContentModel'],
|
||||
function($,
|
||||
_,
|
||||
Backbone,
|
||||
HTMLContentModel) {
|
||||
return HTMLContentModel.extend({
|
||||
url:'service/lessonplan.mvc',
|
||||
checkNullModel: function() {
|
||||
if (this.get('content').indexOf('Could not find lesson plan for') > -1) {
|
||||
this.set('content',null);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
@ -0,0 +1,18 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'goatApp/model/HTMLContentModel'],
|
||||
function($,
|
||||
_,
|
||||
Backbone,
|
||||
HTMLContentModel) {
|
||||
return HTMLContentModel.extend({
|
||||
url:'service/solution.mvc',
|
||||
checkNullModel: function() {
|
||||
if (this.get('content').indexOf('Could not find the solution file or solution file does not exist') === 0) {
|
||||
this.set('content',null);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
});
|
@ -0,0 +1,19 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'goatApp/model/HTMLContentModel'],
|
||||
function($,
|
||||
_,
|
||||
Backbone,
|
||||
HTMLContentModel) {
|
||||
return HTMLContentModel.extend({
|
||||
url:'service/source.mvc',
|
||||
checkNullModel: function () {
|
||||
//TODO: move this function into HTMLContentModel and make the string a property of this 'child' model
|
||||
if (this.get('content').indexOf("Could not find the source file or") > -1) {
|
||||
this.set('content',null);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
});
|
@ -0,0 +1,21 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'goatApp/model/MenuModel'],
|
||||
function($,_,Backbone,MenuModel) {
|
||||
|
||||
return Backbone.Collection.extend({
|
||||
model: MenuModel,
|
||||
url:'service/lessonmenu.mvc',
|
||||
initialize: function () {
|
||||
var self = this;
|
||||
this.fetch().then(function (data) {
|
||||
this.models = data;
|
||||
self.onDataLoaded();
|
||||
});
|
||||
},
|
||||
onDataLoaded:function() {
|
||||
this.trigger('menuData:loaded');
|
||||
}
|
||||
});
|
||||
});
|
@ -0,0 +1,57 @@
|
||||
//var goatApp = goatApp || {};
|
||||
|
||||
define(['jquery','underscore','backbone'], function($,_,Backbone) {
|
||||
|
||||
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);
|
||||
this.setDataItems(menuItems);
|
||||
});
|
||||
},
|
||||
|
||||
update: function() {
|
||||
var self = this;
|
||||
this.fetch().then(function(menuItems) {
|
||||
menuItems = goatUtils.enhanceMenuData(menuItems,this.selectedItem);
|
||||
self.setDataItems(menuItems);
|
||||
});
|
||||
},
|
||||
|
||||
setDataItems: function (data) {
|
||||
this.items = data;
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
/*
|
||||
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);
|
||||
});
|
||||
}
|
||||
});
|
||||
*/
|
@ -0,0 +1,10 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone'],
|
||||
function($,_,Backbone) {
|
||||
|
||||
return Backbone.Model.extend({
|
||||
|
||||
});
|
||||
|
||||
});
|
@ -0,0 +1,147 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'libs/jquery.form'
|
||||
],
|
||||
function($,
|
||||
_,
|
||||
Backbone,
|
||||
JQueryForm) {
|
||||
var goatUtils = {
|
||||
makeId: function(lessonName) {
|
||||
//var id =
|
||||
return lessonName.replace(/\s|\(|\)|\!|\:|\;|\@|\#|\$|\%|\^|\&|\*/g, '');
|
||||
},
|
||||
addMenuClasses: function(arr) {
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
var menuItem = arr[i];
|
||||
//console.log(menuItem);
|
||||
if (menuItem.type && menuItem.type === 'CATEGORY') {
|
||||
menuItem.class = 'fa-angle-right pull-right';
|
||||
}
|
||||
}
|
||||
return arr;
|
||||
},
|
||||
// debugFormSubmission: false,
|
||||
// pre-submit callback
|
||||
showRequest: function(formData, jqForm, options) {
|
||||
if (GoatUtils.debugFormSubmission) {
|
||||
// formData is an array; here we use $.param to convert it to a string to display it
|
||||
// but the form plugin does this for you automatically when it submits the data
|
||||
var queryString = $.param(formData);
|
||||
|
||||
// jqForm is a jQuery object encapsulating the form element. To access the
|
||||
// DOM element for the form do this:
|
||||
// var formElement = jqForm[0];
|
||||
|
||||
alert('About to submit: \n\n' + queryString);
|
||||
}
|
||||
// here we could return false to prevent the form from being submitted;
|
||||
// returning anything other than false will allow the form submit to continue
|
||||
return true;
|
||||
},
|
||||
// post-submit callback
|
||||
showResponse: function(responseText, statusText, xhr, $form) {
|
||||
// for normal html responses, the first argument to the success callback
|
||||
// is the XMLHttpRequest object's responseText property
|
||||
|
||||
// if the ajaxForm method was passed an Options Object with the dataType
|
||||
// property set to 'xml' then the first argument to the success callback
|
||||
// is the XMLHttpRequest object's responseXML property
|
||||
|
||||
// if the ajaxForm method was passed an Options Object with the dataType
|
||||
// property set to 'json' then the first argument to the success callback
|
||||
// is the json data object returned by the server
|
||||
if (GoatUtils.debugFormSubmission) {
|
||||
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
|
||||
'\n\nThe output div should have already been updated with the responseText.');
|
||||
}
|
||||
// update lesson cookies and params
|
||||
// make any embedded forms ajaxy
|
||||
GoatUtils.showLessonCookiesAndParams();
|
||||
// forms and links are now hooked with each standard lesson render (see Java class Screen.getContent())
|
||||
// but these are safe to call twice
|
||||
GoatUtils.makeFormsAjax();
|
||||
GoatUtils.ajaxifyAttackHref(); //TODO find some way to hook scope for current menu. Likely needs larger refactor which is already started/stashed
|
||||
//refresh menu
|
||||
angular.element($('#leftside-navigation')).scope().renderMenu();
|
||||
},
|
||||
makeFormsAjax: function() {
|
||||
// make all forms ajax forms
|
||||
var options = {
|
||||
target: '#lesson_content', // target element(s) to be updated with server response
|
||||
beforeSubmit: GoatUtils.showRequest, // pre-submit callback, comment out after debugging
|
||||
success: GoatUtils.showResponse // post-submit callback, comment out after debugging
|
||||
|
||||
// other available options:
|
||||
//url: url // override for form's 'action' attribute
|
||||
//type: type // 'get' or 'post', override for form's 'method' attribute
|
||||
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
|
||||
//clearForm: true // clear all form fields after successful submit
|
||||
//resetForm: true // reset the form after successful submit
|
||||
|
||||
// $.ajax options can be used here too, for example:
|
||||
//timeout: 3000
|
||||
};
|
||||
//console.log("Hooking any lesson forms to make them ajax");
|
||||
$("form").ajaxForm(options);
|
||||
},
|
||||
displayButton: function(id, show) {
|
||||
if ($('#' + id)) {
|
||||
if (show) {
|
||||
$('#' + id).show();
|
||||
} else {
|
||||
$('#' + id).hide();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
showLessonCookiesAndParams: function() {
|
||||
$.get(goatConstants.cookieService, {}, function(reply) {
|
||||
$("#lesson_cookies").html(reply);
|
||||
}, "html");
|
||||
},
|
||||
|
||||
scrollToHelp: function() {
|
||||
$('#leftside-navigation').height($('#main-content').height() + 15)
|
||||
var target = $('#lesson-helps-wrapper');
|
||||
this.scrollEasy(target);
|
||||
},
|
||||
|
||||
scrollToTop: function() {
|
||||
$('.lessonHelp').hide();
|
||||
var target = $('#container');
|
||||
this.scrollEasy(target);
|
||||
},
|
||||
|
||||
scrollEasy: function(target) {
|
||||
$('html,body').animate({
|
||||
scrollTop: target.offset().top
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
highlightCurrentLessonMenu: function(id) {
|
||||
//TODO: move selectors in first two lines into goatConstants
|
||||
$('ul li.selected').removeClass(goatConstants.selectedMenuClass)
|
||||
$('ul li.selected a.selected').removeClass(goatConstants.selectedMenuClass)
|
||||
$('#' + id).addClass(goatConstants.selectedMenuClass);
|
||||
$('#' + id).parent().addClass(goatConstants.selectedMenuClass);
|
||||
},
|
||||
|
||||
ajaxifyAttackHref: function() { // rewrite any links with hrefs point to relative attack URLs
|
||||
$.each($('a[href^="attack?"]'),
|
||||
function(i,el) {
|
||||
var url = $(el).attr('href');
|
||||
$(el).unbind('click').attr('href','#').attr('link',url);
|
||||
//TODO pull currentMenuId
|
||||
$(el).click(function() {
|
||||
event.preventDefault();
|
||||
var _url = $(el).attr('link');
|
||||
$.get(_url, {success:showResponse});
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return goatUtils;
|
||||
});
|
@ -0,0 +1,39 @@
|
||||
//goatConstants
|
||||
|
||||
var goatConstants = {
|
||||
getClasses: function() {
|
||||
return {
|
||||
categoryClass:'fa-angle-right pull-right',
|
||||
lessonCompleteClass:'glyphicon glyphicon-check lessonComplete',
|
||||
selectedMenuClass:'selected',
|
||||
keepOpenClass:'keepOpen'
|
||||
};
|
||||
},
|
||||
getServices: function() {
|
||||
return {
|
||||
lessonService: 'service/lessonmenu.mvc',
|
||||
cookieService: 'service/cookie.mvc', //cookies_widget.mvc
|
||||
hintService: 'service/hint.mvc',
|
||||
sourceService: 'service/source.mvc',
|
||||
solutionService: 'service/solution.mvc',
|
||||
lessonPlanService: 'service/lessonplan.mvc',
|
||||
menuService: 'service/lessonmenu.mvc',
|
||||
lessonTitleService: 'service/lessontitle.mvc',
|
||||
restartLessonService: 'service/restartlesson.mvc'
|
||||
}
|
||||
},
|
||||
getMessages: function() {
|
||||
return {
|
||||
notFound: 'Could not find',
|
||||
noHints: 'There are no hints defined.',
|
||||
noSourcePulled: 'No source was retrieved for this lesson'
|
||||
}
|
||||
},
|
||||
getDOMContainers:function() {
|
||||
return {
|
||||
lessonMenu: '#menu-container'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -0,0 +1,58 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'goatApp/controller/LessonController',
|
||||
'goatApp/controller/MenuController',
|
||||
'goatApp/view/LessonContentView',
|
||||
'goatApp/view/MenuView',
|
||||
'goatApp/view/TitleView'
|
||||
], function ($,_,Backbone,LessonController,MenuController,LessonContentView,MenuView,TitleView) {
|
||||
|
||||
var lessonView = new LessonContentView();
|
||||
var menuView = new MenuView();
|
||||
var titleView = new TitleView();
|
||||
|
||||
var GoatAppRouter = Backbone.Router.extend({
|
||||
routes: {
|
||||
//#....
|
||||
'welcome':'welcomeRoute',
|
||||
'attack/:scr/:menu':'attackRoute' //
|
||||
},
|
||||
|
||||
lessonController: new LessonController({
|
||||
lessonView:lessonView
|
||||
}),
|
||||
|
||||
menuController: new MenuController({
|
||||
menuView:menuView,
|
||||
titleView:titleView
|
||||
}),
|
||||
|
||||
init:function() {
|
||||
goatRouter = new GoatAppRouter();
|
||||
this.lessonController.start();
|
||||
this.menuController.initMenu();
|
||||
|
||||
goatRouter.on('route:attackRoute', function(scr,menu) {
|
||||
this.lessonController.loadLesson(scr,menu);
|
||||
this.menuController.updateMenu(scr,menu);
|
||||
//update menu
|
||||
});
|
||||
goatRouter.on('route:welcomeRoute', function() {
|
||||
alert('welcome route');
|
||||
});
|
||||
|
||||
Backbone.history.start();
|
||||
this.listenTo('menu:reload',this.reloadMenu)
|
||||
},
|
||||
|
||||
reloadMenu: function (curLesson) {
|
||||
this.menuController.updateMenu(curLesson);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
return GoatAppRouter;
|
||||
|
||||
});
|
@ -0,0 +1,67 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone'],
|
||||
function($,_,Backbone) {
|
||||
return Backbone.View.extend({
|
||||
el:'#help-controls', //Check this
|
||||
helpButtons: {
|
||||
//TODO: move this into a template
|
||||
showSource:$('<button>',{id:'show-source-button','class':'btn btn-primary btn-xs help-button',type:'button',text:'Java [Source]'}),
|
||||
showSolution:$('<button>',{id:'show-solution-button','class':'btn btn-primary btn-xs help-button',type:'button',text:'Solution'}),
|
||||
showPlan:$('<button>',{id:'show-plan-button','class':'btn btn-primary btn-xs help-button',type:'button',text:'Lesson Plan]'}),
|
||||
showHints:$('<button>',{id:'show-hints-button','class':'btn btn-primary btn-xs help-button',type:'button',text:'Hints'}),
|
||||
restartLesson:$('<button>',{id:'restart-lesson-button','class':'btn btn-xs help-button',type:'button',text:'Restart Lesson'})
|
||||
},
|
||||
initialize: function (options) {
|
||||
if (!options) {
|
||||
return;
|
||||
}
|
||||
this.hasPlan = options.hasPlan;
|
||||
this.hasSolution = options.hasSolution;
|
||||
this.hasSource = options.hasSource;
|
||||
this.hasHints = options.hasHints;
|
||||
},
|
||||
render:function(title) {
|
||||
this.$el.html();
|
||||
|
||||
if (this.hasSource) {
|
||||
this.helpButtons.showSource.unbind().on('click',_.bind(this.showSource,this));
|
||||
this.$el.append(this.helpButtons.showSource);
|
||||
}
|
||||
if (this.hasSolution) {
|
||||
this.helpButtons.showSolution.unbind().on('click',_.bind(this.showSolution,this));
|
||||
this.$el.append(this.helpButtons.showSolution);
|
||||
}
|
||||
if (this.hasPlan) {
|
||||
this.helpButtons.showPlan.unbind().on('click',_.bind(this.showPlan,this));
|
||||
this.$el.append(this.helpButtons.showPlan);
|
||||
}
|
||||
if (this.hasHints) {
|
||||
this.helpButtons.showHints.unbind().on('click',_.bind(this.showHints,this));
|
||||
this.$el.append(this.helpButtons.showHints);
|
||||
}
|
||||
|
||||
this.helpButtons.restartLesson.unbind().on('click',_.bind(this.restartLesson,this));
|
||||
this.$el.append(this.helpButtons.restartLesson);
|
||||
},
|
||||
|
||||
showSource: function() {
|
||||
this.trigger('source:show','source');
|
||||
},
|
||||
|
||||
showSolution: function() {
|
||||
this.trigger('solution:show','solution');
|
||||
},
|
||||
|
||||
showPlan: function() {
|
||||
this.trigger('plan:show','plan');
|
||||
},
|
||||
|
||||
showHints: function() {
|
||||
this.trigger('hints:show','hints');
|
||||
},
|
||||
restartLesson: function() {
|
||||
this.trigger('lesson:restart');
|
||||
}
|
||||
});
|
||||
});
|
@ -0,0 +1,23 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'goatApp/model/LessonSourceModel'],
|
||||
function($,
|
||||
_,
|
||||
Backbone,
|
||||
LessonSourceModel) {
|
||||
return Backbone.View.extend({
|
||||
el:'#lessonHelpWrapper .lessonHelp.lessonPlan', //Check this
|
||||
initialize: function() {
|
||||
this.model = new LessonSourceModel();
|
||||
this.listenTo(this.model,'loaded',this.onModelLoaded);
|
||||
this.model.loadData();
|
||||
},
|
||||
render:function(title) {
|
||||
|
||||
},
|
||||
onModelLoaded: function() {
|
||||
this.trigger(this.loadedMessage,this.helpElement);
|
||||
}
|
||||
});
|
||||
});
|
@ -0,0 +1,39 @@
|
||||
//LessonContentView
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'libs/jquery.form',
|
||||
'goatApp/model/LessonContentData'],
|
||||
function($,_,Backbone,JQueryForm,LessonData) {
|
||||
return Backbone.View.extend({
|
||||
el:'#lesson-content-wrapper', //TODO << get this fixed up in DOM
|
||||
initialize: function(options) {
|
||||
options = options || {};
|
||||
},
|
||||
render: function() {
|
||||
this.$el.html(this.model.get('content'));
|
||||
this.makeFormsAjax();
|
||||
},
|
||||
//TODO: reimplement this in custom fashion maybe?
|
||||
makeFormsAjax: function () {
|
||||
var options = {
|
||||
//target: '#lesson_content', // target element(s) to be updated with server response
|
||||
//beforeSubmit: GoatUtils.showRequest, // pre-submit callback, comment out after debugging
|
||||
//success: GoatUtils.showResponse // post-submit callback, comment out after debugging
|
||||
success:this.reLoadView.bind(this),
|
||||
url:'attack?Screen=' + this.model.get('screenParam') + '&menu=' + this.model.get('menuParam'),
|
||||
type:'GET'
|
||||
// $.ajax options can be used here too, for example:
|
||||
//timeout: 3000
|
||||
};
|
||||
//hook forms //TODO: clarify form selectors later
|
||||
$("form").ajaxForm(options);
|
||||
},
|
||||
reLoadView: function(content) {
|
||||
this.model.setContent(content);
|
||||
this.render();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
});
|
@ -0,0 +1,71 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'goatApp/model/LessonHintCollection'],
|
||||
function($,
|
||||
_,
|
||||
Backbone,
|
||||
LessonHintCollection) {
|
||||
return Backbone.View.extend({
|
||||
el:'#lesson-hint-container',
|
||||
events: {
|
||||
"click #show-next-hint": "showNextHint",
|
||||
"click #show-prev-hint": "showPrevHint"
|
||||
},
|
||||
initialize: function() {
|
||||
this.curHint=0;
|
||||
this.collection = new LessonHintCollection();
|
||||
this.listenTo(this.collection,'loaded',this.onModelLoaded);
|
||||
|
||||
},
|
||||
|
||||
render:function() {
|
||||
if (this.$el.is(':visible')) {
|
||||
this.$el.hide(350);
|
||||
} else {
|
||||
this.$el.show(350);
|
||||
}
|
||||
|
||||
if (this.collection.length > 0) {
|
||||
this.hideShowPrevNextButtons();
|
||||
}
|
||||
this.displayHint(this.curHint);
|
||||
|
||||
},
|
||||
|
||||
onModelLoaded: function() {
|
||||
this.trigger('hints:loaded',{'helpElement':'hints','value':true})
|
||||
},
|
||||
|
||||
showNextHint: function() {
|
||||
this.curHint = (this.curHint < this.collection.length -1) ? this.curHint+1 : this.curHint;
|
||||
this.hideShowPrevNextButtons();
|
||||
this.displayHint(this.curHint);
|
||||
},
|
||||
|
||||
showPrevHint: function() {
|
||||
this.curHint = (this.curHint > 0) ? this.curHint-1 : this.curHint;
|
||||
this.hideShowPrevNextButtons();
|
||||
this.displayHint(this.curHint);
|
||||
},
|
||||
|
||||
displayHint: function(curHint) {
|
||||
this.$el.find('#lesson-hint-content').html(this.collection.models[curHint].get('hint'));
|
||||
},
|
||||
|
||||
hideShowPrevNextButtons: function() {
|
||||
if (this.curHint === this.collection.length -1) {
|
||||
this.$el.find('#show-next-hint').css('visibility','hidden');
|
||||
} else {
|
||||
this.$el.find('#show-next-hint').css('visibility','visible');
|
||||
}
|
||||
|
||||
if (this.curHint === 0) {
|
||||
this.$el.find('#show-prev-hint').css('visibility','hidden');
|
||||
} else {
|
||||
this.$el.find('#show-prev-hint').css('visibility','visible');
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
});
|
@ -0,0 +1,30 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'goatApp/support/GoatUtils',
|
||||
'goatApp/view/MenuItemView'],
|
||||
function(
|
||||
$,
|
||||
_,
|
||||
Backbone,
|
||||
GoatUtils,
|
||||
MenuItemView) {
|
||||
|
||||
return Backbone.View.extend({
|
||||
initialize: function(options) {
|
||||
options = options || {};
|
||||
this.items = options.items;
|
||||
},
|
||||
render: function() {
|
||||
var viewItems = [];
|
||||
for (var i=0;i<this.items.length;i++) {
|
||||
var listItem = $('<li>',{text:this.items[i].name});
|
||||
//viewItems
|
||||
viewItems.push(listItem);
|
||||
}
|
||||
return viewItems;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
@ -0,0 +1,14 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone'], function($,_,Backbone) {
|
||||
|
||||
return Backbone.View.extend({
|
||||
initialize: function(options) {
|
||||
options = options || {};
|
||||
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
});
|
105
webgoat-container/src/main/webapp/js/goatApp/view/MenuView.js
Normal file
105
webgoat-container/src/main/webapp/js/goatApp/view/MenuView.js
Normal file
@ -0,0 +1,105 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'goatApp/model/MenuCollection',
|
||||
'goatApp/view/MenuItemView',
|
||||
'goatApp/support/GoatUtils'],
|
||||
function(
|
||||
$,
|
||||
_,
|
||||
Backbone,
|
||||
MenuCollection,
|
||||
MenuItemView,
|
||||
GoatUtils) {
|
||||
return Backbone.View.extend({
|
||||
el:'#menu-container',
|
||||
//TODO: set template
|
||||
initialize: function() {
|
||||
this.collection = new MenuCollection();
|
||||
this.listenTo(this.collection,'menuData:loaded',this.render);
|
||||
this.listenTo(this,'menu:click',this.accordionMenu);
|
||||
},
|
||||
// rendering top level menu
|
||||
render: function (model){
|
||||
//for now, just brute force
|
||||
//TODO: refactor into sub-views/components
|
||||
var items, catItems, stages;
|
||||
items = this.collection.models; // top level items
|
||||
var menuMarkup = '';
|
||||
var menuUl = $('<ul>',{class:'nano-content'});
|
||||
for(var i=0;i<items.length;i++) { //CATEGORY LEVEL
|
||||
var catId, category, catLink, catArrow, catLinkText, lessonName, stageName;
|
||||
catId = GoatUtils.makeId(items[i].get('name'));
|
||||
category = $('<li>',{class:'sub-menu ng-scope'});
|
||||
catLink = $('<a>',{'category':catId});
|
||||
catArrow = $('<i>',{class:'fa fa-angle-right pull-right'});
|
||||
catLinkText = $('<span>',{text:items[i].get('name')});
|
||||
|
||||
catLink.append(catArrow);
|
||||
catLink.append(catLinkText);
|
||||
//TODO: refactor this along with sub-views/components
|
||||
var self = this;
|
||||
catLink.click(_.bind(this.expandCategory,this,catId));
|
||||
category.append(catLink);
|
||||
// lesson level (first children level)
|
||||
//var lessons = new MenuItemView({items:items[i].get('children')}).render();
|
||||
var lessons=items[i].get('children');
|
||||
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));
|
||||
lessonItem.append(lessonLink);
|
||||
//check for lab/stages
|
||||
categoryLessonList.append(lessonItem);
|
||||
if (lessons[j].complete) {
|
||||
lessonItem.append($('<span>',{class:'glyphicon glyphicon-check lesson-complete'}));
|
||||
}
|
||||
var stages = lessons[j].children;
|
||||
for (k=0; k < stages.length; k++) {
|
||||
var stageName = stages[k].name;
|
||||
var stageLink = $('<a>',{href:stages[k].link,text:stageName,id:GoatUtils.makeId(stageName)});
|
||||
stageSpan.append(stageLink);
|
||||
categoryLessonList.append(stageSpan);
|
||||
if (stages[j].complete) {
|
||||
stageSpan.append($('<span>',{class:'glyphicon glyphicon-check lesson-complete'}));
|
||||
}
|
||||
}
|
||||
}
|
||||
category.append(categoryLessonList);
|
||||
}
|
||||
|
||||
menuUl.append(category);
|
||||
}
|
||||
this.$el.append(menuUl);
|
||||
//if we need to keep a menu open
|
||||
if (this.openMenu) {
|
||||
this.accordionMenu(this.openMenu);
|
||||
}
|
||||
},
|
||||
|
||||
titleRender: function (title) {
|
||||
this.trigger('lesson:click',title);
|
||||
},
|
||||
|
||||
expandCategory: function (id) {
|
||||
if (id) {
|
||||
this.accordionMenu(id);
|
||||
}
|
||||
},
|
||||
|
||||
accordionMenu: function(id) {
|
||||
if (this.openMenu !== id) {
|
||||
this.$el.find('#' + id).slideDown(300);
|
||||
this.openMenu = id;
|
||||
} else { //it's open
|
||||
this.$el.find('#' + id).slideUp(300).attr('isOpen', 0);
|
||||
this.openMenu = null;
|
||||
return;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
@ -0,0 +1,23 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'goatApp/model/LessonPlanModel'],
|
||||
function($,
|
||||
_,
|
||||
Backbone,
|
||||
LessonPlanModel) {
|
||||
return Backbone.View.extend({
|
||||
el:'#lessonHelpWrapper .lessonHelp.lessonPlan', //Check this
|
||||
initialize: function() {
|
||||
this.model = new LessonPlanModel();
|
||||
this.listenTo(this.model,'loaded',this.onModelLoaded);
|
||||
this.model.loadData();
|
||||
},
|
||||
render:function(title) {
|
||||
|
||||
},
|
||||
onModelLoaded: function() {
|
||||
this.trigger('plan:loaded',{'helpElement':'plan','value':true});
|
||||
}
|
||||
});
|
||||
});
|
@ -0,0 +1,22 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'goatApp/model/LessonSolutionModel'],
|
||||
//TODO: create a base 'HelpView class'
|
||||
function($,_,Backbone,LessonSolutionModel) {
|
||||
return Backbone.View.extend({
|
||||
el:'#lessonHelpWrapper .lessonHelp.lessonSolution', //Check this
|
||||
initialize: function() {
|
||||
this.model = new LessonSolutionModel();
|
||||
this.listenTo(this.model,'loaded',this.onModelLoaded);
|
||||
this.model.loadData();
|
||||
//TODO: handle error cases
|
||||
},
|
||||
render:function(title) {
|
||||
|
||||
},
|
||||
onModelLoaded: function() {
|
||||
this.trigger('solution:loaded',{'helpElement':'solution','value':true});
|
||||
}
|
||||
});
|
||||
});
|
@ -0,0 +1,21 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'goatApp/model/LessonSourceModel',
|
||||
'goatApp/view/HelpView'],
|
||||
function($,
|
||||
_,
|
||||
Backbone,
|
||||
LessonSourceModel,
|
||||
HelpView) {
|
||||
return HelpView.extend({
|
||||
helpElement:{'helpElement':'source','value':true},
|
||||
loadedMessage:'source:loaded',
|
||||
el:'#lessonHelpWrapper .lessonHelp.lessonPlan', //Check this
|
||||
initialize: function() {
|
||||
this.model = new LessonSourceModel();
|
||||
this.listenTo(this.model,'loaded',this.onModelLoaded);
|
||||
this.model.loadData();
|
||||
}
|
||||
});
|
||||
});
|
@ -0,0 +1,13 @@
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone'],
|
||||
function($,_,Backbone) {
|
||||
return Backbone.View.extend({
|
||||
el:'#header #lesson-title-wrapper',
|
||||
render:function(title) {
|
||||
var lessonTitleEl = $('<h1>',{id:'lesson-title',text:title});
|
||||
this.$el.html(lessonTitleEl);
|
||||
//this.$el.append(lessonTitleEl);
|
||||
}
|
||||
});
|
||||
});
|
Reference in New Issue
Block a user