Mauricio Cattafi / autoservicio

Browse Code »

Commit 37e41e975b234b6d2708c9c859eab25ff20ea924

Authored by Eric Fernandez 2019-09-05 16:04:12 -0300

2 parents 01db302e7e 7d18d4486e

Exists in master and in 1 other branch

Merge branch 'master' of http://git.focasoftware.com/angular/autoservicio

Showing 2 changed files Show diff stats

src/app/components/confirmacion-carrito/confirmacion-carrito.component.html

Diff comments View file @ 37e41e9

 <div
   *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada"
   class="row m-0 fade-in bg-primary-gradient disable-user-select"
   (click)="reiniciarTimer">
   <div class="col-12 p-0 vh-100">
     <!-- TOP HEADER -->
     <app-header></app-header>
     <!-- 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 m-0">
-          Pagar
+          &nbsp;
         </p>
       </div>
     </div>
     <div class="row m-0">
       <div class="col-10 px-1">
         <!-- TEXTO DE IZQUIERDA -->
         <div *ngIf="!verQR" class="row mx-2 mt-4 text-white">
           <div class="col-sm-auto my-auto">
             <p class="h2">Mi Compra
               <i class="fa fa-shopping-cart "></i>
             </p>
           </div>
           <div class="col-sm-9 my-auto">
             <p class="h4">Por favor, controle y confirme su compra.</p>
           </div>
         </div>
         <div [ngClass]="{'mt-5': verQR}" class="row m-0">
           <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
-          <div *ngIf="!verQR" class="col-sm-9">
+          <div *ngIf="!verQR" class="col-sm-9 pr-1">
             <div class="row mx-1 pr-1 vh-70 overflow-scroll text-dark">
-              <div class="col-4 p-2" *ngFor="let producto of productos">
+              <div class="mh-100 col-4 p-2" *ngFor="let producto of productos">
-                <div class="bg-white rounded-sm shadow border-0">
+                <div class="row m-0 h-100 bg-white rounded-sm shadow border-0">
-                  <img
+                  <div class="d-flex align-items-end flex-column">
-                    src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}"
+                    <div class="w-100">
-                    class="shadow rounded-sm w-100 m-auto">
+                      <img
-                  <div class="p-2">
+                        src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}"
-                    <p class="h6 min-h-55 text-left m-0">
+                        class="shadow rounded-sm w-100 m-auto">
-                      <small>
+                    </div>
-                        {{producto.DET_LAR}}
+                    <div class="w-100 pt-2 px-2">
-                      </small>
+                      <p class="h6 text-left">
-                    </p>
+                        <small class="font-weight-bold">
-                    <div *ngIf="producto.tieneSinonimos">
+                          {{producto.DET_LAR}}
-                      <p *ngFor="let p of producto.productos" class="h6 text-left m-0">
-                        <small>
-                          - {{p.cantidad * producto.cantidad}} {{p.DET_LAR}}
                         </small>
                       </p>
-                    </div>
+                      <div *ngIf="producto.tieneSinonimos">
-                    <div class="row m-0">
+                        <p *ngFor="let p of producto.productos" class="h6 text-left m-0">
-                      <div class="col-6 my-auto pt-2 pr-2 p-0">
+                          <small>
-                        <p class="text-left m-0 h6">
+                            - {{p.cantidad * producto.cantidad}} {{p.DET_LAR}}
-                          {{producto.cantidad}} x {{producto.PreVen | currency}}
+                          </small>
-                        </p>
-                      </div>
-                      <div class="col-6 my-auto pt-2 pr-2 p-0">
-                        <p class="text-right m-0 h6">
-                          {{producto.cantidad * producto.PreVen | currency}}
                         </p>
                       </div>
                     </div>
+                    <div class="w-100 d-flex justify-content-between mt-auto mb-1 px-2">
+                      <span class="text-left m-0 px-1 h6">
+                        {{producto.cantidad}} x {{producto.PreVen | currency}}
+                      </span>
+                      <span class="text-right m-0 px-1 h6">
+                        {{producto.cantidad * producto.PreVen | currency}}
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
           <!-- CODIGO QR -->
           <div *ngIf="verQR" class="col-sm-9">
             <div class="col-6 offset-3 border-0 mb-auto">
               <img
                 src="{{apiImagenes}}/imagenes/qrmp.jpg"
                 class="w-100 mx-auto d-block shadow rounded-sm">
             </div>
           </div>
           <!-- TICKET -->
           <div class="col-sm-3 px-1">
