Martin Macola / autoservicio

Download as
Browse Code »

Commit 099c7c0baa2833564426e9a695b4d8d8bef1b519

Authored by Marcelo Puebla
1 parent da27feb175
Exists in master

Cambiado carousel.

Showing 5 changed files with 56 additions and 38 deletions   Show diff stats
src/app/app.module.ts
Diff comments   View file @ 099c7c0
1 //#region MODULES 1 //#region MODULES
2 import { BrowserModule } from '@angular/platform-browser'; 2 import { BrowserModule } from '@angular/platform-browser';
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 { TooltipModule } from 'ngx-bootstrap/tooltip'; 7 import { TooltipModule } from 'ngx-bootstrap/tooltip';
8 import { PopoverModule } from 'ngx-bootstrap/popover'; 8 import { PopoverModule } from 'ngx-bootstrap/popover';
9 import { CarouselModule } from 'ngx-bootstrap/carousel';
9 //#endregion 10 //#endregion
10 11
11 //#region Keyboard 12 //#region Keyboard
12 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 13 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
13 import { MatButtonModule } from '@angular/material/button'; 14 import { MatButtonModule } from '@angular/material/button';
14 import { MatKeyboardModule } from '@ngx-material-keyboard/core'; 15 import { MatKeyboardModule } from '@ngx-material-keyboard/core';
15 //#endregion 16 //#endregion
16 17
17 //#region COMPONENTS 18 //#region COMPONENTS
18 import { AppComponent } from './app.component'; 19 import { AppComponent } from './app.component';
19 import { HeaderComponent } from './components/header/header.component'; 20 import { HeaderComponent } from './components/header/header.component';
20 import { SidebarComponent } from './components/sidebar/sidebar.component'; 21 import { SidebarComponent } from './components/sidebar/sidebar.component';
21 import { HomeComponent } from './components/home/home.component'; 22 import { HomeComponent } from './components/home/home.component';
22 import { InicioComponent } from './components/inicio/inicio.component'; 23 import { InicioComponent } from './components/inicio/inicio.component';
23 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; 24 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
24 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component'; 25 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
25 import { MasterComponent } from './components/master/master.component'; 26 import { MasterComponent } from './components/master/master.component';
26 import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component'; 27 import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component';
27 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component'; 28 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component';
28 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component'; 29 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
29 import { PagoComponent } from './components/pago/pago.component'; 30 import { PagoComponent } from './components/pago/pago.component';
30 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component'; 31 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component';
31 import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component'; 32 import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component';
32 //#endregion 33 //#endregion
33 34
34 @NgModule({ 35 @NgModule({
35 declarations: [ 36 declarations: [
36 AppComponent, 37 AppComponent,
37 HeaderComponent, 38 HeaderComponent,
38 SidebarComponent, 39 SidebarComponent,
39 HomeComponent, 40 HomeComponent,
40 InicioComponent, 41 InicioComponent,
41 BusquedaProductosComponent, 42 BusquedaProductosComponent,
42 ConfirmacionCarritoComponent, 43 ConfirmacionCarritoComponent,
43 MasterComponent, 44 MasterComponent,
44 PopoverPromosComponent, 45 PopoverPromosComponent,
45 PopoverSinonimosComponent, 46 PopoverSinonimosComponent,
46 AmbImagenesComponent, 47 AmbImagenesComponent,
47 PagoComponent, 48 PagoComponent,
48 CancelarCompraComponent, 49 CancelarCompraComponent,
49 MensajeFinalComponent 50 MensajeFinalComponent
50 ], 51 ],
51 imports: [ 52 imports: [
52 BrowserModule, 53 BrowserModule,
53 AppRoutingModule, 54 AppRoutingModule,
54 HttpClientModule, 55 HttpClientModule,
55 FormsModule, 56 FormsModule,
56 ReactiveFormsModule, 57 ReactiveFormsModule,
57 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }), 58 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
58 TooltipModule.forRoot(), 59 TooltipModule.forRoot(),
59 PopoverModule.forRoot(), 60 PopoverModule.forRoot(),
60 BrowserAnimationsModule, 61 BrowserAnimationsModule,
61 MatKeyboardModule, 62 MatKeyboardModule,
62 MatButtonModule 63 MatButtonModule,
64 CarouselModule.forRoot()
63 ], 65 ],
64 providers: [], 66 providers: [],
65 bootstrap: [AppComponent] 67 bootstrap: [AppComponent]
66 }) 68 })
67 export class AppModule { } 69 export class AppModule { }
68 70
src/app/components/home/home.component.html
Diff comments   View file @ 099c7c0
1 <div class="container-fluid p-0"> 1 <div class="container-fluid p-0">
2 <img 2 <img
3 src="{{apiUrl}}/imagenes/homeBackground.jpg" 3 src="{{apiUrl}}/imagenes/homeBackground.jpg"
4 class="background-image vh-100 w-100"> 4 class="background-image vh-100 w-100">
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col p-0"> 6 <div class="col p-0">
7 <div 7 <div
8 class="vh-100 fade-in d-flex align-items-start flex-column disable-user-select" 8 class="vh-100 fade-in d-flex align-items-start flex-column disable-user-select"
9 [routerLink]="['/inicio']"> 9 [routerLink]="['/inicio']">
10 10
11 <!-- HEADER --> 11 <!-- HEADER -->
12 <div class="row m-0 w-100 bg-primary-gradient-horizontal"> 12 <div class="row m-0 w-100 bg-primary-gradient-horizontal">
13 <div class="col-6 bg-white p-3 rounded-bottom-right"> 13 <div class="col-6 bg-white p-3 rounded-bottom-right">
14 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoempresa.png"> 14 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoempresa.png">
15 </div> 15 </div>
16 </div> 16 </div>
17 17
18 <!-- INFO DE BIENVENIDA --> 18 <!-- INFO DE BIENVENIDA -->
19 <div class="row my-auto h-50 w-100"> 19 <div class="row my-auto h-50 w-100">
20 <div class="col-3 col-lg-4 offset-lg-1 h-100 my-auto"> 20 <div class="col-3 col-lg-4 offset-lg-1 h-100 my-auto">
21 21 <!-- CAROUSEL -->
22 <div id="carouselExampleSlidesOnly" class="carousel slide h-100" data-ride="carousel"> 22 <carousel [showIndicators]="false" [interval]="1500">
23 <div class="carousel-inner h-100"> 23 <slide class="h-100">
24 <div class="carousel-item active h-100"> 24 <img
25 <img 25 src="{{apiUrl}}/imagenes/coca1.jpg"
26 src="{{apiUrl}}/imagenes/coca1.jpg" 26 class="fade-in d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto">
27 class="d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto"> 27 </slide>
28 </div> 28 <slide class="h-100">
29 <div class="carousel-item h-100"> 29 <img
30 <img 30 src="{{apiUrl}}/imagenes/coca2.jpg"
31 src="{{apiUrl}}/imagenes/coca2.jpg" 31 class="fade-in d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto">
32 class="d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto"> 32 </slide>
33 </div> 33 <slide class="h-100">
34 <div class="carousel-item h-100"> 34 <img
35 <img 35 src="{{apiUrl}}/imagenes/coca3.jpg"
36 src="{{apiUrl}}/imagenes/coca3.jpg" 36 class="fade-in d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto">
37 class="d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto"> 37 </slide>
38 </div> 38 </carousel>
39 </div>
40 </div>
41 39
42 </div> 40 </div>
43 <div class="col-9 col-lg-7 text-center text-white my-auto"> 41 <div class="col-9 col-lg-7 text-center text-white my-auto">
44 <p class="display-2 font-weight-bold mb-5">¡BIENVENIDO!</p> 42 <p class="display-2 font-weight-bold mb-5">¡BIENVENIDO!</p>
45 <p class="display-3 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p> 43 <p class="display-3 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p>
46 </div> 44 </div>
47 </div> 45 </div>
48 46
49 <!-- FOOTER --> 47 <!-- FOOTER -->
50 <div class="row m-0 w-100 bg-gray"> 48 <div class="row m-0 w-100 bg-gray">
51 <div class="col-6 bg-white offset-6 p-3 rounded-top-left"> 49 <div class="col-6 bg-white offset-6 p-3 rounded-top-left">
52 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png"> 50 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png">
53 </div> 51 </div>
54 </div> 52 </div>
55 53
56 </div> 54 </div>
57 </div> 55 </div>
58 </div> 56 </div>
59 </div> 57 </div>
60 58
src/app/components/inicio/inicio.component.html
Diff comments   View file @ 099c7c0
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 py-1 bg-gray text-muted text-center">Inicio</p> 7 <p class="h5 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-3 d-flex align-items-start disable-user-select"> 11 <div class="row m-3 d-flex align-items-start disable-user-select">
12 <div class="col-md-5 d-flex align-items-end flex-column"> 12 <div class="col-md-5 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="h3 card-title">Promociones</p> 21 <p class="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="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0"> 24 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim 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 <div id="carouselIndicators" class="carousel slide" data-ride="carousel"> 29 <!-- CAROUSEL -->
30 <div class="carousel-inner"> 30 <carousel [showIndicators]="false" [interval]="1500">
31 <div class="carousel-item active"> 31 <slide class="h-100">
32 <img src="{{apiUrl}}/imagenes/beldent.jpg" class="d-block w-75 m-auto rounded"> 32 <img
33 </div> 33 src="{{apiUrl}}/imagenes/beldent.jpg"
34 <div class="carousel-item"> 34 class="fade-in d-block w-75 m-auto rounded">
35 <img src="{{apiUrl}}/imagenes/cafe con leche y medialunas.jpg" class="d-block w-75 m-auto rounded"> 35 </slide>
36 </div> 36 <slide class="h-100">
37 <div class="carousel-item"> 37 <img
38 <img src="{{apiUrl}}/imagenes/Surtido bagley.jpg" class="d-block w-75 m-auto rounded"> 38 src="{{apiUrl}}/imagenes/cafe con leche y medialunas.jpg"
39 </div> 39 class="fade-in d-block w-75 m-auto rounded">
40 <div class="carousel-item"> 40 </slide>
41 <img src="{{apiUrl}}/imagenes/yogurisimo.jpg" class="d-block w-75 m-auto rounded"> 41 <slide class="h-100">
42 </div> 42 <img
43 </div> 43 src="{{apiUrl}}/imagenes/Surtido bagley.jpg"
44 </div> 44 class="fade-in d-block w-75 m-auto rounded">
45 </slide>
46 <slide class="h-100">
47 <img
48 src="{{apiUrl}}/imagenes/yogurisimo.jpg"
49 class="fade-in d-block w-75 m-auto rounded">
50 </slide>
51 </carousel>
45 </div> 52 </div>
46 53
47 <!-- ORDENAR --> 54 <!-- ORDENAR -->
48 <div (click)="irBusquedaProductos('ordenar')" 55 <div (click)="irBusquedaProductos('ordenar')"
49 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 56 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
50 <div class="card-body text-left px-4 py-3"> 57 <div class="card-body text-left px-4 py-3">
51 <div class="row"> 58 <div class="row">
52 <div class="col-auto"> 59 <div class="col-auto">
53 <p class="h3 card-title">Ordenar Pedido</p> 60 <p class="h3 card-title">Ordenar Pedido</p>
54 </div> 61 </div>
55 <div class="col-auto p-0"> 62 <div class="col-auto p-0">
56 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim"> 63 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim">
57 </div> 64 </div>
58 </div> 65 </div>
59 <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>
60 </div> 67 </div>
61 <img 68 <img
62 class="card-img-bottom d-block w-100 mx-auto rounded" 69 class="card-img-bottom d-block w-100 mx-auto rounded"
63 src="{{apiUrl}}/imagenes/cafe.jpg"> 70 src="{{apiUrl}}/imagenes/cafe.jpg">
64 </div> 71 </div>
65 </div> 72 </div>
66 73
67 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0"> 74 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0">
68 75
69 <!-- CARGAR PRODUCTOS --> 76 <!-- CARGAR PRODUCTOS -->
70 <ng-template #popTemplate> 77 <ng-template #popTemplate>
71 <app-popover-promos 78 <app-popover-promos
72 *ngIf="promociones.length > 0 && sinonimos.length === 0" 79 *ngIf="promociones.length > 0 && sinonimos.length === 0"
73 [popover]="popoverDirective" 80 [popover]="popoverDirective"
74 [popoverContent]="promociones" 81 [popoverContent]="promociones"
75 (promoSeleccionada)="promoSeleccionada($event, false)" 82 (promoSeleccionada)="promoSeleccionada($event, false)"
76 class="text-white rounded-sm border-0"> 83 class="text-white rounded-sm border-0">
77 </app-popover-promos> 84 </app-popover-promos>
78 <app-popover-sinonimos 85 <app-popover-sinonimos
79 *ngIf="sinonimos.length > 0" 86 *ngIf="sinonimos.length > 0"
80 [popover]="popoverDirective" 87 [popover]="popoverDirective"
81 [popoverContent]="sinonimos" 88 [popoverContent]="sinonimos"
82 (productosPersonalizados)="productosPersonalizados($event)" 89 (productosPersonalizados)="productosPersonalizados($event)"
83 class="text-white rounded-sm border-0"> 90 class="text-white rounded-sm border-0">
84 </app-popover-sinonimos> 91 </app-popover-sinonimos>
85 </ng-template> 92 </ng-template>
86 <div 93 <div
87 placement="left" 94 placement="left"
88 triggers="" 95 triggers=""
89 [popover]="popTemplate" 96 [popover]="popTemplate"
90 class="w-100" 97 class="w-100"
91 #pop="bs-popover"> 98 #pop="bs-popover">
92 <div class="card bg-white border-0 shadow rounded mb-auto"> 99 <div class="card bg-white border-0 shadow rounded mb-auto">
93 <div class="card-body text-left px-4 py-3"> 100 <div class="card-body text-left px-4 py-3">
94 <div class="row"> 101 <div class="row">
95 <div class="col-auto"> 102 <div class="col-auto">
96 <p class="h3 card-title">Cargar Productos</p> 103 <p class="h3 card-title">Cargar Productos</p>
97 </div> 104 </div>
98 <div class="col-auto p-0"> 105 <div class="col-auto p-0">
99 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2"> 106 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2">
100 </div> 107 </div>
101 </div> 108 </div>
102 <p class="h5 card-text text-muted font-weight-light"> 109 <p class="h5 card-text text-muted font-weight-light">
103 Coloque un producto frente<br> 110 Coloque un producto frente<br>
104 al lector de códigos o selecciónelo en pantalla. 111 al lector de códigos o selecciónelo en pantalla.
105 </p> 112 </p>
106 </div> 113 </div>
107 <div class="row m-4"> 114 <div class="row m-4">
108 <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">
109 <!-- IMAGEN DE ESCANER --> 116 <!-- IMAGEN DE ESCANER -->
110 <img 117 <img
111 *ngIf="!productoAcargar" 118 *ngIf="!productoAcargar"
112 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"
113 src="{{apiUrl}}/imagenes/escanner.jpg"> 120 src="{{apiUrl}}/imagenes/escanner.jpg">
114 121
115 <!-- PRODUCTO A CARGAR --> 122 <!-- PRODUCTO A CARGAR -->
116 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar"> 123 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar">
117 <img 124 <img
118 class="card-img-top d-block w-75 mx-auto rounded-sm" 125 class="card-img-top d-block w-75 mx-auto rounded-sm"
119 src="{{apiUrl}}/imagenes/{{productoAcargar.imagenes[0].imagen}}"> 126 src="{{apiUrl}}/imagenes/{{productoAcargar.imagenes[0].imagen}}">
120 127
121 <div class="row justify-content-between m-3"> 128 <div class="row justify-content-between m-3">
122 <div class="col-12 text-left px-1"> 129 <div class="col-12 text-left px-1">
123 <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>
124 </div> 131 </div>
125 <div class="col-12 text-right mt-2"> 132 <div class="col-12 text-right mt-2">
126 <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>
127 </div> 134 </div>
128 </div> 135 </div>
129 </div> 136 </div>
130 137
131 <!-- PROMO A CARGAR --> 138 <!-- PROMO A CARGAR -->
132 <div class="fade-in m-0" *ngIf="promoAcargar"> 139 <div class="fade-in m-0" *ngIf="promoAcargar">
133 <img 140 <img
134 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"
135 src="{{apiUrl}}/imagenes/{{promoAcargar.imagenes[0].imagen}}"> 142 src="{{apiUrl}}/imagenes/{{promoAcargar.imagenes[0].imagen}}">
136 143
137 <div class="row justify-content-between m-3"> 144 <div class="row justify-content-between m-3">
138 <div class="col-12 text-left px-1"> 145 <div class="col-12 text-left px-1">
139 <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>
140 </div> 147 </div>
141 <div class="col-12 text-right mt-2 align-self-end"> 148 <div class="col-12 text-right mt-2 align-self-end">
142 <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>
143 </div> 150 </div>
144 </div> 151 </div>
145 </div> 152 </div>
146 153
147 </div> 154 </div>
148 <!-- BOTONES DE CARGAR PRODUCTOS--> 155 <!-- BOTONES DE CARGAR PRODUCTOS-->
149 <div 156 <div
150 class="col-5 pr-0" 157 class="col-5 pr-0"
151 *ngIf="promociones.length > 0"> 158 *ngIf="promociones.length > 0">
152 <button 159 <button
153 *ngIf="!promoAcargar || sinonimos.length == 0" 160 *ngIf="!promoAcargar || sinonimos.length == 0"
154 type="button" 161 type="button"
155 class="btn btn-primary btn-block shadow-sm" 162 class="btn btn-primary btn-block shadow-sm"
156 (click)="pop.show()"> 163 (click)="pop.show()">
157 <span class="pr-2">Mostrar promociones</span> 164 <span class="pr-2">Mostrar promociones</span>
158 <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>
159 </button> 166 </button>
160 <button 167 <button
161 type="button" 168 type="button"
162 class="btn btn-light btn-block shadow-sm my-3" 169 class="btn btn-light btn-block shadow-sm my-3"
163 (click)="confirmarProducto()"> 170 (click)="confirmarProducto()">
164 <span class="pr-2 font-weight-bold">Confirmar</span> 171 <span class="pr-2 font-weight-bold">Confirmar</span>
165 <i class="fa fa-check text-success" aria-hidden="true"></i> 172 <i class="fa fa-check text-success" aria-hidden="true"></i>
166 </button> 173 </button>
167 <button 174 <button
168 type="button" 175 type="button"
169 class="btn btn-light btn-block shadow-sm" 176 class="btn btn-light btn-block shadow-sm"
170 (click)="deshacerCarga()"> 177 (click)="deshacerCarga()">
171 <span class="pr-2">Deshacer</span> 178 <span class="pr-2">Deshacer</span>
172 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 179 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
173 </button> 180 </button>
174 </div> 181 </div>
175 </div> 182 </div>
176 </div> 183 </div>
177 </div> 184 </div>
178 185
179 <!-- BUSCAR PRODUCTOS --> 186 <!-- BUSCAR PRODUCTOS -->
180 <div (click)="irBusquedaProductos('todos')" 187 <div (click)="irBusquedaProductos('todos')"
181 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 188 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
182 <div class="card-body text-left px-4 py-3"> 189 <div class="card-body text-left px-4 py-3">
183 <div class="row"> 190 <div class="row">
184 <div class="col-auto"> 191 <div class="col-auto">
185 <p class="h3 card-title">Buscar Productos</p> 192 <p class="h3 card-title">Buscar Productos</p>
186 <p class="h5 card-text text-muted font-weight-light"> 193 <p class="h5 card-text text-muted font-weight-light">
187 Busque aquí los productos<br> 194 Busque aquí los productos<br>
188 que no tienen código.</p> 195 que no tienen código.</p>
189 </div> 196 </div>
190 <div class="col-auto p-0"> 197 <div class="col-auto p-0">
191 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2"> 198 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2">
192 </div> 199 </div>
193 </div> 200 </div>
194 201
195 </div> 202 </div>
196 </div> 203 </div>
197 204
198 </div> 205 </div>
199 206
200 </div> 207 </div>
201 208
202 </div> 209 </div>
203 </div> 210 </div>
204 211
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ 099c7c0
1 <div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center"> 1 <div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center">
2 2
3 <!-- ENCABEZADO --> 3 <!-- ENCABEZADO -->
4 <p class="h4 border-bottom border-white text-white mt-4 pb-2"> 4 <p class="h4 border-bottom border-white text-white mt-4 pb-2">
5 Mi compra 5 Mi compra
6 <i class="fa fa-shopping-cart" aria-hidden="true"></i> 6 <i class="fa fa-shopping-cart" aria-hidden="true"></i>
7 </p> 7 </p>
8 8
9 <div class="overflow-auto overflow-scroll mb-2 w-100"> 9 <div class="overflow-auto overflow-scroll mb-2 w-100">
10 <!-- PRODUCTOS CARRITO --> 10 <!-- PRODUCTOS CARRITO -->
11 <div 11 <div
12 class="slide-in-bl my-2 bg-white border-0 rounded-sm" 12 class="slide-in-bl my-2 bg-white border-0 rounded-sm"
13 *ngFor="let producto of productosCarrito.slice().reverse(); let i = index"> 13 *ngFor="let producto of productosCarrito.slice().reverse(); let i = index">
14 <img class="w-100 m-auto rounded-sm shadow" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}"> 14 <img class="w-100 m-auto rounded-sm shadow" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}">
15 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm"> 15 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">
16 <div class="col-12 p-0 pt-2 text-left my-auto"> 16 <div class="col-12 p-0 pt-2 text-left my-auto">
17 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> 17 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
18 </div> 18 </div>
19 <div class="col-12 pr-1 text-right h6 my-auto "> 19 <div class="col-12 pr-1 text-right h6 my-auto ">
20 <p class="m-0">{{producto.PreVen | currency}}</p> 20 <p class="m-0">{{producto.PreVen | currency}}</p>
21 </div> 21 </div>
22 </div> 22 </div>
23 23
24 <!-- BOTONES --> 24 <!-- BOTONES -->
25 <div class="row m-0 d-flex justify-content-between"> 25 <div class="row m-0 d-flex justify-content-between">
26 26
27 <!-- SUMAR - RESTAR CANTIDAD --> 27 <!-- SUMAR - RESTAR CANTIDAD -->
28 <div class="col-auto px-1 my-2"> 28 <div class="col-auto px-1 my-2">
29 <div class="btn-group-sm btn-group float-left my-auto" role="group"> 29 <div class="btn-group-sm btn-group float-left my-auto" role="group">
30 <button 30 <button
31 type="button" 31 type="button"
32 class="btn btn-light btn-sm my-auto border shadow" 32 class="btn btn-light btn-sm my-auto border shadow"
33 (click)="aumentarCantidad(producto)"> 33 (click)="aumentarCantidad(producto)">
34 <i class="fa fa-plus" aria-hidden="true"></i> 34 <i class="fa fa-plus" aria-hidden="true"></i>
35 </button> 35 </button>
36 <div class="bg-white border border-white px-3 my-auto text-dark h5 shadow"> 36 <div class="bg-white border border-white px-2 my-auto text-dark h5 shadow">
37 <small>{{producto.cantidad}}</small> 37 <small>{{producto.cantidad}}</small>
38 </div> 38 </div>
39 <button 39 <button
40 type="button" 40 type="button"
41 class="btn btn-light btn-sm my-auto border shadow" 41 class="btn btn-light btn-sm my-auto border shadow"
42 (click)="restarCantidad(producto)"> 42 (click)="restarCantidad(producto)">
43 <i class="fa fa-minus" aria-hidden="true"></i> 43 <i class="fa fa-minus" aria-hidden="true"></i>
44 </button> 44 </button>
45 </div> 45 </div>
46 </div> 46 </div>
47 47
48 <!-- PERSONALIZAR --> 48 <!-- PERSONALIZAR -->
49 <div class="col-auto px-1 my-2"> 49 <div class="col-auto px-1 my-2">
50 <button 50 <button
51 *ngIf="producto.tieneSinonimos" 51 *ngIf="producto.tieneSinonimos"
52 type="button" 52 type="button"
53 class="btn btn-light btn-sm my-auto float-left border shadow" 53 class="btn btn-light btn-sm my-auto float-left border shadow"
54 (click)="personalizarPromo(producto, i)"> 54 (click)="personalizarPromo(producto, i)">
55 <i class="fa fa-refresh text-purple" aria-hidden="true"></i> 55 <i class="fa fa-refresh text-purple" aria-hidden="true"></i>
56 </button> 56 </button>
57 </div> 57 </div>
58 58
59 <!-- BORRAR --> 59 <!-- BORRAR -->
60 <div class="col-auto px-1 my-2"> 60 <div class="col-auto px-1 my-2">
61 <button 61 <button
62 type="button" 62 type="button"
63 class="btn btn-secondary btn-sm my-auto shadow" 63 class="btn btn-secondary btn-sm my-auto shadow"
64 (click)="deleteProducto(producto, i)"> 64 (click)="deleteProducto(producto, i)">
65 <i class="fa fa-trash" aria-hidden="true"></i> 65 <i class="fa fa-trash" aria-hidden="true"></i>
66 </button> 66 </button>
67 </div> 67 </div>
68 </div> 68 </div>
69 </div> 69 </div>
70 </div> 70 </div>
71 71
72 <!-- TOTAL --> 72 <!-- TOTAL -->
73 <div class="card rounded-top-sm mt-auto blue-gradient border-0"> 73 <div class="card rounded-top-sm mt-auto blue-gradient border-0">
74 <div class="card-body row"> 74 <div class="card-body row">
75 <div class="col-12"> 75 <div class="col-12">
76 <p 76 <p
77 class="h4 border-bottom border-secondary text-secondary pb-2"> 77 class="h4 border-bottom border-secondary text-secondary pb-2">
78 ({{getCantidadProductos()}}) artículos 78 ({{getCantidadProductos()}}) artículos
79 </p> 79 </p>
80 <p class="h3 text-secondary">Total</p> 80 <p class="h3 text-secondary">Total</p>
81 <p class="h3 font-weight-bold">{{getTotal() | currency}}</p> 81 <p class="h3 font-weight-bold">{{getTotal() | currency}}</p>
82 </div> 82 </div>
83 <div class="col-12"> 83 <div class="col-12">
84 <button 84 <button
85 *ngIf="getCantidadProductos() > 0" 85 *ngIf="getCantidadProductos() > 0"
86 type="button" 86 type="button"
87 class="btn btn-block btn-light btn-lg shadow mb-2 p-1" 87 class="btn btn-block btn-light btn-lg shadow mb-2 p-1"
88 routerLink="/confirmacion-carrito"> 88 routerLink="/confirmacion-carrito">
89 <span class="font-weight-bold pr-1">Finalizar y Pagar</span> 89 <span class="font-weight-bold pr-1">Finalizar y Pagar</span>
90 <i class="fa fa-check text-success" aria-hidden="true"></i> 90 <i class="fa fa-check text-success" aria-hidden="true"></i>
91 </button> 91 </button>
92 <button 92 <button
93 type="button" 93 type="button"
94 class="btn btn-block btn-light shadow btn-sm shadow" 94 class="btn btn-block btn-light shadow btn-sm shadow"
95 [routerLink]="['/cancelar-compra']"> 95 [routerLink]="['/cancelar-compra']">
96 <span class="pr-1">Cancelar</span> 96 <span class="pr-1">Cancelar</span>
97 <i class="fa fa-times text-danger" aria-hidden="true"></i> 97 <i class="fa fa-times text-danger" aria-hidden="true"></i>
98 </button> 98 </button>
99 </div> 99 </div>
100 </div> 100 </div>
101 </div> 101 </div>
102 </div> 102 </div>
103 103
src/assets/scss/bootstrap-override.scss
Diff comments   View file @ 099c7c0
1 @import "../../../node_modules/bootstrap/scss/functions"; 1 @import "../../../node_modules/bootstrap/scss/functions";
2 @import "../../../node_modules/bootstrap/scss/variables"; 2 @import "../../../node_modules/bootstrap/scss/variables";
3 @import "../../../node_modules/bootstrap/scss/mixins"; 3 @import "../../../node_modules/bootstrap/scss/mixins";
4 4
5 $primary: #2872ae; 5 $primary: #2872ae;
6 6
7 $theme-colors: ( 7 $theme-colors: (
8 primary: $primary, 8 primary: $primary,
9 light: white 9 light: white
10 ); 10 );
11 11
12 .popover { 12 .popover {
13 transform: translate3d(-425px, 0, -34px) !important; 13 transform: translate3d(-425px, 0, -34px) !important;
14 min-width: 350px !important; 14 min-width: 350px !important;
15 max-width: 425px !important; 15 max-width: 425px !important;
16 border: none !important; 16 border: none !important;
17 border-radius: 1.5rem !important; 17 border-radius: 1.5rem !important;
18 padding: 0 !important; 18 padding: 0 !important;
19 background-color: $primary !important; 19 background-color: $primary !important;
20 .popover-body { 20 .popover-body {
21 padding: 0 !important; 21 padding: 0 !important;
22 } 22 }
23 } 23 }
24 24
25 .bs-popover-left .arrow::after, 25 .bs-popover-left .arrow::after,
26 .bs-popover-auto[x-placement^="left"] .arrow::after { 26 .bs-popover-auto[x-placement^="left"] .arrow::after {
27 border-left-color: $primary !important; 27 border-left-color: $primary !important;
28 } 28 }
29 29
30 .bs-popover-right .arrow::after, 30 .bs-popover-right .arrow::after,
31 .bs-popover-auto[x-placement^="right"] .arrow::after { 31 .bs-popover-auto[x-placement^="right"] .arrow::after {
32 border-right-color: $primary !important; 32 border-right-color: $primary !important;
33 } 33 }
34 34
35 .bs-popover-top .arrow::after, 35 .bs-popover-top .arrow::after,
36 .bs-popover-auto[x-placement^="top"] .arrow::after { 36 .bs-popover-auto[x-placement^="top"] .arrow::after {
37 border-top-color: $primary !important; 37 border-top-color: $primary !important;
38 } 38 }
39 39
40 .bs-popover-bottom .arrow::after, 40 .bs-popover-bottom .arrow::after,
41 .bs-popover-auto[x-placement^="bottom"] .arrow::after { 41 .bs-popover-auto[x-placement^="bottom"] .arrow::after {
42 border-bottom-color: $primary !important; 42 border-bottom-color: $primary !important;
43 } 43 }
44 44
45 .list-group-item.active { 45 .list-group-item.active {
46 background-color: $primary !important; 46 background-color: $primary !important;
47 border-color: $primary !important; 47 border-color: $primary !important;
48 } 48 }
49 49
50 .custom-radio .custom-control-label::before { 50 .custom-radio .custom-control-label::before {
51 background-color: $primary !important; 51 background-color: $primary !important;
52 border-color: $white !important; 52 border-color: $white !important;
53 border-width: 2px !important; 53 border-width: 2px !important;
54 } 54 }
55 55
56 .custom-control-input { 56 .custom-control-input {
57 border-color: $white !important; 57 border-color: $white !important;
58 background-color: $primary !important; 58 background-color: $primary !important;
59 color: $primary !important; 59 color: $primary !important;
60 &:checked ~ .custom-control-label::before { 60 &:checked ~ .custom-control-label::before {
61 border-color: $white !important; 61 border-color: $white !important;
62 color: #fff !important; 62 color: #fff !important;
63 background-color: $primary !important; 63 background-color: $primary !important;
64 } 64 }
65 &:focus ~ .custom-control-label::before { 65 &:focus ~ .custom-control-label::before {
66 border-color: $white !important; 66 border-color: $white !important;
67 box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.7) !important; 67 box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.7) !important;
68 } 68 }
69 } 69 }
70 70
71 .carousel-control {
72 visibility: hidden !important;
73 }
74
75 .carousel, .carousel-inner, .item {
76 height: 100% !important;
77 &:focus{
78 outline: none !important;
79 }
80 }
81
71 @import "../../../node_modules/bootstrap/scss/bootstrap"; 82 @import "../../../node_modules/bootstrap/scss/bootstrap";
72 83