Commit d1da6b40b7a2612d9cd56bf3419219d492740566
Exists in
master
Merge branch 'master' into 'master'
Master(mpuebla) See merge request !112
Showing
5 changed files
Show diff stats
src/app/components/busqueda-productos/busqueda-productos.component.html
1 | <div class="row m-0 fade-in"> | 1 | <div class="row m-0 fade-in"> |
2 | <div class="col-12 p-0"> | 2 | <div class="col-12 p-0"> |
3 | 3 | ||
4 | <!-- NOMBRE DE SECCION --> | 4 | <!-- NOMBRE DE SECCION --> |
5 | <div class="row m-0"> | 5 | <div class="row m-0"> |
6 | <div class="col-12 p-0"> | 6 | <div class="col-12 p-0"> |
7 | <p class="h5 m-0 py-1 bg-gray text-muted text-center"> | 7 | <p class="h5 m-0 py-1 bg-gray text-muted text-center"> |
8 | {{title}} | 8 | {{title}} |
9 | <i *ngIf="title === 'Búsqueda'" class="fa fa-search"></i> | 9 | <i *ngIf="title === 'Búsqueda'" class="fa fa-search"></i> |
10 | </p> | 10 | </p> |
11 | </div> | 11 | </div> |
12 | </div> | 12 | </div> |
13 | 13 | ||
14 | <div class="container-fluid"> | 14 | <div class="container-fluid"> |
15 | <div class="row m-2 disable-user-select"> | 15 | <div class="row m-2 disable-user-select"> |
16 | 16 | ||
17 | <!-- FILTROS --> | 17 | <!-- FILTROS --> |
18 | <div *ngIf="queMostrar != 'promociones'" class="col-sm-2 p-1"> | 18 | <div *ngIf="queMostrar != 'promociones'" class="col-sm-2 p-1"> |
19 | <div class="text-center"> | 19 | <div class="text-center"> |
20 | <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p> | 20 | <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p> |
21 | </div> | 21 | </div> |
22 | <ul class="list-group"> | 22 | <ul class="list-group"> |
23 | <li | 23 | <li |
24 | [ngClass]="{active: categoriaActive == 0}" | 24 | [ngClass]="{active: categoriaActive == 0}" |
25 | (click)="categoriaActive = 0; filterItems()" | 25 | (click)="categoriaActive = 0; filterItems()" |
26 | class="list-group-item list-group-item-action text-center my-1 p-2 h6"> | 26 | class="list-group-item list-group-item-action text-center my-1 p-2 h6"> |
27 | Todos | 27 | Todos |
28 | </li> | 28 | </li> |
29 | <li | 29 | <li |
30 | *ngFor="let categoria of categorias" | 30 | *ngFor="let categoria of categorias" |
31 | [ngClass]="{active: categoriaActive == categoria.id}" | 31 | [ngClass]="{active: categoriaActive == categoria.id}" |
32 | (click)="categoriaActive = categoria.id; filterItems()" | 32 | (click)="categoriaActive = categoria.id; filterItems()" |
33 | class="list-group-item list-group-item-action text-center my-1 p-2 h6"> | 33 | class="list-group-item list-group-item-action text-center my-1 p-2 h6"> |
34 | {{categoria.detalle}} | 34 | {{categoria.detalle}} |
35 | </li> | 35 | </li> |
36 | </ul> | 36 | </ul> |
37 | </div> | 37 | </div> |
38 | 38 | ||
39 | <!-- SEARCH INPUT --> | 39 | <!-- SEARCH INPUT --> |
40 | <div *ngIf="productos.length > 0" class="fade-in col p-0"> | 40 | <div *ngIf="productos.length > 0" class="fade-in col p-0"> |
41 | 41 | ||
42 | <div class="row m-0 search"> | 42 | <div class="row m-0 search"> |
43 | <!-- BOTON VOLVER --> | 43 | <!-- BOTON VOLVER --> |
44 | <div class="col-sm-auto p-2"> | 44 | <div class="col-sm-auto p-2"> |
45 | <button | 45 | <button |
46 | type="button" | 46 | type="button" |
47 | class="btn btn-light btn-lg shadow-sm" | 47 | class="btn btn-light btn-lg shadow-sm" |
48 | [routerLink]="['/inicio']"> | 48 | [routerLink]="['/inicio']"> |
49 | <span class="font-weight-normal h6 pr-2">Volver</span> | 49 | <span class="font-weight-normal h6 pr-2">Volver</span> |
50 | <i class="fa fa-undo text-warning" aria-hidden="true"></i> | 50 | <i class="fa fa-undo text-warning" aria-hidden="true"></i> |
51 | </button> | 51 | </button> |
52 | </div> | 52 | </div> |
53 | <div class="col-sm-10 p-2"> | 53 | <div class="col-sm-10 p-2"> |
54 | <span class="fa fa-search form-control-lg form-control-search pl-3"></span> | 54 | <span class="fa fa-search form-control-lg form-control-search pl-3"></span> |
55 | <input | 55 | <input |
56 | [matKeyboard]="'spanish'" | 56 | [matKeyboard]="'spanish'" |
57 | type="text" | 57 | type="text" |
58 | class="form-control form-control-lg shadow-sm rounded-pill px-5" | 58 | class="form-control form-control-lg shadow-sm rounded-pill px-5" |
59 | placeholder="Búsqueda productos" | 59 | placeholder="Búsqueda productos" |
60 | [(ngModel)]="searchTerm" | 60 | [(ngModel)]="searchTerm" |
61 | (ngModelChange)="filterItems()"> | 61 | (ngModelChange)="filterItems()"> |
62 | </div> | 62 | </div> |
63 | <div class="col-sm-12 m-0 p-2 h5"> | 63 | <div class="col-sm-12 m-0 p-2 h5"> |
64 | <button | 64 | <button |
65 | class="btn btn-outline-primary badge badge-light px-2 shadow-sm" | 65 | class="btn btn-outline-primary badge badge-light px-2 shadow-sm" |
66 | [ngClass]="{'active': ordenandoByVendidos}" | 66 | [ngClass]="{'active': ordenandoByVendidos}" |
67 | (click)="ordenandoByVendidos = !ordenandoByVendidos; filterItems()" | 67 | (click)="ordenandoByVendidos = !ordenandoByVendidos; filterItems()" |
68 | >Más vendidos</button> | 68 | >Más vendidos</button> |
69 | </div> | 69 | </div> |
70 | </div> | 70 | </div> |
71 | <!-- LISTA DE PRODUCTOS --> | 71 | <!-- LISTA DE PRODUCTOS --> |
72 | <div class="row m-0 align-items-start vh-70 overflow-scroll disable-user-select"> | 72 | <div class="row m-0 align-items-start vh-60 overflow-scroll disable-user-select"> |
73 | <div | 73 | <div |
74 | class="col-4 col-lg-3 p-2" | 74 | class="col-4 col-lg-3 p-2" |
75 | *ngFor="let producto of auxProductos"> | 75 | *ngFor="let producto of auxProductos"> |
76 | <div | 76 | <div |
77 | class="card-effect bg-white rounded-sm shadow border-0" | 77 | class="card-effect bg-white rounded-sm shadow border-0" |
78 | (click)="elegirProducto(producto)"> | 78 | (click)="elegirProducto(producto)"> |
79 | <img src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto"> | 79 | <img |
80 | src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}" | ||
81 | class="rounded-sm shadow w-100 m-auto"> | ||
80 | <div class="p-2"> | 82 | <div class="p-2"> |
81 | <p class="h6 min-h-40 text-left m-0"><small>{{producto.DET_LAR}}</small></p> | 83 | <p class="h6 min-h-40 text-left m-0"><small>{{producto.DET_LAR}}</small></p> |
82 | <div class="row m-0"> | 84 | <div class="row m-0"> |
83 | <div class="col-12 my-auto pt-2 pr-2 p-0"> | 85 | <div class="col-12 my-auto pt-2 pr-2 p-0"> |
84 | <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> | 86 | <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> |
85 | </div> | 87 | </div> |
86 | </div> | 88 | </div> |
87 | </div> | 89 | </div> |
88 | </div> | 90 | </div> |
89 | </div> | 91 | </div> |
90 | </div> | 92 | </div> |
91 | </div> | 93 | </div> |
92 | 94 | ||
93 | <!-- SPINNER --> | 95 | <!-- SPINNER --> |
94 | <div | 96 | <div |
95 | *ngIf="productos.length === 0 && showSpinner" | 97 | *ngIf="productos.length === 0 && showSpinner" |
96 | class="col-sm-10 p-0 align-self-center text-center"> | 98 | class="col-sm-10 p-0 align-self-center text-center"> |
97 | <div class="spinner-border spinner-lg text-secondary" role="status"></div> | 99 | <div class="spinner-border spinner-lg text-secondary" role="status"></div> |
98 | <span class="text-secondary m-2 h5">Cargando información.</span> | 100 | <span class="text-secondary m-2 h5">Cargando información.</span> |
99 | </div> | 101 | </div> |
100 | 102 | ||
101 | </div> | 103 | </div> |
102 | </div> | 104 | </div> |
103 | 105 | ||
104 | </div> | 106 | </div> |
105 | 107 | ||
106 | </div> | 108 | </div> |
107 | 109 |
src/app/components/header/header.component.html
1 | <div class="row m-0 bg-light p-4 justify-content-between"> | 1 | <div class="row m-0 bg-light p-3 justify-content-between"> |
2 | <div class="col-6"> | 2 | <div class="col-6"> |
3 | <img class="w-25 float-left" src="{{apiImagenes}}/imagenes/logoempresa.png"> | 3 | <img class="w-25 float-left" src="{{apiImagenes}}/imagenes/logoempresa.png"> |
4 | </div> | 4 | </div> |
5 | <div class="col-6"> | 5 | <div class="col-6"> |
6 | <img class="w-25 float-right" src="{{apiImagenes}}/imagenes/logodebo.png"> | 6 | <img class="w-25 float-right" src="{{apiImagenes}}/imagenes/logodebo.png"> |
7 | </div> | 7 | </div> |
8 | </div> | 8 | </div> |
9 | 9 |
src/app/components/home/home.component.html
1 | <div class="container-fluid p-0"> | 1 | <div class="container-fluid p-0"> |
2 | <img | 2 | <img |
3 | src="{{apiImagenes}}/imagenes/homeBackground.jpg" | 3 | src="{{apiImagenes}}/imagenes/homeBackground.jpg" |
4 | class="background-image vh-100 w-100"> | 4 | class="background-image vh-100 w-100"> |
5 | <div | 5 | <div |
6 | class="fade-in vh-100 d-flex align-content-between flex-wrap disable-user-select" | 6 | class="fade-in vh-100 d-flex align-content-between flex-wrap disable-user-select" |
7 | [routerLink]="['/inicio']"> | 7 | [routerLink]="['/inicio']"> |
8 | 8 | ||
9 | <!-- HEADER --> | 9 | <!-- HEADER --> |
10 | <div class="vh-15 d-flex flex-row flex-wrap m-0 w-100 bg-primary-gradient-horizontal"> | 10 | <div class="vh-15 row m-0 flex-row w-100 bg-primary-gradient-horizontal"> |
11 | <div class="h-100 w-50 bg-white rounded-bottom-right"> | 11 | <div class="h-100 w-50 bg-white rounded-bottom-right"> |
12 | <img class="h-100 p-2 m-auto d-block" src="{{apiImagenes}}/imagenes/logoempresa.png"> | 12 | <img class="h-100 p-2 m-auto d-block" src="{{apiImagenes}}/imagenes/logoempresa.png"> |
13 | </div> | 13 | </div> |
14 | </div> | 14 | </div> |
15 | 15 | ||
16 | <!-- INFO DE BIENVENIDA --> | 16 | <!-- INFO DE BIENVENIDA --> |
17 | <div class="d-flex h-50 flex-row flex-wrap justify-content-around align-items-center w-100 m-3"> | 17 | <div class="h-50 row flex-row justify-content-around align-items-center w-100 m-3"> |
18 | <iframe | 18 | <iframe |
19 | class="w-50 h-100 rounded fade-in" | 19 | class="w-50 h-100 border-0 rounded fade-in" |
20 | src="https://www.youtube.com/embed/vb8ZcalBDyw?&autoplay=1&loop=1&playlist=vb8ZcalBDyw&controls=0&showinfo=0&mute=1"> | 20 | src="https://www.youtube.com/embed/vb8ZcalBDyw?&autoplay=1&loop=1&playlist=vb8ZcalBDyw&controls=0&showinfo=0&mute=1"> |
21 | </iframe> | 21 | </iframe> |
22 | <div class="w-auto text-center text-white"> | 22 | <div class="w-auto text-center text-white"> |
23 | <p class="display-4 font-weight-bold m-0">¡BIENVENIDO!</p> | 23 | <p class="display-4 font-weight-bold m-0">¡BIENVENIDO!</p> |
24 | <p class="display-4 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p> | 24 | <p class="display-4 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p> |
25 | </div> | 25 | </div> |
26 | </div> | 26 | </div> |
27 | 27 | ||
28 | <!-- FOOTER --> | 28 | <!-- FOOTER --> |
29 | <div class="vh-15 d-flex flex-row-reverse flex-wrap w-100 bg-gray"> | 29 | <div class="vh-15 row m-0 flex-row-reverse w-100 bg-gray"> |
30 | <div class="h-100 w-50 bg-white rounded-top-left"> | 30 | <div class="h-100 w-50 bg-white rounded-top-left"> |
31 | <img class="h-100 p-2 m-auto d-block" src="{{apiImagenes}}/imagenes/logodebo.png"> | 31 | <img class="h-100 p-2 m-auto d-block" src="{{apiImagenes}}/imagenes/logodebo.png"> |
32 | </div> | 32 | </div> |
33 | </div> | 33 | </div> |
34 | 34 | ||
35 | </div> | 35 | </div> |
36 | </div> | 36 | </div> |
37 | 37 |
src/app/components/inicio/inicio.component.html
1 | <div class="row m-0 fade-in"> | 1 | <div class="row m-0 fade-in"> |
2 | <div class="col-12 p-0"> | 2 | <div class="col-12 p-0"> |
3 | 3 | ||
4 | <!-- NOMBRE DE SECCION --> | 4 | <!-- NOMBRE DE SECCION --> |
5 | <div class="row m-0"> | 5 | <div class="row m-0"> |
6 | <div class="col-12 p-0"> | 6 | <div class="col-12 p-0"> |
7 | <p class="h5 m-0 py-1 bg-gray text-muted text-center">Inicio</p> | 7 | <p class="h5 m-0 py-1 bg-gray text-muted text-center">Inicio</p> |
8 | </div> | 8 | </div> |
9 | </div> | 9 | </div> |
10 | 10 | ||
11 | <div class="row m-0 d-flex align-items-start disable-user-select"> | 11 | <div class="row m-0 d-flex align-items-start disable-user-select"> |
12 | <div class="col-md-5 py-3 pr-0 d-flex align-items-end flex-column"> | 12 | <div class="col-md-5 py-3 pr-0 d-flex align-items-end flex-column"> |
13 | 13 | ||
14 | <!-- PROMOCIONES --> | 14 | <!-- PROMOCIONES --> |
15 | <div | 15 | <div |
16 | (click)="irBusquedaProductos('promociones')" | 16 | (click)="irBusquedaProductos('promociones')" |
17 | class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> | 17 | class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> |
18 | <div class="card-body text-left px-4 py-3"> | 18 | <div class="card-body text-left px-4 py-3"> |
19 | <div class="row"> | 19 | <div class="row"> |
20 | <div class="col-auto"> | 20 | <div class="col-auto"> |
21 | <p class="m-0 h3 card-title">Promociones</p> | 21 | <p class="m-0 h3 card-title">Promociones</p> |
22 | </div> | 22 | </div> |
23 | <div class="col-auto p-0"> | 23 | <div class="col-auto p-0"> |
24 | <img src="{{apiImagenes}}/imagenes/primario.promociones.png" class="w-15 m-0"> | 24 | <img src="{{apiImagenes}}/imagenes/primario.promociones.png" class="w-15 m-0"> |
25 | </div> | 25 | </div> |
26 | </div> | 26 | </div> |
27 | <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> | 27 | <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> |
28 | </div> | 28 | </div> |
29 | <!-- CAROUSEL --> | 29 | <!-- CAROUSEL --> |
30 | <carousel [showIndicators]="false" [interval]="1500"> | 30 | <carousel [showIndicators]="false" [interval]="1500"> |
31 | <slide class="h-100"> | 31 | <slide class="h-100"> |
32 | <img | 32 | <img |
33 | src="{{apiImagenes}}/imagenes/beldent.jpg" | 33 | src="{{apiImagenes}}/imagenes/beldent.jpg" |
34 | class="fade-in d-block w-75 m-auto rounded"> | 34 | class="fade-in d-block w-75 m-auto rounded"> |
35 | </slide> | 35 | </slide> |
36 | <slide class="h-100"> | 36 | <slide class="h-100"> |
37 | <img | 37 | <img |
38 | src="{{apiImagenes}}/imagenes/cafe con leche y medialunas.jpg" | 38 | src="{{apiImagenes}}/imagenes/cafe con leche y medialunas.jpg" |
39 | class="fade-in d-block w-75 m-auto rounded"> | 39 | class="fade-in d-block w-75 m-auto rounded"> |
40 | </slide> | 40 | </slide> |
41 | <slide class="h-100"> | 41 | <slide class="h-100"> |
42 | <img | 42 | <img |
43 | src="{{apiImagenes}}/imagenes/Surtido bagley.jpg" | 43 | src="{{apiImagenes}}/imagenes/Surtido bagley.jpg" |
44 | class="fade-in d-block w-75 m-auto rounded"> | 44 | class="fade-in d-block w-75 m-auto rounded"> |
45 | </slide> | 45 | </slide> |
46 | <slide class="h-100"> | 46 | <slide class="h-100"> |
47 | <img | 47 | <img |
48 | src="{{apiImagenes}}/imagenes/yogurisimo.jpg" | 48 | src="{{apiImagenes}}/imagenes/yogurisimo.jpg" |
49 | class="fade-in d-block w-75 m-auto rounded"> | 49 | class="fade-in d-block w-75 m-auto rounded"> |
50 | </slide> | 50 | </slide> |
51 | </carousel> | 51 | </carousel> |
52 | </div> | 52 | </div> |
53 | 53 | ||
54 | <!-- ORDENAR --> | 54 | <!-- ORDENAR --> |
55 | <div (click)="irBusquedaProductos('ordenar')" | 55 | <div (click)="irBusquedaProductos('ordenar')" |
56 | class="card card-effect bg-white border-0 shadow rounded w-100 mt-3"> | 56 | class="card card-effect bg-white border-0 shadow rounded w-100 mt-3"> |
57 | <div class="card-body text-left px-4 py-3"> | 57 | <div class="card-body text-left px-4 py-3"> |
58 | <div class="row"> | 58 | <div class="row"> |
59 | <div class="col-auto"> | 59 | <div class="col-auto"> |
60 | <p class="m-0 h3 card-title">Ordenar Pedido</p> | 60 | <p class="m-0 h3 card-title">Ordenar Pedido</p> |
61 | </div> | 61 | </div> |
62 | <div class="col-auto p-0"> | 62 | <div class="col-auto p-0"> |
63 | <img src="{{apiImagenes}}/imagenes/primario.ordenar.png" class="w-15"> | 63 | <img src="{{apiImagenes}}/imagenes/primario.ordenar.png" class="w-15"> |
64 | </div> | 64 | </div> |
65 | </div> | 65 | </div> |
66 | <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> | 66 | <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> |
67 | </div> | 67 | </div> |
68 | <img | 68 | <img |
69 | class="card-img-bottom d-block w-100 mx-auto rounded" | 69 | class="card-img-bottom d-block w-100 mx-auto rounded" |
70 | src="{{apiImagenes}}/imagenes/cafe.jpg"> | 70 | src="{{apiImagenes}}/imagenes/cafe.jpg"> |
71 | </div> | 71 | </div> |
72 | </div> | 72 | </div> |
73 | 73 | ||
74 | <div class="col-md-7 py-3 d-flex align-items-end flex-column mt-4 mt-md-0"> | 74 | <div class="col-md-7 py-3 d-flex align-items-end flex-column mt-4 mt-md-0"> |
75 | 75 | ||
76 | <!-- CARGAR PRODUCTOS --> | 76 | <!-- CARGAR PRODUCTOS --> |
77 | <ng-template #popTemplate> | 77 | <ng-template #popTemplate> |
78 | <app-popover-promos | 78 | <app-popover-promos |
79 | *ngIf="promociones.length > 0 && sinonimos.length === 0" | 79 | *ngIf="promociones.length > 0 && sinonimos.length === 0" |
80 | [popover]="popoverDirective" | 80 | [popover]="popoverDirective" |
81 | [popoverContent]="promociones" | 81 | [popoverContent]="promociones" |
82 | (promoSeleccionada)="promoSeleccionada($event, false)" | 82 | (promoSeleccionada)="promoSeleccionada($event, false)" |
83 | class="text-white rounded-sm border-0"> | 83 | class="text-white rounded-sm border-0"> |
84 | </app-popover-promos> | 84 | </app-popover-promos> |
85 | <app-popover-sinonimos | 85 | <app-popover-sinonimos |
86 | *ngIf="sinonimos.length > 0" | 86 | *ngIf="sinonimos.length > 0" |
87 | [popover]="popoverDirective" | 87 | [popover]="popoverDirective" |
88 | [popoverContent]="sinonimos" | 88 | [popoverContent]="sinonimos" |
89 | (productosPersonalizados)="productosPersonalizados($event)" | 89 | (productosPersonalizados)="productosPersonalizados($event)" |
90 | class="text-white rounded-sm border-0"> | 90 | class="text-white rounded-sm border-0"> |
91 | </app-popover-sinonimos> | 91 | </app-popover-sinonimos> |
92 | </ng-template> | 92 | </ng-template> |
93 | <div | 93 | <div |
94 | placement="left" | 94 | placement="left" |
95 | triggers="" | 95 | triggers="" |
96 | [popover]="popTemplate" | 96 | [popover]="popTemplate" |
97 | class="w-100" | 97 | class="w-100" |
98 | #pop="bs-popover"> | 98 | #pop="bs-popover"> |
99 | <div class="card bg-white border-0 shadow rounded mb-auto"> | 99 | <div class="card bg-white border-0 shadow rounded mb-auto"> |
100 | <div class="card-body text-left px-4 py-3"> | 100 | <div class="card-body text-left px-4 py-3"> |
101 | <div class="row"> | 101 | <div class="row"> |
102 | <div class="col-auto"> | 102 | <div class="col-auto"> |
103 | <p class="m-0 h3 card-title">Cargar Productos</p> | 103 | <p class="m-0 h3 card-title">Cargar Productos</p> |
104 | </div> | 104 | </div> |
105 | <div class="col-auto p-0"> | 105 | <div class="col-auto p-0"> |
106 | <img src="{{apiImagenes}}/imagenes/escanear.png" class="w-15"> | 106 | <img src="{{apiImagenes}}/imagenes/escanear.png" class="w-15"> |
107 | </div> | 107 | </div> |
108 | </div> | 108 | </div> |
109 | <p class="h5 card-text text-muted font-weight-light"> | 109 | <p class="h5 card-text text-muted font-weight-light"> |
110 | Coloque un producto frente<br> | 110 | Coloque un producto frente<br> |
111 | al lector de códigos o selecciónelo en pantalla. | 111 | al lector de códigos o selecciónelo en pantalla. |
112 | </p> | 112 | </p> |
113 | </div> | 113 | </div> |
114 | <div class="row mx-3 mb-3"> | 114 | <div class="row mx-3 mb-3"> |
115 | <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm"> | 115 | <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm"> |
116 | <!-- IMAGEN DE ESCANER --> | 116 | <!-- IMAGEN DE ESCANER --> |
117 | <img | 117 | <img |
118 | *ngIf="!productoAcargar" | 118 | *ngIf="!productoAcargar" |
119 | class="card-img-top d-block w-100 mx-auto rounded-sm" | 119 | class="card-img-top d-block w-100 mx-auto rounded-sm" |
120 | src="{{apiImagenes}}/imagenes/escanner.jpg"> | 120 | src="{{apiImagenes}}/imagenes/escanner.jpg"> |
121 | 121 | ||
122 | <!-- PRODUCTO A CARGAR --> | 122 | <!-- PRODUCTO A CARGAR --> |
123 | <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar"> | 123 | <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar"> |
124 | <img | 124 | <img |
125 | class="card-img-top d-block w-75 mx-auto rounded-sm" | 125 | class="card-img-top d-block w-75 shadow mx-auto rounded-sm" |
126 | src="{{apiImagenes}}/imagenes/{{productoAcargar.imagenes[0].imagen}}"> | 126 | src="{{apiImagenes}}/imagenes/{{productoAcargar.imagenes[0].imagen}}"> |
127 | 127 | ||
128 | <div class="row justify-content-between m-3"> | 128 | <div class="row justify-content-between m-3"> |
129 | <div class="col-12 text-left px-1"> | 129 | <div class="col-12 text-left px-1"> |
130 | <p class="h6 font-weight-bold mb-0">{{productoAcargar.DET_LAR}}</p> | 130 | <p class="h6 font-weight-bold mb-0">{{productoAcargar.DET_LAR}}</p> |
131 | </div> | 131 | </div> |
132 | <div class="col-12 text-right mt-2"> | 132 | <div class="col-12 text-right mt-2"> |
133 | <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p> | 133 | <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p> |
134 | </div> | 134 | </div> |
135 | </div> | 135 | </div> |
136 | </div> | 136 | </div> |
137 | 137 | ||
138 | <!-- PROMO A CARGAR --> | 138 | <!-- PROMO A CARGAR --> |
139 | <div class="fade-in m-0" *ngIf="promoAcargar"> | 139 | <div class="fade-in m-0" *ngIf="promoAcargar"> |
140 | <img | 140 | <img |
141 | class="card-img-top d-block w-100 mx-auto rounded-sm" | 141 | class="card-img-top d-block w-100 mx-auto rounded-sm" |
142 | src="{{apiImagenes}}/imagenes/{{promoAcargar.imagenes[0].imagen}}"> | 142 | src="{{apiImagenes}}/imagenes/{{promoAcargar.imagenes[0].imagen}}"> |
143 | 143 | ||
144 | <div class="row justify-content-between m-3"> | 144 | <div class="row justify-content-between m-3"> |
145 | <div class="col-12 text-left px-1"> | 145 | <div class="col-12 text-left px-1"> |
146 | <p class="h6 font-weight-bold mb-0">{{promoAcargar.DET_LAR}}</p> | 146 | <p class="h6 font-weight-bold mb-0">{{promoAcargar.DET_LAR}}</p> |
147 | </div> | 147 | </div> |
148 | <div class="col-12 text-right mt-2 align-self-end"> | 148 | <div class="col-12 text-right mt-2 align-self-end"> |
149 | <p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen | currency}}</p> | 149 | <p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen | currency}}</p> |
150 | </div> | 150 | </div> |
151 | </div> | 151 | </div> |
152 | </div> | 152 | </div> |
153 | 153 | ||
154 | </div> | 154 | </div> |
155 | <!-- BOTONES DE CARGAR PRODUCTOS--> | 155 | <!-- BOTONES DE CARGAR PRODUCTOS--> |
156 | <div | 156 | <div |
157 | class="col-5 pr-0" | 157 | class="col-5 pr-0" |
158 | *ngIf="promociones.length > 0"> | 158 | *ngIf="promociones.length > 0"> |
159 | <button | 159 | <button |
160 | *ngIf="!promoAcargar || sinonimos.length == 0" | 160 | *ngIf="!promoAcargar || sinonimos.length == 0" |
161 | type="button" | 161 | type="button" |
162 | class="btn btn-primary btn-block shadow-sm" | 162 | class="btn btn-primary btn-block shadow-sm" |
163 | (click)="pop.show()"> | 163 | (click)="pop.show()"> |
164 | <span class="pr-2">Mostrar promociones</span> | 164 | <span class="pr-2">Mostrar promociones</span> |
165 | <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i> | 165 | <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i> |
166 | </button> | 166 | </button> |
167 | <button | 167 | <button |
168 | *ngIf="sinonimos.length == 0" | 168 | *ngIf="sinonimos.length == 0" |
169 | type="button" | 169 | type="button" |
170 | class="btn btn-light btn-block shadow-sm my-3" | 170 | class="btn btn-light btn-block shadow-sm my-3" |
171 | (click)="confirmarProducto()"> | 171 | (click)="confirmarProducto()"> |
172 | <span class="pr-2 font-weight-bold">Confirmar</span> | 172 | <span class="pr-2 font-weight-bold">Confirmar</span> |
173 | <i class="fa fa-check text-success" aria-hidden="true"></i> | 173 | <i class="fa fa-check text-success" aria-hidden="true"></i> |
174 | </button> | 174 | </button> |
175 | <button | 175 | <button |
176 | type="button" | 176 | type="button" |
177 | class="btn btn-light btn-block shadow-sm" | 177 | class="btn btn-light btn-block shadow-sm" |
178 | (click)="deshacerCarga()"> | 178 | (click)="deshacerCarga()"> |
179 | <span class="pr-2">Deshacer</span> | 179 | <span class="pr-2">Deshacer</span> |
180 | <i class="fa fa-undo text-warning" aria-hidden="true"></i> | 180 | <i class="fa fa-undo text-warning" aria-hidden="true"></i> |
181 | </button> | 181 | </button> |
182 | </div> | 182 | </div> |
183 | </div> | 183 | </div> |
184 | </div> | 184 | </div> |
185 | </div> | 185 | </div> |
186 | 186 | ||
187 | <!-- BUSCAR PRODUCTOS --> | 187 | <!-- BUSCAR PRODUCTOS --> |
188 | <div (click)="irBusquedaProductos('todos')" | 188 | <div (click)="irBusquedaProductos('todos')" |
189 | class="card card-effect bg-white border-0 shadow rounded w-100 mt-3"> | 189 | class="card card-effect bg-white border-0 shadow rounded w-100 mt-3"> |
190 | <div class="card-body text-left px-4 py-3"> | 190 | <div class="card-body text-left px-4 py-3"> |
191 | <div class="row"> | 191 | <div class="row"> |
192 | <div class="col-auto"> | 192 | <div class="col-auto"> |
193 | <p class="m-0 h3 card-title">Buscar Productos</p> | 193 | <p class="m-0 h3 card-title">Buscar Productos</p> |
194 | <p class="h5 card-text text-muted font-weight-light"> | 194 | <p class="h5 card-text text-muted font-weight-light"> |
195 | Busque aquí los productos<br> | 195 | Busque aquí los productos<br> |
196 | que no tienen código.</p> | 196 | que no tienen código.</p> |
197 | </div> | 197 | </div> |
198 | <div class="col-auto p-0"> | 198 | <div class="col-auto p-0"> |
199 | <img src="{{apiImagenes}}/imagenes/primario.buscar.png" class="w-15"> | 199 | <img src="{{apiImagenes}}/imagenes/primario.buscar.png" class="w-15"> |
200 | </div> | 200 | </div> |
201 | </div> | 201 | </div> |
202 | 202 | ||
203 | </div> | 203 | </div> |
204 | </div> | 204 | </div> |
205 | 205 | ||
206 | </div> | 206 | </div> |
207 | 207 | ||
208 | </div> | 208 | </div> |
209 | 209 | ||
210 | </div> | 210 | </div> |
211 | </div> | 211 | </div> |
212 | 212 |
src/app/components/master/master.component.html
1 | <div class="container-fluid m-0 p-0"> | 1 | <div class="container-fluid m-0 p-0"> |
2 | 2 | ||
3 | <div class="row m-0 fade-in" (click)="reiniciarTimer"> | 3 | <div class="row m-0 fade-in" (click)="reiniciarTimer()"> |
4 | <div class="col-10 p-0 vh-100"> | 4 | <div class="col-10 p-0 vh-100"> |
5 | 5 | ||
6 | <!-- TOP HEADER --> | 6 | <!-- TOP HEADER --> |
7 | <app-header></app-header> | 7 | <app-header></app-header> |
8 | 8 | ||
9 | <router-outlet></router-outlet> | 9 | <router-outlet></router-outlet> |
10 | 10 | ||
11 | </div> | 11 | </div> |
12 | 12 | ||
13 | <!-- SIDEBAR --> | 13 | <!-- SIDEBAR --> |
14 | <app-sidebar | 14 | <app-sidebar |
15 | class="sidebar position-fixed float-right col-2 col-md-2 vh-100 bg-primary-gradient px-1 pt-2"> | 15 | class="sidebar position-fixed float-right col-2 col-md-2 vh-100 bg-primary-gradient px-1 pt-2"> |
16 | </app-sidebar> | 16 | </app-sidebar> |
17 | </div> | 17 | </div> |
18 | 18 | ||
19 | </div> | 19 | </div> |
20 | 20 |