Edit: prettier config

Reviewed-on: #1

.nvmrc

@@ -0,0 +1 @@
+v20.14.0

.prettierrc

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

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
-    "prettier.tabWidth": 2
+    "editor.tabSize": 2
 }

src/app/app.component.html

@@ -1,3 +1,6 @@
-<app-upload-btn (fileLoaded)="onFileLoaded($event)"></app-upload-btn>
+<div class="btns">
+  <app-upload-btn (fileLoaded)="onFileLoaded($event)"></app-upload-btn>
+  <app-clear-btn (clear)="onClearClicked()"></app-clear-btn>
+</div>
 <app-text-list [elements]="elements"></app-text-list>
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,26 +1,35 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { ClearBtnComponent } from './components/clear_btn/clear_btn.component';
 import { TextListComponent } from './components/text_list/text_list.component';
 import { UploadBtnComponent } from './components/upload_btn/upload_btn.component';
+import { TranslateData } from './dto/translate_data.dto';
 import { parse } from './lib/parser';
 
 @Component({
   standalone: true,
-  imports: [UploadBtnComponent, RouterModule, TextListComponent],
+  imports: [UploadBtnComponent, RouterModule, TextListComponent, ClearBtnComponent],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'NitroPlusTranslator';
-  elements: string[] = [];
+  elements: TranslateData[] = [];
+
+  ngOnInit(): void {
+    const data = localStorage.getItem('translations');
+    if (data) {
+      this.elements = JSON.parse(data);
+    }
+  }
 
   onFileLoaded(text: string) {
     const parsed = parse(text);
     this.elements = parsed;
-    console.log(parsed);
+  }
 
-    // const lines = text.split('\n');
+  onClearClicked() {
-    // this.elements.push(...lines);
+    this.elements = [];
   }
 }

src/app/app.config.ts

@@ -1,8 +1,8 @@
 import { provideHttpClient } from '@angular/common/http';
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { appRoutes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideHttpClient(), provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(appRoutes)],
+  providers: [provideHttpClient(), provideRouter(appRoutes)],
 };

src/app/components/clear_btn/clear_btn.component.html

@@ -0,0 +1,3 @@
+<button (click)="clear_func()">
+  <span><i class="lni lni-trash-can"></i> Clear</span>
+</button>

src/app/components/clear_btn/clear_btn.component.scss

@@ -0,0 +1,14 @@
+button {
+  outline: none;
+  border: none;
+  cursor: pointer;
+  background-color: #5b3f45;
+  padding: 1em 1.5em;
+  color: #f5f6fa;
+  border-radius: 15px;
+  transition: ease-in-out 0.2s;
+  margin: 2rem;
+  &:hover {
+    transform: scale(1.2);
+  }
+}

src/app/components/clear_btn/clear_btn.component.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-clear-btn',
+  templateUrl: './clear_btn.component.html',
+  styleUrls: ['./clear_btn.component.scss'],
+  standalone: true,
+  imports: [CommonModule],
+})
+export class ClearBtnComponent {
+  @Output() clear = new EventEmitter();
+  clear_func() {
+    localStorage.setItem('translations', '[]');
+    this.clear.emit();
+  }
+}

src/app/components/text_list/text_list.component.html

@@ -1,13 +1,21 @@
-<h1 *ngIf="elements.length">Всего: {{ elements.length }}</h1>
+<h1 *ngIf="elements_data.length">Всего: {{ elements_data.length }}</h1>
 <div id="elements">
-  @for(item of elements; track $index) {
+  @for(item of elements_data; track $index) {
-  <div class="element">
+  <app-translate-block [index]="$index" [item]="item"></app-translate-block>
+  <!-- <div class="element">
     <h2>{{ $index + 1 }}</h2>
     <div class="fields">
-      <div class="english-text">{{ item }}</div>
+      <div class="english-text">{{ item.english_text }}</div>
-      <textarea type="text" class="translated-text" (input)="autoScroll($event)" rows="1"></textarea>
+      <div class="translated-text">
+        <textarea
+          type="text"
+          [value]="item.translated_text"
+          (change)="typeTranslation($event, $index)"
+          rows="1"
+        ></textarea>
       </div>
-    <button class="send-translate-btn" (click)="sendToTranslate(item)">Translate</button>
     </div>
+    <button class="send-translate-btn" (click)="sendToTranslate(item.english_text, $index)">Translate</button>
+  </div> -->
   }
 </div>

src/app/components/text_list/text_list.component.scss

@@ -3,85 +3,17 @@
   flex-direction: column;
   gap: 3rem;
   align-items: center;
-  textarea {
-    height: fit-content;
-    min-height: 3rem;
-    line-height: 3rem;
-    border-radius: 8px;
-    color: #efdee0;
-    outline: none;
-    padding-inline: 2rem 1rem;
-    background-color: transparent;
-    border: 2px solid #e4bdc3;
-    word-wrap: break-word;
-    overflow-x: hidden;
-    resize: none;
-    overflow-y: hidden;
-    &:focus {
-      border: 2px solid #efdee0;
-    }
-    font-size: 1rem;
-    font-weight: inherit;
-  }
   margin-inline: 2rem;
 }
 