-            <div class="card rounded-sm shadow">
+            <div class="card shadow">
               <div class="card-body">
                 <p class="h5 card-title">Su Ticket</p>
                 <div class="row mt-4 m-0">
                   <div class="col-12 p-0 mb-2">
                     <p class="h6 m-0 card-text text-left">
                       <small class="font-weight-bold">DESCRIPCIÓN</small>
                     </p>
                     <p class="h6 m-0 card-text text-left">
                       <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
                     </p>
                   </div>
                 </div>
                 <div class="row vh-50 px-2 overflow-scroll m-0">
                   <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
                     <p class="h6 m-0 card-text text-left">
                       <small>{{producto.DET_LAR}}</small>
                     </p>
                     <div class="row d-flex justify-content-between m-0">
                       <div class="col p-0">
                         <p class="h6 m-0 card-text text-left">
                           <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
                         </p>
                       </div>
                       <div class="col p-0">
                         <p class="h6 m-0 card-text text-right">
                           <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
                         </p>
                       </div>
                     </div>
                   </div>
                 </div>
                 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
                   Total {{getTotal() | currency}}
                 </p>
               </div>
             </div>
           </div>
         </div>
         <!-- OPCIONES ABAJO DERECHA -->
         <div class="row m-0 fixed-bottom">
           <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
             <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
               <div class="card-body row m-0 p-1">
                 <div class="col-12 p-3">
                   <button
                     type="button"
                     class="btn btn-block btn-light shadow btn-sm shadow"
                     (click)="volverPreviousPage()">
                     <span class="pr-2">Volver</span>
                     <i class="fa fa-undo text-warning"></i>
                   </button>
                   <button
                     type="button"
                     class="btn btn-block btn-light shadow btn-sm shadow"
                     [routerLink]="['/cancelar-compra']">
                     <span class="pr-2">Cancelar</span>
                     <i class="fa fa-times text-danger"></i>
                   </button>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
       <!-- FORMAS DE PAGO -->
       <div *ngIf="!verQR" class="col-2 px-1">
         <p class="h4 text-white text-center mt-4 mx-2 pb-2 border-bottom border-white">
           Forma de pago
         </p>
         <!-- EFECTIVO -->
         <div
           class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white"
           (click)="pagoEfectivo('efectivo')">
           <div class="col-7 text-center my-auto py-3 px-2">
             <span class="h5">Efectivo</span>
           </div>
           <div class="col-5 my-auto p-0">
             <img
             src="{{apiImagenes}}/imagenes/efectivo.png"
             class="w-50 float-right mr-3">
           </div>
         </div>
         <!-- TARJETA -->
         <div class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white">
           <div class="col-7 text-center my-auto py-3 px-2">
             <span class="h5">Tarjeta</span>
           </div>
           <div class="col-5 my-auto p-0">
             <img
             src="{{apiImagenes}}/imagenes/tarjeta.png"
             class="w-50 float-right mr-3">
           </div>
         </div>
         <!-- QR -->
         <div
           class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white"
           (click)="pagar('electronico')">
           <div class="col-7 text-center my-auto py-1 px-2">
             <span class="h5">Pago Electrónico</span>
           </div>
           <div class="col-5 my-auto p-0">
             <img
             src="{{apiImagenes}}/imagenes/qr.png"
             class="w-50 float-right mr-3">
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
 <div
   *ngIf="compraConQRfinalizada"
   class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
   <div class="col-12 text-center text-white my-auto">
     <p class="font-weight-bold display-4">
       Su pago fue<br>
       acreditado
       exitosamente
     </p>
     <p class="font-weight-bold display-4">Recuerde retirar su ticket</p>
   </div>
 </div>
 <div
   *ngIf="compraConEfectivofinalizada"
   class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
   <div class="col-12 text-center text-white my-auto">

