Add support for command history, Firebase deploy

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "tb-console"
+  }
+}

.gitignore

@@ -44,3 +44,5 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+**.cache

README.md

@@ -1,6 +1,6 @@
 # TBConsoleClient
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.3.
+A console client [website](https://tb-console.web.app/) that can be used to enter commands in Techblox. You need to install the [TBConsole](https://git.exmods.org/NorbiPeti/TBConsole) mod for it to work.
 
 ## Development server
 

angular.json

@@ -44,7 +44,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,

firebase.json

@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "dist/TBConsoleClient",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

src/app/app.component.html

@@ -8,7 +8,8 @@
       <form>
         <mat-form-field fxFlex="100">
           <input matInput type="text" placeholder="Enter a command..." [formControl]="commandControl"
-                 [matAutocomplete]="commandCompletion" (focus)="commands || getCommandList()"/>
+                 [matAutocomplete]="commandCompletion" (focus)="commands.length || getCommandList()"
+          (keyup.arrowUp)="previousCommand()" (keyup.arrowDown)="nextCommand()"/>
         </mat-form-field>
         <mat-autocomplete #commandCompletion="matAutocomplete">
           <mat-option *ngFor="let cmd of displayedCommands" [value]="cmd.command">

src/app/app.component.ts

@@ -13,6 +13,7 @@ export class AppComponent {
   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;
 
@@ -27,6 +28,7 @@ export class AppComponent {
     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) {
@@ -41,10 +43,33 @@ export class AppComponent {
 
   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}));
+    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;
+  }
 }