提交: 5d6d1591ce2fca6012f8c45c107a283747d3fc83 - grrreader (git)

Simple RSS Reader inspired by Gxxgle Reader

Commit MetaInfo

• 修订版: 5d6d1591ce2fca6012f8c45c107a283747d3fc83 (tree)
• 时间: 2013-07-15 18:21:48
• 作者: hylom <hylom@hylo...>
• Commiter: hylom

Log Message

implement paging...

更改概述

• modified: client/public/js/grdc.js
• modified: client/routes/index.js
• modified: client/views/index.jade

差异

--- a/client/public/js/grdc.js
+++ b/client/public/js/grdc.js
@@ -4,6 +4,40 @@
 (function () {
   // private functions
 
+  function updatePager(total, skip, count) {
+    var totalPage = Math.floor((total - 1) / count + 1);
+    var currentPage = (skip == 0) ? 0 : (skip - 1) / count + 1;
+    var elem = '';
+
+    console.log(skip + ',' + count + '/' + total);
+    console.log(currentPage + '/' + totalPage);
+
+    var paging = $('#page-navigation');
+    paging.empty();
+
+    var pagingFirst = '<li id="paging-first"><a href="#">«</a></li>';
+    paging.append(pagingFirst);
+
+    if (currentPage > 0) {
+      elem = '<li><a href="#">'
+        + currentPage + '</a></li>';
+      paging.append(elem);
+    }
+
+    elem = '<li class="active"><a href="#">' + (currentPage + 1)
+      + '</a></li>';
+    paging.append(elem);
+
+    if (currentPage != totalPage) {
+      elem = '<li><a href="#">'
+        + (currentPage + 2) + '</a></li>';
+      paging.append(elem);
+    }
+
+    var pagingLast = $('<li id="paging-last"><a href="#">»</a></li>');
+    paging.append(pagingLast);
+  }
+
   function updateContentsPane(data) {
     var pane = $('#contentsPane');
     pane.empty();
@@ -22,43 +56,54 @@
     ;
     var tableRows = Hogan.compile(tmpl);
 
-    for (var i = 0; i < data.length; i++) {
-      var item = data[i];
+    var contents = data.contents;
+    for (var i = 0; i < contents.length; i++) {
+      var item = contents[i];
       var elem = tableRows.render(item);
       pane.append(elem);
     }
+    pane.attr('skip', data.skip);
+    pane.attr('count', data.count);
+    updatePager(data.total, data.skip, data.count);
+  }
+
+  function showFeed(feedId, skip, count) {
+    skip = skip || 0;
+    count = count || 20;
+    feedId = Number(feedId);
+    if (isNaN(feedId)) {
+      return
+    }
+    var url = '/api/feed/' + feedId + '/contents'
+      + '?skip=' + skip + '&count=' + count;
+    $.getJSON(url, updateContentsPane);
   }
 
-  function loadFeed(event) {
+  // Load feed
+  $(document).on('click', ".feedItem", function (ev) {
     var feedId = $(event.target).attr('feed-id');
     var feedTitle = $(event.target).text();
     if (feedId !== undefined) {
-      var url = '/api/feed/' + feedId + '/contents';
-      $.getJSON(url, updateContentsPane);
+      showFeed(feedId);
     }
     $('#feedTitle').text(feedTitle);
     var pane = $('#contentsPane');
     pane.empty();
     return false;
-  }
+  });
 
-  function toggleContentBody(event) {
+  // Toggle feed contents
+  $(document).on('click', ".contentTitleString", function (ev) {
     var contentId = $(event.target).attr('cid');
-    console.log('click header ' + contentId);
     if (contentId !== undefined) {
       $('#cbody' + contentId).toggle();
     }
     return false;
-  }
-
-  $(document).on('click', ".feedItem", loadFeed);
-  $(document).on('click', ".contentTitleString", toggleContentBody);
+  });
 
+  // When page loaded, show 'All Feeds'
   $(document).ready(function () {
-    var feedId = 0;
-    var url = '/api/feed/' + feedId + '/contents';
-    $.getJSON(url, updateContentsPane);
+    showFeed(0);
   });
-}).apply();
-
 
+}).apply();

--- a/client/routes/index.js
+++ b/client/routes/index.js
@@ -87,14 +87,25 @@ exports.feedContent = function (req, res) {
 };
 
 exports.feedContents = function (req, res) {
+/*
+  returns json:
+  {
+    totalCount: Number,
+    skip: Number,
+    itemCount: Number,
+    contents: [
+    ]
+*/
   var feedId = req.params.fid;
   var connection = mysql.createConnection(config.mysql);
-  var skip = req.query.skip || 0;
-  var count = req.query.count || 20;
+  var skip = Number(req.query.skip) || 0;
+  var count = Number(req.query.count) || 20;
 
   if (feedId === '0') {
     // show all feeds
     // TODO: if use multiple users, need checking subscribing feeds
+    var sqlCount = 'SELECT COUNT(content_id) FROM feed_contents;';
+    var paramsCount = [];
     var sql = 'SELECT content_id, feed_id, title, url, body, timestamp'
       + '  FROM feed_contents'
       + '  ORDER BY timestamp DESC'
@@ -102,6 +113,9 @@ exports.feedContents = function (req, res) {
       + ';';
     var params = [skip, count];
   } else {
+    var sqlCount = 'SELECT COUNT(content_id) FROM feed_contents'
+      + ' WHERE feed_id = ?;'
+    var paramsCount = [feedId];
     var sql = 'SELECT content_id, feed_id, title, url, body, timestamp'
       + '  FROM feed_contents'
       + '  WHERE feed_id = ?'
@@ -112,8 +126,7 @@ exports.feedContents = function (req, res) {
   }
 
   connection.connect();
-  connection.query(sql, params, function (err, rows, fields) {
-    connection.end();
+  connection.query(sqlCount, paramsCount, function (err, rows, fields) {
     if (err) {
       logger.debug("query error at index.feedContents: " + util.inspect(err));
       res.send(500);
@@ -123,9 +136,28 @@ exports.feedContents = function (req, res) {
       res.send(404);
       return;
     }
-    for (var i = 0; i < rows.length; i++) {
-      rows[i].formatedTimestamp = formatTimestamp(rows[i].timestamp);
-    }
-    res.json(rows);
+    var totalCount = rows[0]['COUNT(content_id)'];
+    connection.query(sql, params, function (err, rows, fields) {
+      connection.end();
+      if (err) {
+        logger.debug("query error at index.feedContents: " + util.inspect(err));
+        res.send(500);
+        return;
+      }
+      if (rows.length == 0) {
+        res.send(404);
+        return;
+      }
+      for (var i = 0; i < rows.length; i++) {
+        rows[i].formatedTimestamp = formatTimestamp(rows[i].timestamp);
+      }
+      var result = {
+        "total": totalCount,
+        "skip": skip,
+        "count": count,
+        "contents": rows
+      }
+      res.json(result);
+    });
   });
 };

--- a/client/views/index.jade
+++ b/client/views/index.jade
@@ -15,6 +15,6 @@ block content
         table.table#contentsPane
         .pagination.pagination-centered
           ul#page-navigation
-            li.disabled: a(href='#') Prev
+            li#paging-first.disabled: a(href='#') «
             li.active: a(href='#') 1
-            li.disabled: a(href='#') Next
+            li#paging-last.disabled: a(href='#') »