Marcelo Puebla / autoservicio-axion

Browse Code »

Commit 50f657d6d90db9685d96c04d473803e724d3e265

Authored by Benjamin Rodriguez 2020-01-27 11:31:19 -0300

1 parent 136adf0401

Exists in develop

agrego componentes en comandas

Showing 3 changed files with 15 additions and 7 deletions Show diff stats

src/app/modules/comanda/comanda.component.html

Diff comments View file @ 50f657d

 <div class="container-fluid d-flex flex-column h-100 fade-in pb-4 pr-2">
   <div class="row pt-5 mt-n5">
     <div class="col-12">
       <p class="mb-3 h2 text-center mt-2">Pedidos a elaborar</p>
     </div>
   </div>
   <div class="row flex-fill m-0 scroll-y">
     <div class="col-12 px-2">
       <div class="card-columns h-100 m-1 fade-in disable-user-select">
         <div
           *ngFor="let comanda of comandas"
           class="card fade-in rounded-xs shadow-sm mt-2"
           [ngClass]="{
             'bg-light': comanda.estado === 1,
             'bg-danger': comanda.estado === 2,
             'bg-success swing-out-top-bck': comanda.estado === 3
           }">
           <div class="card-body p-2">
             <div class="row justify-content-between">
               <img
                 src="../../../assets/img/para-llevar-fondo-sombra.png"
                 class="w-25 h-25 float-left ml-0 mt-n3"
                 *ngIf="comanda.paraLlevar == true">
               <div></div>
               <!-- NUMERO DE PEDIDO -->
               <p class="h1 text-right mr-3">
                 {{rellenar(comanda.id.toString().slice(0), 3)}}
               </p>
           </div>
             <div>
               <!-- PEDIDO A NOMBRE DE -->
               <p class="text-center m-0">
                 {{comanda.pedidoAnombreDe ? comanda.pedidoAnombreDe.toUpperCase() : ''}}
               </p>
               <!-- TIMER PEDIDO -->
               <div class="d-flex justify-content-between align-items-center mt-2">
                 <p><i class="fas fa-user-clock text-info"></i></p>
                 <p class="text-center mb-1">
                   {{comanda.hoursPedido}}:{{comanda.minutesPedido}}:{{comanda.secondsPedido}}
                 </p>
                 <p><i class="far fa-clock fa-spin text-info"></i></p>
               </div>
               <div *ngFor="let detalle of comanda.detalles">
-                <p
+                <div
                   class="card-text border-top pt-2 mb-2"
                   [ngClass]="
                   {
                     'border-secondary': comanda.estado === 1,
                     'border-light': comanda.estado != 1
                   }">
                   <!-- DETALLE Y CANTIDAD -->
-                  <small>{{detalle.DetLar}}</small><br>
+                  <p>
-                  <small>CANT.{{detalle.cantidad}}</small>
+                    <small>{{detalle.DetLar}}</small><br>
-                </p>
+                    <small>CANT.{{detalle.cantidad}}</small>
-                <blockquote
+                  </p>
+                  <div *ngFor="let componente of detalle.componentes">
+                    <p>
+                      <small>{{componente.DetArt.toUpperCase()}}</small>
+                    </p>
+                  </div>
+                </div>
+                <!-- <blockquote
                   *ngIf="detalle.comentario">
                   <p class="text-muted font-italic px-4" *ngIf="comanda.estado === 1"><small>{{detalle.comentario}}</small></p>
                   <p class="text-white font-italic px-4" *ngIf="comanda.estado !== 1"><small>{{detalle.comentario}}</small></p>
-                </blockquote>
+                </blockquote> -->
               </div>
               <!-- BOTONES -->
               <button
                 *ngIf="comanda.estado === 1"
                 class="btn btn-block btn-primary shadow-sm btn-elaborar"
                 (click)="updateComanda(comanda, 2, 'En elaboracion')">
                 <div class="row justify-content-between">
                   <div></div>
                   <p class="ml-4" style="color: #fff;">Elaborar</p>
                   <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="icon-30 mr-2"
                   src="assets/img/ir.svg">
                 </div>
               </button>
               <button
                 *ngIf="comanda.estado === 2"
                 class="btn btn-block shadow-sm  btn-terminar"
                 (click)="updateComanda(comanda, 3, 'Terminado')">
                 <div class="row justify-content-between">
                   <div></div>
                   <p class="ml-4">Terminar</p>
                   <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="icon-30 mr-2"
                   src="assets/img/flecha-borde-color.svg">
                 </div>
               </button>
               <button
                 *ngIf="comanda.estado === 2"
                 class="btn btn-block btn-deshacer btn-sm shadow-sm p-0"
                 (click)="updateComanda(comanda, 1, 'Pagado')">
                 <div class="row justify-content-between">
                   <div></div>
                   <span class="h6 ml-4"><small>Deshacer</small></span>
                   <i class="fas fa-undo-alt text-info mr-4 my-auto"></i>
                 </div>
               </button>
             </div>
             <!-- TIMER DE ELABORACION -->
             <div *ngIf="comanda.estado === 2" class="d-flex justify-content-between align-items-center mt-2">
               <div *ngIf="comanda.estado !== 1">
                 <i class="fa fa-utensils text-info" aria-hidden="true"></i>
               </div>
               <span *ngIf="comanda.estado === 1" class="text-dark">
                 {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}}
               </span>
               <span *ngIf="comanda.estado !== 1" class="text-white">
                 {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}}
               </span>
               <i class="fas fa-clock fa-spin text-info"></i>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>