src/app/components/sidebar/sidebar.component.html

Diff comments View file @ 37e41e9

 <div class="disable-user-select d-flex align-items-center flex-column h-100 text-center">
   <!-- ENCABEZADO -->
   <p class="h4 border-bottom border-white text-white pb-2">
     Mi compra
     <i class="fa fa-shopping-cart" aria-hidden="true"></i>
   </p>
-  <div
+  <div class="overflow-scroll px-1 mb-1 w-100">
-    class="overflow-scroll px-1 mb-1 w-100">
     <!-- PRODUCTOS CARRITO -->
     <div class="row m-0"
         *ngFor="let producto of productosCarrito">
       <div class="col p-0 my-1 bg-white border-0 rounded-sm">
         <div class="row m-0">
           <div class="col-6 pl-1 pr-0 my-auto">
             <img
               class="w-100 float-left rounded-sm shadow"
               src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}">
           </div>
           <div class="col-6 px-1">
             <!-- BOTONES -->
             <div class="row m-0 d-flex justify-content-between">
               <!-- SUMAR - RESTAR CANTIDAD -->
               <div class="col p-1">
                 <div class="btn-group-sm btn-group float-left" role="group">
                   <button
                     type="button"
                     class="btn btn-light btn-sm border shadow"
                     (click)="aumentarCantidad(producto)">
                     <i class="fa fa-plus" aria-hidden="true"></i>
                   </button>
                   <div class="bg-white border border-white my-auto px-2 text-dark h5 shadow">
                     <small>{{producto.cantidad}}</small>
                   </div>
                   <button
                     type="button"
                     class="btn btn-light btn-sm border shadow"
                     (click)="restarCantidad(producto)">
                     <i class="fa fa-minus" aria-hidden="true"></i>
                   </button>
                 </div>
               </div>
               <!-- PERSONALIZAR -->
               <div class="col p-1">
                 <button
                   *ngIf="producto.tieneSinonimos"
                   type="button"
                   class="btn btn-light btn-sm float-left border shadow"
                   (click)="personalizarPromo(producto, i)">
                   <i class="fa fa-refresh text-purple" aria-hidden="true"></i>
                 </button>
               </div>
               <!-- BORRAR -->
               <div class="col p-1">
                 <button
                   type="button"
                   class="btn btn-secondary btn-sm float-right shadow"
                   (click)="deleteProducto(producto, i)">
                   <i class="fa fa-trash" aria-hidden="true"></i>
                 </button>
               </div>
             </div>
           </div>
         </div>
         <div class="row m-0 shadow rounded-sm">
           <div class="col px-2">
             <p class="m-0 text-left h6"><small>{{producto.DetArt}}</small></p>
             <p class="m-0 text-right font-weight-bold h6">{{producto.PreVen | currency}}</p>
           </div>
         </div>
       </div>
     </div>
   </div>
   <!-- TOTAL -->
   <div class="card rounded-top-sm mx-2 mt-auto blue-gradient border-0">
     <div class="card-body p-2 pt-3 row m-0">
       <div class="col-12 p-0">
         <p
           class="h4 border-bottom border-secondary text-secondary pb-2">
           ({{getCantidadProductos()}}) artículos
         </p>
         <p class="h4 text-secondary">Total</p>
         <p class="h4 font-weight-bold">{{getTotal() | currency}}</p>
       </div>
       <div class="col-12 p-0">
         <button
           *ngIf="getCantidadProductos() > 0"
           type="button"
           class="btn btn-block btn-light btn-lg shadow mb-2 p-1"
           routerLink="/confirmacion-carrito">
           <span class="font-weight-bold pr-1">Pagar</span>
           <i class="fa fa-check text-success" aria-hidden="true"></i>
         </button>
         <button
           type="button"
           class="btn btn-block btn-light shadow btn-sm shadow"
           [routerLink]="['/cancelar-compra']">
           <span class="pr-1">Cancelar</span>
           <i class="fa fa-times text-danger" aria-hidden="true"></i>
         </button>
       </div>
     </div>
   </div>
 </div>