LibrePay/Frontend
Archived
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

A few more animations

Browse Source 
Fix currency prefix issue
This commit is contained in:
Nicolas Klier
2021-01-02 15:02:51 +01:00
parent b2043e1546
commit e21531dec0
9 changed files with 93 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/backend.service.ts
View File

@@ -128,7 +128,9 @@ export class BackendService {
return new Promise(async (resolve, reject) => {
if (selector === undefined || selector === 'undefined' || selector === '') {
reject();
return;
}
this.http.get(this.SERVER_URL + '/invoice/' + selector, {
observe: 'body',
responseType: 'json'
@@ -142,6 +144,24 @@ export class BackendService {
});
}
cancelInvoice(): Promise<void> {
return new Promise(async (resolve, reject) => {
if (this.invoice.selector === '') {
reject('Cannot delete invoice with empty selector.');
return;
}
this.http.delete(this.SERVER_URL + '/invoice/' + this.invoice.selector, {
observe: 'body',
responseType: 'json'
}).toPromise().then((invoice) => {
resolve();
}).catch(err => {
reject(err);
});
});
}
setPaymentMethod(method: CryptoUnits): Promise<void> {
return new Promise(async (resolve, reject) => {
if (this.invoice === null) { reject('Invoice is not set!'); return; }

1
src/app/header/header.component.css
View File

@@ -30,4 +30,5 @@
float: right;
cursor: pointer;
grid-column: 2;
transition: .2s ease;
}

2
src/app/header/header.component.html
View File

@@ -1,4 +1,4 @@
<div class="header">
<img src="assets/logo.svg">
<a *ngIf="this.backend.isInvoicePending()">Cancel payment</a>
<a *ngIf="this.backend.isInvoicePending()" (click)="cancel()" [style]="cancelProgressStyle">{{ startCancelling ? 'Are you sure?' : 'Cancel payment'}}</a>
</div>

27
src/app/header/header.component.ts
View File

@@ -8,9 +8,36 @@ import { BackendService } from '../backend.service';
})
export class HeaderComponent implements OnInit {
startCancelling = false;
cancelProgress = 0;
cancelProgressStyle = ""; // This is the style of the cancel button
constructor(public backend: BackendService) { }
ngOnInit(): void {
}
cancel() {
if (!this.startCancelling) {
this.startCancelling = true;
const animation = setInterval(() => {
this.cancelProgress += 0.3;
this.cancelProgressStyle = `
background-image: linear-gradient(90deg, rgba(255,120,120,0.3) ${this.cancelProgress.toFixed(1)}%, rgba(255,255,255,0) ${this.cancelProgress.toFixed(1)}%);
transform: scale(1.1);
`;
if (this.cancelProgress > 100) {
clearInterval(animation);
this.startCancelling = false;
this.cancelProgress = 0;
this.cancelProgressStyle = '';
}
}, 15);
return;
}
this.backend.cancelInvoice();
}
}

8
src/app/pay/pay.component.css
View File

@@ -19,6 +19,10 @@
/* box-shadow: 1px 1px 112px 23px rgba(0,0,0,0.75); */
}
#header, #payment {
transition: .3s ease;
}
.smaller {
min-width: 200px;
width: 40vw !important;
@@ -34,6 +38,10 @@
width: 100%;
}
/*
BACKGROUND ANIMATION
*/
.cube {
position: absolute;
top: 80vh;

4
src/app/pay/pay.component.html
View File

@@ -7,6 +7,6 @@
<div class="cube"></div>
</div>
<div class="content" [ngClass]="{smaller: this.backend.isInvoiceRequested()}">
<app-header></app-header>
<app-payment></app-payment>
<app-header id="header"></app-header>
<app-payment id="payment"></app-payment>
</div>

4
src/app/payment/payment.component.css
View File

@@ -74,6 +74,7 @@
}
.alert p {
margin: 0;
line-height: 1.8;
}
@keyframes coinRoll {
@@ -152,7 +153,8 @@
line-height: 0;
}
#list li:hover {
box-shadow: 0px 0px 61px 3px rgba(0,0,0,0.3) inset;
box-shadow: 0px 0px 61px 3px rgba(0,0,0,0.2) inset;
padding-left: 6%;
}
#list li img {
height: 42px;

