|
@@ -1,7 +1,9 @@
|
|
|
<div fxFlex="100" fxLayout="row" fxLayoutAlign="stretch start" fxLayoutGap="0.5em">
|
|
|
<div fxFlex="25" fxLayout="column" fxLayoutGap="0.5em">
|
|
|
<mat-toolbar>
|
|
|
- <mat-toolbar-row>Аккаунт</mat-toolbar-row>
|
|
|
+ <mat-toolbar-row>
|
|
|
+ <mat-icon>account_circle</mat-icon> Аккаунт
|
|
|
+ </mat-toolbar-row>
|
|
|
</mat-toolbar>
|
|
|
<mat-card>
|
|
|
<mat-card-header>
|
|
@@ -21,18 +23,20 @@
|
|
|
</mat-card-actions>
|
|
|
</mat-card>
|
|
|
<mat-toolbar>
|
|
|
- <mat-toolbar-row>Счета</mat-toolbar-row>
|
|
|
+ <mat-toolbar-row>
|
|
|
+ <mat-icon>credit_card</mat-icon> Счета
|
|
|
+ </mat-toolbar-row>
|
|
|
</mat-toolbar>
|
|
|
<mat-list *ngxInit="{} as hovered">
|
|
|
<mat-list-item>
|
|
|
<mat-icon mat-list-icon>toll</mat-icon>
|
|
|
- <span mat-line>Всего монет: {{getTotatOverall()}}</span>
|
|
|
+ <div fxLayout="row" fxLayoutAlign="space-between center" mat-line><span>Всего монет</span><span>{{getTotatOverall()}}<span>₣</span></span></div>
|
|
|
</mat-list-item>
|
|
|
<mat-divider></mat-divider>
|
|
|
<mat-list-item (mouseenter)="hovered[idx] = true" (mouseleave)="hovered[idx] = false" *ngFor="let account of accounts; let idx=index">
|
|
|
<mat-icon mat-list-icon>toll</mat-icon>
|
|
|
<div fxLayout="row" fxLayoutAlign="space-between center" mat-line>
|
|
|
- <span>Баланс: {{account.overall}}</span>
|
|
|
+ <span>Cчёт: {{account.overall}}<span>₣</span></span>
|
|
|
<div fxLayout="row" fxLayoutAlign="start center">
|
|
|
<button (click)="showDebitDialog(account)" [disabled]="!hovered[idx]" class="mat-elevation-z0" color="warn" mat-button matTooltip="ПОПОЛНИТЬ">
|
|
|
<mat-icon>archive</mat-icon>
|
|
@@ -47,16 +51,20 @@
|
|
|
</div>
|
|
|
<div fxFlex="50" fxLayout="column" fxLayoutGap="0.5em">
|
|
|
<mat-toolbar>
|
|
|
- <mat-toolbar-row>Операции</mat-toolbar-row>
|
|
|
+ <mat-toolbar-row>
|
|
|
+ <mat-icon>account_balance_wallet</mat-icon> Операции
|
|
|
+ </mat-toolbar-row>
|
|
|
</mat-toolbar>
|
|
|
<mat-list>
|
|
|
- <mat-list-item *ngFor="let ev of events">
|
|
|
+ <mat-list-item *ngFor="let ev of events; let idx = index" [ngStyle]="{'background-color': idx % 2 === 1 ? 'rgba(240, 240, 240, 0.5)' : 'rgba(0, 0, 0, 0)'}">
|
|
|
<mat-icon *ngIf="ev.info.direction == 'to'" mat-list-icon>archive</mat-icon>
|
|
|
<mat-icon *ngIf="ev.info.direction == 'from'" mat-list-icon>unarchive</mat-icon>
|
|
|
- <div mat-line>Количество: {{ev.info.amount}}</div>
|
|
|
+ <div fxLayout="row" fxLayoutAlign="space-between center" mat-line>
|
|
|
+ <span><span *ngIf="ev.info.direction == 'to'">Пополнение</span><span *ngIf="ev.info.direction == 'from'">Списание</span></span>
|
|
|
+ <span [ngStyle]="{'color': (ev.info.direction == 'from') ? 'red' : ev.info.direction == 'to' ? 'green' : 'black'}"><span *ngIf="ev.info.direction == 'to'">+</span><span *ngIf="ev.info.direction == 'from'">-</span><span>{{ev.info.amount}}</span><span>₣</span></span>
|
|
|
+ </div>
|
|
|
<div mat-line>
|
|
|
- <span *ngIf="ev.info.direction == 'to'">пополнение</span>
|
|
|
- <span *ngIf="ev.info.direction == 'from'">списание</span>
|
|
|
+ <span>операция</span>
|
|
|
<span> от {{ev.date | date : 'medium'}}</span>
|
|
|
</div>
|
|
|
</mat-list-item>
|
|
@@ -64,7 +72,9 @@
|
|
|
</div>
|
|
|
<div fxFlex="25" fxLayout="column" fxLayoutGap="0.5em">
|
|
|
<mat-toolbar>
|
|
|
- <mat-toolbar-row>Разное</mat-toolbar-row>
|
|
|
+ <mat-toolbar-row>
|
|
|
+ <mat-icon>cast</mat-icon> Разное
|
|
|
+ </mat-toolbar-row>
|
|
|
</mat-toolbar>
|
|
|
<mat-list>
|
|
|
<mat-list-item *ngIf="demurrage">
|