-
Notifications
You must be signed in to change notification settings - Fork 6
/
home.html
54 lines (46 loc) · 2.04 KB
/
home.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<ion-header>
<ion-navbar color="primary">
<ion-title>
cryptoPWA
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="addHolding()">
<ion-icon name="add"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<h1>Welcome, {{ name }}</h1>
<div class="message" *ngIf="!holdingsProvider.holdings.length">
<p><strong>cryptoPWA</strong> is a <strong>P</strong>rogressive <strong>W</strong>eb <strong>A</strong>pplication
that allows you to keep track of the approximate worth of your cryptocurrency portfolio.</p>
<p>Click the button below to start tracking your coins in whatever currency you wish!</p>
<button ion-button full (click)="addHolding()" color="primary">Add Coins</button>
</div>
<ion-refresher *ngIf="holdingsProvider.holdings.length" (ionRefresh)="refreshPrices($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<p class="message" *ngIf="holdingsProvider.pricesUnavailable">
Could not fetch rates. Make sure you are connected to the internet or try again later.
</p>
<ion-list no-lines>
<ion-item-sliding *ngFor="let holding of holdingsProvider.holdings">
<ion-item class="holding">
<p><strong>{{ holding.crypto }}/{{ holding.currency }}</strong></p>
<p class="amount"><strong>Coins:</strong> {{ holding.amount }} <strong>Value:</strong> {{ holding.value }}</p>
<p *ngIf="holding.value > 0" class="value">{{ holding.amount * holding.value }}</p>
</ion-item>
<ion-item-options>
<button ion-button icon-only color="danger" (click)="holdingsProvider.removeHolding(holding)">
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
<button ion-button (click)="logout()">Logout</button>
</ion-content>
<ion-footer padding>
<p><strong>Disclaimer:</strong> Do not use this application to make investment decisions. Displayed prices may not
reflect actual prices.</p>
</ion-footer>