Rendering progress.

src/sidebar.html

@@ -47,9 +47,9 @@
         <span id="book-name"></span>
       </p>
       <p class="bg-success">
-        <span ><strong>Chapters: </strong></span>
+        <span ><strong>Progress: </strong></span>
       </p>
-      <ul id="book-chapter-list" class="list-group">
+      <ul id="book-file-list" class="list-group">
       </ul>
     </div>
 

src/sidebar.js

@@ -1,11 +1,3 @@
-function onError(error) {
-    console.error(`Error: ${error}`);
-    $('#error-message').text(`Error: ${error}`);
-    $('#error-message').show();
-    $('#loading').hide();
-    $('#book-info').hide();
-}
-
 function getCurrentTab() {
     console.debug("Querying active tab.");
     var queryInfo = {
@@ -121,6 +113,7 @@ class Book{
             }))
         downloads.push(
             Promise.map(this.book_info.chapters, (chapter) => {
+                renderProgress(`${chapter}`)
                 return this.downloadJson(chapter)
                         .then((json) => {
                              return this.extractChapterAssets(json)
@@ -155,6 +148,7 @@ class Book{
 
     downloadContent(){
         return Promise.map(Object.keys(this.book_files), (url) => {
+            renderProgress(`${this.book_files[url].filename}`)
             return this.downloadResource(url)
                     .then((res) => {
                         if (res.ok){
@@ -178,13 +172,26 @@ class Book{
     }
 }
 
-function renderInfo(book){
+class SidebarPage{
+
+    constructor() {
+        $('#loading').show();
+        $('#error-message').hide();
+        $('#book-info').hide();
+        $("#book-file-list").empty();
+    }
+
+    renderInfo(book){
         $("#book-name").text(book.book_info.title);
         $("#book-cover").attr("src", book.book_info.cover);
         $('#book-info').show();
-}
+    }
 
-function renderChapterList(book){
+    renderDone(){
+        $('#loading').hide();
+    }
+
+    renderChapterList(book){
         // Add chapters to UI
         for (let chapter_idx in book.chapter_list) {
             let chapter = book.chapter_list[chapter_idx];
@@ -195,8 +202,27 @@ function renderChapterList(book){
             $("#book-chapter-list").append(chapter_dom);
         }
         $('#loading').hide();
+    }
 }
 
+function onError(error) {
+    console.error(`Error: ${error}`);
+    $('#error-message').text(`Error: ${error}`);
+    $('#error-message').show();
+    $('#loading').hide();
+    $('#book-info').hide();
+}
+
+function renderProgress(txt){
+    // Add chapters to UI
+    var progress_dom = $("<li></li>")
+                .addClass("list-group-item")
+                .html(txt)
+    $("#book-file-list").prepend(progress_dom);
+}
+
+
+
 function createEpub(book, epub){
     epub.addFile("book.json", JSON.stringify(book, null, '\t'))
     for (let url in book.book_files){
@@ -207,9 +233,7 @@ function createEpub(book, epub){
 
 function onDownloadBookClicked(){
     console.info("Begin book download.");
-    $('#loading').show();
+    page = new SidebarPage()
-    $('#error-message').hide();
-    $('#book-info').hide();
 
     getCurrentTab()
     .then(extractBookId, onError)
@@ -217,9 +241,9 @@ function onDownloadBookClicked(){
         epub = new EpubWriter();
         book = new Book(book_id);
         book.downloadBookInfo()
-        .then(() => { renderInfo(book); })
+        .then(() => { page.renderInfo(book); })
         // .then(() => { return book.downloadChapterList(); })
-        // .then(() => { return renderChapterList(book); })
+        // .then(() => { return page.renderChapterList(book); })
         .then(() => { return book.downloadMetaContent(); })
         .then(() => { return book.downloadContent(); })
         .then(() => { return createEpub(book, epub); })
@@ -230,8 +254,12 @@ function onDownloadBookClicked(){
                 + title.replace(/[^a-z0-9]/gi, '_').toLowerCase()
                 + ".zip"
             console.log(`Zip file name ${filename}`)
+            renderProgress(`Saved to ${filename}`)
             let url = window.URL.createObjectURL(file)
-            browser.downloads.download({ "filename" : filename, url : url})
+            return browser.downloads.download({ "filename" : filename, url : url})
+        })
+        .then(() =>{
+            page.renderDone();
         })
 
     }, onError);