neuro_llc/NitroPlusTranslator
Archived
2
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases 1 Wiki Activity

feat: nwaifu-ui lib with btn

Browse Source
This commit is contained in:
Sergey Elpashev
2024-06-08 01:18:39 +03:00
parent 169930cbf9
commit 16b6e34ed9
35 changed files with 337 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/app.component.html
View File

@@ -1,6 +1,11 @@
<div class="btns">
<app-upload-btn (fileLoaded)="onFileLoaded($event)"></app-upload-btn>
<app-clear-btn (clear)="onClearClicked()"></app-clear-btn>
<nwui-button (click)="fileInput.click()">
<span><i class="lni lni-upload"></i> Upload</span>
<input type="file" (change)="submitFile($event)" #fileInput style="display: none" />
</nwui-button>
<nwui-button (click)="onClearClicked()">
<span><i class="lni lni-trash-can"></i> Clear</span>
</nwui-button>
</div>
<app-text-list [elements]="elements"></app-text-list>
<router-outlet></router-outlet>

36
src/app/app.component.ts
View File

@@ -1,14 +1,12 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ClearBtnComponent } from './components/clear_btn/clear_btn.component';
import { ButtonComponent } from '@nwaifu-ui';
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, ClearBtnComponent],
imports: [RouterModule, TextListComponent, ButtonComponent],
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
@@ -16,11 +14,36 @@ import { parse } from './lib/parser';
export class AppComponent implements OnInit {
title = 'NitroPlusTranslator';
elements: TranslateData[] = [];
@ViewChild('fileInput') fileInput: HTMLInputElement | null = null;
ngOnInit(): void {
const data = localStorage.getItem('translations');
if (data) {
this.elements = JSON.parse(data);
try {
this.elements = JSON.parse(data);
} catch (e) {
console.error(e);
alert('Error while loading');
localStorage.removeItem('translations');
this.elements = [];
}
}
}
submitFile($event: Event) {
const target = $event.target as HTMLInputElement;
if (target.files) {
const file = target.files?.[0];
if (file) {
const reader = new FileReader();
reader.onload = () => {
if (reader.result) {
this.onFileLoaded(reader.result.toString());
target.value = '';
}
};
reader.readAsText(file);
}
}
}
@@ -31,5 +54,6 @@ export class AppComponent implements OnInit {
onClearClicked() {
this.elements = [];
localStorage.removeItem('translations');
}
}

3
src/app/components/clear_btn/clear_btn.component.html
View File

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

14
src/app/components/clear_btn/clear_btn.component.scss
View File

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

17
src/app/components/clear_btn/clear_btn.component.ts
View File

@@ -1,17 +0,0 @@
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();
}
}

15
src/app/components/text_list/text_list.component.html
View File

@@ -2,20 +2,5 @@
<div id="elements">
@for(item of elements_data; track $index) {
<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.english_text }}</div>
<div class="translated-text">
<textarea
type="text"
[value]="item.translated_text"
(change)="typeTranslation($event, $index)"
rows="1"
></textarea>
</div>
</div>
<button class="send-translate-btn" (click)="sendToTranslate(item.english_text, $index)">Translate</button>
</div> -->
}
</div>

2
src/app/components/text_list/text_list.component.ts
View File

@@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
import { TranslateData } from 'src/app/dto/translate_data.dto';
import { TranslateData } from '../../dto/translate_data.dto';
import { TranslateBlockComponent } from '../translate_block/translate_block.component';
@Component({

6
src/app/components/translate_block/translate_block.component.html
View File

@@ -5,8 +5,8 @@
<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="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>
<nwui-button (click)="sendToTranslate()">Translate</nwui-button>
<button (click)="isEditing = !isEditing" [disabled]="isEditing">Edit</button>
<button (click)="clear()" [disabled]="!item.translated_text.length">Clear</button>
</div>
</div>

7
src/app/components/translate_block/translate_block.component.ts
View File

@@ -1,14 +1,15 @@
import { CommonModule } from '@angular/common';
import { AfterViewInit, ChangeDetectorRef, 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 { ButtonComponent } from '@nwaifu-ui';
import { TranslateData } from '../../dto/translate_data.dto';
import { TranslatePipe } from '../../pipes/translate.pipe';
@Component({
selector: 'app-translate-block',
templateUrl: './translate_block.component.html',
styleUrls: ['./translate_block.component.scss'],
standalone: true,
imports: [CommonModule],
imports: [CommonModule, ButtonComponent],
providers: [TranslatePipe],
})
export class TranslateBlockComponent implements OnInit, AfterViewInit {

4
src/app/components/upload_btn/upload_btn.component.html
View File

@@ -1,4 +0,0 @@
<button (click)="fileInput.click()">
<span><i class="lni lni-upload"></i> Upload</span>
<input type="file" (change)="onChange($event)" #fileInput style="display: none" />
</button>

14
src/app/components/upload_btn/upload_btn.component.scss
View File

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

34
src/app/components/upload_btn/upload_btn.component.ts
View File

@@ -1,34 +0,0 @@
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<HTMLDivElement> | null = null;
@Output() fileLoaded = new EventEmitter<string>();
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);
target.value = '';
};
reader.readAsText(file);
}
}
}
}