Martin Macola / autoservicio

Browse Code »

Commit 9c87e85a0c7ee8fe79fda040fece7b2df9511d23

Authored by Marcelo Puebla 2019-08-12 13:13:45 -0300

1 parent a791bbf69f

Exists in master

Agregado componente popover.

Showing 2 changed files with 48 additions and 48 deletions Show diff stats

src/app/components/inicio/inicio.component.html

Diff comments View file @ 9c87e85

 <div class="row m-0 fade-in">
   <div class="col-12 p-0">
     <!-- NOMBRE DE SECCION -->
     <div class="row m-0">
       <div class="col-12 p-0">
         <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p>
       </div>
     </div>
     <div class="row m-4 d-flex align-items-center disable-user-select">
       <div class="col-md-5 d-flex align-items-end flex-column">
-        <!-- TOOL TIp -->
-        <div class="popover left bs-example-popover p-4 border-0 shadow rounded mw-100 h-100 mb-auto"
-          *ngIf="tooltip === false">
-          <div class="arrow"></div>
-          <h4 class="popover-title mb-3 mt-1"> Este producto forma parte de Combos y Promociones</h4>
-          <div class="popover-content mw-100 h-100 mb-auto">
-            <div class="d-flex  flex-column h-75 text-center">
-              <div class="overflow-auto overflow-scroll mb-2">
-                <div class="card bg-white rounded-sm shadow border-0 black-text my-3">
-                  <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded">
-                    <div class="col-6 p-0 text-left my-auto">
-                      <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p>
-                      <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p>
-                    </div>
-                    <div class="col-6 p-1 text-center my-auto">
-                      <p class="m-0 h1 text-right">{{105 | currency}}</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
         <!-- PROMOCIONES -->
         <div class="card bg-white border-0 shadow rounded w-100 mb-auto">
           <div class="card-body text-left p-4">
             <div class="row">
               <div class="col-7">
                 <p class="h3 card-title">Promociones</p>
               </div>
               <div class="col-5 p-0">
                 <img src="../../../assets/icons/primario.promociones.png" alt="" class="icon-dim m-0">
               </div>
             </div>
             <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
           </div>
           <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel">
             <ol class="carousel-indicators m-0">
               <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li>
               <li data-target="#carouselIndicators" data-slide-to="1" class="bg-dark"></li>
               <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li>
             </ol>
             <div class="carousel-inner">
               <div class="carousel-item active">
                 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
               </div>
               <div class="carousel-item">
                 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
               </div>
               <div class="carousel-item">
                 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
               </div>
             </div>
           </div>
         </div>
         <!-- ORDENAR -->
         <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
           <div class="card-body text-left p-4">
             <div class="row">
               <div class="col-5">
                 <p class="h3 card-title">Ordenar</p>
               </div>
               <div class="col-7 p-0">
                 <img src="../../../assets/icons/primario.ordenar.png" alt="" class="icon-dim">
               </div>
             </div>
             <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
           </div>
-          <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg">
+          <img
+            class="card-img-bottom d-block w-100 mx-auto rounded"
+            src="{{apiUrl}}/imagenes/cafe.jpg">
         </div>
       </div>
       <div class="col-md-7 d-flex align-items-end flex-column">
         <!-- CARGAR PRODUCTOS -->
-        <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
+        <ng-template #popTemplate>
-          <div class="card-body text-left p-4">
+          <app-popover
-            <div class="row">
+            [popover]="popoverDirective"
-              <div class="col-6">
+            [popoverContent]="'que onda'"
-                <p class="h3 card-title">Cargar Productos</p>
+            class="card bg-primary text-white rounded-sm border-0">
-              </div>
+          </app-popover>
-              <div class="col-6 p-0">
+        </ng-template>
-                <img src="../../../assets//icons/escanear.png" alt="" class="icon-dim mb-2">
+        <div
+          placement="left"
+          triggers=""
+          [popover]="popTemplate"
+          class="w-100"
+          #pop="bs-popover"
+          (click)="open()">
+          <div class="card bg-white border-0 shadow rounded mb-auto">
+            <div class="card-body text-left p-4">
+              <div class="row">
+                <div class="col-6">
+                  <p class="h3 card-title">Cargar Productos</p>
+                </div>
+                <div class="col-6 p-0">
+                  <img src="../../../assets//icons/escanear.png" alt="" class="icon-dim mb-2">
+                </div>
               </div>
+              <p class="h5 card-text text-muted font-weight-light">
+                Coloque el código de<br>
+                barras o QR frente al scanner.
+              </p>
             </div>
-            <p class="h5 card-text text-muted font-weight-light">
+            <div class="card bg-white border-0 w-75 mx-auto mb-4">
-              Coloque el código de<br>
+              <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg">
-              barras o QR frente al scanner.
+              <div class="card-body text-left p-2">
-            </p>
+                <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p>
-          </div>
+                <p class="m-0 card-text text-muted">COD. 12121222</p>
-          <div class="card bg-white border-0 w-75 mx-auto mb-4">
+              </div>
-            <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg">
-            <div class="card-body text-left p-2">
-              <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p>
-              <p class="m-0 card-text text-muted">COD. 12121222</p>
             </div>
           </div>
         </div>
         <!-- BUSCAR PRODUCTOS -->
         <div (click)="goPage('busqueda-productos')"
           class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
           <div class="card-body text-left p-4">
             <div class="row">

src/app/components/inicio/inicio.component.ts

Diff comments View file @ 9c87e85

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
+import { PopoverDirective } from 'ngx-bootstrap';
+import { appSettings } from 'src/etc/AppSettings';
 @Component({
   selector: 'app-inicio',
   templateUrl: './inicio.component.html',
   styleUrls: ['./inicio.component.scss']
 })
 export class InicioComponent implements OnInit {
-  constructor(private router: Router) { }
+  @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
+  apiUrl : string = appSettings.apiUrl
-  tooltip:boolean = false;
+  constructor(private router: Router) { }
   ngOnInit() {
   }
+  open() {
+    this.popoverDirective.show();
+  }
   private goPage(pageUrl) {
     this.router.navigate([pageUrl]);
   }
 }