mirror of
https://github.com/d0zingcat/gocryptotrader.git
synced 2026-05-19 23:16:48 +00:00
Finishes wallet summary
Restyles settings and wallet pages
This commit is contained in:
gloriousCode
@@ -1,20 +1,20 @@
|
||||
.container {
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
height:100vh;
|
||||
height: 96vh;
|
||||
}
|
||||
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px 70px 0;
|
||||
min-width:94%;
|
||||
min-width: 86%;
|
||||
margin: 10px auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.sidebar{
|
||||
width:16%;
|
||||
.sidebar {
|
||||
width: 14%;
|
||||
}
|
||||
|
||||
.dashboard-highlight {
|
||||
|
||||
@@ -21,7 +21,9 @@ import {
|
||||
MatProgressSpinnerModule,
|
||||
MatSidenavModule,
|
||||
MatListModule,
|
||||
MatSortModule
|
||||
MatSortModule,
|
||||
MatExpansionModule,
|
||||
MatLineModule,
|
||||
} from '@angular/material';
|
||||
|
||||
|
||||
@@ -82,6 +84,8 @@ import * as Rx from 'rxjs/Rx';
|
||||
MatSidenavModule,
|
||||
MatListModule,
|
||||
MatSortModule,
|
||||
MatExpansionModule,
|
||||
MatLineModule,
|
||||
],
|
||||
providers: [ElectronService,WebsocketService,WebsocketHandlerService, SidebarService],
|
||||
bootstrap: [AppComponent]
|
||||
|
||||
@@ -2,92 +2,80 @@
|
||||
<mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
|
||||
</div>
|
||||
<div *ngIf="settings !== null">
|
||||
|
||||
<button (click)="saveSettings()" mat-fab color="accent" class="mat-fab mat-fab-bottom-right"><mat-icon >save</mat-icon></button>
|
||||
<form *ngIf="settings.SMSGlobal != null">
|
||||
<mat-card class="exchange-card card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>SMS Global Settings</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<table cellspacing="0">
|
||||
<tr>
|
||||
<td>
|
||||
<mat-checkbox name="smsEnabled" [(ngModel)]="settings.SMSGlobal.Enabled">Enabled</mat-checkbox>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<mat-grid-list cols="2" rowHeight="3:1">
|
||||
<mat-grid-tile>
|
||||
<mat-form-field>
|
||||
<input matInput name="smsUsername" [(ngModel)]="settings.SMSGlobal.Username" [disabled]="!settings?.SMSGlobal.Enabled" placeholder="Username">
|
||||
</mat-form-field>
|
||||
</mat-grid-tile>
|
||||
<mat-grid-tile>
|
||||
<mat-form-field>
|
||||
<input matInput name="smsPassword" [(ngModel)]="settings.SMSGlobal.Password" [disabled]="!settings?.SMSGlobal.Enabled" placeholder="Password">
|
||||
</mat-form-field>
|
||||
</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
<mat-grid-list cols="3" rowHeight="2:1" *ngFor="let contact of settings.SMSGlobal?.Contacts">
|
||||
<mat-grid-tile>
|
||||
<mat-checkbox name="contactEnabled" [disabled]="!settings?.SMSGlobal.Enabled" [(ngModel)]="contact.Enabled">Enabled</mat-checkbox>
|
||||
</mat-grid-tile>
|
||||
<mat-grid-tile>
|
||||
<mat-form-field>
|
||||
<input matInput name="contactUsername" [(ngModel)]="contact.Name" [disabled]="!settings.SMSGlobal.Enabled || !contact.Enabled" placeholder="Contact Name">
|
||||
</mat-form-field>
|
||||
</mat-grid-tile>
|
||||
<mat-grid-tile>
|
||||
<mat-form-field>
|
||||
<input matInput name="contactPassword" [(ngModel)]="contact.Number" [disabled]="!settings.SMSGlobal.Enabled || !contact.Enabled" placeholder="Contact Number">
|
||||
</mat-form-field>
|
||||
</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</form>
|
||||
|
||||
<form *ngFor="let exchange of settings?.Exchanges">
|
||||
<mat-card class="exchange-card card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>{{exchange.Name}} Exchange Settings</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<table cellspacing="0">
|
||||
<tr>
|
||||
<td>
|
||||
<mat-checkbox name="exchangeEnabled" [(ngModel)]="exchange.Enabled">Enabled</mat-checkbox>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<mat-grid-list cols="3" rowHeight="2:1">
|
||||
<mat-grid-tile>
|
||||
<mat-form-field>
|
||||
<input matInput name="apiKey" [(ngModel)]="exchange.APIKey" [disabled]="!exchange.Enabled" placeholder="Exchange API Key">
|
||||
</mat-form-field>
|
||||
</mat-grid-tile>
|
||||
<mat-grid-tile>
|
||||
<mat-form-field>
|
||||
<input matInput name="apiSecretKey" [(ngModel)]="exchange.APISecret" [disabled]="!exchange.Enabled" placeholder="Exchange API Secret Key">
|
||||
</mat-form-field>
|
||||
</mat-grid-tile>
|
||||
<mat-grid-tile>
|
||||
<mat-form-field>
|
||||
<input matInput name="apiClientId" [(ngModel)]="exchange.ClientID" [disabled]="!exchange.Enabled" placeholder="Exchange API ClientID (optional)">
|
||||
</mat-form-field>
|
||||
</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
|
||||
<label>Enabled Currencies</label>
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel *ngIf="settings.SMSGlobal != null">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
SMS Global
|
||||
</mat-panel-title>
|
||||
<mat-panel-description>
|
||||
SMS configuration and contact management
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
<form class="form-content">
|
||||
<mat-checkbox name="smsEnabled" [(ngModel)]="settings.SMSGlobal.Enabled">Enabled</mat-checkbox>
|
||||
<div mat-line></div>
|
||||
<mat-form-field>
|
||||
<input matInput name="smsUsername" [(ngModel)]="settings.SMSGlobal.Username" [disabled]="!settings?.SMSGlobal.Enabled" placeholder="Username">
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput name="smsPassword" [(ngModel)]="settings.SMSGlobal.Password" [disabled]="!settings?.SMSGlobal.Enabled" placeholder="Password">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-grid-list cols="6" rowHeight="2:1">
|
||||
<mat-grid-tile *ngFor="let currency of exchange.AvailablePairs.split(',')">
|
||||
<mat-checkbox name="availableCurrency" [disabled]="true || !exchange.Enabled">{{currency}}</mat-checkbox>
|
||||
</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</form>
|
||||
<div *ngFor="let contact of settings.SMSGlobal?.Contacts">
|
||||
<mat-checkbox name="contactEnabled" [disabled]="!settings?.SMSGlobal.Enabled" [(ngModel)]="contact.Enabled">Enabled</mat-checkbox>
|
||||
<div mat-line></div>
|
||||
<mat-form-field>
|
||||
<input matInput name="contactUsername" [(ngModel)]="contact.Name" [disabled]="!settings.SMSGlobal.Enabled || !contact.Enabled" placeholder="Contact Name" />
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput name="contactPassword" [(ngModel)]="contact.Number" [disabled]="!settings.SMSGlobal.Enabled || !contact.Enabled" placeholder="Contact Number" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
</mat-expansion-panel>
|
||||
|
||||
|
||||
<mat-expansion-panel *ngFor="let exchange of settings?.Exchanges">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{exchange.Name}}
|
||||
</mat-panel-title>
|
||||
<mat-panel-description>
|
||||
Exchange Settings
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
<form class="form-content">
|
||||
<mat-checkbox name="exchangeEnabled" [(ngModel)]="exchange.Enabled">Enabled</mat-checkbox>
|
||||
<div mat-line></div>
|
||||
<div *ngIf="exchange.Enabled">
|
||||
<mat-form-field>
|
||||
<input matInput name="apiKey" [(ngModel)]="exchange.APIKey" [disabled]="!exchange.Enabled" placeholder="API Key*">
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput name="apiSecretKey" [(ngModel)]="exchange.APISecret" [disabled]="!exchange.Enabled" placeholder="API Secret Key*">
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput name="apiClientId" [(ngModel)]="exchange.ClientID" [disabled]="!exchange.Enabled" placeholder="API ClientID">
|
||||
</mat-form-field>
|
||||
<div mat-line></div>
|
||||
|
||||
<mat-panel-description>
|
||||
Enabled Currency pairs
|
||||
</mat-panel-description>
|
||||
<div mat-line></div>
|
||||
<mat-list>
|
||||
<mat-list-item *ngFor="let currency of exchange.AvailablePairs.split(',')">
|
||||
<mat-checkbox name="availableCurrency" [disabled]="true || !exchange.Enabled">{{currency}}</mat-checkbox>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</div>
|
||||
</form>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
|
||||
</div>
|
||||
@@ -5,4 +5,8 @@
|
||||
bottom: 20px;
|
||||
left: auto;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.form-content {
|
||||
margin: 20px;
|
||||
}
|
||||
@@ -1,83 +1,111 @@
|
||||
<mat-card *ngIf="wallet !== null" class="wallet-card card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Wallet Summary</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<mat-list>
|
||||
<h3 mat-subheader>Coin Totals</h3>
|
||||
<mat-list-item *ngFor="let coin of wallet?.coin_totals">
|
||||
<mat-icon mat-list-icon [ngClass]="coin.coin">{{coin.icon}}</mat-icon>
|
||||
<h4 mat-line>{{coin.coin}}</h4>
|
||||
<h4 mat-line>{{coin.balance}}</h4>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-list>
|
||||
|
||||
<h3 mat-subheader>Coins Offline</h3>
|
||||
<mat-list-item *ngFor="let coin of wallet?.coins_offline">
|
||||
<mat-icon mat-list-icon [ngClass]="coin.coin">{{coin.icon}}</mat-icon>
|
||||
<h4 mat-line>{{coin.coin}}</h4>
|
||||
<h4 mat-line>{{coin.balance}}</h4>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-list>
|
||||
|
||||
<h3 mat-subheader>Coins Online</h3>
|
||||
<mat-list-item *ngFor="let coin of wallet?.coins_online">
|
||||
<mat-icon mat-list-icon [ngClass]="coin.coin">{{coin.icon}}</mat-icon>
|
||||
<h4 mat-line>{{coin.coin}}</h4>
|
||||
<h4 mat-line>{{coin.balance}}</h4>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
<mat-list>
|
||||
<h3 mat-subheader>Online Summary</h3>
|
||||
<mat-list-item *ngFor="let coin of wallet?.online_summary.BTC">
|
||||
<mat-icon mat-list-icon class="BTC">{{coinIcon('BTC')}}</mat-icon>
|
||||
<h4 mat-line>Address: {{coin.address}}</h4>
|
||||
<h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
|
||||
</mat-list-item>
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-list-item *ngFor="let coin of wallet?.online_summary.LTC">
|
||||
<mat-icon mat-list-icon class="LTC">{{coinIcon('LTC')}}</mat-icon>
|
||||
<h4 mat-line>Address: {{coin.address}}</h4>
|
||||
<h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
|
||||
</mat-list-item>
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-list-item *ngFor="let coin of wallet?.online_summary.ETH">
|
||||
<mat-icon mat-list-icon class="ETH">{{coinIcon('ETH')}}</mat-icon>
|
||||
<h4 mat-line>Address: {{coin.address}}</h4>
|
||||
<h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-accordion *ngIf="wallet !== null">
|
||||
<mat-expansion-panel [expanded]="true">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
Coin Totals
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
|
||||
<mat-list>
|
||||
<h3 mat-subheader>Offline Summary</h3>
|
||||
<mat-list-item *ngFor="let coin of wallet?.offline_summary.BTC">
|
||||
<mat-icon mat-list-icon class="BTC">{{coinIcon('BTC')}}</mat-icon>
|
||||
<h4 mat-line>Address: {{coin.address}}</h4>
|
||||
<h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
|
||||
</mat-list-item>
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-list-item *ngFor="let coin of wallet?.offline_summary.LTC">
|
||||
<mat-list-item *ngFor="let coin of wallet?.coin_totals">
|
||||
<mat-icon mat-list-icon [ngClass]="coin.coin">{{coin.icon}}</mat-icon>
|
||||
<h4 mat-line>{{coin.coin}}</h4>
|
||||
<h4 mat-line>{{coin.balance}}</h4>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-expansion-panel>
|
||||
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
Online Summary
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<mat-list>
|
||||
<mat-list-item *ngFor="let coin of wallet?.online_summary.BTC">
|
||||
<mat-icon mat-list-icon class="BTC">{{coinIcon('BTC')}}</mat-icon>
|
||||
<h4 mat-line>Address: {{coin.address}}</h4>
|
||||
<h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
|
||||
</mat-list-item>
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-list-item *ngFor="let coin of wallet?.online_summary.LTC">
|
||||
<mat-icon mat-list-icon class="LTC">{{coinIcon('LTC')}}</mat-icon>
|
||||
<h4 mat-line>Address: {{coin.address}}</h4>
|
||||
<h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
|
||||
</mat-list-item>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-list-item *ngFor="let coin of wallet?.online_summary.ETH">
|
||||
<mat-icon mat-list-icon class="ETH">{{coinIcon('ETH')}}</mat-icon>
|
||||
<h4 mat-line>Address: {{coin.address}}</h4>
|
||||
<h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-expansion-panel>
|
||||
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
Offline Summary
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<mat-list>
|
||||
<mat-list-item *ngFor="let coin of wallet?.offline_summary.BTC">
|
||||
<mat-icon mat-list-icon class="BTC">{{coinIcon('BTC')}}</mat-icon>
|
||||
<h4 mat-line>Address: {{coin.address}}</h4>
|
||||
<h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
|
||||
</mat-list-item>
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-list-item *ngFor="let coin of wallet?.offline_summary.LTC">
|
||||
<mat-icon mat-list-icon class="LTC">{{coinIcon('LTC')}}</mat-icon>
|
||||
<h4 mat-line>Address: {{coin.address}}</h4>
|
||||
<h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
|
||||
</mat-list-item>
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-list-item *ngFor="let coin of wallet?.offline_summary.ETH">
|
||||
<mat-icon mat-list-icon class="ETH">{{coinIcon('ETH')}}</mat-icon>
|
||||
<h4 mat-line>Address: {{coin.address}}</h4>
|
||||
<h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-icon mat-list-icon class="ETH">{{coinIcon('ETH')}}</mat-icon>
|
||||
<h4 mat-line>Address: {{coin.address}}</h4>
|
||||
<h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-expansion-panel>
|
||||
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
Online Coins
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
|
||||
<mat-list>
|
||||
<mat-list-item *ngFor="let coin of wallet?.coins_online">
|
||||
<mat-icon mat-list-icon [ngClass]="coin.coin">{{coin.icon}}</mat-icon>
|
||||
<h4 mat-line>{{coin.coin}}</h4>
|
||||
<h4 mat-line>{{coin.balance}}</h4>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-expansion-panel>
|
||||
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
Offline Coins
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
|
||||
<mat-list>
|
||||
<mat-list-item *ngFor="let coin of wallet?.coins_offline">
|
||||
<mat-icon mat-list-icon [ngClass]="coin.coin">{{coin.icon}}</mat-icon>
|
||||
<h4 mat-line>{{coin.coin}}</h4>
|
||||
<h4 mat-line>{{coin.balance}}</h4>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-expansion-panel>
|
||||
|
||||
|
||||
|
||||
|
||||
</mat-accordion>
|
||||
@@ -5,15 +5,13 @@ body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y: hidden;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.loading-spinner {
|
||||
margin-left:50%;
|
||||
margin-right:50%;
|
||||
margin-left: 50%;
|
||||
margin-right: 50%;
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// Default settings for cards
|
||||
////////////////////////////////////////////////////////////////
|
||||
@@ -22,13 +20,24 @@ body {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// Default settings for expandable tile menus
|
||||
////////////////////////////////////////////////////////////////
|
||||
.mat-expansion-panel {
|
||||
width: 80%;
|
||||
margin: 0px auto !important;
|
||||
}
|
||||
|
||||
.mat-expansion-panel-header-description {
|
||||
flex-grow: 0 !important;
|
||||
}
|
||||
|
||||
.mat-drawer {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
|
||||
|
||||
|
||||
/*
|
||||
deeppurple-amber.css
|
||||
indigo-pink.css
|
||||
|
||||
Reference in New Issue
Block a user