Display series, links

Makefile

@@ -60,8 +60,8 @@ sinclude GNUmakefile.local
 DATABASE = metadata.db
 OBJS	 = db.o db_author.o db_book.o db_series.o json.o main.o
 
-HTMLS	 = index.html book.html author.html
+HTMLS	 = index.html book.html author.html series.html
-JSMINS = index.min.js book.min.js author.min.js
+JSMINS = index.min.js book.min.js author.min.js series.min.js
 EXTJS  = externals/vue.min.js
 CSS		 = externals/bootstrap.min.css
 FONTS  = externals/fonts/*

author.html

@@ -41,7 +41,7 @@
         <div class="panel-body">
           <ul v-for="series in author.series" class="list-unstyled">
             <li><span class="glyphicon glyphicon-list"></span> 
-            {{ series.name }}
+              <a :href="'series.html?id='+series.id">{{ series.name }}</a>
             </li>
           </ul>
         </div>

book.html

@@ -49,7 +49,7 @@
           <span class="glyphicon glyphicon-list"></span> Serie
         </h2>
         <div v-if="book.series">
-          {{ book.series.name }}
+          <a :href="'series.html?id='+book.series.id">{{ book.series.name }}</a>
           <span class="badge">{{ book.series.idx }}</span>
         </div>
         

db_series.c

@@ -52,7 +52,7 @@ static const char *const stmts[STMT__MAX] = {
   /* STMT_SERIE_BOOKS */
   "SELECT books.id, title, series_index FROM books \
     LEFT OUTER JOIN books_series_link ON books.id = books_series_link.book \
-    WHERE books_series_link.series = ?",
+    WHERE books_series_link.series = ? ORDER BY series_index DESC",
   /* STMT_SERIE_AUTHORS */
   "SELECT DISTINCT authors.id, authors.name \
     FROM authors, books_authors_link, books_series_link \

index.html

@@ -17,14 +17,35 @@
         <p>Cette bibliothèque contient actuellement <strong>{{ booksCount }}</strong> livres et BD en format papier ou électronique.</p>
         <button class="btn btn-primary" type="button" @click="showBooks">Livres</button>
         <button class="btn btn-primary" type="button" @click="showAuthors">Auteurs</button>
+        <button class="btn btn-primary" type="button" @click="showSeries">Series</button>
       </div>
-      <div class="table-responsive" v-if="books.length > 0 || authors.length > 0">
+      <div class="table-responsive" v-if="books.length > 0 || authors.length > 0 || series.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" v-if="series.length > 0">
+          <tr>
+            <th>Nom</th>
+            <th>Livre(s)</th>
+            <th>Auteur(s)</th>
+          </tr>
+          <tr v-for="serie in series">
+            <td>
+              <span class="glyphicon glyphicon-list"></span>
+              <a :href="'series.html?id='+serie.id">{{ serie.name }}</a>
+            </td>
+            <td>{{ serie.count }}</td>
+            <td>
+              <template v-for="author in serie.authors">
+                <span class="glyphicon glyphicon-user"></span>
+                <a :href="'author.html?id='+author.id">{{ author.name }}</a>&nbsp;
+              </template>
+            </td>
+          </tr>
+        </table>
         <table class="table table-striped" v-if="authors.length > 0">
           <tr>
             <th>Nom</th>
@@ -55,7 +76,8 @@
             </td>
             <td>
               <template v-if="book.series">
-                <span class="glyphicon glyphicon-list"></span>{{ book.series ? book.series.name : '' }}
+                <span class="glyphicon glyphicon-list"></span>
+                <a :href="'series.html?id='+book.series.id">{{ book.series.name }}</a>
                 <span class="badge">{{ book.series ? book.series.idx : '' }}</span>
               </template>
             </td>

index.js

