diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a7ffa99..3096bdc 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -17,6 +17,7 @@ import { HomeModule } from './pages/home/home.module'; import { DashboardModule } from './pages/dashboard/dashboard.module'; import { ApplianceRegistrationModule } from './pages/appliance-registration/appliance-registration.module'; import { AlertConfirmationModule } from './pages/components/alert-confirmation/alert-confirmation.module'; +import { ProductModule } from './pages/product/product.module'; export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http); @@ -30,6 +31,7 @@ export function HttpLoaderFactory(http: HttpClient) { AppRoutingModule, HomeModule, DashboardModule, + ProductModule, ReactiveFormsModule, HttpClientModule, TranslateModule.forRoot({ diff --git a/src/app/constants/icons.constants.ts b/src/app/constants/icons.constants.ts new file mode 100644 index 0000000..366a1ad --- /dev/null +++ b/src/app/constants/icons.constants.ts @@ -0,0 +1,13 @@ +export const IconsConstants = { + icon: 'https://i.pinimg.com/564x/49/96/0a/49960afb261e0d93db525c73c5691100.jpg', + icona: + 'https://i.pinimg.com/564x/ba/ba/34/baba34523f605c55d96305d594845528.jpg', + iconb: + 'https://i.pinimg.com/564x/6f/26/9e/6f269e80859ce6b22569beb676303c52.jpg', + iconc: + 'https://i.pinimg.com/564x/24/72/2d/24722d7dc1395a7a85f933daca0fd66f.jpg', + icond: + 'https://i.pinimg.com/564x/c4/54/43/c454433b3c9d7252e3dff1185222616f.jpg', + icone: + 'https://i.pinimg.com/564x/06/88/01/068801303ac221241dde36a8a9ec0e75.jpg', +}; diff --git a/src/app/constants/product.constants.ts b/src/app/constants/product.constants.ts new file mode 100644 index 0000000..073a136 --- /dev/null +++ b/src/app/constants/product.constants.ts @@ -0,0 +1,9 @@ +export const ProductConstants = { + src: 'https://i.pinimg.com/564x/e6/bf/d2/e6bfd29d843ea47649824286b4142877.jpg', + srca: 'https://i.pinimg.com/564x/35/3e/d7/353ed734f8daed731235fce4e358d2e6.jpg', + srcb: 'https://i.pinimg.com/564x/c4/b4/7b/c4b47bf2aa50aa03384a47290fed0f54.jpg', + srcc: 'https://i.pinimg.com/564x/8e/56/79/8e567935daa4d66d04bfdb52ed19410e.jpg', + srcd: 'https://i.pinimg.com/564x/02/05/37/0205371098f0058bae5afef655a4989e.jpg', + srce: 'https://i.pinimg.com/564x/15/b9/b7/15b9b7c45d260b7920d8d9b05edb41c9.jpg', + srcf: 'https://i.pinimg.com/564x/2b/65/5a/2b655a06b26bb76a320e6edfbdf2c744.jpg', +}; diff --git a/src/app/pages/components/form-product/form-product.component.html b/src/app/pages/components/form-product/form-product.component.html index 9f1e26c..f5b20fa 100644 --- a/src/app/pages/components/form-product/form-product.component.html +++ b/src/app/pages/components/form-product/form-product.component.html @@ -6,14 +6,14 @@

{{ 'form translate }}

{{ 'formProduct.CONTACT_US_DESCRIPTION' | translate }}

- Walnut card tray with white powder coated steel divider and 3 punchout holes. - Top down view of walnut card tray with embedded magnets and card groove. - Side of walnut card tray with card groove and recessed card area. - Walnut card tray filled with cards and card angled in dedicated groove.
diff --git a/src/app/pages/components/form-product/form-product.component.ts b/src/app/pages/components/form-product/form-product.component.ts index 718bc9f..a4a848e 100644 --- a/src/app/pages/components/form-product/form-product.component.ts +++ b/src/app/pages/components/form-product/form-product.component.ts @@ -3,6 +3,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { DataTransferServiceService } from '../../services/data-transfer-service.service'; import { Router } from '@angular/router'; import { PROVINCES_ECUADOR } from 'src/app/constants/constants'; +import { ProductConstants } from 'src/app/constants/product.constants'; @Component({ selector: 'app-form-product', @@ -16,6 +17,7 @@ export class FormProductComponent { DataTransferServiceService ); + urls = ProductConstants; public form: FormGroup; public imageSrc: string | ArrayBuffer | null = null; public files: File[] = []; diff --git a/src/app/pages/product/product.component.css b/src/app/pages/product/product.component.css index e4f675d..c22867a 100644 --- a/src/app/pages/product/product.component.css +++ b/src/app/pages/product/product.component.css @@ -3,3 +3,32 @@ body { margin: 0; font-family: Arial, sans-serif; } + +/* Estilo para la línea horizontal */ +.custom-line { + border: none; + height: 2px; + background-color: #4A90E2; + margin: 20px 0; + } + + /* Estilo para las tarjetas de electrodomésticos */ + .appliance-card { + cursor: pointer; + } + + /* Estilo para el mensaje del temporizador */ + .timer { + font-size: 1.5rem; + font-weight: bold; + color: #4A90E2; + margin-top: 20px; + } + + .gradient-background { + background: linear-gradient(to right, rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)); + color: #000000ab; + padding: 20px; + border-radius: 8px; + text-align: center; /* Opcional, por si necesitas centrar el texto */ + } diff --git a/src/app/pages/product/product.component.html b/src/app/pages/product/product.component.html index 07c2676..6563bef 100644 --- a/src/app/pages/product/product.component.html +++ b/src/app/pages/product/product.component.html @@ -1,189 +1,199 @@ - -
+ +
-

Summer styles are finally here

-

This year, our new summer collection will shelter you from the harsh elements of a world that doesn't care if you live or die.

+

{{ 'WELCOME_TITLE' | translate }}

+

{{ 'WELCOME_DESCRIPTION' | translate }}

- -
-
-
-
-
-
Transactions every 24 hours
-
44 million
-
-
-
Assets under holding
-
$119 trillion
-
-
-
New users annually
-
46,000
-
-
-
-
- -
-
-

Trusted by the world’s most innovative teams

-
- Transistor - Reform - Tuple - SavvyCal - Statamic +
+

+ {{ 'APPLIANCE_MAINTENANCE_REPAIR' | translate }} +

+
+

+ {{ 'TRUSTED_APPLIANCES' | translate }} +

+
+ + + + + +
-
-
-
-

Customers also purchased

- -
-
-
- Front of men's Basic Tee in black. -
-
-
-

- - - Basic Tee - -

-

Black

-
-

$35

-
-
+
+ {{ timerMessage }} {{ 'LETFTOVER' | translate }} +
+
+ {{ 'TIMER_MESSAGE' | translate }} +
-
-
- Front of men's Basic Tee in black. -
-
-
-

- - - Basic Tee - -

-

Black

-
-

$35

-
+ -
-
- Front of men's Basic Tee in black. -
-
-
-

- - - Basic Tee - -

-

Black

-
-

$35

-
+
+

{{ 'NO_APPLIANCES_FOUND' | translate }}

+
+ +
+
+ + +
+
+
- -
- - \ No newline at end of file + +
+ \ No newline at end of file diff --git a/src/app/pages/product/product.component.spec.ts b/src/app/pages/product/product.component.spec.ts deleted file mode 100644 index 670f04b..0000000 --- a/src/app/pages/product/product.component.spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ProductComponent } from './product.component'; - -describe('ProductComponent', () => { - let component: ProductComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [ProductComponent] - }); - fixture = TestBed.createComponent(ProductComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/pages/product/product.component.ts b/src/app/pages/product/product.component.ts index e239bcd..bf66aaa 100644 --- a/src/app/pages/product/product.component.ts +++ b/src/app/pages/product/product.component.ts @@ -1,10 +1,144 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { ApplianceServiceService } from '../services/appliance-service.service'; +import { ProductConstants } from 'src/app/constants/product.constants'; +import { IconsConstants } from 'src/app/constants/icons.constants'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'app-product', templateUrl: './product.component.html', - styleUrls: ['./product.component.css'] + styleUrls: ['./product.component.css'], }) export class ProductComponent { + private readonly applianceService: ApplianceServiceService = inject( + ApplianceServiceService + ); + private readonly translate: TranslateService = inject(TranslateService); + urls = ProductConstants; + icons = IconsConstants; + selectedType: string | null = null; + private userId?: number; + appliances: any[] = []; + currentPage: number = 1; + totalPages: number = 1; + totalItems: number = 0; + + timerMessage: string = ''; // Asegúrate de definir esto en el componente + timerInterval: any; // Para almacenar el intervalo del temporizador + + constructor(private activatedRoute: ActivatedRoute) { + const userId = this.activatedRoute.snapshot.paramMap.get('userId'); + if (userId) { + this.userId = +userId; + } + console.log('User ID:', this.userId); + + if (this.userId !== undefined) { + this.loadUserAppliances(this.currentPage); + } + } + + loadUserAppliances(page: number = 1): void { + console.log('Loading page:', page); + this.applianceService.getUserAppliances(this.userId!, page).subscribe( + (response) => { + console.log('Data received:', response); + this.appliances = response.data; + this.currentPage = response.meta.current_page; + this.totalPages = response.meta.last_page; + this.totalItems = response.meta.total; + }, + (error) => { + console.error('Error fetching appliances:', error); + } + ); + } + + nextPage() { + if (this.currentPage < this.totalPages) { + const nextPage = this.currentPage + 1; + console.log('Moving to next page:', nextPage); + this.loadUserAppliances(nextPage); + } + } + + previousPage() { + if (this.currentPage > 1) { + const previousPage = this.currentPage - 1; + console.log('Moving to previous page:', previousPage); + this.loadUserAppliances(previousPage); + } + } + + onClickType(type: string) { + this.translate + .get(`APPLIANCE_TYPE_${type.toUpperCase()}`) + .subscribe((translatedType: string) => { + console.log(`Original Type: ${type}`); + console.log(`Translated Type: ${translatedType}`); + + if (type !== 'all') { + this.selectedType = translatedType; + console.log('Selected Type:', this.selectedType); + this.applianceService.setSelectedType(translatedType); + this.loadUserAppliances(); + } else { + this.selectedType = type; + console.log('Selected Type: All'); + this.applianceService.setSelectedType(null); + this.loadUserAppliances(); + } + }); + } + + showTimer(appliance: any): void { + if (!appliance.application_date) { + this.timerMessage = 'Fecha de aplicación no válida.'; + return; + } + + if (this.timerInterval) { + clearInterval(this.timerInterval); + } + + const startTime = new Date(appliance.application_date).getTime(); + + let duration = 0; + + // Determinar la duración en milisegundos según el tipo de servicio + if (appliance.service_type === 'maintenance') { + duration = 7 * 24 * 60 * 60 * 1000; // 1 semana en milisegundos + } else if (appliance.service_type === 'repair') { + duration = 15 * 24 * 60 * 60 * 1000; // 15 días en milisegundos + } else { + this.timerMessage = 'Tipo de servicio no válido.'; + return; + } + + const endTime = startTime + duration; + + this.timerInterval = setInterval(() => { + const now = new Date().getTime(); + const distance = endTime - now; + + if (distance < 0) { + clearInterval(this.timerInterval); + this.timerMessage = 'La reparación/mantenimiento está completo.'; + return; + } + + // Calcular días, horas, minutos y segundos restantes + const days = Math.floor(distance / (1000 * 60 * 60 * 24)); + const hours = Math.floor( + (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60) + ); + const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); + const seconds = Math.floor((distance % (1000 * 60)) / 1000); + + // Actualizar el mensaje del temporizador + this.timerMessage = `${days}d ${hours}h ${minutes}m ${seconds}s`; + }, 1000); + } } diff --git a/src/app/pages/services/appliance-service.service.ts b/src/app/pages/services/appliance-service.service.ts new file mode 100644 index 0000000..7fde710 --- /dev/null +++ b/src/app/pages/services/appliance-service.service.ts @@ -0,0 +1,31 @@ +import { HttpClient } from '@angular/common/http'; +import { inject, Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { environment } from 'src/environments/environment'; + +@Injectable({ + providedIn: 'root', +}) +export class ApplianceServiceService { + private readonly http = inject(HttpClient); + + private selectedType: string | null = null; + private apiUrl = `${environment.apiUrl}/appliances`; + + setSelectedType(type: string | null) { + this.selectedType = type; + } + + getUserAppliances( + userId: number, + page: number, + filters?: any + ): Observable { + let url = `${this.apiUrl}/${userId}?page=${page}`; + + if (this.selectedType) { + url += `&filter[appliance_type]=${this.selectedType}`; + } + return this.http.get(url); + } +} diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index ae4eaa3..ee4e4ea 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -184,5 +184,39 @@ "SUCCESS_TITLE": "Order Submitted", "SUCCESS_MESSAGE": "Your appliance maintenance order has been successfully submitted.", "OK_BUTTON": "OK" - } + }, + "WELCOME_TITLE": "Welcome to your appliance maintenance and repair log", + "WELCOME_DESCRIPTION": "Here you can see the status and details of all your appliances that are in the process of maintenance or repair.", + "TRUSTED_APPLIANCES": "You can search for your trusted appliances", + "APPLIANCE_MAINTENANCE_REPAIR": "Appliances in Maintenance and Repair", + "TIMER_MESSAGE": "Time remaining for repair/maintenance", + "APPLIANCE_IMAGE_ALT_1": "Image of appliance under repair 1", + "APPLIANCE_IMAGE_ALT_2": "Image of appliance under repair 2", + "APPLIANCE_IMAGE_ALT_3": "Image of appliance under repair 3", + "APPLIANCE_IMAGE_ALT_4": "Image of appliance under repair 4", + "APPLIANCE_IMAGE_ALT_5": "Image of appliance under repair 5", + "APPLIANCE_IMAGE_ALT_6": "Image of appliance under repair 6", + "APPLIANCE_IMAGE_ALT_7": "Image of appliance under repair 7", + "NO_APPLIANCES_FOUND": "No appliances found for this user.", + "PREVIOUS": "Previous", + "NEXT": "Next", + "SHOWING_RESULTS": "Showing", + "TO": "to", + "OF": "of", + "RESULTS": "results", + "ESTIMATED_TIME": "Estimated time", + "REFRIGERATOR": "Refrigerator", + "WASHING_MACHINE": "Washing Machine", + "OVEN": "Oven", + "DRYER": "Dryer", + "MICROWAVE": "Microwave", + "TIME_REMAINING": "Time remaining for repair/maintenance", + "TIME_BUTTON": "Time remaining for", + "LETFTOVER": "leftover", + "APPLIANCE_TYPE_REFRIGERATOR": "Refrigerator", + "APPLIANCE_TYPE_WASHER": "washer", + "APPLIANCE_TYPE_OVEN": "Oven", + "APPLIANCE_TYPE_DRYER": "Dryer", + "APPLIANCE_TYPE_MICROWAVE": "Microwave", + "APPLIANCE_TYPE_ALL": "All" } diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json index 35474e2..71cccaf 100644 --- a/src/assets/i18n/es.json +++ b/src/assets/i18n/es.json @@ -37,7 +37,7 @@ "province_required": "La provincia es requerida.", "brand_required": "La marca es requerida.", "preferred_contact_method_required": "El método de contacto preferido es requerido.", - "submit_button":"Registro" + "submit_button": "Registro" }, "header": { "producto": "Producto", @@ -185,5 +185,39 @@ "confirmation": { "SUCCESS_TITLE": "Éxito", "SUCCESS_MESSAGE": "Su pedido de mantenimiento de electrodoméstico se ha enviado con éxito." - } + }, + "WELCOME_TITLE": "Bienvenido a tu registro de electrodomésticos en mantenimiento y reparación", + "WELCOME_DESCRIPTION": "Aquí puedes ver el estado y detalles de todos tus electrodomésticos que se encuentran en proceso de mantenimiento o reparación.", + "TRUSTED_APPLIANCES": "Puedes buscar tus electrodomésticos de confianza", + "APPLIANCE_MAINTENANCE_REPAIR": "Electrodomésticos en Mantenimiento y Reparación", + "TIMER_MESSAGE": "Tiempo restante para la reparación/mantenimiento", + "APPLIANCE_IMAGE_ALT_1": "Imagen de electrodoméstico en reparación 1", + "APPLIANCE_IMAGE_ALT_2": "Imagen de electrodoméstico en reparación 2", + "APPLIANCE_IMAGE_ALT_3": "Imagen de electrodoméstico en reparación 3", + "APPLIANCE_IMAGE_ALT_4": "Imagen de electrodoméstico en reparación 4", + "APPLIANCE_IMAGE_ALT_5": "Imagen de electrodoméstico en reparación 5", + "APPLIANCE_IMAGE_ALT_6": "Imagen de electrodoméstico en reparación 6", + "APPLIANCE_IMAGE_ALT_7": "Imagen de electrodoméstico en reparación 7", + "NO_APPLIANCES_FOUND": "No se encontraron electrodomésticos para este usuario.", + "PREVIOUS": "Anterior", + "NEXT": "Siguiente", + "SHOWING_RESULTS": "Mostrando", + "TO": "a", + "OF": "de", + "RESULTS": "resultados", + "ESTIMATED_TIME": "Tiempo estimado", + "REFRIGERATOR": "Refrigerador", + "WASHING_MACHINE": "Lavadora", + "OVEN": "Horno", + "DRYER": "Secadora", + "MICROWAVE": "Microondas", + "TIME_REMAINING": "Tiempo restante para la reparación/mantenimiento", + "TIME_BUTTON": "Tiempo estimado", + "LETFTOVER": "restantes", + "APPLIANCE_TYPE_REFRIGERATOR": "Refrigerador", + "APPLIANCE_TYPE_WASHER": "Lavadora", + "APPLIANCE_TYPE_OVEN": "Horno", + "APPLIANCE_TYPE_DRYER": "Secadora", + "APPLIANCE_TYPE_MICROWAVE": "Microondas", + "APPLIANCE_TYPE_ALL": "Todos" }