ExMods/TBConsoleClient
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Autocomplete matches typed text, autoscroll

Browse source
This commit is contained in:
Norbi Peti 2021-05-25 01:51:35 +02:00
parent db1e7852e1
commit 78827bc703
No known key found for this signature in database
GPG key ID: DBA4C4549A927E56
2 changed files with 18 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/app.component.html
View file

@ -2,7 +2,7 @@
<mat-card fxFlex="80"> <mat-card fxFlex="80">
<mat-card-title>Techblox console</mat-card-title> <mat-card-title>Techblox console</mat-card-title>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<div class="logMessages"> <div class="logMessages" #logMessagesContainer>
<pre>{{ logMessages }}</pre> <pre>{{ logMessages }}</pre>
</div> </div>
<form> <form>
@ -11,7 +11,7 @@
[matAutocomplete]="commandCompletion" (focus)="commands || getCommandList()"/> [matAutocomplete]="commandCompletion" (focus)="commands || getCommandList()"/>
</mat-form-field> </mat-form-field>
<mat-autocomplete #commandCompletion="matAutocomplete"> <mat-autocomplete #commandCompletion="matAutocomplete">
<mat-option *ngFor="let cmd of commands" [value]="cmd.command"> <mat-option *ngFor="let cmd of displayedCommands" [value]="cmd.command">
{{ cmd.line }} {{ cmd.line }}
</mat-option> </mat-option>
</mat-autocomplete> </mat-autocomplete>

18
src/app/app.component.ts
View file

@ -1,4 +1,4 @@
import { Component } from '@angular/core'; import { Component, ElementRef, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { FormControl } from '@angular/forms'; import { FormControl } from '@angular/forms';
@ -12,14 +12,22 @@ export class AppComponent {
logMessages = ''; logMessages = '';
commandControl: FormControl = new FormControl(''); commandControl: FormControl = new FormControl('');
commands: { command: string, line: string }[] = []; commands: { command: string, line: string }[] = [];
displayedCommands: { command: string, line: string }[] = [];
@ViewChild('logMessagesContainer') logMessagesView: ElementRef;
constructor(private http: HttpClient) { constructor(private http: HttpClient) {
this.getCommandList(); this.getCommandList();
this.commandControl.valueChanges.subscribe(commandText => {
this.displayedCommands = this.commands.filter(cmd => cmd.command.toLowerCase().startsWith(commandText.toLowerCase()));
})
} }
async sendCommand() { async sendCommand() {
try { 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"; this.logMessages += res + "\n";
} catch (e) { } catch (e) {
if (e.status == 0) if (e.status == 0)
@ -27,10 +35,16 @@ export class AppComponent {
else else
this.logMessages += e.message + "\n"; this.logMessages += e.message + "\n";
} }
await this.wait(50);
this.logMessagesView.nativeElement.scrollTop = this.logMessagesView.nativeElement.scrollHeight;
} }
async getCommandList() { async getCommandList() {
const res = await this.http.post('http://localhost:8019/commands', '', {responseType: 'text'}).toPromise(); 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})); this.commands = res.split('\n').map(cmd => ({command: cmd.split(' - ')[0], line: cmd}));
} }
wait(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
} }