@@ -3,6 +3,7 @@ var app = new Vue({
   data: {
     books: [],
     authors: [],
+    series: [],
     booksCount: 0,
     page: 1,
     perpage: 20
@@ -48,6 +49,9 @@ var app = new Vue({
     booksSuccess: function(resp) {
       this.books = resp;
     },
+    seriesSuccess: function(resp) {
+      this.series = resp;
+    },
     prevPage: function() {
       if (this.page > 1) {
         this.page--;
@@ -55,6 +59,8 @@ var app = new Vue({
           this.loadBooks();
         if (this.authors.length > 0)
           this.loadAuthors();
+        if (this.series.length > 0)
+          this.loadSeries();
       }
     },
     nextPage: function() {
@@ -63,6 +69,8 @@ var app = new Vue({
         this.loadBooks();
       if (this.authors.length > 0)
         this.loadAuthors();
+      if (this.series.length > 0)
+        this.loadSeries();
     },
     loadAuthors: function() {
       this.sendQuery('cgi-bin/bouquins/authors?page=' + this.page + '&perpage=' + this.perpage,
@@ -72,14 +80,27 @@ var app = new Vue({
       this.sendQuery('cgi-bin/bouquins/books?page=' + this.page + '&perpage=' + this.perpage,
         this.stdError, this.booksSuccess);
     },
+    loadSeries: function() {
+      this.sendQuery('cgi-bin/bouquins/series?page=' + this.page + '&perpage=' + this.perpage,
+        this.stdError, this.seriesSuccess);
+    },
+    showSeries: function() {
+      this.books = [];
+      this.authors = [];
+      this.page = 1;
+      this.perpage = 20;
+      this.loadSeries();
+    },
     showAuthors: function() {
       this.books = [];
+      this.series = [];
       this.page = 1;
       this.perpage = 20;
       this.loadAuthors();
     },
     showBooks: function() {
       this.authors = [];
+      this.series = [];
       this.page = 1;
       this.perpage = 20;
       this.loadBooks();

series.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <title>Serie | Bouquins</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="css/bootstrap.min.css">
+    <link rel="preload" href="js/series.min.js" as="script">
+    <link rel="preload" href="js/vue.min.js" as="script">
+    <link rel="prefetch" href="js/series.min.js">
+    <link rel="prefetch" href="js/vue.min.js">
+  </head>
+  <body>
+    <div class="container" id="app">
+      <ol class="breadcrumb">
+        <li><a href="index.html">Home</a></li>
+        <li class="active">Serie</li>
+      </ol>
+      <div class="page-header" v-if="series">
+        <h1>
+          <span class="glyphicon glyphicon-list"></span>
+          {{ series.name }}
+        </h1>
+      </div>
+      <div class="alert alert-danger" role="alert" v-else>Aucune série sélectionnée</div>
+      <template v-if="series">
+      <h2>
+        <span class="glyphicon glyphicon-book"></span> Livre(s)
+      </h2>
+      <ul>
+        <li v-for="book in series.books">{{ book.series.idx }}. 
+        <a :href="'book.html?id='+book.id">{{ book.title }}</a>
+        </li>
+      </ul>
+      <h2>
+        <span class="glyphicon glyphicon-user"></span> Auteur(s)
+      </h2>
+      <ul>
+        <li v-for="author in series.authors">
+          <span class="glyphicon glyphicon-user"></span>
+          <a :href="'author.html?id='+author.id">{{ author.name }}</a>
+        </li>
+      </ul>
+      </template>
+    </div>
+    <script src="js/vue.min.js"></script>
+    <script src="js/series.min.js"></script>
+  </body>
+</html>
+

series.js

@@ -0,0 +1,60 @@
+var app = new Vue({
+  el: '#app',
+  data: {
+    urlParams: {},
+    series: {}
+  },
+  methods: {
+    urlParse: function() {
+      var match,
+      pl     = /\+/g,  // Regex for replacing addition symbol with a space
+      search = /([^&=]+)=?([^&]*)/g,
+      decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
+      query  = window.location.search.substring(1);
+      while (match = search.exec(query))
+        this.urlParams[decode(match[1])] = decode(match[2]);
+    },
+    sendQuery: function(url, error, success) {
+      var xmh = new XMLHttpRequest();
+      var v;
+
+      xmh.onreadystatechange = function() {
+        v = xmh.responseText;
+        if (xmh.readyState === 4 && xmh.status === 200) {
+          var res;
+          try  { 
+            res = JSON.parse(v);
+          } catch (err) {
+            if (null !== error)
+              error(err.name, err.message);
+          }
+          if (null !== success)
+            success(res);
+        } else if (xmh.readyState === 4) {
+          if (null !== error)
+            error(xmh.status, v);
+        }
+      };
+
+      xmh.open('GET', url, true);
+      xmh.send(null);
+    },
+    stdError: function(code, resp) {
+      console.log('ERROR ' + code + ': ' + resp);
+    },
+    seriesSucces: function(resp) {
+      this.series = resp;
+      document.title = this.series.name +' | Bouquins';
+    },
+    loadSeries: function() {
+      if (this.urlParams.id)
+        this.sendQuery('cgi-bin/bouquins/series/' + this.urlParams.id, this.stdError, this.seriesSucces);
+    }
+  },
+  created: function() {
+    this.urlParse();
+  },
+  mounted: function() {
+    this.loadSeries();
+  }
+})