From 606afb279d9519acdf855a457af79f5e7cf908fa Mon Sep 17 00:00:00 2001
From: Meutel <meutel@meutel.net>
Date: Sun, 6 Aug 2017 17:18:27 +0200
Subject: [PATCH] Factorize JS

---
 assets/js/bouquins.js | 252 +++++++++++++++++-------------------------
 1 file changed, 100 insertions(+), 152 deletions(-)

diff --git a/assets/js/bouquins.js b/assets/js/bouquins.js
index 7a32933..6d89b5a 100644
--- a/assets/js/bouquins.js
+++ b/assets/js/bouquins.js
@@ -1,51 +1,90 @@
 var bus = new Vue();
 
+// COMMONS //
+
+var BOOKS = 'books', AUTHORS = 'authors', SERIES = 'series';
+var BOUQUINS_TYPES = {
+  books: { icon: 'book', singular: 'livre', plural: 'livres',
+    tab_cols:  [ { id: 'title',   name: 'Titre', sort: 'title' },
+                 { id: 'authors', name: 'Auteur(s)' },
+                 { id: 'series',  name: 'Serie' } ] },
+  authors: { icon: 'user', singular: 'auteur', plural: 'auteurs',
+    tab_cols: [ { id: 'author_name', name: 'Nom', sort: 'name' },
+                { id: 'count',       name: 'Livre(s)' } ] },
+  series: { icon: 'list', singular: 'serie', plural: 'series',
+    tab_cols: [ { id: 'serie_name', name: 'Nom', sort: 'name' },
+                { id: 'count',      name: 'Livre(s)' },
+                { id: 'authors',    name: 'Auteur(s)' } ] }
+};
+function ty(type) {
+  if (BOUQUINS_TYPES[type]) return BOUQUINS_TYPES[type]
+  console.log("ERROR: Unknown type: " + type);
+  return {}
+}
+function icon(type) {
+  return ty(type).icon;
+}
+function iconClass(type) {
+  return 'glyphicon glyphicon-' + icon(type);
+}
+function url(type, id) {
+  if (id) return ty(type) ? '/'+type+'/'+id:'';
+  return ty(type) ? '/'+type+'/':'';
+}
+function label(type, count) {
+  return count == 1 ? ty(type).singular : ty(type).plural;
+}
+function stdError(code, resp) {
+  console.log('ERROR ' + code + ': ' + resp);
+}
+function sendQuery(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.setRequestHeader('Accept','application/json');
+  xmh.send(null);
+}
+
 // COMPONENTS //
 
 Vue.component('results-list', {
   template: '#results-list-template',
   props: ['results', 'count', 'type'],
   methods: {
-    url: function(item) {
-      return '/'+this.type+'/'+item.id;
-    },
+    url: function(item) { return url(this.type, item.id); },
     label: function(item) {
       switch (this.type) {
-        case 'books':
+        case BOOKS:
           return item.title;
-        case 'authors':
-        case 'series':
+        case AUTHORS:
+        case SERIES:
           return item.name;
         default:
           return '';
       }
     },
     iconClass: function() {
-      return 'glyphicon glyphicon-' + this.icon();
-    },
-    icon: function() {
-      switch (this.type) {
-        case 'books':
-          return 'book';
-        case 'authors':
-          return 'user';
-        case 'series':
-          return 'list';
-        default:
-          return '';
-      }
+      return iconClass(this.type);
     },
     countlabel: function() {
-      switch (this.type) {
-        case 'books':
-          return this.count > 1 ? 'livres' : 'livre';
-        case 'authors':
-          return this.count > 1 ? 'auteurs' : 'auteur';
-        case 'series':
-          return this.count > 1 ? 'series' : 'serie';
-        default:
-          return '';
-      }
+      return label(this.type, this.count);
     }
   }
 });