-.english-text {
-  color: #efdee0;
-  border: 2px solid #e4bdc3;
-  word-wrap: break-word;
-  border-radius: 8px;
-  padding-inline: 2rem 1rem;
-  line-height: 3rem;
-  background-color: transparent;
-}
-
-.element {
-  display: flex;
-  background-color: #413738;
-  padding: 3rem 5rem;
-  border-radius: 30px;
-  flex-direction: row;
-  width: 100%;
-  max-width: 1200px;
-  align-items: center;
-  gap: 2rem;
-  justify-content: space-between;
-  h2 {
-    color: #efdee0;
-  }
-  .fields {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    width: 100%;
-    max-width: 1200px;
-  }
-}
-
-@media (max-width: 768px) {
-  .element {
-    flex-direction: column;
-  }
-}
-
 h1 {
   color: #efdee0;
   text-align: center;
   margin: 1rem 2rem;
 }
-
+app-translate-block {
-.send-translate-btn {
+  width: 100%;
-  outline: none;
+  display: flex;
-  border: none;
+  flex-direction: column;
-  cursor: pointer;
+  align-items: center;
-  background-color: #5b3f45;
-  padding: 1em 1.5em;
-  color: #f5f6fa;
-  border-radius: 15px;
-  transition: ease-in-out 0.2s;
-  margin: 2rem;
-  &:hover {
-    transform: scale(1.2);
-  }
 }

src/app/components/text_list/text_list.component.ts

@@ -1,36 +1,23 @@
 import { CommonModule } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
 import { Component, Input } from '@angular/core';
+import { TranslateData } from 'src/app/dto/translate_data.dto';
+import { TranslateBlockComponent } from '../translate_block/translate_block.component';
 
 @Component({
   selector: 'app-text-list',
   templateUrl: './text_list.component.html',
   styleUrls: ['./text_list.component.scss'],
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, TranslateBlockComponent],
 })
 export class TextListComponent {
-  constructor(private http: HttpClient) {}
+  elements_data: TranslateData[] = [];
-  private _elements: string[] = [];
+  @Input() set elements(el: TranslateData[]) {
-
+    this.elements_data = el;
-  @Input() set elements(el: string[]) {
+    localStorage.setItem('translations', JSON.stringify(this.elements_data));
-    this._elements = el;
   }
 
   get elements() {
-    return this._elements;
+    return this.elements_data;
-  }
-  autoScroll($event: Event) {
-    const target = $event.target as HTMLTextAreaElement;
-    target.style.height = '3rem';
-    target.style.height = target.scrollHeight + 'px';
-  }
-
-  sendToTranslate($text: string) {
-    console.log($text);
-    //TODO: говно какое-та не хочет отправлять целиком
-    this.http
-      .get(`https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=ru&dt=t&q=` + $text)
-      .subscribe({ next: (data: any) => console.log(data) });
   }
 }

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

@@ -0,0 +1,14 @@
+<div class="element">
+  <h2>{{ index + 1 }}</h2>
+  <div class="fields">
+    <div class="english-text">{{ item.english_text }}</div>
+    <div class="translated-text" #translatedText [attr.contenteditable]="isEditing" (blur)="saveTranslate()"></div>
+  </div>
+  <div class="btns">
+    <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>
+</div>

src/app/components/translate_block/translate_block.component.scss

@@ -0,0 +1,85 @@
+.translated-text {
+  border-radius: 8px;
+  height: auto;
+  color: #efdee0;
+  outline: none;
+  padding-inline: 2rem 1rem;
+  background-color: transparent;
+  border: 2px solid #e4bdc3;
+  font-size: 1rem;
+  font-weight: inherit;
+  min-height: 3rem;
+  line-height: 3rem;
+  &:focus {
+    border: 2px solid #efdee0;
+  }
+  &:read-only {
+    opacity: 0.5;
+  }
+  word-wrap: break-word;
+}
+
+.english-text {
+  color: #efdee0;
+  border: 2px solid #e4bdc3;
+  word-wrap: break-word;
+  border-radius: 8px;
+  padding-inline: 2rem 1rem;
+  line-height: 3rem;
+  background-color: transparent;
+}
+
+.element {
+  display: flex;
+  background-color: #413738;
+  padding: 3rem 5rem;
+  border-radius: 30px;
+  flex-direction: row;
+  width: 100%;
+  max-width: 1200px;
+  align-items: center;
+  gap: 2rem;
+  justify-content: space-between;
+  h2 {
+    color: #efdee0;
+  }
+  .fields {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+    max-width: 1200px;
+  }
+}
+
+@media (max-width: 768px) {
+  .element {
+    flex-direction: column;
+  }
+}
+
+.btns {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  .btn {
+    outline: none;
+    border: none;
+    cursor: pointer;
+    background-color: #5b3f45;
+    padding: 1em 1.5em;
+    color: #f5f6fa;
+    border-radius: 15px;
+    transition: ease-in-out 0.2s;
+    &:hover {
+      transform: scale(1.2);
+    }
+    &:disabled {
+      opacity: 0.5;
+      &:hover {
+        cursor: not-allowed;
+        transform: scale(1);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,76 @@
+import { CommonModule } from '@angular/common';
+import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { TranslateData } from 'src/app/dto/translate_data.dto';
+import { ETranslateService } from 'src/app/services/translate.enums';
+import { TranslateService } from 'src/app/services/translate.service';
+
+@Component({
+  selector: 'app-translate-block',
+  templateUrl: './translate_block.component.html',
+  styleUrls: ['./translate_block.component.scss'],
+  standalone: true,
+  imports: [CommonModule],
+  providers: [TranslateService],
+})
+export class TranslateBlockComponent implements OnInit, AfterViewInit {
+  @ViewChild('translatedText') translatedText: ElementRef<HTMLDivElement> | null = null;
+  @Input() item: TranslateData = { english_text: '', translated_text: '' };
+  @Input() index = 0;
+  isEditing = false;
+
+  saveChanges() {
+    const data: TranslateData[] = JSON.parse(localStorage.getItem('translations') ?? '[]');
+    if (!data.length) {
+      alert('No data');
+      return;
+    }
+    data[this.index] = this.item;
+    localStorage.setItem('translations', JSON.stringify(data));
+  }
+
+  ngOnInit(): void {
+    this.isEditing = this.item.translated_text === '';
+  }
+
+  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() {
+    this.isEditing = false;
+    if (this.translatedText) {
+      this.item.translated_text = this.translatedText.nativeElement.textContent || '';
+      this.translatedText.nativeElement.textContent = '';
+      this.translatedText.nativeElement.textContent = this.item.translated_text;
+    }
+    this.saveChanges();
+  }
+  clear() {
+    this.item.translated_text = '';
+    if (this.translatedText) this.translatedText.nativeElement.textContent = '';
+    this.isEditing = true;
+    this.saveChanges();
+  }
+
+  ngAfterViewInit(): void {
+    if (this.translatedText) this.translatedText.nativeElement.textContent = this.item.translated_text;
+  }
+}

src/app/components/upload_btn/upload_btn.component.ts

@@ -25,6 +25,7 @@ export class UploadBtnComponent {
         const reader = new FileReader();
         reader.onload = () => {
           this.fileLoaded.emit(reader.result as string);
+          target.value = '';
         };
         reader.readAsText(file);
       }

src/app/dto/translate_data.dto.ts

@@ -0,0 +1,4 @@
+export interface TranslateData {
+  english_text: string;
+  translated_text: string;
+}

src/app/lib/parser.ts

@@ -1,10 +1,15 @@
-export function parse(text: string): string[] {
+import { TranslateData } from '../dto/translate_data.dto';
+
+export function parse(text: string): TranslateData[] {
   const replaced_text = text
     .replace('/<[kK]{1}>/gm', '\n')
     .replace(/(<[^>]*>|\/\/.*)/gm, '')
     .replace(/\s*\n\s*/gm, '\n');
-  return replaced_text
+  const result = replaced_text
     .split('\n')
     .map((line) => line.trim())
-    .filter((line) => line.length > 0);
+    .filter((line) => line.length > 0)
+    .map((line) => ({ english_text: line, translated_text: '' }));
+  console.log(result);
+  return result;
 }

src/app/pipes/translate.pipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { TranslateService } from '../services/translate.service';
+
+@Pipe({ name: 'translate', standalone: true, pure: false })
+export class TranslatePipe implements PipeTransform {
+  constructor(private translateService: TranslateService) {}
+  transform(text: string) {
+    return this.translateService.translate(text);
+  }
+}

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

@@ -0,0 +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) {}
+
+  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);
+    }
+  }
+}