Add: Translate multiservice

src/app/app.config.ts

@@ -2,8 +2,7 @@ import { provideHttpClient } from '@angular/common/http';
 import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { appRoutes } from './app.routes';
-import { TranslateService } from './services/translate.service';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideHttpClient(), provideRouter(appRoutes), TranslateService],
+  providers: [provideHttpClient(), provideRouter(appRoutes)],
 };

src/app/components/translate_block/translate_block.component.html

@@ -5,7 +5,9 @@
     <div class="translated-text" #translatedText [attr.contenteditable]="isEditing" (blur)="saveTranslate()"></div>
   </div>
   <div class="btns">
-    <button class="send-translate-btn btn" (click)="sendToTranslate()">Translate</button>
+    <button class="send-translate-btn btn" (click)="sendToGoogleTranslate()">Google</button>
+    <button class="send-translate-btn btn" (click)="sendToDeeplTranslate()">Deepl</button>
+    <button class="send-translate-btn btn" (click)="sendToPromptTranslate()">PROMPT</button>
     <button class="change-edit-btn btn" (click)="isEditing = !isEditing" [disabled]="isEditing">Edit</button>
     <button class="clear-btn btn" (click)="clear()" [disabled]="!item.translated_text.length">Clear</button>
   </div>

src/app/components/translate_block/translate_block.component.ts

@@ -1,7 +1,8 @@
 import { CommonModule } from '@angular/common';
-import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { TranslateData } from 'src/app/dto/translate_data.dto';
-import { TranslatePipe } from 'src/app/pipes/translate.pipe';
+import { ETranslateService } from 'src/app/services/translate.enums';
+import { TranslateService } from 'src/app/services/translate.service';
 
 @Component({
   selector: 'app-translate-block',
@@ -9,7 +10,7 @@ import { TranslatePipe } from 'src/app/pipes/translate.pipe';
   styleUrls: ['./translate_block.component.scss'],
   standalone: true,
   imports: [CommonModule],
-  providers: [TranslatePipe],
+  providers: [TranslateService],
 })
 export class TranslateBlockComponent implements OnInit, AfterViewInit {
   @ViewChild('translatedText') translatedText: ElementRef<HTMLDivElement> | null = null;
@@ -31,13 +32,26 @@ export class TranslateBlockComponent implements OnInit, AfterViewInit {
     this.isEditing = this.item.translated_text === '';
   }
 
-  constructor(private translatePipe: TranslatePipe, private changeDetectionRef: ChangeDetectorRef) {}
+  constructor(private translateService: TranslateService) {}
-  async sendToTranslate() {
+  private sendToTranslate(service: ETranslateService = ETranslateService.GOOGLE) {
-    const text = await this.translatePipe.transform(this.item.english_text);
+    this.translateService.translate(this.item.english_text, service).subscribe((text) => {
       this.item.translated_text = text;
       if (this.translatedText) this.translatedText.nativeElement.textContent = text;
       this.isEditing = false;
       this.saveChanges();
+    });
+  }
+
+  sendToGoogleTranslate() {
+    this.sendToTranslate(ETranslateService.GOOGLE);
+  }
+
+  sendToDeeplTranslate() {
+    this.sendToTranslate(ETranslateService.DEEPL);
+  }
+
+  sendToPromptTranslate() {
+    this.sendToTranslate(ETranslateService.PROMPT);
   }
 
   saveTranslate() {

src/app/services/translate.dto.ts

@@ -0,0 +1 @@
+export type GoogleTranslateResponse = Array<Array<string>>;

src/app/services/translate.enums.ts

@@ -0,0 +1,5 @@
+export enum ETranslateService {
+  GOOGLE = 'google',
+  DEEPL = 'deepl',
+  PROMPT = 'prompt',
+}

src/app/services/translate.service.ts

@@ -1,27 +1,34 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { Observable, map } from 'rxjs';
+import { GoogleTranslateResponse } from './translate.dto';
+import { ETranslateService } from './translate.enums';
 
 @Injectable({ providedIn: 'root' })
 export class TranslateService {
   constructor(private http: HttpClient) {}
-  translate(text: string): Promise<string> {
+
-    return new Promise<string>((resolve) => {
+  private googleTranslate(text: string): Observable<string> {
-      this.http
+    return this.http
-        .get(
+      .get<GoogleTranslateResponse>(
-          'https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=ru&dt=t&q=' +
+        'https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=ru&dt=t&q=' + encodeURIComponent(text),
-            encodeURIComponent(text),
       )
-        .subscribe({
+      .pipe(
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        map((response) => {
-          next: (response: any) => {
+          let result = '';
-            console.log(response);
+          response[0].forEach((el) => {
-            resolve(response[0][0][0]);
+            result += el[0] + ' ';
-          },
-          error: (error) => {
-            console.error(error);
-            resolve('');
-          },
-        });
           });
+          return result;
+        }),
+      );
+  }
+  translate(text: string, service: ETranslateService = ETranslateService.GOOGLE): Observable<string> {
+    switch (service) {
+      case ETranslateService.GOOGLE:
+        return this.googleTranslate(text);
+      default:
+        return this.googleTranslate(text);
+    }
   }
 }