Mauricio Cattafi / autoservicio

1

1

2

2

3

4

4

5

5

6

6

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

11

11

12

12

13

14

14

15

15

16

16

17

17

18

18

19

<p class="h3 card-title">Promociones</p>

19

<p class="h3 card-title">Promociones</p>

20

</div>

20

</div>

21

21

22

22

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

27

28

28

29

29

30

30

31

</div>

31

</div>

32

32

33

33

34

</div>

34

</div>

35

35

36

36

37

</div>

37

</div>

38

</div>

38

</div>

39

</div>

39

</div>

40

</div>

40

</div>

41

42

42

43

43

44

44

45

45

46

46

47

<p class="h3 card-title">Ordenar</p>

47

<p class="h3 card-title">Ordenar</p>

48

</div>

48

</div>

49

49

50

50

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

61

61

62

63

63

64

<ng-template #popTemplate>

64

<ng-template #popTemplate>

65

<app-popover-promos

65

<app-popover-promos

66

*ngIf="productoAcargar && !productoEsPromo"

66

*ngIf="productoAcargar && !productoEsPromo"

67

[popover]="popoverDirective"

67

[popover]="popoverDirective"

68

[popoverContent]="popoverContent"

68

[popoverContent]="popoverContent"

69

(promoSeleccionada)="promoSeleccionada($event)"

69

(promoSeleccionada)="promoSeleccionada($event)"

70

class="fade-in text-white rounded-sm border-0">

70

class="fade-in text-white rounded-sm border-0">

71

</app-popover-promos>

71

</app-popover-promos>

72

</ng-template>

72

</ng-template>

73

<div

73

<div

74

placement="left"

74

placement="left"

75

triggers=""

75

triggers=""

76

[popover]="popTemplate"

76

[popover]="popTemplate"

77

class="w-100"

77

class="w-100"

78

#pop="bs-popover">

78

#pop="bs-popover">

79

79

80

80

81

81

82

82

83

<p class="h3 card-title">Cargar Productos</p>

83

<p class="h3 card-title">Cargar Productos</p>

84

</div>

84

</div>

85

85

86

86

87

</div>

87

</div>

88

</div>

88

</div>

89

89

90

Coloque el código de<br>

90

Coloque el código de<br>

91

barras o QR frente al scanner.

91

barras o QR frente al scanner.

92

</p>

92

</p>

93

</div>

93

</div>

94

94

95

95

96

96

97

<img

97

<img

98

*ngIf="!productoAcargar"

98

*ngIf="!productoAcargar"

99

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"

100

src="{{apiUrl}}/imagenes/escanner.jpg">

100

src="{{apiUrl}}/imagenes/escanner.jpg">

101

102

102

103

103

104

<img

104

<img

105

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"

106

src="{{apiUrl}}/imagenes/testImg.jpg">

106

src="{{apiUrl}}/imagenes/testImg.jpg">

107

108

108

109

109

110

<p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p>

110

<p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p>

111

<p class="h6 mb-0"><small>{{productoAcargar.DetArt}}</small></p>

111

<p class="h6 mb-0"><small>{{productoAcargar.DetArt}}</small></p>

112

</div>

112

</div>

113

113

114

<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>

115

</div>

115

</div>

116

</div>

116

</div>

117

</div>

117

</div>

118

119

119

120

120

121

<img

121

<img

122

class="card-img-top d-block w-100 mx-auto rounded-sm"

122

class="card-img-top d-block w-100 mx-auto rounded-sm"

123

src="{{apiUrl}}/imagenes/testImg.jpg">

123

src="{{apiUrl}}/imagenes/testImg.jpg">

124

125

125

126

126

127

<p class="h6 font-weight-bold mb-0">{{promoAcargar.nombrePromo}}</p>

127

<p class="h6 font-weight-bold mb-0">{{promoAcargar.nombrePromo}}</p>

128

<p

128

<p

129

class="h6 mb-0"

129

class="h6 mb-0"

130

*ngFor="let producto of promoAcargar.productos">

