Merge pull request #36 from teamq-ec/DM2-2737-crear-pagina-para-el-hi…

…storial-de-electrodomesticos-en-reparacion-o-proximos-a-entregar

Dm2 2737 crear pagina para el historial de electrodomesticos en reparacion o proximos a entregar

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({

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',
+};

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',
+};

src/app/constants/routes.constants.ts

@@ -4,6 +4,7 @@ export const RoutesConstants = {
   home: '',
   dashboard: '/pages/:userId/home',
   form: '/pages/:userId/form',
+  product: '/pages/:userId/product',
   root: '/',
 };
 

src/app/pages/components/form-product/form-product.component.html

@@ -6,14 +6,14 @@ <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">{{ 'form
         translate }}</h2>
       <p class="mt-4 text-gray-500">{{ 'formProduct.CONTACT_US_DESCRIPTION' | translate }}</p>
       <div class="grid grid-cols-2 grid-rows-2 gap-4 sm:gap-6 lg:gap-8 mt-8">
-        <img src="https://i.pinimg.com/564x/e6/bf/d2/e6bfd29d843ea47649824286b4142877.jpg"
+        <img  [src]="urls.srcc"
           alt="Walnut card tray with white powder coated steel divider and 3 punchout holes."
           class="rounded-lg bg-gray-100">
-        <img src="https://i.pinimg.com/564x/35/3e/d7/353ed734f8daed731235fce4e358d2e6.jpg"
+        <img [src]="urls.srcd"
           alt="Top down view of walnut card tray with embedded magnets and card groove." class="rounded-lg bg-gray-100">
-        <img src="https://i.pinimg.com/564x/c4/b4/7b/c4b47bf2aa50aa03384a47290fed0f54.jpg"
+        <img [src]="urls.srce"
           alt="Side of walnut card tray with card groove and recessed card area." class="rounded-lg bg-gray-100">
-        <img src="https://i.pinimg.com/564x/18/b6/5e/18b65e480311588611a928c0feb5388d.jpg"
+        <img [src]="urls.srcf"
           alt="Walnut card tray filled with cards and card angled in dedicated groove." class="rounded-lg bg-gray-100">
       </div>
     </div>

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[] = [];

src/app/pages/home/home.component.html

@@ -65,12 +65,12 @@ <h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-6
                 <div class="p-4">
                     <div class="flex items-center gap-x-4 text-xs">
                         <time datetime="2024-07-18" class="text-gray-500">Jul 18, 2024</time>
-                        <a href="#"
+                        <a [routerLink]="goProduct()"
                             class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100">historial</a>
                     </div>
                     <div class="group relative mt-3">
                         <h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
-                            <a href="#">
+                            <a [routerLink]="goProduct()">
                                 <span class="absolute inset-0"></span>
                                 {{ 'dashboard.articles.tracking.title' | translate }}
                             </a>
@@ -85,7 +85,7 @@ <h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-6
                         <img [src]="avatar" alt="Avatar" class="h-10 w-10 rounded-full bg-gray-100">
                         <div class="text-sm leading-5">
                             <p class="font-semibold text-gray-900">
-                                <a href="#">
+                                <a [routerLink]="goProduct()">
                                     <span class="absolute inset-0"></span>
                                     {{ userName }} {{ userLastName }}
                                 </a>
@@ -95,7 +95,7 @@ <h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-6
                     </div>
                 </div>
                 <br>
-                <a href="/registro-electrodomestico"
+                <a [routerLink]="goProduct()"
                     class="block w-full py-2 text-center text-sm font-medium text-white bg-blue-500 hover:bg-blue-600">
                     Ver detalles
                 </a>

src/app/pages/home/home.component.ts

@@ -35,4 +35,12 @@ export class HomeComponent {
       return [RoutesConstants.home];
     }
   }
+
+  goProduct(): string[] {
+    if (this.userId) {
+      return [RoutesConstants.product.replace(':userId', this.userId)];
+    } else {
+      return [RoutesConstants.home];
+    }
+  }
 }

src/app/pages/pages-routing.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
 import { ApplianceRegistrationComponent } from './appliance-registration/appliance-registration.component';
