Marcelo Puebla / autoservicio-axion

Download as
Browse Code »

Commit 95fc8f9a1ca513f9c2d84131b4c412d9fc59e41e

Authored by Benjamin Rodriguez
1 parent efd813e47c
Exists in develop

pantalla comandas fase beta

Showing 13 changed files with 453 additions and 0 deletions   Show diff stats
... ... @@ -8383,6 +8383,14 @@
8383 8383 "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-5.2.0.tgz",
8384 8384 "integrity": "sha512-fh+OmaEdxCZnVLQFLqexdw4Xv0Lp2Ueq7un52gF26lTENhTAypGWgf2c92HXzbp4W/B0tnwIZ9mzQPwdDMH91w=="
8385 8385 },
  8386 + "ngx-spinner": {
  8387 + "version": "8.1.0",
  8388 + "resolved": "https://registry.npmjs.org/ngx-spinner/-/ngx-spinner-8.1.0.tgz",
  8389 + "integrity": "sha512-VtIcKsxe+cNj9zCelNesSJZ/xarjxKL86GQG9h4JM++/Hf7HUJtPDBWXZ6lBk0CpgWdJ4++XX3aeOntI92ApEw==",
  8390 + "requires": {
  8391 + "tslib": "^1.9.0"
  8392 + }
  8393 + },
8386 8394 "nice-try": {
8387 8395 "version": "1.0.5",
8388 8396 "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
... ... @@ -30,6 +30,7 @@
30 30 "jquery": "^3.4.1",
31 31 "js-sha256": "^0.9.0",
32 32 "ngx-bootstrap": "^5.2.0",
  33 + "ngx-spinner": "^8.1.0",
33 34 "popper.js": "^1.16.0",
34 35 "rxjs": "~6.4.0",
35 36 "tslib": "^1.10.0",
src/app/app-routing.module.ts
Diff comments   View file @ 95fc8f9
... ... @@ -47,6 +47,10 @@ const routes: Routes = [
47 47 path: 'pedidos-salientes',
48 48 loadChildren: () => import('./modules/pedidos-salientes/pedidos-salientes.module').then(m => m.PedidosSalientesModule)
49 49 },
  50 + {
  51 + path: 'comanda',
  52 + loadChildren: () => import('./modules/comanda/comanda.module').then(m => m.ComandaModule)
  53 + },
50 54 { path: '**', redirectTo: '', pathMatch: 'full' },
51 55 ];
52 56  
src/app/app.module.ts
Diff comments   View file @ 95fc8f9
... ... @@ -10,6 +10,7 @@ import { SplashScreenComponent } from './modules/splash-screen/splash-screen.com
10 10 import { AdminComponent } from './modules/admin/admin.component';
11 11 import { FooterComponent } from './shared/footer/footer.component';
12 12 import { SharedModule } from './modules/shared/shared.module';
  13 +import { NgxSpinnerModule } from "ngx-spinner";
13 14  
14 15 @NgModule({
15 16 declarations: [
... ... @@ -28,6 +29,7 @@ import { SharedModule } from './modules/shared/shared.module';
28 29 ReactiveFormsModule,
29 30 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
30 31 SharedModule.forRoot(),
  32 + NgxSpinnerModule,
31 33 ],
32 34 bootstrap: [AppComponent]
33 35 })
src/app/interfaces/IComanda.ts
Diff comments   View file @ 95fc8f9
... ... @@ -0,0 +1,34 @@
  1 +export interface IComanda {
  2 + id: string;
  3 + estado: number;
  4 + observacion: string;
  5 + pedidoAnombreDe: string;
  6 + paraLlevar: boolean;
  7 + detalles: IComandaDetalle[];
  8 + timerElaboracion?: any;
  9 + secondsElaboracion?: any;
  10 + hoursElaboracion?: any;
  11 + secondsPedido?: any;
  12 + hoursPedido?: any;
  13 +}
  14 +
  15 +export interface IComandaDetalle {
  16 + DetLar: string;
  17 + CodArt: number;
  18 + CodSec: number;
  19 + cantidad: number;
  20 + idArticulo: number;
  21 + componentes: IComponente[];
  22 + seeDetalle?: boolean;
  23 +}
  24 +
  25 +export interface IComponente {
  26 + CodArt: number;
  27 + CodSec: number;
  28 + DetArt: string;
  29 + esSustraible: number;
  30 + esAdicionable: number;
  31 + tipoArticulo: number;
  32 + cantidadSeleccionada: number;
  33 + importeAdicional: number;
  34 +}
