Add command output and input and button and some layout changes

This commit is contained in:
Norbi Peti 2021-05-14 02:20:32 +02:00
parent 27813fc849
commit 30e9240e6b
No known key found for this signature in database
GPG key ID: DBA4C4549A927E56
5 changed files with 41 additions and 7 deletions

8
package-lock.json generated
View file

@ -319,6 +319,14 @@
"tslib": "^2.1.0" "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": { "@angular/forms": {
"version": "12.0.0", "version": "12.0.0",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-12.0.0.tgz", "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-12.0.0.tgz",

View file

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

View file

@ -1,6 +1,12 @@
<div class="wrapper"> <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-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> </mat-card>
</div> </div>

View file

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

View file

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