Factorize JS

This commit is contained in:
Meutel 2017-08-06 17:18:27 +02:00
parent 7b78861384
commit 606afb279d

View File

@ -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();