Commit 6c4516fb7dc2b1512e8a66b24d2706e950c09262

Authored by Marcelo Puebla
Exists in develop

Merge branch 'master' into 'develop'

Master(benjamin)

See merge request !60
src/app/modules/comanda/comanda.component.html
1 <div class="container-fluid d-flex flex-column h-100 fade-in pb-4 pr-2"> 1 <div class="container-fluid d-flex flex-column h-100 fade-in pb-4 pr-2">
2 <div class="row pt-5 mt-n5"> 2 <div class="row pt-5 mt-n5">
3 <div class="col-12"> 3 <div class="col-12">
4 <p class="mb-3 h2 text-center mt-2">Pedidos a elaborar</p> 4 <p class="mb-3 h2 text-center mt-2">Pedidos a elaborar</p>
5 </div> 5 </div>
6 </div> 6 </div>
7 <div class="row flex-fill m-0 scroll-y"> 7 <div class="row flex-fill m-0 scroll-y">
8 <div class="col-12 px-2"> 8 <div class="col-12 px-2">
9 <div class="card-columns h-100 m-1 fade-in disable-user-select"> 9 <div class="card-columns h-100 m-1 fade-in disable-user-select">
10 <div 10 <div
11 *ngFor="let comanda of comandas" 11 *ngFor="let comanda of comandas"
12 class="card fade-in rounded-xs shadow-sm mt-2" 12 class="card fade-in rounded-xs shadow-sm mt-2"
13 [ngClass]="{ 13 [ngClass]="{
14 'bg-light': comanda.estado === 1, 14 'bg-light': comanda.estado === 1,
15 'bg-danger': comanda.estado === 2, 15 'bg-danger': comanda.estado === 2,
16 'bg-success swing-out-top-bck': comanda.estado === 3 16 'bg-success swing-out-top-bck': comanda.estado === 3
17 }"> 17 }">
18 <div class="card-body p-2"> 18 <div class="card-body p-2">
19 <div class="row justify-content-between"> 19 <div class="row justify-content-between">
20 <img 20 <img
21 src="../../../assets/img/para-llevar-fondo-sombra.png" 21 src="../../../assets/img/para-llevar-fondo-sombra.png"
22 class="w-25 h-25 float-left ml-0 mt-n3" 22 class="w-25 h-25 float-left ml-0 mt-n3"
23 *ngIf="comanda.paraLlevar == true"> 23 *ngIf="comanda.paraLlevar == true">
24 <div></div> 24 <div></div>
25 <!-- NUMERO DE PEDIDO --> 25 <!-- NUMERO DE PEDIDO -->
26 <p class="h1 text-right mr-3"> 26 <p class="h1 text-right mr-3">
27 {{rellenar(comanda.id.toString().slice(0), 3)}} 27 {{rellenar(comanda.id.toString().slice(0), 3)}}
28 </p> 28 </p>
29 </div> 29 </div>
30 <div> 30 <div>
31 <!-- PEDIDO A NOMBRE DE --> 31 <!-- PEDIDO A NOMBRE DE -->
32 <p class="text-center m-0"> 32 <p class="text-center m-0">
33 {{comanda.pedidoAnombreDe ? comanda.pedidoAnombreDe.toUpperCase() : ''}} 33 {{comanda.pedidoAnombreDe ? comanda.pedidoAnombreDe.toUpperCase() : ''}}
34 </p> 34 </p>
35 <!-- TIMER PEDIDO --> 35 <!-- TIMER PEDIDO -->
36 <div class="d-flex justify-content-between align-items-center mt-2"> 36 <div class="d-flex justify-content-between align-items-center mt-2">
37 <p><i class="fas fa-user-clock text-info"></i></p> 37 <p><i class="fas fa-user-clock text-info"></i></p>
38 <p class="text-center mb-1"> 38 <p class="text-center mb-1">
39 {{comanda.hoursPedido}}:{{comanda.minutesPedido}}:{{comanda.secondsPedido}} 39 {{comanda.hoursPedido}}:{{comanda.minutesPedido}}:{{comanda.secondsPedido}}
40 </p> 40 </p>
41 <p><i class="far fa-clock fa-spin text-info"></i></p> 41 <p><i class="far fa-clock fa-spin text-info"></i></p>
42 </div> 42 </div>
43 <div *ngFor="let detalle of comanda.detalles"> 43 <div *ngFor="let detalle of comanda.detalles">
44 <p 44 <div
45 class="card-text border-top pt-2 mb-2" 45 class="card-text border-top pt-2 mb-2"
46 [ngClass]=" 46 [ngClass]="
47 { 47 {
48 'border-secondary': comanda.estado === 1, 48 'border-secondary': comanda.estado === 1,
49 'border-light': comanda.estado != 1 49 'border-light': comanda.estado != 1
50 }"> 50 }">
51 <!-- DETALLE Y CANTIDAD --> 51 <!-- DETALLE Y CANTIDAD -->
52 <small>{{detalle.DetLar}}</small><br> 52 <p>
53 <small>CANT.{{detalle.cantidad}}</small> 53 <small>{{detalle.DetLar}}</small><br>
54 </p> 54 <small>CANT.{{detalle.cantidad}}</small>
55 </p>
56 <div *ngFor="let componente of detalle.componentes">
57 <p>
58 <small>{{componente.DetArt.toUpperCase()}}</small>
59 </p>
60 </div>
61 </div>
55 <blockquote 62 <blockquote
56 *ngIf="detalle.comentario"> 63 *ngIf="detalle.comentario">
57 <p class="text-muted font-italic px-4" *ngIf="comanda.estado === 1"><small>{{detalle.comentario}}</small></p> 64 <p class="text-muted font-italic px-4" *ngIf="comanda.estado === 1"><small>{{detalle.comentario}}</small></p>
58 <p class="text-white font-italic px-4" *ngIf="comanda.estado !== 1"><small>{{detalle.comentario}}</small></p> 65 <p class="text-white font-italic px-4" *ngIf="comanda.estado !== 1"><small>{{detalle.comentario}}</small></p>
59 </blockquote> 66 </blockquote>
60 </div> 67 </div>
61 <!-- BOTONES --> 68 <!-- BOTONES -->
62 <button 69 <button
63 *ngIf="comanda.estado === 1" 70 *ngIf="comanda.estado === 1"
64 class="btn btn-block btn-primary shadow-sm btn-elaborar" 71 class="btn btn-block btn-primary shadow-sm btn-elaborar"
65 (click)="updateComanda(comanda, 2, 'En elaboracion')"> 72 (click)="updateComanda(comanda, 2, 'En elaboracion')">
66 <div class="row justify-content-between"> 73 <div class="row justify-content-between">
67 <div></div> 74 <div></div>
68 <p class="ml-4" style="color: #fff;">Elaborar</p> 75 <p class="ml-4" style="color: #fff;">Elaborar</p>
69 <img 76 <img
70 draggable="false" 77 draggable="false"
71 ondragstart="return false;" 78 ondragstart="return false;"
72 (contextmenu)="false" 79 (contextmenu)="false"
73 class="icon-30 mr-2" 80 class="icon-30 mr-2"
74 src="assets/img/ir.svg"> 81 src="assets/img/ir.svg">
75 </div> 82 </div>
76 </button> 83 </button>
77 <button 84 <button
78 *ngIf="comanda.estado === 2" 85 *ngIf="comanda.estado === 2"
79 class="btn btn-block shadow-sm btn-terminar" 86 class="btn btn-block shadow-sm btn-terminar"
80 (click)="updateComanda(comanda, 3, 'Terminado')"> 87 (click)="updateComanda(comanda, 3, 'Terminado')">
81 <div class="row justify-content-between"> 88 <div class="row justify-content-between">
82 <div></div> 89 <div></div>
83 <p class="ml-4">Terminar</p> 90 <p class="ml-4">Terminar</p>
84 <img 91 <img
85 draggable="false" 92 draggable="false"
86 ondragstart="return false;" 93 ondragstart="return false;"
87 (contextmenu)="false" 94 (contextmenu)="false"
88 class="icon-30 mr-2" 95 class="icon-30 mr-2"
89 src="assets/img/flecha-borde-color.svg"> 96 src="assets/img/flecha-borde-color.svg">
90 </div> 97 </div>
91 </button> 98 </button>
92 <button 99 <button
93 *ngIf="comanda.estado === 2" 100 *ngIf="comanda.estado === 2"
94 class="btn btn-block btn-deshacer btn-sm shadow-sm p-0" 101 class="btn btn-block btn-deshacer btn-sm shadow-sm p-0"
95 (click)="updateComanda(comanda, 1, 'Pagado')"> 102 (click)="updateComanda(comanda, 1, 'Pagado')">
96 <div class="row justify-content-between"> 103 <div class="row justify-content-between">
97 <div></div> 104 <div></div>
98 <span class="h6 ml-4"><small>Deshacer</small></span> 105 <span class="h6 ml-4"><small>Deshacer</small></span>
99 <i class="fas fa-undo-alt text-info mr-4 my-auto"></i> 106 <i class="fas fa-undo-alt text-info mr-4 my-auto"></i>
100 </div> 107 </div>
101 </button> 108 </button>
102 </div> 109 </div>
103 <!-- TIMER DE ELABORACION --> 110 <!-- TIMER DE ELABORACION -->
104 <div *ngIf="comanda.estado === 2" class="d-flex justify-content-between align-items-center mt-2"> 111 <div *ngIf="comanda.estado === 2" class="d-flex justify-content-between align-items-center mt-2">
105 <div *ngIf="comanda.estado !== 1"> 112 <div *ngIf="comanda.estado !== 1">
106 <i class="fa fa-utensils text-info" aria-hidden="true"></i> 113 <i class="fa fa-utensils text-info" aria-hidden="true"></i>
107 </div> 114 </div>
108 <span *ngIf="comanda.estado === 1" class="text-dark"> 115 <span *ngIf="comanda.estado === 1" class="text-dark">
109 {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}} 116 {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}}
110 </span> 117 </span>
111 <span *ngIf="comanda.estado !== 1" class="text-white"> 118 <span *ngIf="comanda.estado !== 1" class="text-white">
112 {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}} 119 {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}}
113 </span> 120 </span>
114 <i class="fas fa-clock fa-spin text-info"></i> 121 <i class="fas fa-clock fa-spin text-info"></i>
115 </div> 122 </div>
116 </div> 123 </div>
117 </div> 124 </div>
118 </div> 125 </div>
119 </div> 126 </div>
120 </div> 127 </div>
121 </div> 128 </div>
122 129
src/app/modules/opcion-pedido/opcion-pedido.component.html
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <div class="row mx-0 h-20"> 2 <div class="row mx-0 h-20">
3 <div class="col-12 px-0 h-80 my-auto"> 3 <div class="col-12 px-0 h-80 my-auto">
4 <img 4 <img
5 draggable="false" 5 draggable="false"
6 ondragstart="return false;" 6 ondragstart="return false;"
7 (contextmenu)="false" 7 (contextmenu)="false"
8 class="d-block mx-auto h-100" 8 class="d-block mx-auto h-100"
9 src="assets/img/logo-spot.svg"> 9 src="assets/img/logo-spot.svg">
10 </div> 10 </div>
11 </div> 11 </div>
12 <div class="h-100"> 12 <div class="h-100">
13 <div class="h-10"></div> 13 <div class="h-10"></div>
14 <div class="row mt-5 mx-3 h-auto"> 14 <div class="row mt-5 mx-3 h-auto">
15 <div class="col-12 px-0 py-2 align-self-center"> 15 <div class="col-12 px-0 py-2 align-self-center">
16 <p class="col-auto h4 text-truncate text-center">TU PEDIDO ES PARA</p> 16 <p class="col-auto h4 text-truncate text-center">TU PEDIDO ES PARA</p>
17 </div> 17 </div>
18 </div> 18 </div>
19 <div class="row mt-5 h-auto justify-content-center mx-0"> 19 <div class="row mt-5 h-auto justify-content-center mx-0">
20 <div class="col-5 px-0 h-auto align-self-start reduce-card-1"> 20 <div class="col-5 px-0 h-auto align-self-start reduce-card-1">
21 <div class="row justify-content-between"> 21 <div class="row justify-content-between">
22 <div class="col-12"> 22 <div class="col-12">
23 <div 23 <div
24 class="btn-effect col-12 px-0 bg-white" 24 class="btn-effect col-12 px-0 bg-white"
25 (click)="goTo('/seleccion-articulos'); seleccionPedido('false')"> 25 (click)="goTo('/seleccion-articulos'); seleccionPedido('false')">
26 <div class="row mx-0 bg-primary badge-pill"> 26 <div class="row mx-0 bg-primary badge-pill heigth-80">
27 <div class="col-2 p-0"> 27 <div class="col-2 p-0">
28 <img 28 <img
29 draggable="false" 29 draggable="false"
30 ondragstart="return false;" 30 ondragstart="return false;"
31 (contextmenu)="false" 31 (contextmenu)="false"
32 class="p-1 icon-50" 32 class="pt-3 icon-50"
33 src="assets/img/icono-plato.svg"> 33 src="assets/img/icono-plato.svg">
34 </div> 34 </div>
35 <div class="col-8 align-self-center text-center text-white">comer acá</div> 35 <div class="col-8 align-self-center text-center text-white">comer acá</div>
36 <div class="col-2 align-self-center p-0"> 36 <div class="col-2 align-self-center p-0">
37 <img 37 <img
38 draggable="false" 38 draggable="false"
39 ondragstart="return false;" 39 ondragstart="return false;"
40 (contextmenu)="false" 40 (contextmenu)="false"
41 class="p-1 icon-30" 41 class="p-1 icon-30"
42 src="assets/img/ir.svg"> 42 src="assets/img/ir.svg">
43 </div> 43 </div>
44 </div> 44 </div>
45 </div> 45 </div>
46 </div> 46 </div>
47 </div> 47 </div>
48 </div> 48 </div>
49 </div> 49 </div>
50 <div class="row mt-5 h-auto justify-content-center mx-0"> 50 <div class="row mt-5 h-auto justify-content-center mx-0">
51 <div class="col-5 px-0 h-auto align-self-start reduce-card-2"> 51 <div class="col-5 px-0 h-auto align-self-start reduce-card-2">
52 <div class="row justify-content-between"> 52 <div class="row justify-content-between">
53 <div class="col-12"> 53 <div class="col-12">
54 <div 54 <div
55 class="btn-effect col-12 align-self-center px-0 bg-white" 55 class="btn-effect col-12 align-self-center px-0 bg-white"
56 (click)="goTo('/seleccion-articulos'); seleccionPedido('true')"> 56 (click)="goTo('/seleccion-articulos'); seleccionPedido('true')">
57 <div class="row mx-0 bg-primary badge-pill"> 57 <div class="row mx-0 bg-primary badge-pill heigth-80">
58 <div class="col-2 p-0"> 58 <div class="col-2 p-0">
59 <img 59 <img
60 draggable="false" 60 draggable="false"
61 ondragstart="return false;" 61 ondragstart="return false;"
62 (contextmenu)="false" 62 (contextmenu)="false"
63 class="p-1 icon-50" 63 class="pt-3 icon-50"
64 src="assets/img/icono-take-away.svg"> 64 src="assets/img/icono-take-away.svg">
65 </div> 65 </div>
66 <div class="col-8 align-self-center text-center text-white">para llevar</div> 66 <div class="col-8 align-self-center text-center text-white">para llevar</div>
67 <div class="col-2 align-self-center p-0"> 67 <div class="col-2 align-self-center p-0">
68 <img 68 <img
69 draggable="false" 69 draggable="false"
70 ondragstart="return false;" 70 ondragstart="return false;"
71 (contextmenu)="false" 71 (contextmenu)="false"
72 class="p-1 icon-30" 72 class="p-1 icon-30"
73 src="assets/img/ir.svg"> 73 src="assets/img/ir.svg">
74 </div> 74 </div>
75 </div> 75 </div>
76 </div> 76 </div>
77 </div> 77 </div>
78 </div> 78 </div>
79 </div> 79 </div>
80 </div> 80 </div>
81 </div> 81 </div>
82 </div> 82 </div>
83 83
src/app/modules/opcion-pedido/opcion-pedido.component.scss
1 .reduce-card-1.media-pantalla { 1 .reduce-card-1.media-pantalla {
2 position: absolute; 2 position: absolute;
3 bottom: 150px; 3 bottom: 150px;
4 -webkit-box-flex: 0; 4 -webkit-box-flex: 0;
5 flex: 0 0 41.6666666667%; 5 flex: 0 0 41.6666666667%;
6 max-width: 41.6666666667%; 6 max-width: 41.6666666667%;
7 left: 10%; 7 left: 10%;
8 margin-left: 0 !important; 8 margin-left: 0 !important;
9 } 9 }
10 10
11 .reduce-card-2.media-pantalla { 11 .reduce-card-2.media-pantalla {
12 position: absolute; 12 position: absolute;
13 bottom: 150px; 13 bottom: 150px;
14 -webkit-box-flex: 0; 14 -webkit-box-flex: 0;
15 flex: 0 0 41.6666666667%; 15 flex: 0 0 41.6666666667%;
16 max-width: 41.6666666667%; 16 max-width: 41.6666666667%;
17 right: 10%; 17 right: 10%;
18 margin-right: 0 !important; 18 margin-right: 0 !important;
19 } 19 }
20
21 .heigth-80 {
22 height: 80px;
23 }
20 24