Payment history fixes and improvements

Improved responsiveness of payment history (+ detail) screens

Fixed issue #297

Fixed issue #220 (by loading all payment requests, no pagination)

config-template.xml

@@ -6,7 +6,6 @@
     <access origin="https://*/*" />
     <platform name="android">
         <preference name="android-minSdkVersion" value="19" />
-        <hook src="scripts/copy-build-extras-gradle-to-platform-dir.js" type="before_prepare" />
         <icon density="ldpi" src="images/favicon/favicon-android-ldpi.png" />
         <icon density="mdpi" src="images/favicon/favicon-android-mdpi.png" />
         <icon density="hdpi" src="images/favicon/favicon-android-hdpi.png" />

css/base.css

@@ -105,8 +105,8 @@ html.screen-saver-on #view {
 	width: 100%;
 	height: 100%;
 	z-index: 999;
-	opacity: .8;
-	background-color: rgba(255, 255, 255, .8);
+	opacity: 1;
+	background-color: rgba(255, 255, 255, .7);
 }
 #cover-image {
 	position: relative;
@@ -132,8 +132,12 @@ html.loaded.busy #cover {
 	display: flex;
 }
 html.loaded.busy #cover-image {
-	background-size: 120px;
+	width: 160px;
+	height: 160px;
+	background-size: 80px;
 	background-image: url('../images/busy.gif');
+	background-color: #fff;
+	box-shadow: 0 0 8px rgba(0,0,0,.4);
 }
 html.screen-saver-on #cover {
 	display: flex;

css/views/payment-history.css

@@ -9,30 +9,6 @@
 .view.admin .slider-item.payment-history .slider-item-content {
 	overflow: hidden;
 }
