Download link

book.html

@@ -14,17 +14,26 @@
     <div class="container" id="app">
       <div class="page-header" v-if="book.id">
         <div class="row">
+          <div class="col-xs-12 col-md-9">
             <h1>
               <span class="glyphicon glyphicon-book"></span>
               {{ book.title }}
             </h1>
-          <!-- TODO download -->
+          </div>
+          <div class="col-xs-12 col-md-3 text-right">
+            <template v-for="data in book.data">
+            <a v-bind:href="bookLink(book, data)" class="btn btn-success">
+              <span class="glyphicon glyphicon-download-alt"></span> Télécharger
+              {{ data.format }} ({{ formatBytes(data.size) }})
+            </a>
+            </template>
+          </div>
         </div>
       </div>
       <div class="alert alert-danger" role="alert" v-else>Aucun livre sélectionné</div>
       <div class="row" v-if="book.id">
         <h2>
-          <span class="glyphicon glyphicon-user"></span> Auteur{{ book.authors.size > 1 ? 's' : '' }}
+          <span class="glyphicon glyphicon-user"></span> Auteur{{ book.authors.length > 1 ? 's' : '' }}
         </h2>
         <ul>
           <li v-for="author in book.authors">{{ author.name }}</li>
@@ -39,7 +48,7 @@
         </div>
         
         <h2><span class="glyphicon glyphicon-globe"></span> Langue</h2>
-        <div>{{ book.lang }}</div>
+        <ul><li>{{ book.lang.toUpperCase() }}</li></ul>
 
         <!-- TODO tags -->
 

book.js

@@ -42,6 +42,16 @@ var app = new Vue({
     stdError: function(code, resp) {
       console.log('ERROR ' + code + ': ' + resp);
     },
+    formatBytes: function(bytes) {
+      if(bytes == 0) return '0';
+      var k = 1024; // or 1024 for binary
+      var sizes = ['Octets', 'Ko', 'Mo', 'Go', 'To', 'Po', 'Eo', 'Zo', 'Yo'];
+      var i = Math.floor(Math.log(bytes) / Math.log(k));
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    },
+    bookLink: function(book, data) {
+      return '/calibre/' + encodeURI(book.path) + '/' + encodeURI(data.name) + '.' + data.format.toLowerCase();
+    },
     bookSuccess: function(resp) {
       this.book = resp;
     },