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 }[] = [];
  commandHistory: { commands: string[], index: number } = {commands: [], index: 0};

  @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('');
      this.addCommandToHistory(command);
      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.trim().split('\n').map(cmd => ({command: cmd.split(' - ')[0], line: cmd}));
  }

  wait(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  previousCommand() {
    const hist = this.commandHistory;
    if (hist.index <= 0) return;
    hist.index--;
    this.commandControl.setValue(hist.commands[hist.index]);
  }

  nextCommand() {
    const hist = this.commandHistory;
    if (hist.index >= hist.commands.length - 1) return;
    hist.index++;
    this.commandControl.setValue(hist.commands[hist.index]);
  }

  addCommandToHistory(command: string) {
    const hist = this.commandHistory;
    if (hist.commands.length == 0) hist.commands.push('');
    hist.commands[hist.commands.length - 1] = command;
    hist.commands.push(''); //Empty to enter new commands
    if (hist.commands.length > 50) hist.commands.shift();
    hist.index = hist.commands.length - 1;
  }
}