Option to resize console

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

@@ -3,7 +3,7 @@
     (document:mousemove)="dragWidget($event)"
     (document:mouseup)="toggleDragging(false)">   
 </div>
-<!-- Option with resizing
+<!-- Option with resizing -->
 <div 
     class="consoleWrapper"
     [ngClass]="{lightTheme: isLightThemeEnabled}"
@@ -14,12 +14,12 @@
     [resizeEdges]="{ right: true, left: true, bottom: true, top: true }"
     [enableGhostResize]="true"
     (resizeStart)="toggleDragging(false)"
-    (resizeEnd)="onResizeEnd($event)"> -->
-<div 
+    (resizeEnd)="onResizeEnd($event)">
+<!-- <div 
     class="consoleWrapper"
     [ngClass]="{lightTheme: isLightThemeEnabled}"
     (mousedown)="toggleDragging(true)"
-    [ngStyle]="style">
+    [ngStyle]="style"> -->
 
     <div class="consoleHeader">
         <mat-tab-group class="tabs" [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)">
@@ -53,7 +53,7 @@
 
     <app-log-console [hidden]="!(selected.value===0) || isMinimized" [server]="server" [project]="project"></app-log-console>
 
-    <div [hidden]="isMinimized" *ngFor="let node of nodes; let index = index">
+    <div class="xterm-console" [hidden]="isMinimized" *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>
 </div>

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

@@ -5,7 +5,7 @@
     left: 20px;
     height: 180px;
     width: 600px;
-    background: #263238;
+    background: #000000!important;
     color: white;
     overflow: hidden;
     font-size: 12px;
@@ -38,6 +38,7 @@
     display: flex;
     padding: 2px;
     justify-content: space-between;
+    background: #263238!important;
 }
 
 .tabs {
@@ -54,6 +55,10 @@
     scrollbar-width: thin;
 }
 
+.xterm-console {
+    background: black;
+}
+
 .consoleInput {
     width: 100%;
     height: 30px;

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

@@ -113,8 +113,8 @@ export class ConsoleWrapperComponent implements OnInit {
         if (
             event.rectangle.width &&
             event.rectangle.height &&
-            (event.rectangle.width < 720 ||
-            event.rectangle.height < 460)
+            (event.rectangle.width < 500 ||
+            event.rectangle.height < 100)
         ) {
             return false;
         }
@@ -134,6 +134,11 @@ export class ConsoleWrapperComponent implements OnInit {
             height: `${event.rectangle.height - 60}px`,
             width: `${event.rectangle.width}px`
         };
+
+        this.consoleService.consoleResized.next({
+            width: event.rectangle.width,
+            height: event.rectangle.height - 53
+        })
     }
 
     close() {

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

@@ -31,7 +31,10 @@ export class WebConsoleComponent implements OnInit, AfterViewInit {
     
     ngOnInit() {
         this.consoleService.consoleResized.subscribe(ev => {
-            this.fitAddon.fit();
+            let numberOfColumns = Math.floor(ev.width / 9);
+            let numberOfRows = Math.floor(ev.height / 17);
+
+            this.term.resize(numberOfColumns, numberOfRows);
         });
     }
 
@@ -61,6 +64,9 @@ export class WebConsoleComponent implements OnInit, AfterViewInit {
             }
             return true;
         });
+
+        // probably we need to take initial values of console wrapper and 
+        // this.term.resize(80, 1);
     }
 
     getUrl() {

src/app/services/nodeConsole.service.ts

@@ -39,6 +39,6 @@ export class NodeConsoleService {
 }
 
 export interface ConsoleResizedEvent {
-  numberOfColumns: number,
-  numberOfRows: number
+  width: number,
+  height: number
 }