inspec/www/tutorial/app/xterm-terminal/xterm-terminal.component.ts

227 lines
7.5 KiB
TypeScript
Raw Normal View History

import { Component, OnInit, Input, Output, EventEmitter, SimpleChange } from '@angular/core';
2016-08-29 21:12:31 +00:00
declare var Terminal: any;
@Component({
selector: 'xterm-terminal',
templateUrl: 'app/xterm-terminal/xterm-terminal.component.html',
styleUrls: ['app/xterm-terminal/xterm-terminal.component.css']
})
export class XtermTerminalComponent implements OnInit {
@Input() response: string;
@Input() shell: string;
@Output() command: EventEmitter<string> = new EventEmitter<string>();
// handle up/down arrow functionality
previousCommands: any = [];
2016-09-02 19:13:07 +00:00
poppedCommands: any = [];
last: number;
// handle user input
buffer: string = ''; // the buffer is our string of user input
blockCmd: string = ''; // handle describe and control blocks
// xterm variables
2016-08-29 21:12:31 +00:00
terminalContainer: any;
term: any;
optionElements: any;
cols: string;
rows: string;
2016-08-29 21:12:31 +00:00
ngOnInit() {
// set up Xterm terminal (https://github.com/sourcelair/xterm.js)
2016-09-02 19:13:07 +00:00
this.terminalContainer = document.getElementById('terminal-container');
this.cols = '70';
2016-08-29 21:12:31 +00:00
this.rows = '70';
this.createTerminal();
}
2016-08-29 21:12:31 +00:00
// watch for changes on the value of response and call printResponse
ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
if (changes['response'] && this.term) {
let currentResponse = changes['response'].currentValue;
this.printResponse(currentResponse);
}
}
// create Xterm terminal (https://github.com/sourcelair/xterm.js)
2016-08-29 21:12:31 +00:00
createTerminal() {
while (this.terminalContainer.children.length) {
this.terminalContainer.removeChild(this.terminalContainer.children[0]);
}
this.term = new Terminal({
cursorBlink: true
});
this.term.open(this.terminalContainer);
this.term.fit();
var initialGeometry = this.term.proposeGeometry(),
cols = initialGeometry.cols,
rows = initialGeometry.rows;
this.cols = cols;
this.rows = rows;
this.runFakeTerminal()
}
// more Xterm terminal stuff. we're faking it. faking it can be a good thing ;)
2016-08-29 21:12:31 +00:00
runFakeTerminal() {
if (this.term._initialized) {
return;
}
this.term._initialized = true;
this.setPrompt();
}
// if the response matches the special message we send when the user
// has entered 'next' or 'prev' (to navigate through the demo)
// then no need to print the response, just set the prompt. otherwise,
// print response and set prompt
printResponse(response) {
if (response.match(/.30mnext|.30mprev/)) {
// call createTerminal to clear terminal screen on next and prev
this.createTerminal();
} else {
this.term.writeln(response);
this.setPrompt();
}
}
// the value of shell is taken as an input. the default
// shellprompt is displayed unless shell is set to 'inspec-shell'
2016-08-29 21:12:31 +00:00
setPrompt() {
this.buffer = '';
if (this.shell === 'inspec-shell') {
if (this.blockCmd != '') {
this.term.write(' inspec>*'); // green inspec shell prompt with * to denote multi-line command
} else {
this.term.write(' inspec> '); // green inspec shell prompt
}
} else {
this.term.write('$ '); // blue regular shell prompt
}
}
// delete everything on the line
deleteCharacters() {
// don't delete the prompt
let letters = this.term.x - 2;
for (var i = 0; i < letters; i++) {
this.term.write('\b \b');
}
}
// keydown calls handleDelete to check if the user is holding down the backpace key
// TODO: make this work! the backspace event isn't coming in for some reason :(
handleDelete(ev) {
if (ev.keyCode == 8) {
this.deleteCharacters();
}
}
// handle describe and control blocks. if the command entered matches the
// syntax we would generally expect in a control/describe block, then we
// wait to have the whole string command (as marked by 'end' for a simple describe
// block and end end for a control block) and emit that
handleBlockCommand(buffer) {
this.blockCmd += buffer + '';
if (this.blockCmd.match(/^control/)) {
if (this.blockCmd.match(/end.*end.*/)) {
this.command.emit(this.blockCmd);
this.blockCmd = '';
} else {
this.setPrompt();
}
} else {
if (buffer.match(/^end$/)) {
this.command.emit(this.blockCmd);
this.blockCmd = '';
} else {
this.setPrompt();
}
}
2016-08-29 21:12:31 +00:00
}
// onKey will check if the character is printable (on keyup) and add it to the buffer. if the enter key is hit
// the value of the buffer is emitted as 'command'. onKey also supports proper backspace handling and
// the ability to up-arrow through previous commands/down arrow back through them.
2016-08-29 21:12:31 +00:00
onKey(ev) {
var shell = null
// determine if the character is a printable one
2016-09-02 19:13:07 +00:00
var printable = ['Alt', 'Control', 'Meta', 'Shift', 'CapsLock', 'Tab', 'Escape', 'ArrowLeft', 'ArrowRight'].indexOf(ev.key) == -1
2016-08-29 21:12:31 +00:00
// on enter, save command to array and send current value of buffer
// to parent component (app)
2016-08-29 21:12:31 +00:00
if (ev.keyCode == 13) {
if ((this.buffer === 'clear') || (this.buffer === 'cls')) {
this.createTerminal();
} else {
this.previousCommands.push(this.buffer);
this.term.write('\r\n');
if (this.shell === 'inspec-shell') {
// if the command entered matches any of the typical describe and
// control blocks, then we call handleBlockCommand to not emit the
// value until we have the whole multi-line command
if (this.buffer.match(/^describe.*|^it.*|^end$|^impact.*|^title.*|^control.*/)) {
this.handleBlockCommand(this.buffer);
} else {this.command.emit(this.buffer);}
} else {
this.command.emit(this.buffer);
2016-09-01 15:19:04 +00:00
}
2016-08-29 21:12:31 +00:00
}
}
2016-08-29 21:12:31 +00:00
// on backspace, pop characters from buffer
else if (ev.keyCode == 8) {
// if inspec shell is being used, this needs to be set to 9 to account for the extra letters
if (this.shell === 'inspec-shell') {
if (this.term.x > 8) {
this.buffer = this.buffer.substr(0, this.buffer.length-1);
this.term.write('\b \b');
}
} else {
// setting the value here to 3 ensures that we don't delete the promp '$' or the space after it
if (this.term.x > 2) {
this.buffer = this.buffer.substr(0, this.buffer.length-1);
this.term.write('\b \b');
}
2016-08-29 21:12:31 +00:00
}
}
// on up arrow, delete anything on line, print previous command
2016-09-02 19:13:07 +00:00
// and push last to poppedCommands
else if (ev.keyCode === 38) {
let last;
this.buffer = '';
if (this.previousCommands.length > 0) {
last = this.previousCommands.pop();
2016-09-02 19:13:07 +00:00
this.poppedCommands.push(last);
} else {
last = '';
}
this.deleteCharacters();
this.buffer = last;
this.term.write(last);
}
// on down arrow, delete anything on line, print last item from poppedCommands
2016-09-02 19:13:07 +00:00
// and push previous to previousCommands
else if (ev.keyCode === 40) {
let previous;
this.buffer = '';
2016-09-02 19:13:07 +00:00
if (this.poppedCommands.length > 0) {
previous = this.poppedCommands.pop();
this.previousCommands.push(previous);
} else {
previous = '';
}
this.deleteCharacters();
this.buffer = previous;
2016-09-02 19:13:07 +00:00
this.term.write(previous);
}
// if the character is printable and none of the event key codes from above were matched
// then we write the character on the prompt line and add the character to the buffer
else if (printable) {
2016-08-29 21:12:31 +00:00
this.term.write(ev.key);
this.buffer += ev.key;
}
}
}