dubey/WebGoat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleanup, class added to handle lesson info. Updates for plan,source and solution. Started work on cookies and params, not functioning quite yet

Browse Source
This commit is contained in:
Jason White 2014-09-01 22:30:46 -04:00
parent d414d1a5e4
commit d35f5e0348
7 changed files with 318 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/main/webapp/WEB-INF/pages/main_new.jsp
View File

@ -50,6 +50,7 @@
<script type="text/javascript" src="js/goatConstants.js"></script> <script type="text/javascript" src="js/goatConstants.js"></script>
<script type="text/javascript" src="js/goatUtil.js"></script> <script type="text/javascript" src="js/goatUtil.js"></script>
<script type="text/javascript" src="js/goatData.js"></script> <script type="text/javascript" src="js/goatData.js"></script>
<script type="text/javascript" src="js/goatLesson.js"></script>
<script type="text/javascript" src="js/goatControllers.js"></script> <script type="text/javascript" src="js/goatControllers.js"></script>
<!-- end of JS --> <!-- end of JS -->
@ -59,7 +60,7 @@
<title>WebGoat V6.0</title> <title>WebGoat V6.0</title>
</head> </head>
<body class="animated fadeIn" ng-app="goatApp" ng-controller="goatLesson"> <body class="animated fadeIn" ng-app="goatApp">
<section id="container"> <section id="container">
<header id="header"> <header id="header">
<!--logo start--> <!--logo start-->
@ -83,7 +84,7 @@
<!--sidebar left start--> <!--sidebar left start-->
<aside class="sidebar"> <aside class="sidebar">
<div id="leftside-navigation" class="nano" > <div id="leftside-navigation" class="nano" ng-controller="goatLessonMenu">
<ul class="nano-content"> <ul class="nano-content">
<li class="sub-menu" ng-repeat="item in menuTopics"> <li class="sub-menu" ng-repeat="item in menuTopics">
<a ng-click="expanded = !expanded" href=""><i class="fa {{item.class}}"></i><span>{{item.name}}</span></a> <a ng-click="expanded = !expanded" href=""><i class="fa {{item.class}}"></i><span>{{item.name}}</span></a>
@ -105,15 +106,29 @@
<!--main content start--> <!--main content start-->
<section class="main-content-wrapper"> <section class="main-content-wrapper">
<section id="main-content"> <section id="main-content" ng-controller="lessonHelpController">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="panel" id="buttonPanel"> <div class="panel" id="buttonPanel">
<button type="button" class="btn btn-primary btn-xs">Params/Cookies</button> <button type="button" id="showParamsCookiesBtn" class="btn btn-primary btn-xs" ng-click="viewCookiesAndParams()">Params/Cookies</button>
<button type="button" class="btn btn-primary btn-xs">Hints</button> <button type="button" id="showHintsBtn" class="btn btn-primary btn-xs lessonHelpBtn">Hints</button>
<button type="button" class="btn btn-primary btn-xs">Lesson Plan</button> <button type="button" id="showPlanBtn" class="btn btn-primary btn-xs lessonHelpBtn">Lesson Plan</button>
<button type="button" class="btn btn-primary btn-xs" ng-click="showSource('lg')">Java [Source]</button> <button type="button" id="showSourceBtn" class="btn btn-primary btn-xs lessonHelpBtn">Java [Source]</button> <!-- ng-click="showSource('lg') -->
<button type="button" class="btn btn-primary btn-xs" ng-click="showSolution('lg')">Solution</button> <button type="button" id="showSolutionBtn" class="btn btn-primary btn-xs lessonHelpBtn">Solution</button> <!-- ng-click="showSolution('lg') -->
</div>
<div class="panel" id="cookiesAndParams">
<div class="cookiesView">
-- COOKIES GO HERE --
</div>
<div> <!--class="paramsView"-->
-- PARAMS GO HERE -- <br/>
<ul>
<li ng-repeat="param in params">
{{param.name}} = {{param.value}}
</li>
</ul>
</div>
</div> </div>
<div class="panel" > <div class="panel" >
<div class="panel-body" id="lesson_content"> <div class="panel-body" id="lesson_content">
@ -123,7 +138,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row" id="lesson_cookies_row"> <div id="lessonHelpsWrapper">
<div class="row lessonHelp" id="lesson_cookies_row">
<div class="col-md-12"> <div class="col-md-12">
<h4>Lesson Parameters and Cookies</h4> <h4>Lesson Parameters and Cookies</h4>
<div class="panel" > <div class="panel" >
@ -133,7 +149,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row" id="lesson_hint_row"> <div class="row lessonHelp" id="lesson_hint_row">
<div class="col-md-12"> <div class="col-md-12">
<h4>Lesson Hints</h4> <h4>Lesson Hints</h4>
<div class="panel" > <div class="panel" >
@ -143,7 +159,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row" id="lesson_plan_row"> <div class="row lessonHelp" id="lesson_plan_row">
<div class="col-md-12"> <div class="col-md-12">
<h4>Lesson Plan</h4> <h4>Lesson Plan</h4>
<div class="panel" > <div class="panel" >
@ -153,7 +169,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row" id="lesson_solution_row"> <div class="row lessonHelp" id="lesson_solution_row">
<div class="col-md-12"> <div class="col-md-12">
<h4>Lesson Solution</h4> <h4>Lesson Solution</h4>
<div class="panel" > <div class="panel" >
@ -162,7 +178,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row" id="lesson_source_row"> <div class="row lessonHelp" id="lesson_source_row">
<div class="col-md-12"> <div class="col-md-12">
<h4>Lesson Source Code</h4> <h4>Lesson Source Code</h4>
<div class="panel" > <div class="panel" >
@ -171,6 +187,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</section> </section>
</section> </section>
@ -189,13 +206,14 @@
$(document).ready(function() { $(document).ready(function() {
// bind to click events on menu links // bind to click events on menu links
$('.menu-link').bind('click', function(event) { /*$('.menu-link').bind('click', function(event) {
event.preventDefault(); event.preventDefault();
$.get(this.href, {}, function(reply) { $.get(this.href, {}, function(reply) {
$("#lesson_content").html(reply); $("#lesson_content").html(reply);
goat.utils.showLessonSource(); goat.utils.showLessonSource();
}, "html"); }, "html");
}); });*/
app.init(); app.init();
}); });

13
src/main/webapp/css/main.css
View File

@ -751,6 +751,17 @@ fieldset[disabled] .btn-warning.active {
#topLinks { #topLinks {
float:right; float:right;
margin-right:5px; margin-right:5px;s
margin-top:3px; margin-top:3px;
} }
.lessonHelp, .lessonHelpBtn {
display: none;
}
.paramsView {
float:right;
width 50%;
margin-right:10px;
border-left:2px solid #333;
}

12
src/main/webapp/js/goatConstants.js
View File

@ -11,11 +11,17 @@ var goatConstants = {
children:null, children:null,
class:'fa-bars static' class:'fa-bars static'
}], }],
//services
lessonService: 'service/lessonmenu.mvc', lessonService: 'service/lessonmenu.mvc',
cookieService: 'service/cookies_widget.mvc', cookieService: 'service/cookie.mvc', //cookies_widget.mvc
hintService:'service/hint_widget.mvc', hintService:'service/hint.mvc',
sourceService:'service/source.mvc', sourceService:'service/source.mvc',
solutionService:'service/solution.mvc', solutionService:'service/solution.mvc',
lessonPlanService:'service/lessonplan.mvc' lessonPlanService:'service/lessonplan.mvc',
menuService: 'service/lessonmenu.mvc',
paramService: 'service/parms.mvc', //this is a stub .. need to discuss this
// literals
notFound: 'Could not find'
}; };

