Fix for style

2025-02-20 17:52:46 +00:00 · 2020-03-27 22:20:40 +01:00 · 2020-03-27 22:20:40 +01:00 · 6e21cfeb4f
commit 6e21cfeb4f
parent 2c3387c960
6 changed files with 66 additions and 174 deletions
--- a/src/app/components/project-map/console-wrapper/console-wrapper.component.html
+++ b/src/app/components/project-map/console-wrapper/console-wrapper.component.html
@ -19,9 +19,6 @@
        <mat-tab>
            <ng-template mat-tab-label>
                <div class="col" style="margin-left: 20px;">GNS3 console</div>
-                <button *ngIf="tab !== 'GNS3 console'" style="color:white" mat-icon-button (click)="removeTab(index)">
-                    <mat-icon>close</mat-icon>
-                </button>
            </ng-template>
        </mat-tab>

@ -32,16 +29,12 @@
                    <mat-icon>close</mat-icon>
                </button>
            </ng-template>
-
-            <!-- <ng-template matTabContent>
-                <div>
-                    <app-web-console [server]="server" [node]="node"></app-web-console>
-                </div>
-            </ng-template> -->
        </mat-tab>

    </mat-tab-group>

+    <app-log-console [hidden]="!(selected.value===0)" [server]="server" [project]="project" (closeConsole)='toggleShowConsole($event)'></app-log-console>
+
    <div *ngFor="let node of nodes; let index = index">
        <app-web-console [hidden]="!(selected.value===(index+1))" [server]="server" [node]="nodes[index]"></app-web-console>
    </div>
--- a/src/app/components/project-map/context-menu/actions/http-console/http-console-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/http-console/http-console-action.component.ts
@ -2,6 +2,7 @@ import { Component, OnInit, Input } from '@angular/core';
 import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
 import { NodeConsoleService } from '../../../../../services/nodeConsole.service';
+import { ToasterService } from '../../../../../services/toaster.service';


