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

<div

15

<div

16

(click)="irBusquedaProductos(false)"

16

(click)="irBusquedaProductos(false)"

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="h3 card-title">Promociones</p>

21

<p class="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

32

33

</div>

33

</div>

34

34

35

35

36

</div>

36

</div>

37

37

38

38

39

</div>

39

</div>

40

40

41

41

42

</div>

42

</div>

43

</div>

43

</div>

44

</div>

44

</div>

45

</div>

45

</div>

46

47

47

48

48

49

49

50

50

51

51

52

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

52

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

53

</div>

53

</div>

54

54

55

55

56

</div>

56

</div>

57

</div>

57

</div>

58

<p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>

58

<p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>

59

</div>

59

</div>

60

<img

60

<img

61

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

61

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

62

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

62

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

63

</div>

63

</div>

64

</div>

64

</div>

65

66

66

67

68

68

69

<ng-template #popTemplate>

69

<ng-template #popTemplate>

70

<app-popover-promos

70

<app-popover-promos

71

*ngIf="promociones.length > 0 && sinonimos.length === 0"

71

*ngIf="promociones.length > 0 && sinonimos.length === 0"

72

[popover]="popoverDirective"

72

[popover]="popoverDirective"

73

[popoverContent]="promociones"

73

[popoverContent]="promociones"

74

(promoSeleccionada)="promoSeleccionada($event)"

74

(promoSeleccionada)="promoSeleccionada($event)"

75

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

75

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

76

</app-popover-promos>

76

</app-popover-promos>

77

<app-popover-sinonimos

77

<app-popover-sinonimos

78

*ngIf="sinonimos.length > 0"

78

*ngIf="sinonimos.length > 0"

79

[popover]="popoverDirective"

79

[popover]="popoverDirective"

80

[popoverContent]="sinonimos"

80

[popoverContent]="sinonimos"

81

(productosPersonalizados)="productosPersonalizados($event)"

81

(productosPersonalizados)="productosPersonalizados($event)"

82

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

82

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

83

</app-popover-sinonimos>

83

</app-popover-sinonimos>

84

</ng-template>

84

</ng-template>

85

<div

85

<div

86

placement="left"

86

placement="left"

87

triggers=""

87

triggers=""

88

[popover]="popTemplate"

88

[popover]="popTemplate"

89

class="w-100"

89

class="w-100"

90

#pop="bs-popover">

90

#pop="bs-popover">

91

91

92

92

93

93

94

94

95

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

95

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

96

</div>

96

</div>

97

97

98

98

99

</div>

99

</div>

100

</div>

100

</div>

101

101

102

Coloque un producto frente<br>

102

Coloque un producto frente<br>

103

al lector de códigos o selecciónelo en pantalla

103

al lector de códigos o selecciónelo en pantalla

104

</p>

104

</p>

105

</div>

105

</div>

106

106

107

107

108

108

109

<img

109

<img

110

*ngIf="!productoAcargar"

110

*ngIf="!productoAcargar"

111

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

111

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

112

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

112

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

113

114

114

115

115

116

<img

116

<img

117

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

117

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

118

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

118

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

119

120

120

121

121

122

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

122

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

123

</div>

123

</div>

124

124

125

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

125

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

126

</div>

126

</div>

127

</div>

127

</div>

128

</div>

128

</div>

129

130

130

131

131

132

<img

132

<img

133

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

133

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

134

src="{{apiUrl}}/imagenes/{{promoAcargar.imagenes[0].imagen}}">

134

src="{{apiUrl}}/imagenes/{{promoAcargar.imagenes[0].imagen}}">

135

136

136

137

137

138

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

138

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

139

</div>

139

</div>

140

140

141

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

141

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

142

</div>

142

</div>

143

</div>

143

</div>

144

</div>

144

</div>

145

146

</div>

146

</div>

147

147

148

<div

148

<div

149

class="col-5 pr-0"

149

class="col-5 pr-0"

150

*ngIf="promociones.length > 0">

150

*ngIf="promociones.length > 0">

151

<button

151

<button

152

*ngIf="sinonimos.length > 0"

