numbering on pagination

webgoat-container/src/main/resources/static/css/main.css

@@ -152,7 +152,7 @@ img {
     margin-left: 1.5em;*/
     margin-right: 5px;
     margin-top: -38px; /* << don't like doing this, but otherwise it does not line up correctly */
-    color:#0F0
+    color:#88FB88 /* #0F0 */
 }
 
 /* ==========================================================================
@@ -963,6 +963,45 @@ cookie-container {
     width: 30px;
 }
 
+.attack-link, .page-link {
+    display: inline-block;
+    background-color: #555;
+    border-radius: 8px;
+    min-width: 20px;
+    text-align: center;
+    font-weight: bold;
+    padding-top:2px;
+}
+
+.attack-link.solved-true {
+    color:#88FB88;
+}
+
+.attack-link.solved-false {
+    color:#f2baba;
+}
+
+.attack-link.cur-page, .page-link.cur-page {
+    color:#fff;
+}
+
+.page-link {
+    color:#eee;
+}
+
+.page-link-wrapper {
+    display:inline-block;
+}
+
+.page-link-wrapper span {
+    margin: 3px;
+}
+
+.cur-page {
+    border-bottom: 2px solid #000;
+    color:#aaa;
+}
+
 span.show-next-page, span.show-prev-page {
     font-size: 1.3em;
 }
@@ -975,6 +1014,8 @@ font-size: 1.3em;
     cursor:pointer;
 }
 
+/* attack ... */
+
 .attack-feedback {
     font-weight:800;
 }
@@ -1046,3 +1087,10 @@ font-size: 1.3em;
   font-size: 12px;
   padding: 10px;
 }
+
+/* temp override
+//TODO: come up with longer term solution for full-window viewing
+*/
+.col-md-8 {
+    width: auto !important
+}

webgoat-container/src/main/resources/static/js/goatApp/model/LessonContentModel.js

@@ -32,6 +32,7 @@ define(['jquery',
             }
             this.set('content',content);
             this.set('lessonUrl',document.URL.replace(/\.lesson.*/,'.lesson'));
+            this.set('pageNum',document.URL.replace(/.*\.lesson\/(\d{1,4})$/,'$1'));
             this.trigger('content:loaded',this,loadHelps);
         },
 

webgoat-container/src/main/resources/static/js/goatApp/templates/paging_controls.html

@@ -1,5 +1,16 @@
 <div>
     <div class="page-nav-wrapper"><span class="glyphicon-class glyphicon glyphicon-circle-arrow-left show-prev-page"></span></div>
-    <!-- place page numbers with links to pages here ? -->
+    <div class="page-link-wrapper">
+        <% var baseUrl = overview.baseUrl; %>
+        <% _.each(overview.pages, function(page,index) { %>
+            <a href="<%=overview.baseUrl%>/<%=index%>"  alt="Page <%=index++ %>">
+            <% if (page.content === 'assignment') { %>
+                <div class="<%=page.pageClass%> <%=page.solvedClass%> <%=page.curPageClass%>"><%=index++%></div>
+            <% } else { %>
+                <div class="<%=page.pageClass%> <%=page.curPageClass%>"><%=index++%></div>
+            <% } %>
+            </a>
+        <% }); %>
+    </div>
     <div class="page-nav-wrapper"><span class="glyphicon-class glyphicon glyphicon-circle-arrow-right show-next-page"></span></div>
 </div>

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

@@ -38,7 +38,7 @@ function($,_,Backbone) {
 				this.$el.find('#show-solution-button').unbind().on('click',_.bind(this.showSolution,this)).show();
 			}
 
