feat(): collapse/expand commands log in terminal

Author: Izak88

src/app/assets/public/images/icons/collapse.svg

@@ -1 +1,12 @@
-<pre class="window-terminal-container batman-ansi-theme" [ngClass]="{ large: options.size === 'large' }" slimScroll [options]="scrollOptions" [scrollEvents]="scrollEvents"></pre>
+<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>
+</pre>

src/app/assets/public/images/icons/expand.svg

@@ -1,5 +1,7 @@
-import { Component, ElementRef, OnInit, Input, SimpleChange, EventEmitter } from '@angular/core';
+import {
+  Component, ElementRef, OnInit, Input, SimpleChange, EventEmitter, NgZone } from '@angular/core';
 import { ISlimScrollOptions, SlimScrollEvent } from 'ngx-slimscroll';
+
 import * as AnsiUp from 'ansi_up';
 
 @Component({
@@ -12,8 +14,9 @@ export class AppTerminalComponent implements OnInit {
   au: any;
   scrollOptions: ISlimScrollOptions;
   scrollEvents: EventEmitter<SlimScrollEvent>;
+  commands: { command: string, visible: boolean, output: string }[];
 
-  constructor(private elementRef: ElementRef) {
+  constructor(private elementRef: ElementRef, private ngZone: NgZone) {
     this.scrollOptions = {
       position: 'right',
       barBackground: '#11121A',
@@ -35,26 +38,63 @@ export class AppTerminalComponent implements OnInit {
   ngOnInit() {
     this.au = new AnsiUp.default();
     this.au.use_classes = true;
+    this.commands = [];
   }
 
   ngOnChanges(changes: SimpleChange) {
     if (!this.data) {
       return;
     }
 
-    const el = this.elementRef.nativeElement.querySelector('.window-terminal-container');
-    if (typeof this.data.clear !== 'undefined') {
-      el.innerHTML = '';
-    } else {
-      el.innerHTML += this.au.ansi_to_html(this.data);
+    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;
+              }
+            }
+          }
+        }
 
-      const recalculateEvent = new SlimScrollEvent({ type: 'recalculate' });
-      const bottomEvent = new SlimScrollEvent({ type: 'scrollToBottom', duration: 300 });
+        const recalculateEvent = new SlimScrollEvent({ type: 'recalculate' });
+        const bottomEvent = new SlimScrollEvent({ type: 'scrollToBottom', duration: 300 });
 
-      setTimeout(() => {
-        this.scrollEvents.emit(recalculateEvent);
-        this.scrollEvents.emit(bottomEvent);
-      });
-    }
+        setTimeout(() => el.scrollTop = el.scrollHeight);
+      }
+    });
+  }
+
+  toogleCommand(index: number) {
+    this.commands[index].visible = !this.commands[index].visible;
   }
 }

src/app/components/app-terminal/app-terminal.component.html

@@ -18,3 +18,14 @@
 
   &.large
     height: 700px
+
+.output
+  padding: 0
+  margin: 0
+
+.terminal
+  display: flex
+  align-items: left
+  height: 100%
+  width: 100%
+  text-align: left