diff --git a/src/app/features/pill/pill-import-confirm-dialog.component.ts b/src/app/features/pill/pill-import-confirm-dialog.component.ts new file mode 100644 index 0000000..fa59f10 --- /dev/null +++ b/src/app/features/pill/pill-import-confirm-dialog.component.ts @@ -0,0 +1,49 @@ +import { CommonModule } from '@angular/common'; +import { Component } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { + MatDialogActions, + MatDialogClose, + MatDialogContent, + MatDialogModule, + MatDialogRef, + MatDialogTitle, +} from '@angular/material/dialog'; +import { TranslocoModule } from '@ngneat/transloco'; + +@Component({ + selector: 'app-confirm-dialog', + standalone: true, + imports: [CommonModule, TranslocoModule, MatButtonModule, MatDialogModule], + template: ` +

+ {{ 'pills.import.title_confirmation_modal' | transloco }} +

+
+

+ {{ 'pills.import.message_confirmation_modal' | transloco }} +

+
+
+ + +
+ `, +}) +export class ConfirmDialogComponent { + constructor( + private readonly dialogRef: MatDialogRef + ) {} + + onCancel(): void { + this.dialogRef.close(false); + } + + onConfirm(): void { + this.dialogRef.close(true); + } +} diff --git a/src/app/features/pill/pills.service.ts b/src/app/features/pill/pills.service.ts index c17e68a..9f4477f 100644 --- a/src/app/features/pill/pills.service.ts +++ b/src/app/features/pill/pills.service.ts @@ -52,6 +52,15 @@ export class PillsService { ); } + exportData() { + return JSON.stringify(this.pillsTaked); + } + + importData(pills: any) { + this.pillsTaked = pills; + this.savePills(); + } + private loadPills() { const savedPills = this.localStorageService.getItem(PILLS_STORAGE_KEY) || '[]'; diff --git a/src/app/features/sidenav/sidenav-content/sidenav-content.component.html b/src/app/features/sidenav/sidenav-content/sidenav-content.component.html index c835a04..0c2b960 100644 --- a/src/app/features/sidenav/sidenav-content/sidenav-content.component.html +++ b/src/app/features/sidenav/sidenav-content/sidenav-content.component.html @@ -4,9 +4,7 @@
- {{ "menus.section_under_construction" | transloco }} - -
+
translate @@ -22,5 +20,14 @@
+ +
+ + +
diff --git a/src/app/features/sidenav/sidenav-content/sidenav-content.component.scss b/src/app/features/sidenav/sidenav-content/sidenav-content.component.scss index c07f8f6..9b6b6e3 100644 --- a/src/app/features/sidenav/sidenav-content/sidenav-content.component.scss +++ b/src/app/features/sidenav/sidenav-content/sidenav-content.component.scss @@ -10,4 +10,6 @@ padding: 7px; margin-top: 30px; font-size: 1.3em; + display: flex; + flex-direction: column; } diff --git a/src/app/features/sidenav/sidenav-content/sidenav-content.component.ts b/src/app/features/sidenav/sidenav-content/sidenav-content.component.ts index 1b2f2c6..47f049c 100644 --- a/src/app/features/sidenav/sidenav-content/sidenav-content.component.ts +++ b/src/app/features/sidenav/sidenav-content/sidenav-content.component.ts @@ -1,7 +1,11 @@ import { Component, OnInit } from '@angular/core'; -import { TranslocoService } from '@ngneat/transloco'; +import { TranslocoModule, TranslocoService } from '@ngneat/transloco'; import { I18nService } from 'src/app/shared/services/i18n.service'; import { SidenavService } from '../../sidenav.service'; +import { PillsService } from '../../pill/pills.service'; +import { MatDialog } from '@angular/material/dialog'; +import { ConfirmDialogComponent } from '../../pill/pill-import-confirm-dialog.component'; +import { filter, tap } from 'rxjs'; @Component({ selector: 'app-sidenav-content', @@ -10,9 +14,10 @@ import { SidenavService } from '../../sidenav.service'; }) export class SidenavContentComponent implements OnInit { constructor( - private sidenavService: SidenavService, - private translocoService: TranslocoService, - private i18nService: I18nService + private readonly sidenavService: SidenavService, + private readonly i18nService: I18nService, + private readonly dialog: MatDialog, + private readonly pillsService: PillsService ) {} ngOnInit(): void {} @@ -21,6 +26,46 @@ export class SidenavContentComponent implements OnInit { this.i18nService.setLanguage(this.i18nService.actualLang); } + exportData() { + const data = this.pillsService.exportData(); + const blob = new Blob([data], { type: 'application/json' }); + const url = window.URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = 'pills.json'; + a.click(); + window.URL.revokeObjectURL(url); + } + + importData() { + const dialogRef = this.dialog.open(ConfirmDialogComponent); + dialogRef + .afterClosed() + .pipe( + filter((result) => !!result), + tap(() => { + const input = document.createElement('input'); + input.type = 'file'; + input.accept = '.json'; + input.onchange = (event: Event) => { + const target = event.target as HTMLInputElement; + const file = target.files?.[0]; + if (file) { + const reader = new FileReader(); + reader.onload = (e) => { + const content = e.target?.result as string; + this.pillsService.importData(JSON.parse(content)); + window.location.reload(); + }; + reader.readAsText(file); + } + }; + input.click(); + }) + ) + .subscribe(); + } + get languageSelected() { return this.i18nService.actualLang; } diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index c9e8852..908f31a 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -9,17 +9,25 @@ }, "menus": { "section_under_construction": "Section under construction", - "language": "Language" + "language": "Language", + "export-data": "Export data", + "import-data": "Import data" }, "pills": { "slide_start_message": "Slide to register\nthis moment!", "take_every": "Take every", - "last_pill": "Las pill", + "last_pill": "Last pill", "taked_at": "Taked at", "pill_taked": "Pill taked!", "can_take_other_at": "Can take other at", "comment": "Comment", "add_comment": "Add comment", - "edit_comment": "Edit comment" + "edit_comment": "Edit comment", + "import": { + "title_confirmation_modal": "Import data", + "message_confirmation_modal": "Are you sure you want to import new data?\nThe old data will be lost.", + "confirm": "Import", + "cancel": "Cancel" + } } } diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json index 21386e8..0ebfdd2 100644 --- a/src/assets/i18n/es.json +++ b/src/assets/i18n/es.json @@ -8,7 +8,8 @@ "show_more": "Mostrar más" }, "menus": { - "section_under_construction": "Sección en construcción", + "export-data": "Exportar datos", + "import-data": "Importar datos", "language": "Idioma" }, "pills": { @@ -20,6 +21,12 @@ "can_take_other_at": "Puedes tomar otra a las", "comment": "Comentario", "add_comment": "Añadir comentario", - "edit_comment": "Editar comentario" + "edit_comment": "Editar comentario", + "import": { + "title_confirmation_modal": "Importar datos", + "message_confirmation_modal": "¿Estás seguro de que quieres importar datos nuevos?\nLos antiguos se perderán.", + "confirm": "Importar", + "cancel": "Cancelar" + } } }