-.view.admin .payment-history.loading {
-	height: 100%;
-	box-sizing: border-box;
-	padding-bottom: 4rem;/* height of loader */
-}
-.view.admin .payment-history-loader {
-	position: absolute;
-	left: 0;
-	bottom: 0;
-	z-index: 40;
-	width: 100%;
-	height: 4rem;
-	display: none;
-	background: #fff url('../images/busy.gif') center center no-repeat;
-	background-size: 2rem;
-	box-sizing: border-box;
-	opacity: 0;
-	transition: opacity 0.2s ease-out;
-	padding: 1rem 0;
-}
-.view.admin .payment-history.loading .payment-history-loader {
-	display: block;
-	opacity: 1;
-}
 .view.admin .payment-history-empty {
 	display: none;
 	text-align: center;

js/abstracts/base-collection.js

@@ -11,7 +11,10 @@ app.abstracts.BaseCollection = (function() {
 		// storeName: '<NAME>',
 
 		// Internal counter for the total number of models stored in this collection's db table.
-		total: 0,
+		// This is used in the case of SQLite storage.
+		total: function() {
+			return this.length;
+		},
 
 		initialize: function() {
 
@@ -23,9 +26,9 @@ app.abstracts.BaseCollection = (function() {
 
 			if (app.sqlite) {
 				this.sqliteStore = new app.sqlite.Store(storeName);
-			} else {
-				this.localStorage = new Backbone.LocalStorage(storeName);
 			}
+
+			this.localStorage = new Backbone.LocalStorage(storeName);
 		},
 
 	});

js/backbone.extend/sync.js

@@ -11,78 +11,66 @@
 		return _.result(Backbone, 'Deferred', false);
 	};
 
-	/*
-		!! TODO !!
-		This custom sync method doesn't work properly when fetching an individual record. Example:
-			this.model = new app.paymentRequests.model({ id: this.options.paymentId });
-			this.model.on('sync change', this.render);
-			this.model.fetch();
-
-		Suggested approach to find a fix is to copy the backbone-localstorage sync method here with added logging to determine the proper signature for callbacks.
-	*/
-
 	Backbone.sync = function(method, model, options) {
 
-		var sqliteStore = this.sqliteStore || this.collection && this.collection.sqliteStore;
-		var useSqlite = !!app.sqlite && !!sqliteStore;
+		// Always use local storage (for now at least).
+		return localStorageSync.apply(this, arguments);
+
+		// var sqliteStore = this.sqliteStore || this.collection && this.collection.sqliteStore;
+		// var useSqlite = !!app.sqlite && !!sqliteStore;
 
-		// Fallback to LocalStorage sync method.
-		if (!useSqlite) return localStorageSync.apply(this, arguments);
+		// // Fallback to LocalStorage sync method.
+		// if (!useSqlite) return localStorageSync.apply(this, arguments);
 
-		options = _.clone(options || {});
-		var store = sqliteStore;
-		var storeMethodOptions = _.pick(options, 'limit', 'offset');
-		var deferred = getDeferred();
-		var models = this.models || null;
+		// options = _.clone(options || {});
+		// var store = sqliteStore;
+		// var storeMethodOptions = _.pick(options, 'limit', 'offset');
+		// var deferred = getDeferred();
 
-		_.defer(function() {
-			var storeMethod;
-			switch (method) {
-				case 'read':
-					storeMethod = _.isUndefined(model.id) ? 
-						_.bind(store.findAll, store, storeMethodOptions) :
-						_.bind(store.find, store, model);
-					break;
-				case 'create':
-					storeMethod = _.bind(store.create, store, model);
-					break;
-				case 'patch':
-				case 'update':
-					storeMethod = _.bind(store.update, store, model);
-					break;
-				case 'delete':
-					storeMethod = _.bind(store.destroy, store, model);
-					break;
-			}
-			storeMethod(function(error, result) {
-				if (error) {
-					if (options.error) {
-						options.error.call(model, error, options);
-					}
-					if (deferred) {
-						deferred.reject(error);
-					}
-				} else {
-					// Combine the result with the existing models in the collection.
-					if (models) {
-						result = models.concat(result);
-					}
-					if (options.success) {
-						options.success.call(model, result, options);
-					}
-					if (deferred) {
-						deferred.resolve(result);
-					}
-				}
-				// add compatibility with $.ajax
-				// always execute callback for success and error
-				if (options.complete) {
-					options.complete.call(model, result);
-				}
-			});
-		});
+		// _.defer(function() {
+		// 	var storeMethod;
+		// 	switch (method) {
+		// 		case 'read':
+		// 			storeMethod = _.isUndefined(model.id) ? 
+		// 				_.bind(store.findAll, store, storeMethodOptions) :
+		// 				_.bind(store.find, store, model);
+		// 			break;
+		// 		case 'create':
+		// 			storeMethod = _.bind(store.create, store, model);
+		// 			break;
+		// 		case 'patch':
+		// 		case 'update':
+		// 			storeMethod = _.bind(store.update, store, model);
+		// 			break;
+		// 		case 'delete':
+		// 			storeMethod = _.bind(store.destroy, store, model);
+		// 			break;
+		// 	}
+		// 	storeMethod(function(error, result) {
+		// 		if (error) {
+		// 			if (options.error) {
+		// 				options.error.call(model, error, options);
+		// 			}
+		// 			if (deferred) {
+		// 				deferred.reject(error);
+		// 			}
+		// 		} else {
+		// 			if (options.success) {
+		// 				options.success.call(model, result, options);
+		// 			}
+		// 			if (deferred) {
+		// 				deferred.resolve(result);
+		// 			}
+		// 		}
+		// 		// add compatibility with $.ajax
+		// 		// always execute callback for success and error
+		// 		if (options.complete) {
+		// 			options.complete.call(model, result);
+		// 		}
+		// 	});
+		// });
 
-		return deferred && deferred.promise();
+		// return deferred && deferred.promise();
 	};
 
 })();

js/cache.js

