Martin Macola / autoservicio

1

1

2

2

3

4

4

5

5

6

6

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

11

11

12

12

13

14

14

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

18

19

19

20

20

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

23

24

24

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

29

30

30

31

31

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

36

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

41

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

46

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

54

54

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

57

58

58

59

59

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

62

63

63

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

74

74

75

76

76

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

99

100

100

101

101

102

102

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

105

106

106

107

</div>

107

</div>

108

</div>

108

</div>

109

109

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

114

115

115

116

116

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

122

122

123

123

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 mx-auto rounded-sm"

126

src="{{apiImagenes}}/imagenes/{{productoAcargar.imagenes[0].imagen}}">

126

src="{{apiImagenes}}/imagenes/{{productoAcargar.imagenes[0].imagen}}">

127

128

128

129

129

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

132

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

138

138

139

139

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

144

144

145

145

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

148

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

154

</div>

154

</div>

155

155

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

165

166

</button>

166

</button>

167

<button

167

<button

168

*ngIf="sinonimos.length == 0"

168

type="button"

169

type="button"

169

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

170

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

170

(click)="confirmarProducto()">

171

(click)="confirmarProducto()">

171

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

172

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

172

173

173

</button>

174

</button>

174

<button

175

<button

175

type="button"

176

type="button"

176

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

177

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

177

(click)="deshacerCarga()">

178

(click)="deshacerCarga()">

178

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

179

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

179

180

180

</button>

181

</button>

181

</div>

182

</div>

182

</div>

183

</div>

183

</div>

184

</div>

184

</div>

185

</div>

185

186

187

187

<div (click)="irBusquedaProductos('todos')"

188

<div (click)="irBusquedaProductos('todos')"

188

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

189

190

190

191

191

192

192

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

193

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

193

194

194

Busque aquí los productos<br>

195

Busque aquí los productos<br>

195

que no tienen código.</p>

196

que no tienen código.</p>

196

</div>

197

</div>

197

198

198

199

199

</div>

200

</div>

200

</div>

201

</div>

201

202

</div>

203

</div>

203

</div>

204

</div>

204

205

</div>

206

</div>

206

207

</div>

208

</div>

208

209

</div>

210

</div>

210

</div>

211

</div>

211

212

GITLAB

Martin Macola / autoservicio

