Better look and feel

This commit is contained in:
Gustavo Maximiliano Cortez 2015-09-02 16:02:40 -03:00
commit 49cd19bd1b
9 changed files with 239 additions and 69 deletions

BIN
public/img/glidera-logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 KiB

View file

@ -6,43 +6,105 @@
</div>
<div class="content glidera" ng-controller="glideraController as glidera">
<div class="row">
<div class="large-12 columns">
<div class="content glidera p20v" ng-controller="glideraController as glidera">
<a href ng-if="!index.glideraToken" ng-click="$root.go('preferencesGlidera')">
Connect to Glidera
<div class="onGoingProcess" ng-show="glidera.loading">
<div class="onGoingProcess-content" ng-style="{'background-color':index.backgroundColor}">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
<span translate>Connecting to Glidera...</span>
</div>
</div>
<div class="text-center m10b">
<img src="img/glidera-logo.png" ng-click="glidera.update(index.glideraToken)">
</div>
<div ng-if="!index.glideraToken" class="row">
<div class="columns" ng-init="showOauthForm = false">
<div class="text-center" ng-show="!showOauthForm">
<p translate>You can buy and sell Bitcoin with a US bank account directly in Copay</p>
<p class="text-gray size-12">Connect your Glidera account to get started</p>
<button
class="dark-gray outline round tiny"
ng-click="$root.openExternalLink(glidera.authenticateUrl); showOauthForm = true" translate>
Connect to Glidera
</button>
<a href ng-click="showOauthForm = true" class="db text-gray size-12">
Do you already have the Oauth Code?
</a>
</div>
<div class="text-center" ng-show="showOauthForm">
<p class="text-gray size-12">Paste the authorization code here</p>
<form name="oauthCode" ng-submit="glidera.submitOauthCode(code)" novalidate>
<label>OAuth Code<label>
<input type="text" ng-model="code" ng-disabled="glidera.loading">
<input
class="button dark-gray outline round"
type="submit" value="Get started" ng-disabled="glidera.loading">
</form>
</div>
</div>
</div>
<div ng-if="index.glideraToken" ng-init="glidera.init(index.glideraToken)">
<div class="text-center m10b">
{{index.glideraEmail}} <br>
<a href class="text-gray" ng-click="$root.go('preferencesGlidera')">
Preferences
</a>
</div>
<div ng-if="index.glideraToken" ng-init="glidera.init(index.glideraToken)">
Connected to Glidera - <a href ng-click="$root.go('preferencesGlidera')">Preferences</a>
<div>
<button class="" ng-click="$root.go('buyGlidera')">Buy</button>
<button class="" ng-click="$root.go('sellGlidera')">Sell</button>
</div>
<h2>Transactions</h2>
<ul>
<li ng-repeat="tx in glidera.txs">
transactionUuid: {{tx.transactionUuid}} <br>
transactionDate: {{tx.transactionDate}} <br>
type: {{tx.type}} <br>
price: {{tx.price}} <br>
subtotal: {{tx.subtotal}} <br>
fees: {{tx.fees}} <br>
total: {{tx.total}} <br>
currency: {{tx.currency}} <br>
estimatedDeliveryDate: {{tx.estimatedDeliveryDate}} <br>
transactionHash: {{tx.transactionHash}} <br>
status: {{tx.status}}<br>
</li>
</ul>
<h4 class="title m0" translate>Connected</h4>
<ul class="no-bullet m0 size-14">
<li class="line-b p20 pointer" ng-click="$root.go('buyGlidera')">
<span translate>Buy</span>
<span class="right text-gray">
<i class="icon-arrow-right3 size-24 right"></i>
</span>
</li>
<li class="line-b p20 pointer" ng-click="$root.go('sellGlidera')">
<span translate>Sell</span>
<span class="right text-gray">
<i class="icon-arrow-right3 size-24 right"></i>
</span>
</li>
</ul>
<h4 class="title m0" translate>Activity</h4>
<div ng-repeat="tx in index.glideraTxs"
ng-click="glidera.openTxModal(index.glideraToken, tx)"
class="row collapse last-transactions-content">
<div class="large-3 medium-3 small-3 columns">
<span class="label tu radius" ng-show="tx.type == 'BUY'"
ng-style="{'background-color':index.backgroundColor}" translate>Bought</span>
<span class="label tu gray radius" ng-show="tx.type == 'SELL'" translate>Sold</span>
</div>
<div class="large-4 medium-4 small-4 columns">
<span class="size-16">
{{tx.subtotal}} {{tx.currency}}
</span>
</div>
<div class="large-4 medium-4 small-4 columns text-right">
<div class="m5t size-12 text-gray">
<time ng-if="tx.transactionDate">{{tx.transactionDate | amTimeAgo}}</time>
</div>
</div>
<div class="large-1 medium-1 small-1 columns text-right">
<i class="icon-arrow-right3 size-18"></i>
</div>
<div class="size-12 text-gray columns m5t">
<span class="text-success" ng-if="tx.status == 'COMPLETE'">Completed</span>
<span class="text-info" ng-if="tx.status == 'PENDING'">Pending</span>
<span class="text-warning" ng-if="tx.status == 'ERROR'">Error</span>
</div>
</div>
</div>
</div>
<div class="extra-margin-bottom"></div>

