Skip to content
Permalink
Browse files

add some basic paging of results

  • Loading branch information...
brandonaaron committed Nov 7, 2013
1 parent 094060a commit 813d0b0f3994ee72e6c90c411ef12985e65d93ad
Showing with 84 additions and 19 deletions.
  1. +15 −3 app.js
  2. +3 −0 public/css/stuffs.css
  3. +7 −0 public/css/stuffs.styl
  4. +55 −3 public/js/stuffs.js
  5. +4 −13 views/home.jade
18 app.js
@@ -70,9 +70,21 @@ var Collector = mongoose.model('Collector', CollectorSchema);

app.get('/', function(req, res) {
var agent = useragent.parse(req.headers['user-agent']);
Collector.find().sort('-_id').limit(15).exec(function(err, docs) {
if (err) res.send(500);
else res.render('home', { agent: agent, records: docs });
res.render('home', { agent: agent });
});

app.get('/results.json', function(req, res) {
var pageSize = 10;
var page = parseInt(req.param('page'), 10) || 1;

Collector.find().sort('-_id').skip(pageSize * (page-1)).limit(pageSize).exec(function(err, docs) {
if (err) res.json(500);
else {
Collector.count().exec(function(err, count) {
if (err) res.json(500)
else res.json({ count: count, page: page, pages: Math.ceil(count/pageSize), results: docs });
});
}
});
});

@@ -9,4 +9,7 @@ html,body{height:100%}
.collector .yourresults dl dd{float:right;clear:right}
.collector .submit{position:absolute;top:138px;left:10px;right:10px;text-align:center}
.collector .useragent{position:absolute;bottom:10px;left:10px;right:10px;font-size:12px;text-align:center;color:#999}
.results{margin-bottom:20px;}
.results tfoot{text-align:center;}
.results tfoot .btn{margin:5px}
footer{height:25px;background-color:#f5f5f5;font-size:11px;text-align:center;padding-top:5px}
@@ -52,6 +52,13 @@ html, body
text-align: center
color: #999

.results
margin-bottom: 20px
tfoot
text-align: center
.btn
margin: 5px


footer
height: 25px
@@ -4,6 +4,8 @@
setup: function() {
this.$collector = $('.collector');
this.$instruction = this.$collector.find('.instruction');
this.$resultsbody = $('.results tbody');
this.$resultsfoot = $('.results tfoot');
this.$yourresults = $('.yourresults');
this.$yourresultsmin = this.$yourresults.find('.yourresults-min');
this.$yourresultsmax = this.$yourresults.find('.yourresults-max');
@@ -26,16 +28,66 @@
};
this.$collector.on('mousewheel', $.proxy(this, 'collection'));
this.$submit.on('click', '.btn', $.proxy(this, 'submitResults'));
this.$resultsfoot.on('click', '.prev', $.proxy(this, 'prevResults'));
this.$resultsfoot.on('click', '.next', $.proxy(this, 'nextResults'));
this.currentPage = 1;
this.fetchResults();
},

prevResults: function() {
this.fetchResults(this.currentPage - 1);
},

nextResults: function() {
this.fetchResults(this.currentPage + 1);
},

fetchResults: function(page) {
this.currentPage = page || 1;
$.ajax({
type: 'GET',
url: '/results.json',
data: { page: this.currentPage },
success: $.proxy(this, 'buildResults')
});
},

buildResults: function(data) {
var html = '';
$.each(data.results, $.proxy(function(i, result) {
html += '<tr>';
html += '<td>' + result.useragent.os.family + '</td>';
html += '<td>' + result.useragent.family + ' ' + result.useragent.major + '</td>';
html += '<td>' + result.delta.normalized.min + ', ' + result.delta.raw.min + '</td>';
html += '<td>' + result.delta.normalized.max + ', ' + result.delta.raw.max + '</td>';
html += '<td>' + result.delta.resolution + '</td>';
html += '</tr>';
}, this));
this.$resultsbody.html(html);
this.buildPager(data);
},

buildPager: function(data) {
if (data.pages <= 1) return;
var html = '<tr><td colspan="5">';
if (data.pages > 1 && data.page <= data.pages) {
html += '<button class="btn btn-default btn-xs prev">Prev</button>';
}
if (data.page >= 1 && data.page < data.pages) {
html += '<button class="btn btn-default btn-xs next">Next</button>';
}
html += '</td></tr>';
this.$resultsfoot.html(html);
},

submitResults: function(event) {
this.disableSubmit();
$.ajax({
type: 'POST',
data: this.data,
complete: function() {
console.log(arguments);
}
success: $.proxy(function() {
this.fetchResults();
}, this)
});
console.log(event);
},
@@ -20,24 +20,15 @@ block content
button(type="button", class="btn btn-default btn-xs", disabled="disabled") Submit Results
.useragent("data-ua"=agent.toJSON())= agent.toString()
.col-lg-9.col-md-9.col-sm-8
h2 Existing Results
table.table-condensed.table-striped.table-responsive.table-bordered
table.results.table-condensed.table-striped.table-responsive.table-bordered
thead
tr
th OS
th Browser
th Min <small>(Norm, Raw)</small>
th Max <small>(Norm, Raw)</small>
th Resolution
tfoot
tbody
each rec in records
tr
td
= rec.useragent.os.family
small= ' (' + rec.useragent.os.major + '.' + rec.useragent.os.minor + '.' + rec.useragent.os.patch + ')'
td
= rec.useragent.family
small= ' (' + rec.useragent.major + '.' + rec.useragent.minor + '.' + rec.useragent.patch + ')'
td= rec.delta.normalized.min + ', ' + rec.delta.raw.min
td= rec.delta.normalized.max + ', ' + rec.delta.raw.max
td= rec.delta.resolution
tr
td(colspan="5") Loading Results...

0 comments on commit 813d0b0

Please sign in to comment.
You can’t perform that action at this time.