src/app/modules/comanda/comanda-routing.module.ts
Diff comments   View file @ 95fc8f9
... ... @@ -0,0 +1,14 @@
  1 +import { NgModule } from '@angular/core';
  2 +import { Routes, RouterModule } from '@angular/router';
  3 +import { ComandaComponent } from './comanda.component';
  4 +
  5 +
  6 +const routes: Routes = [
  7 + { path: '', component: ComandaComponent }
  8 +];
  9 +
  10 +@NgModule({
  11 + imports: [RouterModule.forChild(routes)],
  12 + exports: [RouterModule]
  13 +})
  14 +export class ComandaRoutingModule { }
src/app/modules/comanda/comanda.component.html
Diff comments   View file @ 95fc8f9
... ... @@ -0,0 +1,83 @@
  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">
  3 + <div class="col-12">
  4 + <p class="m-0 h2 text-center">Pedidos a elaborar</p>
  5 + </div>
  6 + </div>
  7 +
  8 + <div class="row flex-fill m-0 overflow-scroll">
  9 + <div class="col-12 px-2">
  10 + <div class="card-columns h-100 m-1 fade-in disable-user-select">
  11 + <div
  12 + *ngFor="let comanda of comandas"
  13 + class="card fade-in rounded-xs shadow-sm"
  14 + [ngClass]="{
  15 + 'bg-light': comanda.estado === 1,
  16 + 'bg-danger': comanda.estado === 2,
  17 + 'bg-success swing-out-top-bck': comanda.estado === 3
  18 + }">
  19 + <div class="card-body p-2">
  20 + <div class="row justify-content-between">
  21 + <img
  22 + src="../../../assets/img/icono-take-away.svg"
  23 + class="w-25 h-25 float-left ml-0 mt-n3"
  24 + *ngIf="comanda.paraLlevar == true">
  25 + <div></div>
  26 + <!-- NUMERO DE PEDIDO -->
  27 + <p class="h1 text-right mr-3">
  28 + {{rellenar(comanda.id.toString().slice(0), 3)}}
  29 + </p>
  30 + </div>
  31 + <div>
  32 + <!-- PEDIDO A NOMBRE DE -->
  33 + <p class="text-center m-0">
  34 + {{comanda.pedidoAnombreDe ? comanda.pedidoAnombreDe.toUpperCase() : ''}}
  35 + </p>
  36 + <!-- TIMER PEDIDO -->
  37 + <div class="d-flex justify-content-between align-items-center mt-2">
  38 + <p><i class="fas fa-user-clock"></i></p>
  39 + <p class="text-center mb-1">
  40 + {{comanda.hoursPedido}}:{{comanda.minutesPedido}}:{{comanda.secondsPedido}}
  41 + </p>
  42 + <p><i class="far fa-clock fa-spin"></i></p>
  43 + </div>
  44 + <div *ngFor="let detalle of comanda.detalles">
  45 + <p
  46 + class="card-text border-top pt-2 mb-2"
  47 + [ngClass]="
  48 + {
  49 + 'border-secondary': comanda.estado === 1,
  50 + 'border-light': comanda.estado != 1
  51 + }">
  52 + <!-- DETALLE Y CANTIDAD -->
  53 + <small>{{detalle.DetLar}}</small><br>
  54 + <small>CANT.{{detalle.cantidad}}</small>
  55 + </p>
  56 + </div>
  57 + <!-- BOTONES -->
  58 + <button
  59 + *ngIf="comanda.estado === 1"
  60 + class="btn btn-block btn-primary shadow-sm"
  61 + (click)="updateComanda(comanda, 2, 'En elaboracion')">
  62 + Elaborar
  63 + </button>
  64 + <button
  65 + *ngIf="comanda.estado === 2"
  66 + class="btn btn-block btn-success shadow-sm"
  67 + (click)="updateComanda(comanda, 3, 'Terminado')">
  68 + Terminar
  69 + </button>
  70 + <button
  71 + *ngIf="comanda.estado === 2"
  72 + class="btn btn-block btn-light btn-sm shadow-sm p-0"
  73 + (click)="updateComanda(comanda, 1, 'Pagado')">
  74 + <span class="pr-2 h6"><small>Deshacer</small></span>
  75 + <i class="fa fa-undo text-warning" aria-hidden="true"></i>
  76 + </button>
  77 + </div>
  78 + </div>
  79 + </div>
  80 + </div>
  81 + </div>
  82 + </div>
  83 +</div>