130

*ngFor="let producto of promoAcargar.productos">

131

132

</p>

132

</p>

133

</div>

133

</div>

134

134

135

<p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>

135

<p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>

136

</div>

136

</div>

137

</div>

137

</div>

138

</div>

138

</div>

139

140

</div>

140

</div>

141

141

142

<div

142

<div

143

class="col-5 pr-0"

143

class="col-5 pr-0"

144

*ngIf="productoAcargar && tienePromo">

144

*ngIf="productoAcargar && tienePromo">

145

<button

145

<button

146

*ngIf="productoEsPromo"

146

*ngIf="productoEsPromo"

147

type="button"

147

type="button"

148

class="btn btn-light btn-block shadow-sm"

148

class="btn btn-light btn-block shadow-sm"

149

(click)="pop.show()">

149

(click)="pop.show()">

150

<span class="pr-2">Personalizar</span>

150

<span class="pr-2">Personalizar</span>

151

151

152

</button>

152

</button>

153

<button

153

<button

154

*ngIf="!productoEsPromo"

154

*ngIf="!productoEsPromo"

155

type="button"

155

type="button"

156

class="btn btn-primary btn-block shadow-sm"

156

class="btn btn-primary btn-block shadow-sm"

157

(click)="pop.show()">

157

(click)="pop.show()">

158

<span class="pr-2">Mostrar promociones</span>

158

<span class="pr-2">Mostrar promociones</span>

159

159

160

</button>

160

</button>

161

161

162

<span class="pr-2 font-weight-bold">Confirmar</span>

162

<span class="pr-2 font-weight-bold">Confirmar</span>

163

163

164

</button>

164

</button>

165

<button

165

<button

166

type="button"

166

type="button"

167

class="btn btn-light btn-block shadow-sm"

167

class="btn btn-light btn-block shadow-sm"

168

(click)="deshacerCarga()">

168

(click)="deshacerCarga()">

169

<span class="pr-2">Deshacer</span>

169

<span class="pr-2">Deshacer</span>

170

170

171

</button>

171

</button>

172

</div>

172

</div>

173

</div>

173

</div>

174

</div>

174

</div>

175

</div>

175

</div>

176

177

177

178

<div (click)="goPage('busqueda-productos')"

178

<div (click)="goPage('busqueda-productos')"

179

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">

180

180

181

181

182

182

183

<p class="h3 card-title">Buscar Productos</p>

183

<p class="h3 card-title">Buscar Productos</p>

184

184

185

Busque aquí los productos<br>

185

Busque aquí los productos<br>

186

que no tienen código </p>

186

que no tienen código </p>

187

</div>

187

</div>

188

188

189

189

190

</div>

190

</div>

191

</div>

191

</div>

192

193

</div>

193

</div>

194

</div>

194

</div>

195

196

</div>

196

</div>

197

198

</div>

198

</div>

199

200

</div>

200

</div>

201

</div>

201

</div>

202

GITLAB

Mauricio Cattafi / autoservicio