@@ -64,20 +103,11 @@ Vue.component('result-cell', {
   },
   props: ['item', 'col'],
   methods: {
-    bookUrl: function(id) {
-      return '/books/' + id;
-    },
-    authorUrl: function(id) {
-      return '/authors/' + id;
-    },
-    seriesUrl: function(id) {
-      return '/series/' + id;
-    },
-    link: function(h, icon, text, url) {
+    link: function(h, type, text, id) {
       return [
-        h('span',{ attrs: { class: 'glyphicon glyphicon-'+icon } },''),
+        h('span',{ attrs: { class: iconClass(type) } },''),
         ' ',
-        h('a', { attrs: { href: url } }, text)
+        h('a', { attrs: { href: url(type, id) } }, text)
       ];
     },
     badge: function(h, num) {
@@ -86,19 +116,19 @@ Vue.component('result-cell', {
     cellContent: function(h) {
       switch (this.col.id) {
       case 'author_name':
-        return this.link(h, 'user', this.item.name, this.authorUrl(this.item.id));
+        return this.link(h, AUTHORS, this.item.name, this.item.id);
       case 'serie_name':
-        return this.link(h, 'list', this.item.name, this.authorUrl(this.item.id));
+        return this.link(h, SERIES, this.item.name, this.item.id);
       case 'count':
         return this.item.count;
       case 'title':
-        return this.link(h, 'book', this.item.title, this.bookUrl(this.item.id));
+        return this.link(h, BOOKS, this.item.title, this.item.id);
       case 'authors':
         var elts = [];
         var authors = this.item.authors;
         if (authors) {
           for (i=0;i<authors.length;i++) {
-            elts[i] = this.link(h, 'user', authors[i].name, this.authorUrl(authors[i].id));
+            elts[i] = this.link(h, AUTHORS, authors[i].name, authors[i].id);
           }
         }
         return elts;
@@ -106,7 +136,7 @@ Vue.component('result-cell', {
         var series = this.item.series;
         if (series) {
           return [
-            this.link(h, 'list', series.name, this.seriesUrl(series.id)),
+            this.link(h, SERIES, series.name, series.id),
             h('span', { attrs: { class: 'badge' } }, this.item.series_idx)
           ];
         }
@@ -166,14 +196,10 @@ if (document.getElementById("index")) {
         this.updateResults();
       },
       order: function(query) {
-        if (this.order_desc)
-          return query + '&order=desc';
-        return query;
+        return query + (this.order_desc ? '&order=desc' : '');
       },
       sort: function(query) {
-        if (this.sort_by)
-          return query + '&sort=' + this.sort_by;
-        return query;
+        return query + (this.sort_by ? '&sort=' + this.sort_by : '');
       },
       paginate: function(query) {
         return query + '?page=' + this.page + '&perpage=' + this.perpage;
@@ -182,43 +208,22 @@ if (document.getElementById("index")) {
         return this.order(this.sort(this.paginate(url)));
       },
       updateResults: function() {
-        this.sendQuery(this.params(this.url), this.stdError, this.loadResults);
+        sendQuery(this.params(this.url), stdError, this.loadResults);
       },
       showSeries: function() {
-        this.url = '/series/';
+        this.url = url(SERIES);
         this.updateResults();
       },
       showAuthors: function() {
-        this.url = '/authors/';
+        this.url = url(AUTHORS);
         this.updateResults();
       },
       showBooks: function() {
-        this.url = '/books/';
+        this.url = url(BOOKS);
         this.updateResults();
       },
       loadCols: function(type) {
-        switch (type) {
-        case 'books':
-          this.cols = [
-            { id: 'title',   name: 'Titre', sort: 'title' },
-            { id: 'authors', name: 'Auteur(s)' },
-            { id: 'series',  name: 'Serie' }
-          ];
-        break;
-        case 'series':
-          this.cols = [
-            { id: 'serie_name', name: 'Nom', sort: 'name' },
-            { id: 'count',      name: 'Livre(s)' },
-            { id: 'authors',    name: 'Auteur(s)' }
-          ];
-        break;
-        case 'authors':
-          this.cols = [
-            { id: 'author_name', name: 'Nom', sort: 'name' },
-            { id: 'count',       name: 'Livre(s)' }
-          ];
-        break;
-        }
+        this.cols = ty(type).tab_cols;
       },
       loadResults(resp) {
         this.results = [];
@@ -230,33 +235,6 @@ if (document.getElementById("index")) {
         } else {
           this.page = 0;
         }
-      },
-      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.setRequestHeader('Accept','application/json');
-        xmh.send(null);
-      },
-      stdError: function(code, resp) {
-        console.log('ERROR ' + code + ': ' + resp);
       }
     },
     mounted: function() {
@@ -269,17 +247,17 @@ if (document.getElementById("author")) {
   new Vue({
     el: '#author',
     data: {
-      tab: "books"
+      tab: BOOKS
     },
     methods: {
       showBooks: function() {
-        this.tab = "books";
+        this.tab = BOOKS;
       },
       showAuthors: function() {
-        this.tab = "authors";
+        this.tab = AUTHORS;
       },
       showSeries: function() {
-        this.tab = "series";
+        this.tab = SERIES;
       }
     }
   });
@@ -303,8 +281,7 @@ if (document.getElementById("search")) {
     },
     methods: {
       searchParams: function(url) {
-        var res = url;
-        res += '?perpage=' + this.perpage;
+        var res = url + '?perpage=' + this.perpage;
         for (var i=0; i<this.terms.length; i++) {
           var t = this.terms[i];
           if (t.trim())
@@ -317,24 +294,23 @@ if (document.getElementById("search")) {
         this.authors = res.results;
       },
       searchAuthors: function() {
-        this.sendQuery(this.searchParams('/authors/'), this.stdError, this.searchAuthorsSuccess);
+        sendQuery(this.searchParams(url(AUTHORS)), stdError, this.searchAuthorsSuccess);
       },
       searchBooksSuccess: function(res) {
         this.booksCount = res.count;
         this.books = res.results;
       },
       searchBooks: function() {
-        this.sendQuery(this.searchParams('/books/'), this.stdError, this.searchBooksSuccess);
+        sendQuery(this.searchParams(url(BOOKS)), stdError, this.searchBooksSuccess);
       },
       searchSeriesSuccess: function(res) {
         this.seriesCount = res.count;
         this.series = res.results;
       },
       searchSeries: function() {
-        this.sendQuery(this.searchParams('/series/'), this.stdError, this.searchSeriesSuccess);
+        sendQuery(this.searchParams(url(SERIES)), stdError, this.searchSeriesSuccess);
       },
       searchAll: function() {
-        this.clear();
         this.searchAuthors();
         this.searchBooks();
         this.searchSeries();
@@ -350,22 +326,20 @@ if (document.getElementById("search")) {
       searchFull: function() {
         if (this.q) {
           this.terms = this.q.split(' ');
+          this.clear();
           switch (this.which) {
-            case 'all':
-              this.searchAll();
-              break;
-            case 'authors':
-              this.clear();
+            case AUTHORS:
               this.searchAuthors();
               break;
-            case 'books':
-              this.clear();
+            case BOOKS:
               this.searchBooks();
               break;
-            case 'series':
-              this.clear();
+            case SERIES:
               this.searchSeries();
               break;
+            default:
+              this.searchAll();
+              break;
           }
         }
         return false;
@@ -373,6 +347,7 @@ if (document.getElementById("search")) {
       searchUrl: function() {
         if (this.urlParams.q) {
           this.terms = this.urlParams.q.split(' ');
+          this.clear();
           this.searchAll();
           this.q = this.urlParams.q;
         }
@@ -385,34 +360,7 @@ if (document.getElementById("search")) {
         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.setRequestHeader('Accept','application/json');
-        xmh.send(null);
-      },
-      stdError: function(code, resp) {
-        console.log('ERROR ' + code + ': ' + resp);
-      }
+      }  
     },
     created: function() {
       this.urlParse();