From 6600006df4b69a2b30e74931b5c69d187f89a6cb Mon Sep 17 00:00:00 2001
From: Max Ogden <max@maxogden.com>
Date: Thu, 30 Jun 2011 20:36:35 -0700
Subject: [PATCH] wiring up pagesize controls

---
 attachments/pages/index.html     |  3 --
 attachments/script/removalist.js | 70 +++++++++++++++++++++++---------
 attachments/script/site.js       | 62 +++++++++++-----------------
 3 files changed, 73 insertions(+), 62 deletions(-)

diff --git a/attachments/pages/index.html b/attachments/pages/index.html
index 0c2dc40d..5bfeb479 100644
--- a/attachments/pages/index.html
+++ b/attachments/pages/index.html
@@ -26,9 +26,6 @@
 			<a href='https://github.com/maxogden/removalist'>Fork this project on Github</a>. The <a href="http://github.com/michenriksen/css3buttons">pretty CSS3 Buttons</a> were created by <a href="http://michaelhenriksen.dk" title="Website of Michael Henriksen">Michael Henriksen</a>
 		</footer>
 	</div>
-
-  <script type='text/mustache' id="homeTemplate">
-  </script>
   
   <script type='text/mustache' id="dbTemplate">
     <div id="database" class="single_database">
diff --git a/attachments/script/removalist.js b/attachments/script/removalist.js
index 42cbb7ae..66101c88 100644
--- a/attachments/script/removalist.js
+++ b/attachments/script/removalist.js
@@ -22,35 +22,65 @@ var removalist = function() {
       rows: tableRows,
       headers: app.headers
     })
-    
+    app.newest = rows[0].id;
+    app.oldest = rows[rows.length - 1].id;
   }
   
-  function gotHeaders( headers ) {
-    app.headers = headers;
-    app.csvUrl = app.baseURL + 'api/csv?headers=' + escape(JSON.stringify(headers));
-    util.render( 'actions', 'project-controls', $.extend({}, app.dbInfo, {url: app.csvUrl}) );          
+  function getPageSize() {
+    return $(".viewpanel-pagesize .selected").text();
   }
   
-  function gotDb( dbInfo ) {
-
-    app.dbInfo = dbInfo;
+  function fetchRows(id) {
     
-    $.extend(app.dbInfo, {
-      "host": window.location.host,
-      "disk_size": formatDiskSize(app.dbInfo.disk_size)
+    var query = {
+      "limit" : getPageSize()
+    }
+    
+    if ( id ) {
+      $.extend( query, {
+        "startkey_docid": id,
+        "skip": 1
+      })
+    }
+    
+    var req = {url: app.baseURL + 'api/rows?' + $.param(query)};
+    
+    couch.request(req).then(function(response) {
+      removalist.renderRows(response.rows);
     });
-            
-    if( util.inURL("_rewrite", app.baseURL) ) app.dbInfo.db_name = "api";
-    
-    util.render('tableContainer', app.container, app.dbInfo);
-    util.render('title', 'project-title', app.dbInfo);
-    util.render( 'generating', 'project-controls' );    
+
+  }
+  
+  function bootstrap() {
+    couch.request({url: app.baseURL + "api"}).then(function( dbInfo ) {
+
+      app.dbInfo = dbInfo;
+
+      $.extend(app.dbInfo, {
+        "host": window.location.host,
+        "disk_size": formatDiskSize(app.dbInfo.disk_size)
+      });
+
+      if( util.inURL("_rewrite", app.baseURL) ) app.dbInfo.db_name = "api";
+
+      util.render('tableContainer', app.container, app.dbInfo);
+      util.render('title', 'project-title', app.dbInfo);
+      util.render( 'generating', 'project-controls' );    
+      
+      couch.request({url: app.baseURL + 'api/headers'}).then(function ( headers ) {
+        app.headers = headers;
+        app.csvUrl = app.baseURL + 'api/csv?headers=' + escape(JSON.stringify(headers));
+        util.render( 'actions', 'project-controls', $.extend({}, app.dbInfo, {url: app.csvUrl}) );    
+        fetchRows();
+      })
+    })
   }
   
   return {
     formatDiskSize: formatDiskSize,
-    renderRows: renderRows,
-    gotHeaders: gotHeaders,
-    gotDb: gotDb
+    bootstrap: bootstrap,
+    fetchRows: fetchRows,
+    getPageSize: getPageSize,
+    renderRows: renderRows
   };
 }();
\ No newline at end of file
diff --git a/attachments/script/site.js b/attachments/script/site.js
index e1ebba3f..7c2c0b97 100644
--- a/attachments/script/site.js
+++ b/attachments/script/site.js
@@ -4,53 +4,36 @@ var app = {
 };
 
 app.handler = function(route) {
-  route = route.path.slice(1, route.path.length);
-  if (route.length < 1) route = "home";
-  util.render( route, app.container);
-  window.scrollTo(0, 0);
+  if (route.params && route.params.route) {
+    var path = route.params.route;
+    app.routes[path](route.params.id);
+  } else {
+    app.routes['home']();
+  }  
 };
 
-// var query = {
-//   "descending" : true,
-//   "limit" : 20,
-//   success: function( data ) {
-//     if( data.rows.length === 0 ) {
-//       monocles.oldestDoc = false;
-//       monocles.hideLoader();
-//       posts = [];
-//     } else {
-//       monocles.oldestDoc = data.rows[ data.rows.length - 1 ];
-//       posts = data.rows;
-//     }
-//     renderStream();
-//   }
-// }
-// 
-// if ( opts.offsetDoc ) {
-//   $.extend( query, {
-//     "startkey": opts.offsetDoc.key,
-//     "startkey_docid": opts.offsetDoc.id,
-//     "skip": 1
-//   })
-// }
-
-app.after = {
+app.routes = {
   home: function() {
-
-    couch.request({url: app.baseURL + "api"}).then(function(db) {
-      removalist.gotDb(db);
-      couch.request({url: app.baseURL + 'api/headers'}).then(function(headers) {
-        removalist.gotHeaders(headers);
-        couch.request({url: app.baseURL + 'api/rows?limit=10'}).then(function(response) {
-          removalist.renderRows(response.rows);
-        });
-      });
-    });
+    removalist.bootstrap();
     
     $( '.csv' ).live('click', ( function( e ) {      
       window.location.href = app.csvUrl;
       e.preventDefault();
     }))
+    
+  },
+  page: function(id) {
+    removalist.getPageSize()
+  }
+}
+
+app.after = {
+  tableContainer: function() {
+    $( '.viewPanel-pagingControls-page' ).click(function( e ) {      
+      $(".viewpanel-pagesize .selected").removeClass('selected');
+      $(e.target).addClass('selected');
+      removalist.fetchRows(app.newest);
+    });
   }
 }
 
@@ -58,6 +41,7 @@ app.sammy = $.sammy(function () {
   this.get('', app.handler);
   this.get("#/", app.handler);
   this.get("#:route", app.handler);
+  this.get("#:route/:id", app.handler);
 });
 
 $(function() {