From 9e59f7c34473e41cb0267ea392cf7c7a4f3a05ea Mon Sep 17 00:00:00 2001 From: Krzysztof Rudnicki Date: Sat, 9 Mar 2024 15:26:45 +0100 Subject: [PATCH] fix: http client --- arai-frontend/pnpm-lock.yaml | 21 ++++++++++++++ arai-frontend/src/app/app.component.ts | 5 +++- arai-frontend/src/app/backend.service.ts | 29 ++++++++----------- .../app/case-input/case-input.component.ts | 17 ++++++++--- arai-frontend/src/app/requests-responses.ts | 2 +- 5 files changed, 51 insertions(+), 23 deletions(-) diff --git a/arai-frontend/pnpm-lock.yaml b/arai-frontend/pnpm-lock.yaml index 671e8d9..312cd19 100644 --- a/arai-frontend/pnpm-lock.yaml +++ b/arai-frontend/pnpm-lock.yaml @@ -26,6 +26,9 @@ dependencies: '@angular/forms': specifier: ^17.0.0 version: 17.2.4(@angular/common@17.2.4)(@angular/core@17.2.4)(@angular/platform-browser@17.2.4)(rxjs@7.8.1) + '@angular/http': + specifier: ^7.2.16 + version: 7.2.16(@angular/core@17.2.4)(@angular/platform-browser@17.2.4)(rxjs@7.8.1) '@angular/material': specifier: ^17.2.2 version: 17.2.2(@angular/animations@17.2.4)(@angular/cdk@17.2.2)(@angular/common@17.2.4)(@angular/core@17.2.4)(@angular/forms@17.2.4)(@angular/platform-browser@17.2.4)(rxjs@7.8.1) @@ -456,6 +459,20 @@ packages: tslib: 2.6.2 dev: false + /@angular/http@7.2.16(@angular/core@17.2.4)(@angular/platform-browser@17.2.4)(rxjs@7.8.1): + resolution: {integrity: sha512-yvjbNyzFSmmz4UTjCdy5M8mk0cZqf9TvSf8yN5UVIwtw4joyuUdlgJCuin0qSbQOKIf/JjHoofpO2JkPCGSNww==} + deprecated: Package no longer supported. Use @angular/common instead, see https://angular.io/guide/deprecations#angularhttp + peerDependencies: + '@angular/core': 7.2.16 + '@angular/platform-browser': 7.2.16 + rxjs: ^6.0.0 + dependencies: + '@angular/core': 17.2.4(rxjs@7.8.1)(zone.js@0.14.4) + '@angular/platform-browser': 17.2.4(@angular/animations@17.2.4)(@angular/common@17.2.4)(@angular/core@17.2.4) + rxjs: 7.8.1 + tslib: 1.14.1 + dev: false + /@angular/material@17.2.2(@angular/animations@17.2.4)(@angular/cdk@17.2.2)(@angular/common@17.2.4)(@angular/core@17.2.4)(@angular/forms@17.2.4)(@angular/platform-browser@17.2.4)(rxjs@7.8.1): resolution: {integrity: sha512-ToUp8gARTvdze9L7jhEuKqdos221jUCMRD6qzhl07XZRlxVbf/5VXUq2Nn7ei9uN11Ii1UY5pC0GS2XtlyHp4A==} peerDependencies: @@ -7703,6 +7720,10 @@ packages: hasBin: true dev: true + /tslib@1.14.1: + resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==} + dev: false + /tslib@2.6.2: resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==} diff --git a/arai-frontend/src/app/app.component.ts b/arai-frontend/src/app/app.component.ts index 6c89b27..346fdbf 100644 --- a/arai-frontend/src/app/app.component.ts +++ b/arai-frontend/src/app/app.component.ts @@ -2,11 +2,14 @@ import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { CaseInputComponent } from './case-input/case-input.component'; import { FlexLayoutModule } from '@angular/flex-layout'; +import { HttpClientModule } from '@angular/common/http'; +import { BackendService } from './backend.service'; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet, CaseInputComponent, FlexLayoutModule], + imports: [RouterOutlet, CaseInputComponent, FlexLayoutModule, HttpClientModule], + providers: [BackendService], templateUrl: './app.component.html', styleUrl: './app.component.scss' }) diff --git a/arai-frontend/src/app/backend.service.ts b/arai-frontend/src/app/backend.service.ts index efa1d70..f6cdce8 100644 --- a/arai-frontend/src/app/backend.service.ts +++ b/arai-frontend/src/app/backend.service.ts @@ -1,11 +1,12 @@ import { EventEmitter, Injectable } from '@angular/core'; -import { GenericRequest, GenericResponse, RecommendedMediatorsResponse, StatisticsOutputResponse, UserInputRequest, userInput } from './requests-responses'; +import { GenericRequest, GenericResponse, RecommendedMediatorsResponse, StatisticsOutputResponse, UserInputRequest } from './requests-responses'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class BackendService { - address = "localhost:8080"; + address = "http://localhost:5000"; public genericResponsesArray: GenericResponse[] = []; public userInputArray: UserInputRequest[] = []; @@ -15,10 +16,8 @@ export class BackendService { public statisticsOutputResponseArrayEvent = new EventEmitter(); - private websocket: WebSocket | null = null; - constructor() { - this.connect(); + constructor(private http: HttpClient) { } private filterMessages(message: GenericResponse) { @@ -33,21 +32,17 @@ export class BackendService { } } - private connect(): void { - this.websocket = new WebSocket(`http://${this.address}`); - this.websocket.onmessage = (event: MessageEvent) => { - this.filterMessages(event as unknown as GenericResponse); - }; - // Listen for messages - this.websocket.on('message', (message: GenericResponse) => { - this.filterMessages(message); - }); - } - public sendMessage(message: GenericRequest): void { if(message.request_type === "user_input") { this.userInputArray.push(message as UserInputRequest); } - this.socket.emit('message', message); + const headers = new HttpHeaders().set( + "Content-Type", + "application/json" + ); + console.log(`request: `, JSON.stringify(message)); + this.http.post(this.address, JSON.stringify(message), {headers}).subscribe((response) => { + console.log(`response: `, response); + }) } } diff --git a/arai-frontend/src/app/case-input/case-input.component.ts b/arai-frontend/src/app/case-input/case-input.component.ts index e8fcd73..2ef2c91 100644 --- a/arai-frontend/src/app/case-input/case-input.component.ts +++ b/arai-frontend/src/app/case-input/case-input.component.ts @@ -2,18 +2,15 @@ import { Component } from '@angular/core'; import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms'; import { MatInputModule } from '@angular/material/input' import { MatCheckboxModule } from '@angular/material/checkbox' -import { CommonModule } from '@angular/common'; import { MatButtonModule } from '@angular/material/button' import { BackendService } from '../backend.service'; -import { UserInputRequest, userInput } from '../requests-responses'; +import { GenericRequest, UserInputRequest, userInput } from '../requests-responses'; @Component({ selector: 'app-case-input', standalone: true, imports: [ - // other modules - CommonModule, MatInputModule, MatCheckboxModule, ReactiveFormsModule, @@ -36,6 +33,18 @@ export class CaseInputComponent { }); } + ngOnInit() { + const data: userInput = { + "generic_input": "Rozwodzę się z żoną i chcę uczciwie podzielić majątek", + "trial_cost": 1000, + "location": "Katowice", + "experts_called": true, + "witnesses_called": true + } + const newRequest = new UserInputRequest(data); + this.backendService.sendMessage(newRequest); + } + onSubmit(): void { if(this.userInput !== null) { this.backendService.sendMessage(new UserInputRequest(this.userInput)); diff --git a/arai-frontend/src/app/requests-responses.ts b/arai-frontend/src/app/requests-responses.ts index fa42fe3..45d866d 100644 --- a/arai-frontend/src/app/requests-responses.ts +++ b/arai-frontend/src/app/requests-responses.ts @@ -19,7 +19,7 @@ export class GenericRequest { export interface userInput { "generic_input": string, - "trial_value": number, + "trial_cost": number, "location": string, "experts_called": boolean, "witnesses_called": boolean