Skip to content

Commit

Permalink
Using Backbone Paginator to speed up list loading
Browse files Browse the repository at this point in the history
  • Loading branch information
@mackrauss
mackrauss committed Oct 1, 2014
1 parent 63544d5 commit b67e170
Show file tree
Hide file tree
Showing 6 changed files with 145 additions and 50 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.DS_Store
.project
node_modules
bower_components
config.json
10 changes: 7 additions & 3 deletions installations-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div data-role="page" id="installations-list-page">
<!--<div data-theme="a" data-role="header">
<h5>List of Installations</h5>
</div>-->
</div>-->
<div class="header-with-buttons ui-bar ui-bar-a">
<div class="overflow-button-container web-only hidden">
<a class="overflow-button web-only" data-role="button" data-theme="e" data-icon="info" data-iconpos="notext"
Expand All @@ -20,7 +20,7 @@ <h5>List of Installations</h5>
</div>
<div class="installation-count-container">
<span class="installation-count-text">Total # of installations reported: <span class="installation-count" /></span>
</div>
</div>

<div data-role="content">
<ul data-role="listview" class="installations-list">
Expand All @@ -34,7 +34,11 @@ <h5>List of Installations</h5>
<a class="add-report-button" data-role="button" data-inline="true" data-theme="b" data-icon="plus" data-iconpos="left" href="report-selection.html">
Add Report
</a>
</div>

<a class="load-more-installations" data-role="button" data-inline="true" data-theme="b" data-icon="plus" data-iconpos="left">
Load more
</a>
</div>
</div>

</body>
Expand Down
11 changes: 11 additions & 0 deletions js/libs/deps.postinit.BUNDLE.js
View file

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion js/libs/jsbundler.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
'jquery.mobile-1.3.2.min',
'jquery.mobile.autoComplete-1.4.3',
'underscore-1.6.0.min',
'backbone-1.1.2.min'
'backbone-1.1.2.min',
'../../bower_components/backbone.paginator/lib/backbone.paginator.min'
]
}

Expand Down
4 changes: 2 additions & 2 deletions js/veos.model.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -308,9 +308,9 @@

});

