From db1e7852e1b9a63e4a7b13c4a2eb801cee8088a7 Mon Sep 17 00:00:00 2001
From: NorbiPeti <szatmari.norbert.peter@gmail.com>
Date: Tue, 25 May 2021 00:51:53 +0200
Subject: [PATCH] Fix autocomplete, automatically get command list with
 descriptions

---
 src/app/app.component.html | 10 +++++-----
 src/app/app.component.ts   | 11 ++++++++---
 src/styles.scss            |  7 +++++++
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 4191210..3a17bc5 100644
--- a/src/app/app.component.html
+++ b/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>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index f1089da..33c3f03 100644
--- a/src/app/app.component.ts
+++ b/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}));
+  }
 }
diff --git a/src/styles.scss b/src/styles.scss
index a56eeb9..14daecb 100644
--- a/src/styles.scss
+++ b/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;
+}