Support sending commands and receiving responses, autocmomplete attempt

This commit is contained in:
Norbi Peti 2021-05-24 17:10:23 +02:00
parent 30e9240e6b
commit eacfc89649
No known key found for this signature in database
GPG key ID: DBA4C4549A927E56
6 changed files with 58 additions and 13 deletions

15
package-lock.json generated
View file

@ -335,6 +335,21 @@
"tslib": "^2.1.0" "tslib": "^2.1.0"
} }
}, },
"@angular/http": {
"version": "7.2.16",
"resolved": "https://registry.npmjs.org/@angular/http/-/http-7.2.16.tgz",
"integrity": "sha512-yvjbNyzFSmmz4UTjCdy5M8mk0cZqf9TvSf8yN5UVIwtw4joyuUdlgJCuin0qSbQOKIf/JjHoofpO2JkPCGSNww==",
"requires": {
"tslib": "^1.9.0"
},
"dependencies": {
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
}
}
},
"@angular/language-service": { "@angular/language-service": {
"version": "12.0.0", "version": "12.0.0",
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-12.0.0.tgz", "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-12.0.0.tgz",

View file

@ -18,6 +18,7 @@
"@angular/core": "~12.0.0", "@angular/core": "~12.0.0",
"@angular/flex-layout": "^11.0.0-beta.33", "@angular/flex-layout": "^11.0.0-beta.33",
"@angular/forms": "~12.0.0", "@angular/forms": "~12.0.0",
"@angular/http": "^7.2.16",
"@angular/material": "^12.0.0", "@angular/material": "^12.0.0",
"@angular/platform-browser": "~12.0.0", "@angular/platform-browser": "~12.0.0",
"@angular/platform-browser-dynamic": "~12.0.0", "@angular/platform-browser-dynamic": "~12.0.0",

View file

@ -5,8 +5,18 @@
<div style="border: 1px solid black; padding: 15px" fxFlex="80"> <div style="border: 1px solid black; padding: 15px" fxFlex="80">
<pre>{{ logMessages }}</pre> <pre>{{ logMessages }}</pre>
</div> </div>
<input matInput type="text" placeholder="Enter a command..." [(ngModel)]="command"/> <form>
<button mat-raised-button (click)="sendCommand(command)">Send</button> <mat-form-field>
<input matInput type="text" placeholder="Enter a command..." [formControl]="commandControl"
[autocomplete]="commandCompletion"/>
</mat-form-field>
<mat-autocomplete #commandCompletion="matAutocomplete">
<mat-option [value]="'hmm'">
Hmm
</mat-option>
</mat-autocomplete>
<button mat-raised-button class="mat-primary" (click)="sendCommand()">Send</button>
</form>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
</div> </div>

View file

@ -1,4 +1,6 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormControl } from '@angular/forms';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@ -8,14 +10,22 @@ import { Component } from '@angular/core';
export class AppComponent { export class AppComponent {
title = 'TBConsoleClient'; title = 'TBConsoleClient';
logMessages = `Message output logMessages = '';
asd
dsa
Hmm`;
command: string; commandControl: FormControl = new FormControl('');
sendCommand(command: string) { constructor(private http: HttpClient) {
alert(command); }
async sendCommand() {
try {
const res = await this.http.post('http://localhost:8019/', this.commandControl.value, {responseType: 'text'}).toPromise();
this.logMessages += res + "\n";
} catch (e) {
if (e.status == 0)
this.logMessages += "Failed to contact mod! Make sure it is running and listening.\n";
else
this.logMessages += e.message + "\n";
}
} }
} }

View file

@ -2,12 +2,14 @@ import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCardModule } from '@angular/material/card'; import { MatCardModule } from '@angular/material/card';
import { FlexLayoutModule } from '@angular/flex-layout'; import { FlexLayoutModule } from '@angular/flex-layout';
import { MatInputModule } from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import { FormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { HttpClientModule } from '@angular/common/http';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -15,12 +17,15 @@ import { MatButtonModule } from '@angular/material/button';
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
NoopAnimationsModule, BrowserAnimationsModule,
MatCardModule, MatCardModule,
FlexLayoutModule, FlexLayoutModule,
MatInputModule, MatInputModule,
FormsModule, FormsModule,
MatButtonModule MatButtonModule,
HttpClientModule,
MatAutocompleteModule,
ReactiveFormsModule
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]

View file

@ -27,3 +27,7 @@ mat-card {
mat-card-title { mat-card-title {
text-align: center; text-align: center;
} }
pre {
white-space: pre-wrap;
}