feat: Changes margins and filters products in menu

GonzalesRav · Apr 26, 2023 · 798d530 · 798d530
1 parent 7c8abcf
commit 798d530
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 27 deletions.
diff --git a/burguer-queen/src/app/menu/menu.component.html b/burguer-queen/src/app/menu/menu.component.html
@@ -21,7 +21,7 @@
 
 <!--====================  Aquí los dos contenedores ==================== -->
 <div class="row row-estilo2 m-2">
-  <div class="col-md-6 col-primerContainer">
+  <div class="col-md-6 col-primerContainer mx-3">
     <!-- Contenido de la primera columna -->
     <div class="col m-2">
       <div class="col mx-auto d-block text-center">
@@ -33,16 +33,16 @@
   <nav class="navbar navbar-expand-lg ">
     <ul class="navbar-nav mr-auto">
       <li class="nav-item">
-        <button class="filter-btn py-1 px-4" (click)="showCard('todo')">Todo</button>
+        <button class="filter-btn py-1 px-4" (click)="showCard('Todo')">Todo</button>
       </li>
       <li class="nav-item mx-2">
-        <button class="filter-btn py-1 px-3" (click)="showCard('desayuno')">Desayuno</button>
+        <button class="filter-btn py-1 px-3" (click)="showCard('Desayuno')">Desayuno</button>
       </li>
       <li class="nav-item mx-2">
-        <button class="filter-btn py-1 px-3" (click)="showCard('almuerzo')">Comidas</button>
+        <button class="filter-btn py-1 px-3" (click)="showCard('Almuerzo')">Comidas</button>
       </li>
       <li class="nav-item mx-2">
-        <button class="filter-btn py-1 px-3" (click)="showCard('bebidas')">Bebidas</button>
+        <button class="filter-btn py-1 px-3" (click)="showCard('Bebida')">Bebidas</button>
       </li>
     </ul>
   </nav>
@@ -76,11 +76,8 @@ <h5 class="card-title">{{ product.name }}</h5>
 
     </div>
   </div>
-  <div class="col-md-1">
-    <!-- Espacio en el medio -->
-  </div>
   <!-- Contenido de la segunda columna -->
-  <div class="col-md-5 col-segundaC">
+  <div class="col-md-5 mx-3 col-segundaC">
     <div class="row row-contenedores">
       <!-- Primer contenedor -->
       <div class=" col-orden ">

diff --git a/burguer-queen/src/app/menu/menu.component.scss b/burguer-queen/src/app/menu/menu.component.scss
@@ -155,7 +155,8 @@
 .col-segundaC {
   background-color: #fde293;
   opacity: 9;
-  border-radius: 10px;
+  border-radius: 25px;
+  box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
 }
 .col-orden {
   margin-top: 20px;

diff --git a/burguer-queen/src/app/menu/menu.component.ts b/burguer-queen/src/app/menu/menu.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { ApiBQService } from '../services/api-bq.service';
 import { Router } from '@angular/router';
+import { LoginComponent } from '../login/login.component';
 
 @Component({
   selector: 'app-menu',
@@ -24,10 +25,11 @@ export class MenuComponent {
   }
 
   loadProducts() {
-    this.api.getMenu().subscribe({
+    this.api.getMenu()
+    .subscribe({
       next: (data: any) => {
         console.log(data);
-        this.products = Object.values(data);
+        this.products = data;
         // this.loading = false;
         console.log(this.products);
 
@@ -37,19 +39,37 @@ export class MenuComponent {
 
   showCard(productType: string) {
     // if (!this.loading) {
-      const filteredProducts = this.products.filter(product => product.type === productType);
-
-      if (filteredProducts.length > 0) {
-        const product = filteredProducts[0];
-        this.cardTitle = product.name;
-        this.cardPrice = '$' + product.price;
-        this.cardImage = product.image;
-        this.cardVisible = true;
-      } else {
-        this.cardVisible = false;
-      }
+     //console.log('hola soy linea 42')
+      console.log(productType)
+      this.products = this.products.filter(product => product.type === productType);
+      console.log(this.products)
+
+      // if (filteredProducts.length > 0) {
+      //   const product = filteredProducts[0];
+      //   this.cardTitle = product.name;
+      //   this.cardPrice = '$' + product.price;
+      //   this.cardImage = product.image;
+      //   this.cardVisible = true;
+      // } else {
+      //   this.cardVisible = false;
+      // }
     }
-  //}
+
+//   showCard(productType: string) {
+//     // if (!this.loading) {
+//       const filteredProducts = this.products.filter(product => product.type === productType);
+
+//       if (filteredProducts.length > 0) {
+//         const product = filteredProducts[0];
+//         this.cardTitle = product.name;
+//         this.cardPrice = '$' + product.price;
+//         this.cardImage = product.image;
+//         this.cardVisible = true;
+//       } else {
+//         this.cardVisible = false;
+//       }
+//     }
+//   //}
 
 
 
@@ -111,6 +131,3 @@ export class MenuComponent {
   }
 
 }
-
-
-