Author page and links

This commit is contained in:
Meutel 2017-01-07 21:19:45 +01:00
parent d56b1ef995
commit 3453ab92ef
5 changed files with 181 additions and 6 deletions

View File

@ -60,8 +60,8 @@ sinclude GNUmakefile.local
DATABASE = metadata.db DATABASE = metadata.db
OBJS = db.o json.o main.o OBJS = db.o json.o main.o
HTMLS = index.html book.html HTMLS = index.html book.html author.html
JSMINS = index.min.js book.min.js JSMINS = index.min.js book.min.js author.min.js
EXTJS = externals/vue.min.js EXTJS = externals/vue.min.js
CSS = externals/bootstrap.min.css CSS = externals/bootstrap.min.css
FONTS = externals/fonts/* FONTS = externals/fonts/*

63
author.html Normal file
View File

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Auteur | 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/author.min.js" as="script">
<link rel="preload" href="js/vue.min.js" as="script">
<link rel="prefetch" href="js/author.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">Auteur</li>
</ol>
<div class="page-header" v-if="author.id">
<h1>
<span class="glyphicon glyphicon-user"></span>
{{ author.name }}
</h1>
</div>
<div class="alert alert-danger" role="alert" v-else>Aucun livre sélectionné</div>
<ul class="nav nav-pills">
<li role="presentation" :class="{ active: tab == 'books' }"><a href="#" @click="showBooks">Livres</a></li>
<li v-if="author.series && author.series.length > 0" role="presentation" :class="{ active: tab == 'series' }"><a href="#" @click="showSeries">Series</a></li>
<li v-if="author.authors && author.authors.length > 0"role="presentation" :class="{ active: tab == 'authors' }"><a href="#" @click="showAuthors">Co-auteurs</a></li>
</ul>
<div class="panel panel-default" :class="{ hidden: tab != 'books' }">
<div class="panel-body">
<ul v-for="book in author.books" class="list-unstyled">
<li><span class="glyphicon glyphicon-book"></span>
<a :href="'book.html?id='+book.id">{{ book.title }}</a>
</li>
</ul>
</div>
</div>
<div class="panel panel-default" :class="{ hidden: tab != 'series' }">
<div class="panel-body">
<ul v-for="series in author.series" class="list-unstyled">
<li><span class="glyphicon glyphicon-list"></span>
{{ series.name }}
</li>
</ul>
</div>
</div>
<div class="panel panel-default" :class="{ hidden: tab != 'authors' }">
<div class="panel-body">
<ul v-for="coauthor in author.authors" class="list-unstyled">
<li> <span class="glyphicon glyphicon-user"></span>
<a :href="'author.html?id='+coauthor.id">{{ coauthor.name }}</a>
</li>
</ul>
</div>
</div>
</div>
<script src="js/vue.min.js"></script>
<script src="js/author.min.js"></script>
</body>
</html>

101
author.js Normal file
View File

@ -0,0 +1,101 @@
var app = new Vue({
el: '#app',
data: {
urlParams: {},
author: {},
tab: "books"
},
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);
},
authorSuccess: function(resp) {
this.author = resp;
document.title = this.author.name +' | Bouquins';
this.author.series=[];
this.author.authors=[];
if (this.author.books) {
var series = [];
var authors = [];
for (var i=0;i<this.author.books.length;i++) {
var book = this.author.books[i];
if (book.series)
series.push(book.series);
if (book.authors)
authors.push.apply(authors, book.authors);
}
if (series.length > 0) {
series.sort();
this.author.series = [series[0]];
for (var i=1;i<series.length;i++) {
if (series[i-1].id !== series[i].id)
this.author.series.push(series[i]);
}
}
if (authors.length > 0) {
authors.sort();
for (var i=0;i<authors.length;i++) {
if ((this.author.authors.length == 0
|| this.author.authors[this.author.authors.length] != authors[i])
&& authors[i].id != this.author.id)
this.author.authors.push(authors[i]);
}
}
}
},
showBooks: function() {
this.tab = "books";
},
showAuthors: function() {
this.tab = "authors";
},
showSeries: function() {
this.tab = "series";
},
loadAuthor: function() {
if (this.urlParams.id)
this.sendQuery('cgi-bin/bouquins/authors/' + this.urlParams.id, this.stdError, this.authorSuccess);
}
},
created: function() {
this.urlParse();
},
mounted: function() {
this.loadAuthor();
}
})

View File

@ -12,6 +12,10 @@
</head> </head>
<body> <body>
<div class="container" id="app"> <div class="container" id="app">
<ol class="breadcrumb">
<li><a href="index.html">Home</a></li>
<li class="active">Livre</li>
</ol>
<div class="page-header" v-if="book.id"> <div class="page-header" v-if="book.id">
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-9"> <div class="col-xs-12 col-md-9">
@ -36,7 +40,9 @@
<span class="glyphicon glyphicon-user"></span> Auteur{{ book.authors.length > 1 ? 's' : '' }} <span class="glyphicon glyphicon-user"></span> Auteur{{ book.authors.length > 1 ? 's' : '' }}
</h2> </h2>
<ul> <ul>
<li v-for="author in book.authors">{{ author.name }}</li> <li v-for="author in book.authors">
<a :href="'author.html?id='+author.id">{{ author.name }}</a>
</li>
</ul> </ul>
<h2 v-if="book.series"> <h2 v-if="book.series">

View File

@ -31,7 +31,10 @@
<th>Livre(s)</th> <th>Livre(s)</th>
</tr> </tr>
<tr v-for="author in authors"> <tr v-for="author in authors">
<td><span class="glyphicon glyphicon-user"></span>{{ author.name }}</td> <td>
<span class="glyphicon glyphicon-user"></span>
<a :href="'author.html?id='+author.id">{{ author.name }}</a>
</td>
<td>{{ author.count }}</td> <td>{{ author.count }}</td>
</tr> </tr>
</table> </table>
@ -42,10 +45,12 @@
<th>Serie</th> <th>Serie</th>
</tr> </tr>
<tr v-for="book in books"> <tr v-for="book in books">
<td><span class="glyphicon glyphicon-book"></span><a :href="'book.html?id='+book.id">{{ book.title }}</a></td> <td><span class="glyphicon glyphicon-book"></span>
<a :href="'book.html?id='+book.id">{{ book.title }}</a></td>
<td> <td>
<template v-for="author in book.authors"> <template v-for="author in book.authors">
<span class="glyphicon glyphicon-user"></span>{{ author.name }} <span class="glyphicon glyphicon-user"></span>
<a :href="'author.html?id='+author.id">{{ author.name }}</a>
</template> </template>
</td> </td>
<td> <td>