Permalink
Browse files

fix(terminal): update terminal code

  • Loading branch information...
jkuri committed Aug 8, 2017
1 parent 1544fb1 commit 35c073ff87974780788e1624bf16acfba8ed43b4
@@ -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>
@@ -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) {
@@ -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

0 comments on commit 35c073f

Please sign in to comment.