Ocultado boton confirmar si hay sinonimos.

 <div class="row m-0 fade-in">
   <div class="col-12 p-0">
     <!-- NOMBRE DE SECCION -->
     <div class="row m-0">
       <div class="col-12 p-0">
         <p class="h5 m-0 py-1 bg-gray text-muted text-center">Inicio</p>
       </div>
     </div>
     <div class="row m-0 d-flex align-items-start disable-user-select">
       <div class="col-md-5 py-3 pr-0 d-flex align-items-end flex-column">
         <!-- PROMOCIONES -->
         <div
           (click)="irBusquedaProductos('promociones')"
           class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
           <div class="card-body text-left px-4 py-3">
             <div class="row">
               <div class="col-auto">
                 <p class="m-0 h3 card-title">Promociones</p>
               </div>
               <div class="col-auto p-0">
                 <img src="{{apiImagenes}}/imagenes/primario.promociones.png" class="w-15 m-0">
               </div>
             </div>
             <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
           </div>
           <!-- CAROUSEL -->
           <carousel [showIndicators]="false" [interval]="1500">
             <slide class="h-100">
               <img
                 src="{{apiImagenes}}/imagenes/beldent.jpg"
                 class="fade-in d-block w-75 m-auto rounded">
             </slide>
             <slide class="h-100">
               <img
                 src="{{apiImagenes}}/imagenes/cafe con leche y medialunas.jpg"
                 class="fade-in d-block w-75 m-auto rounded">
             </slide>
             <slide class="h-100">
               <img
                 src="{{apiImagenes}}/imagenes/Surtido bagley.jpg"
                 class="fade-in d-block w-75 m-auto rounded">
             </slide>
             <slide class="h-100">
               <img
                 src="{{apiImagenes}}/imagenes/yogurisimo.jpg"
                 class="fade-in d-block w-75 m-auto rounded">
             </slide>
           </carousel>
         </div>
         <!-- ORDENAR -->
         <div (click)="irBusquedaProductos('ordenar')"
           class="card card-effect bg-white border-0 shadow rounded w-100 mt-3">
           <div class="card-body text-left px-4 py-3">
             <div class="row">
               <div class="col-auto">
                 <p class="m-0 h3 card-title">Ordenar Pedido</p>
               </div>
               <div class="col-auto p-0">
                 <img src="{{apiImagenes}}/imagenes/primario.ordenar.png" class="w-15">
               </div>
             </div>
             <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
           </div>
           <img
             class="card-img-bottom d-block w-100 mx-auto rounded"
             src="{{apiImagenes}}/imagenes/cafe.jpg">
         </div>
       </div>
       <div class="col-md-7 py-3 d-flex align-items-end flex-column mt-4 mt-md-0">
         <!-- CARGAR PRODUCTOS -->
         <ng-template #popTemplate>
           <app-popover-promos
             *ngIf="promociones.length > 0 && sinonimos.length === 0"
             [popover]="popoverDirective"
             [popoverContent]="promociones"
             (promoSeleccionada)="promoSeleccionada($event, false)"
             class="text-white rounded-sm border-0">
           </app-popover-promos>
           <app-popover-sinonimos
             *ngIf="sinonimos.length > 0"
             [popover]="popoverDirective"
             [popoverContent]="sinonimos"
             (productosPersonalizados)="productosPersonalizados($event)"
             class="text-white rounded-sm border-0">
           </app-popover-sinonimos>
         </ng-template>
         <div
           placement="left"
           triggers=""
           [popover]="popTemplate"
           class="w-100"
           #pop="bs-popover">
           <div class="card bg-white border-0 shadow rounded mb-auto">
             <div class="card-body text-left px-4 py-3">
               <div class="row">
                 <div class="col-auto">
                   <p class="m-0 h3 card-title">Cargar Productos</p>
                 </div>
                 <div class="col-auto p-0">
                   <img src="{{apiImagenes}}/imagenes/escanear.png" class="w-15">
                 </div>
               </div>
               <p class="h5 card-text text-muted font-weight-light">
                 Coloque un producto frente<br>
                 al lector de códigos o selecciónelo en pantalla.
               </p>
             </div>
             <div class="row mx-3 mb-3">
               <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
                 <!-- IMAGEN DE ESCANER -->
                 <img
                   *ngIf="!productoAcargar"
                   class="card-img-top d-block w-100 mx-auto rounded-sm"
                   src="{{apiImagenes}}/imagenes/escanner.jpg">
                 <!-- PRODUCTO A CARGAR -->
                 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar">
                   <img
                     class="card-img-top d-block w-75 mx-auto rounded-sm"
                     src="{{apiImagenes}}/imagenes/{{productoAcargar.imagenes[0].imagen}}">
                   <div class="row justify-content-between m-3">
                     <div class="col-12 text-left px-1">
                       <p class="h6 font-weight-bold mb-0">{{productoAcargar.DET_LAR}}</p>
                     </div>
                     <div class="col-12 text-right mt-2">
                       <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
                     </div>
                   </div>
                 </div>
                 <!-- PROMO A CARGAR -->
                 <div class="fade-in m-0" *ngIf="promoAcargar">
                   <img
                     class="card-img-top d-block w-100 mx-auto rounded-sm"
                     src="{{apiImagenes}}/imagenes/{{promoAcargar.imagenes[0].imagen}}">
                   <div class="row justify-content-between m-3">
                     <div class="col-12 text-left px-1">
                       <p class="h6 font-weight-bold mb-0">{{promoAcargar.DET_LAR}}</p>
                     </div>
                     <div class="col-12 text-right mt-2 align-self-end">
                       <p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen | currency}}</p>
                     </div>
                   </div>
                 </div>
               </div>
               <!-- BOTONES DE CARGAR PRODUCTOS-->
               <div
                 class="col-5 pr-0"
                 *ngIf="promociones.length > 0">
                   <button
                     *ngIf="!promoAcargar || sinonimos.length == 0"
                     type="button"
                     class="btn btn-primary btn-block shadow-sm"
                     (click)="pop.show()">
                     <span class="pr-2">Mostrar promociones</span>
                     <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i>
                   </button>
                   <button
+                  *ngIf="sinonimos.length == 0"
                     type="button"
                     class="btn btn-light btn-block shadow-sm my-3"
                     (click)="confirmarProducto()">
                     <span class="pr-2 font-weight-bold">Confirmar</span>
                     <i class="fa fa-check text-success" aria-hidden="true"></i>
                   </button>
                   <button
                     type="button"
                     class="btn btn-light btn-block shadow-sm"
                     (click)="deshacerCarga()">
                     <span class="pr-2">Deshacer</span>
                     <i class="fa fa-undo text-warning" aria-hidden="true"></i>
                   </button>
               </div>
             </div>
           </div>
         </div>
         <!-- BUSCAR PRODUCTOS -->
         <div (click)="irBusquedaProductos('todos')"
           class="card card-effect bg-white border-0 shadow rounded w-100 mt-3">
           <div class="card-body text-left px-4 py-3">
             <div class="row">
               <div class="col-auto">
                 <p class="m-0 h3 card-title">Buscar Productos</p>
                 <p class="h5 card-text text-muted font-weight-light">
                   Busque aquí los productos<br>
                   que no tienen código.</p>
               </div>
               <div class="col-auto p-0">
                 <img src="{{apiImagenes}}/imagenes/primario.buscar.png" class="w-15">
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>