Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit 124b07247e7b9526f5c36d077ff01cc183f22190

Authored by Marcelo Puebla
1 parent 9d908da37d
Exists in master and in 1 other branch validar_pve

Cambio de imagenes, logica para mostrar popoover de promos.

Showing 1 changed file with 34 additions and 7 deletions   Show diff stats
src/app/components/inicio/inicio.component.html
Diff comments   View file @ 124b072
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 class="card bg-white border-0 shadow rounded w-100 mb-auto"> 15 <div class="card bg-white border-0 shadow rounded w-100 mb-auto">
16 <div class="card-body text-left px-4 py-3"> 16 <div class="card-body text-left px-4 py-3">
17 <div class="row"> 17 <div class="row">
18 <div class="col-7"> 18 <div class="col-7">
19 <p class="h3 card-title">Promociones</p> 19 <p class="h3 card-title">Promociones</p>
20 </div> 20 </div>
21 <div class="col-5 p-0"> 21 <div class="col-5 p-0">
22 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0"> 22 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0">
23 </div> 23 </div>
24 </div> 24 </div>
25 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> 25 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
26 </div> 26 </div>
27 <div id="carouselIndicators" class="carousel slide" data-ride="carousel"> 27 <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
28 <div class="carousel-inner"> 28 <div class="carousel-inner">
29 <div class="carousel-item active"> 29 <div class="carousel-item active">
30 <img src="{{apiUrl}}/imagenes/cafe.jpg" class="d-block w-100 m-auto rounded"> 30 <img src="{{apiUrl}}/imagenes/testImg.jpg" class="d-block w-100 m-auto rounded">
31 </div> 31 </div>
32 <div class="carousel-item"> 32 <div class="carousel-item">
33 <img src="{{apiUrl}}/imagenes/cafe.jpg" class="d-block w-100 m-auto rounded"> 33 <img src="{{apiUrl}}/imagenes/testImg.jpg" class="d-block w-100 m-auto rounded">
34 </div> 34 </div>
35 <div class="carousel-item"> 35 <div class="carousel-item">
36 <img src="{{apiUrl}}/imagenes/cafe.jpg" class="d-block w-100 m-auto rounded"> 36 <img src="{{apiUrl}}/imagenes/testImg.jpg" class="d-block w-100 m-auto rounded">
37 </div> 37 </div>
38 </div> 38 </div>
39 </div> 39 </div>
40 </div> 40 </div>
41 41
42 <!-- ORDENAR --> 42 <!-- ORDENAR -->
43 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 43 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
44 <div class="card-body text-left px-4 py-3"> 44 <div class="card-body text-left px-4 py-3">
45 <div class="row"> 45 <div class="row">
46 <div class="col-5"> 46 <div class="col-5">
47 <p class="h3 card-title">Ordenar</p> 47 <p class="h3 card-title">Ordenar</p>
48 </div> 48 </div>
49 <div class="col-7 p-0"> 49 <div class="col-7 p-0">
50 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim"> 50 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim">
51 </div> 51 </div>
52 </div> 52 </div>
53 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> 53 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
54 </div> 54 </div>
55 <img 55 <img
56 class="card-img-bottom d-block w-100 mx-auto rounded" 56 class="card-img-bottom d-block w-100 mx-auto rounded"
57 src="{{apiUrl}}/imagenes/cafe.jpg"> 57 src="{{apiUrl}}/imagenes/cafe.jpg">
58 </div> 58 </div>
59 </div> 59 </div>
60 60
61 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0"> 61 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0">
62 62
63 <!-- CARGAR PRODUCTOS --> 63 <!-- CARGAR PRODUCTOS -->
64 <ng-template #popTemplate> 64 <ng-template #popTemplate>
65 <app-popover 65 <app-popover-promos
66 *ngIf="productoAcargar && !productoEsPromo"
66 [popover]="popoverDirective" 67 [popover]="popoverDirective"
67 [popoverContent]="popoverContent" 68 [popoverContent]="popoverContent"
69 (promoSeleccionada)="promoSeleccionada($event)"
68 class="fade-in text-white rounded-sm border-0"> 70 class="fade-in text-white rounded-sm border-0">
69 </app-popover> 71 </app-popover-promos>
70 </ng-template> 72 </ng-template>
71 <div 73 <div
72 placement="left" 74 placement="left"
73 triggers="" 75 triggers=""
74 [popover]="popTemplate" 76 [popover]="popTemplate"
75 class="w-100" 77 class="w-100"
76 #pop="bs-popover"> 78 #pop="bs-popover">
77 <div class="card bg-white border-0 shadow rounded mb-auto"> 79 <div class="card bg-white border-0 shadow rounded mb-auto">
78 <div class="card-body text-left px-4 py-3"> 80 <div class="card-body text-left px-4 py-3">
79 <div class="row"> 81 <div class="row">
80 <div class="col-6"> 82 <div class="col-6">
81 <p class="h3 card-title">Cargar Productos</p> 83 <p class="h3 card-title">Cargar Productos</p>
82 </div> 84 </div>
83 <div class="col-6 p-0"> 85 <div class="col-6 p-0">
84 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2"> 86 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2">
85 </div> 87 </div>
86 </div> 88 </div>
87 <p class="h5 card-text text-muted font-weight-light"> 89 <p class="h5 card-text text-muted font-weight-light">
88 Coloque el código de<br> 90 Coloque el código de<br>
89 barras o QR frente al scanner. 91 barras o QR frente al scanner.
90 </p> 92 </p>
91 </div> 93 </div>
92 <div class="row m-4"> 94 <div class="row m-4">
93 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm"> 95 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
96 <!-- IMAGEN DE ESCANER -->
94 <img 97 <img
95 *ngIf="!productoAcargar" 98 *ngIf="!productoAcargar"
96 class="card-img-top d-block w-100 mx-auto rounded-sm" 99 class="card-img-top d-block w-100 mx-auto rounded-sm"
97 src="{{apiUrl}}/imagenes/escanner.jpg"> 100 src="{{apiUrl}}/imagenes/escanner.jpg">
98 <div *ngIf="productoAcargar"> 101
102 <!-- PRODUCTO A CARGAR -->
103 <div class="fade-in m-0" *ngIf="productoAcargar && !productoEsPromo">
99 <img 104 <img
100 class="card-img-top d-block w-100 mx-auto rounded-sm" 105 class="card-img-top d-block w-100 mx-auto rounded-sm"
101 src="{{apiUrl}}/imagenes/cafe.jpg"> 106 src="{{apiUrl}}/imagenes/testImg.jpg">
102 107
103 <div class="row justify-content-between m-3"> 108 <div class="row justify-content-between m-3">
104 <div class="col-auto text-left px-1"> 109 <div class="col-auto text-left px-1">
105 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p> 110 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p>
106 <p class="h6 mb-0"><small>{{productoAcargar.DetArt}}</small></p> 111 <p class="h6 mb-0"><small>{{productoAcargar.DetArt}}</small></p>
107 </div> 112 </div>
108 <div class="col-4 text-right my-auto"> 113 <div class="col-4 text-right my-auto">
109 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p> 114 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
110 </div> 115 </div>
111 </div> 116 </div>
112 </div> 117 </div>
118
119 <!-- PROMO A CARGAR -->
120 <div class="fade-in m-0" *ngIf="promoAcargar && productoEsPromo">
121 <img
122 class="card-img-top d-block w-100 mx-auto rounded-sm"
123 src="{{apiUrl}}/imagenes/testImg.jpg">
124
125 <div class="row justify-content-between m-3">
126 <div class="col-12 text-left px-1">
127 <p class="h6 font-weight-bold mb-0">{{promoAcargar.nombrePromo}}</p>
128 <p
129 class="h6 mb-0"
130 *ngFor="let producto of promoAcargar.productos">
131 {{producto.DetArt}}
132 </p>
133 </div>
134 <div class="col-12 text-right mt-2 align-self-end">
135 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
136 </div>
137 </div>
138 </div>
139
113 </div> 140 </div>
114 <!-- BOTONES --> 141 <!-- BOTONES -->
115 <div 142 <div
116 class="col-5 pr-0" 143 class="col-5 pr-0"
117 *ngIf="productoAcargar && tienePromo"> 144 *ngIf="productoAcargar && tienePromo">
118 <button 145 <button
119 *ngIf="productoEsPromo" 146 *ngIf="productoEsPromo"
120 type="button" 147 type="button"
121 class="btn btn-light btn-block shadow-sm" 148 class="btn btn-light btn-block shadow-sm"
122 (click)="pop.show()"> 149 (click)="pop.show()">
123 <span class="pr-2">Personalizar</span> 150 <span class="pr-2">Personalizar</span>
124 <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i> 151 <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i>
125 </button> 152 </button>
126 <button 153 <button
127 *ngIf="!productoEsPromo" 154 *ngIf="!productoEsPromo"
128 type="button" 155 type="button"
129 class="btn btn-primary btn-block shadow-sm" 156 class="btn btn-primary btn-block shadow-sm"
130 (click)="pop.show()"> 157 (click)="pop.show()">
131 <span class="pr-2">Mostrar promociones</span> 158 <span class="pr-2">Mostrar promociones</span>
132 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i> 159 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i>
133 </button> 160 </button>
134 <button type="button" class="btn btn-light btn-block shadow-sm my-3"> 161 <button type="button" class="btn btn-light btn-block shadow-sm my-3">
135 <span class="pr-2 font-weight-bold">Confirmar</span> 162 <span class="pr-2 font-weight-bold">Confirmar</span>
136 <i class="fa fa-check text-success" aria-hidden="true"></i> 163 <i class="fa fa-check text-success" aria-hidden="true"></i>
137 </button> 164 </button>
138 <button 165 <button
139 type="button" 166 type="button"
140 class="btn btn-light btn-block shadow-sm" 167 class="btn btn-light btn-block shadow-sm"
141 (click)="deshacerCarga()"> 168 (click)="deshacerCarga()">
142 <span class="pr-2">Deshacer</span> 169 <span class="pr-2">Deshacer</span>
143 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 170 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
144 </button> 171 </button>
145 </div> 172 </div>
146 </div> 173 </div>
147 </div> 174 </div>
148 </div> 175 </div>
149 176
150 <!-- BUSCAR PRODUCTOS --> 177 <!-- BUSCAR PRODUCTOS -->
151 <div (click)="goPage('busqueda-productos')" 178 <div (click)="goPage('busqueda-productos')"
152 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 179 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
153 <div class="card-body text-left px-4 py-3"> 180 <div class="card-body text-left px-4 py-3">
154 <div class="row"> 181 <div class="row">
155 <div class="col-6"> 182 <div class="col-6">
156 <p class="h3 card-title">Buscar Productos</p> 183 <p class="h3 card-title">Buscar Productos</p>
157 <p class="h5 card-text text-muted font-weight-light"> 184 <p class="h5 card-text text-muted font-weight-light">
158 Busque aquí los productos<br> 185 Busque aquí los productos<br>
159 que no tienen código </p> 186 que no tienen código </p>
160 </div> 187 </div>
161 <div class="col-6 p-0"> 188 <div class="col-6 p-0">
162 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2"> 189 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2">
163 </div> 190 </div>
164 </div> 191 </div>
165 192
166 </div> 193 </div>
167 </div> 194 </div>
168 195
169 </div> 196 </div>
170 197
171 </div> 198 </div>
172 199
173 </div> 200 </div>
174 </div> 201 </div>
175 202