@@ -4,15 +4,7 @@ app.cache = (function() {
 
 	'use strict';
 
-	var model = (function() {
-		var Model = Backbone.Model.extend({
-			localStorage: new Backbone.LocalStorage('cache'),
-		});
-		var model = new Model({
-			id: 'cache',
-		});
-		return model;
-	})();
+	var model = new app.models.Cache({ id: 'cache' });
 
 	var cache = {
 		model: model,
@@ -55,26 +47,22 @@ app.cache = (function() {
 		}
 	};
 
-	app.queues.onStart.push({
-		fn: function(done) {
-			model.fetch({
-				success: function() {
-					done();
-				},
-				error: done,
-			});
-		}
+	app.onStart(function(done) {
+		model.fetch({
+			success: function() {
+				done();
+			},
+			error: done,
+		});
 	});
 
-	app.queues.onStart.push({
-		fn: function(done) {
-			try {
-				cache.clearOlderThan(app.config.cache.onAppStartClearOlderThan);
-			} catch (error) {
-				app.log(error);
-			}
-			done();
+	app.onStart(function(done) {
+		try {
+			cache.clearOlderThan(app.config.cache.onAppStartClearOlderThan);
+		} catch (error) {
+			app.log(error);
 		}
+		done();
 	});
 
 	return cache;

js/config.js

@@ -6,6 +6,7 @@ app.config = (function() {
 
 	var config = {
 		debug: false,
+		primaryDisplayCurrencies: ['BTC', 'CZK', 'EUR', 'GBP', 'LTC', 'USD', 'XMR'],
 		supportEmail: 'cryptoterminal.eu@gmail.com',
 		cache: {
 			onAppStartClearOlderThan: 86400000,// milliseconds
@@ -90,7 +91,7 @@ app.config = (function() {
 		},
 		paymentHistory: {
 			list: {
-				limit: 30,
+				limit: 999,
 			}
 		},
 		settings: [
@@ -124,7 +125,7 @@ app.config = (function() {
 				required: true,
 				options: function() {
 					var supportedDisplayCurrencies = app.util.getSupportedDisplayCurrencies();
-					var sticky = ['BTC', 'CZK', 'EUR', 'GBP', 'LTC', 'USD', 'XMR'];
+					var sticky = config.primaryDisplayCurrencies;
 					var rest = _.difference(supportedDisplayCurrencies, sticky);
 					return _.map([].concat(sticky, [''], rest), function(code) {
 						return {

js/init.js

@@ -15,25 +15,26 @@ app.onDeviceReady(function() {
 	// Initialize collections and models.
 	app.paymentRequests = new app.collections.PaymentRequests();
 
-	app.queues.onReady.push({
-		fn: function() {
-			// Initialize the main view.
-			app.mainView = new app.views.Main();
-
-			// Initialize the router.
-			app.router = new app.Router();
+	app.onReady(function() {
+		app.paymentRequests.fetch();
+	});
 
-			// Don't initialize backbone history when testing.
-			if (!app.isTest()) {
-				// Start storing in-app browsing history.
-				Backbone.history.start();
-			}
+	app.onReady(function() {
+		// Initialize the main view.
+		app.mainView = new app.views.Main();
 
-			$('html').addClass('loaded');
-			app.device.overrideBackButton();
-			app.device.listenToNetworkInformation();
+		// Initialize the router.
+		app.router = new app.Router();
 
+		// Don't initialize backbone history when testing.
+		if (!app.isTest()) {
+			// Start storing in-app browsing history.
+			Backbone.history.start();
 		}
+
+		$('html').addClass('loaded');
+		app.device.overrideBackButton();
+		app.device.listenToNetworkInformation();
 	});
 
 	app.queues.onStart.resume();

js/models/cache.js

@@ -0,0 +1,13 @@
+var app = app || {};
+
+app.models = app.models || {};
+
+app.models.Cache = (function() {
+
+	'use strict';
+
+	return app.abstracts.BaseModel.extend({
+		localStorage: new Backbone.LocalStorage('cache'),
+	});
+
+})();

js/models/payment-request.js

@@ -64,7 +64,7 @@ app.models.PaymentRequest = (function() {
 
 			var requiredFields = ['amount', 'currency', 'method', 'rate'];
 			var isPending = this.get('status') === 'pending';
-			return this.isSaved() && !isPending && _.every(requiredFields, function(field) {
+			return this.isSaved() && !this.isPending() && _.every(requiredFields, function(field) {
 				return !!this.get(field);
 			}, this);
 		},

js/queues.js

@@ -37,13 +37,11 @@ app.queues = (function() {
 		app.log(error);
 	};
 
-	app.onDeviceReady = function(fn) {
-		app.queues.onDeviceReady.push({ fn: fn });
-	};
-
-	app.onReady = function(fn) {
-		app.queues.onReady.push({ fn: fn });
-	};
+	_.each(_.keys(queues), function(key) {
+		app[key] = function(fn) {
+			app.queues[key].push({ fn: fn });
+		};
+	});
 
 	$(function() {
 		if (!app.isCordova()) {

js/router.js

@@ -207,7 +207,7 @@ app.Router = (function() {
 			});
 
 			app.mainView.renderView('Pay', { model: paymentRequest });
-			app.paymentRequests.add(paymentRequest);
+			app.paymentRequests.add(paymentRequest, { at: 0 });
 		},
 
 		choosePaymentMethod: function() {