src/app/modules/comanda/comanda.component.ts

Diff comments View file @ 50f657d

 import { Component, OnInit } from '@angular/core';
 import { IComanda, IComandaDetalle, IComponente } from 'src/app/interfaces/IComanda';
 import { ComandaService } from 'src/app/services/comanda/comanda.service';
 import * as _ from 'lodash';
 @Component({
   selector: 'app-comanda',
   templateUrl: './comanda.component.html',
   styleUrls: ['./comanda.component.scss']
 })
 export class ComandaComponent implements OnInit {
   comandas: IComanda[] = [];
+  detalles: [] = [];
   cicloTime: any;
   constructor(
     private comandaService: ComandaService,
   ) { }
   ngOnInit() {
     this.getComandas();
     this.timerGetComandas();
   }
   OnDestroy() {
     clearInterval(this.cicloTime);
   }
   timerGetComandas() {
     this.cicloTime = setInterval(() => {
       this.getComandas();
     }, 5000);
   }
   getComandas() {
     this.comandaService.getAll()
       .subscribe((resComandas: IComanda[]) => {
         this.addNewComandas(resComandas);
       }, e => console.error(e));
   }
   addNewComandas(resComandas: IComanda[]) {
     for (let j = 0; j < resComandas.length; j++) {
       for (const comanda of this.comandas) {
         if (comanda.id === resComandas[j].id) {
           resComandas.splice(j, 1);
         }
       }
     }
     if (!resComandas.length) return;
     Array.prototype.push.apply(this.comandas, resComandas);
     this.startTimersPedido(resComandas);
   }
   updateComanda(comanda: IComanda, estadoNuevo: number, observacionNueva: string) {
     const data = {
       idComanda: comanda.id,
       estado: estadoNuevo,
       observacion: observacionNueva,
       tiempoEspera: `${comanda.hoursPedido}:${comanda.secondsPedido}:${comanda.secondsPedido}`,
       tiempoElaboracion: `${comanda.hoursElaboracion}:${comanda.secondsElaboracion}:${comanda.secondsElaboracion}`,
     };
     if (data.estado === 3) {
       this.comandaService.imprimirComandaCocina(parseInt(data.idComanda, 10))
         .subscribe(res => { }, err => console.error(err)
         );
     }
     if (estadoNuevo !== 2) comanda.detalles.forEach(d => d.seeDetalle = false);
     this.comandaService.update(data)
       .subscribe((res: any) => {
         if (res.data) {
           comanda.estado = estadoNuevo;
           comanda.observacion = observacionNueva;
           if (estadoNuevo === 2) {
             this.startTimerElaboracion(comanda);
           } else if (comanda.timerElaboracion) {
             clearInterval(comanda.timerElaboracion);
           }
         }
       }, e => console.error(e));
   }
   rellenar(relleno, longitud) {
     relleno = '' + relleno;
     while (relleno.length < longitud) {
       relleno = '0' + relleno;
     }
     return relleno;
   }
   toggleVerComponentes(detalle: IComandaDetalle, comanda: IComanda) {
     detalle.seeDetalle = !detalle.seeDetalle;
   }
   hasTipo(componentes: IComponente[]) {
     return componentes.some(c => c.tipoArticulo === 6);
   }
   //#region TIMERS
   startTimersPedido(comandas) {
     comandas.forEach((comanda: IComanda) => {
       this.comandaService.startTimerComanda(comanda, 'Pedido');
       if (comanda.estado === 2) {
         this.startTimerElaboracion(comanda);
       }
     });
   }
   startTimerElaboracion(comanda: IComanda) {
     this.comandaService.startTimerComanda(comanda, 'Elaboracion');
   }
   //#endregion
 }

src/app/modules/opcion-pedido/opcion-pedido.component.scss

Diff comments View file @ 50f657d

 .reduce-card-1.media-pantalla {
   position: absolute;
   bottom: 150px;
   -webkit-box-flex: 0;
   flex: 0 0 41.6666666667%;
   max-width: 41.6666666667%;
   left: 10%;
   margin-left: 0 !important;
 }
 .reduce-card-2.media-pantalla {
   position: absolute;
   bottom: 150px;
   -webkit-box-flex: 0;
   flex: 0 0 41.6666666667%;
   max-width: 41.6666666667%;
   right: 10%;
   margin-right: 0 !important;
 }
 .heigth-80 {
   height: 80px;
-}
+}