+import { ProductComponent } from './product/product.component';
 
 const routes: Routes = [
   {
@@ -12,6 +13,11 @@ const routes: Routes = [
     path: 'form',
     component: ApplianceRegistrationComponent,
   },
+  {
+    path: 'product',
+    component: ProductComponent,
+  },
+
 ];
 
 @NgModule({

src/app/pages/product/product.component.css

@@ -0,0 +1,34 @@
+body {
+    background: linear-gradient(to right, rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));
+    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 */
+  }

src/app/pages/product/product.component.html

@@ -1 +1,199 @@
-<p>product works!</p>
+<body>
+  <app-menu></app-menu>
+  <div class="relative overflow-hidden bg-white" style="margin-left: 50px; margin-right: 50px; margin-top: 50px;">
+    <div class="pb-80 pt-16 sm:pb-40 sm:pt-24 lg:pb-48 lg:pt-40">
+      <div class="relative mx-auto max-w-7xl px-4 sm:static sm:px-6 lg:px-8">
+        <div class="sm:max-w-lg">
+          <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">{{ 'WELCOME_TITLE' | translate }}</h1>
+          <p class="mt-4 text-xl text-gray-500">{{ 'WELCOME_DESCRIPTION' | translate }}</p>
+        </div>
+        <div>
+          <div class="mt-10">
+            <div aria-hidden="true"
+              class="pointer-events-none lg:absolute lg:inset-y-0 lg:mx-auto lg:w-full lg:max-w-7xl">
+              <div
+                class="absolute transform sm:left-1/2 sm:top-0 sm:translate-x-8 lg:left-1/2 lg:top-1/2 lg:-translate-y-1/2 lg:translate-x-8">
+                <div class="flex items-center space-x-6 lg:space-x-8">
+                  <div class="grid flex-shrink-0 grid-cols-1 gap-y-6 lg:gap-y-8">
+                    <div class="h-64 w-44 overflow-hidden rounded-lg sm:opacity-0 lg:opacity-100">
+                      <img [src]="urls.src" alt="{{ 'APPLIANCE_IMAGE_ALT_1' | translate }}"
+                        class="h-full w-full object-cover object-center">
+                    </div>
+                    <div class="h-64 w-44 overflow-hidden rounded-lg">
+                      <img [src]="urls.srca" alt="{{ 'APPLIANCE_IMAGE_ALT_2' | translate }}"
+                        class="h-full w-full object-cover object-center">
+                    </div>
+                  </div>
+                  <div class="grid flex-shrink-0 grid-cols-1 gap-y-6 lg:gap-y-8">
+                    <div class="h-64 w-44 overflow-hidden rounded-lg">
+                      <img [src]="urls.srcb" alt="{{ 'APPLIANCE_IMAGE_ALT_3' | translate }}"
+                        class="h-full w-full object-cover object-center">
+                    </div>
+                    <div class="h-64 w-44 overflow-hidden rounded-lg">
+                      <img [src]="urls.srcc" alt="{{ 'APPLIANCE_IMAGE_ALT_4' | translate }}"
+                        class="h-full w-full object-cover object-center">
+                    </div>
+                    <div class="h-64 w-44 overflow-hidden rounded-lg">
+                      <img [src]="urls.srcd" alt="{{ 'APPLIANCE_IMAGE_ALT_5' | translate }}"
+                        class="h-full w-full object-cover object-center">
+                    </div>
+                  </div>
+                  <div class="grid flex-shrink-0 grid-cols-1 gap-y-6 lg:gap-y-8">
+                    <div class="h-64 w-44 overflow-hidden rounded-lg">
+                      <img [src]="urls.srce" alt="{{ 'APPLIANCE_IMAGE_ALT_6' | translate }}"
+                        class="h-full w-full object-cover object-center">
+                    </div>
+                    <div class="h-64 w-44 overflow-hidden rounded-lg">
+                      <img [src]="urls.srcf" alt="{{ 'APPLIANCE_IMAGE_ALT_7' | translate }}"
+                        class="h-full w-full object-cover object-center">
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="mx-auto flex flex-col gap-y-8 mt-12 p-8 bg-gray-50 rounded-xl shadow-lg"
+    style="margin-left: 50px; margin-right: 50px; margin-top: 50px;">
+    <h2 class="text-3xl font-bold tracking-tight text-gray-900 mb-8 text-center" style="margin-top: 30px;">
+      {{ 'APPLIANCE_MAINTENANCE_REPAIR' | translate }}
+    </h2>
+    <div class="max-w-7xl mx-auto px-6 lg:px-8" >
+      <h2 class="text-center text-lg font-semibold leading-8 text-gray-900 mb-6">
+        {{ 'TRUSTED_APPLIANCES' | translate }}
+      </h2>
+      <div class="mx-auto flex justify-center flex-wrap gap-x-8 gap-y-10">
+        <button
+          class="flex items-center justify-center w-24 h-24 rounded-full bg-white border border-gray-200 hover:bg-gray-100 transition-shadow shadow-lg hover:shadow-xl transform hover:scale-105"
+          (click)="onClickType('refrigerator')">
+          <img class="w-16 h-16 object-contain" [src]="icons.iconb" alt="{{ 'REFRIGERATOR' | translate }}">
+        </button>
+        <button
+          class="flex items-center justify-center w-24 h-24 rounded-full bg-white border border-gray-200 hover:bg-gray-100 transition-shadow shadow-lg hover:shadow-xl transform hover:scale-105"
+          (click)="onClickType('washer')">
+          <img class="w-16 h-16 object-contain" [src]="icons.icona" alt="{{ 'WASHING_MACHINE' | translate }}">
+        </button>
+        <button
+          class="flex items-center justify-center w-24 h-24 rounded-full bg-white border border-gray-200 hover:bg-gray-100 transition-shadow shadow-lg hover:shadow-xl transform hover:scale-105"
+          (click)="onClickType('all')">
+          <img class="w-16 h-16 object-contain" [src]="icons.icond" alt="all">
+        </button>
+        <button
+          class="flex items-center justify-center w-24 h-24 rounded-full bg-white border border-gray-200 hover:bg-gray-100 transition-shadow shadow-lg hover:shadow-xl transform hover:scale-105"
+          (click)="onClickType('oven')">
+          <img class="w-16 h-16 object-contain" [src]="icons.iconc" alt="{{ 'OVEN' | translate }}">
+        </button>
+        <button
+          class="flex items-center justify-center w-24 h-24 rounded-full bg-white border border-gray-200 hover:bg-gray-100 transition-shadow shadow-lg hover:shadow-xl transform hover:scale-105"
+          (click)="onClickType('dryer')">
+          <img class="w-16 h-16 object-contain" [src]="icons.icon" alt="{{ 'DRYER' | translate }}">
+        </button>
+        <button
+          class="flex items-center justify-center w-24 h-24 rounded-full bg-white border border-gray-200 hover:bg-gray-100 transition-shadow shadow-lg hover:shadow-xl transform hover:scale-105"
+          (click)="onClickType('microwave')">
+          <img class="w-16 h-16 object-contain" [src]="icons.icone" alt="{{ 'MICROWAVE' | translate }}">
+        </button>
+      </div>
+    </div>
+
+    <dd class="text-5xl font-bold tracking-tight sm:text-6xl gradient-background" *ngIf="timerMessage">
+      {{ timerMessage }} {{ 'LETFTOVER' | translate }}
+    </dd>
+    <dt class="text-xl leading-7 text-gray-600 mt-4 text-center">
+      {{ 'TIMER_MESSAGE' | translate }}
+    </dt>
+
+    <ul role="list" class="divide-y divide-gray-200 mt-8">
+      <li class="flex py-6" *ngFor="let appliance of appliances">
+        <div class="h-28 w-28 flex-shrink-0 overflow-hidden rounded-lg border border-gray-200">
+          <img [src]="appliance.damaged_appliance_image" alt="Appliance image"
+            class="h-full w-full object-cover object-center">
+        </div>
+
+        <div class="ml-4 flex flex-1 flex-col">
+          <div>
+            <div class="flex justify-between text-base font-medium text-gray-900">
+              <h3>
+                <a href="#">{{ appliance.appliance_type }}</a>
+              </h3>
+              <p class="ml-4">{{ appliance.brand }}</p>
+            </div>
+            <p class="mt-1 text-sm text-gray-500">{{ appliance.problem_details }}</p>
+          </div>
+          <div class="flex flex-1 items-end justify-between text-sm mt-4">
+            <p class="text-gray-500">{{ appliance.application_date }}</p>
+            <div class="flex">
+              <button type="button" class="font-medium text-indigo-600 hover:text-indigo-500"
+                (click)="showTimer(appliance)"> {{ 'TIME_BUTTON' | translate }}</button>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+
+    <div *ngIf="appliances.length === 0" class="text-center text-gray-500 mt-8">
+      <p> {{ 'NO_APPLIANCES_FOUND' | translate }}</p>
+    </div>
+
+    <div class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6 mt-8">
+      <div class="flex flex-1 justify-between sm:hidden">
+        <button (click)="previousPage()" [disabled]="currentPage === 1"
+          class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Previous</button>
+        <button (click)="nextPage()" [disabled]="currentPage === totalPages"
+          class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">{{
+          'NEXT' | translate }}</button>
+      </div>
+      <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+        <div>
+          <p class="text-sm text-gray-700">
+            {{ 'SHOWING_RESULTS' | translate }}
+            <span class="font-medium">{{ (currentPage - 1) * 10 + 1 }}</span>
+            {{ 'TO' | translate }}
+            <span class="font-medium">{{ currentPage * 10 }}</span>
+            {{ 'OF' | translate }}
+            <span class="font-medium">{{ totalItems }}</span>
+            {{ 'RESULTS' | translate }}
+          </p>
+        </div>
+        <div>
+          <nav class="inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
+            <button (click)="previousPage()" [disabled]="currentPage === 1"
+              class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
+              <span class="sr-only"> {{ 'NEXT' | translate }}</span>
+              <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd"
+                  d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+                  clip-rule="evenodd" />
+              </svg>
+            </button>
+            <ng-container *ngFor="let page of [].constructor(totalPages); let i = index">
+              <button (click)="loadUserAppliances(i + 1)" [class.bg-indigo-600]="currentPage === (i + 1)"
+                [class.text-white]="currentPage === (i + 1)" [class.text-gray-900]="currentPage !== (i + 1)"
+                [class.bg-gray-50]="currentPage !== (i + 1)"
+                class="relative inline-flex items-center px-4 py-2 text-sm font-semibold ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
+                {{ i + 1 }}
+              </button>
+            </ng-container>
+            <button (click)="nextPage()" [disabled]="currentPage === totalPages"
+              class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
+              <span class="sr-only">{{ 'NEXT' | translate }}</span>
+              <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd"
+                  d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+                  clip-rule="evenodd" />
+              </svg>
+            </button>
+          </nav>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div style="margin-top: 100px;">
+    <app-footer></app-footer>
+  </div>
+</body>