36
src/app/payment/payment.component.html
View File

@@ -1,9 +1,12 @@
<div class="payment request" *ngIf="this.backend.isInvoiceRequested()">
<!--
Select payment method
-->
<div class="payment request" xyz="stagger-2 fade-100% down-1" *ngIf="this.backend.isInvoiceRequested()">
<h3 id="title">Choose your<br>payment method</h3>
<p id="price">{{ this.backend.invoice.totalPrice!.toFixed(2) }} €</p>
<p id="price">{{ this.backend.invoice.totalPrice!.toFixed(2) }} {{ currencyPrefix() }}</p>
<ul id="list">
<li *ngFor="let coin of this.backend.invoice!!.paymentMethods" (click)="chooseMethod(coin.method)">
<li class="xyz-in" *ngFor="let coin of this.backend.invoice!!.paymentMethods" (click)="chooseMethod(coin.method)">
<img [src]="this.backend.getIcon(coin.method)">
<div>
<h4>{{ this.backend.findCryptoBySymbol(coin.method) }}</h4>
@@ -12,8 +15,14 @@
</li>
</ul>
</div>
<div class="payment main" *ngIf="!this.backend.isInvoiceRequested() && ready" [ngClass]="{invalid: status === 'Expired' || status === 'Paid too little'}">
<div class="qrWrapper">
<!--
Main view
-->
<div class="payment main" xyz="stagger-2 fade-100% down-1 ease-ease" *ngIf="!this.backend.isInvoiceRequested() && ready"
[ngClass]="{invalid: status === 'Expired' || status === 'Paid too little' || status === 'Cancelled by user'}">
<div class="qrWrapper xyz-in">
<div class="qr">
<img src="assets/Bitcoin.svg">
<qrcode
@@ -28,16 +37,16 @@
<div class="data">
<!-- Payment data -->
<span id="target">Send to
<span id="target" class="xyz-in">Send to
<h3>{{ this.backend.invoice?.receiveAddress }}</h3>
</span>
<span id="amount">Amount
<h3>{{ this.backend.getAmount() }} BTC <span class="price"> | {{ this.backend.invoice.totalPrice!.toFixed(2) }} €</span></h3>
<span id="amount" class="xyz-in">Amount
<h3>{{ this.backend.getAmount() }} BTC <span class="price"> | {{ this.backend.invoice.totalPrice!.toFixed(2) }} {{ currencyPrefix() }}</span></h3>
</span>
<span id="status">Status
<span id="status" class="xyz-in">Status
<h3>
{{ status }}
<div class="loader">
<div class="loader" *ngIf="this.status === 'Unconfirmed'">
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<path fill="#f7a12f" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
@@ -57,6 +66,9 @@
</div>
</div>
<!--
Alerts
-->
<div class="alert xyz-in" xyz="fade-100% duration-3 down-1" *ngIf="status === 'Expired'">
<p><b>This invoice expired</b>
<br>You cannot pay this invoice anymore. Please try to request a new invoice. </p>
@@ -69,3 +81,7 @@
<p><b>Looks like you paid not the requested amount of money.</b>
<br><u><b>You cannot pay twice!</b></u> Since sending back funds is complicated we would like you to contact support@example.org</p>
</div>
<div class="alert xyz-in" xyz="fade-100% duration-3 down-1" *ngIf="status === 'Cancelled by user'">
<p><b>Cancelled</b>
<br>This invoice has been cancelled by the user and cannot be paid anymore.</p>
</div>

5
src/app/payment/payment.component.ts
View File

@@ -1,3 +1,4 @@
import { getCurrencySymbol } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@@ -39,6 +40,10 @@ export class PaymentComponent implements OnInit {
this.backend.setPaymentMethod(coin);
}
currencyPrefix(): string {
return getCurrencySymbol(this.backend.invoice.currency, 'narrow');
}
async get(): Promise<void> {
await this.backend.setInvoice(this.paymentSelector);
this.backend.getConfirmation().catch();