From a304387a91f42158bf9927f2ae5c4aae56386764 Mon Sep 17 00:00:00 2001
From: Krzysztof Rudnicki <krzysztof.rudnicki@deltaww.com>
Date: Sat, 9 Mar 2024 18:59:49 +0100
Subject: [PATCH] feat: user input more responsive

---
 arai-frontend/src/app/backend.service.ts      | 32 +++++++++++++++----
 .../app/case-input/case-input.component.scss  | 12 +++++++
 .../app/case-input/case-input.component.ts    |  2 --
 3 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/arai-frontend/src/app/backend.service.ts b/arai-frontend/src/app/backend.service.ts
index e8a46b1..4c9fb87 100644
--- a/arai-frontend/src/app/backend.service.ts
+++ b/arai-frontend/src/app/backend.service.ts
@@ -1,6 +1,6 @@
 import { EventEmitter, Injectable } from '@angular/core';
 import { GenericRequest, GenericResponse, RecommendedMediatorsResponse, StatisticsOutputResponse, UserInputRequest } from './requests-responses';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 
 @Injectable({
   providedIn: 'root'
@@ -32,16 +32,19 @@ export class BackendService {
     }
   }
 
-  public sendMessage(message: GenericRequest): Promise<GenericResponse> {
+  public sendMessage(message: UserInputRequest): Promise<GenericResponse> {
     return new Promise((resolve, reject) => {
       if (message.request_type === "user_input") {
         this.userInputArray.push(message as UserInputRequest);
       }
-      const headers = new HttpHeaders().set("Content-Type", "application/json");
-  
-      console.log(`request: `, JSON.stringify(message));
-  
-      this.http.post<GenericResponse>(this.address, JSON.stringify(message), { headers }).subscribe({
+      
+      // Assuming `serializeToQueryParams` is a method that converts your message object into HttpParams.
+      // You will need to implement this conversion based on your `GenericRequest` structure.
+      const params = this.serializeToQueryParams(message);
+
+      console.log(`request: `, params.toString());
+
+      this.http.get<GenericResponse>(`${this.address}`, { params }).subscribe({
         next: (response) => {
           console.log(`response: `, response);
           resolve(response);
@@ -53,4 +56,19 @@ export class BackendService {
       });
     });
   }
+
+  private serializeToQueryParams(message: GenericRequest): HttpParams {
+    let params = new HttpParams();
+    // Use a type assertion here to let TypeScript know the real type of the keys
+    (Object.keys(message) as Array<keyof GenericRequest>).forEach(key => {
+      const value = message[key];
+      if (value !== undefined) {
+        // Assuming all values are either string or can be converted to string
+        params = params.append(key, String(value));
+      }
+    });
+    return params;
+  }
+  
+  
 }
diff --git a/arai-frontend/src/app/case-input/case-input.component.scss b/arai-frontend/src/app/case-input/case-input.component.scss
index 523257c..19a84b8 100644
--- a/arai-frontend/src/app/case-input/case-input.component.scss
+++ b/arai-frontend/src/app/case-input/case-input.component.scss
@@ -40,4 +40,16 @@ body, html {
       font-weight: 500;
     }
   }
+  
+
+  @media (max-width: 768px) {
+    .lawyering-form {
+      max-width: 90%; /* Allows more margin on smaller devices */
+    }
+    
+    .submit-button {
+      width: 100%; /* Makes the submit button full width on smaller screens */
+      align-self: center; /* Center align if preferred */
+    }
+  }
   
\ No newline at end of file
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 136fbbb..25ae0df 100644
--- a/arai-frontend/src/app/case-input/case-input.component.ts
+++ b/arai-frontend/src/app/case-input/case-input.component.ts
@@ -36,8 +36,6 @@ export class CaseInputComponent {
   async onSubmit() {
     this.userInput = this.userInputForm.value;
     if(this.userInput !== null) {
-    const newRequest = new UserInputRequest(this.userInput);
-    this.backendService.sendMessage(newRequest);
     const result = await this.backendService.sendMessage(new UserInputRequest(this.userInput));
     console.log(`result: `, result);
   } else {