Button on map to show/hide console

src/app/app.module.ts

@@ -192,6 +192,7 @@ 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';
+import { LogEventsDataSource } from './components/project-map/log-console/log-events-datasource';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -354,6 +355,7 @@ if (environment.production) {
     LinksDataSource,
     NodesDataSource,
     SymbolsDataSource,
+    LogEventsDataSource,
     SelectionManager,
     InRectangleHelper,
     DrawingsDataSource,

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

@@ -9,6 +9,7 @@ import { Drawing } from '../../../cartography/models/drawing';
 import { Link } from '../../../models/link';
 import { Node } from '../../../cartography/models/node';
 import { Port } from '../../../models/port';
+import { LogEventsDataSource } from './log-events-datasource';
 
 
 @Component({
@@ -34,7 +35,8 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
     constructor(
         private projectWebServiceHandler: ProjectWebServiceHandler,
         private nodeService: NodeService,
-        private nodesDataSource: NodesDataSource
+        private nodesDataSource: NodesDataSource,
+        private logEventsDataSource: LogEventsDataSource
     ) {}
     
     ngOnInit() {
@@ -56,6 +58,7 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
     }
 
     ngAfterViewInit() {
+        this.console.nativeElement.innerHTML = this.logEventsDataSource.getItems()[0] ? this.logEventsDataSource.getItems()[0] : '';
         this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
     }
 
@@ -130,8 +133,16 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
         this.command = '';
     }
 
+    clearConsole() {
+        this.console.nativeElement.innerHTML = '';
+        this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
+    }
+
     showMessage(message: string) {
-        this.console.nativeElement.innerHTML += message += "<br />";
+        this.logEventsDataSource.clear();
+        this.logEventsDataSource.add(this.console.nativeElement.innerHTML + message + " <br />");
+
+        this.console.nativeElement.innerHTML += message += " <br />";
         this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
     }
 

src/app/components/project-map/log-console/log-events-datasource.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+import { DataSource } from '../../../cartography/datasources/datasource';
+
+@Injectable()
+export class LogEventsDataSource extends DataSource<string> {
+  protected getItemKey(log: string) {
+    return log;
+  }
+}

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

@@ -49,7 +49,7 @@
       </mat-menu>
 
       <mat-toolbar-row>
-        <button matTooltip="Show/hide interface labels" mat-icon-button [matMenuTriggerFor]="viewMenu"><mat-icon>view_module</mat-icon></button>
+        <button matTooltip="Map settings" mat-icon-button [matMenuTriggerFor]="viewMenu"><mat-icon>view_module</mat-icon></button>
       </mat-toolbar-row>
 
       <mat-menu #viewMenu="matMenu" [overlapTrigger]="false">
@@ -57,6 +57,9 @@
           <mat-checkbox [ngModel]="project.show_interface_labels" (change)="toggleShowInterfaceLabels($event.checked)">
             Show interface labels
           </mat-checkbox>
+          <mat-checkbox [ngModel]="isConsoleVisible" (change)="toggleShowConsole($event.checked)">
+            Show console
+          </mat-checkbox>
         </div>
       </mat-menu>
 
@@ -120,4 +123,6 @@
 <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 [server]="server" [project]="project"></app-log-console>
+<div [ngClass]="{ visible: !isConsoleVisible }">
+    <app-log-console [server]="server" [project]="project"></app-log-console>
+</div>

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

@@ -230,3 +230,7 @@ g.node text,
 .context-menu-items .mat-menu-item:focus {
   background: none;
 }
+
+.visible {
+  display: none;
+}

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

@@ -68,6 +68,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   public server: Server;
   public ws: WebSocket;
   public isProjectMapMenuVisible: boolean = false;
+  public isConsoleVisible: boolean = false;
 
   tools = {
     selection: true,
@@ -362,6 +363,10 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     this.project.show_interface_labels = enabled;
   }
 
+  public toggleShowConsole(visible: boolean) {
+    this.isConsoleVisible = visible;
+  }
+
   public hideMenu() {
     this.projectMapMenuComponent.resetDrawToolChoice()
     this.isProjectMapMenuVisible = false;