Martin Macola / autoservicio

Download as
Browse Code ยป

Commit eb77bb2533226c66e42b7cbc05092d73d48721ed

Authored by Marcelo Puebla
1 parent cd06fe207d
Exists in master

agregado metodos para cambiar estado.

Showing 3 changed files with 149 additions and 40 deletions   Show diff stats
src/app/components/comanda/comanda.component.html
Diff comments   View file @ eb77bb2
1   -<div class="container-fluid p-0">
  1 +<div class="container-fluid fade-in p-0">
2 2 <div class="row m-1 fade-in disable-user-select">
3   - <div class="col-2 col-1-5 p-1" *ngFor="let item of itemsArray">
  3 + <div
  4 + [ngClass]="{ 'swing-out-top-bck': comanda.estado === 3 }"
  5 + class="col-2 col-1-5 p-1" *ngFor="let comanda of comandas">
  6 +
4 7 <div
5   - class="card rounded-sm shadow-sm"
6   - [ngClass]="{ 'green-card': false, 'red-card': false }"
7   - >
8   - <img
9   - class="card-img-top rounded-sm shadow"
10   - src="{{ apiImagenes }}/imagenes/cerealitas.jpg"
11   - />
12   - <div class="card-body px-1 py-2">
13   - <p class="h6 card-title">Title</p>
14   - <p class="card-text">Text</p>
15   - <button class="btn btn-block btn-danger shadow p-1">Elaborar</button>
16   - <button class="btn btn-block btn-success shadow p-1">
17   - Terminado
18   - </button>
19   - <div class="row mt-2 m-0">
20   - <div class="col-6 p-0 pr-1">
21   - <button class="btn btn-block btn-secondary btn-sm shadow p-0">
22   - <span class="pr-1 h7"><small>Eliminar</small></span>
23   - <i class="fa fa-trash" aria-hidden="true"></i>
24   - </button>
25   - </div>
26   - <div class="col-6 p-0 pl-1">
27   - <button class="btn btn-block btn-light btn-sm shadow p-0">
28   - <span class="pr-1 h7"><small>En espera</small></span>
29   - <i class="fa fa-undo text-warning" aria-hidden="true"></i>
30   - </button>
31   - </div>
  8 + class="card-comanda fade-in d-flex align-items-end flex-column bg-danger rounded-xs shadow-sm border-0 h-100"
  9 + [ngClass]="
  10 + {
  11 + 'bg-light': comanda.estado === 1,
  12 + 'bg-danger': comanda.estado === 2,
  13 + 'bg-success': comanda.estado === 3
  14 + }">
  15 + <img class="card-img-top rounded-xs shadow" src="{{apiImagenes}}/imagenes/cerealitas.jpg"/>
  16 + <div class="row w-100 m-0 mt-2">
  17 + <p class="col-12 px-2 mb-2 m-0 h6">Title</p>
  18 + <p class="col-12 px-2 mb-2 m-0 h6"><small>Text</small></p>
  19 + </div>
  20 + <div class="row w-100 m-0 mb-2 mt-auto">
  21 + <div
  22 + class="col-12 px-2"
  23 + *ngIf="comanda.estado === 1">
  24 + <button
  25 + class="btn btn-block btn-danger shadow"
  26 + (click)="updateComanda(comanda, 2, 'En elaboracion')">
  27 + Elaborar
  28 + </button>
  29 + </div>
  30 + <div
  31 + class="col-12 px-2"
  32 + *ngIf="comanda.estado === 2">
  33 + <button
  34 + class="btn btn-block btn-success shadow"
  35 + (click)="updateComanda(comanda, 3, 'Terminado')">
  36 + Terminado
  37 + </button>
  38 + </div>
  39 + </div>
  40 + <div
  41 + *ngIf="comanda.estado === 2"
  42 + class="row w-100 mx-0 mb-2">
  43 + <div class="col-12 px-2">
  44 + <button
  45 + class="btn btn-block btn-light btn-sm shadow p-0"
  46 + (click)="updateComanda(comanda, 1, 'Pagado')">
  47 + <span class="pr-1 h6"><small>En espera</small></span>
  48 + <i class="fa fa-undo text-warning" aria-hidden="true"></i>
  49 + </button>
32 50 </div>
33 51 </div>
34 52 </div>
  53 +
