Support sending commands and receiving responses, autocmomplete attempt

package-lock.json

@@ -335,6 +335,21 @@
         "tslib": "^2.1.0"
       }
     },
+    "@angular/http": {
+      "version": "7.2.16",
+      "resolved": "https://registry.npmjs.org/@angular/http/-/http-7.2.16.tgz",
+      "integrity": "sha512-yvjbNyzFSmmz4UTjCdy5M8mk0cZqf9TvSf8yN5UVIwtw4joyuUdlgJCuin0qSbQOKIf/JjHoofpO2JkPCGSNww==",
+      "requires": {
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "@angular/language-service": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-12.0.0.tgz",

package.json

@@ -18,6 +18,7 @@
     "@angular/core": "~12.0.0",
     "@angular/flex-layout": "^11.0.0-beta.33",
     "@angular/forms": "~12.0.0",
+    "@angular/http": "^7.2.16",
     "@angular/material": "^12.0.0",
     "@angular/platform-browser": "~12.0.0",
     "@angular/platform-browser-dynamic": "~12.0.0",

src/app/app.component.html

@@ -5,8 +5,18 @@
       <div style="border: 1px solid black; padding: 15px" fxFlex="80">
         <pre>{{ logMessages }}</pre>
       </div>
-      <input matInput type="text" placeholder="Enter a command..." [(ngModel)]="command"/>
+      <form>
-      <button mat-raised-button (click)="sendCommand(command)">Send</button>
+        <mat-form-field>
+          <input matInput type="text" placeholder="Enter a command..." [formControl]="commandControl"
+                 [autocomplete]="commandCompletion"/>
+        </mat-form-field>
+        <mat-autocomplete #commandCompletion="matAutocomplete">
+          <mat-option [value]="'hmm'">
+            Hmm
+          </mat-option>
+        </mat-autocomplete>
+        <button mat-raised-button class="mat-primary" (click)="sendCommand()">Send</button>
+      </form>
     </mat-card-content>
   </mat-card>
 </div>

src/app/app.component.ts

@@ -1,4 +1,6 @@
 import { Component } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { FormControl } from '@angular/forms';
 
 @Component({
   selector: 'app-root',
@@ -8,14 +10,22 @@ import { Component } from '@angular/core';
 export class AppComponent {
   title = 'TBConsoleClient';
 
-  logMessages = `Message output
+  logMessages = '';
-asd
-dsa
-Hmm`;
 
-  command: string;
+  commandControl: FormControl = new FormControl('');
 
-  sendCommand(command: string) {
+  constructor(private http: HttpClient) {
-    alert(command);
+  }
+
+  async sendCommand() {
+    try {
+      const res = await this.http.post('http://localhost:8019/', this.commandControl.value, {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";
+    }
   }
 }

src/app/app.module.ts

@@ -2,12 +2,14 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatCardModule } from '@angular/material/card';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatInputModule } from '@angular/material/input';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import { HttpClientModule } from '@angular/common/http';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 
 @NgModule({
   declarations: [
@@ -15,12 +17,15 @@ import { MatButtonModule } from '@angular/material/button';
   ],
   imports: [
     BrowserModule,
-    NoopAnimationsModule,
+    BrowserAnimationsModule,
     MatCardModule,
     FlexLayoutModule,
     MatInputModule,
     FormsModule,
-    MatButtonModule
+    MatButtonModule,
+    HttpClientModule,
+    MatAutocompleteModule,
+    ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/styles.scss

@@ -27,3 +27,7 @@ mat-card {
 mat-card-title {
   text-align: center;
 }
+
+pre {
+  white-space: pre-wrap;
+}