refactoring home page
This commit is contained in:
parent
a190aab20d
commit
f5b763ab38
@ -1,8 +1,140 @@
|
|||||||
var url;
|
var ItemsCol = function(id, headers, cols) {
|
||||||
var links;
|
this.id = id;
|
||||||
var cols;
|
this.url= '/'+id;
|
||||||
var headers;
|
this.headers = headers;//table headers
|
||||||
var urlp={};
|
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) {
|
function link(content, href, glyph) {
|
||||||
var link="";
|
var link="";
|
||||||
if (content) {
|
if (content) {
|
||||||
@ -12,101 +144,6 @@ function link(content, href, glyph) {
|
|||||||
}
|
}
|
||||||
return link;
|
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()
|
* parse_link_header()
|
||||||
*
|
*
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user