35 54 </div>
36 55 </div>
37 56 </div>
src/app/components/comanda/comanda.component.scss
Diff comments   View file @ eb77bb2
... ... @@ -9,20 +9,88 @@
9 9 }
10 10 }
11 11  
12   -.h7 {
13   - font-size: 0.75rem;
  12 +.bg-danger {
  13 + background-color: #8c000e !important;
  14 + p {
  15 + color: #fff;
  16 + }
14 17 }
15 18  
16   -.red-card {
17   - background-color: #8c000e;
18   - .card-body {
  19 +.bg-success {
  20 + background-color: #00751b !important;
  21 + p {
19 22 color: #fff;
20 23 }
21 24 }
22 25  
23   -.green-card {
24   - background-color: #00751B;
25   - .card-body {
26   - color: #fff;
  26 +.bg-light {
  27 + background-color: white !important;
  28 + p {
  29 + color: #212529;
  30 + }
  31 +}
  32 +
  33 +.rounded-xs {
  34 + border-radius: 0.5rem;
  35 +}
  36 +
  37 +.card-comanda {
  38 + min-height: 250px;
  39 +}
  40 +
  41 +.swing-out-top-bck {
  42 + -webkit-animation: swing-out-top-bck 0.45s
  43 + cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s both;
  44 + animation: swing-out-top-bck 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s
  45 + both;
  46 +}
  47 +
  48 +@-webkit-keyframes swing-out-top-bck {
  49 + 0% {
  50 + -webkit-transform: rotateX(0deg);
  51 + transform: rotateX(0deg);
  52 + -webkit-transform-origin: top;
  53 + transform-origin: top;
  54 + opacity: 1;
  55 + }
  56 + 75% {
  57 + -webkit-transform: rotateX(-100deg);
  58 + transform: rotateX(-100deg);
  59 + -webkit-transform-origin: top;
  60 + transform-origin: top;
  61 + }
  62 + 100% {
  63 + -webkit-transform: rotateX(-100deg);
  64 + transform: rotateX(-100deg);
  65 + -webkit-transform-origin: top;
  66 + transform-origin: top;
  67 + opacity: 0;
  68 + display: none;
  69 + position: absolute;
  70 + }
  71 +}
  72 +
  73 +@keyframes swing-out-top-bck {
  74 + 0% {
  75 + -webkit-transform: rotateX(0deg);
  76 + transform: rotateX(0deg);
  77 + -webkit-transform-origin: top;
  78 + transform-origin: top;
  79 + opacity: 1;
  80 + }
  81 + 75% {
  82 + -webkit-transform: rotateX(-100deg);
  83 + transform: rotateX(-100deg);
  84 + -webkit-transform-origin: top;
  85 + transform-origin: top;
  86 + }
  87 + 100% {
  88 + -webkit-transform: rotateX(-100deg);
  89 + transform: rotateX(-100deg);
  90 + -webkit-transform-origin: top;
  91 + transform-origin: top;
  92 + opacity: 0;
  93 + display: none;
  94 + position: absolute;
27 95 }
28 96 }
src/app/components/comanda/comanda.component.ts
Diff comments   View file @ eb77bb2
1 1 import { Component, OnInit } from '@angular/core';
2 2 import { appSettings } from 'src/etc/AppSettings';
  3 +import { ComandaService } from 'src/app/services/comanda.service';
  4 +import { Comanda } from 'src/app/wrappers/comanda';
3 5  
4 6 @Component({
5 7 selector: 'app-comanda',
... ... @@ -9,11 +11,31 @@ import { appSettings } from &#39;src/etc/AppSettings&#39;;
9 11 export class ComandaComponent implements OnInit {
10 12  
11 13 private apiImagenes = appSettings.apiImagenes;
12   - private itemsArray = [{},{},{},{},{},{},{},{}]
  14 + private comandas: Comanda[] = [];
13 15  
14   - constructor() { }
  16 + constructor(
  17 + private comandaService: ComandaService
  18 + ) { }
15 19  
16 20 ngOnInit() {
  21 +
  22 + this.comandaService.getAll()
  23 + .subscribe((res: Comanda[]) => {
  24 +
  25 + this.comandas = res;
  26 + }, e => console.error(e))
  27 + }
  28 +
  29 + updateComanda(comanda: Comanda, estadoNuevo: number, observacionNueva: string) {
  30 +
  31 + this.comandaService.updateComanda(comanda.id, estadoNuevo, observacionNueva)
  32 + .subscribe(res => {
  33 +
  34 + if (res.data) {
  35 + comanda.estado = estadoNuevo;
  36 + comanda.observacion = observacionNueva;
  37 + }
  38 + }, e => console.error(e))
17 39 }
18 40  
19 41 }