add customized amount modal
This commit is contained in:
Javier
parent
6577b63887
commit
efabf087aa
3 changed files with 177 additions and 179 deletions
|
|
@ -1,87 +1,91 @@
|
|||
<nav class="tab-bar" ng-style="{'background-color':color}">
|
||||
<section class="left-small">
|
||||
<a ng-click="cancel()" class="p10">
|
||||
<span class="text-close" translate>Close</span>
|
||||
</a>
|
||||
</section>
|
||||
<section class="middle tab-bar-section">
|
||||
<h1 class="title ellipsis" translate>
|
||||
Request a specific amount
|
||||
</h1>
|
||||
</section>
|
||||
</nav>
|
||||
<ion-modal-view ng-controller="customAmountController">
|
||||
<ion-content>
|
||||
<nav class="tab-bar" ng-style="{'background-color':color}">
|
||||
<section class="left-small">
|
||||
<a ng-click="cancel()" class="p10">
|
||||
<span class="text-close" translate>Close</span>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<div class="modal-content fix-modals-touch">
|
||||
<div class="m20b" ng-show="customizedAmountBtc">
|
||||
<h4 class="title m0" translate>QR Code</h4>
|
||||
<ul class="no-bullet size-14 m0">
|
||||
<li class="line-b p10 oh text-center">
|
||||
<qrcode size="220" data="bitcoin:{{addr + '?amount=' + customizedAmountBtc}}"></qrcode>
|
||||
<div class="m10t text-center" ng-show="isCordova">
|
||||
<span class="button outline dark-gray tiny round"
|
||||
ng-click="shareAddress('bitcoin:' + addr + '?amount=' + customizedAmountBtc)">
|
||||
<i class="fi-share"></i>
|
||||
<span translate>Share address</span>
|
||||
</span>
|
||||
<section class="middle tab-bar-section">
|
||||
<h1 class="title ellipsis" translate>Request a specific amount</h1>
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
<div class="modal-content fix-modals-touch">
|
||||
<div class="m20b" ng-show="customizedAmountBtc">
|
||||
<h4 class="title m0" translate>QR Code</h4>
|
||||
<ul class="no-bullet size-14 m0">
|
||||
<li class="line-b p10 oh text-center">
|
||||
<qrcode size="220" data="bitcoin:{{addr + '?amount=' + customizedAmountBtc}}"></qrcode>
|
||||
<div class="m10t text-center" ng-show="isCordova">
|
||||
<span class="button outline dark-gray tiny round"
|
||||
ng-click="shareAddress('bitcoin:' + addr + '?amount=' + customizedAmountBtc)">
|
||||
<i class="fi-share"></i>
|
||||
<span translate>Share address</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="title m0" translate>Details</h4>
|
||||
<ul class="no-bullet size-14 m0">
|
||||
<li class="line-b p10 oh">
|
||||
<span class="text-gray" translate>Address</span>:
|
||||
<span class="right">
|
||||
<span class="text-gray enable_text_select">{{addr}}</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="line-b p10 oh">
|
||||
<span class="text-gray" translate>Amount</span>:
|
||||
<span class="right">
|
||||
{{customizedAmountUnit}}
|
||||
<span class="label gray radius">{{customizedAlternativeUnit}}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<h4 class="title m0" translate>Details</h4>
|
||||
<ul class="no-bullet size-14 m0">
|
||||
<li class="line-b p10 oh">
|
||||
<span class="text-gray" translate>Address</span>:
|
||||
<span class="right">
|
||||
<span class="text-gray enable_text_select">{{addr}}</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="line-b p10 oh">
|
||||
<span class="text-gray" translate>Amount</span>:
|
||||
<span class="right">
|
||||
{{customizedAmountUnit}}
|
||||
<span class="label gray radius">{{customizedAlternativeUnit}}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div ng-show="!customizedAmountBtc" class="row m20t">
|
||||
<div class="large-12 large-centered columns">
|
||||
<form name="amountForm" ng-submit="submitForm(amountForm)" novalidate>
|
||||
<div class="right" ng-hide="amountForm.amount.$pristine && !amountForm.amount.$modelValue ">
|
||||
<span class="has-error right size-12" ng-if="amountForm.amount.$invalid">
|
||||
<i class="icon-close-circle size-14"></i>
|
||||
<span clas="vm" translate>Not valid</span>
|
||||
</span>
|
||||
<small class="text-primary right" ng-if="!amountForm.amount.$invalid">
|
||||
<i class="icon-checkmark-circle size-14"></i>
|
||||
</small>
|
||||
</div>
|
||||
<div ng-if="!showAlternative">
|
||||
<label for="amount">
|
||||
<span translate>Amount</span>
|
||||
</label>
|
||||
<div class="input">
|
||||
<input type="number" id="amount" name="amount" ng-attr-placeholder="{{'Amount in'|translate}} {{unitName}}"
|
||||
ng-model="_customAmount" ng-minlength="0.00000001" ng-maxlength="10000000000" valid-amount required autocomplete="off">
|
||||
<input type="number" id="alternative" name="alternative" ng-model="_customAlternative" style="display:none">
|
||||
<a class="postfix button" ng-style="{'background-color':color}" ng-click="toggleAlternative()">{{unitName}}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-if="showAlternative">
|
||||
<label for="alternative"><span translate>Amount</span> [{{ alternativeIsoCode }}]
|
||||
</label>
|
||||
<div class="input">
|
||||
<input type="number" id="alternative" name="alternative" ng-attr-placeholder="{{'Amount in'|translate}} {{alternativeName}}"
|
||||
ng-model="_customAlternative" required autocomplete="off" required>
|
||||
<input type="number" id="amount" name="amount" ng-model="_customAmount" style="display:none">
|
||||
<a class="postfix button black" ng-click="toggleAlternative()"> {{ alternativeIsoCode }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="button black round expand" ng-disabled="amountForm.$invalid" ng-style="{'background-color':color}" translate>
|
||||
Generate QR Code
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="extra-margin-bottom"></div>
|
||||
</div>
|
||||
<div ng-show="!customizedAmountBtc" class="row m20t">
|
||||
<div class="large-12 large-centered columns">
|
||||
<form name="amountForm" ng-submit="submitForm(amountForm)" novalidate>
|
||||
<div class="right" ng-hide="amountForm.amount.$pristine && !amountForm.amount.$modelValue ">
|
||||
<span class="has-error right size-12" ng-if="amountForm.amount.$invalid">
|
||||
<i class="icon-close-circle size-14"></i>
|
||||
<span clas="vm" translate>Not valid</span>
|
||||
</span>
|
||||
<small class="text-primary right" ng-if="!amountForm.amount.$invalid">
|
||||
<i class="icon-checkmark-circle size-14"></i>
|
||||
</small>
|
||||
</div>
|
||||
<div ng-if="!showAlternative">
|
||||
<label for="amount">
|
||||
<span translate>Amount</span>
|
||||
</label>
|
||||
<div class="input">
|
||||
<input type="number" id="amount" name="amount" ng-attr-placeholder="{{'Amount in'|translate}} {{unitName}}"
|
||||
ng-model="_customAmount" ng-minlength="0.00000001" ng-maxlength="10000000000" valid-amount required autocomplete="off">
|
||||
<input type="number" id="alternative" name="alternative" ng-model="_customAlternative" style="display:none">
|
||||
<a class="postfix button" ng-style="{'background-color':color}" ng-click="toggleAlternative()">{{unitName}}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-if="showAlternative">
|
||||
<label for="alternative"><span translate>Amount</span> [{{ alternativeIsoCode }}]
|
||||
</label>
|
||||
<div class="input">
|
||||
<input type="number" id="alternative" name="alternative" ng-attr-placeholder="{{'Amount in'|translate}} {{alternativeName}}"
|
||||
ng-model="_customAlternative" required autocomplete="off" required>
|
||||
<input type="number" id="amount" name="amount" ng-model="_customAmount" style="display:none">
|
||||
<a class="postfix button black" ng-click="toggleAlternative()"> {{ alternativeIsoCode }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="button black round expand" ng-disabled="amountForm.$invalid" ng-style="{'background-color':color}" translate>
|
||||
Generate QR Code
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view-modal>
|
||||
|
|
|
|||
82
src/js/controllers/modals/customAmount.js
Normal file
82
src/js/controllers/modals/customAmount.js
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('copayApp.controllers').controller('customAmountController', function($scope, $timeout, $filter, isCordova, rateService) {
|
||||
var self = $scope.self;
|
||||
|
||||
$scope.unitName = self.unitName;
|
||||
$scope.alternativeAmount = self.alternativeAmount;
|
||||
$scope.alternativeName = self.alternativeName;
|
||||
$scope.alternativeIsoCode = self.alternativeIsoCode;
|
||||
$scope.isRateAvailable = self.isRateAvailable;
|
||||
$scope.unitToSatoshi = self.unitToSatoshi;
|
||||
$scope.unitDecimals = self.unitDecimals;
|
||||
var satToUnit = 1 / self.unitToSatoshi;
|
||||
$scope.showAlternative = false;
|
||||
$scope.isCordova = isCordova;
|
||||
|
||||
Object.defineProperty($scope,
|
||||
"_customAlternative", {
|
||||
get: function() {
|
||||
return $scope.customAlternative;
|
||||
},
|
||||
set: function(newValue) {
|
||||
$scope.customAlternative = newValue;
|
||||
if (typeof(newValue) === 'number' && $scope.isRateAvailable) {
|
||||
$scope.customAmount = parseFloat((rateService.fromFiat(newValue, $scope.alternativeIsoCode) * satToUnit).toFixed($scope.unitDecimals), 10);
|
||||
} else {
|
||||
$scope.customAmount = null;
|
||||
}
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
});
|
||||
|
||||
Object.defineProperty($scope,
|
||||
"_customAmount", {
|
||||
get: function() {
|
||||
return $scope.customAmount;
|
||||
},
|
||||
set: function(newValue) {
|
||||
$scope.customAmount = newValue;
|
||||
if (typeof(newValue) === 'number' && $scope.isRateAvailable) {
|
||||
$scope.customAlternative = parseFloat((rateService.toFiat(newValue * $scope.unitToSatoshi, $scope.alternativeIsoCode)).toFixed(2), 10);
|
||||
} else {
|
||||
$scope.customAlternative = null;
|
||||
}
|
||||
$scope.alternativeAmount = $scope.customAlternative;
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
});
|
||||
|
||||
$scope.submitForm = function(form) {
|
||||
var satToBtc = 1 / 100000000;
|
||||
var amount = form.amount.$modelValue;
|
||||
var amountSat = parseInt((amount * $scope.unitToSatoshi).toFixed(0));
|
||||
$timeout(function() {
|
||||
$scope.customizedAmountUnit = amount + ' ' + $scope.unitName;
|
||||
$scope.customizedAlternativeUnit = $filter('noFractionNumber')(form.alternative.$modelValue, 2) + ' ' + $scope.alternativeIsoCode;
|
||||
if ($scope.unitName == 'bits') {
|
||||
amount = (amountSat * satToBtc).toFixed(8);
|
||||
}
|
||||
$scope.customizedAmountBtc = amount;
|
||||
}, 1);
|
||||
};
|
||||
|
||||
$scope.toggleAlternative = function() {
|
||||
$scope.showAlternative = !$scope.showAlternative;
|
||||
};
|
||||
|
||||
$scope.shareAddress = function(uri) {
|
||||
if (isCordova) {
|
||||
if (isMobile.Android() || isMobile.Windows()) {
|
||||
window.ignoreMobilePause = true;
|
||||
}
|
||||
window.plugins.socialsharing.share(uri, null, null, null);
|
||||
}
|
||||
};
|
||||
|
||||
$scope.cancel = function() {
|
||||
$scope.customAmountModal.hide();
|
||||
};
|
||||
});
|
||||
|
|
@ -478,105 +478,17 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
|
|||
};
|
||||
|
||||
this.openCustomizedAmountModal = function(addr) {
|
||||
$rootScope.modalOpened = true;
|
||||
var self = this;
|
||||
var fc = profileService.focusedClient;
|
||||
var ModalInstanceCtrl = function($scope, $modalInstance) {
|
||||
$scope.addr = addr;
|
||||
$scope.color = fc.backgroundColor;
|
||||
$scope.unitName = self.unitName;
|
||||
$scope.alternativeAmount = self.alternativeAmount;
|
||||
$scope.alternativeName = self.alternativeName;
|
||||
$scope.alternativeIsoCode = self.alternativeIsoCode;
|
||||
$scope.isRateAvailable = self.isRateAvailable;
|
||||
$scope.unitToSatoshi = self.unitToSatoshi;
|
||||
$scope.unitDecimals = self.unitDecimals;
|
||||
var satToUnit = 1 / self.unitToSatoshi;
|
||||
$scope.showAlternative = false;
|
||||
$scope.isCordova = isCordova;
|
||||
|
||||
Object.defineProperty($scope,
|
||||
"_customAlternative", {
|
||||
get: function() {
|
||||
return $scope.customAlternative;
|
||||
},
|
||||
set: function(newValue) {
|
||||
$scope.customAlternative = newValue;
|
||||
if (typeof(newValue) === 'number' && $scope.isRateAvailable) {
|
||||
$scope.customAmount = parseFloat((rateService.fromFiat(newValue, $scope.alternativeIsoCode) * satToUnit).toFixed($scope.unitDecimals), 10);
|
||||
} else {
|
||||
$scope.customAmount = null;
|
||||
}
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
});
|
||||
$scope.color = fc.backgroundColor;
|
||||
$scope.self = self;
|
||||
$scope.addr = addr;
|
||||
|
||||
Object.defineProperty($scope,
|
||||
"_customAmount", {
|
||||
get: function() {
|
||||
return $scope.customAmount;
|
||||
},
|
||||
set: function(newValue) {
|
||||
$scope.customAmount = newValue;
|
||||
if (typeof(newValue) === 'number' && $scope.isRateAvailable) {
|
||||
$scope.customAlternative = parseFloat((rateService.toFiat(newValue * $scope.unitToSatoshi, $scope.alternativeIsoCode)).toFixed(2), 10);
|
||||
} else {
|
||||
$scope.customAlternative = null;
|
||||
}
|
||||
$scope.alternativeAmount = $scope.customAlternative;
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
});
|
||||
|
||||
$scope.submitForm = function(form) {
|
||||
var satToBtc = 1 / 100000000;
|
||||
var amount = form.amount.$modelValue;
|
||||
var amountSat = parseInt((amount * $scope.unitToSatoshi).toFixed(0));
|
||||
$timeout(function() {
|
||||
$scope.customizedAmountUnit = amount + ' ' + $scope.unitName;
|
||||
$scope.customizedAlternativeUnit = $filter('noFractionNumber')(form.alternative.$modelValue, 2) + ' ' + $scope.alternativeIsoCode;
|
||||
if ($scope.unitName == 'bits') {
|
||||
amount = (amountSat * satToBtc).toFixed(8);
|
||||
}
|
||||
$scope.customizedAmountBtc = amount;
|
||||
}, 1);
|
||||
};
|
||||
|
||||
$scope.toggleAlternative = function() {
|
||||
$scope.showAlternative = !$scope.showAlternative;
|
||||
};
|
||||
|
||||
$scope.shareAddress = function(uri) {
|
||||
if (isCordova) {
|
||||
if (isAndroid || isWP) {
|
||||
window.ignoreMobilePause = true;
|
||||
}
|
||||
window.plugins.socialsharing.share(uri, null, null, null);
|
||||
}
|
||||
};
|
||||
|
||||
$scope.cancel = function() {
|
||||
$modalInstance.dismiss('cancel');
|
||||
};
|
||||
};
|
||||
|
||||
var modalInstance = $modal.open({
|
||||
templateUrl: 'views/modals/customized-amount.html',
|
||||
windowClass: animationService.modalAnimated.slideUp,
|
||||
controller: ModalInstanceCtrl,
|
||||
});
|
||||
|
||||
var disableCloseModal = $rootScope.$on('closeModal', function() {
|
||||
modalInstance.dismiss('cancel');
|
||||
});
|
||||
|
||||
modalInstance.result.finally(function() {
|
||||
$rootScope.modalOpened = false;
|
||||
disableCloseModal();
|
||||
var m = angular.element(document.getElementsByClassName('reveal-modal'));
|
||||
m.addClass(animationService.modalAnimated.slideOutDown);
|
||||
$ionicModal.fromTemplateUrl('views/modals/customized-amount.html', {
|
||||
scope: $scope
|
||||
}).then(function(modal) {
|
||||
$scope.customAmountModal = modal;
|
||||
$scope.customAmountModal.show();
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue