From 155f4c2d248a9b67f68aebd3dbce429833b06e45 Mon Sep 17 00:00:00 2001
From: Meutel <meutel@meutel.net>
Date: Sat, 31 Dec 2016 17:19:47 +0100
Subject: [PATCH] Page

---
 index.html |  6 ++++++
 index.js   | 17 +++++++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 70f82ab..a874e93 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,12 @@
         <button class="btn btn-primary" type="button" @click="loadBooks">Livres</button>
       </div>
       <div class="table-responsive" v-if="books.length > 0">
+        <nav aria-label="Pages">
+          <ul class="pager">
+            <li class="previous" v-bind:class="{ disabled: page <= 1 }"><a href="#" @click="prevPage"><span aria-hidden="true">&larr;</span> Précédents</a></li>
+            <li class="next"><a href="#" @click="nextPage">Suivants <span aria-hidden="true">&rarr;</span></a></li>
+          </ul>
+        </nav>
         <table class="table table-striped">
           <tr>
             <th>Titre</th>
diff --git a/index.js b/index.js
index e9f5145..10c9336 100644
--- a/index.js
+++ b/index.js
@@ -2,7 +2,9 @@ var app = new Vue({
   el: '#app',
   data: {
     books: [],
-    booksCount: 0
+    booksCount: 0,
+    page: 1,
+    perpage: 20
   },
   methods: {
     sendQuery: function(url, error, success) {
@@ -42,8 +44,19 @@ var app = new Vue({
     booksSuccess: function(resp) {
       this.books = resp;
     },
+    prevPage: function() {
+      if (this.page > 1) {
+        this.page--;
+        this.loadBooks();
+      }
+    },
+    nextPage: function() {
+      this.page++;
+      this.loadBooks();
+    },
     loadBooks: function() {
-      this.sendQuery('cgi-bin/bouquins/books', this.stdError, this.booksSuccess);
+      this.sendQuery('cgi-bin/bouquins/books?page=' + this.page + '&perpage=' + this.perpage,
+        this.stdError, this.booksSuccess);
     }
   },
   mounted: function() {