Debug window console

src/app/core-ui/main/main-view.component.html

@@ -82,16 +82,16 @@
     </mat-content><!-- .sidebar-section -->
 
 
-    <!--mat-content class="sidebar-section">
+    <!-- <mat-content class="sidebar-section">
       <mat-list class="sidebar-item-group">
-        <a class="sidebar-item-link" routerLinkActive="active" routerLink="/settings">
+        <a class="sidebar-item-link" routerLinkActive="active" routerLink="/wallet/settings">
           <mat-list-item class="sidebar-item">
             <mat-icon class="icon" fontSet="partIcon" fontIcon="part-cog"></mat-icon>
             <span class="text">Settings</span>
           </mat-list-item>
         </a>
       </mat-list>
-    </mat-content--><!-- .sidebar-section -->
+    </mat-content> --><!-- .sidebar-section -->
 
 
     <footer class="pin-to-bottom">

src/app/core-ui/main/main-view.module.ts

@@ -8,8 +8,11 @@ import { CoreModule } from '../../core/core.module';
 
 import { MainViewComponent } from './main-view.component';
 import { StatusComponent } from './status/status.component';
+import { ConsoleModalComponent } from './status/modal/help-modal/console-modal.component';
+
 import { TransactionService } from '../../wallet/wallet/shared/transaction.service';
 
