TBConsoleClient/src/app/app.component.ts

import { Component, ElementRef, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'TBConsoleClient';
  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 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)
        this.logMessages += "Failed to contact mod! Make sure it is running and listening.\n";
      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));
  }
}