From ad783722d050babd00d71777df03e3728d5ea158 Mon Sep 17 00:00:00 2001
From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com>
Date: Fri, 28 Aug 2020 14:14:40 +0200
Subject: [PATCH] Option to resize console

---
 .../console-wrapper/console-wrapper.component.html     | 10 +++++-----
 .../console-wrapper/console-wrapper.component.scss     |  7 ++++++-
 .../console-wrapper/console-wrapper.component.ts       |  9 +++++++--
 .../project-map/web-console/web-console.component.ts   |  8 +++++++-
 src/app/services/nodeConsole.service.ts                |  4 ++--
 5 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/app/components/project-map/console-wrapper/console-wrapper.component.html b/src/app/components/project-map/console-wrapper/console-wrapper.component.html
index db235521..46be8150 100644
--- a/src/app/components/project-map/console-wrapper/console-wrapper.component.html
+++ b/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>
diff --git a/src/app/components/project-map/console-wrapper/console-wrapper.component.scss b/src/app/components/project-map/console-wrapper/console-wrapper.component.scss
index de526a3d..f19d761f 100644
--- a/src/app/components/project-map/console-wrapper/console-wrapper.component.scss
+++ b/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;
diff --git a/src/app/components/project-map/console-wrapper/console-wrapper.component.ts b/src/app/components/project-map/console-wrapper/console-wrapper.component.ts
index 8b2ebf59..2fe8488e 100644
--- a/src/app/components/project-map/console-wrapper/console-wrapper.component.ts
+++ b/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() {
diff --git a/src/app/components/project-map/web-console/web-console.component.ts b/src/app/components/project-map/web-console/web-console.component.ts
index 82c5b550..f5599108 100644
--- a/src/app/components/project-map/web-console/web-console.component.ts
+++ b/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() {
diff --git a/src/app/services/nodeConsole.service.ts b/src/app/services/nodeConsole.service.ts
index d1ee05bf..56cefa36 100644
--- a/src/app/services/nodeConsole.service.ts
+++ b/src/app/services/nodeConsole.service.ts
@@ -39,6 +39,6 @@ export class NodeConsoleService {
 }
 
 export interface ConsoleResizedEvent {
-  numberOfColumns: number,
-  numberOfRows: number
+  width: number,
+  height: number
 }