1 | import { Injectable, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Input, NgModule } from '@angular/core';
|
2 | import { FormsModule } from '@angular/forms';
|
3 | import { CommonModule } from '@angular/common';
|
4 | import { DomHandler } from 'primeng/dom';
|
5 | import { Subject } from 'rxjs';
|
6 |
|
7 | class TerminalService {
|
8 | constructor() {
|
9 | this.commandSource = new Subject();
|
10 | this.responseSource = new Subject();
|
11 | this.commandHandler = this.commandSource.asObservable();
|
12 | this.responseHandler = this.responseSource.asObservable();
|
13 | }
|
14 | sendCommand(command) {
|
15 | if (command) {
|
16 | this.commandSource.next(command);
|
17 | }
|
18 | }
|
19 | sendResponse(response) {
|
20 | if (response) {
|
21 | this.responseSource.next(response);
|
22 | }
|
23 | }
|
24 | }
|
25 | TerminalService.decorators = [
|
26 | { type: Injectable }
|
27 | ];
|
28 |
|
29 | class Terminal {
|
30 | constructor(el, terminalService, cd) {
|
31 | this.el = el;
|
32 | this.terminalService = terminalService;
|
33 | this.cd = cd;
|
34 | this.commands = [];
|
35 | this.subscription = terminalService.responseHandler.subscribe(response => {
|
36 | this.commands[this.commands.length - 1].response = response;
|
37 | this.commandProcessed = true;
|
38 | });
|
39 | }
|
40 | ngAfterViewInit() {
|
41 | this.container = DomHandler.find(this.el.nativeElement, '.p-terminal')[0];
|
42 | }
|
43 | ngAfterViewChecked() {
|
44 | if (this.commandProcessed) {
|
45 | this.container.scrollTop = this.container.scrollHeight;
|
46 | this.commandProcessed = false;
|
47 | }
|
48 | }
|
49 | set response(value) {
|
50 | if (value) {
|
51 | this.commands[this.commands.length - 1].response = value;
|
52 | this.commandProcessed = true;
|
53 | }
|
54 | }
|
55 | handleCommand(event) {
|
56 | if (event.keyCode == 13) {
|
57 | this.commands.push({ text: this.command });
|
58 | this.terminalService.sendCommand(this.command);
|
59 | this.command = '';
|
60 | }
|
61 | }
|
62 | focus(element) {
|
63 | element.focus();
|
64 | }
|
65 | ngOnDestroy() {
|
66 | if (this.subscription) {
|
67 | this.subscription.unsubscribe();
|
68 | }
|
69 | }
|
70 | }
|
71 | Terminal.decorators = [
|
72 | { type: Component, args: [{
|
73 | selector: 'p-terminal',
|
74 | template: `
|
75 | <div [ngClass]="'p-terminal p-component'" [ngStyle]="style" [class]="styleClass" (click)="focus(in)">
|
76 | <div *ngIf="welcomeMessage">{{welcomeMessage}}</div>
|
77 | <div class="p-terminal-content">
|
78 | <div *ngFor="let command of commands">
|
79 | <span class="p-terminal-prompt">{{prompt}}</span>
|
80 | <span class="p-terminal-command">{{command.text}}</span>
|
81 | <div class="p-terminal-response">{{command.response}}</div>
|
82 | </div>
|
83 | </div>
|
84 | <div class="p-terminal-prompt-container">
|
85 | <span class="p-terminal-content-prompt">{{prompt}}</span>
|
86 | <input #in type="text" [(ngModel)]="command" class="p-terminal-input" autocomplete="off" (keydown)="handleCommand($event)" autofocus>
|
87 | </div>
|
88 | </div>
|
89 | `,
|
90 | changeDetection: ChangeDetectionStrategy.OnPush,
|
91 | encapsulation: ViewEncapsulation.None,
|
92 | styles: [".p-terminal{height:18rem;overflow:auto}.p-terminal-prompt-container{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.p-terminal-input{-ms-flex:1 1 auto;background-color:rgba(0,0,0,0);border:0;color:inherit;flex:1 1 auto;outline:0 none;padding:0}.p-terminal-input::-ms-clear{display:none}"]
|
93 | },] }
|
94 | ];
|
95 | Terminal.ctorParameters = () => [
|
96 | { type: ElementRef },
|
97 | { type: TerminalService },
|
98 | { type: ChangeDetectorRef }
|
99 | ];
|
100 | Terminal.propDecorators = {
|
101 | welcomeMessage: [{ type: Input }],
|
102 | prompt: [{ type: Input }],
|
103 | style: [{ type: Input }],
|
104 | styleClass: [{ type: Input }],
|
105 | response: [{ type: Input }]
|
106 | };
|
107 | class TerminalModule {
|
108 | }
|
109 | TerminalModule.decorators = [
|
110 | { type: NgModule, args: [{
|
111 | imports: [CommonModule, FormsModule],
|
112 | exports: [Terminal],
|
113 | declarations: [Terminal]
|
114 | },] }
|
115 | ];
|
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 | export { Terminal, TerminalModule, TerminalService };
|
122 |
|