feat_api(fe):Added the page of average consumption

frontend/src/app/modules/office/components/equipment/equipment.component.css

@@ -1,45 +1,29 @@
-.grid-container {
-    display: grid; /* Define un contenedor de grid */
-    grid-template-columns: 250px 250px auto; /* Dos columnas de igual tamaño y una tercera columna para el botón */
-    grid-template-rows: auto; /* Filas automáticas */
-    grid-template-areas: 
-        "select1 select2 button"
-        "table table table"; /* Área para la tabla ocupa las tres columnas */
-    gap: 10px; /* Espacio entre los elementos del grid */
-}
-
-/* Estilo específico para el primer selector */
-.selector1 {
-    grid-area: select1; /* Asigna el área de grid para el primer selector */
-    justify-self: start; /* Alinea a la izquierda dentro de su celda */
-    margin-left: 10px;
-}
-
-/* Estilo específico para el segundo selector */
-.selector2 {
-    grid-area: select2; /* Asigna el área de grid para el segundo selector */
-    justify-self: start; /* Alinea a la izquierda dentro de su celda */
-}
-
-/* Estilo específico para el contenedor de la tabla */
-.table-container {
-    grid-area: table; /* Asigna el área de grid para la tabla */
-}
-
-/* Estilo específico para el botón */
-.export-button {
-    grid-area: button;
-    justify-self: end;
-    margin-top: 8px;
-}
-.custom-button {
-    background-color: #00203b; /* Cambia este valor por el color deseado */
-    color: white; /* Cambia el color del texto si es necesario */
-    border-color:#00203b ;
-    transition: transform 0.3s ease-in-out; /* Añade una transición suave para la transformación */
-}
-
-.custom-button:hover {
+.form-container {
+    display: flex;
+    flex-wrap: wrap; /* Permite que los elementos se ajusten en varias líneas si es necesario */
+    justify-content: space-between; /* Separación uniforme */
+  }
+
+  .form-autocomplete {
+    display: flex;
+    flex: 1; /* Todos los elementos ocupan el mismo espacio por defecto */
+    justify-items: left;
+    flex-direction: row;
+    gap:30px;
+  }
+
+  .form-buttons {
+    width: 18%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    position:relative;
+    top: 3px;
+    left: 0;
+    margin-top: 5px;
+  }
+
+.buttons-container:hover {
     transform: scale(1.05); /* Aumenta el tamaño del botón al 105% */
 }
 

frontend/src/app/modules/office/components/equipment/equipment.component.html

@@ -1,31 +1,41 @@
-<div class="grid-container" [formGroup]="form">
-  <!-- Selector de Centro de Trabajo -->
-  <app-autocomplete
-      [label]="'Centro de Trabajo'"
-      [options]="centerOptions"
-      (optionSelected)="onCenterChange($event)"
-    >
-  </app-autocomplete>
-  <!-- Selector de Oficina -->
-  <app-autocomplete
-      [label]="'Oficinas'"
-      [options]="officeOptions"
-      (optionSelected)="handleOptionSelected($event)"
-    >
-  </app-autocomplete>
+<div class="form-container" [formGroup]="form">
+  <!-- Contenedor de Autocompletes -->
+  <div class="form-autocomplete">
+    <div class="form-autocomplete-item">
+      <app-autocomplete
+        [label]="'Centro de Trabajo'"
+        [options]="centerOptions"
+        (optionSelected)="onCenterChange($event)">
+      </app-autocomplete>
+    </div>
+    <div class="form-autocomplete-item">
+      <app-autocomplete
+        [label]="'Oficinas'"
+        [options]="officeOptions"
+        (optionSelected)="handleOptionSelected($event)">
+      </app-autocomplete>
+    </div>
+  </div>
 
-  <div class="grid-item export-button">
+  <!-- Botones -->
+  <div class="form-buttons">
+    <app-button
+      [label]="'Consultar'"
+      [function]="onConsultar.bind(this)">
+    </app-button>
     <app-button></app-button>
   </div>
 
   <!-- Contenedor de la Tabla -->
-  <div class="grid-item table-container" *ngIf="showTable">
+  <div class="form-table" *ngIf="showTable">
     <app-table
       [dataSource]="dataSource"
       [displayedColumns]="displayedColumns"
-      [showActions]="true"
-    ></app-table>
+      [showActions]="true">
+    </app-table>
   </div>
 </div>
 
 
+
+

frontend/src/app/modules/office/components/equipment/equipment.component.ts

@@ -29,6 +29,7 @@ export class EquipmentComponent implements OnInit {
   showTable = false;
   centerOptions: string[] = [];
   officeOptions: string[] = [];
+  equipments: string[]=[];
   centerObjects: WorkCenter[] = [];
   officeObjects: Office[] = [];
   centerSelected: string = '';
@@ -87,19 +88,7 @@ export class EquipmentComponent implements OnInit {
    * @param officeID The ID of the selected office.
    */
   getEquipmentsByOffice(office: string): void {
-    const equipments = [
-      { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
-      { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
-      { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
-      { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
-      { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
-      { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
-      { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
-      { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
-      { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
-      { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
-    ];
-    this.dataSource.data = equipments;
+    this.dataSource.data = this.equipments;
   }
 
   /**
@@ -121,9 +110,14 @@ export class EquipmentComponent implements OnInit {
    */
   handleOptionSelected(option: any) {
     this.officeSelected = option;
-    if (this.officeSelected && this.centerSelected) {
-      this.showTable = true; // Show table only when both are selected
-      this.getEquipmentsByOffice(this.officeSelected); // Get the equipment for the selected office
+  }
+  onConsultar(): void {
+    if (this.centerSelected && this.officeSelected) {
+      this.showTable = true; // Muestra la tabla si ambos están seleccionados
+      this.getEquipmentsByOffice(this.officeSelected); // Recupera los datos de la tabla
+    } else {
+      this.showTable = false; // Asegura que la tabla no se muestre si faltan selecciones
+      alert('Por favor, selecciona un Centro de Trabajo y una Oficina.');
     }
   }
 }

frontend/src/app/modules/workCenter/components/avg-consumption/avg-consumption.component.css

@@ -0,0 +1,21 @@
+.form-avg-consumption {
+    display: flex;
+    justify-content: space-between;
+
+
+  }
+  .checkbox-container {
+    flex: 1; /* Ocupa espacio proporcional al ancho disponible */
+  }
+  .buttons-container {
+    width: 30%;
+    display: flex;
+    flex-wrap: wrap;
+    position:relative;
+    justify-content: right;
+    top: 3px;
+    left: 0;
+    margin-top: 5px;
+    gap: 8px;
+  }
+

frontend/src/app/modules/workCenter/components/avg-consumption/avg-consumption.component.html

@@ -1,5 +1,34 @@
-<app-checkbox
-  [label]="'Centros de Trabajo'"
-  [options]="options"
-  (selectedOptions)="handleSelectionChange($event)"
-></app-checkbox>
+<div class="form-avg-consumption"> 
+  <div class="checkbox-container">
+    <app-checkbox
+      [label]="'Centros de Trabajo'"
+      [options]="options"
+      (selectedOptions)="handleSelectionChange($event)">
+    </app-checkbox>
+  </div>
+
+  <div class="buttons-container">
+    <app-button
+      [label]="'Consultar'"
+      [function]="onConsultar.bind(this)">
+    </app-button>
+    <app-button
+      [label]="'Proyección'"
+      [function]="onProyeccion.bind(this)">
+    </app-button>
+    <app-button></app-button>
+  </div>
+</div>
+
+<div *ngIf="isTableActive">
+  <div *ngFor="let option of selectedOptions" class="table">
+    <h3>{{ option }}</h3>
+    <app-table
+      [dataSource]="dataSources[option]"
+      [displayedColumns]="displayedColumns"
+      [footer]="footerTable">
+    </app-table>
+  </div>
+</div>
+
+

frontend/src/app/modules/workCenter/components/avg-consumption/avg-consumption.component.ts

@@ -1,16 +1,50 @@
-import { Component } from '@angular/core';
+import { DateFilterFn } from '@angular/material/datepicker';
+import { Component, OnInit } from '@angular/core';
+import { ConfigColumn } from '../../../../shared/components/table/table.component';
+import { WorkCenterService } from '../../../../services/workCenter/work-center.service';
+import { MatTableDataSource } from '@angular/material/table';
+import { WorkCenter } from '../../../../models/workCenter.interface';
+import { Register } from '../../../../models/register.interface';
 
 @Component({
   selector: 'app-avg-consumption',
   templateUrl: './avg-consumption.component.html',
   styleUrl: './avg-consumption.component.css',
 })
 export class AvgConsumptionComponent {
+  constructor (
+    private httpService: WorkCenterService
+  ) {}
   options: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
   selectedOptions: string[] = [];
+  isTableActive: boolean = false;
+  dataSources: { [key: string]: MatTableDataSource<any> } = {};
+  displayedColumns: ConfigColumn[] = [
+    {
+      title: 'Mes',
+      field: 'month'
+    },
+    {
+      title: 'Consumo Promedio (Kw/h)',
+      field: 'average'
+    },
+    {
+      title: 'Costo ($)',
+      field: 'cost'
+    }
+  ];
+  footerTable: any[] = [];
+
+  onConsultar() {
+    this.isTableActive = !this.isTableActive;
+  }
+  onProyeccion(){
+    alert("No esta implementado perro")
+  }
 
   handleSelectionChange(selected: string[]) {
     this.selectedOptions = selected;
     console.log('Opciones seleccionadas en el componente padre:', this.selectedOptions);
+    this.isTableActive=false;
   }
 }