Fix autocomplete, automatically get command list with descriptions

src/app/app.component.html

@@ -2,17 +2,17 @@
   <mat-card fxFlex="80">
     <mat-card-title>Techblox console</mat-card-title>
     <mat-card-content fxLayout="column">
-      <div style="border: 1px solid black; padding: 15px" fxFlex="80">
+      <div class="logMessages">
         <pre>{{ logMessages }}</pre>
       </div>
       <form>
-        <mat-form-field>
+        <mat-form-field fxFlex="100">
           <input matInput type="text" placeholder="Enter a command..." [formControl]="commandControl"
-                 [autocomplete]="commandCompletion"/>
+                 [matAutocomplete]="commandCompletion" (focus)="commands || getCommandList()"/>
         </mat-form-field>
         <mat-autocomplete #commandCompletion="matAutocomplete">
-          <mat-option [value]="'hmm'">
-            Hmm
+          <mat-option *ngFor="let cmd of commands" [value]="cmd.command">
+            {{ cmd.line }}
           </mat-option>
         </mat-autocomplete>
         <button mat-raised-button class="mat-primary" (click)="sendCommand()">Send</button>

src/app/app.component.ts

@@ -9,17 +9,17 @@ import { FormControl } from '@angular/forms';
 })
 export class AppComponent {
   title = 'TBConsoleClient';
-
   logMessages = '';
-
   commandControl: FormControl = new FormControl('');
+  commands: { command: string, line: string }[] = [];
 
   constructor(private http: HttpClient) {
+    this.getCommandList();
   }
 
   async sendCommand() {
     try {
-      const res = await this.http.post('http://localhost:8019/', this.commandControl.value, {responseType: 'text'}).toPromise();
+      const res = await this.http.post('http://localhost:8019/command', this.commandControl.value, {responseType: 'text'}).toPromise();
       this.logMessages += res + "\n";
     } catch (e) {
       if (e.status == 0)
@@ -28,4 +28,9 @@ export class AppComponent {
         this.logMessages += e.message + "\n";
     }
   }
+
+  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}));
+  }
 }

src/styles.scss

@@ -31,3 +31,10 @@ mat-card-title {
 pre {
   white-space: pre-wrap;
 }
+
+.logMessages {
+  border: 1px solid black;
+  padding: 15px;
+  overflow: scroll;
+  max-height: 40em;
+}