Add command output and input and button and some layout changes

package-lock.json

@@ -319,6 +319,14 @@
         "tslib": "^2.1.0"
       }
     },
+    "@angular/flex-layout": {
+      "version": "11.0.0-beta.33",
+      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-11.0.0-beta.33.tgz",
+      "integrity": "sha512-unfhw3abZuKtdwQicRStHCYGbANPTHYg4WNRQk/RC5Mxq+4WOp4Q8HI7GqRHCGUYDCGUP7w1sU/oDt8f09nM8w==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@angular/forms": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-12.0.0.tgz",

package.json

@@ -16,6 +16,7 @@
     "@angular/common": "~12.0.0",
     "@angular/compiler": "~12.0.0",
     "@angular/core": "~12.0.0",
+    "@angular/flex-layout": "^11.0.0-beta.33",
     "@angular/forms": "~12.0.0",
     "@angular/material": "^12.0.0",
     "@angular/platform-browser": "~12.0.0",

src/app/app.component.html

@@ -1,6 +1,12 @@
 <div class="wrapper">
-  <mat-card style="flex: 50; max-width: 80%">
+  <mat-card fxFlex="80">
     <mat-card-title>Techblox console</mat-card-title>
-    <mat-card-content>Hmm</mat-card-content>
+    <mat-card-content fxLayout="column">
+      <div style="border: 1px solid black; padding: 15px" fxFlex="80">
+        <pre>{{ logMessages }}</pre>
+      </div>
+      <input matInput type="text" placeholder="Enter a command..." [(ngModel)]="command"/>
+      <button mat-raised-button (click)="sendCommand(command)">Send</button>
+    </mat-card-content>
   </mat-card>
 </div>

src/app/app.component.ts

@@ -7,4 +7,15 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'TBConsoleClient';
+
+  logMessages = `Message output
+asd
+dsa
+Hmm`;
+
+  command: string;
+
+  sendCommand(command: string) {
+    alert(command);
+  }
 }

src/app/app.module.ts

@@ -4,16 +4,24 @@ import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 import { NoopAnimationsModule } 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 { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
   declarations: [
     AppComponent
   ],
-    imports: [
-        BrowserModule,
-        NoopAnimationsModule,
-        MatCardModule
-    ],
+  imports: [
+    BrowserModule,
+    NoopAnimationsModule,
+    MatCardModule,
+    FlexLayoutModule,
+    MatInputModule,
+    FormsModule,
+    MatButtonModule
+  ],
   providers: [],
   bootstrap: [AppComponent]
 })