39
src/main/webapp/js/goatControllers.js
View File

@ -6,7 +6,7 @@
/** Menu Controller /** Menu Controller
* prepares and updates menu topic items for the view * prepares and updates menu topic items for the view
*/ */
goat.controller('goatLesson', function($scope, $http, $modal, $log, $templateCache) { goat.controller('goatLessonMenu', function($scope, $http, $modal, $log, $templateCache) {
//TODO: implement via separate promise and use config for menu (goat.data.loadMenuData()) //TODO: implement via separate promise and use config for menu (goat.data.loadMenuData())
$http({method: 'GET', url: goatConstants.lessonService}).then( $http({method: 'GET', url: goatConstants.lessonService}).then(
function(menuData) { function(menuData) {
@ -19,34 +19,26 @@ goat.controller('goatLesson', function($scope, $http, $modal, $log, $templateCac
} }
); );
$scope.renderLesson = function(url) { $scope.renderLesson = function(url) {
console.log(url + ' was passed in'); //console.log(url + ' was passed in');
// use jquery to render lesson content to div // use jquery to render lesson content to div
goat.data.loadLessonContent(url).then( goat.data.loadLessonContent(url).then(
function(reply) { function(reply) {
$("#lesson_content").html(reply); $("#lesson_content").html(reply);
// hook forms // hook forms
goat.utils.makeFormsAjax(); goat.utils.makeFormsAjax();
//render lesson title
$('#lessonTitle').text(goat.utils.extractLessonTitle($(reply))); $('#lessonTitle').text(goat.utils.extractLessonTitle($(reply)));
// adjust menu to lessonContent size if necssary // adjust menu to lessonContent size if necssary
if ($('div.panel-body').height() > 400) { if ($('div.panel-body').height() > 400) {
$('#leftside-navigation').height($(window).height()); $('#leftside-navigation').height($(window).height());
} }
// hook into our pseudo service calls goat.lesson.lessonInfo = new goat.lesson.CurLesson(url);
// @TODO make these real services during phase 2 goat.lesson.lessonInfo.loadInfo(); //uses pseudo and actual service calls
// show cookies and params // @TODO: convert to real services (and more angularjs, likely ... in phase 2)
goat.utils.showLessonCookiesAndParams();
// show hints
goat.utils.showLessonHint();
// show plan
goat.utils.showLessonPlan();
// show solution
goat.utils.showLessonSolution();
// show source
goat.utils.showLessonSource();
} }
); );
}; };
}).animation('.slideDown', function() { }).animation('.slideDown', function() {
var NgHideClassName = 'ng-hide'; var NgHideClassName = 'ng-hide';
return { return {
beforeAddClass: function(element, className, done) { beforeAddClass: function(element, className, done) {
@ -60,10 +52,21 @@ goat.controller('goatLesson', function($scope, $http, $modal, $log, $templateCac
} }
} }
}; };
});
goat.controller('lessonHelpController', function($scope) {
$scope.cookies=[];
$scope.params=[];
$scope.viewCookiesAndParams = function($scope) {
$scope.cookies=goat.lesson.lessonInfo.cookies;
$scope.params=goat.lesson.lessonInfo.params;
//@TODO: issue callback to track view
}
}); });
/*
/* Controllers for modal instances */ *DEPRECATED
//Controllers for modal instances
var showSourceController = function($scope, $modalInstance, lessonSource) { var showSourceController = function($scope, $modalInstance, lessonSource) {
$scope.lessonSource = lessonSource; $scope.lessonSource = lessonSource;
@ -89,7 +92,7 @@ var showSolutionController = function($scope, $modalInstance, lessonSolutionUrl)
$modalInstance.dismiss('cancel'); $modalInstance.dismiss('cancel');
}; };
}; };
*/

