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 <div class="row m-1 fade-in disable-user-select"> 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 <div 7 <div
5 class="card rounded-sm shadow-sm" 8 class="card-comanda fade-in d-flex align-items-end flex-column bg-danger rounded-xs shadow-sm border-0 h-100"
6 [ngClass]="{ 'green-card': false, 'red-card': false }" 9 [ngClass]="
7 > 10 {
8 <img 11 'bg-light': comanda.estado === 1,
9 class="card-img-top rounded-sm shadow" 12 'bg-danger': comanda.estado === 2,
10 src="{{ apiImagenes }}/imagenes/cerealitas.jpg" 13 'bg-success': comanda.estado === 3
11 /> 14 }">
12 <div class="card-body px-1 py-2"> 15 <img class="card-img-top rounded-xs shadow" src="{{apiImagenes}}/imagenes/cerealitas.jpg"/>
13 <p class="h6 card-title">Title</p> 16 <div class="row w-100 m-0 mt-2">
14 <p class="card-text">Text</p> 17 <p class="col-12 px-2 mb-2 m-0 h6">Title</p>
15 <button class="btn btn-block btn-danger shadow p-1">Elaborar</button> 18 <p class="col-12 px-2 mb-2 m-0 h6"><small>Text</small></p>
16 <button class="btn btn-block btn-success shadow p-1"> 19 </div>
17 Terminado 20 <div class="row w-100 m-0 mb-2 mt-auto">
18 </button> 21 <div
19 <div class="row mt-2 m-0"> 22 class="col-12 px-2"
20 <div class="col-6 p-0 pr-1"> 23 *ngIf="comanda.estado === 1">
21 <button class="btn btn-block btn-secondary btn-sm shadow p-0"> 24 <button
22 <span class="pr-1 h7"><small>Eliminar</small></span> 25 class="btn btn-block btn-danger shadow"
23 <i class="fa fa-trash" aria-hidden="true"></i> 26 (click)="updateComanda(comanda, 2, 'En elaboracion')">
24 </button> 27 Elaborar
25 </div> 28 </button>
26 <div class="col-6 p-0 pl-1"> 29 </div>
27 <button class="btn btn-block btn-light btn-sm shadow p-0"> 30 <div
28 <span class="pr-1 h7"><small>En espera</small></span> 31 class="col-12 px-2"
29 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 32 *ngIf="comanda.estado === 2">
30 </button> 33 <button
31 </div> 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 </div> 50 </div>
33 </div> 51 </div>
34 </div> 52 </div>
53
35 </div> 54 </div>
36 </div> 55 </div>
37 </div> 56 </div>
38 57
src/app/components/comanda/comanda.component.scss
Diff comments   View file @ eb77bb2
1 @media (min-width: 1200px) { 1 @media (min-width: 1200px) {
2 .col-1-5 { 2 .col-1-5 {
3 flex: 0 0 12.5%; 3 flex: 0 0 12.5%;
4 max-width: 12.5%; 4 max-width: 12.5%;
5 position: relative; 5 position: relative;
6 width: 100%; 6 width: 100%;
7 padding-right: 15px; 7 padding-right: 15px;
8 padding-left: 15px; 8 padding-left: 15px;
9 } 9 }
10 } 10 }
11 11
12 .h7 { 12 .bg-danger {
13 font-size: 0.75rem; 13 background-color: #8c000e !important;
14 p {
15 color: #fff;
16 }
14 } 17 }
15 18
16 .red-card { 19 .bg-success {
17 background-color: #8c000e; 20 background-color: #00751b !important;
18 .card-body { 21 p {
19 color: #fff; 22 color: #fff;
20 } 23 }
21 } 24 }
22 25
23 .green-card { 26 .bg-light {
24 background-color: #00751B; 27 background-color: white !important;
25 .card-body { 28 p {
26 color: #fff; 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 }
29 97
src/app/components/comanda/comanda.component.ts
Diff comments   View file @ eb77bb2
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { appSettings } from 'src/etc/AppSettings'; 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 @Component({ 6 @Component({
5 selector: 'app-comanda', 7 selector: 'app-comanda',
6 templateUrl: './comanda.component.html', 8 templateUrl: './comanda.component.html',
7 styleUrls: ['./comanda.component.scss'] 9 styleUrls: ['./comanda.component.scss']
8 }) 10 })
9 export class ComandaComponent implements OnInit { 11 export class ComandaComponent implements OnInit {
10 12
11 private apiImagenes = appSettings.apiImagenes; 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 ngOnInit() { 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 }
20 42