dashboard.component.html 3.77 KB
Newer Older
1 2 3 4 5
 <section id="breeze">
  <!-- CONTENT -->
  <section id="content" class="bitcoin">
    <!-- JUMBOTRON-->
    <div class="jumbotron jumbotron-fluid">
6
      <div class="col-10 mx-auto">
7 8 9
        <div class="col-xs-12 text-left">
          <h5 class="text-capitalize walletName">{{ walletName }}</h5>
        </div>
10
        <div class="row d-flex align-items-center">
11
          <div class="col-md-4 text-left">
dev0tion's avatar
dev0tion committed
12
            <h5>Active balance</h5>
13 14
            <p class="lead">
              <!--<strong><span class="h2">29</span>.76500293</strong>-->
dev0tion's avatar
dev0tion committed
15
              <strong>{{ (confirmedBalance | coinNotation) || (0 | coinNotation) }}</strong>
16
              <small class="text-uppercase"> {{ coinUnit }}</small>
17 18 19 20
            </p>
          </div>
          <!-- /col-->
          <!--<div class="col-xs-12 col-md-4 text-left">
dev0tion's avatar
dev0tion committed
21
            <h5>Current value</h5>
22 23 24 25 26 27
            <p class="lead">
              <i class="icon-coin-dollar"></i>
              <strong><span class="h2">51,390</span></strong>
              <small class="text-uppercase">usd</small>
            </p>
          </div>-->
28
          <div class="col-md-4 text-left">
dev0tion's avatar
dev0tion committed
29
            <h5>Unconfirmed balance</h5>
30
            <p class="lead">
dev0tion's avatar
dev0tion committed
31
              <strong>{{ (unconfirmedBalance | coinNotation) || (0 | coinNotation) }}</strong>
32
              <small class="text-uppercase"> {{ coinUnit }}</small>
33 34 35
            </p>
          </div>
          <!-- /col-->
36
          <div class="col-md-4 text-right">
37 38 39 40 41 42 43 44
            <p>
              <a class="btn btn-secondary" data-toggle="modal" data-target="#modalReceive" role="button" (click)="openReceiveDialog()">Receive</a>
              <a class="btn btn-primary ml-2" data-toggle="modal" data-target="#modalSend" role="button" (click)="openSendDialog()">Send</a>
            </p>
          </div>
          <!-- /col-->
        </div>
        <!-- /row-->
45
      </div>
46
      <!-- /container-->
47
    </div>
48 49 50
    <!-- /JUMBOTRON-->

    <!-- TRANSACTIONS -->
51
    <section id="transaction" class="col-10 mx-auto">
dev0tion's avatar
dev0tion committed
52
      <h5>Latest Transactions</h5>
dev0tion's avatar
dev0tion committed
53 54
      <div *ngIf="transactionArray; else noTransactions">
        <div *ngFor="let transaction of transactionArray; let i=index">
55
          <div class="card" *ngIf="i<3" (click)="openTransactionDetailDialog(transaction)">
56 57
            <div class="card-block text-nowrap">
              <ul class="list-inline row">
58 59
                <li class="list-inline-item hidden-xs-down col-3 text-uppercase align-bottom">{{ transaction.transactionType }}</li>
                <li class="list-inline-item col-4 amount text-left align-baseline">
dev0tion's avatar
dev0tion committed
60 61
                  <span *ngIf="transaction.transactionType == 'received'" class="text-success">+</span>
                  <span *ngIf="transaction.transactionType == 'sent'" class="text-danger">-</span>
62
                  {{ transaction.transactionAmount + transaction.transactionFee | coinNotation }}
63
                  <small class="text-uppercase">{{ coinUnit }}</small>
64 65
                </li>
                <li class="list-inline-item col amount text-left align-baseline">
dev0tion's avatar
dev0tion committed
66 67 68
                  <span *ngIf="transaction.transactionConfirmedInBlock" class="badge badge-success text-capitalize">Confirmed</span>
                  <span *ngIf="!transaction.transactionConfirmedInBlock" class="badge badge-warning text-capitalize">Pending</span>
                </li>
69
                <li class="list-inline-item col text-right align-baseline transactionDate">{{ transaction.transactionTimestamp * 1000 | date:'medium' }}</li>
70 71 72 73 74 75
              </ul>
            </div>
          </div>
          <!-- /card-->
        </div>
      </div>
Benoît's avatar
Benoît committed
76
      <ng-template #noTransactions><em class="muted">Looks like you haven't made any transactions yet.</em></ng-template>
77 78 79 80 81 82 83
    </section>
    <!-- /TRANSACTIONS -->
    <status-bar></status-bar>
  </section>
  <!-- /CONTENT-->
</section>
<!-- /breeze-->