diff --git a/src/app/app.component.html b/src/app/app.component.html index 3a17bc5..6e977a1 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -2,7 +2,7 @@ Techblox console -
+
{{ logMessages }}
@@ -11,7 +11,7 @@ [matAutocomplete]="commandCompletion" (focus)="commands || getCommandList()"/> - + {{ cmd.line }} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 33c3f03..bd5436d 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, ElementRef, ViewChild } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { FormControl } from '@angular/forms'; @@ -12,14 +12,22 @@ export class AppComponent { logMessages = ''; commandControl: FormControl = new FormControl(''); commands: { command: string, line: string }[] = []; + displayedCommands: { command: string, line: string }[] = []; + + @ViewChild('logMessagesContainer') logMessagesView: ElementRef; constructor(private http: HttpClient) { this.getCommandList(); + this.commandControl.valueChanges.subscribe(commandText => { + this.displayedCommands = this.commands.filter(cmd => cmd.command.toLowerCase().startsWith(commandText.toLowerCase())); + }) } async sendCommand() { try { - const res = await this.http.post('http://localhost:8019/command', this.commandControl.value, {responseType: 'text'}).toPromise(); + const command = this.commandControl.value; + this.commandControl.setValue(''); + const res = await this.http.post('http://localhost:8019/command', command, {responseType: 'text'}).toPromise(); this.logMessages += res + "\n"; } catch (e) { if (e.status == 0) @@ -27,10 +35,16 @@ export class AppComponent { else this.logMessages += e.message + "\n"; } + await this.wait(50); + this.logMessagesView.nativeElement.scrollTop = this.logMessagesView.nativeElement.scrollHeight; } async getCommandList() { const res = await this.http.post('http://localhost:8019/commands', '', {responseType: 'text'}).toPromise(); this.commands = res.split('\n').map(cmd => ({command: cmd.split(' - ')[0], line: cmd})); } + + wait(ms) { + return new Promise(resolve => setTimeout(resolve, ms)); + } }