Tweak html layout to improve formatting.

[quanweb.git] / app / lib.js

diff --git a/app/lib.js b/app/lib.js
index 7175471c084b4822b8f479e84b91858c78d079e8..5e2ecf830b6ec52330446cf61f0dae3dd6ca06d8 100644 (file)
--- a/app/lib.js
+++ b/app/lib.js
@@ -6,7 +6,8 @@ g_state = {
   count: 0,
   first: 0,
   ids: [],
-  last: 0,
+  last: (-1),
+  pageSize: 100
 }
 
 function constructSearchUrl() {
@@ -40,9 +41,27 @@ function constructSearchUrl() {
 }
 
 function onNext() {
+  if (g_state.last < (g_state.count - 1)) {
+    g_state.first += g_state.pageSize;
+    g_state.last += g_state.pageSize;
+    if (g_state.last >= g_state.count) {
+      g_state.last = g_state.count - 1;
+    }
+
+    refreshData();
+  }
 }
 
 function onPrev() {
+  if (g_state.first > 0) {
+    g_state.first -= g_state.pageSize;
+    if (g_state.first < 0) {
+      g_state.first = 0;
+    }
+    g_state.last = g_state.first + g_state.pageSize;
+    
+    refreshData();
+  }
 }
 
 function onSearch() {
@@ -58,10 +77,11 @@ function onSearch() {
   .then((jsonValue) => {
     console.log('JSON response:  ', jsonValue);
     g_state.ids = jsonValue
+    g_state.count = g_state.ids.length;
     g_state.first = 0
     g_state.last = (g_state.ids.length) - 1;
-    if (g_state.last > 100) {
-      g_state.last = 100;
+    if (g_state.last > g_state.pageSize) {
+      g_state.last = g_state.pageSize;
     }
     refreshData()
   })
@@ -78,7 +98,7 @@ function refreshData() {
   var i;
   var url = '/info/?ids=';
   for (i = g_state.first; i <= g_state.last; ++i) {
-    if (i > 0) {
+    if (i > g_state.first) {
       url += ',';
     }
     url += g_state.ids[i];
@@ -102,12 +122,16 @@ function refreshData() {
 function refreshLayout() {
   var i;
   var html = '';
-  for (i = g_state.first; i <= g_state.last; ++i) {
+  var limit = g_state.last - g_state.first;
+  for (i = 0; i <= limit; ++i) {
     var book = g_state.cache[i];
     html += bookHtml(book);
   }
 
   document.getElementById('books').innerHTML = html;
+  document.getElementById('first').innerHTML = (g_state.first + 1);
+  document.getElementById('last').innerHTML = (g_state.last + 1);
+  document.getElementById('count').innerHTML = g_state.count;
 }
 
 function report(message) {
@@ -116,10 +140,28 @@ function report(message) {
 
 function bookHtml(book) {
   console.log('bookHtml(): ', book);
-  var result = '<div class="book"><table><tr><td><a href="/book/' + book.Id + '">'
-             + '<img class="cover-thumb" src="/download/' + book.CoverId + '"/></a></td>'
-             + '<td><span class="popup">' + book.Description + '</span></td>'
-             + '</tr></table></div>';
+  var result = '<div class="book">'
+             +   '<table>'
+             +     '<tr>'
+             +       '<td><a href="/book/' + book.Id + '">';
+  if (0 == book.CoverId) {
+    result  +=          '(No cover available)'
+  } else {
+    result  +=          '<img class="cover-thumb" src="/download/' + book.CoverId + '"/>'
+  }
+  result    +=       '</a></td>'
+             +       '<td>'
+             +         '<p><b>' + book.Title + '</b></p>'
+             +         '<p>'
+             +           '<i>' + book.AuthorReading + '</i>';
+  if (typeof(book.SeriesName) !== 'undefined' && book.SeriesName.length > 0) {
+    result  +=           '<br/><i>' + book.SeriesName + ' ' + book.Volume + '</i>';
+  }
+  result    +=         '</p>'
+             +       '</td>'
+             +     '</tr>'
+             +   '</table>'
+             + '</div>';
   return result;
 }