Permalink
Browse files

feat(): collapse/expand commands log in terminal

  • Loading branch information...
Izak88 authored and jkuri committed Aug 8, 2017
1 parent 9fd48a3 commit 1544fb17b6b3d5c7f6bfa2fc3c52e9c4301bc517
@@ -0,0 +1,44 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
x="0px"
y="0px"
viewBox="0 0 100 125"
style="enable-background:new 0 0 100 100;"
xml:space="preserve"
id="svg8"
sodipodi:docname="noun_991630_cc (1).svg"
inkscape:version="0.92.1 r15371"><metadata
id="metadata14"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs12" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="2038"
inkscape:window-height="1263"
id="namedview10"
showgrid="false"
inkscape:zoom="5.3400704"
inkscape:cx="46.464526"
inkscape:cy="38.739038"
inkscape:window-x="988"
inkscape:window-y="268"
inkscape:window-maximized="0"
inkscape:current-layer="svg8" /><path
d="M68,52H32v-4h36V52z M82,20v60c0,1.1-0.9,2-2,2H20c-1.1,0-2-0.9-2-2V20c0-1.1,0.9-2,2-2h60C81.1,18,82,18.9,82,20z M78,22 H22v56h56V22z"
id="path2"
style="fill:#cccccc" /></svg>
@@ -0,0 +1,44 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
x="0px"
y="0px"
viewBox="0 0 100 125"
style="enable-background:new 0 0 100 100;"
xml:space="preserve"
id="svg8"
sodipodi:docname="noun_991633_cc (2).svg"
inkscape:version="0.92.1 r15371"><metadata
id="metadata14"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs12" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1320"
inkscape:window-height="887"
id="namedview10"
showgrid="false"
inkscape:zoom="2.6700352"
inkscape:cx="89.442291"
inkscape:cy="49.909641"
inkscape:window-x="908"
inkscape:window-y="99"
inkscape:window-maximized="0"
inkscape:current-layer="svg8" /><path
d="M48,52H32v-4h16V32h4v16h16v4H52v16h-4V52z M82,20v60c0,1.1-0.9,2-2,2H20c-1.1,0-2-0.9-2-2V20c0-1.1,0.9-2,2-2h60 C81.1,18,82,18.9,82,20z M78,22H22v56h56V22z"
id="path2"
style="fill:#cccccc" /></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>
@@ -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;
}
}
@@ -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

0 comments on commit 1544fb1

Please sign in to comment.