Widget prepared

package.json

@@ -69,6 +69,7 @@
     "rxjs-compat": "^6.5.2",
     "tree-kill": "^1.2.1",
     "typeface-roboto": "^0.0.75",
+    "xterm": "^3.14.5",
     "yargs": "^13.3.0",
     "zone.js": "^0.9.1"
   },

src/app/app.module.ts

@@ -191,6 +191,7 @@ import { DuplicateActionComponent } from './components/project-map/context-menu/
 import { MapSettingService } from './services/mapsettings.service';
 import { ProjectMapMenuComponent } from './components/project-map/project-map-menu/project-map-menu.component';
 import { HelpComponent } from './components/help/help.component';
+import { LogConsoleComponent } from './components/project-map/log-console/log-console.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -312,7 +313,8 @@ if (environment.production) {
     ConsoleComponent,
     NodesMenuComponent,
     ProjectMapMenuComponent,
-    HelpComponent
+    HelpComponent,
+    LogConsoleComponent
   ],
   imports: [
     BrowserModule,

src/app/components/project-map/log-console/log-console.component.html

@@ -0,0 +1,21 @@
+<div class="consoleWrapper">
+    <div class="consoleHeader">
+        <span>Console</span>
+        <div class="consoleMenu">
+            <mat-icon>help_outline</mat-icon>
+            <mat-icon>close</mat-icon>
+        </div>
+    </div>
+    <div class="divider"></div>
+    <div #console class="console"></div>
+    <div class="divider"></div>
+    <div class="consoleInput">
+        <mat-icon>keyboard_arrow_right</mat-icon>
+        <input
+            class="commandLine"
+            autofocus
+            (keydown)="onKeyDown($event)"
+            type="text"
+            [(ngModel)]="command"/>
+    </div>
+</div>

src/app/components/project-map/log-console/log-console.component.scss

@@ -0,0 +1,76 @@
+.consoleWrapper {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    height: 120px;
+    width: 600px;
+    background: #263238;
+    color: white;
+    overflow: hidden;
+    font-size: 12px;
+}
+
+.consoleHeader {
+    width: 100%;
+    height: 24px;
+    font-size: 12px;
+    overflow: hidden;
+    margin-right: 5px;
+    display: flex;
+    padding: 2px;
+    justify-content: space-between;
+}
+
+.console {
+    width: 596px;
+    height: 64px;
+    overflow-y: scroll;
+    margin: 2px;
+    color: #dbd5d5;
+    scrollbar-color: darkgrey #263238;
+    scrollbar-width: thin;
+}
+
+.consoleInput {
+    width: 100%;
+    height: 24px;
+    padding: 2px;
+    display: flex;
+}
+
+.commandLine {
+    background-color: #263238;
+    color: white;
+    border: none;
+}
+
+.divider {
+    width: 580px;
+    margin-left: 10px;
+    margin-right: 10px;
+    height: 2px;
+}
+
+mat-icon {
+    font-size: 18px;
+    width: 20px;
+    height: 20px;
+}
+
+input:focus{
+    outline: none;
+}
+
+::-webkit-scrollbar {
+    width: 0.5em;
+}
+ 
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+}
+ 
+::-webkit-scrollbar-thumb {
+  background-color: darkgrey;
+  outline: 1px solid #263238;
+}

src/app/components/project-map/log-console/log-console.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit, AfterViewInit, OnDestroy, Input, ViewChild, ElementRef } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { ProjectWebServiceHandler } from '../../../handlers/project-web-service-handler';
+
+
+@Component({
+    selector: 'app-log-console',
+    templateUrl: './log-console.component.html',
+    styleUrls: ['./log-console.component.scss']
+})
+export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
+    @ViewChild('console', {static: false}) console: ElementRef;
+    private subscription: Subscription;
+    command: string = '';
+
+    constructor(
+        private projectWebServiceHandler: ProjectWebServiceHandler
+    ) {}
+    
+    ngOnInit() {
+        this.subscription = this.projectWebServiceHandler.logEmitter.subscribe((event) => {
+            let message = `Event received: ${event.action}.`
+            this.showMessage(message);
+        })
+    }
+
+    ngAfterViewInit() {
+        this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
+    }
+
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+
+    onKeyDown(event) {
+        if (event.key === "Enter") {
+          this.handleCommand();
+        }
+    }
+
+    handleCommand() {
+        if (this.command === 'start all') {
+            this.showMessage("Starting all nodes...");
+        } else {
+            this.showMessage(`Unknown syntax: ${this.command}`);
+        }
+        this.command = '';
+    }
+
+    showMessage(message: string) {
+        this.console.nativeElement.innerHTML += message += "<br />";
+        this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
+    }
+}

src/app/components/project-map/project-map.component.html

@@ -120,3 +120,4 @@
 <app-node-label-dragged [server]="server"></app-node-label-dragged>
 <app-text-added [server]="server" [project]="project" (drawingSaved)="onDrawingSaved()"> </app-text-added>
 <app-text-edited [server]="server"></app-text-edited>
+<app-log-console></app-log-console>

src/app/handlers/project-web-service-handler.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, EventEmitter } from '@angular/core';
 import { Subject } from 'rxjs';
 
 import { NodesDataSource } from '../cartography/datasources/nodes-datasource';
@@ -15,6 +15,8 @@ export class WebServiceMessage {
 
 @Injectable()
 export class ProjectWebServiceHandler {
+  public logEmitter = new EventEmitter<any>();
+
   constructor(
     private nodesDataSource: NodesDataSource,
     private linksDataSource: LinksDataSource,
@@ -22,6 +24,9 @@ export class ProjectWebServiceHandler {
   ) {}
 
   public handleMessage(message: WebServiceMessage) {
+    if( message.action !== 'ping' && message.action !== 'compute.updated') {
+      this.logEmitter.emit(message);
+    }
     if (message.action === 'node.updated') {
       this.nodesDataSource.update(message.event as Node);
     }

yarn.lock

@@ -9006,6 +9006,11 @@ xtend@~2.1.1:
   dependencies:
     object-keys "~0.4.0"
 
+xterm@^3.14.5:
+  version "3.14.5"
+  resolved "https://registry.npmjs.org/xterm/-/xterm-3.14.5.tgz#c9d14e48be6873aa46fb429f22f2165557fd2dea"
+  integrity sha512-DVmQ8jlEtL+WbBKUZuMxHMBgK/yeIZwkXB81bH+MGaKKnJGYwA+770hzhXPfwEIokK9On9YIFPRleVp/5G7z9g==
+
 y18n@^3.2.1:
   version "3.2.1"
   resolved "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"