@Component({
@ -13,12 +14,19 @@ export class HttpConsoleActionComponent implements OnInit {
  @Input() nodes: Node[];

  constructor(
-    private consoleService: NodeConsoleService
+    private consoleService: NodeConsoleService,
+    private toasterService: ToasterService
  ) { }

  ngOnInit() {}

  openConsole() {
-    this.consoleService.openConsoleForNode(this.nodes[0]);
+    this.nodes.forEach(n => {
+      if (n.status === 'started') {
+        this.consoleService.openConsoleForNode(n);
+      } else {
+        this.toasterService.error('To open console please start the node');
+      }
+    });
  }
 }
--- a/src/app/components/project-map/log-console/log-console.component.html
+++ b/src/app/components/project-map/log-console/log-console.component.html
@ -1,70 +1,32 @@
-<div
-    *ngIf="isDraggingEnabled"
-    (document:mousemove)="dragWidget($event)"
-    (document:mouseup)="toggleDragging(false)">   
-</div>
-<div 
-    class="consoleWrapper"
-    [ngClass]="{lightTheme: isLightThemeEnabled}"
-    (mousedown)="toggleDragging(true)"
-    [ngStyle]="style" 
-    mwlResizable
-    [validateResize]="validate"
-    [resizeEdges]="{ right: true, left: true, bottom: true, top: true }"
-    [enableGhostResize]="true"
-    (resizeStart)="toggleDragging(false)"
-    (resizeEnd)="onResizeEnd($event)">
-
-    <mat-tab-group [selectedIndex]="selected.value"
-               (selectedIndexChange)="selected.setValue($event)">
-    <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
-        <ng-template mat-tab-label>
-            <div class="col" style="margin-left: 20px;">{{tab}}</div>
-            <button *ngIf="tab !== 'GNS3 console'" style="color:white" mat-icon-button (click)="removeTab(index)">
-                <mat-icon>close</mat-icon>
-            </button>
-        </ng-template>
-
-        <div *ngIf="tab !== 'GNS3 console'">
-            <app-web-console [server]="server" [node]="node"></app-web-console>
-        </div>
-    </mat-tab>
-    </mat-tab-group>
-
-    <!-- <div class="consoleHeader">
-        <div class="consoleFiltering">
-            <button [ngClass]="{lightTheme: isLightThemeEnabled}" class="filterButton" [matMenuTriggerFor]="filterMenu">
-                Apply filter
-            </button>
-            <mat-menu #filterMenu="matMenu" xPosition="after">
-                <button (click)="applyFilter('all')" mat-menu-item>all</button>
-                <button (click)="applyFilter('errors')" mat-menu-item>errors</button>
-                <button (click)="applyFilter('warnings')" mat-menu-item>warnings</button>
-                <button (click)="applyFilter('info')" mat-menu-item>info</button>
-                <button (click)="applyFilter('map updates')" mat-menu-item>map updates</button>
-                <button (click)="applyFilter('server requests')" mat-menu-item>server requests</button>
-            </mat-menu>
-        </div>
-
-        <div class="consoleMenu">
-            <mat-icon (click)="close()" class="closeButton">close</mat-icon>
-        </div>
+<div class="consoleHeader">
+    <div class="consoleFiltering">
+        <button [ngClass]="{lightTheme: isLightThemeEnabled}" class="filterButton" [matMenuTriggerFor]="filterMenu">
+            Apply filter
+        </button>
+        <mat-menu #filterMenu="matMenu" xPosition="after">
+            <button (click)="applyFilter('all')" mat-menu-item>all</button>
+            <button (click)="applyFilter('errors')" mat-menu-item>errors</button>
+            <button (click)="applyFilter('warnings')" mat-menu-item>warnings</button>
+            <button (click)="applyFilter('info')" mat-menu-item>info</button>
+            <button (click)="applyFilter('map updates')" mat-menu-item>map updates</button>
+            <button (click)="applyFilter('server requests')" mat-menu-item>server requests</button>
+        </mat-menu>
    </div>
-
-    <div [ngClass]="{lightTheme: isLightThemeEnabled}" #console class="console" [ngStyle]="styleInside">
-        <span class="console-item" *ngFor="let event of filteredEvents">
-            {{event.message}} <br/>
-        </span>
-    </div>
-
-    <div [ngClass]="{lightTheme: isLightThemeEnabled}" class="consoleInput">
-        <mat-icon class="inputIcon">keyboard_arrow_right</mat-icon>
-        <input
-            [ngClass]="{lightTheme: isLightThemeEnabled}"
-            class="commandLine"
-            autofocus
-            (keydown)="onKeyDown($event)"
-            type="text"
-            [(ngModel)]="command"/>
-    </div> -->
+</div>
+
+<div [ngClass]="{lightTheme: isLightThemeEnabled}" #console class="console" [ngStyle]="style">
+    <span class="console-item" *ngFor="let event of filteredEvents">
+        {{event.message}} <br/>
+    </span>
+</div>
+
+<div [ngClass]="{lightTheme: isLightThemeEnabled}" class="consoleInput">
+    <mat-icon class="inputIcon">keyboard_arrow_right</mat-icon>
+    <input
+        [ngClass]="{lightTheme: isLightThemeEnabled}"
+        class="commandLine"
+        autofocus
+        (keydown)="onKeyDown($event)"
+        type="text"
+        [(ngModel)]="command"/>
 </div>
--- a/src/app/components/project-map/log-console/log-console.component.scss
+++ b/src/app/components/project-map/log-console/log-console.component.scss
@ -33,7 +33,7 @@

 .consoleHeader {
    width: 100%;
-    height: 30px;
+    height: 40px;
    font-size: 12px;
    overflow: hidden;
    display: flex;
--- a/src/app/components/project-map/log-console/log-console.component.ts
+++ b/src/app/components/project-map/log-console/log-console.component.ts
@ -1,4 +1,4 @@
-import { Component, OnInit, AfterViewInit, OnDestroy, Input, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, AfterViewInit, OnDestroy, Input, ViewChild, ElementRef, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { ProjectWebServiceHandler } from '../../../handlers/project-web-service-handler';
 import { NodeService } from '../../../services/node.service';
@ -18,6 +18,7 @@ import { FormControl } from '@angular/forms';


@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'app-log-console',
    templateUrl: './log-console.component.html',
    styleUrls: ['./log-console.component.scss']
@ -36,11 +37,11 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
    private errorSubscription: Subscription;
    private warningSubscription: Subscription;
    private infoSubscription: Subscription;
-    command: string = '';

-    filters: string[] = ['all', 'errors', 'warnings', 'info', 'map updates', 'server requests'];
-    selectedFilter: string = 'all';
-    filteredEvents: LogEvent[] = [];
+    public command: string = '';
+    public filters: string[] = ['all', 'errors', 'warnings', 'info', 'map updates', 'server requests'];
+    public selectedFilter: string = 'all';
+    public filteredEvents: LogEvent[] = [];

    private regexStart: RegExp = /^start (.*?)$/;
    private regexStop: RegExp = /^stop (.*?)$/;
@ -50,10 +51,9 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
    private regexConsole: RegExp = /^console (.*?)$/;

    public style: object = {};
-    public styleInside: object = { height: `120px` };
-
-    isDraggingEnabled: boolean = false;
+    public isDraggingEnabled: boolean = false;
    public isLightThemeEnabled: boolean = false;
+    public selected = new FormControl(0);

    constructor(
        private projectWebServiceHandler: ProjectWebServiceHandler,
@ -61,26 +61,14 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
        private nodesDataSource: NodesDataSource,
        private logEventsDataSource: LogEventsDataSource,
        private httpService: HttpServer,
-        private themeService: ThemeService
+        private themeService: ThemeService,
+        private cd: ChangeDetectorRef
    ) {}
-
-    tabs = ['GNS3 console', 'PC2'];
-    selected = new FormControl(0);
-
-    addTab(selectAfterAdding: boolean) {
-        this.tabs.push('New');
-
-        if (selectAfterAdding) {
-        this.selected.setValue(this.tabs.length - 1);
-        }
-    }
-
-    removeTab(index: number) {
-        this.tabs.splice(index, 1);
-    }
    
    ngOnInit() {
-        this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false; 
+        this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false
+        this.style = { bottom: '20px', left: '20px', width: '720px', height: '340px'};
+
        this.nodeSubscription = this.projectWebServiceHandler.nodeNotificationEmitter.subscribe((event) => {
            let node: Node = event.event as Node;
            let message: string = '';
@ -136,44 +124,10 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
                message: message
            });
        });
-
-        this.style = { bottom: '20px', left: '20px', width: '600px', height: '180px'};
-    }
-
-    toggleDragging(value: boolean) {
-        this.isDraggingEnabled = value;
-    }
-
-    dragWidget(event) {
-        let x: number = Number(event.movementX);
-        let y: number = Number(event.movementY);
-
-        let width: number = Number(this.style['width'].split('px')[0]);
-        let height: number = Number(this.style['height'].split('px')[0]);
-        let left: number = Number(this.style['left'].split('px')[0]) + x;
-        if (this.style['top']) {
-            let top: number = Number(this.style['top'].split('px')[0]) + y;
-            this.style = {
-                position: 'fixed',
-                left: `${left}px`,
-                top: `${top}px`,
-                width: `${width}px`,
-                height: `${height}px`
-            };
-        } else {
-            let bottom: number = Number(this.style['bottom'].split('px')[0]) - y;
-            this.style = {
-                position: 'fixed',
-                left: `${left}px`,
-                bottom: `${bottom}px`,
-                width: `${width}px`,
-                height: `${height}px`
-            };
-        }
    }

    ngAfterViewInit() {
-        // this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
+        this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
    }

    ngOnDestroy() {
@ -186,36 +140,10 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
        this.infoSubscription.unsubscribe();
    }

-    validate(event: ResizeEvent): boolean {
-        if (
-            event.rectangle.width &&
-            event.rectangle.height &&
-            (event.rectangle.width < 600 ||
-            event.rectangle.height < 180)
-        ) {
-            return false;
-        }
-        return true;
-    }
-
-    onResizeEnd(event: ResizeEvent): void {
-        this.style = {
-            position: 'fixed',
-            left: `${event.rectangle.left}px`,
-            top: `${event.rectangle.top}px`,
-            width: `${event.rectangle.width}px`,
-            height: `${event.rectangle.height}px`
-        };
-
-        this.styleInside = {
-            height: `${event.rectangle.height - 60}px`,
-            width: `${event.rectangle.width}px`
-        };
-    }
-
    applyFilter(filter: string) {
        this.selectedFilter = filter;
        this.filteredEvents = this.getFilteredEvents();
+        this.cd.detectChanges();
    }

    onKeyDown(event) {
@ -297,6 +225,7 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
            this.showCommand(`Unknown syntax: ${this.command}`);
        }
        this.command = '';
+        this.cd.detectChanges();
    }

    clearConsole() {
@ -312,13 +241,14 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
    }

    showMessage(event: LogEvent) {
-        // this.logEventsDataSource.add(event);
-        // this.filteredEvents = this.getFilteredEvents();
-        // this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
+        this.logEventsDataSource.add(event);
+        this.filteredEvents = this.getFilteredEvents();
+        this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;

-        // setTimeout( () => { 
-        //     this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
-        // }, 100 );
+        setTimeout( () => { 
+            this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
+        }, 100 );
+        this.cd.detectChanges();
    }

    getFilteredEvents(): LogEvent[] {
--- a/src/app/components/project-map/web-console/web-console.component.ts
+++ b/src/app/components/project-map/web-console/web-console.component.ts
@ -48,7 +48,6 @@ export class WebConsoleComponent implements OnInit, AfterViewInit {
        const attachAddon = new AttachAddon(socket);
        this.term.loadAddon(attachAddon);
        this.term.setOption('cursorBlink', true);
-
        this.term.loadAddon(this.fitAddon);
        this.fitAddon.activate(this.term);
        this.term.focus();