refactoring home page
This commit is contained in:
parent
a190aab20d
commit
f5b763ab38
|
|
@ -1,8 +1,140 @@
|
|||
var url;
|
||||
var links;
|
||||
var cols;
|
||||
var headers;
|
||||
var urlp={};
|
||||
var ItemsCol = function(id, headers, cols) {
|
||||
this.id = id;
|
||||
this.url= '/'+id;
|
||||
this.headers = headers;//table headers
|
||||
this.cols = cols;//cell rendering functions
|
||||
};
|
||||
$.extend(ItemsCol.prototype,{
|
||||
data: null, // loaded items
|
||||
bind: function() {
|
||||
var self = this;
|
||||
$('#'+this.id) .click(function() {
|
||||
window.location.hash=self.id;
|
||||
home.pagination.page=0;
|
||||
home.pagination.perpage=10;
|
||||
self.load();
|
||||
});
|
||||
},
|
||||
load: function() {
|
||||
var self = this;
|
||||
$.getJSON( this.url, home.pagination, function( data, textStatus, xhr ) {
|
||||
self.data = data;
|
||||
home.current = self;
|
||||
home.update();
|
||||
var linkHeader = xhr.getResponseHeader('link');
|
||||
home.updatePager(parse_link_header(linkHeader));
|
||||
});
|
||||
},
|
||||
renderRow: function(elt) {
|
||||
var item = "<tr id='" + elt.id + "'>";
|
||||
$.each(this.cols, function(icol, col) {
|
||||
item+="<td>"+col(elt)+"</td>";
|
||||
});
|
||||
item += "</tr>";
|
||||
return item;
|
||||
},
|
||||
});
|
||||
var HomePage = function() {
|
||||
this.books= new ItemsCol('book', ['Titre', 'Auteur(s)', 'Serie'], [
|
||||
function(elt) {
|
||||
return link(elt.title, '/book/'+elt.id, 'glyphicon-book');
|
||||
},
|
||||
function(elt) {
|
||||
var links='';
|
||||
if (Array.isArray(elt.authors)) {
|
||||
$.each(elt.authors, function(ida, author) {
|
||||
links+=link(author.name, '/author/'+author.id,'glyphicon-user');
|
||||
});
|
||||
}
|
||||
return links;
|
||||
},
|
||||
function(elt) {
|
||||
var content = elt.series_name == null ? '' : elt.series_name + '(' + elt.series_index + ')';
|
||||
return link(content, '/serie/'+elt.series_id, 'glyphicon-list');
|
||||
}
|
||||
]);
|
||||
this.authors= new ItemsCol('author', ['Nom', 'Livres'], [
|
||||
function(elt){ return link(elt.name, '/author/'+elt.id,'glyphicon-user'); },
|
||||
function(elt) { return elt.count; }
|
||||
]);
|
||||
this.series= new ItemsCol('serie', ['Nom', 'Auteur(s)', 'Livres'], [
|
||||
function(elt) { return link(elt.name, '/serie/'+elt.id, 'glyphicon-list'); },
|
||||
function(elt) {
|
||||
var links='';
|
||||
if (Array.isArray(elt.authors)) {
|
||||
$.each(elt.authors, function(ida, author) {
|
||||
links+=link(author.name, '/author/'+author.id,'glyphicon-user');
|
||||
});
|
||||
}
|
||||
return links;
|
||||
},
|
||||
function(elt) { return elt.count; }
|
||||
]);
|
||||
this.pagination= {
|
||||
perpage: 10,
|
||||
page: 0,
|
||||
};
|
||||
this.table = $('#items');
|
||||
// bind buttons events
|
||||
$.each([this.books,this.authors,this.series], function(ind, itemsCol) {
|
||||
itemsCol.bind();
|
||||
});
|
||||
$(".perpage").click(function() {
|
||||
home.pagination.perpage = $(this).attr("value");
|
||||
home.pagination.page = 0;
|
||||
if (home.current)
|
||||
home.current.load();
|
||||
});
|
||||
};
|
||||
$.extend(HomePage.prototype,{
|
||||
current: null,
|
||||
table: null,
|
||||
displayHeaders: function(headers) {
|
||||
var row = "<tr>";
|
||||
$.each(headers, function(ih, h) {
|
||||
row+="<th>"+h+"</th>";
|
||||
});
|
||||
row += "</tr>";
|
||||
this.table.append(row);
|
||||
},
|
||||
addRow: function(elt) {
|
||||
var row = this.current.renderRow(elt);
|
||||
this.table.append(row);
|
||||
},
|
||||
update: function() {
|
||||
this.table.empty();
|
||||
if (this.current) {
|
||||
this.displayHeaders(this.current.headers);
|
||||
var self = this;
|
||||
$.each(this.current.data, function(ind, elt) {
|
||||
self.addRow(elt);
|
||||
});
|
||||
}
|
||||
},
|
||||
updatePager: function(links) {
|
||||
$.each(['prev','next'], function (i, elt) {
|
||||
var btn = $('#'+elt);
|
||||
if (links[elt]) {
|
||||
btn.parent().removeClass('disabled');
|
||||
} else {
|
||||
btn.parent().addClass('disabled');
|
||||
}
|
||||
btn.click(function() {
|
||||
var parsed = $.url(links[elt]);
|
||||
var urlp = parsed.param();
|
||||
home.pagination.page = urlp.page;
|
||||
home.pagination.perpage = urlp.perpage;
|
||||
home.current.load();
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
var home = new HomePage();
|
||||
|
||||
|
||||
/**
|
||||
* Make link.
|
||||
*/
|
||||
function link(content, href, glyph) {
|
||||
var link="";
|
||||
if (content) {
|
||||
|
|
@ -12,101 +144,6 @@ function link(content, href, glyph) {
|
|||
}
|
||||
return link;
|
||||
}
|
||||
$('#book').click(function() {
|
||||
headers = ['Titre', 'Auteur(s)', 'Serie'];
|
||||
cols = [
|
||||
function(elt) {
|
||||
return link(elt.title, '/book/'+elt.id, 'glyphicon-book');
|
||||
}, function(elt) {
|
||||
var links="";
|
||||
if (Array.isArray(elt.authors)) {
|
||||
$.each(elt.authors, function(ida, author) {
|
||||
links+=link(author.name, '/author/'+author.id,'glyphicon-user');
|
||||
});
|
||||
}
|
||||
return links;
|
||||
}, function(elt) {
|
||||
var content = elt.series_name == null ? '' : elt.series_name + '(' + elt.series_index + ')';
|
||||
return link(content, '/serie/'+elt.series_id, 'glyphicon-list');
|
||||
}
|
||||
];
|
||||
});
|
||||
$('#author').click(function() {
|
||||
headers = ['Nom', 'Livres'];
|
||||
cols = [ function(elt){
|
||||
return link(elt.name, '/author/'+elt.id,'glyphicon-user');
|
||||
}, function(elt) { return elt.count; } ];
|
||||
});
|
||||
$('#serie').click(function() {
|
||||
headers = ['Nom', 'Auteur(s)', 'Livres'];
|
||||
cols = [
|
||||
function(elt) {
|
||||
return link(elt.name, '/serie/'+elt.id, 'glyphicon-list');
|
||||
}, function(elt) {
|
||||
var links="";
|
||||
if (Array.isArray(elt.authors)) {
|
||||
$.each(elt.authors, function(ida, author) {
|
||||
links+=link(author.name, '/author/'+author.id,'glyphicon-user');
|
||||
});
|
||||
}
|
||||
return links;
|
||||
}, function(elt) {
|
||||
return elt.count;
|
||||
}
|
||||
];
|
||||
});
|
||||
$.each(['book','author','serie'], function (i, elt) {
|
||||
$('#'+elt).click(function() {
|
||||
window.location.hash=elt='s';
|
||||
url = '/'+elt;
|
||||
loadItems();
|
||||
});
|
||||
});
|
||||
$.each(['prev','next'], function (i, elt) {
|
||||
$('#'+elt).click(function() {
|
||||
var parsed = $.url(links[elt]);
|
||||
url = parsed.attr('path');
|
||||
urlp = parsed.param();
|
||||
loadItems();
|
||||
});
|
||||
});
|
||||
$(".perpage").click(function() {
|
||||
urlp.perpage = $(this).attr("value");
|
||||
urlp.page = 0;
|
||||
loadItems();
|
||||
});
|
||||
|
||||
function loadItems() {
|
||||
$.getJSON( url, urlp, function( data, textStatus, xhr ) {
|
||||
var items = $('#items');
|
||||
items.empty();
|
||||
var item = "<tr>";
|
||||
$.each(headers, function(ih, h) {
|
||||
item+="<th>"+h+"</th>";
|
||||
});
|
||||
item += "</tr>";
|
||||
items.append(item);
|
||||
$.each( data, function(i, elt ) {
|
||||
var item = "<tr id='" + elt.id + "'>";
|
||||
$.each(cols, function(icol, col) {
|
||||
item+="<td>"+col(elt)+"</td>";
|
||||
});
|
||||
item += "</tr>";
|
||||
items.append(item);
|
||||
});
|
||||
|
||||
var linkHeader = xhr.getResponseHeader('link');
|
||||
links = parse_link_header(linkHeader);
|
||||
$.each(['prev','next'], function (i, elt) {
|
||||
var btn = $('#'+elt);
|
||||
if (links[elt]) {
|
||||
btn.parent().removeClass('disabled');
|
||||
} else {
|
||||
btn.parent().addClass('disabled');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
/*
|
||||
* parse_link_header()
|
||||
*
|
||||
|
|
|
|||
Loading…
Reference in New Issue