0 84 \ No newline at end of file
src/app/modules/comanda/comanda.component.scss
Diff comments   View file @ 95fc8f9
... ... @@ -0,0 +1,150 @@
  1 +@media (min-width: 1200px) {
  2 + .col-1-5 {
  3 + flex: 0 0 12.5%;
  4 + max-width: 12.5%;
  5 + position: relative;
  6 + width: 100%;
  7 + padding-right: 15px;
  8 + padding-left: 15px;
  9 + }
  10 +}
  11 +
  12 +@media (min-width: 1200px) {
  13 + .card-columns {
  14 + column-count: 5 !important;
  15 + column-gap: 0.5rem !important;
  16 + }
  17 +}
  18 +
  19 +@media (max-width: 1200px) {
  20 + .card-columns {
  21 + column-count: 4 !important;
  22 + column-gap: 0.5rem !important;
  23 + }
  24 +}
  25 +
  26 +@media (max-width: 768px) {
  27 + .card-columns {
  28 + column-count: 3 !important;
  29 + column-gap: 0.5rem !important;
  30 + }
  31 +}
  32 +
  33 +.bg-danger {
  34 + transition: 0.2s;
  35 + background-color: #aa006b !important;
  36 + p {
  37 + color: #fff;
  38 + }
  39 +}
  40 +
  41 +.bg-success {
  42 + transition: 0.2s;
  43 + background-color: #EEEEF0 !important;
  44 + p {
  45 + color: #fff;
  46 + }
  47 +}
  48 +
  49 +.bg-light {
  50 + transition: 0.2s;
  51 + background-color: white !important;
  52 + p {
  53 + color: #212529;
  54 + }
  55 +}
  56 +
  57 +.bg-dark-red {
  58 + background-color: #670006 !important;
  59 + p {
  60 + color: white;
  61 + }
  62 +}
  63 +
  64 +.btn.primary {
  65 + border-radius: 15px;
  66 +}
  67 +
  68 +.btn.success {
  69 + background-color: #EEEEF0;
  70 +}
  71 +
  72 +.rounded-xs {
  73 + border-radius: 0.5rem;
  74 +}
  75 +
  76 +.card-comanda {
  77 + min-height: 250px;
  78 +}
  79 +
  80 +.swing-out-top-bck {
  81 + -webkit-animation: swing-out-top-bck 0.45s
  82 + cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s both;
  83 + animation: swing-out-top-bck 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s
  84 + both;
  85 +}
  86 +
  87 +@-webkit-keyframes swing-out-top-bck {
  88 + 0% {
  89 + -webkit-transform: rotateX(0deg);
  90 + transform: rotateX(0deg);
  91 + -webkit-transform-origin: top;
  92 + transform-origin: top;
  93 + opacity: 1;
  94 + }
  95 + 75% {
  96 + -webkit-transform: rotateX(-100deg);
  97 + transform: rotateX(-100deg);
  98 + -webkit-transform-origin: top;
  99 + transform-origin: top;
  100 + }
  101 + 100% {
  102 + -webkit-transform: rotateX(-100deg);
  103 + transform: rotateX(-100deg);
  104 + -webkit-transform-origin: top;
  105 + transform-origin: top;
  106 + opacity: 0;
  107 + display: none;
  108 + position: absolute;
  109 + }
  110 +}
  111 +
  112 +@keyframes swing-out-top-bck {
  113 + 0% {
  114 + -webkit-transform: rotateX(0deg);
  115 + transform: rotateX(0deg);
  116 + -webkit-transform-origin: top;
  117 + transform-origin: top;
  118 + opacity: 1;
  119 + }
  120 + 75% {
  121 + -webkit-transform: rotateX(-100deg);
  122 + transform: rotateX(-100deg);
  123 + -webkit-transform-origin: top;
  124 + transform-origin: top;
  125 + }
  126 + 100% {
  127 + -webkit-transform: rotateX(-100deg);
  128 + transform: rotateX(-100deg);
  129 + -webkit-transform-origin: top;
  130 + transform-origin: top;
  131 + opacity: 0;
  132 + display: none;
  133 + position: absolute;
  134 + }
  135 +}
  136 +
  137 +blockquote p::before,
  138 +blockquote p::after {
  139 + content: "“";
  140 + font-family: Georgia;
  141 + font-size: 40px;
  142 + margin: -10px 0 0 -20px !important;
  143 + position: absolute;
  144 + opacity: 0.5;
  145 +}
  146 +
  147 +blockquote p::after {
  148 + content: "”";
  149 + margin: -5px 0 0 4px !important;
  150 +}