+
 @NgModule({
   imports: [
     CommonModule,
@@ -22,6 +25,10 @@ import { TransactionService } from '../../wallet/wallet/shared/transaction.servi
   declarations: [
     MainViewComponent,
     StatusComponent,
+    ConsoleModalComponent
+  ],
+  entryComponents: [
+    ConsoleModalComponent
   ],
   providers: [
     TransactionService

src/app/core-ui/main/status/modal/help-modal/command.model.ts

@@ -0,0 +1,20 @@
+export class Command {
+
+  constructor(private type: number, private text: string, private time: string, private code?: number) { }
+
+  public getType() {
+    return this.type;
+  }
+
+  public getText() {
+    return this.text;
+  }
+
+  public getCode() {
+    return this.code;
+  }
+
+  public logTime() {
+    return this.time;
+  }
+}

src/app/core-ui/main/status/modal/help-modal/console-modal.component.html

@@ -0,0 +1,57 @@
+<div class="containerX">
+  <div mat-dialog-container>
+    <mat-tab-group>
+      <mat-tab label="Console">
+        <div class="console-modal-form">
+          <div  fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center">
+            <div  fxFlex="10">
+              {{currentTime}}
+            </div>
+            <div  fxFlex="10">
+              <!-- @Todo Need to change icon -->
+              <mat-icon fontSet="faIcon" fontIcon="fa-mars-stroke-v"></mat-icon>
+            </div>
+            <div  fxFlex="80">
+              <p>
+                <span>Welcome to the Particl Core RPC console.Use up and down arrows to navigate history, and Ctrl-L to clear screen.Type help for an overview of available commands.</span>
+              </p>
+              <p>
+                <span class="warn-text">WARNING: Scammers have been active, telling users to type commands here, stealing their wallet contents. Do not use this console without fully understanding the ramification of a command.</span>
+              </p>
+            </div>
+          </div>
+
+          <div class="content-modal" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center" *ngFor="let list of commandList">
+            <div  fxFlex="10">
+              {{list.time}}
+            </div>
+            <div  fxFlex="10" fxLayoutAlign="top top">
+              <!-- @Todo Need to change icon -->
+              <mat-icon fontSet="faIcon" fontIcon="fa-mars-stroke-h" *ngIf="list.getType() === 1"></mat-icon>
+              <!-- @Todo Need to change icon -->
+              <mat-icon fontSet="faIcon" fontIcon="fa-mars-stroke-v" *ngIf="list.getType() === 2"></mat-icon>
+            </div>
+            <div  fxFlex="80">
+              <p [ngClass]="{'warn-text': list.getCode() === -1, 'space-text': list.getType() === 2 }">
+                {{list.getText()}}
+              </p>
+            </div>
+          </div>
+        </div>
+        <div  fxLayout="row" fxLayoutGap="5px" fxLayoutAlign="center center">
+          <mat-form-field fxFlex="1 1 100%">
+            <input matInput [(ngModel)]="command">
+          </mat-form-field>
+          <span matTooltip="Enter">
+            <!-- @Todo Need to change icon -->
+            <mat-icon fontSet="faIcon" fontIcon="fa-sign-in"></mat-icon>
+          </span>
+          <span matTooltip="Clear">
+            <!-- @Todo Need to change icon -->
+            <mat-icon fontSet="faIcon" fontIcon="fa-times-circle-o" color="warn" (click)="clearCommands()"></mat-icon>
+          </span>
+        </div>
+      </mat-tab>
+    </mat-tab-group>
+  </div>
+</div>

src/app/core-ui/main/status/modal/help-modal/console-modal.component.scss

@@ -0,0 +1,15 @@
+.console-modal-form {
+	width: 100%;
+	height: 450px;
+	overflow-y: scroll;
+}
+.warn-text {
+	color: #f44336;
+}
+.content-modal {
+	max-height: none !important;
+}
+
+.space-text {
+	white-space: pre-line;
+}

src/app/core-ui/main/status/modal/help-modal/console-modal.component.spec.ts

@@ -0,0 +1,41 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatDialogRef } from '@angular/material';
+
+import { CoreModule } from '../../../../../core/core.module';
+import { SharedModule } from '../../../../../wallet/shared/shared.module';
+import { ModalsModule } from '../../../../../modals/modals.module';
+import { CoreUiModule } from '../../../../core-ui.module';
+
+import { ConsoleModalComponent } from './console-modal.component';
+
+describe('ConsoleModalComponent', () => {
+  let component: ConsoleModalComponent;
+  let fixture: ComponentFixture<ConsoleModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        SharedModule,
+        CoreModule.forRoot(),
+        ModalsModule,
+        CoreUiModule.forRoot()
+      ],
+      providers: [
+        /* deps */
+        { provide: MatDialogRef}
+        ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConsoleModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+});

src/app/core-ui/main/status/modal/help-modal/console-modal.component.ts

@@ -0,0 +1,84 @@
+import {Component, OnInit, HostListener } from '@angular/core';
+import { MatDialog, MatDialogRef } from '@angular/material';
+import { Log } from 'ng2-logger';
+
+import { DateFormatter } from '../../../../../wallet/shared/util/utils';
+
+import { RpcService } from '../../../../../core/core.module';
+import { Command } from './command.model';
+
+@Component({
+  selector: 'app-console-modal',
+  templateUrl: './console-modal.component.html',
+  styleUrls: ['./console-modal.component.scss']
+})
+export class ConsoleModalComponent implements OnInit {
+
+  log: any = Log.create('app-console-modal');
+  public commandList: Array<any> = [];
+  public command: string;
+  public currentTime: string;
+
+
+  constructor(public dialogRef: MatDialogRef<ConsoleModalComponent>,
+              private _rpc: RpcService,
+              private dialog: MatDialog) {
+  }
+
+  ngOnInit() {
+    this.getCurrentTime();
+  }
+
+  rpcCall() {
+    const params = this.command.split(' ');
+    this._rpc.call(params.shift(), params)
+      .subscribe(
+        response => this.formatSuccessResponse(response),
+        error => this.formatErrorResponse(error));
+  }
+
+  formatSuccessResponse(response: any) {
+    let respText = '';
+    if (typeof response === 'object') {
+      respText = JSON.stringify(response, null, 1);
+    } else {
+      respText = response;
+    }
+    this.commandList.push(new Command(1, this.command, this.getDateFormat()),
+      new Command(2, respText, this.getDateFormat(), 200));
+    this.command = '';
+  }
+
+  formatErrorResponse(error: any) {
+    if (error.code === -1) {
+      this.commandList.push(new Command(1, this.command, this.getDateFormat()),
+        new Command(2, error.message, this.getDateFormat(), -1));
+      this.command = '';
+    }
+  }
+
+  clearCommands() {
+    this.commandList = [];
+  }
+
+    /* Time stuff */
+  getCurrentTime() {
+    this.currentTime = this.getDateFormat();
+  }
+
+  getDateFormat() {
+    return new DateFormatter(new Date()).hourSecFormatter();
+  }
+
+  // capture the enter button
+  @HostListener('window:keydown', ['$event'])
+  keyDownEvent(event: any) {
+    if (event.keyCode === 13) {
+      this.rpcCall();
+    }
+    if (event.ctrlKey && event.keyCode === 76) {
+      this.clearCommands();
+    }
+  }
+
+}

src/app/core-ui/main/status/status.component.html

@@ -20,4 +20,14 @@
     container="body">
       <mat-icon fontSet="partIcon" fontIcon="part-snowflake"></mat-icon>
   </span>
+
+  <span
+    class="encryption icon"
+    matTooltip="Console Debug Window"
+    placement="left"
+    container="body"
+    (click)="openConsoleWindow()">
+      <!-- @Todo Need to change icon -->
+      <mat-icon fontSet="partIcon" fontIcon="fa-window-maximize"></mat-icon>
+  </span>
 </div><!-- .status-icons -->

src/app/core-ui/main/status/status.component.ts

@@ -5,9 +5,10 @@ import { Log } from 'ng2-logger';
 import { MatDialog} from '@angular/material';
 
 import { ModalsService } from '../../../modals/modals.service';
-
 import { RpcService, StateService } from '../../../core/core.module';
 
+import { ConsoleModalComponent } from './modal/help-modal/console-modal.component';
+
 @Component({
   selector: 'app-status',
   templateUrl: './status.component.html',
@@ -26,7 +27,8 @@ export class StatusComponent implements OnInit {
   constructor(
     private _rpc: RpcService,
     private _modalsService: ModalsService,
-    private _stateService: StateService) { }
+    private _stateService: StateService,
+    private dialog: MatDialog) { }
 
   ngOnInit() {
     this._rpc.state.observe('connections')
@@ -91,4 +93,9 @@ export class StatusComponent implements OnInit {
         break;
     }
   }
+
+  /* Open Debug Console Window */
+  openConsoleWindow() {
+    const dialogRef = this.dialog.open(ConsoleModalComponent);
+  }
 }

src/app/wallet/settings/settings.component.html

@@ -21,6 +21,11 @@
           Display
         </a>
       </li>
+      <li [class.active]="tab == 'help'">
+        <a href="javascript:void(0)" (click)="settingsTab('help')">
+          Help
+        </a>
+      </li>
       <!--<li [class.active]="tab == 'i2p'">
         <a href="javascript:void(0)" (click)="settingsTab('i2p')">
           I2P
@@ -297,7 +302,8 @@
     </div>
   </div>
 
-  <div class="pull-right">
+
+  <div class="pull-right" *ngIf="tab !== 'help'">
     <button (click)="cancel()">Cancel</button>
     <button (click)="apply()">Apply</button>
     <button class="validate" (click)="validate()">OK</button>

src/app/wallet/settings/settings.component.ts

@@ -1,7 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { SettingsService } from './settings.service';
+import { MatDialog } from '@angular/material';
 import { Location } from '@angular/common';
 
+import { SettingsService } from './settings.service';
+
 @Component({
   selector: 'app-settings',
   templateUrl: './settings.component.html',
@@ -18,7 +20,8 @@ export class SettingsComponent implements OnInit {
 
   constructor(
     private _settingsService: SettingsService,
-    private _location: Location
+    private _location: Location,
+    private dialog: MatDialog
   ) { }
 
   ngOnInit() {
@@ -32,6 +35,9 @@ export class SettingsComponent implements OnInit {
 
   settingsTab(tab: string) {
     this.tab = tab;
+    if (tab === 'help') {
+      // const dialogRef = this.dialog.open(ConsoleModalComponent);
+    }
   }
 
   apply() {

src/app/wallet/shared/util/utils.ts

@@ -166,3 +166,26 @@ export class AddressHelper {
       '' : this.getAddress(event.clipboardData.getData('text'));
   }
 }
+
+export class DateFormatter {
+
+  constructor(private date: Date) {
+  }
+
+  public dateFormatter() {
+    return (
+      (this.date.getDate() < 10 ? '0' + this.date.getDate() : this.date.getDate()) + '-' +
+      ((this.date.getMonth() + 1) < 10 ? '0' + (this.date.getMonth() + 1) : (this.date.getMonth() + 1)) + '-' +
+      (this.date.getFullYear() < 10 ? '0' + this.date.getFullYear() : this.date.getFullYear()) + ' ' +
+      this.hourSecFormatter()
+    )
+  }
+
+  public hourSecFormatter() {
+      return (
+        (this.date.getHours() < 10 ? '0' + this.date.getHours() : this.date.getHours()) + ':' +
+        (this.date.getMinutes() < 10 ? '0' + this.date.getMinutes() : this.date.getMinutes()) + ':' +
+        (this.date.getSeconds() < 10 ? '0' + this.date.getSeconds() : this.date.getSeconds())
+      )
+  }
+}