#276 Automatic lesson summary page

- Basic overview of all the assignments needed to be solved in a lesson
 - Clicking on a link will jump to the correct page with the assignment
 - Lesson completed also updates lesson overview immediately

webgoat-container/src/main/resources/static/js/goatApp/view/AssignmentOverview.js

@@ -0,0 +1,24 @@
+define([
+	'backbone'],
+	function(
+		Backbone) {
+	return Backbone.View.extend({
+	    tagName: 'li',
+	    template: _.template($('#assignmentTemplate').html() ),
+
+        events: {
+          "click a": "clicked"
+        },
+
+        clicked: function(e){
+          e.preventDefault();
+          var id = $(e.currentTarget).data("id");
+          Backbone.trigger('assignment:navTo',{'assignment': id});
+        },
+
+        render: function() {
+            this.$el.html(this.template(this.model.toJSON()));
+        	return this;
+        }
+	});
+});

webgoat-container/src/main/resources/static/js/goatApp/view/HelpControlsView.js

@@ -36,7 +36,7 @@ function($,_,Backbone) {
 				this.$el.find('#show-attack-button').unbind().on('click',_.bind(this.showAttack,this)).show();
 			}
 
-			
+			this.$el.find('#show-lesson-overview-button').unbind().on('click', _.bind(this.showLessonOverview, this)).show();
 			this.$el.find('#restart-lesson-button').unbind().on('click',_.bind(this.restartLesson,this)).show();
 			//this.$el.append(this.helpButtons.restartLesson);
 		},
@@ -59,6 +59,9 @@ function($,_,Backbone) {
 
 		restartLesson: function() {
 			this.trigger('lesson:restart');
+		},
+		showLessonOverview: function() {
+		    this.trigger('lessonOverview:show');
 		}
 	});
 });

webgoat-container/src/main/resources/static/js/goatApp/view/LessonContentView.js

@@ -16,6 +16,25 @@ define(['jquery',
         initialize: function(options) {
             options = options || {};
             new ErrorNotificationView();
+            var self = this;
+            Backbone.on('assignment:navTo', function(assignment){
+              var page = self.findPage(assignment);
+              if (page != -1) {
+                self.navToPage(page);
+              }
+            });
+        },
+
+        findPage: function(assignment) {
+          for (var i = 0; i < this.$contentPages.length; i++) {
+             var contentPage = this.$contentPages[i];
+             var form = $('form.attack-form', contentPage);
+             var action = form.attr('action')
+             if (action !== undefined && action.includes(assignment.assignment)) {
+               return i;
+             }
+          }
+          return -1;
         },
 
         /* initial renering */
@@ -76,7 +95,7 @@ define(['jquery',
             var submitData = (typeof webgoat.customjs[prepareDataFunctionName] === 'function') ? webgoat.customjs[prepareDataFunctionName]() : this.$form.serialize();
             // var submitData = this.$form.serialize();
             this.$curFeedback = $(curForm).closest('.attack-container').find('.attack-feedback');
-            this.$curOutput = $(curForm).closest('.atatck-container').find('.attack-output');
+            this.$curOutput = $(curForm).closest('.attack-container').find('.attack-output');
             var formUrl = $(curForm).attr('action');
             var formMethod = $(curForm).attr('method');
             var contentType = ($(curForm).attr('contentType')) ? $(curForm).attr('contentType') : 'application/x-www-form-urlencoded; charset=UTF-8';

webgoat-container/src/main/resources/static/js/goatApp/view/LessonOverviewView.js

@@ -0,0 +1,48 @@
+define(['jquery',
+	'underscore',
+	'backbone',
+	'goatApp/model/LessonOverviewModel',
+	'goatApp/view/AssignmentOverview'],
+function($,
+	_,
+	Backbone,
+	LessonOverviewModel,
+	AssignmentOverview) {
+	return Backbone.View.extend({
+		el:'#lesson-overview',
+		 initialize: function (lessonOverviewModel) {
+			this.model = lessonOverviewModel;
+			this.listenTo(this.model, 'change add remove update', this.render);
+			this.hideLessonOverview();
+		},
+
+        showAssignments: function() {
+            this.$el.html('');
+      		this.model.each(function(assignment) {
+      	        var assignmentView = new AssignmentOverview({ model: assignment });
+                this.$el.append(assignmentView.render().el);
+           	}, this);
+        },
+
+		render: function() {
+		    if (this.isVisible()) {
+        	    this.$el.hide();
+        	} else {
+        		this.$el.show();
+        	}
+        	this.showAssignments();
+
+       		return this;
+       	},
+
+        isVisible: function() {
+            return this.$el.is(':visible');
+        },
+
+		hideLessonOverview: function() {
+			if (this.$el.is(':visible')) {
+				this.$el.hide();
+			}
+		}
+	});
+});