23
src/main/webapp/js/goatData.js
View File

@ -1,13 +1,34 @@
/* ### GOAT DATA/PROMISES ### */ /* ### GOAT DATA/PROMISES ### */
goat.data = { goat.data = {
/**** jQuery loads ... ****/
loadLessonContent: function (_url) { loadLessonContent: function (_url) {
//TODO: switch to $http (angular) later //TODO: switch to $http (angular) later
//return $http({method:'GET', url: _url}); //return $http({method:'GET', url: _url});
return $.get(_url, {}, null, "html"); return $.get(_url, {}, null, "html");
}, },
loadCookies: function() {
return $.get(goatConstants.cookieService, {});
},
loadHints: function () {
return $.get(goatConstants.hintService, {});
},
loadSource: function() {
return $.get(goatConstants.sourceService, {});
},
loadSolution: function () {
return $.get(goatConstants.solutionService, {})
},
loadPlan: function () {
return $.get(goatConstants.lessonPlanService, {});
},
loadParams: function() {
return $.get(goatConstants.paramsService,{});
},
/*** angular data grabs ***/
loadMenuData: function() { loadMenuData: function() {
//TODO use goatConstants var for url //TODO use goatConstants var for url
return $http({method: 'GET', url: 'service/lessonmenu.mvc'}); return $http({method: 'GET', url: goatConstants.menuService});
} }
}; };

108
src/main/webapp/js/goatLesson.js Normal file
View File