0 151 \ No newline at end of file
src/app/modules/comanda/comanda.component.spec.ts
Diff comments   View file @ 95fc8f9
... ... @@ -0,0 +1,25 @@
  1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 +
  3 +import { ComandaComponent } from './comanda.component';
  4 +
  5 +describe('ComandaComponent', () => {
  6 + let component: ComandaComponent;
  7 + let fixture: ComponentFixture<ComandaComponent>;
  8 +
  9 + beforeEach(async(() => {
  10 + TestBed.configureTestingModule({
  11 + declarations: [ ComandaComponent ]
  12 + })
  13 + .compileComponents();
  14 + }));
  15 +
  16 + beforeEach(() => {
  17 + fixture = TestBed.createComponent(ComandaComponent);
  18 + component = fixture.componentInstance;
  19 + fixture.detectChanges();
  20 + });
  21 +
  22 + it('should create', () => {
  23 + expect(component).toBeTruthy();
  24 + });
  25 +});
src/app/modules/comanda/comanda.component.ts
Diff comments   View file @ 95fc8f9
... ... @@ -0,0 +1,84 @@
  1 +import { Component, OnInit } from '@angular/core';
  2 +import { IComanda, IComandaDetalle, IComponente } from 'src/app/interfaces/IComanda';
  3 +import { ComandaService } from 'src/app/services/comanda/comanda.service';
  4 +import * as _ from 'lodash';
  5 +
  6 +@Component({
  7 + selector: 'app-comanda',
  8 + templateUrl: './comanda.component.html',
  9 + styleUrls: ['./comanda.component.scss']
  10 +})
  11 +export class ComandaComponent implements OnInit {
  12 + comandas: IComanda[] = [];
  13 + cicloTime: any;
  14 +
  15 + constructor(
  16 + private comandaService: ComandaService,
  17 + ) { }
  18 +
  19 + ngOnInit() {
  20 + this.getComandas();
  21 + }
  22 +
  23 + getComandas() {
  24 + this.comandaService.getAll()
  25 + .subscribe((resComandas: IComanda[]) => {
  26 + console.log(resComandas)
  27 + this.addNewComandas(resComandas);
  28 + }, e => console.error(e));
  29 + }
  30 +
  31 + addNewComandas(resComandas: IComanda[]) {
  32 + for (let j = 0; j < resComandas.length; j++) {
  33 + for (let i = 0; i < this.comandas.length; i++) {
  34 + if (this.comandas[i].id === resComandas[j].id) {
  35 + resComandas.splice(j, 1);
  36 + }
  37 + }
  38 + }
  39 + if (!resComandas.length) return;
  40 + Array.prototype.push.apply(this.comandas, resComandas);
  41 + // this.startTimersPedido(resComandas);
  42 + }
  43 +
  44 + updateComanda(comanda: IComanda, estadoNuevo: number, observacionNueva: string) {
  45 + let data = {
  46 + idComanda: comanda.id,
  47 + estado: estadoNuevo,
  48 + observacion: observacionNueva,
  49 + tiempoEspera: `${comanda.hoursPedido}:${comanda.secondsPedido}:${comanda.secondsPedido}`,
  50 + tiempoElaboracion: `${comanda.hoursElaboracion}:${comanda.secondsElaboracion}:${comanda.secondsElaboracion}`,
  51 + }
  52 + if (data.estado == 3) {
  53 + this.comandaService.imprimirComandaCocina(parseInt(data.idComanda))
  54 + .subscribe(res => { }, err => console.error(err)
  55 + );
  56 + }
  57 + if (estadoNuevo !== 2) comanda.detalles.forEach(d => d.seeDetalle = false);
  58 +
  59 + this.comandaService.update(data)
  60 + .subscribe((res: any) => {
  61 + if (res.data) {
  62 + comanda.estado = estadoNuevo;
  63 + comanda.observacion = observacionNueva;
  64 + }
  65 + }, e => console.error(e));
  66 + }
  67 +
  68 + rellenar(relleno, longitud) {
  69 + relleno = '' + relleno;
  70 + while (relleno.length < longitud) {
  71 + relleno = '0' + relleno;
  72 + }
  73 + return relleno;
  74 + }
  75 +
  76 + toggleVerComponentes(detalle: IComandaDetalle, comanda: IComanda) {
  77 + detalle.seeDetalle = !detalle.seeDetalle;
  78 + }
  79 +
  80 + hasTipo(componentes: IComponente[]) {
  81 + return componentes.some(c => c.tipoArticulo == 6);
  82 + }
  83 +
  84 +}
