feat: started cost view and mediators list

arai-frontend/angular.json

@@ -30,8 +30,7 @@
               "src/assets"
             ],
             "styles": [
-              "@angular/material/prebuilt-themes/indigo-pink.css",
+              "@angular/material/prebuilt-themes/indigo-pink.css"
-              "src/styles.scss"
             ],
             "scripts": [],
             "server": "src/main.server.ts",

arai-frontend/pnpm-lock.yaml

@@ -26,9 +26,6 @@ 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)
@@ -459,20 +456,6 @@ 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:
@@ -7720,10 +7703,6 @@ 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==}
 

arai-frontend/src/app/app.component.html

@@ -1 +1 @@
-<app-case-input> </app-case-input>
+<router-outlet></router-outlet>

arai-frontend/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { RouterModule, RouterOutlet } from '@angular/router';
 import { CaseInputComponent } from './case-input/case-input.component';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { HttpClientModule } from '@angular/common/http';
@@ -8,7 +8,7 @@ import { BackendService } from './backend.service';
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, CaseInputComponent, FlexLayoutModule, HttpClientModule],
+  imports: [RouterOutlet, CaseInputComponent, FlexLayoutModule, HttpClientModule, RouterModule],
   providers: [BackendService],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'

arai-frontend/src/app/app.routes.ts

@@ -1,3 +1,22 @@
 import { Routes } from '@angular/router';
+import { CaseInputComponent } from './case-input/case-input.component';
+import { CostViewComponent } from './cost-view/cost-view.component';
+import { MediatorsListComponent } from './mediators-list/mediators-list.component';
+
+export const routes: Routes = [
+    {
+      path: '', // Explicit root path configuration
+      redirectTo: '/input', // Redirect to '/input' as a default route
+      pathMatch: 'full' // Ensures full match of the path
+    },
+    {
+      path: '', // Base path for children
+      children: [
+        {path: 'input', component: CaseInputComponent},
+        {path: 'koszt', component: CostViewComponent},
+        {path: 'mediatorzy', component: MediatorsListComponent},
+        {path: '**', component: CaseInputComponent} // Wildcard route for unmatched paths
+      ]
+    }
+  ];
   
-export const routes: Routes = [];

arai-frontend/src/app/backend.service.ts

@@ -32,17 +32,25 @@ export class BackendService {
     }
   }
 
-  public sendMessage(message: GenericRequest): void {
+  public sendMessage(message: GenericRequest): Promise<GenericResponse> {
+    return new Promise((resolve, reject) => {
       if (message.request_type === "user_input") {
         this.userInputArray.push(message as UserInputRequest);
       }
-    const headers = new HttpHeaders().set(
+      const headers = new HttpHeaders().set("Content-Type", "application/json");
-      "Content-Type",
+  
-      "application/json"
-    );
       console.log(`request: `, JSON.stringify(message));
-    this.http.post(this.address, JSON.stringify(message), {headers}).subscribe((response) => {
+  
+      this.http.post<GenericResponse>(this.address, JSON.stringify(message), { headers }).subscribe({
+        next: (response) => {
           console.log(`response: `, response);
-    })
+          resolve(response);
+        },
+        error: (error) => {
+          console.error(`backendService, sendMessage, error: `, error);
+          reject(error);
+        }
+      });
+    });
   }
 }

arai-frontend/src/app/case-input/case-input.component.html

@@ -1,24 +1,24 @@
 <form [formGroup]="userInputForm" (ngSubmit)="onSubmit()" fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start">
     <mat-form-field appearance="fill" fxFlex>
-      <mat-label>Generic Input</mat-label>
+      <mat-label>Opis Sprawy</mat-label>
-      <input matInput formControlName="generic_input">
+      <textarea matInput formControlName="generic_input"> </textarea>
     </mat-form-field>
   
     <mat-form-field appearance="fill" fxFlex>
-      <mat-label>Trial Value</mat-label>
+      <mat-label>Wartość Przedmiotu Sporu</mat-label>
       <input matInput type="number" formControlName="trial_value">
     </mat-form-field>
   
     <mat-form-field appearance="fill" fxFlex>
