Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit 3d2cc674eb4ae0476c4a18af333ee0bbebe458f3

Authored by Eric Fernandez
2 parents 68c833dfe7 c089b935a9
Exists in master and in 1 other branch validar_pve

Merge branch 'master' into 'master' 

Master(mpuebla)

See merge request !86
Showing 9 changed files   Show diff stats
1 { 1 {
2 "name": "autoservicio", 2 "name": "autoservicio",
3 "version": "0.0.0", 3 "version": "0.0.0",
4 "scripts": { 4 "scripts": {
5 "ng": "ng", 5 "ng": "ng",
6 "start": "ng serve", 6 "start": "ng serve",
7 "build": "ng build", 7 "build": "ng build",
8 "test": "ng test", 8 "test": "ng test",
9 "lint": "ng lint", 9 "lint": "ng lint",
10 "e2e": "ng e2e" 10 "e2e": "ng e2e"
11 }, 11 },
12 "private": true, 12 "private": true,
13 "dependencies": { 13 "dependencies": {
14 "@angular/animations": "^8.2.3", 14 "@angular/animations": "^8.2.3",
15 "@angular/cdk": "^8.1.3", 15 "@angular/cdk": "^8.1.3",
16 "@angular/common": "~8.0.0", 16 "@angular/common": "~8.0.0",
17 "@angular/compiler": "~8.0.0", 17 "@angular/compiler": "~8.0.0",
18 "@angular/core": "~8.0.0", 18 "@angular/core": "~8.0.0",
19 "@angular/forms": "~8.0.0", 19 "@angular/forms": "~8.0.0",
20 "@angular/material": "^8.1.3", 20 "@angular/material": "^8.1.3",
21 "@angular/platform-browser": "~8.0.0", 21 "@angular/platform-browser": "~8.0.0",
22 "@angular/platform-browser-dynamic": "~8.0.0", 22 "@angular/platform-browser-dynamic": "~8.0.0",
23 "@angular/router": "~8.0.0", 23 "@angular/router": "~8.0.0",
24 "@ngx-material-keyboard/core": "^0.1.1", 24 "@ngx-material-keyboard/core": "^0.1.1",
25 "bootstrap": "^4.3.1", 25 "bootstrap": "^4.3.1",
26 "font-awesome": "^4.7.0", 26 "font-awesome": "^4.7.0",
27 "jquery": "^1.12.4", 27 "jquery": "^1.12.4",
28 "lodash": "^4.17.15", 28 "lodash": "^4.17.15",
29 "material-design-icons": "^3.0.1", 29 "material-design-icons": "^3.0.1",
30 "ngx-bootstrap": "^5.1.1", 30 "ngx-bootstrap": "^5.1.1",
31 "popper.js": "^1.15.0", 31 "popper.js": "^1.15.0",
32 "rxjs": "~6.4.0", 32 "rxjs": "~6.4.0",
33 "rxjs-compat": "^6.5.2", 33 "rxjs-compat": "^6.5.2",
34 "simple-keyboard": "^2.26.2", 34 "simple-keyboard": "^2.26.2",
35 "tslib": "^1.9.0", 35 "tslib": "^1.9.0",
36 "zone.js": "~0.9.1" 36 "zone.js": "~0.9.1"
37 }, 37 },
38 "devDependencies": { 38 "devDependencies": {
39 "@angular-devkit/build-angular": "~0.800.0", 39 "@angular-devkit/build-angular": "~0.800.0",
40 "@angular/cli": "~8.0.0", 40 "@angular/cli": "^8.3.2",
41 "@angular/compiler-cli": "~8.0.0", 41 "@angular/compiler-cli": "~8.0.0",
42 "@angular/language-service": "~8.0.0", 42 "@angular/language-service": "~8.0.0",
43 "@types/jasmine": "~3.3.8", 43 "@types/jasmine": "~3.3.8",
44 "@types/jasminewd2": "~2.0.3", 44 "@types/jasminewd2": "~2.0.3",
45 "@types/lodash": "^4.14.138", 45 "@types/lodash": "^4.14.138",
46 "@types/node": "~8.9.4", 46 "@types/node": "~8.9.4",
47 "codelyzer": "^5.0.0", 47 "codelyzer": "^5.0.0",
48 "jasmine-core": "~3.4.0", 48 "jasmine-core": "~3.4.0",
49 "jasmine-spec-reporter": "~4.2.1", 49 "jasmine-spec-reporter": "~4.2.1",
50 "karma": "~4.1.0", 50 "karma": "~4.1.0",
51 "karma-chrome-launcher": "~2.2.0", 51 "karma-chrome-launcher": "~2.2.0",
52 "karma-coverage-istanbul-reporter": "~2.0.1", 52 "karma-coverage-istanbul-reporter": "~2.0.1",
53 "karma-jasmine": "~2.0.1", 53 "karma-jasmine": "~2.0.1",
54 "karma-jasmine-html-reporter": "^1.4.0", 54 "karma-jasmine-html-reporter": "^1.4.0",
55 "protractor": "~5.4.0", 55 "protractor": "~5.4.0",
56 "ts-node": "~7.0.0", 56 "ts-node": "~7.0.0",
57 "tslint": "~5.15.0", 57 "tslint": "~5.15.0",
58 "typescript": "~3.4.3" 58 "typescript": "~3.4.3"
59 } 59 }
60 } 60 }
61 61
src/app/components/comanda/comanda.component.html
Diff comments   View file @ 3d2cc67
1 <div class="container-fluid fade-in 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="card-columns m-1 fade-in disable-user-select">
3 <div 3 <div
4 [ngClass]="{ 'swing-out-top-bck': comanda.estado === 3 }" 4 *ngFor="let comanda of comandas"
5 class="col-2 col-1-5 p-1" *ngFor="let comanda of comandas"> 5 class="card fade-in rounded-xs shadow-sm"
6 6 [ngClass]="{
7 <div 7 'bg-light': comanda.estado === 1,
8 class="card-comanda fade-in d-flex align-items-end flex-column bg-danger rounded-xs shadow-sm border-0 h-100" 8 'bg-danger': comanda.estado === 2,
9 [ngClass]=" 9 'bg-success swing-out-top-bck': comanda.estado === 3
10 { 10 }">
11 'bg-light': comanda.estado === 1, 11 <div class="card-body p-2">
12 'bg-danger': comanda.estado === 2, 12 <p class="h5 card-title text-center mb-1">{{comanda.id}}.</p>
13 'bg-success': comanda.estado === 3 13 <p
14 }"> 14 *ngFor="let detalle of comanda.detalles"
15 <img 15 [ngClass]="
16 class="card-img-top rounded-xs shadow-sm" 16 {
17 src="{{apiImagenes}}/imagenes/{{comanda.detalles[0].articulo.imagenes[0].imagen}}"/> 17 'border-secondary': comanda.estado === 1,
18 <div class="row w-100 m-0 mt-2"> 18 'border-light': comanda.estado != 1
19 <p class="col-12 px-2 mb-2 m-0 h6">{{comanda.detalles[0].articulo.DetArt}}</p> 19 }"
20 <p class="col-12 px-2 mb-2 m-0 h6"><small>{{comanda.detalles[0].articulo.DET_LAR}}</small></p> 20 class="card-text border-top pt-2 mb-2">
21 </div> 21 <small>
22 <div class="row w-100 m-0 mb-2 mt-auto"> 22 {{detalle.articulo.DET_LAR}}
23 <div 23 </small>
24 class="col-12 px-2" 24 <small
25 *ngIf="comanda.estado === 1"> 25 class="font-weight-bold text-purple"
26 <button 26 *ngIf="detalle.articulo.ELBPRO === '1'">
27 class="btn btn-block btn-danger shadow-sm" 27 (ELABORACIÓN PROPIA)
28 (click)="updateComanda(comanda, 2, 'En elaboracion')"> 28 </small>
29 Elaborar 29 </p>
30 </button> 30 <button
31 </div> 31 *ngIf="comanda.estado === 1"
32 <div 32 class="btn btn-block btn-danger shadow-sm"
33 class="col-12 px-2" 33 (click)="updateComanda(comanda, 2, 'En elaboracion')">
34 *ngIf="comanda.estado === 2"> 34 Elaborar
35 <button 35 </button>
36 class="btn btn-block btn-success shadow-sm" 36 <button
37 (click)="updateComanda(comanda, 3, 'Terminado')">
38 Terminado
39 </button>
40 </div>
41 </div>
42 <div
43 *ngIf="comanda.estado === 2" 37 *ngIf="comanda.estado === 2"
44 class="row w-100 mx-0 mb-2"> 38 class="btn btn-block btn-success shadow-sm"
45 <div class="col-12 px-2"> 39 (click)="updateComanda(comanda, 3, 'Terminado')">
46 <button 40 Terminado
47 class="btn btn-block btn-light btn-sm shadow-sm p-0" 41 </button>
48 (click)="updateComanda(comanda, 1, 'Pagado')"> 42 <button
49 <span class="pr-1 h6"><small>En espera</small></span> 43 *ngIf="comanda.estado === 2"
50 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 44 class="btn btn-block btn-light btn-sm shadow-sm p-0"
51 </button> 45 (click)="updateComanda(comanda, 1, 'Pagado')">
52 </div> 46 <span class="pr-1 h6"><small>En espera</small></span>
53 </div> 47 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
48 </button>
54 </div> 49 </div>
55
56 </div> 50 </div>
57 </div> 51 </div>
58 </div> 52 </div>
src/app/components/comanda/comanda.component.scss
Diff comments   View file @ 3d2cc67
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 @media (min-width: 1200px) {
13 .card-columns {
14 column-count: 7 !important;
15 column-gap: 0.5rem !important;
16 }
17 }
18
19 @media (max-width: 1200px) {
20 .card-columns {
21 column-count: 6 !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
12 .bg-danger { 33 .bg-danger {
13 background-color: #8c000e !important; 34 background-color: #8c000e !important;
14 p { 35 p {
15 color: #fff; 36 color: #fff;
16 } 37 }
17 } 38 }
18 39
19 .bg-success { 40 .bg-success {
20 background-color: #00751b !important; 41 background-color: #00751b !important;
21 p { 42 p {
22 color: #fff; 43 color: #fff;
23 } 44 }
24 } 45 }
25 46
26 .bg-light { 47 .bg-light {
27 background-color: white !important; 48 background-color: white !important;
28 p { 49 p {
29 color: #212529; 50 color: #212529;
30 } 51 }
31 } 52 }
32 53
33 .rounded-xs { 54 .rounded-xs {
34 border-radius: 0.5rem; 55 border-radius: 0.5rem;
35 } 56 }
36 57
37 .card-comanda { 58 .card-comanda {
38 min-height: 250px; 59 min-height: 250px;
39 } 60 }
40 61
41 .swing-out-top-bck { 62 .swing-out-top-bck {
42 -webkit-animation: swing-out-top-bck 0.45s 63 -webkit-animation: swing-out-top-bck 0.45s
43 cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s both; 64 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 65 animation: swing-out-top-bck 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s
45 both; 66 both;
46 } 67 }
47 68
48 @-webkit-keyframes swing-out-top-bck { 69 @-webkit-keyframes swing-out-top-bck {
49 0% { 70 0% {
50 -webkit-transform: rotateX(0deg); 71 -webkit-transform: rotateX(0deg);
51 transform: rotateX(0deg); 72 transform: rotateX(0deg);
52 -webkit-transform-origin: top; 73 -webkit-transform-origin: top;
53 transform-origin: top; 74 transform-origin: top;
54 opacity: 1; 75 opacity: 1;
55 } 76 }
56 75% { 77 75% {
57 -webkit-transform: rotateX(-100deg); 78 -webkit-transform: rotateX(-100deg);
58 transform: rotateX(-100deg); 79 transform: rotateX(-100deg);
59 -webkit-transform-origin: top; 80 -webkit-transform-origin: top;
60 transform-origin: top; 81 transform-origin: top;
61 } 82 }
62 100% { 83 100% {
63 -webkit-transform: rotateX(-100deg); 84 -webkit-transform: rotateX(-100deg);
64 transform: rotateX(-100deg); 85 transform: rotateX(-100deg);
65 -webkit-transform-origin: top; 86 -webkit-transform-origin: top;
66 transform-origin: top; 87 transform-origin: top;
67 opacity: 0; 88 opacity: 0;
68 display: none; 89 display: none;
69 position: absolute; 90 position: absolute;
70 } 91 }
71 } 92 }
72 93
73 @keyframes swing-out-top-bck { 94 @keyframes swing-out-top-bck {
74 0% { 95 0% {
75 -webkit-transform: rotateX(0deg); 96 -webkit-transform: rotateX(0deg);
76 transform: rotateX(0deg); 97 transform: rotateX(0deg);
77 -webkit-transform-origin: top; 98 -webkit-transform-origin: top;
78 transform-origin: top; 99 transform-origin: top;
79 opacity: 1; 100 opacity: 1;
80 } 101 }
81 75% { 102 75% {
82 -webkit-transform: rotateX(-100deg); 103 -webkit-transform: rotateX(-100deg);
83 transform: rotateX(-100deg); 104 transform: rotateX(-100deg);
84 -webkit-transform-origin: top; 105 -webkit-transform-origin: top;
85 transform-origin: top; 106 transform-origin: top;
86 } 107 }
87 100% { 108 100% {
88 -webkit-transform: rotateX(-100deg); 109 -webkit-transform: rotateX(-100deg);
89 transform: rotateX(-100deg); 110 transform: rotateX(-100deg);
90 -webkit-transform-origin: top; 111 -webkit-transform-origin: top;
91 transform-origin: top; 112 transform-origin: top;
92 opacity: 0; 113 opacity: 0;
93 display: none; 114 display: none;
94 position: absolute; 115 position: absolute;
95 } 116 }
96 } 117 }
97 118
src/app/components/comanda/comanda.component.ts
Diff comments   View file @ 3d2cc67
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'; 3 import { ComandaService } from 'src/app/services/comanda.service';
4 import { Comanda } from 'src/app/wrappers/comanda'; 4 import { Comanda } from 'src/app/wrappers/comanda';
5 import * as _ from 'lodash'; 5 import * as _ from 'lodash';
6 6
7 @Component({ 7 @Component({
8 selector: 'app-comanda', 8 selector: 'app-comanda',
9 templateUrl: './comanda.component.html', 9 templateUrl: './comanda.component.html',
10 styleUrls: ['./comanda.component.scss'] 10 styleUrls: ['./comanda.component.scss']
11 }) 11 })
12 export class ComandaComponent implements OnInit { 12 export class ComandaComponent implements OnInit {
13 13
14 private apiImagenes = appSettings.apiImagenes;
15 private comandas: Comanda[] = []; 14 private comandas: Comanda[] = [];
16 private cicloTime; 15 private cicloTime;
17 16
18 constructor( 17 constructor(
19 private comandaService: ComandaService 18 private comandaService: ComandaService
20 ) { } 19 ) { }
21 20
22 ngOnInit() { 21 ngOnInit() {
23 22
24 this.buscar(); 23 this.buscar();
25 this.ciclo(); 24 this.ciclo();
26
27 } 25 }
28 26
29 ngOnDestroy() { 27 ngOnDestroy() {
30 28
31 clearTimeout(this.cicloTime); 29 clearTimeout(this.cicloTime);
32 } 30 }
33 31
34 buscar() { 32 buscar() {
35 33
36 this.comandaService.getAll() 34 this.comandaService.getAll()
37 .subscribe((res: Comanda[]) => { 35 .subscribe((res: Comanda[]) => {
38 36
39 if (!_.isEqual(res, this.comandas)) { 37 if (!_.isEqual(res, this.comandas)) {
40 38
41 this.comandas = res; 39 this.comandas = res;
42 } 40 console.log(this.comandas);
43 }, e => console.error(e)) 41 }
42 }, e => console.error(e))
44 } 43 }
45 44
46 ciclo() { 45 ciclo() {
47 46
48 this.cicloTime = setTimeout(() => { 47 this.cicloTime = setTimeout(() => {
48
49 this.buscar(); 49 this.buscar();
50 this.ciclo(); 50 this.ciclo();
51 }, 5000); 51 }, 5000);
52 } 52 }
53 53
54 updateComanda(comanda: Comanda, estadoNuevo: number, observacionNueva: string) { 54 updateComanda(comanda: Comanda, estadoNuevo: number, observacionNueva: string) {
55 55
56 this.comandaService.updateComanda(comanda.id, estadoNuevo, observacionNueva) 56 this.comandaService.updateComanda(comanda.id, estadoNuevo, observacionNueva)
57 .subscribe(res => { 57 .subscribe(res => {
58 58
59 if (res.data) { 59 if (res.data) {
60 comanda.estado = estadoNuevo; 60 comanda.estado = estadoNuevo;
61 comanda.observacion = observacionNueva; 61 comanda.observacion = observacionNueva;
62 } 62 }
63 }, e => console.error(e)) 63 }, e => console.error(e))
64 } 64 }
65 65
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ 3d2cc67
1 <div 1 <div
2 *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada" 2 *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada"
3 class="row m-0 fade-in bg-primary-gradient disable-user-select" 3 class="row m-0 fade-in bg-primary-gradient disable-user-select"
4 (click)="reiniciarTimer"> 4 (click)="reiniciarTimer">
5 <div class="col-12 p-0 vh-100"> 5 <div class="col-12 p-0 vh-100">
6 <!-- TOP HEADER --> 6 <!-- TOP HEADER -->
7 <app-header></app-header> 7 <app-header></app-header>
8 8
9 <!-- NOMBRE DE SECCION --> 9 <!-- NOMBRE DE SECCION -->
10 <div class="row m-0"> 10 <div class="row m-0">
11 <div class="col-12 p-0"> 11 <div class="col-12 p-0">
12 <p class="h5 py-1 bg-gray text-muted text-center m-0"> 12 <p class="h5 py-1 bg-gray text-muted text-center m-0">
13 &nbsp; 13 &nbsp;
14 </p> 14 </p>
15 </div> 15 </div>
16 </div> 16 </div>
17 17
18 <div class="row m-0"> 18 <div class="row m-0">
19 <div class="col-10 px-1"> 19 <div class="col-10 px-1">
20 <!-- TEXTO DE IZQUIERDA --> 20 <!-- TEXTO DE IZQUIERDA -->
21 <div *ngIf="!verQR" class="row mx-2 mt-4 text-white"> 21 <div *ngIf="!verQR" class="row mx-2 mt-4 text-white">
22 <div class="col-sm-auto my-auto"> 22 <div class="col-sm-auto my-auto">
23 <p class="h2">Mi Compra 23 <p class="h2">Mi Compra
24 <i class="fa fa-shopping-cart "></i> 24 <i class="fa fa-shopping-cart "></i>
25 </p> 25 </p>
26 </div> 26 </div>
27 <div class="col-sm-9 my-auto"> 27 <div class="col-sm-9 my-auto">
28 <p class="h4">Por favor, controle y confirme su compra.</p> 28 <p class="h4">Por favor, controle y confirme su compra.</p>
29 </div> 29 </div>
30 </div> 30 </div>
31 31
32 <div [ngClass]="{'mt-5': verQR}" class="row m-0"> 32 <div [ngClass]="{'mt-5': verQR}" class="row m-0">
33 <!-- GRILLA DE PRODUCTOS DE MI COMPRA --> 33 <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
34 <div *ngIf="!verQR" class="col-sm-9 pr-1"> 34 <div *ngIf="!verQR" class="col-sm-9 pr-1">
35 <div class="row mx-1 pr-1 vh-70 overflow-scroll text-dark"> 35 <div class="row mx-1 pr-1 vh-70 overflow-scroll text-dark">
36 <div class="mh-100 col-4 p-2" *ngFor="let producto of productos"> 36 <div class="mh-100 col-4 p-2" *ngFor="let producto of productos">
37 <div class="row m-0 h-100 bg-white rounded-sm shadow border-0"> 37 <div class="row m-0 h-100 bg-white rounded-sm shadow border-0">
38 <div class="d-flex align-items-end flex-column"> 38 <div class="d-flex align-items-end flex-column">
39 <div class="w-100"> 39 <div class="w-100">
40 <img 40 <img
41 src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}" 41 src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}"
42 class="shadow rounded-sm w-100 m-auto"> 42 class="shadow rounded-sm w-100 m-auto">
43 </div> 43 </div>
44 <div class="w-100 pt-2 px-2"> 44 <div class="w-100 pt-2 px-2">
45 <p class="h6 text-left"> 45 <p class="h6 text-left">
46 <small class="font-weight-bold"> 46 <small class="font-weight-bold">
47 {{producto.DET_LAR}} 47 {{producto.DET_LAR}}
48 </small> 48 </small>
49 </p> 49 </p>
50 <div *ngIf="producto.tieneSinonimos"> 50 <div *ngIf="producto.tieneSinonimos">
51 <p *ngFor="let p of producto.productos" class="h6 text-left m-0"> 51 <p *ngFor="let p of producto.productos" class="h6 text-left m-0">
52 <small> 52 <small>
53 - {{p.cantidad * producto.cantidad}} {{p.DET_LAR}} 53 - {{p.cantidad * producto.cantidad}} {{p.DET_LAR}}
54 </small> 54 </small>
55 </p> 55 </p>
56 </div> 56 </div>
57 </div> 57 </div>
58 <div class="w-100 d-flex justify-content-between mt-auto mb-1 px-2"> 58 <div class="w-100 d-flex justify-content-between mt-auto mb-1 px-2">
59 <span class="text-left m-0 px-1 h6"> 59 <span class="text-left m-0 px-1 h6">
60 {{producto.cantidad}} x {{producto.PreVen | currency}} 60 {{producto.cantidad}} x {{producto.PreVen | currency}}
61 </span> 61 </span>
62 <span class="text-right m-0 px-1 h6"> 62 <span class="text-right m-0 px-1 h6">
63 {{producto.cantidad * producto.PreVen | currency}} 63 {{producto.cantidad * producto.PreVen | currency}}
64 </span> 64 </span>
65 </div> 65 </div>
66 </div> 66 </div>
67 </div> 67 </div>
68 </div> 68 </div>
69 </div> 69 </div>
70 </div> 70 </div>
71 71
72 <!-- CODIGO QR --> 72 <!-- CODIGO QR -->
73 <div *ngIf="verQR" class="col-sm-9"> 73 <div *ngIf="verQR" class="col-sm-9">
74 <div class="col-6 offset-3 border-0 mb-auto"> 74 <div class="col-6 offset-3 border-0 mb-auto">
75 <img 75 <img
76 src="{{apiImagenes}}/imagenes/qrmp.jpg" 76 src="{{apiImagenes}}/imagenes/qrmp.jpg"
77 class="w-100 mx-auto d-block shadow rounded-sm"> 77 class="w-100 mx-auto d-block shadow rounded-sm">
78 </div> 78 </div>
79 </div> 79 </div>
80 80
81 <!-- TICKET --> 81 <!-- TICKET -->
82 <div class="col-sm-3 px-1"> 82 <div class="col-sm-3 px-1">
83 <div class="card shadow"> 83 <div class="card shadow">
84 <div class="card-body"> 84 <div class="card-body">
85 <p class="h5 card-title">Su Ticket</p> 85 <p class="h5 card-title">Su Ticket</p>
86 <div class="row mt-4 m-0"> 86 <div class="row mt-4 m-0">
87 <div class="col-12 p-0 mb-2"> 87 <div class="col-12 p-0 mb-2">
88 <p class="h6 m-0 card-text text-left"> 88 <p class="h6 m-0 card-text text-left">
89 <small class="font-weight-bold">DESCRIPCIÓN</small> 89 <small class="font-weight-bold">DESCRIPCIÓN</small>
90 </p> 90 </p>
91 <p class="h6 m-0 card-text text-left"> 91 <p class="h6 m-0 card-text text-left">
92 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small> 92 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
93 </p> 93 </p>
94 </div> 94 </div>
95 </div> 95 </div>
96 <div class="row vh-50 px-2 overflow-scroll m-0"> 96 <div class="row vh-50 px-2 overflow-scroll m-0">
97 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos"> 97 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
98 <p class="h6 m-0 card-text text-left"> 98 <p class="h6 m-0 card-text text-left">
99 <small>{{producto.DET_LAR}}</small> 99 <small>{{producto.DET_LAR}}</small>
100 </p> 100 </p>
101 <div class="row d-flex justify-content-between m-0"> 101 <div class="row d-flex justify-content-between m-0">
102 <div class="col p-0"> 102 <div class="col p-0">
103 <p class="h6 m-0 card-text text-left"> 103 <p class="h6 m-0 card-text text-left">
104 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small> 104 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
105 </p> 105 </p>
106 </div> 106 </div>
107 <div class="col p-0"> 107 <div class="col p-0">
108 <p class="h6 m-0 card-text text-right"> 108 <p class="h6 m-0 card-text text-right">
109 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small> 109 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
110 </p> 110 </p>
111 </div> 111 </div>
112 </div> 112 </div>
113 </div> 113 </div>
114 </div> 114 </div>
115 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0"> 115 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
116 Total {{getTotal() | currency}} 116 Total {{getTotal() | currency}}
117 </p> 117 </p>
118 </div> 118 </div>
119 </div> 119 </div>
120 </div> 120 </div>
121 </div> 121 </div>
122 122
123 <!-- OPCIONES ABAJO DERECHA --> 123 <!-- OPCIONES ABAJO DERECHA -->
124 <div class="row m-0 fixed-bottom"> 124 <div class="row m-0 fixed-bottom">
125 <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> 125 <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
126 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> 126 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
127 <div class="card-body row m-0 p-1"> 127 <div class="card-body row m-0 p-1">
128 <div class="col-12 p-3"> 128 <div class="col-12 p-3">
129 <button 129 <button
130 type="button" 130 type="button"
131 class="btn btn-block btn-light shadow btn-sm shadow" 131 class="btn btn-block btn-light shadow btn-sm shadow"
132 (click)="volverPreviousPage()"> 132 (click)="volverPreviousPage()">
133 <span class="pr-2">Volver</span> 133 <span class="pr-2">Volver</span>
134 <i class="fa fa-undo text-warning"></i> 134 <i class="fa fa-undo text-warning"></i>
135 </button> 135 </button>
136 <button 136 <button
137 type="button" 137 type="button"
138 class="btn btn-block btn-light shadow btn-sm shadow" 138 class="btn btn-block btn-light shadow btn-sm shadow"
139 [routerLink]="['/cancelar-compra']"> 139 [routerLink]="['/cancelar-compra']">
140 <span class="pr-2">Cancelar</span> 140 <span class="pr-2">Cancelar</span>
141 <i class="fa fa-times text-danger"></i> 141 <i class="fa fa-times text-danger"></i>
142 </button> 142 </button>
143 </div> 143 </div>
144 </div> 144 </div>
145 </div> 145 </div>
146 </div> 146 </div>
147 </div> 147 </div>
148 </div> 148 </div>
149 149
150 <!-- FORMAS DE PAGO --> 150 <!-- FORMAS DE PAGO -->
151 <div *ngIf="!verQR" class="col-2 px-1"> 151 <div *ngIf="!verQR" class="col-2 px-1">
152 <p class="h4 text-white text-center mt-4 mx-2 pb-2 border-bottom border-white"> 152 <p class="h4 text-white text-center mt-4 mx-2 pb-2 border-bottom border-white">
153 Forma de pago 153 Forma de pago
154 </p> 154 </p>
155 155
156 <!-- EFECTIVO --> 156 <!-- EFECTIVO -->
157 <div 157 <div
158 class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white" 158 class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white"
159 (click)="pagoEfectivo('efectivo')"> 159 (click)="pagoEfectivo('efectivo')">
160 <div class="col-7 text-center my-auto py-3 px-2"> 160 <div class="col-7 text-center my-auto py-3 px-2">
161 <span class="h5">Efectivo</span> 161 <span class="h5">Efectivo</span>
162 </div> 162 </div>
163 <div class="col-5 my-auto p-0"> 163 <div class="col-5 my-auto p-0">
164 <img 164 <img
165 src="{{apiImagenes}}/imagenes/efectivo.png" 165 src="{{apiImagenes}}/imagenes/efectivo.png"
166 class="w-50 float-right mr-3"> 166 class="w-100 float-right">
167 </div> 167 </div>
168 </div> 168 </div>
169 169
170 <!-- TARJETA --> 170 <!-- TARJETA -->
171 <div class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white"> 171 <div class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white">
172 <div class="col-7 text-center my-auto py-3 px-2"> 172 <div class="col-7 text-center my-auto py-3 px-2">
173 <span class="h5">Tarjeta</span> 173 <span class="h5">Tarjeta</span>
174 </div> 174 </div>
175 <div class="col-5 my-auto p-0"> 175 <div class="col-5 my-auto p-0">
176 <img 176 <img
177 src="{{apiImagenes}}/imagenes/tarjeta.png" 177 src="{{apiImagenes}}/imagenes/tarjeta.png"
178 class="w-50 float-right mr-3"> 178 class="w-100 float-right">
179 </div> 179 </div>
180 </div> 180 </div>
181 181
182 <!-- QR --> 182 <!-- QR -->
183 <div 183 <div
184 class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white" 184 class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white"
185 (click)="pagar('electronico')"> 185 (click)="pagar('electronico')">
186 <div class="col-7 text-center my-auto py-1 px-2"> 186 <div class="col-7 text-center my-auto py-1 px-2">
187 <span class="h5">Pago Electrónico</span> 187 <span class="h5">Pago Electrónico</span>
188 </div> 188 </div>
189 <div class="col-5 my-auto p-0"> 189 <div class="col-5 my-auto p-0">
190 <img 190 <img
191 src="{{apiImagenes}}/imagenes/qr.png" 191 src="{{apiImagenes}}/imagenes/qr.png"
192 class="w-50 float-right mr-3"> 192 class="w-100 float-right">
193 </div> 193 </div>
194 </div> 194 </div>
195 </div> 195 </div>
196 </div> 196 </div>
197 197
198 </div> 198 </div>
199 </div> 199 </div>
200 200
201 <div 201 <div
202 *ngIf="compraConQRfinalizada" 202 *ngIf="compraConQRfinalizada"
203 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> 203 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
204 <div class="col-12 text-center text-white my-auto"> 204 <div class="col-12 text-center text-white my-auto">
205 <p class="font-weight-bold display-4"> 205 <p class="font-weight-bold display-4">
206 Su pago fue<br> 206 Su pago fue<br>
207 acreditado 207 acreditado
208 exitosamente 208 exitosamente
209 </p> 209 </p>
210 <p class="font-weight-bold display-4">Recuerde retirar su ticket</p> 210 <p class="font-weight-bold display-4">Recuerde retirar su ticket</p>
211 </div> 211 </div>
212 <div class="row z-index-0 fixed-top m-0 w-100">
213 <div class="col-12 p-3">
214 <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
215 </div>
216 </div>
212 </div> 217 </div>
213 218
214 <div 219 <div
215 *ngIf="compraConEfectivofinalizada" 220 *ngIf="compraConEfectivofinalizada"
216 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> 221 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
217 <div class="col-12 text-center text-white my-auto"> 222 <div class="col-12 text-center text-white my-auto">
218 <p class="font-weight-bold display-4"> 223 <p class="font-weight-bold display-4">
219 Retire su ticket<br> 224 Retire su ticket<br>
220 y diríjase a caja para<br> 225 y diríjase a caja para<br>
221 efectuar el pago. 226 efectuar el pago.
222 </p> 227 </p>
223 </div> 228 </div>
229 <div class="row z-index-0 fixed-top m-0 w-100">
230 <div class="col-12 p-3">
231 <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
232 </div>
233 </div>
224 </div> 234 </div>
225 235
src/app/components/inicio/inicio.component.ts
Diff comments   View file @ 3d2cc67
1 import { Component, OnInit, ViewChild, HostListener, AfterViewInit } from '@angular/core'; 1 import { Component, OnInit, ViewChild, HostListener, AfterViewInit } from '@angular/core';
2 import { PopoverDirective } from 'ngx-bootstrap'; 2 import { PopoverDirective } from 'ngx-bootstrap';
3 import { appSettings } from 'src/etc/AppSettings'; 3 import { appSettings } from 'src/etc/AppSettings';
4 import { Router } from '@angular/router'; 4 import { Router } from '@angular/router';
5 import { ProductoService } from 'src/app/services/producto.service'; 5 import { ProductoService } from 'src/app/services/producto.service';
6 import { Producto } from 'src/app/wrappers/producto'; 6 import { Producto } from 'src/app/wrappers/producto';
7 import { Sinonimo } from 'src/app/wrappers/sinonimo'; 7 import { Sinonimo } from 'src/app/wrappers/sinonimo';
8 8
9 @Component({ 9 @Component({
10 selector: 'app-inicio', 10 selector: 'app-inicio',
11 templateUrl: './inicio.component.html', 11 templateUrl: './inicio.component.html',
12 styleUrls: ['./inicio.component.scss'] 12 styleUrls: ['./inicio.component.scss']
13 }) 13 })
14 export class InicioComponent implements OnInit, AfterViewInit { 14 export class InicioComponent implements OnInit, AfterViewInit {
15 15
16 private tienePromo = false; 16 private tienePromo = false;
17 private productoEsPromo = false; 17 private productoEsPromo = false;
18 private busqueda: string = ''; 18 private busqueda: string = '';
19 private productoAcargar: Producto; 19 private productoAcargar: Producto;
20 private promoAcargar: Producto; 20 private promoAcargar: Producto;
21 private productos: Producto[] = []; 21 private productos: Producto[] = [];
22 private promociones: Producto[] = []; 22 private promociones: Producto[] = [];
23 private sinonimos: Sinonimo[] = []; 23 private sinonimos: Sinonimo[] = [];
24 private apiImagenes: string = appSettings.apiImagenes; 24 private apiImagenes: string = appSettings.apiImagenes;
25 25
26 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective; 26 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
27 27
28 @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) { 28 @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) {
29 29
30 if (e.keyCode == 13) { 30 if (e.keyCode == 13) {
31 this.buscarByCodigoBarras(this.busqueda); 31 this.buscarByCodigoBarras(this.busqueda);
32 this.busqueda = ''; 32 this.busqueda = '';
33 } else { 33 } else {
34 this.busqueda += e.key; 34 this.busqueda += e.key;
35 } 35 }
36 36
37 }; 37 };
38 38
39 constructor( 39 constructor(
40 private router: Router, 40 private router: Router,
41 private productoService: ProductoService 41 private productoService: ProductoService
42 ) { } 42 ) { }
43 43
44 ngOnInit() { 44 ngOnInit() {
45 45
46 this.productoAcargar = this.productoService.productoAcargar; 46 this.productoAcargar = this.productoService.productoAcargar;
47 this.getProductos(); 47 this.getProductos();
48 } 48 }
49 49
50 ngAfterViewInit() { 50 ngAfterViewInit() {
51 51
52 setTimeout(() => { 52 setTimeout(() => {
53 if (!this.productoAcargar) return; 53 if (!this.productoAcargar) return;
54 54
55 if (this.productoAcargar.PRO) { 55 if (this.productoAcargar.PRO) {
56 this.promociones.push(this.productoAcargar); 56 this.promociones.push(this.productoAcargar);
57 this.promoSeleccionada(this.productoAcargar, true); 57 this.promoSeleccionada(this.productoAcargar, true);
58 } 58 }
59 else { 59 else {
60 this.getPromociones(); 60 this.getPromociones();
61 } 61 }
62 }) 62 })
63 } 63 }
64 64
65 getProductos() { 65 getProductos() {
66 66
67 this.productoService.getAll() 67 this.productoService.getAll()
68 .subscribe((productos: Producto[]) => { 68 .subscribe((productos: Producto[]) => {
69 this.productos = productos; 69 this.productos = productos;
70 }); 70 });
71 } 71 }
72 72
73 getPromociones() { 73 getPromociones() {
74 74
75 var sector = this.productoAcargar.CodSec; 75 var sector = this.productoAcargar.CodSec;
76 var codigo = this.productoAcargar.CodArt; 76 var codigo = this.productoAcargar.CodArt;
77 this.productoService.getPromociones(sector, codigo) 77 this.productoService.getPromociones(sector, codigo)
78 .subscribe((res: Producto[]) => { 78 .subscribe((res: Producto[]) => {
79 79
80 if (res.length === 0) { 80 if (res.length === 0) {
81 81
82 this.productoAcargar.cantidad = 1; 82 this.productoAcargar.cantidad = 1;
83 this.productoService.setProductos(this.productoAcargar); 83 this.productoService.setProductos(this.productoAcargar);
84 this.productoAcargar = this.productoService.productoAcargar = undefined; 84 this.productoAcargar = this.productoService.productoAcargar = undefined;
85 } else { 85 } else {
86 86
87 this.promociones = res; 87 this.promociones = res;
88 this.popoverDirective.show(); 88 this.popoverDirective.show();
89 } 89 }
90 }, error => { console.error(error); }) 90 }, error => { console.error(error); })
91 } 91 }
92 92
93 confirmarProducto() { 93 confirmarProducto() {
94 94
95 var producto = this.promoAcargar ? this.promoAcargar : this.productoAcargar; 95 var producto = this.promoAcargar ? this.promoAcargar : this.productoAcargar;
96 producto.cantidad = 1; 96 producto.cantidad = producto.cantidad ? producto.cantidad : 1;
97 this.productoService.setProductos(producto); 97 this.productoService.setProductos(producto);
98 this.productoService.productoAcargar = this.promoAcargar = this.productoAcargar = undefined; 98 this.productoService.productoAcargar = this.promoAcargar = this.productoAcargar = undefined;
99 this.productoService.esPromoPersonalizada = false; 99 this.productoService.esPromoPersonalizada = false;
100 this.promociones = []; 100 this.promociones = [];
101 this.popoverDirective.hide(); 101 this.popoverDirective.hide();
102 } 102 }
103 103
104 promoSeleccionada($event: Producto, showPopover: boolean) { 104 promoSeleccionada($event: Producto, showPopover: boolean) {
105 105
106 this.productoService.getProductoById($event.id) 106 this.productoService.getProductoById($event.id)
107 .subscribe((res: Producto) => { 107 .subscribe((res: Producto) => {
108 108
109 $event.imagenes = res.imagenes.length == 0 ? [{ imagen: 'noImage.jpg' }] : res.imagenes; 109 $event.imagenes = res.imagenes.length == 0 ? [{ imagen: 'noImage.jpg' }] : res.imagenes;
110 this.promoAcargar = $event; 110 this.promoAcargar = $event;
111 111
112 if ($event.tieneSinonimos) { 112 if ($event.tieneSinonimos) {
113 this.getSinonimos(this.promoAcargar.CodSec, this.promoAcargar.CodArt); 113 this.getSinonimos(this.promoAcargar.CodSec, this.promoAcargar.CodArt);
114 } else if (showPopover) { 114 } else if (showPopover) {
115 this.popoverDirective.show(); 115 this.popoverDirective.show();
116 } else { 116 } else {
117 this.popoverDirective.hide(); 117 this.popoverDirective.hide();
118 } 118 }
119 119
120 }, 120 },
121 error => { console.log(error); }) 121 error => { console.log(error); })
122 } 122 }
123 123
124 getSinonimos(sector, codigo) { 124 getSinonimos(sector, codigo) {
125 125
126 this.productoService.getPromocionSinonimos(sector, codigo) 126 this.productoService.getPromocionSinonimos(sector, codigo)
127 .subscribe((res: Sinonimo[]) => { 127 .subscribe((res: Sinonimo[]) => {
128 128
129 res.forEach(sinonimo => { 129 res.forEach(sinonimo => {
130 130
131 sinonimo.cantidad = 0; 131 sinonimo.cantidad = 0;
132 this.promoAcargar.productos.forEach(productoPromo => { 132 this.promoAcargar.productos.forEach(productoPromo => {
133 133
134 sinonimo.productos.forEach(productoSinonimo => { 134 sinonimo.productos.forEach(productoSinonimo => {
135 135
136 if (productoSinonimo.id === productoPromo.id) { 136 if (productoSinonimo.id === productoPromo.id) {
137 productoSinonimo.cantidad = productoPromo.cantidad; 137 productoSinonimo.cantidad = productoPromo.cantidad;
138 sinonimo.cantidad += productoPromo.cantidad; 138 sinonimo.cantidad += productoPromo.cantidad;
139 } 139 }
140 }) 140 })
141 }) 141 })
142 }) 142 })
143 this.sinonimos = res; 143 this.sinonimos = res;
144 (this.sinonimos.length > 0) ? this.popoverDirective.show() : this.popoverDirective.hide(); 144 (this.sinonimos.length > 0) ? this.popoverDirective.show() : this.popoverDirective.hide();
145 }) 145 })
146 } 146 }
147 147
148 productosPersonalizados($event: Producto[]) { 148 productosPersonalizados($event: Producto[]) {
149 149
150 var productosPersonalizados = $event; 150 var productosPersonalizados = $event;
151 this.promoAcargar.productos = productosPersonalizados; 151 this.promoAcargar.productos = productosPersonalizados;
152 this.confirmarProducto(); 152 this.confirmarProducto();
153 } 153 }
154 154
155 buscarByCodigoBarras(busqueda) { 155 buscarByCodigoBarras(busqueda) {
156 156
157 let producto = this.productos.filter(producto => { 157 let producto = this.productos.filter(producto => {
158 return producto.codigoBarra == busqueda; 158 return producto.codigoBarra == busqueda;
159 }); 159 });
160 160
161 if (producto.length) { 161 if (producto.length) {
162 162
163 this.productoAcargar = producto[0]; 163 this.productoAcargar = producto[0];
164 this.getPromociones(); 164 this.getPromociones();
165 165
166 } else { 166 } else {
167 alert('No se encuentra el producto'); 167 alert('No se encuentra el producto');
168 } 168 }
169 169
170 } 170 }
171 171
172 irBusquedaProductos(value) { 172 irBusquedaProductos(value) {
173 173
174 this.productoService.mostrar = value; 174 this.productoService.mostrar = value;
175 this.router.navigate(['busqueda-productos']); 175 this.router.navigate(['busqueda-productos']);
176 } 176 }
177 177
178 deshacerCarga() { 178 deshacerCarga() {
179 179
180 if (this.sinonimos.length > 0) { 180 if (this.sinonimos.length > 0) {
181 this.sinonimos = []; 181 this.sinonimos = [];
182 this.productoService.esPromoPersonalizada = false; 182 this.productoService.esPromoPersonalizada = false;
183 this.popoverDirective.hide(); 183 this.popoverDirective.hide();
184 } 184 }
185 185
186 if (this.promoAcargar) { 186 if (this.promoAcargar) {
187 this.promoAcargar = undefined; 187 this.promoAcargar = undefined;
188 if (this.productoAcargar.PRO) { 188 if (this.productoAcargar.PRO) {
189 this.productoAcargar = undefined; 189 this.productoAcargar = undefined;
190 this.promociones = []; 190 this.promociones = [];
191 this.popoverDirective.hide(); 191 this.popoverDirective.hide();
192 } else { 192 } else {
193 this.popoverDirective.show(); 193 this.popoverDirective.show();
194 } 194 }
195 } else { 195 } else {
196 this.productoAcargar = undefined; 196 this.productoAcargar = undefined;
197 this.promociones = []; 197 this.promociones = [];
198 this.popoverDirective.hide(); 198 this.popoverDirective.hide();
199 } 199 }
200 } 200 }
201 201
202 } 202 }
203 203
src/app/components/pedidos-salientes/pedidos-salientes.component.html
Diff comments   View file @ 3d2cc67
1 <div class="bg-primary-gradient vh-100"> 1 <div class="bg-primary-gradient vh-100 disable-user-select">
2 <div class="d-flex justify-content-center"> 2 <div class="d-flex justify-content-center">
3 <div class="row z-index-0 fixed-top m-0 w-100">
4 <div class="col-12 p-3">
5 <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
6 </div>
7 </div>
3 <div class="row m-5 text-white text-center"> 8 <div class="row m-5 text-white text-center">
4 9
5 <div class="col-12 p-0"> 10 <div class="col-12 p-0">
6 <p class="h1 m-0">Su pedido ya esta listo.</p> 11 <p class="h1 m-0">Su pedido ya esta listo.</p>
7 <p class="h2 m-0">Nº de Pedido</p> 12 <p class="h2 m-0">Nº de Pedido</p>
8 </div> 13 </div>
9 14
10 <div 15 <div
11 *ngIf="pedidosRecientes.length" 16 *ngIf="pedidosRecientes.length"
12 class="col-12 p-2"> 17 class="col-12 p-2">
13 <div class="border rounded shadow h-big"> 18 <div class="border rounded shadow h-big">
14 <div class="font-weight-bold heartbeat m-0 h-100"> 19 <div class="font-weight-bold heartbeat m-0 h-100">
15 {{rellenar(pedidosRecientes[0].id.toString().slice(pedidosRecientes[0].id.toString().length - 2), 2)}} 20 {{rellenar(pedidosRecientes[0].id.toString().slice(pedidosRecientes[0].id.toString().length - 2), 2)}}
16 </div> 21 </div>
17 </div> 22 </div>
18 </div> 23 </div>
19 24
20 <div 25 <div
21 *ngFor="let pedido of pedidosRecientes; let i = index" 26 *ngFor="let pedido of pedidosRecientes; let i = index"
22 [hidden]="i == 0 || i > 8" 27 [hidden]="i == 0 || i > 8"
23 class="col-3 p-2"> 28 class="col-3 p-2">
24 <p class="font-weight-bold display-1 m-0 py-1 border rounded shadow"> 29 <p class="font-weight-bold display-1 m-0 py-1 border rounded shadow">
25 {{rellenar(pedido.id.toString().slice(pedido.id.toString().length - 2), 2)}} 30 {{rellenar(pedido.id.toString().slice(pedido.id.toString().length - 2), 2)}}
26 </p> 31 </p>
27 </div> 32 </div>
28 33
29 </div> 34 </div>
30 </div> 35 </div>
31 </div> 36 </div>
32 37
src/assets/img/debo-gray.png
Diff comments   View file @ 3d2cc67

22.3 KB
1 @import "./assets/scss/animation.scss"; 1 @import "./assets/scss/animation.scss";
2 @import "./assets/scss/bootstrap-override.scss"; 2 @import "./assets/scss/bootstrap-override.scss";
3 @import "../node_modules/bootstrap/scss/_variables.scss"; 3 @import "../node_modules/bootstrap/scss/_variables.scss";
4 4
5 html, 5 html,
6 body { 6 body {
7 background-color: #f0f0f0; 7 height: 100%;
8 background: linear-gradient(
9 0deg,
10 #e6e6e6,
11 #fff
12 );
8 font-family: bahnschrift; 13 font-family: bahnschrift;
9 overflow: hidden !important; 14 overflow: hidden !important;
10 } 15 }
11 16
12 .blur { 17 .blur {
13 filter: blur(10px); 18 filter: blur(10px);
14 -webkit-filter: blur(10px); 19 -webkit-filter: blur(10px);
15 } 20 }
16 21
17 .disable-user-select { 22 .disable-user-select {
18 -webkit-user-select: none; 23 -webkit-user-select: none;
19 -moz-user-select: none; 24 -moz-user-select: none;
20 -ms-user-select: none; 25 -ms-user-select: none;
21 user-select: none; 26 user-select: none;
22 } 27 }
23 28
24 .blue-gradient { 29 .blue-gradient {
25 background: linear-gradient(0deg, #ffffff00, $white); 30 background: linear-gradient(0deg, #ffffff00, $white);
26 } 31 }
27 32
28 .rounded { 33 .rounded {
29 border-radius: 1.5rem !important; 34 border-radius: 1.5rem !important;
30 } 35 }
31 36
32 .rounded-top-sm { 37 .rounded-top-sm {
33 border-top-left-radius: 0.75rem !important; 38 border-top-left-radius: 0.75rem !important;
34 border-top-right-radius: 0.75rem !important; 39 border-top-right-radius: 0.75rem !important;
35 } 40 }
36 41
37 .rounded-sm { 42 .rounded-sm {
38 border-radius: 0.75rem !important; 43 border-radius: 0.75rem !important;
39 } 44 }
40 45
41 .card-effect { 46 .card-effect {
42 &:active { 47 &:active {
43 background-color: #c9c9c9b3 !important; 48 background-color: #c9c9c9b3 !important;
44 transition: background-color 0.5s; 49 transition: background-color 0.5s;
45 } 50 }
46 &:focus { 51 &:focus {
47 background-color: #c9c9c9b3 !important; 52 background-color: #c9c9c9b3 !important;
48 transition: background-color 0.5s; 53 transition: background-color 0.5s;
49 } 54 }
50 } 55 }
51 56
52 .overflow-scroll { 57 .overflow-scroll {
53 overflow-y: auto !important; 58 overflow-y: auto !important;
54 overflow-x: hidden !important; 59 overflow-x: hidden !important;
55 &::-webkit-scrollbar { 60 &::-webkit-scrollbar {
56 width: .75em; 61 width: 0.75em;
57 } 62 }
58 &::-webkit-scrollbar-track { 63 &::-webkit-scrollbar-track {
59 border-radius: 10px; 64 border-radius: 10px;
60 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 65 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
61 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 66 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
62 background-color: $white; 67 background-color: $white;
63 } 68 }
64 &::-webkit-scrollbar-thumb { 69 &::-webkit-scrollbar-thumb {
65 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 70 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
66 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 71 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
67 outline: 1px solid slategrey; 72 outline: 1px solid slategrey;
68 border-radius: 10px; 73 border-radius: 10px;
69 height: 12px; 74 height: 12px;
70 &:active { 75 &:active {
71 box-shadow: inset 0 0 8px $primary; 76 box-shadow: inset 0 0 8px $primary;
72 -webkit-box-shadow: inset 0 0 8px $primary; 77 -webkit-box-shadow: inset 0 0 8px $primary;
73 } 78 }
74 } 79 }
75 &::-webkit-scrollbar-corner { 80 &::-webkit-scrollbar-corner {
76 border-radius: 10px; 81 border-radius: 10px;
77 } 82 }
78 } 83 }
79 84
80 .bg-gray { 85 .bg-gray {
81 background-color: #e6e6e6; 86 background-color: #e6e6e6;
82 } 87 }
83 88
84 .bg-primary-gradient { 89 .bg-primary-gradient {
85 background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%); 90 background: linear-gradient(
91 135deg,
92 rgba(40, 112, 175, 1) 0%,
93 rgba(0, 32, 66, 1) 100%
94 );
86 } 95 }
87 96
88 .bg-primary-gradient-horizontal { 97 .bg-primary-gradient-horizontal {
89 background: linear-gradient(90deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%); 98 background: linear-gradient(
99 90deg,
100 rgba(40, 112, 175, 1) 0%,
101 rgba(0, 32, 66, 1) 100%
102 );
90 } 103 }
91 104
92 .icon-dim { 105 .icon-dim {
93 height: 40px !important; 106 height: 40px !important;
94 width: auto !important; 107 width: auto !important;
95 background-color: white !important; 108 background-color: white !important;
96 } 109 }
97 110
98 .text-purple { 111 .text-purple {
99 color: $purple; 112 color: $purple;
100 } 113 }
101 114
102 .vh-70 { 115 .vh-70 {
103 min-height: auto !important; 116 min-height: auto !important;
104 max-height: 70vh !important; 117 max-height: 70vh !important;
105 } 118 }
106 119
107 .vh-60 { 120 .vh-60 {
108 min-height: auto !important; 121 min-height: auto !important;
109 max-height: 60vh !important; 122 max-height: 60vh !important;
110 } 123 }
111 124
112 .vh-50 { 125 .vh-50 {
113 min-height: auto !important; 126 min-height: auto !important;
114 max-height: 50vh !important; 127 max-height: 50vh !important;
115 } 128 }
116 129
117 .spinner-lg { 130 .spinner-lg {
118 width: 3rem !important; 131 width: 3rem !important;
119 height: 3rem !important; 132 height: 3rem !important;
120 } 133 }
121 134
122 .sidebar { 135 .sidebar {
123 right: 0; 136 right: 0;
124 } 137 }
125 138
126 .background-image { 139 .background-image {
127 background-repeat: no-repeat; 140 background-repeat: no-repeat;
128 background-size: cover; 141 background-size: cover;
129 position: fixed; 142 position: fixed;
130 } 143 }
131 144
132 .rounded-bottom-right { 145 .rounded-bottom-right {
133 border-bottom-right-radius: 10rem; 146 border-bottom-right-radius: 10rem;
134 &:before { 147 &:before {
135 border-radius: 0 40px 40px 0; 148 border-radius: 0 40px 40px 0;
136 background-color: #fff; 149 background-color: #fff;
137 } 150 }
138 } 151 }
139 152
140 .rounded-top-left { 153 .rounded-top-left {
141 border-top-left-radius: 10rem; 154 border-top-left-radius: 10rem;
142 } 155 }
143 156
144 .bg-gray { 157 .bg-gray {
145 background-color: #cccccc; 158 background-color: #cccccc;
146 } 159 }
147 160
148 .cdk-overlay-container { 161 .cdk-overlay-container {
149 position: absolute; 162 position: absolute;
150 top: 65%; 163 top: 65%;
151 width: 100%; 164 width: 100%;
152 } 165 }
153 166
154 .min-h-40 { 167 .min-h-40 {
155 min-height: 40px; 168 min-height: 40px;
156 } 169 }
157 170
158 .min-h-55 { 171 .min-h-55 {
159 min-height: 55px; 172 min-height: 55px;
160 } 173 }
161 174
162 .pagination { 175 .pagination {
163 justify-content: center !important; 176 justify-content: center !important;
164 display: flex !important; 177 display: flex !important;
165 } 178 }
179
180 .z-index-0 {
181 z-index: 0;
182 }
183
184 .w-15 {
185 width: 15% !important;
186 }