View file

@ -0,0 +1,60 @@
<nav class="tab-bar">
<section class="left-small">
<a ng-click="cancel()">
<i class="icon-arrow-left3 icon-back"></i>
<span class="text-back" translate>Back</span>
</a>
</section>
<section class="middle tab-bar-section">
<h1 class="title ellipsis" ng-style="{'color':color}" translate>
Transaction
</h1>
</section>
</nav>
<div class="modal-content fix-modals-touch">
<div class="header-modal text-center">
<span class="label tu radius" ng-show="tx.type == 'BUY'"
ng-style="{'background-color':color}" translate>Bought</span>
<span class="label tu gray radius" ng-show="tx.type == 'SELL'" translate>Sold</span>
<div class="size-42">
{{tx.subtotal}} {{tx.currency}}
</div>
<div>
<span class="text-success" ng-if="tx.status == 'COMPLETE'">Completed</span>
<span class="text-info" ng-if="tx.status == 'PENDING'">Pending</span>
<span class="text-warning" ng-if="tx.status == 'ERROR'">Error</span>
</div>
</div>
<h4 class="title m0" translate>Details</h4>
<ul class="no-bullet size-14 m0">
<li ng-show="tx.transactionDate" class="line-b p10 oh">
<span class="text-gray" translate>Date</span>:
<span class="right">{{tx.transactionDate | amCalendar}}</span>
</li>
<li ng-show="tx.price" class="line-b p10 oh">
<span class="text-gray" translate>Price</span>:
<span class="right">{{tx.price}}</span>
</li>
<li ng-show="tx.subtotal" class="line-b p10 oh">
<span class="text-gray" translate>Subtotal</span>:
<span class="right">{{tx.subtotal}}</span>
</li>
<li ng-show="tx.fees" class="line-b p10 oh">
<span class="text-gray" translate>Fees</span>:
<span class="right">{{tx.fees}}</span>
</li>
<li ng-show="tx.total" class="line-b p10 oh">
<span class="text-gray" translate>Total</span>:
<span class="right">{{tx.total}}</span>
</li>
</ul>
<div class="extra-margin-bottom"></div>
</div>

View file

@ -9,21 +9,6 @@
<div class="row" ng-init="glidera.init(index.glideraToken)">
<div class="large-12 columns">
<div ng-show="!index.glideraToken">
<a
class="button outline dark-gray"
ng-click="$root.openExternalLink(glidera.authenticateUrl)">
Get OAuth Code
</a>
<form name="form" ng-submit="glidera.submit(code)" novalidate>
<label>OAuth Code
<input type="text" ng-model="code">
</label>
<input type="submit" value="Get Access Token">
</form>
</div>
<div ng-show="index.glideraToken">
<a
class="button warning"

View file

@ -113,9 +113,10 @@
</div>
<div class="right">
<a class="button outline round light-gray tiny m0"
<a ng-show="!index.isShared" class="button outline round light-gray tiny preferences-icon m0"
ng-click="$root.go('glidera')">
Glidera
<i class="fi-credit-card size-18 vm"></i>
<span class="show-for-medium-up">Glidera</span>
</a>
<a ng-click="$root.go('preferences')" class="button outline round light-gray tiny preferences-icon m0">

View file