-      <mat-label>Location</mat-label>
+      <mat-label>Lokacja</mat-label>
       <input matInput formControlName="location">
     </mat-form-field>
   
     <div fxFlex fxLayout="column" fxLayoutGap="10px">
-      <mat-checkbox formControlName="experts_called">Experts Called</mat-checkbox>
+      <mat-checkbox formControlName="experts_called">Powołani Biegli</mat-checkbox>
-      <mat-checkbox formControlName="witnesses_called">Witnesses Called</mat-checkbox>
+      <mat-checkbox formControlName="witnesses_called">Powołani Świadkowie</mat-checkbox>
     </div>
   
-    <button mat-raised-button type="submit" (click)="onSubmit()" fxFlexAlign="end">Submit</button>
+    <button mat-raised-button color="primary" type="submit" (click)="onSubmit()" fxFlexAlign="end">Wyślij</button>
   </form>
   

arai-frontend/src/app/case-input/case-input.component.ts

@@ -33,24 +33,15 @@ export class CaseInputComponent {
     });
   }
 
-  ngOnInit() {
+  async onSubmit() {
-    const data: userInput = {
+    this.userInput = this.userInputForm.value;
-      "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));
+    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 {
     console.error(`caseInputComponent, onSubmit, userInput is null!`)
   }
 }
-
 }

arai-frontend/src/app/cost-view/cost-view.component.html

@@ -1 +1,5 @@
-<p>cost-view works!</p>
+Przewidywalne minimalne koszta:
+@if(costData !== null) {
+    Koszta: {{costData.cost_of_trial}} zł <br> 
+    Przewidywalny czas: {{costData.time_of_trial | date:'L'}} miesiące  
+}

arai-frontend/src/app/cost-view/cost-view.component.ts

@@ -1,12 +1,43 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { StatisticsOutputInterface } from '../requests-responses';
+import { DatePipe } from '@angular/common';
 
 @Component({
   selector: 'app-cost-view',
   standalone: true,
-  imports: [],
+  imports: [DatePipe],
   templateUrl: './cost-view.component.html',
   styleUrl: './cost-view.component.scss'
 })
 export class CostViewComponent {
+@Input() costData: StatisticsOutputInterface | null = {
+  cost_of_trial: 2137,
+  time_of_trial: Date.UTC(0, 6, 0, 0, 0, 0, 0)
+};
+
+public calculateTimeDifference(utcDateNumber: number): string {
+  const currentDate = new Date();
+  const targetDate = new Date(utcDateNumber);
+  const differenceInMilliseconds = targetDate.getTime() - currentDate.getTime();
+
+  // Convert milliseconds to days
+  const differenceInDays = differenceInMilliseconds / (1000 * 60 * 60 * 24);
+
+  // Check if the difference is greater than or equal to 30 to approximate months
+  if (differenceInDays >= 30) {
+    const months = Math.floor(differenceInDays / 30);
+    const years = Math.floor(differenceInDays/365);
+    if(years > 0) {
+      return `Twoja sprawa zajmie około ${years} lat`
+    }
+    if(months === 1) {
+      return `Twoja sprawa zajmie około 1 miesiąc`;
+    } else {
+      return `Twoja sprawa zajmie około ${months} miesięcy`;
+    }
+  } else {
+    return `Twoja sprawa zajmie około ${Math.ceil(differenceInDays)} dni`;
+  }
+}
 
 }

arai-frontend/src/app/mediators-list/mediators-list.component.html

@@ -1 +1,32 @@
-<p>mediators-list works!</p>
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+
+    <!--- Note that these columns can be defined in any order.
+          The actual rendered columns are set as a property on the row definition" -->
+  
+    <!-- Position Column -->
+    <ng-container matColumnDef="position">
+      <th mat-header-cell *matHeaderCellDef> No. </th>
+      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+    </ng-container>
+  
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+    </ng-container>
+  
+    <!-- Weight Column -->
+    <ng-container matColumnDef="weight">
+      <th mat-header-cell *matHeaderCellDef> Weight </th>
+      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+    </ng-container>
+  
+    <!-- Symbol Column -->
+    <ng-container matColumnDef="symbol">
+      <th mat-header-cell *matHeaderCellDef> Symbol </th>
+      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+    </ng-container>
+  
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>