New version of interface for chatgpt

.gitignore

@@ -40,3 +40,4 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+public/ARTI_20240903_120441.jpg

src/app/app.config.ts

@@ -7,5 +7,5 @@ import { provideHttpClient } from '@angular/common/http';
 export const appConfig: ApplicationConfig = {
   providers: [provideZoneChangeDetection({ eventCoalescing: true }), 
               provideRouter(routes), 
-              provideHttpClient(),]
+              provideHttpClient()]
 };

src/app/app.routes.ts

@@ -7,7 +7,7 @@ import { ChatGPTComponent } from './chat-gpt/chat-gpt.component';
 export const routes: Routes = [ 
     {   path: "", 
         title: "Kalkulator amortyzacyjny",
-        component:AssetCalculatorComponent  },
+        component:ChatGPTComponent  },
     {   path: "about-me",
         title:"O mnie",
         component: AboutMeComponent  },

src/app/asset-calculator/asset-calculator.component.ts

@@ -1,5 +1,5 @@
-import {Component, computed, effect, OnInit ,signal } from '@angular/core';
+import {Component,  effect, OnInit, signal } from '@angular/core';
-import {FormsModule, ReactiveFormsModule, FormControl, FormGroup, Validators} from '@angular/forms';
+import {ReactiveFormsModule,  FormGroup, Validators, FormControl} from '@angular/forms';
 import {CurrencyPipe,DecimalPipe,PercentPipe} from '@angular/common';
 import {AssetsModule} from './assets/assets.module'
 import {Asset, Positions, AssetPlanPosition, TypeDepreciation } from './assets/asset';
@@ -8,7 +8,7 @@ import {AssetService} from './assets/service/asset.service'
 @Component({
   selector: 'app-asset-calculator',
   standalone: true,
-  imports: [FormsModule, CurrencyPipe, DecimalPipe, PercentPipe, AssetsModule, ReactiveFormsModule ] ,
+  imports: [ CurrencyPipe, DecimalPipe, PercentPipe, AssetsModule, ReactiveFormsModule ] ,
   templateUrl: "asset-calculator.component.html",
   styleUrl: 'asset-calculator.component.css'
 })
@@ -41,7 +41,6 @@ export class AssetCalculatorComponent implements OnInit{
 
     constructor(private assetService : AssetService ){
 		effect( () => {  this.calculate();});
-//		this.assetsDepreciationForm.valueChanges.subscribe( (value)=> {	this.calculateForAsset(value);	});
     }
 
 	ngOnInit(): void{

src/app/asset-calculator/assets/service/asset.service.ts

@@ -1,11 +1,10 @@
 import { Injectable } from '@angular/core';
 
-import { HttpClient,HttpErrorResponse } from '@angular/common/http';
+import { HttpClient} from '@angular/common/http';
 import { Asset, Positions } from '../asset';
 import { Observable } from 'rxjs';
 
 
-let assetUrl: string ='https://api.arti24.eu/rest-api/assets/calculate';
 //let assetUrl: string ='http://localhost:8801/rest-api/assets/calculate';
 
 
@@ -14,10 +13,14 @@ let assetUrl: string ='https://api.arti24.eu/rest-api/assets/calculate';
 })
 export class AssetService {
 
+  //private assetUrl: string ='http://localhost:5001/rest-api/assets/calculate';
+ 
+  private assetUrl: string ='https://api.arti24.eu/rest-api/assets/calculate';
+
   constructor(private http: HttpClient) { }
 
   calculate(asset: Asset) : Observable<Positions>{
-     return this.http.post<Positions>(assetUrl, asset) ;
+     return this.http.post<Positions>(this.assetUrl, asset) ;
   }
 
 }

src/app/chat-gpt/chat-gpt.component.ts

@@ -1,12 +1,80 @@
-import { Component } from '@angular/core';
+import { Component,  effect, signal } from '@angular/core';
-
+import { ReactiveFormsModule, FormGroup, FormControl, FormsModule } from '@angular/forms';
+import { AiApiService } from './service/ai-api.service'
+import { Sentence } from './service/chats';
 @Component({
   selector: 'app-chat-gpt',
   standalone: true,
-  imports: [],
+  imports: [ReactiveFormsModule],
-  templateUrl: './chat-gpt.component.html',
+  template:
-  styleUrl: './chat-gpt.component.css'
+   `
+  <style>
+    .frame {
+        border: 2px solid gray; /* Kolor ramki */
+        border-radius: 8px; /* Zaokrąglenie krawędzi */
+        padding: 20px; /* Odstęp wewnętrzny */
+        background-color: #f8f9fa; /* Tło formularza */
+    }
+    .frame2 {
+        border: 2px solid rgb(225, 228, 86); /* Kolor ramki */
+        border-radius: 8px; /* Zaokrąglenie krawędzi */
+        padding: 20px; /* Odstęp wewnętrzny */
+        background-color: #f8f9fa; /* Tło formularza */
+    }
+</style>
+
+    <div class="container mt-5 ">
+    <h2>  Prace w toku </h2>
+    <form [formGroup]=chatGPTGroup>
+        <div class="container frame2">
+            <div class="row">
+                <textarea class="form-control col-10" rows="3" id="askGPT"
+                    formControlName="askGPT"
+                    required
+                    [(ngModel)]="question"
+                    placeholder="Write an inquiry to ChatGPT" >
+                </textarea>    
+                <button class="btn btn-secondary col-2" [disabled]=isAsking (click)=ask2Answer() >Send inquiry</button>
+            </div>   
+            <div class="row">
+                <textarea class="form-control col-10"
+                    formControlName="answerGPT" 
+                    [(ngModel)]="answer"
+                    rows="10" cols="30">
+                </textarea>
+            </div>
+        </div>
+    </form>
+`
+
 })
 export class ChatGPTComponent {
+    question :string ='';
+    answer = signal<string>('');
+
+    isAsking = false;
+
+    chatGPTGroup = new FormGroup(
+        {
+            askGPT   : new FormControl( this.question ),
+            answerGPT: new FormControl( this.answer() )
+        }   
+    );
+
+    constructor(private aiApiService : AiApiService ){
+    }
+
+    log(txt:string){
+        console.log( txt );
+    }
+
+    ask2Answer( ){
+        this.isAsking = true;
+   		const question : Sentence = {
+            body : this.question
+        }
+
+        this.aiApiService.ask( question ).subscribe( answer => { this.answer.set( answer.body ); this.isAsking = false; } );  
+    }
 
 }

src/app/chat-gpt/service/ai-api.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AiApiService } from './ai-api.service';
+
+describe('AiApiService', () => {
+  let service: AiApiService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AiApiService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/chat-gpt/service/ai-api.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Sentence } from './chats';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AiApiService {
+
+  private aiApiUrl = 'http://127.0.0.1:5000/chatgpt/ask';
+ // private aiApiUrl = 'http://127.0.0.1:8801/chatgpt/ask';
+//  private aiApiUrl = 'http://127.0.0.1:8801/chatgpt/ask';
+
+  constructor(private http: HttpClient) { }
+
+  ask(question: Sentence ) : Observable<Sentence>{
+
+    return this.http.post<Sentence>( this.aiApiUrl, question ) ;
+ }
+}

src/app/chat-gpt/service/chats.ts

@@ -0,0 +1,4 @@
+
+export interface Sentence{
+    body : string
+}