diff --git a/.prettierrc b/.prettierrc index 544138b..b4acb25 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,3 +1,9 @@ { - "singleQuote": true + "singleQuote": true, + "trailingComma": "all", + "printWidth": 120, + "tabWidth": 2, + "bracketSpacing": true, + "endOfLine": "lf", + "semi": true } diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..b3b9243 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true, + "prettier.tabWidth": 2 +} \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index 0f4018b..2c3d4eb 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1,3 @@ - + + + diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 984c85b..a996045 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -1,12 +1,11 @@ import { TestBed } from '@angular/core/testing'; -import { AppComponent } from './app.component'; -import { NxWelcomeComponent } from './nx-welcome.component'; import { RouterTestingModule } from '@angular/router/testing'; +import { AppComponent } from './app.component'; describe('AppComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AppComponent, NxWelcomeComponent, RouterTestingModule], + imports: [AppComponent, RouterTestingModule], }).compileComponents(); }); @@ -14,9 +13,7 @@ describe('AppComponent', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('h1')?.textContent).toContain( - 'Welcome NitroPlusTranslator' - ); + expect(compiled.querySelector('h1')?.textContent).toContain('Welcome NitroPlusTranslator'); }); it(`should have as title 'NitroPlusTranslator'`, () => { diff --git a/src/app/app.component.ts b/src/app/app.component.ts index c33e807..48ba98b 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,14 +1,26 @@ import { Component } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { NxWelcomeComponent } from './nx-welcome.component'; +import { TextListComponent } from './components/text_list/text_list.component'; +import { UploadBtnComponent } from './components/upload_btn/upload_btn.component'; +import { parse } from './lib/parser'; @Component({ standalone: true, - imports: [NxWelcomeComponent, RouterModule], + imports: [UploadBtnComponent, RouterModule, TextListComponent], selector: 'app-root', templateUrl: './app.component.html', styleUrl: './app.component.scss', }) export class AppComponent { title = 'NitroPlusTranslator'; + elements: string[] = []; + + onFileLoaded(text: string) { + const parsed = parse(text); + this.elements = parsed; + console.log(parsed); + + // const lines = text.split('\n'); + // this.elements.push(...lines); + } } diff --git a/src/app/app.config.ts b/src/app/app.config.ts index bc2fc3c..9e677fd 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -1,10 +1,8 @@ +import { provideHttpClient } from '@angular/common/http'; import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; import { appRoutes } from './app.routes'; export const appConfig: ApplicationConfig = { - providers: [ - provideZoneChangeDetection({ eventCoalescing: true }), - provideRouter(appRoutes), - ], + providers: [provideHttpClient(), provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(appRoutes)], }; diff --git a/src/app/components/text_list/guide/http b/src/app/components/text_list/guide/http new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/text_list/text_list.component.html b/src/app/components/text_list/text_list.component.html new file mode 100644 index 0000000..8a6dc89 --- /dev/null +++ b/src/app/components/text_list/text_list.component.html @@ -0,0 +1,13 @@ +

Всего: {{ elements.length }}

+
+ @for(item of elements; track $index) { +
+

{{ $index + 1 }}

+
+
{{ item }}
+ +
+ +
+ } +
diff --git a/src/app/components/text_list/text_list.component.scss b/src/app/components/text_list/text_list.component.scss new file mode 100644 index 0000000..cb41263 --- /dev/null +++ b/src/app/components/text_list/text_list.component.scss @@ -0,0 +1,87 @@ +#elements { + display: flex; + 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; +} + +.send-translate-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; + margin: 2rem; + &:hover { + transform: scale(1.2); + } +} diff --git a/src/app/components/text_list/text_list.component.ts b/src/app/components/text_list/text_list.component.ts new file mode 100644 index 0000000..dbd12fb --- /dev/null +++ b/src/app/components/text_list/text_list.component.ts @@ -0,0 +1,36 @@ +import { CommonModule } from '@angular/common'; +import { HttpClient } from '@angular/common/http'; +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'app-text-list', + templateUrl: './text_list.component.html', + styleUrls: ['./text_list.component.scss'], + standalone: true, + imports: [CommonModule], +}) +export class TextListComponent { + constructor(private http: HttpClient) {} + private _elements: string[] = []; + + @Input() set elements(el: string[]) { + this._elements = el; + } + + get elements() { + return this._elements; + } + 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) }); + } +} diff --git a/src/app/components/upload_btn/upload_btn.component.html b/src/app/components/upload_btn/upload_btn.component.html new file mode 100644 index 0000000..843307b --- /dev/null +++ b/src/app/components/upload_btn/upload_btn.component.html @@ -0,0 +1,4 @@ + diff --git a/src/app/components/upload_btn/upload_btn.component.scss b/src/app/components/upload_btn/upload_btn.component.scss new file mode 100644 index 0000000..d68a12c --- /dev/null +++ b/src/app/components/upload_btn/upload_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); + } +} diff --git a/src/app/components/upload_btn/upload_btn.component.ts b/src/app/components/upload_btn/upload_btn.component.ts new file mode 100644 index 0000000..e0fa549 --- /dev/null +++ b/src/app/components/upload_btn/upload_btn.component.ts @@ -0,0 +1,33 @@ +import { CommonModule } from '@angular/common'; +import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core'; + +@Component({ + imports: [CommonModule], + selector: 'app-upload-btn', + styleUrl: './upload_btn.component.scss', + templateUrl: './upload_btn.component.html', + standalone: true, +}) +export class UploadBtnComponent { + @ViewChild('fileInput') fileInput: ElementRef | null = null; + @Output() fileLoaded = new EventEmitter(); + + onChange(event: Event) { + if (event.target) { + const target = event.target as HTMLInputElement; + if (target.files) { + const file: File = target.files[0]; + if (!file.name.endsWith('.nps')) { + alert('Only .nps files are allowed'); + target.value = ''; + return; + } + const reader = new FileReader(); + reader.onload = () => { + this.fileLoaded.emit(reader.result as string); + }; + reader.readAsText(file); + } + } + } +} diff --git a/src/app/lib/parser.ts b/src/app/lib/parser.ts new file mode 100644 index 0000000..a06369e --- /dev/null +++ b/src/app/lib/parser.ts @@ -0,0 +1,10 @@ +export function parse(text: string): string[] { + const replaced_text = text + .replace('/<[kK]{1}>/gm', '\n') + .replace(/(<[^>]*>|\/\/.*)/gm, '') + .replace(/\s*\n\s*/gm, '\n'); + return replaced_text + .split('\n') + .map((line) => line.trim()) + .filter((line) => line.length > 0); +} diff --git a/src/app/nx-welcome.component.ts b/src/app/nx-welcome.component.ts deleted file mode 100644 index 8531e25..0000000 --- a/src/app/nx-welcome.component.ts +++ /dev/null @@ -1,907 +0,0 @@ -import { Component, ViewEncapsulation } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -@Component({ - selector: 'app-nx-welcome', - standalone: true, - imports: [CommonModule], - template: ` - - -
-
- -
-

- Hello there, - Welcome NitroPlusTranslator 👋 -

-
- -
-
-

- - - - You're up and running -

- What's next? -
-
- - - -
-
- -
- - -
- -
-

Next steps

-

Here are some things you can do with Nx:

-
- - - - - Add UI library - - 
# Generate UI lib
-nx g @nx/angular:lib ui
-# Add a component
-nx g @nx/angular:component ui/src/lib/button
-
-
- - - - - View project details - - 
nx show project NitroPlusTranslator --web
-
-
- - - - - View interactive project graph - - 
nx graph
-
-
- - - - - Run affected commands - - 
# see what's been affected by changes
-nx affected:graph
-# run tests for current changes
-nx affected:test
-# run e2e tests for current changes
-nx affected:e2e
-
-
-

- Carefully crafted with - - - -

-
-
- `, - styles: [], - encapsulation: ViewEncapsulation.None, -}) -export class NxWelcomeComponent {} diff --git a/src/index.html b/src/index.html index b48ff45..7721956 100644 --- a/src/index.html +++ b/src/index.html @@ -6,6 +6,7 @@ + diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..43d1886 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,12 @@ /* You can add global styles to this file, and also import other style files */ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); +body { + background-color: #191113; +} +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: 'Montserrat', sans-serif; + font-optical-sizing: auto; +} diff --git a/tsconfig.json b/tsconfig.json index 49bbc34..fb44c4a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,7 +9,10 @@ "importHelpers": true, "target": "es2022", "module": "esnext", - "lib": ["es2020", "dom"], + "lib": [ + "es2020", + "dom" + ], "skipLibCheck": true, "skipDefaultLibCheck": true, "baseUrl": ".", @@ -36,11 +39,14 @@ } ], "compileOnSave": false, - "exclude": ["node_modules", "tmp"], + "exclude": [ + "node_modules", + "tmp" + ], "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": true, "strictInputAccessModifiers": true, "strictTemplates": true } -} +} \ No newline at end of file