-			this.$el.find('#show-lesson-overview-button').unbind().on('click', _.bind(this.showLessonOverview, 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();
 		},
 

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

@@ -47,17 +47,17 @@ define(['jquery',
             this.makeFormsAjax();
             //this.ajaxifyAttackHref();
             $(window).scrollTop(0); //work-around til we get the scroll down sorted out
-            this.initPagination();
+            var startPageNum = this.model.get('pageNum');
+            this.initPagination(startPageNum);
         },
 
-        initPagination: function() {
+        initPagination: function(startPageNum) {
             //get basic pagination info
-            this.currentPage = 0;
             this.$contentPages = this.$el.find('.lesson-page-wrapper');
-            this.numPages = this.$contentPages.length;
+            var currentPage = (!isNaN(startPageNum) && startPageNum && startPageNum < this.$contentPages) ? startPageNum : 0;
-            //
+            //init views & pagination
+            this.showCurContentPage(currentPage);
             this.paginationControlView = new PaginationControlView(this.$contentPages,this.model.get('lessonUrl'));
-            //this.listenTo(this.paginationControlView,'page:set',this.navToPage);
          },
 
          getCurrentPage: function () {
@@ -163,8 +163,9 @@ define(['jquery',
         },
 
         navToPage: function (pageNum) {
-            this.showCurContentPage(pageNum);
             this.paginationControlView.setCurrentPage(pageNum);//provides validation
+            this.showCurContentPage(this.paginationControlView.currentPage);
+            this.paginationControlView.render();
             this.paginationControlView.hideShowNavButtons();
             var assignmentPath = this.findAssigmentEndpointOnPage(pageNum);
             Backbone.trigger('navigatedToPage',{'pageNumber':pageNum, 'assignmentPath' : assignmentPath});

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

@@ -1,38 +1,99 @@
 define(['jquery',
         'underscore',
         'backbone',
+        'goatApp/model/LessonOverviewModel',
         'text!templates/paging_controls.html'],
 //        'css!css/paging-controls.css'],
     function ($,
               _,
               Backbone,
+              LessonOverviewModel,
               PaginationTemplate) {
         return Backbone.View.extend({
             template: PaginationTemplate,
             el: '#lesson-page-controls',
 
             initialize: function ($contentPages,baseLessonUrl) {
-                this.numPages = $contentPages.length;
+                this.$contentPages = $contentPages;
+                this.model = new LessonOverviewModel();
+                this.listenTo(this.model, 'change add remove update reset', this.render);
+                this.numPages = this.$contentPages.length;
                 this.baseUrl = baseLessonUrl;
-                this.parseLinks($contentPages);
+
                 this.initPagination();
-                this.render();
+                //this.render();
-                this.bindNavButtons();
+
+                this.model.fetch();
              },
 
             render: function () {
+                this.parseLinks();
                 var t = _.template(this.template);
-                this.$el.html(t());
+                this.$el.html(t({'overview':this.lessonOverview}));
+               this.bindNavButtons();
                 this.hideShowNavButtons();
             },
 
             bindNavButtons: function() {
                 this.$el.find('span.glyphicon-class.glyphicon.glyphicon-circle-arrow-right.show-next-page').unbind().on('click',this.incrementPageView.bind(this));
                 this.$el.find('span.glyphicon-class.glyphicon.glyphicon-circle-arrow-left.show-prev-page').unbind().on('click', this.decrementPageView.bind(this));
+                this.navButtonsBound = true;
             },
 
-            parseLinks: function($contentPages) {
+            parseLinks: function() {
+                var assignmentCount = this.$contentPages.find('.attack-container');
+                var solvedMap = {};
+                var pages = [];
+                // one pass on solved assignmets
+                _.each(this.model.toJSON(), function(assignment) {
+                    if (assignment.solved) {
+                        var key = assignment.assignment.path; //.replace(/\//g,'');
+                        solvedMap[key] = assignment.assignment.name;
+                    }
+                });
 
+                isAttackSolved = function (path) {
+                    //strip
+                    var newPath = path.replace(/^\/WebGoat/,'');
+                    if (typeof solvedMap[newPath] !== 'undefined') {
+                        return true;
+                    }
+                    return false;
+                };
+
+                var self = this;
+                var pages, pageClass, solved;
+                _.each(this.$contentPages,function(page,index) {
+                    var curPageClass = (self.currentPage == index) ? ' cur-page' : '';
+
+                    if ($(page).find('.attack-container').length < 1) { // no assignments [attacks]
+                        pageClass = 'page-link';
+                        pages.push({content:'content',pageClass:pageClass,curPageClass:curPageClass});
+                    } else {
+                        var $assignmentForms = $(page).find('.attack-container form');
+                        // use for loop to avoid anonymous function scope hell
+                        //var pageAssignments = {content:'attack',attacks:[]}
+                        pageClass = 'attack-link'
+                        var solvedClass = 'solved-true'
+                        for (var i=0; i< $assignmentForms.length; i++) {
+                            //normalize path
+                            var action = $assignmentForms.attr('action');//.replace(/\//g,'');
+                            if (action && isAttackSolved(action)) {
+                                //pageClass = 'fa fa-check-square-o assignment-solved';
+                                //pageAssignments.attacks.push({solved:true});
+                            } else {
+                                solvedClass = 'solved-false';
+
+                            }
+                        }
+                        pages.push({solvedClass:solvedClass,content:'assignment',curPageClass:curPageClass,pageClass:pageClass});
+                    }
+                });
+                //assign to the view
+                this.lessonOverview = {
+                    baseUrl: this.baseUrl,
+                    pages: pages
+                }
             },
 
             showPrevPageButton: function() {
@@ -75,7 +136,7 @@ define(['jquery',
                     this.hideNextPageButton();
                     this.showPrevPageButton;
                 }
-                this.trigger('page:set',this,this.currentPage);
+                this.render();
             },
 
             decrementPageView: function() {
@@ -92,8 +153,7 @@ define(['jquery',
                     this.hidePrevPageButton();
                     this.showNextPageButton()
                 }
-                this.trigger('page:set',this,this.currentPage);
+                this.render();
-
             },
 
             hideShowNavButtons: function () {

webgoat-container/src/main/resources/templates/main_new.html

@@ -143,10 +143,7 @@
                                     <button class="btn btn-primary btn-xs btn-danger help-button"
                                             id="show-hints-button" th:text="#{show.hints}">Show hints
                                     </button>
-                                    <button class="btn btn-primary btn-xs btn-danger help-button"
+
-                                            id="show-lesson-overview-button" th:text="#{lesson.overview}">Lesson
-                                        overview
-                                    </button>
                                     <button class="btn btn-xs help-button" id="restart-lesson-button"
                                             th:text="#{reset.lesson}">Reset Lesson
                                     </button>