Display series, links
This commit is contained in:
parent
231b115a95
commit
c69bf98f31
4
Makefile
4
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
|
||||
JSMINS = index.min.js book.min.js author.min.js
|
||||
HTMLS = index.html book.html author.html series.html
|
||||
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/*
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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 \
|
||||
|
26
index.html
26
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">←</span> Précédents</a></li>
|
||||
<li class="next"><a href="#" @click="nextPage">Suivants <span aria-hidden="true">→</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>
|
||||
</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>
|
||||
|
21
index.js
21
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();
|
||||
|
50
series.html
Normal file
50
series.html
Normal file
@ -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>
|
||||
|
60
series.js
Normal file
60
series.js
Normal file
@ -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();
|
||||
}
|
||||
})
|
Loading…
Reference in New Issue
Block a user