Generate QR code with customized amount
This commit is contained in:
Gustavo Maximiliano Cortez
parent
979375fcbe
commit
599f53d39f
3 changed files with 166 additions and 0 deletions
80
public/views/modals/customized-amount.html
Normal file
80
public/views/modals/customized-amount.html
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<nav class="tab-bar">
|
||||
<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" ng-style="{'color':color}" translate>
|
||||
Receive a customized amount
|
||||
</h1>
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
<div class="modal-content">
|
||||
<div ng-show="customizedAmount">
|
||||
<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=' + customizedAmount}}"></qrcode>
|
||||
</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">
|
||||
{{customizedAmount}}
|
||||
<span class="label gray radius">{{customizedAlternative}}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div ng-show="!customizedAmount" 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'|translate}}"
|
||||
ng-minlength="0.00000001" ng-maxlength="10000000000" ng-model="_customAmount" valid-amount required autocomplete="off">
|
||||
<input type="number" id="alternative" name="alternative" ng-model="_customAlternative" style="display:none">
|
||||
<a class="postfix" ng-click="toggleAlternative()">{{unitName}}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-if="showAlternative">
|
||||
<label for="alternative"><span translate>Amount in</span> {{ alternativeName }}
|
||||
</label>
|
||||
<div class="input">
|
||||
<input type="number" id="alternative" name="alternative" ng-attr-placeholder="{{'Amount'|translate}}"
|
||||
ng-model="_customAlternative" requiredautocomplete="off" required>
|
||||
<input type="number" id="amount" name="amount" ng-model="_customAmount" style="display:none">
|
||||
<a class="postfix" 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>
|
||||
|
|
@ -264,6 +264,11 @@
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center" ng-show="!home.generatingAddress && home.addr[index.walletId]">
|
||||
<a class="size-12" ng-click="home.openCustomizedAmountModal(home.addr[index.walletId])" translate>
|
||||
Receive a customized amount
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="extra-margin-bottom"></div>
|
||||
</div> <!-- END Receive -->
|
||||
|
|
|
|||
|
|
@ -411,6 +411,87 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
|
|||
}
|
||||
};
|
||||
|
||||
this.openCustomizedAmountModal = function(addr) {
|
||||
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;
|
||||
|
||||
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);
|
||||
}
|
||||
},
|
||||
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 = 0;
|
||||
}
|
||||
$scope.alternativeAmount = $scope.customAlternative;
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
});
|
||||
|
||||
$scope.submitForm = function(form) {
|
||||
var satToBtc = 1 / 100000000;
|
||||
var amount = form.amount.$modelValue;
|
||||
var alternative = form.alternative.$modelValue;
|
||||
if ($scope.unitName == 'bits') {
|
||||
amount = parseInt((amount * $scope.unitToSatoshi).toFixed(0)) * satToBtc;
|
||||
}
|
||||
$scope.customizedAmount = amount;
|
||||
$scope.customizedAlternative = alternative;
|
||||
};
|
||||
|
||||
$scope.toggleAlternative = function() {
|
||||
$scope.showAlternative = !$scope.showAlternative;
|
||||
};
|
||||
|
||||
$scope.cancel = function() {
|
||||
$modalInstance.dismiss('cancel');
|
||||
};
|
||||
};
|
||||
|
||||
var modalInstance = $modal.open({
|
||||
templateUrl: 'views/modals/customized-amount.html',
|
||||
windowClass: 'full animated slideInUp',
|
||||
controller: ModalInstanceCtrl,
|
||||
});
|
||||
|
||||
modalInstance.result.finally(function() {
|
||||
var m = angular.element(document.getElementsByClassName('reveal-modal'));
|
||||
m.addClass('slideOutDown');
|
||||
});
|
||||
};
|
||||
|
||||
// Send
|
||||
|
||||
this.canShowAlternative = function() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue