Feat: merge translate services into dev

.prettierrc

@@ -5,5 +5,9 @@
   "tabWidth": 2,
   "bracketSpacing": true,
   "endOfLine": "lf",
-  "semi": true
+  "semi": true,
+  "arrowParens": "always",
+  "bracketSameLine": false,
+  "insertPragma": false,
+  "useTabs": false
 }

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,7 @@
     <div class="translated-text" #translatedText [attr.contenteditable]="isEditing" (blur)="saveTranslate()"></div>
   </div>
   <div class="btns">
-    <nwui-button (click)="sendToTranslate()">Translate</nwui-button>
+    <nwui-button (click)="sendToGoogleTranslate()">Translate</nwui-button>
     <button (click)="isEditing = !isEditing" [disabled]="isEditing">Edit</button>
     <button (click)="clear()" [disabled]="!item.translated_text.length">Clear</button>
   </div>

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

@@ -1,8 +1,9 @@
 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 { ButtonComponent } from '@nwaifu-ui';
 import { TranslateData } from '../../dto/translate_data.dto';
-import { TranslatePipe } from '../../pipes/translate.pipe';
+import { ETranslateService } from '../../services/translate.enums';
+import { TranslateService } from '../../services/translate.service';
 
 @Component({
   selector: 'app-translate-block',
@@ -10,7 +11,7 @@ import { TranslatePipe } from '../../pipes/translate.pipe';
   styleUrls: ['./translate_block.component.scss'],
   standalone: true,
   imports: [CommonModule, ButtonComponent],
-  providers: [TranslatePipe],
+  providers: [TranslateService],
 })
 export class TranslateBlockComponent implements OnInit, AfterViewInit {
   @ViewChild('translatedText') translatedText: ElementRef<HTMLDivElement> | null = null;
@@ -32,13 +33,26 @@ export class TranslateBlockComponent implements OnInit, AfterViewInit {
     this.isEditing = this.item.translated_text === '';
   }
 
-  constructor(private translatePipe: TranslatePipe, private changeDetectionRef: ChangeDetectorRef) {}
-  async sendToTranslate() {
-    const text = await this.translatePipe.transform(this.item.english_text);
-    this.item.translated_text = text;
-    if (this.translatedText) this.translatedText.nativeElement.textContent = text;
-    this.isEditing = false;
-    this.saveChanges();
+  constructor(private translateService: TranslateService) {}
+  private sendToTranslate(service: ETranslateService = ETranslateService.GOOGLE) {
+    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) => {
-      this.http
-        .get(
-          'https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=ru&dt=t&q=' +
-            encodeURIComponent(text),
-        )
-        .subscribe({
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          next: (response: any) => {
-            console.log(response);
-            resolve(response[0][0][0]);
-          },
-          error: (error) => {
-            console.error(error);
-            resolve('');
-          },
-        });
-    });
+
+  private googleTranslate(text: string): Observable<string> {
+    return this.http
+      .get<GoogleTranslateResponse>(
+        'https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=ru&dt=t&q=' + encodeURIComponent(text),
+      )
+      .pipe(
+        map((response) => {
+          let result = '';
+          response[0].forEach((el) => {
+            result += el[0] + ' ';
+          });
+          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);
+    }
   }
 }