Nav: index - book

This commit is contained in:
Meutel 2016-12-31 12:52:33 +01:00
parent e2e6ba7075
commit 2c5026c469
3 changed files with 53 additions and 3 deletions

View File

@ -12,7 +12,25 @@
</head>
<body>
<div class="container" id="app">
<h1>Livre</h1>
<div class="page-header" v-if="book.id">
<div class="row">
<h1>
<span class="glyphicon glyphicon-book"></span>
{{ book.title }}
</h1>
</div>
</div>
<div class="alert alert-danger" role="alert" v-else>Aucun livre sélectionné</div>
<div class="row" v-if="book.id">
<h2 v-if="book.series">
<span class="glyphicon glyphicon-list"></span>
Serie
</h2>
<div v-if="book.series">
{{ book.series.name }}
<span class="badge">{{ book.series.idx }}</span>
</div>
</div>
</div>
<script src="js/vue.min.js"></script>
<script src="js/book.min.js"></script>

34
book.js
View File

@ -14,8 +14,40 @@ var app = new Vue({
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);
},
bookSuccess: function(resp) {
this.book = resp;
},
loadBook: function() {
console.log(this.urlParams.id);
if (this.urlParams.id)
this.sendQuery('cgi-bin/bouquins/books/' + this.urlParams.id, this.stdError, this.bookSuccess);
}
},
created: function() {

View File

@ -25,7 +25,7 @@
<th>Serie</th>
</tr>
<tr v-for="book in books">
<td><span class="glyphicon glyphicon-book"></span>{{ book.title }}</td>
<td><span class="glyphicon glyphicon-book"></span><a :href="'book.html?id='+book.id">{{ book.title }}</a></td>
<td>
<template v-for="author in book.authors">
<span class="glyphicon glyphicon-user"></span>{{ author.name }}