fix(terminal): update terminal code

bleenco · Aug 8, 2017 · 35c073f · 35c073f
1 parent 1544fb1
commit 35c073f
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 65 deletions.
diff --git a/src/app/components/app-terminal/app-terminal.component.html b/src/app/components/app-terminal/app-terminal.component.html
@@ -1,12 +1,10 @@
-<pre class="window-terminal-container dracula-ansi-theme" [ngClass]="{ large: options.size === 'large' }" slimScroll [options]="scrollOptions" [scrollEvents]="scrollEvents">
-  <div class="command columns log" *ngFor="let cmd of commands; let i = index;" [id]="i">
-    <div class="terminal">
-      <span class="icon">
-        <img *ngIf="cmd.visible" src="images/icons/collapse.svg"  (click)="toogleCommand(i)">
-        <img *ngIf="!cmd.visible" src="images/icons/expand.svg"  (click)="toogleCommand(i)">
-      </span>
-      <div class="output" [class.is-hidden]="!cmd.visible" [innerHTML]="cmd.output"></div>
-      <div class="output" [class.is-hidden]="cmd.visible" [innerHTML]="cmd.command"></div>
-    </div>
+<div class="window-terminal-container dracula-ansi-theme" [ngClass]="{ large: options.size === 'large' }" slimScroll [options]="scrollOptions" [scrollEvents]="scrollEvents">
+  <div class="terminal" *ngFor="let cmd of commands; let i = index;" [id]="i">
+    <span class="icon">
+      <img *ngIf="cmd.visible" src="images/icons/collapse.svg"  (click)="toogleCommand(i)">
+      <img *ngIf="!cmd.visible" src="images/icons/expand.svg"  (click)="toogleCommand(i)">
+    </span>
+    <span class="command" [innerHTML]="cmd.command"></span>
+    <pre class="output" [class.is-hidden]="!cmd.visible" [innerHTML]="cmd.output"></pre>
   </div>
-</pre>
+</div>
diff --git a/src/app/components/app-terminal/app-terminal.component.ts b/src/app/components/app-terminal/app-terminal.component.ts
@@ -1,5 +1,4 @@
-import {
-  Component, ElementRef, OnInit, Input, SimpleChange, EventEmitter, NgZone } from '@angular/core';
+import { Component, ElementRef, OnInit, Input, SimpleChange, EventEmitter } from '@angular/core';
 import { ISlimScrollOptions, SlimScrollEvent } from 'ngx-slimscroll';
 
 import * as AnsiUp from 'ansi_up';
@@ -16,7 +15,7 @@ export class AppTerminalComponent implements OnInit {
   scrollEvents: EventEmitter<SlimScrollEvent>;
   commands: { command: string, visible: boolean, output: string }[];
 
-  constructor(private elementRef: ElementRef, private ngZone: NgZone) {
+  constructor(private elementRef: ElementRef) {
     this.scrollOptions = {
       position: 'right',
       barBackground: '#11121A',
@@ -33,6 +32,7 @@ export class AppTerminalComponent implements OnInit {
     };
 
     this.scrollEvents = new EventEmitter<SlimScrollEvent>();
+    this.commands = [];
   }
 
   ngOnInit() {
@@ -46,52 +46,46 @@ export class AppTerminalComponent implements OnInit {
       return;
     }
 
-    this.ngZone.run(() => {
-      const el = this.elementRef.nativeElement.querySelector('.window-terminal-container');
-      if (typeof this.data.clear !== 'undefined') {
-        el.innerHTML = '';
-      } else {
-        let output: string = this.au.ansi_to_html(this.data);
-        if (output) {
-          if (this.commands.length > 0) {
-            if (output.indexOf('==&gt;') !== -1) {
-              let command = output.split('</span>')[0] + '</span>';
-              this.commands.push({
-                command: command,
-                visible: true,
-                output: output
-              });
-            } else {
-              this.commands[this.commands.length - 1].command += ` ${output}`;
-            }
-          } else {
-            let regexp = /<span(.*)==&gt;/gi;
-            regexp.lastIndex = 1;
-            let match = regexp.exec(output);
-            if (match) {
-              let indexEnd = match.index;
-              let indexStart = 0;
-              while (indexEnd >= 0) {
-                let log = output.substring(indexStart, indexEnd);
-                let command = log.split('</span>')[0] + '</span>';
-                this.commands.push({
-                  command: command,
-                  visible: true,
-                  output: log
-                });
-                indexStart = indexEnd;
-                indexEnd = regexp.exec(output).index;
-              }
-            }
-          }
-        }
+    if (typeof this.data.clear !== 'undefined') {
+      this.commands = [];
+    } else {
+      const output: string = this.au.ansi_to_html(this.data);
+      const regex = /<span(.*)==&gt;(.*)<\/span>/g;
+      let match;
+      let commands: string[] = [];
 
-        const recalculateEvent = new SlimScrollEvent({ type: 'recalculate' });
-        const bottomEvent = new SlimScrollEvent({ type: 'scrollToBottom', duration: 300 });
+      if (output.match(regex)) {
+        while (match = regex.exec(output)) { commands.push(match[0]); }
+
+        if (commands.length > 1) {
+          this.commands = [];
+        }
 
-        setTimeout(() => el.scrollTop = el.scrollHeight);
+        this.commands = commands.reduce((acc, curr, i) => {
+          const next = commands[i + 1] || '';
+          const re = new RegExp('(' + curr + ')(' + '[\\s\\S]*' + ')(' + next + ')');
+          return acc.concat({
+            command: curr,
+            visible: i === commands.length - 1 ? true : false,
+            output: output.match(re) && output.match(re)[2] ? output.match(re)[2].trim() : ''
+          });
+        }, this.commands);
+      } else {
+        this.commands[this.commands.length - 1].output += output;
+        this.commands = this.commands.map((cmd, i) => {
+          cmd.visible = i === this.commands.length - 1 ? true : false;
+          return cmd;
+        });
       }
-    });
+
+      const recalculateEvent = new SlimScrollEvent({ type: 'recalculate' });
+      const bottomEvent = new SlimScrollEvent({ type: 'scrollToBottom', duration: 300 });
+
+      setTimeout(() => {
+        this.scrollEvents.emit(recalculateEvent);
+        this.scrollEvents.emit(bottomEvent);
+      });
+    }
   }
 
   toogleCommand(index: number) {

diff --git a/src/app/styles/terminal.sass b/src/app/styles/terminal.sass
@@ -8,7 +8,7 @@
   margin: 0
   font-family: monaco, monospace
   font-size: 12px
-  padding: 0
+  padding: 10px 0
   height: 400px
   background: #111111
   border-radius: 4px
@@ -19,13 +19,38 @@
   &.large
     height: 700px
 
-.output
+.terminal
+  display: inline-block
+  text-align: left
   padding: 0
   margin: 0
-
-.terminal
-  display: flex
-  align-items: left
-  height: 100%
   width: 100%
-  text-align: left
+
+  .icon
+    display: block
+    float: left
+    padding: 0
+    margin: 0
+
+    img
+      width: 24px
+      height: 24px
+
+  .output
+    display: inline-block
+    width: 100%
+    color: #e5e5e5
+    margin: 0 !important
+    font-family: monaco, monospace
+    font-size: 12px
+    padding: 0 20px !important
+    background: #111111
+
+  .command
+    display: block
+    float: left
+
+    .ansi-yellow-fg
+      color: #FFEE58 !important
+      font-weight: bold !important
+      font-size: 13px