Cleanup, class added to handle lesson info. Updates for plan,source and solution. Started work on cookies and params, not functioning quite yet
This commit is contained in:
Jason White
parent
d414d1a5e4
commit
d35f5e0348
@ -50,6 +50,7 @@
|
||||
<script type="text/javascript" src="js/goatConstants.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/goatLesson.js"></script>
|
||||
<script type="text/javascript" src="js/goatControllers.js"></script>
|
||||
<!-- end of JS -->
|
||||
|
||||
@ -59,7 +60,7 @@
|
||||
<title>WebGoat V6.0</title>
|
||||
</head>
|
||||
|
||||
<body class="animated fadeIn" ng-app="goatApp" ng-controller="goatLesson">
|
||||
<body class="animated fadeIn" ng-app="goatApp">
|
||||
<section id="container">
|
||||
<header id="header">
|
||||
<!--logo start-->
|
||||
@ -83,7 +84,7 @@
|
||||
|
||||
<!--sidebar left start-->
|
||||
<aside class="sidebar">
|
||||
<div id="leftside-navigation" class="nano" >
|
||||
<div id="leftside-navigation" class="nano" ng-controller="goatLessonMenu">
|
||||
<ul class="nano-content">
|
||||
<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>
|
||||
@ -105,15 +106,29 @@
|
||||
<!--main content start-->
|
||||
<section class="main-content-wrapper">
|
||||
|
||||
<section id="main-content">
|
||||
<section id="main-content" ng-controller="lessonHelpController">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="panel" id="buttonPanel">
|
||||
<button type="button" class="btn btn-primary btn-xs">Params/Cookies</button>
|
||||
<button type="button" class="btn btn-primary btn-xs">Hints</button>
|
||||
<button type="button" class="btn btn-primary btn-xs">Lesson Plan</button>
|
||||
<button type="button" class="btn btn-primary btn-xs" ng-click="showSource('lg')">Java [Source]</button>
|
||||
<button type="button" class="btn btn-primary btn-xs" ng-click="showSolution('lg')">Solution</button>
|
||||
<button type="button" id="showParamsCookiesBtn" class="btn btn-primary btn-xs" ng-click="viewCookiesAndParams()">Params/Cookies</button>
|
||||
<button type="button" id="showHintsBtn" class="btn btn-primary btn-xs lessonHelpBtn">Hints</button>
|
||||
<button type="button" id="showPlanBtn" class="btn btn-primary btn-xs lessonHelpBtn">Lesson Plan</button>
|
||||
<button type="button" id="showSourceBtn" class="btn btn-primary btn-xs lessonHelpBtn">Java [Source]</button> <!-- ng-click="showSource('lg') -->
|
||||
<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 class="panel" >
|
||||
<div class="panel-body" id="lesson_content">
|
||||
@ -122,55 +137,57 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="lesson_cookies_row">
|
||||
<div class="col-md-12">
|
||||
<h4>Lesson Parameters and Cookies</h4>
|
||||
<div class="panel" >
|
||||
<div class="panel-body" id="lesson_cookies">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="lesson_hint_row">
|
||||
<div class="col-md-12">
|
||||
<h4>Lesson Hints</h4>
|
||||
<div class="panel" >
|
||||
<div class="panel-body" id="lesson_hint">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="lesson_plan_row">
|
||||
<div class="col-md-12">
|
||||
<h4>Lesson Plan</h4>
|
||||
<div class="panel" >
|
||||
<div class="panel-body" id="lesson_plan">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="lesson_solution_row">
|
||||
<div class="col-md-12">
|
||||
<h4>Lesson Solution</h4>
|
||||
<div class="panel" >
|
||||
<div class="panel-body" id="lesson_solution">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="lesson_source_row">
|
||||
<div class="col-md-12">
|
||||
<h4>Lesson Source Code</h4>
|
||||
<div class="panel" >
|
||||
<div class="panel-body" id="lesson_source">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lessonHelpsWrapper">
|
||||
<div class="row lessonHelp" id="lesson_cookies_row">
|
||||
<div class="col-md-12">
|
||||
<h4>Lesson Parameters and Cookies</h4>
|
||||
<div class="panel" >
|
||||
<div class="panel-body" id="lesson_cookies">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row lessonHelp" id="lesson_hint_row">
|
||||
<div class="col-md-12">
|
||||
<h4>Lesson Hints</h4>
|
||||
<div class="panel" >
|
||||
<div class="panel-body" id="lesson_hint">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row lessonHelp" id="lesson_plan_row">
|
||||
<div class="col-md-12">
|
||||
<h4>Lesson Plan</h4>
|
||||
<div class="panel" >
|
||||
<div class="panel-body" id="lesson_plan">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row lessonHelp" id="lesson_solution_row">
|
||||
<div class="col-md-12">
|
||||
<h4>Lesson Solution</h4>
|
||||
<div class="panel" >
|
||||
<div class="panel-body" id="lesson_solution">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row lessonHelp" id="lesson_source_row">
|
||||
<div class="col-md-12">
|
||||
<h4>Lesson Source Code</h4>
|
||||
<div class="panel" >
|
||||
<div class="panel-body" id="lesson_source">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
@ -186,16 +203,17 @@
|
||||
// set this to true if you want to see form submissions
|
||||
// set to false once we get all the kinks worked out
|
||||
var DEBUG_FORM_SUBMISSION = false;
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
// bind to click events on menu links
|
||||
$('.menu-link').bind('click', function(event) {
|
||||
/*$('.menu-link').bind('click', function(event) {
|
||||
event.preventDefault();
|
||||
$.get(this.href, {}, function(reply) {
|
||||
$("#lesson_content").html(reply);
|
||||
goat.utils.showLessonSource();
|
||||
}, "html");
|
||||
});
|
||||
});*/
|
||||
|
||||
app.init();
|
||||
|
||||
});
|
||||
|
||||
@ -751,6 +751,17 @@ fieldset[disabled] .btn-warning.active {
|
||||
|
||||
#topLinks {
|
||||
float:right;
|
||||
margin-right:5px;
|
||||
margin-right:5px;s
|
||||
margin-top:3px;
|
||||
}
|
||||
|
||||
.lessonHelp, .lessonHelpBtn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.paramsView {
|
||||
float:right;
|
||||
width 50%;
|
||||
margin-right:10px;
|
||||
border-left:2px solid #333;
|
||||
}
|
||||
@ -11,11 +11,17 @@ var goatConstants = {
|
||||
children:null,
|
||||
class:'fa-bars static'
|
||||
}],
|
||||
//services
|
||||
lessonService: 'service/lessonmenu.mvc',
|
||||
cookieService: 'service/cookies_widget.mvc',
|
||||
hintService:'service/hint_widget.mvc',
|
||||
cookieService: 'service/cookie.mvc', //cookies_widget.mvc
|
||||
hintService:'service/hint.mvc',
|
||||
sourceService:'service/source.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'
|
||||
};
|
||||
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
/** Menu Controller
|
||||
* 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())
|
||||
$http({method: 'GET', url: goatConstants.lessonService}).then(
|
||||
function(menuData) {
|
||||
@ -19,51 +19,54 @@ goat.controller('goatLesson', function($scope, $http, $modal, $log, $templateCac
|
||||
}
|
||||
);
|
||||
$scope.renderLesson = function(url) {
|
||||
console.log(url + ' was passed in');
|
||||
//console.log(url + ' was passed in');
|
||||
// use jquery to render lesson content to div
|
||||
goat.data.loadLessonContent(url).then(
|
||||
function(reply) {
|
||||
$("#lesson_content").html(reply);
|
||||
// hook forms
|
||||
goat.utils.makeFormsAjax();
|
||||
//render lesson title
|
||||
$('#lessonTitle').text(goat.utils.extractLessonTitle($(reply)));
|
||||
// adjust menu to lessonContent size if necssary
|
||||
if ($('div.panel-body').height() > 400) {
|
||||
$('#leftside-navigation').height($(window).height());
|
||||
}
|
||||
// hook into our pseudo service calls
|
||||
// @TODO make these real services during phase 2
|
||||
// show cookies and params
|
||||
goat.utils.showLessonCookiesAndParams();
|
||||
// show hints
|
||||
goat.utils.showLessonHint();
|
||||
// show plan
|
||||
goat.utils.showLessonPlan();
|
||||
// show solution
|
||||
goat.utils.showLessonSolution();
|
||||
// show source
|
||||
goat.utils.showLessonSource();
|
||||
goat.lesson.lessonInfo = new goat.lesson.CurLesson(url);
|
||||
goat.lesson.lessonInfo.loadInfo(); //uses pseudo and actual service calls
|
||||
// @TODO: convert to real services (and more angularjs, likely ... in phase 2)
|
||||
}
|
||||
);
|
||||
};
|
||||
}).animation('.slideDown', function() {
|
||||
var NgHideClassName = 'ng-hide';
|
||||
return {
|
||||
beforeAddClass: function(element, className, done) {
|
||||
if (className === NgHideClassName) {
|
||||
$(element).slideUp(done);
|
||||
}
|
||||
},
|
||||
removeClass: function(element, className, done) {
|
||||
if (className === NgHideClassName) {
|
||||
$(element).hide().slideDown(done);
|
||||
}
|
||||
}
|
||||
};
|
||||
);
|
||||
};
|
||||
}).animation('.slideDown', function() {
|
||||
var NgHideClassName = 'ng-hide';
|
||||
return {
|
||||
beforeAddClass: function(element, className, done) {
|
||||
if (className === NgHideClassName) {
|
||||
$(element).slideUp(done);
|
||||
}
|
||||
},
|
||||
removeClass: function(element, className, done) {
|
||||
if (className === NgHideClassName) {
|
||||
$(element).hide().slideDown(done);
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
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) {
|
||||
|
||||
$scope.lessonSource = lessonSource;
|
||||
@ -89,7 +92,7 @@ var showSolutionController = function($scope, $modalInstance, lessonSolutionUrl)
|
||||
$modalInstance.dismiss('cancel');
|
||||
};
|
||||
};
|
||||
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,13 +1,34 @@
|
||||
/* ### GOAT DATA/PROMISES ### */
|
||||
|
||||
goat.data = {
|
||||
/**** jQuery loads ... ****/
|
||||
loadLessonContent: function (_url) {
|
||||
//TODO: switch to $http (angular) later
|
||||
//return $http({method:'GET', url: _url});
|
||||
|
||||
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() {
|
||||
//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
108
src/main/webapp/js/goatLesson.js
Normal 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)
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -23,35 +23,71 @@ goat.utils = {
|
||||
var title = $('h1', el).text();
|
||||
return title;
|
||||
},
|
||||
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");
|
||||
},
|
||||
showLessonHint: function() {
|
||||
$.get(goatConstants.hintService, {}, function(reply) {
|
||||
$("#lesson_hint").html(reply);
|
||||
}, "html");
|
||||
showLessonHints: function() {
|
||||
$('.lessonHelp').hide();
|
||||
$('#lesson_hint').html();
|
||||
$('#lesson_hint_row').show();
|
||||
},
|
||||
showLessonSource: function() {
|
||||
$.get(goatConstants.sourceService, {}, function(reply) {
|
||||
$("#lesson_source").html("<pre>"+reply+"</pre>");
|
||||
}, "html");
|
||||
showLessonSource: function(source) {
|
||||
$('.lessonHelp').hide();
|
||||
$('#lesson_source').html("<pre>"+goat.lesson.lessonInfo.source+"</pre>");
|
||||
$('#lesson_source_row').show();
|
||||
},
|
||||
showLessonSolution: function() {
|
||||
$.get(goatConstants.solutionService, {}, function(reply) {
|
||||
$("#lesson_solution").html(reply);
|
||||
}, "html");
|
||||
$('.lessonHelp').hide();
|
||||
$('#lesson_solution').html(goat.lesson.lessonInfo.solution);
|
||||
$('#lesson_solution_row').show();
|
||||
goat.utils.scrollToHelp();
|
||||
},
|
||||
showLessonPlan: function() {
|
||||
$.get(goatConstants.lessonPlanService, {}, function(reply) {
|
||||
$("#lesson_plan").html(reply);
|
||||
}, "html");
|
||||
showLessonPlan: function(plan) {
|
||||
$('.lessonHelp').hide();
|
||||
$("#lesson_plan").html(goat.lesson.lessonInfo.plan);
|
||||
$('#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() {
|
||||
//$('#leftside-navigation').css('height',$('div.panel-body').height());
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user