meutel/bouquins-bchs
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Display books

Browse Source
This commit is contained in:
Meutel 2016-12-30 18:18:11 +01:00
parent f1b834f46f
commit df84659cdb
2 changed files with 36 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
index.html
View File

@ -13,7 +13,22 @@
</head>
<body>
<h1>Bouquins</h1>
<div id="app"> {{ message }} </div>
<div id="app">
<h2>{{ booksCount }} books</h2>
<table>
<tr v-for="book in books">
<td>{{ book.id }}</td>
<td>{{ book.title }}</td>
<td>{{ book.series ? book.series.name : '' }}</td>
<td>{{ book.series ? book.series.idx : '' }}</td>
<td>
<template v-for="author in book.authors">
{{ author.name }}
</template>
</td>
</tr>
</table>
</div>
<script src="vue.min.js"></script>
<script src="index.js"></script>
</body>

102
index.js
View File

@ -1,42 +1,23 @@
/* $Id$ */
/*
* Copyright (c) 2016 Kristaps Dzonsons <kristaps@bsd.lv>
*
* Permission to use, copy, modify, and distribute this software for any
* purpose with or without fee is hereby granted, provided that the above
* copyright notice and this permission notice appear in all copies.
*
* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
* WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
* ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
* WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
* ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
* OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
*/
(function(root) {
'use strict';
/*
* Send a GET query to the give url.
* Invokes "setup" before running anything, "error" upon network
* error (with the HTTP error code and response text), and
* success with the response text on 200.
*/
function sendQuery(url, setup, error, success)
function sendQuery(url, error, success)
{
var xmh = new XMLHttpRequest();
var v;
if (null !== setup)
setup();
xmh.onreadystatechange = function() {
v = xmh.responseText;
if (xmh.readyState === 4 &&
xmh.status === 200) {
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(v);
success(res);
} else if (xmh.readyState === 4) {
if (null !== error)
error(xmh.status, v);
@ -47,72 +28,29 @@
xmh.send(null);
}
/*
* Send a POST query to the give url with the form.
* Invokes "setup" before running anything (given the form),
* "error" upon network error (with the form, HTTP error code,
* and response text), and success with the form and response
* text on 200.
*/
function sendForm(form, setup, error, success)
{
var xmh = new XMLHttpRequest();
var v;
if (null !== setup)
setup(form);
xmh.onreadystatechange=function() {
v = xmh.responseText;
if (xmh.readyState === 4 &&
xmh.status === 200) {
if (null !== success)
success(form, v);
} else if (xmh.readyState === 4) {
if (null !== error)
error(form, xmh.status, v);
}
};
xmh.open(form.method, form.action, true);
xmh.send(new FormData(form));
return(false);
}
function stdError(code, resp) {
console.log("ERREUR " + code + ": " + resp);
console.log('ERROR ' + code + ': ' + resp);
}
function indexSuccess(resp) {
var res;
try {
res = JSON.parse(resp);
} catch (error) {
console.log('JSON parse fail: ' + resp);
return(null);
}
app.message = res.length + " books";
app.books = resp;
app.booksCount = app.books.length;
}
/*
* Configure the index page.
*/
function loadIndex()
{
sendQuery('cgi-bin/bouquins/books',
null, stdError, indexSuccess);
function loadIndex() {
sendQuery('cgi-bin/bouquins/books', stdError, indexSuccess);
}
root.loadIndex = loadIndex;
})(this);
document.addEventListener('DOMContentLoaded', function() {
loadIndex();
});
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
books: [],
booksCount: 0
},
mounted: function() {
loadIndex();
}
})