From 9f10fd7c57aae618947286d916b382ec1eab9613 Mon Sep 17 00:00:00 2001
From: Jason White <jason.white@owasp.org>
Date: Mon, 29 Aug 2016 16:13:19 -0400
Subject: [PATCH] Initial client side pagination

---
 .../src/main/resources/static/css/main.css    |  7 ++-
 .../js/goatApp/view/LessonContentView.js      | 58 +++++++++++++++----
 2 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/webgoat-container/src/main/resources/static/css/main.css b/webgoat-container/src/main/resources/static/css/main.css
index 383694ea5..152a00e32 100644
--- a/webgoat-container/src/main/resources/static/css/main.css
+++ b/webgoat-container/src/main/resources/static/css/main.css
@@ -905,6 +905,11 @@ cookie-container {
   display: block
 }
 
+/* General View Controls */
+.show-next-page:hover {
+    cursor:pointer;
+}
+
 /* HINTS */
 #lesson-hint-container {
   display: none;
@@ -943,5 +948,5 @@ cookie-container {
 /* ATTACK DISPLAY */
 
 #attack-container {
-    display:none;
+    border:1px solid red;
 }
\ No newline at end of file
diff --git a/webgoat-container/src/main/resources/static/js/goatApp/view/LessonContentView.js b/webgoat-container/src/main/resources/static/js/goatApp/view/LessonContentView.js
index 2e41ec73e..0799a4957 100644
--- a/webgoat-container/src/main/resources/static/js/goatApp/view/LessonContentView.js
+++ b/webgoat-container/src/main/resources/static/js/goatApp/view/LessonContentView.js
@@ -18,9 +18,9 @@ define(['jquery',
         render: function() {
             this.$el.html(this.model.get('content'));
             this.makeFormsAjax();
-            this.initPagination();
             this.ajaxifyAttackHref();
             $(window).scrollTop(0); //work-around til we get the scroll down sorted out
+            this.initPagination();
         },
         
         //TODO: reimplement this in custom fashion maybe?
@@ -37,12 +37,14 @@ define(['jquery',
         },
 
         initPagination: function() {
-            //console.log(this.$el.find('.lesson-page-wrapper').length + ' pages of content');
+            //get basic pagination info
             this.currentPage = 0;
             this.$contentPages = this.$el.find('.lesson-page-wrapper');
-            if (this.$contentPages.length > 1) {
-                this.$contentPages.hide();
-                this.$el.find(this.$contentPages[0]).show();
+            this.numPages = this.$contentPages.length;
+            //
+            if (this.numPages > 1) {
+                this.showCurContentPage();
+                this.addPaginationControls();
             }
         },
 
@@ -67,15 +69,49 @@ define(['jquery',
         },
 
         addPaginationControls: function() {
-//            <div class="panel-body" id="lesson-page-controls">
-//              <span class="glyphicon-class glyphicon glyphicon-circle-arrow-left" id="show-prev-hint"></span>
-//              <span class="glyphicon-class glyphicon glyphicon-circle-arrow-right" id="show-next-hint"></span>
-//              <br/>
-//
-//            </div>
+            this.$prevPageButton = $('<span>',{class:'glyphicon-class glyphicon glyphicon-circle-arrow-left show-prev-page'});
+            this.$prevPageButton.unbind().on('click',this.decrementPageView);
+
+            this.$nextPageButton = $('<span>',{class:'glyphicon-class glyphicon glyphicon-circle-arrow-right show-next-page'});
+            this.$nextPageButton.unbind().on('click',this.incrementPageView.bind(this));
+
+            var pagingControlsDiv = $('<div>',{class:'panel-body', id:'lessong-page-controls'});
+            pagingControlsDiv.append(this.$prevPageButton);
+            pagingControlsDiv.append(this.$nextPageButton);
+            this.$el.append(pagingControlsDiv);
+            this.$prevPageButton.hide()
+        },
+
+        incrementPageView: function() {
+            if (this.currentPage < this.numPages -1) {
+               this.currentPage++;
+               this.showCurContentPage();
+            }
+            if (this.currentPage >= this.numPages -1) {
+                //this.hideNextPageButton();
+            }
+        },
+
+        decrementPageView: function() {
+            if (this.currentPage > 0) {
+                this.currentPage--;
+                this.showCurContentPage();
+            }
+            if (this.currentPage == 0) {
+                //this.hidePrevPageButton();
+            }
+        },
+
+        showCurContentPage: function() {
+            this.$contentPages.hide();
+            this.$el.find(this.$contentPages[this.currentPage]).show();
+        },
+
+        hideNextPageButton: function() {
 
         }
 
+
     });