diff --git a/webgoat-container/src/main/webapp/css/main.css b/webgoat-container/src/main/webapp/css/main.css index ee8e1c71a..ec288d580 100644 --- a/webgoat-container/src/main/webapp/css/main.css +++ b/webgoat-container/src/main/webapp/css/main.css @@ -736,13 +736,31 @@ cookie-container { margin-bottom:4px; } -.cookie-table tr td, .params-table tr td { - padding: 3px; - max-width: 220px; +.cookie-table, .param-table { + border:1px solid #eee; +} + +.cookie-table tr td, .param-table tr td { + padding:3px ; + padding-left: 5px; + width:220px; + max-width: 240px; font-size: x-small; word-wrap: break-word; } +.cookie-table th, .param-table th { + border:none; + border-right:1px solid #ccc; + padding-right:3px; +} + + +.cookie-table td, .param-table td { + border:none; + padding-left:3px; +} + /* ========================================================================== MENU / Sidebar ========================================================================== */ diff --git a/webgoat-container/src/main/webapp/js/goatApp/controller/LessonController.js b/webgoat-container/src/main/webapp/js/goatApp/controller/LessonController.js index 4db615e0e..ce0fec52c 100644 --- a/webgoat-container/src/main/webapp/js/goatApp/controller/LessonController.js +++ b/webgoat-container/src/main/webapp/js/goatApp/controller/LessonController.js @@ -9,6 +9,8 @@ define(['jquery', 'goatApp/view/LessonHintView', 'goatApp/view/HelpControlsView', 'goatApp/view/CookieView', + 'goatApp/view/ParamView', + 'goatApp/model/ParamModel', 'goatApp/support/GoatUtils' ], function($, @@ -22,6 +24,8 @@ define(['jquery', LessonHintView, HelpControlsView, CookieView, + ParamView, + ParamModel, GoatUtils ) { 'use strict' @@ -38,7 +42,7 @@ define(['jquery', _.extend(Controller.prototype,Backbone.Events); this.start = function() { - this.listenTo(this.lessonContent,'contentLoaded',this.onContentLoaded); + this.listenToOnce(this.lessonContent,'contentLoaded',this.onContentLoaded); }; //load View, which can pull data @@ -52,7 +56,7 @@ define(['jquery', this.solutionView = {}; this.sourceView = {}; this.lessonHintView = {}; - this.screen = scr; + this.screen = scr; //needed anymore? this.menu = menu; // @@ -62,9 +66,6 @@ define(['jquery', 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(); @@ -80,6 +81,13 @@ define(['jquery', this.listenToOnce(this.lessonHintView,'hints:loaded',this.areHelpsReady); // this.cookieView = new CookieView(); + // parameter model & view + //TODO: instantiate model with values at once (not sure why was not working before) + var paramModel = new ParamModel({ + }); + paramModel.set('screenParam',this.lessonContent.get('screenParam')); + paramModel.set('menuParam',this.lessonContent.get('screenParam')); + this.paramView = new ParamView({model:paramModel}); this.hideShowHelps(null); }; diff --git a/webgoat-container/src/main/webapp/js/goatApp/model/ParamModel.js b/webgoat-container/src/main/webapp/js/goatApp/model/ParamModel.js new file mode 100644 index 000000000..116c6b696 --- /dev/null +++ b/webgoat-container/src/main/webapp/js/goatApp/model/ParamModel.js @@ -0,0 +1,12 @@ +define([ + 'backbone'], + function( + Backbone) { + return Backbone.Model.extend({ + initialize: function(options) { + for (var key in options) { + this.set(key, options.key); + } + } + }); +}); \ No newline at end of file diff --git a/webgoat-container/src/main/webapp/js/goatApp/view/CookieView.js b/webgoat-container/src/main/webapp/js/goatApp/view/CookieView.js index f67cb190c..aa8bb9d82 100644 --- a/webgoat-container/src/main/webapp/js/goatApp/view/CookieView.js +++ b/webgoat-container/src/main/webapp/js/goatApp/view/CookieView.js @@ -27,6 +27,7 @@ function($, cookieTable.append(newRow); }); }); + this.$el.append($('

',{text:'Cookie/s'})); this.$el.append(cookieTable); } }); diff --git a/webgoat-container/src/main/webapp/js/goatApp/view/ParamView.js b/webgoat-container/src/main/webapp/js/goatApp/view/ParamView.js new file mode 100644 index 000000000..d0e10cb8a --- /dev/null +++ b/webgoat-container/src/main/webapp/js/goatApp/view/ParamView.js @@ -0,0 +1,35 @@ +define(['jquery', + 'underscore', + 'backbone', + 'goatApp/model/ParamsModel'], +function($, + _, + Backbone, + LessonCookieCollection) { + return Backbone.View.extend({ + el:'#params-view', + + initialize: function(options) { + this.model = options.model; + if (options.model) { + this.listenTo(this.model,'change',this.render); + } + this.render(); + }, + + render: function() { + this.$el.html(''); + var paramsTable = $('',{'class':'param-table table-striped table-nonfluid'}); + var self = this; + _.each(this.model.keys(), function(attribute) { + var newRow = $(''); + newRow.append($('
',{text:_.escape(attribute)})) + newRow.append($('',{text:_.escape(self.model.get(attribute))})); + paramsTable.append(newRow); + }); + + this.$el.append($('

',{text:'Parameters'})); + this.$el.append(paramsTable); + } + }); +}); \ No newline at end of file