@ -1,13 +1,68 @@
'use strict';
angular.module('copayApp.controllers').controller('glideraController',
function(glideraService) {
function($scope, $timeout, $modal, profileService, configService, storageService, glideraService) {
var config = configService.getSync().wallet.settings;
this.authenticateUrl = glideraService.getOauthCodeUrl();
this.init = function(token) {
this.update = function(token) {
var self = this;
glideraService.getTransactions(token, function(error, txs) {
self.txs = txs;
});
glideraService.getEmail(token, function(error, data) {
self.email = data.email;
});
};
this.submitOauthCode = function(code) {
var fc = profileService.focusedClient;
var self = this;
this.loading = true;
$timeout(function() {
glideraService.getToken(code, function(error, data) {
if (data && data.access_token) {
storageService.setGlideraToken(fc.credentials.network, data.access_token, function() {
$scope.$emit('Local/GlideraTokenUpdated');
$timeout(function() {
self.loading = false;
$scope.$apply();
}, 100);
});
}
});
}, 100);
};
this.openTxModal = function(token, tx) {
var self = this;
var fc = profileService.focusedClient;
var ModalInstanceCtrl = function($scope, $modalInstance) {
$scope.tx = tx;
$scope.settings = config;
$scope.color = fc.backgroundColor;
glideraService.getTransaction(token, tx.transactionUuid, function(error, tx) {
$scope.tx = tx;
});
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
};
var modalInstance = $modal.open({
templateUrl: 'views/modals/glidera-tx-details.html',
windowClass: 'full animated slideInRight',
controller: ModalInstanceCtrl,
});
modalInstance.result.finally(function() {
var m = angular.element(document.getElementsByClassName('reveal-modal'));
m.addClass('slideOutRight');
});
};
});

View file

@ -1,6 +1,6 @@
'use strict';
angular.module('copayApp.controllers').controller('indexController', function($rootScope, $scope, $log, $filter, $timeout, lodash, go, profileService, configService, isCordova, rateService, storageService, addressService, gettextCatalog, gettext, amMoment, nodeWebkit, addonManager, feeService, isChromeApp, bwsError, utilService, $state) {
angular.module('copayApp.controllers').controller('indexController', function($rootScope, $scope, $log, $filter, $timeout, lodash, go, profileService, configService, isCordova, rateService, storageService, addressService, gettextCatalog, gettext, amMoment, nodeWebkit, addonManager, feeService, isChromeApp, bwsError, utilService, $state, glideraService) {
var self = this;
self.isCordova = isCordova;
self.onGoingProcess = {};
@ -114,6 +114,8 @@ angular.module('copayApp.controllers').controller('indexController', function($r
self.setSpendUnconfirmed();
self.glideraToken = null;
self.glideraTxs = null;
self.glideraEmail = null;
$timeout(function() {
self.hasProfile = true;
@ -847,9 +849,18 @@ angular.module('copayApp.controllers').controller('indexController', function($r
};
self.initGlidera = function() {
if (self.isShared) return;
storageService.getGlideraToken(self.network, function(err, val) {
if (err) return;
self.glideraToken = val;
else {
self.glideraToken = val;
glideraService.getTransactions(val, function(error, txs) {
self.glideraTxs = txs;
});
glideraService.getEmail(val, function(error, data) {
self.glideraEmail = data.email;
});
}
});
};

View file

@ -3,8 +3,6 @@
angular.module('copayApp.controllers').controller('preferencesGlideraController',
function($scope, $timeout, profileService, go, glideraService, storageService) {
this.authenticateUrl = glideraService.getOauthCodeUrl();
this.init = function(token) {
var self = this;
glideraService.getPermissions(token, function(error, permission) {
@ -26,21 +24,7 @@ angular.module('copayApp.controllers').controller('preferencesGlideraController'
glideraService.getLimits(token, function(error, limits) {
self.limits = limits;
});
};
this.submit = function(code) {
var fc = profileService.focusedClient;
glideraService.getToken(code, function(error, data) {
if (data && data.status == 200) {
storageService.setGlideraToken(fc.credentials.network, data.data.access_token, function() {
$scope.$emit('Local/GlideraTokenUpdated');
$timeout(function() {
go.walletHome();
}, 100);
});
}
});
};
};
this.revokeToken = function() {
var fc = profileService.focusedClient;

View file

@ -34,7 +34,7 @@ angular.module('copayApp.services').factory('glideraService', function($http, $l
$http(req).then(function(data) {
$log.info('Glidera Authorization Access Token: SUCCESS');
return cb(null, data);
return cb(null, data.data);
}, function(data) {
$log.error('Glidera Authorization Access Token: ERROR ' + data.statusText);
return cb(data.statusText);
@ -111,8 +111,20 @@ angular.module('copayApp.services').factory('glideraService', function($http, $l
root.getTransactions = function(token, cb) {
if (!token) return cb('Invalid Token');
$http(_get('/transaction', token)).then(function(data) {
$log.info('Glidera Transaction: SUCCESS');
$log.info('Glidera Transactions: SUCCESS');
return cb(null, data.data.transactions);
}, function(data) {
$log.error('Glidera Transactions: ERROR ' + data.statusText);
return cb(data.statusText);
});
};
root.getTransaction = function(token, txid, cb) {
if (!token) return cb('Invalid Token');
if (!txid) return cb('TxId required');
$http(_get('/transaction/' + txid, token)).then(function(data) {
$log.info('Glidera Transaction: SUCCESS');
return cb(null, data.data);
}, function(data) {
$log.error('Glidera Transaction: ERROR ' + data.statusText);
return cb(data.statusText);