153

type="button"

154

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

155

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

156

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

157

158

</button>

159

<button

160

*ngIf="!promoAcargar || sinonimos.length == 0"

152

*ngIf="!promoAcargar || sinonimos.length == 0"

161

type="button"

153

type="button"

162

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

154

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

163

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

155

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

164

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

156

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

165

157

166

</button>

158

</button>

167

<button

159

<button

168

type="button"

160

type="button"

169

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

161

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

170

(click)="confirmarProducto()">

162

(click)="confirmarProducto()">

171

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

163

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

172

164

173

</button>

165

</button>

174

<button

166

<button

175

type="button"

167

type="button"

176

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

168

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

177

(click)="deshacerCarga()">

169

(click)="deshacerCarga()">

178

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

170

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

179

171

180

</button>

172

</button>

181

</div>

173

</div>

182

</div>

174

</div>

183

</div>

175

</div>

184

</div>

176

</div>

185

177

186

178

187

<div (click)="irBusquedaProductos(true)"

179

<div (click)="irBusquedaProductos(true)"

188

class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">

180

class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">

189

181

190

182

191

183

192

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

184

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

193

185

194

Busque aquí los productos<br>

186

Busque aquí los productos<br>

195

que no tienen código </p>

187

que no tienen código </p>

196

</div>

188

</div>

197

189

198

190

199

</div>

191

</div>

200

</div>

192

</div>

201

193

202

</div>

194

</div>

203

</div>

195

</div>

204

196

205

</div>

197

</div>

206

198

207

</div>

199

</div>

208

200

209

</div>

201

</div>

210

</div>

202

</div>

211

203

GITLAB

Mauricio Cattafi / autoservicio

Borrado boton personalizar.

 <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 py-1 bg-gray text-muted text-center">Inicio</p>
       </div>
     </div>
     <div class="row m-3 d-flex align-items-start disable-user-select">
       <div class="col-md-5 d-flex align-items-end flex-column">
         <!-- PROMOCIONES -->
         <div
           (click)="irBusquedaProductos(false)"
           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="h3 card-title">Promociones</p>
               </div>
               <div class="col-auto p-0">
                 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0">
               </div>
             </div>
             <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
           </div>
           <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
             <div class="carousel-inner">
               <div class="carousel-item active">
                 <img src="{{apiUrl}}/imagenes/beldent.jpg" class="d-block w-75 m-auto rounded">
               </div>
               <div class="carousel-item">
                 <img src="{{apiUrl}}/imagenes/cafe con leche y medialunas.jpg" class="d-block w-75 m-auto rounded">
               </div>
               <div class="carousel-item">
                 <img src="{{apiUrl}}/imagenes/Surtido bagley.jpg" class="d-block w-75 m-auto rounded">
               </div>
               <div class="carousel-item">
                 <img src="{{apiUrl}}/imagenes/yogurisimo.jpg" class="d-block w-75 m-auto rounded">
               </div>
             </div>
           </div>
         </div>
         <!-- ORDENAR -->
         <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
           <div class="card-body text-left px-4 py-3">
             <div class="row">
               <div class="col-auto">
                 <p class="h3 card-title">Ordenar Pedido</p>
               </div>
               <div class="col-auto p-0">
                 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim">
               </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="{{apiUrl}}/imagenes/cafe.jpg">
         </div>
       </div>
       <div class="col-md-7 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)"
             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="h3 card-title">Cargar Productos</p>
                 </div>
                 <div class="col-auto p-0">
                   <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2">
                 </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 m-4">
               <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="{{apiUrl}}/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="{{apiUrl}}/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.DetArt}}</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="{{apiUrl}}/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.DetArt}}</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="sinonimos.length > 0"
-                    type="button"
-                    class="btn btn-light btn-block shadow-sm"
-                    (click)="pop.show()">
-                    <span class="pr-2">Personalizar</span>
-                    <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i>
-                  </button>
-                  <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
                     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(true)"
           class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
           <div class="card-body text-left px-4 py-3">
             <div class="row">
               <div class="col-auto">
                 <p class="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="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2">
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>