src/app/modules/comanda/comanda.module.ts
Diff comments   View file @ 95fc8f9
... ... @@ -0,0 +1,15 @@
  1 +import { NgModule } from '@angular/core';
  2 +import { CommonModule } from '@angular/common';
  3 +
  4 +import { ComandaRoutingModule } from './comanda-routing.module';
  5 +import { ComandaComponent } from './comanda.component';
  6 +
  7 +
  8 +@NgModule({
  9 + declarations: [ComandaComponent],
  10 + imports: [
  11 + CommonModule,
  12 + ComandaRoutingModule
  13 + ]
  14 +})
  15 +export class ComandaModule { }
src/app/services/comanda/comanda.service.ts
Diff comments   View file @ 95fc8f9
1 1 import { Injectable } from '@angular/core';
2 2 import { HttpClient } from "@angular/common/http";
3 3 import { APP_SETTINGS } from "src/etc/AppSettings";
  4 +import { IComanda } from 'src/app/interfaces/IComanda';
4 5  
5 6 @Injectable({
6 7 providedIn: 'root'
... ... @@ -16,8 +17,40 @@ export class ComandaService {
16 17 return this.http.get(`${this.urlDeboSuite}/comandas/pendientes-entrega`);
17 18 }
18 19  
  20 + update(data: object) {
  21 + return this.http.post(`${this.urlDeboSuite}/comandas/update`, { data: data });
  22 + }
  23 +
19 24 getAll() {
20 25 return this.http.get(`${this.urlDeboSuite}/comandas`);
21 26 }
22 27  
  28 + imprimirComandaCocina(idComanda: number) {
  29 + return this.http.get(`${this.urlDeboSuite}/comandas/imprimir/${idComanda}`);
  30 + }
  31 +
  32 + startTimerComanda(comanda: IComanda, tipo: string) {
  33 + let hours = 0;
  34 + let minutes = 0;
  35 + let seconds = 0;
  36 + comanda[`hours${tipo}`] = '0';
  37 + comanda[`seconds${tipo}`] = comanda[`minutes${tipo}`] = '00';
  38 + comanda[`timer${tipo}`] = setInterval(() => {
  39 + seconds++;
  40 + comanda[`seconds${tipo}`] = seconds < 10 ? `0${seconds}` : seconds.toString();
  41 + if (seconds === 60) {
  42 + minutes++;
  43 + comanda[`minutes${tipo}`] = minutes < 10 ? `0${minutes}` : minutes.toString();
  44 + seconds = 0;
  45 + comanda[`seconds${tipo}`] = '00';
  46 + }
  47 + if (minutes === 60) {
  48 + hours++;
  49 + minutes = 0;
  50 + comanda[`hours${tipo}`] = hours.toString();
  51 + comanda[`minutes${tipo}`] = '00';
  52 + }
  53 + }, 1000);
  54 + }
  55 +
23 56 }
src/assets/img/logodebogris.png
Diff comments   View file @ 95fc8f9

26.1 KB