model.Installations = Backbone.Collection.extend({
model.Installations = Backbone.PageableCollection.extend({
model: model.Installation,
url: model.baseURL + '/installations.json?per_page=500'
url: model.baseURL + '/installations.json'
});

model.NearbyInstallations = Backbone.Collection.extend({
Expand Down
166 changes: 122 additions & 44 deletions js/veos.view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1060,6 +1060,63 @@



/**
* Show on row in Installation List
*/
self.InstallationListRow = Backbone.View.extend({
initialize: function () {

},

render: function () {
var installation = this.model;

var buttonText = '';
var ownerName;
if (installation.get('owner_name')) {
buttonText = "<span class='owner_name'>" + installation.get('owner_name') + "</span><br/><span class='loc_description'>" + installation.getLocDescription() + "</span>";
} else {
buttonText = "<span class='owner_name unknown'>Unknown Owner</span><br/><span class='loc_description'>" + installation.getLocDescription() + "</span>";
}

var complianceLevel;
if (installation.get('compliance_level')) {
if (installation.get('compliance_level') === 'non_compliant') {
complianceLevel = "<span class='compliance no-sign-color'></span>";
} else if (installation.get('compliance_level') === 'low_compliant') {
complianceLevel = "<span class='compliance missing-info-color'></span>";
} else if (installation.get('compliance_level') === 'min_compliant') {
complianceLevel = "<span class='compliance min-compliant-color'></span>";
} else if (installation.get('compliance_level') === 'compliant') {
complianceLevel = "<span class='compliance compliant-color'></span>";
} else {
complianceLevel = "<span class='compliance-unknown'></span>";
}
}

var thumb = "";

// the installations.json now contains photo URL so this got easier and much faster
if (installation.has('photos') && installation.get('photos').length > 0) {
var photosOfInstallation = installation.get('photos');
var photo = _.first(photosOfInstallation);
var photoID = photo.id;
var thumbUrl = veos.model.baseURL + photo.thumb_url;

//console.log('Retrieve photo thumb URL: '+thumbUrl+' for photo with ID: '+photoID);
thumb = "<img class='list-picture photo-"+photoID+"' src='"+thumbUrl+"' />";
}

var item = jQuery("<a class='relative' href='installation-details.html?id="+installation.get('id')+"'>"+complianceLevel+thumb+buttonText+"</a>");
// item.data('installation', installation); // add the installation object so that we can retrieve it in the click event
// item.attr('data-installationId', installation.get('id'));
var li = jQuery("<li />");
li.append(item);

return li;
}
});

/**
InstallationList
Shows a list of Installations.
Expand All @@ -1073,7 +1130,8 @@
// veos.currentInstallation = jQuery(ev.target).data('installation'); // next used in the report-edit delegate
// var id = jQuery(ev.target).attr('data-installationId');
// alert(id);
}
},
'click .load-more-installations': 'loadMoreInstallations'
},

initialize: function () {
Expand All @@ -1085,6 +1143,8 @@

// TODO: consider binding 'add' and 'remove' to pick up added/removed Installations too?
this.collection.on('reset', _.bind(this.render, self));

this.collection.on('add', _.bind(this.addOne, self));
},

showLoader: function () {
Expand All @@ -1096,7 +1156,23 @@
delete this.loader;
},

addOne: function(inst) {
var instRow = new veos.view.InstallationListRow({model: inst});
// this.$el.append(instRow.render().el);
var list = this.$el.find('.installations-list');
list.append(instRow.render());
list.listview('refresh');
},

loadMoreInstallations: function() {
var view = this;

view.collection.getNextPage();
},

render: function () {
var view = this;

if (veos.isAndroid()) {
// we're in the Android app
this.$el.find('.web-only').addClass('hidden');
Expand All @@ -1114,50 +1190,52 @@
list.empty();

this.collection.each(function (installation) {
var buttonText = '';
var ownerName;
if (installation.get('owner_name')) {
buttonText = "<span class='owner_name'>" + installation.get('owner_name') + "</span><br/><span class='loc_description'>" + installation.getLocDescription() + "</span>";
} else {
buttonText = "<span class='owner_name unknown'>Unknown Owner</span><br/><span class='loc_description'>" + installation.getLocDescription() + "</span>";
}

var complianceLevel;
if (installation.get('compliance_level')) {
if (installation.get('compliance_level') === 'non_compliant') {
complianceLevel = "<span class='compliance no-sign-color'></span>";
} else if (installation.get('compliance_level') === 'low_compliant') {
complianceLevel = "<span class='compliance missing-info-color'></span>";
} else if (installation.get('compliance_level') === 'min_compliant') {
complianceLevel = "<span class='compliance min-compliant-color'></span>";
} else if (installation.get('compliance_level') === 'compliant') {
complianceLevel = "<span class='compliance compliant-color'></span>";
} else {
complianceLevel = "<span class='compliance-unknown'></span>";
}
}

var thumb = "";

// the installations.json now contains photo URL so this got easier and much faster
if (installation.has('photos') && installation.get('photos').length > 0) {
var photosOfInstallation = installation.get('photos');
var photo = _.first(photosOfInstallation);
var photoID = photo.id;
var thumbUrl = veos.model.baseURL + photo.thumb_url;

//console.log('Retrieve photo thumb URL: '+thumbUrl+' for photo with ID: '+photoID);
thumb = "<img class='list-picture photo-"+photoID+"' src='"+thumbUrl+"' />";
}

var item = jQuery("<a class='relative' href='installation-details.html?id="+installation.get('id')+"'>"+complianceLevel+thumb+buttonText+"</a>");
// item.data('installation', installation); // add the installation object so that we can retrieve it in the click event
// item.attr('data-installationId', installation.get('id'));
var li = jQuery("<li />");
li.append(item);

list.append(li);
list.listview('refresh');
view.addOne(installation);
// var buttonText = '';
// var ownerName;
// if (installation.get('owner_name')) {
// buttonText = "<span class='owner_name'>" + installation.get('owner_name') + "</span><br/><span class='loc_description'>" + installation.getLocDescription() + "</span>";
// } else {
// buttonText = "<span class='owner_name unknown'>Unknown Owner</span><br/><span class='loc_description'>" + installation.getLocDescription() + "</span>";
// }

// var complianceLevel;
// if (installation.get('compliance_level')) {
// if (installation.get('compliance_level') === 'non_compliant') {
// complianceLevel = "<span class='compliance no-sign-color'></span>";
// } else if (installation.get('compliance_level') === 'low_compliant') {
// complianceLevel = "<span class='compliance missing-info-color'></span>";
// } else if (installation.get('compliance_level') === 'min_compliant') {
// complianceLevel = "<span class='compliance min-compliant-color'></span>";
// } else if (installation.get('compliance_level') === 'compliant') {
// complianceLevel = "<span class='compliance compliant-color'></span>";
// } else {
// complianceLevel = "<span class='compliance-unknown'></span>";
// }
// }

// var thumb = "";

// // the installations.json now contains photo URL so this got easier and much faster
// if (installation.has('photos') && installation.get('photos').length > 0) {
// var photosOfInstallation = installation.get('photos');
// var photo = _.first(photosOfInstallation);
// var photoID = photo.id;
// var thumbUrl = veos.model.baseURL + photo.thumb_url;

// //console.log('Retrieve photo thumb URL: '+thumbUrl+' for photo with ID: '+photoID);
// thumb = "<img class='list-picture photo-"+photoID+"' src='"+thumbUrl+"' />";
// }

// var item = jQuery("<a class='relative' href='installation-details.html?id="+installation.get('id')+"'>"+complianceLevel+thumb+buttonText+"</a>");
// // item.data('installation', installation); // add the installation object so that we can retrieve it in the click event
// // item.attr('data-installationId', installation.get('id'));
// var li = jQuery("<li />");
// li.append(item);

// list.append(li);
// list.listview('refresh');
});
}
});
Expand Down

0 comments on commit b67e170

Please sign in to comment.