@ -0,0 +1,108 @@
// goat.lesson name space
goat.lesson = {
CurLesson: function(_lessonUrl) {
return {
hints:[],
hintIndex:0,
solution:null,
plan:null,
cookiesAndParams:[],
params:[],
source:null,
lessonUrl:(_lessonUrl || null),
clearInfo: function() {
this.hints = null;
this.solution = null;
this.plan = null;
this.cookies = null;
this.source = null;
this.params = null;
},
loadInfo: function() {
this.getHints();
this.getPlan();
this.getSolution();
this.getCookies();
this.getSource();
this.getParams();
},
getHints:function() {
var scope = this;
goat.data.loadHints().then(
function(resp) {
scope.hints = resp;
if (scope.hints.length > 0) {
goat.utils.displayButton('showHintsBtn',true);
}
return scope;
},
function(err){
goat.utils.displayButton('showHintsBtn',false);
//TODO handle errors
}
);
},
getSolution:function() {
var scope = this;
goat.data.loadSolution().then(
function(resp) {
scope.solution = resp;
goat.utils.displayButton('showSolutionBtn',true);
$('#showSolutionBtn').unbind().click(goat.utils.showLessonSolution);
return scope;
},
function(err){
scope.solution = null;
goat.utils.displayButton('showSolutionBtn',false);
//TODO handle errors
}
);
},
getPlan: function() {
var scope = this;
goat.data.loadPlan().then(
function(resp) {
scope.plan = resp;
goat.utils.displayButton('showPlanBtn',true);
$('#showPlanBtn').unbind().click(goat.utils.showLessonPlan);
return scope;
},
function(err){
goat.utils.displayButton('showPlanBtn',false);
//TODO handle errors
}
);
},
getSource: function() {
var scope = this;
goat.data.loadSource().then(
function(resp) {
scope.source = resp;
goat.utils.displayButton('showSourceBtn',true);
$('#showSourceBtn').unbind().click(goat.utils.showLessonSource);
return scope;
},
function(err){
goat.utils.displayButton('showSourceBtn',false);
//TODO handle errors
}
);
},
getCookies: function() {
var scope = this;
goat.data.loadCookies().then(
function(resp) {
scope.cookies = resp;
return scope;
},
function(err){
//TODO handle errors
}
);
},
getParams: function() {
this.params = goat.utils.scrapeParams(this.lessonUrl)
}
}
}
};

70
src/main/webapp/js/goatUtil.js
View File

@ -23,35 +23,71 @@ goat.utils = {
var title = $('h1', el).text(); var title = $('h1', el).text();
return title; return title;
}, },
displayButton: function(id,show) {
if ($('#'+id)) {
if (show) {
$('#'+id).show();
} else {
$('#'+id).hide();
}
}
},
showLessonCookiesAndParams: function() { showLessonCookiesAndParams: function() {
$.get(goatConstants.cookieService, {}, function(reply) { $.get(goatConstants.cookieService, {}, function(reply) {
$("#lesson_cookies").html(reply); $("#lesson_cookies").html(reply);
}, "html"); }, "html");
}, },
showLessonHint: function() { showLessonHints: function() {
$.get(goatConstants.hintService, {}, function(reply) { $('.lessonHelp').hide();
$("#lesson_hint").html(reply); $('#lesson_hint').html();
}, "html"); $('#lesson_hint_row').show();
}, },
showLessonSource: function() { showLessonSource: function(source) {
$.get(goatConstants.sourceService, {}, function(reply) { $('.lessonHelp').hide();
$("#lesson_source").html("<pre>"+reply+"</pre>"); $('#lesson_source').html("<pre>"+goat.lesson.lessonInfo.source+"</pre>");
}, "html"); $('#lesson_source_row').show();
}, },
showLessonSolution: function() { showLessonSolution: function() {
$.get(goatConstants.solutionService, {}, function(reply) { $('.lessonHelp').hide();
$("#lesson_solution").html(reply); $('#lesson_solution').html(goat.lesson.lessonInfo.solution);
}, "html"); $('#lesson_solution_row').show();
goat.utils.scrollToHelp();
}, },
showLessonPlan: function() { showLessonPlan: function(plan) {
$.get(goatConstants.lessonPlanService, {}, function(reply) { $('.lessonHelp').hide();
$("#lesson_plan").html(reply); $("#lesson_plan").html(goat.lesson.lessonInfo.plan);
}, "html"); $('#lesson_plan_row').show();
goat.utils.scrollToHelp();
},
scrollToHelp:function() {
var target = $('#lessonHelpsWrapper');
goat.utils.scrollEasy(target);
},
scrollToTop: function() {
var target= $('#container');
goat.utils.scrollEasy(target);
},
scrollEasy:function(target) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
},
scrapeParams: function(url) {
if (!url) {
return;
}
var params = url.split('?')[1].split('&');
var paramObj = {};
var paramsArr = [];
for (var i=0;i< params.length;i++) {
paramObj.name = params[i].split('=')[0];
paramObj.value = params[i].split('=')[1];
paramsArr.push(paramObj);
}
return paramsArr;
} }
}; };
// ### GLOBAL FUNCTIONS ## //
$(window).resize(function() { $(window).resize(function() {
//$('#leftside-navigation').css('height',$('div.panel-body').height()); //$('#leftside-navigation').css('height',$('div.panel-body').height());