Cambio de imagenes.

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/testImg.jpg" class="d-block w-100 m-auto rounded">	30	<img src="{{apiUrl}}/imagenes/testImg3.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/testImg.jpg" class="d-block w-100 m-auto rounded">	33	<img src="{{apiUrl}}/imagenes/testImg3.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/testImg.jpg" class="d-block w-100 m-auto rounded">	36	<img src="{{apiUrl}}/imagenes/testImg3.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-promos	65	<app-popover-promos
66	*ngIf="productoAcargar && !productoEsPromo"	66	*ngIf="productoAcargar && !productoEsPromo"
67	[popover]="popoverDirective"	67	[popover]="popoverDirective"
68	[popoverContent]="popoverContent"	68	[popoverContent]="popoverContent"
69	(promoSeleccionada)="promoSeleccionada($event)"	69	(promoSeleccionada)="promoSeleccionada($event)"
70	class="fade-in text-white rounded-sm border-0">	70	class="fade-in text-white rounded-sm border-0">
71	</app-popover-promos>	71	</app-popover-promos>
72	</ng-template>	72	</ng-template>
73	<div	73	<div
74	placement="left"	74	placement="left"
75	triggers=""	75	triggers=""
76	[popover]="popTemplate"	76	[popover]="popTemplate"
77	class="w-100"	77	class="w-100"
78	#pop="bs-popover">	78	#pop="bs-popover">
79	<div class="card bg-white border-0 shadow rounded mb-auto">	79	<div class="card bg-white border-0 shadow rounded mb-auto">
80	<div class="card-body text-left px-4 py-3">	80	<div class="card-body text-left px-4 py-3">
81	<div class="row">	81	<div class="row">
82	<div class="col-6">	82	<div class="col-6">
83	<p class="h3 card-title">Cargar Productos</p>	83	<p class="h3 card-title">Cargar Productos</p>
84	</div>	84	</div>
85	<div class="col-6 p-0">	85	<div class="col-6 p-0">
86	<img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2">	86	<img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2">
87	</div>	87	</div>
88	</div>	88	</div>
89	<p class="h5 card-text text-muted font-weight-light">	89	<p class="h5 card-text text-muted font-weight-light">
90	Coloque el código de<br>	90	Coloque el código de<br>
91	barras o QR frente al scanner.	91	barras o QR frente al scanner.
92	</p>	92	</p>
93	</div>	93	</div>
94	<div class="row m-4">	94	<div class="row m-4">
95	<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 -->	96	<!-- IMAGEN DE ESCANER -->
97	<img	97	<img
98	*ngIf="!productoAcargar"	98	*ngIf="!productoAcargar"
99	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"
100	src="{{apiUrl}}/imagenes/escanner.jpg">	100	src="{{apiUrl}}/imagenes/escanner.jpg">
101		101
102	<!-- PRODUCTO A CARGAR -->	102	<!-- PRODUCTO A CARGAR -->
103	<div class="fade-in m-0" *ngIf="productoAcargar && !productoEsPromo">	103	<div class="fade-in m-0" *ngIf="productoAcargar && !productoEsPromo">
104	<img	104	<img
105	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"
106	src="{{apiUrl}}/imagenes/testImg.jpg">	106	src="{{apiUrl}}/imagenes/testImg.jpg">
107		107
108	<div class="row justify-content-between m-3">	108	<div class="row justify-content-between m-3">
109	<div class="col-auto text-left px-1">	109	<div class="col-auto text-left px-1">
110	<p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p>	110	<p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p>
111	<p class="h6 mb-0"><small>{{productoAcargar.DetArt}}</small></p>	111	<p class="h6 mb-0"><small>{{productoAcargar.DetArt}}</small></p>
112	</div>	112	</div>
113	<div class="col-4 text-right my-auto">	113	<div class="col-4 text-right my-auto">
114	<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>
115	</div>	115	</div>
116	</div>	116	</div>
117	</div>	117	</div>
118		118
119	<!-- PROMO A CARGAR -->	119	<!-- PROMO A CARGAR -->
120	<div class="fade-in m-0" *ngIf="promoAcargar && productoEsPromo">	120	<div class="fade-in m-0" *ngIf="promoAcargar && productoEsPromo">
121	<img	121	<img
122	class="card-img-top d-block w-100 mx-auto rounded-sm"	122	class="card-img-top d-block w-100 mx-auto rounded-sm"
123	src="{{apiUrl}}/imagenes/testImg.jpg">	123	src="{{apiUrl}}/imagenes/testImg.jpg">
124		124
125	<div class="row justify-content-between m-3">	125	<div class="row justify-content-between m-3">
126	<div class="col-12 text-left px-1">	126	<div class="col-12 text-left px-1">
127	<p class="h6 font-weight-bold mb-0">{{promoAcargar.nombrePromo}}</p>	127	<p class="h6 font-weight-bold mb-0">{{promoAcargar.nombrePromo}}</p>
128	<p	128	<p
129	class="h6 mb-0"	129	class="h6 mb-0"
130	*ngFor="let producto of promoAcargar.productos">	130	*ngFor="let producto of promoAcargar.productos">
131	{{producto.DetArt}}	131	{{producto.DetArt}}
132	</p>	132	</p>
133	</div>	133	</div>
134	<div class="col-12 text-right mt-2 align-self-end">	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>	135	<p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen \| currency}}</p>
136	</div>	136	</div>
137	</div>	137	</div>
138	</div>	138	</div>
139		139
140	</div>	140	</div>
141	<!-- BOTONES -->	141	<!-- BOTONES -->
142	<div	142	<div
143	class="col-5 pr-0"	143	class="col-5 pr-0"
144	*ngIf="productoAcargar && tienePromo">	144	*ngIf="productoAcargar && tienePromo">
145	<button	145	<button
146	*ngIf="productoEsPromo"	146	*ngIf="productoEsPromo"
147	type="button"	147	type="button"
148	class="btn btn-light btn-block shadow-sm"	148	class="btn btn-light btn-block shadow-sm"
149	(click)="pop.show()">	149	(click)="pop.show()">
150	<span class="pr-2">Personalizar</span>	150	<span class="pr-2">Personalizar</span>
151	<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>
152	</button>	152	</button>
153	<button	153	<button
154	*ngIf="!productoEsPromo"	154	*ngIf="!productoEsPromo"
155	type="button"	155	type="button"
156	class="btn btn-primary btn-block shadow-sm"	156	class="btn btn-primary btn-block shadow-sm"
157	(click)="pop.show()">	157	(click)="pop.show()">
158	<span class="pr-2">Mostrar promociones</span>	158	<span class="pr-2">Mostrar promociones</span>
159	<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>
160	</button>	160	</button>
161	<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">
162	<span class="pr-2 font-weight-bold">Confirmar</span>	162	<span class="pr-2 font-weight-bold">Confirmar</span>
163	<i class="fa fa-check text-success" aria-hidden="true"></i>	163	<i class="fa fa-check text-success" aria-hidden="true"></i>
164	</button>	164	</button>
165	<button	165	<button
166	type="button"	166	type="button"
167	class="btn btn-light btn-block shadow-sm"	167	class="btn btn-light btn-block shadow-sm"
168	(click)="deshacerCarga()">	168	(click)="deshacerCarga()">
169	<span class="pr-2">Deshacer</span>	169	<span class="pr-2">Deshacer</span>
170	<i class="fa fa-undo text-warning" aria-hidden="true"></i>	170	<i class="fa fa-undo text-warning" aria-hidden="true"></i>
171	</button>	171	</button>
172	</div>	172	</div>
173	</div>	173	</div>
174	</div>	174	</div>
175	</div>	175	</div>
176		176
177	<!-- BUSCAR PRODUCTOS -->	177	<!-- BUSCAR PRODUCTOS -->
178	<div (click)="goPage('busqueda-productos')"	178	<div (click)="goPage('busqueda-productos')"
179	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">
180	<div class="card-body text-left px-4 py-3">	180	<div class="card-body text-left px-4 py-3">
181	<div class="row">	181	<div class="row">
182	<div class="col-6">	182	<div class="col-6">
183	<p class="h3 card-title">Buscar Productos</p>	183	<p class="h3 card-title">Buscar Productos</p>
184	<p class="h5 card-text text-muted font-weight-light">	184	<p class="h5 card-text text-muted font-weight-light">
185	Busque aquí los productos<br>	185	Busque aquí los productos<br>
186	que no tienen código </p>	186	que no tienen código </p>
187	</div>	187	</div>
188	<div class="col-6 p-0">	188	<div class="col-6 p-0">
189	<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">
190	</div>	190	</div>
191	</div>	191	</div>
192		192
193	</div>	193	</div>
194	</div>	194	</div>
195		195
196	</div>	196	</div>
197		197
198	</div>	198	</div>
199		199
200	</div>	200	</div>
201	</div>	201	</div>
202		202