Commit a4b272bda1bf4c992928c59f6bae6f22695144a4
1 parent
76b515f08f
Exists in
develop
and in
1 other branch
elimino ngx-spinner
Showing
3 changed files
with
5 additions
and
5 deletions
Show diff stats
src/app/app.module.ts
1 | import { BrowserModule } from '@angular/platform-browser'; | 1 | import { BrowserModule } from '@angular/platform-browser'; |
2 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; | 2 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; |
3 | import { NgModule } from '@angular/core'; | 3 | import { NgModule } from '@angular/core'; |
4 | import { AppRoutingModule } from './app-routing.module'; | 4 | import { AppRoutingModule } from './app-routing.module'; |
5 | import { HttpClientModule } from '@angular/common/http'; | 5 | import { HttpClientModule } from '@angular/common/http'; |
6 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; | 6 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; |
7 | import { SplitPipe } from './pipes/split.pipe'; | 7 | import { SplitPipe } from './pipes/split.pipe'; |
8 | import { AppComponent } from './app.component'; | 8 | import { AppComponent } from './app.component'; |
9 | import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; | 9 | import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; |
10 | import { AdminComponent } from './modules/admin/admin.component'; | 10 | import { AdminComponent } from './modules/admin/admin.component'; |
11 | import { FooterComponent } from './shared/footer/footer.component'; | 11 | import { FooterComponent } from './shared/footer/footer.component'; |
12 | import { SharedModule } from './modules/shared/shared.module'; | 12 | import { SharedModule } from './modules/shared/shared.module'; |
13 | import { NgxSpinnerModule } from 'ngx-spinner'; | ||
14 | 13 | ||
15 | @NgModule({ | 14 | @NgModule({ |
16 | declarations: [ | 15 | declarations: [ |
17 | AppComponent, | 16 | AppComponent, |
18 | SplashScreenComponent, | 17 | SplashScreenComponent, |
19 | SplitPipe, | 18 | SplitPipe, |
20 | AdminComponent, | 19 | AdminComponent, |
21 | FooterComponent, | 20 | FooterComponent, |
22 | ], | 21 | ], |
23 | imports: [ | 22 | imports: [ |
24 | BrowserModule, | 23 | BrowserModule, |
25 | BrowserAnimationsModule, | 24 | BrowserAnimationsModule, |
26 | AppRoutingModule, | 25 | AppRoutingModule, |
27 | HttpClientModule, | 26 | HttpClientModule, |
28 | FormsModule, | 27 | FormsModule, |
29 | ReactiveFormsModule, | 28 | ReactiveFormsModule, |
30 | ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }), | 29 | ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }), |
31 | SharedModule.forRoot(), | 30 | SharedModule.forRoot(), |
32 | NgxSpinnerModule, | ||
33 | ], | 31 | ], |
34 | bootstrap: [AppComponent] | 32 | bootstrap: [AppComponent] |
35 | }) | 33 | }) |
36 | export class AppModule { } | 34 | export class AppModule { } |
37 | 35 |
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 overflow-scroll"> | 7 | <div class="row flex-fill m-0 overflow-scroll"> |
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 | <p |
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 | <small>{{detalle.DetLar}}</small><br> |
53 | <small>CANT.{{detalle.cantidad}}</small> | 53 | <small>CANT.{{detalle.cantidad}}</small> |
54 | </p> | 54 | </p> |
55 | <blockquote | ||
56 | *ngIf="detalle.comentario"> | ||
57 | <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> | ||
59 | </blockquote> | ||
55 | </div> | 60 | </div> |
56 | <!-- BOTONES --> | 61 | <!-- BOTONES --> |
57 | <button | 62 | <button |
58 | *ngIf="comanda.estado === 1" | 63 | *ngIf="comanda.estado === 1" |
59 | class="btn btn-block btn-primary shadow-sm btn-elaborar" | 64 | class="btn btn-block btn-primary shadow-sm btn-elaborar" |
60 | (click)="updateComanda(comanda, 2, 'En elaboracion')"> | 65 | (click)="updateComanda(comanda, 2, 'En elaboracion')"> |
61 | <div class="row justify-content-between"> | 66 | <div class="row justify-content-between"> |
62 | <div></div> | 67 | <div></div> |
63 | <p class="ml-4" style="color: #fff;">Elaborar</p> | 68 | <p class="ml-4" style="color: #fff;">Elaborar</p> |
64 | <img | 69 | <img |
65 | draggable="false" | 70 | draggable="false" |
66 | ondragstart="return false;" | 71 | ondragstart="return false;" |
67 | (contextmenu)="false" | 72 | (contextmenu)="false" |
68 | class="icon-30 mr-2" | 73 | class="icon-30 mr-2" |
69 | src="assets/img/ir.svg"> | 74 | src="assets/img/ir.svg"> |
70 | </div> | 75 | </div> |
71 | </button> | 76 | </button> |
72 | <button | 77 | <button |
73 | *ngIf="comanda.estado === 2" | 78 | *ngIf="comanda.estado === 2" |
74 | class="btn btn-block shadow-sm btn-terminar" | 79 | class="btn btn-block shadow-sm btn-terminar" |
75 | (click)="updateComanda(comanda, 3, 'Terminado')"> | 80 | (click)="updateComanda(comanda, 3, 'Terminado')"> |
76 | <div class="row justify-content-between"> | 81 | <div class="row justify-content-between"> |
77 | <div></div> | 82 | <div></div> |
78 | <p class="ml-4">Terminar</p> | 83 | <p class="ml-4">Terminar</p> |
79 | <img | 84 | <img |
80 | draggable="false" | 85 | draggable="false" |
81 | ondragstart="return false;" | 86 | ondragstart="return false;" |
82 | (contextmenu)="false" | 87 | (contextmenu)="false" |
83 | class="icon-30 mr-2" | 88 | class="icon-30 mr-2" |
84 | src="assets/img/flecha-borde-color.svg"> | 89 | src="assets/img/flecha-borde-color.svg"> |
85 | </div> | 90 | </div> |
86 | </button> | 91 | </button> |
87 | <button | 92 | <button |
88 | *ngIf="comanda.estado === 2" | 93 | *ngIf="comanda.estado === 2" |
89 | class="btn btn-block btn-deshacer btn-sm shadow-sm p-0" | 94 | class="btn btn-block btn-deshacer btn-sm shadow-sm p-0" |
90 | (click)="updateComanda(comanda, 1, 'Pagado')"> | 95 | (click)="updateComanda(comanda, 1, 'Pagado')"> |
91 | <div class="row justify-content-between"> | 96 | <div class="row justify-content-between"> |
92 | <div></div> | 97 | <div></div> |
93 | <span class="h6 ml-4"><small>Deshacer</small></span> | 98 | <span class="h6 ml-4"><small>Deshacer</small></span> |
94 | <i class="fas fa-undo-alt text-info mr-4 my-auto"></i> | 99 | <i class="fas fa-undo-alt text-info mr-4 my-auto"></i> |
95 | </div> | 100 | </div> |
96 | </button> | 101 | </button> |
97 | </div> | 102 | </div> |
98 | <!-- TIMER DE ELABORACION --> | 103 | <!-- TIMER DE ELABORACION --> |
99 | <div *ngIf="comanda.estado === 2" class="d-flex justify-content-between align-items-center mt-2"> | 104 | <div *ngIf="comanda.estado === 2" class="d-flex justify-content-between align-items-center mt-2"> |
100 | <div *ngIf="comanda.estado !== 1"> | 105 | <div *ngIf="comanda.estado !== 1"> |
101 | <i class="fa fa-utensils text-info" aria-hidden="true"></i> | 106 | <i class="fa fa-utensils text-info" aria-hidden="true"></i> |
102 | </div> | 107 | </div> |
103 | <span *ngIf="comanda.estado === 1" class="text-dark"> | 108 | <span *ngIf="comanda.estado === 1" class="text-dark"> |
104 | {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}} | 109 | {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}} |
105 | </span> | 110 | </span> |
106 | <span *ngIf="comanda.estado !== 1" class="text-white"> | 111 | <span *ngIf="comanda.estado !== 1" class="text-white"> |
107 | {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}} | 112 | {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}} |
108 | </span> | 113 | </span> |
109 | <i class="fas fa-clock fa-spin text-info"></i> | 114 | <i class="fas fa-clock fa-spin text-info"></i> |
110 | </div> | 115 | </div> |
111 | </div> | 116 | </div> |
112 | </div> | 117 | </div> |
113 | </div> | 118 | </div> |
114 | </div> | 119 | </div> |
115 | </div> | 120 | </div> |
116 | </div> | 121 | </div> |
117 | 122 |
src/app/modules/comanda/comanda.component.ts
1 | import { Component, OnInit } from '@angular/core'; | 1 | import { Component, OnInit } from '@angular/core'; |
2 | import { IComanda, IComandaDetalle, IComponente } from 'src/app/interfaces/IComanda'; | 2 | import { IComanda, IComandaDetalle, IComponente } from 'src/app/interfaces/IComanda'; |
3 | import { ComandaService } from 'src/app/services/comanda/comanda.service'; | 3 | import { ComandaService } from 'src/app/services/comanda/comanda.service'; |
4 | import * as _ from 'lodash'; | 4 | import * as _ from 'lodash'; |
5 | import { NgxSpinnerService } from 'ngx-spinner' | ||
6 | 5 | ||
7 | @Component({ | 6 | @Component({ |
8 | selector: 'app-comanda', | 7 | selector: 'app-comanda', |
9 | templateUrl: './comanda.component.html', | 8 | templateUrl: './comanda.component.html', |
10 | styleUrls: ['./comanda.component.scss'] | 9 | styleUrls: ['./comanda.component.scss'] |
11 | }) | 10 | }) |
12 | export class ComandaComponent implements OnInit { | 11 | export class ComandaComponent implements OnInit { |
13 | comandas: IComanda[] = []; | 12 | comandas: IComanda[] = []; |
14 | cicloTime: any; | 13 | cicloTime: any; |
15 | 14 | ||
16 | constructor( | 15 | constructor( |
17 | private comandaService: ComandaService, | 16 | private comandaService: ComandaService, |
18 | private spinnerService: NgxSpinnerService, | ||
19 | ) { } | 17 | ) { } |
20 | 18 | ||
21 | ngOnInit() { | 19 | ngOnInit() { |
22 | this.getComandas(); | 20 | this.getComandas(); |
23 | this.timerGetComandas(); | 21 | this.timerGetComandas(); |
24 | } | 22 | } |
25 | 23 | ||
26 | ngOnDestroy() { | 24 | ngOnDestroy() { |
27 | clearInterval(this.cicloTime); | 25 | clearInterval(this.cicloTime); |
28 | } | 26 | } |
29 | 27 | ||
30 | timerGetComandas() { | 28 | timerGetComandas() { |
31 | this.cicloTime = setInterval(() => { | 29 | this.cicloTime = setInterval(() => { |
32 | this.getComandas(); | 30 | this.getComandas(); |
33 | }, 5000); | 31 | }, 5000); |
34 | } | 32 | } |
35 | 33 | ||
36 | getComandas() { | 34 | getComandas() { |
37 | this.comandaService.getAll() | 35 | this.comandaService.getAll() |
38 | .subscribe((resComandas: IComanda[]) => { | 36 | .subscribe((resComandas: IComanda[]) => { |
39 | this.addNewComandas(resComandas); | 37 | this.addNewComandas(resComandas); |
40 | }, e => console.error(e)); | 38 | }, e => console.error(e)); |
41 | } | 39 | } |
42 | 40 | ||
43 | addNewComandas(resComandas: IComanda[]) { | 41 | addNewComandas(resComandas: IComanda[]) { |
44 | for (let j = 0; j < resComandas.length; j++) { | 42 | for (let j = 0; j < resComandas.length; j++) { |
45 | for (let i = 0; i < this.comandas.length; i++) { | 43 | for (let i = 0; i < this.comandas.length; i++) { |
46 | if (this.comandas[i].id === resComandas[j].id) { | 44 | if (this.comandas[i].id === resComandas[j].id) { |
47 | resComandas.splice(j, 1); | 45 | resComandas.splice(j, 1); |
48 | } | 46 | } |
49 | } | 47 | } |
50 | } | 48 | } |
51 | if (!resComandas.length) return; | 49 | if (!resComandas.length) return; |
52 | Array.prototype.push.apply(this.comandas, resComandas); | 50 | Array.prototype.push.apply(this.comandas, resComandas); |
53 | this.startTimersPedido(resComandas); | 51 | this.startTimersPedido(resComandas); |
54 | } | 52 | } |
55 | 53 | ||
56 | updateComanda(comanda: IComanda, estadoNuevo: number, observacionNueva: string) { | 54 | updateComanda(comanda: IComanda, estadoNuevo: number, observacionNueva: string) { |
57 | let data = { | 55 | let data = { |
58 | idComanda: comanda.id, | 56 | idComanda: comanda.id, |
59 | estado: estadoNuevo, | 57 | estado: estadoNuevo, |
60 | observacion: observacionNueva, | 58 | observacion: observacionNueva, |
61 | tiempoEspera: `${comanda.hoursPedido}:${comanda.secondsPedido}:${comanda.secondsPedido}`, | 59 | tiempoEspera: `${comanda.hoursPedido}:${comanda.secondsPedido}:${comanda.secondsPedido}`, |
62 | tiempoElaboracion: `${comanda.hoursElaboracion}:${comanda.secondsElaboracion}:${comanda.secondsElaboracion}`, | 60 | tiempoElaboracion: `${comanda.hoursElaboracion}:${comanda.secondsElaboracion}:${comanda.secondsElaboracion}`, |
63 | } | 61 | } |
64 | if (data.estado == 3) { | 62 | if (data.estado == 3) { |
65 | this.comandaService.imprimirComandaCocina(parseInt(data.idComanda)) | 63 | this.comandaService.imprimirComandaCocina(parseInt(data.idComanda)) |
66 | .subscribe(res => { }, err => console.error(err) | 64 | .subscribe(res => { }, err => console.error(err) |
67 | ); | 65 | ); |
68 | } | 66 | } |
69 | 67 | ||
70 | if (estadoNuevo !== 2) comanda.detalles.forEach(d => d.seeDetalle = false); | 68 | if (estadoNuevo !== 2) comanda.detalles.forEach(d => d.seeDetalle = false); |
71 | 69 | ||
72 | this.comandaService.update(data) | 70 | this.comandaService.update(data) |
73 | .subscribe((res: any) => { | 71 | .subscribe((res: any) => { |
74 | if (res.data) { | 72 | if (res.data) { |
75 | comanda.estado = estadoNuevo; | 73 | comanda.estado = estadoNuevo; |
76 | comanda.observacion = observacionNueva; | 74 | comanda.observacion = observacionNueva; |
77 | if (estadoNuevo == 2) { | 75 | if (estadoNuevo == 2) { |
78 | this.startTimerElaboracion(comanda); | 76 | this.startTimerElaboracion(comanda); |
79 | } else if (comanda.timerElaboracion) { | 77 | } else if (comanda.timerElaboracion) { |
80 | clearInterval(comanda.timerElaboracion) | 78 | clearInterval(comanda.timerElaboracion) |
81 | } | 79 | } |
82 | } | 80 | } |
83 | }, e => console.error(e)); | 81 | }, e => console.error(e)); |
84 | } | 82 | } |
85 | 83 | ||
86 | rellenar(relleno, longitud) { | 84 | rellenar(relleno, longitud) { |
87 | relleno = '' + relleno; | 85 | relleno = '' + relleno; |
88 | while (relleno.length < longitud) { | 86 | while (relleno.length < longitud) { |
89 | relleno = '0' + relleno; | 87 | relleno = '0' + relleno; |
90 | } | 88 | } |
91 | return relleno; | 89 | return relleno; |
92 | } | 90 | } |
93 | 91 | ||
94 | toggleVerComponentes(detalle: IComandaDetalle, comanda: IComanda) { | 92 | toggleVerComponentes(detalle: IComandaDetalle, comanda: IComanda) { |
95 | detalle.seeDetalle = !detalle.seeDetalle; | 93 | detalle.seeDetalle = !detalle.seeDetalle; |
96 | } | 94 | } |
97 | 95 | ||
98 | hasTipo(componentes: IComponente[]) { | 96 | hasTipo(componentes: IComponente[]) { |
99 | return componentes.some(c => c.tipoArticulo === 6); | 97 | return componentes.some(c => c.tipoArticulo === 6); |
100 | } | 98 | } |
101 | 99 | ||
102 | //#region TIMERS | 100 | //#region TIMERS |
103 | startTimersPedido(comandas) { | 101 | startTimersPedido(comandas) { |
104 | comandas.forEach((comanda: IComanda) => { | 102 | comandas.forEach((comanda: IComanda) => { |
105 | this.comandaService.startTimerComanda(comanda, 'Pedido'); | 103 | this.comandaService.startTimerComanda(comanda, 'Pedido'); |
106 | if (comanda.estado === 2) { | 104 | if (comanda.estado === 2) { |
107 | this.startTimerElaboracion(comanda); | 105 | this.startTimerElaboracion(comanda); |
108 | } | 106 | } |
109 | }); | 107 | }); |
110 | } | 108 | } |
111 | 109 | ||
112 | startTimerElaboracion(comanda: IComanda) { | 110 | startTimerElaboracion(comanda: IComanda) { |
113 | this.spinnerService.show(comanda.id.toString()); | ||
114 | this.comandaService.startTimerComanda(comanda, 'Elaboracion'); | 111 | this.comandaService.startTimerComanda(comanda, 'Elaboracion'); |
115 | } | 112 | } |
116 | //#endregion | 113 | //#endregion |
117 | 114 | ||
118 | } | 115 | } |
119 | 116 |