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 Pedido</p>

47

<p class="h3 card-title">Ordenar Pedido</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]="promociones"

68

[popoverContent]="promociones"

69

(promoSeleccionada)="promoSeleccionada($event)"

69

(promoSeleccionada)="promoSeleccionada($event)"

70

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

70

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

71

</app-popover-promos>

71

</app-popover-promos>

72

<app-popover-sinonimos

72

<app-popover-sinonimos

73

*ngIf="promoAcargar && productoEsPromo"

73

*ngIf="promoAcargar && productoEsPromo"

74

[popover]="popoverDirective"

74

[popover]="popoverDirective"

75

[popoverContent]="sinonimos"

75

[popoverContent]="sinonimos"

76

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

76

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

77

</app-popover-sinonimos>

77

</app-popover-sinonimos>

78

</ng-template>

78

</ng-template>

79

<div

79

<div

80

placement="left"

80

placement="left"

81

triggers=""

81

triggers=""

82

[popover]="popTemplate"

82

[popover]="popTemplate"

83

class="w-100"

83

class="w-100"

84

#pop="bs-popover">

84

#pop="bs-popover">

85

85

86

86

87

87

88

88

89

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

89

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

90

</div>

90

</div>

91

91

92

92

93

</div>

93

</div>

94

</div>

94

</div>

95

95

96

Coloque el código de<br>

96

Coloque el código de<br>

97

barras o QR frente al scanner.

97

barras o QR frente al scanner.

98

</p>

98

</p>

99

</div>

99

</div>

100

100

101

101

102

102

103

<img

103

<img

104

*ngIf="!productoAcargar"

104

*ngIf="!productoAcargar"

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/escanner.jpg">

106

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

107

108

108

109

109

110

<img

110

<img

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/testImg.jpg">

112

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

113

114

114

115

115

116

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

116

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

117

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

118

</div>

117

</div>

119

118

120

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

119

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

121

</div>

120

</div>

122

</div>

121

</div>

123

</div>

122

</div>

124

123

125

124

126

125

127

<img

126

<img

128

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

127

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

129

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

128

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

130

129

131

130

132

131

133

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

132

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

134

<p

135

class="h6 mb-0"

136

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

137

138

</p>

139

</div>

133

</div>

140

134

141

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

142

</div>

136

</div>

143

</div>

137

</div>

144

</div>

138

</div>

145

139

146

</div>

140

</div>

147

141

148

<div

142

<div

149

class="col-5 pr-0"

143

class="col-5 pr-0"

150

*ngIf="productoAcargar && tienePromo">

144

*ngIf="productoAcargar && tienePromo">

151

<button

145

<button

152

*ngIf="productoEsPromo && promoAcargar.sinonimos"

146

*ngIf="productoEsPromo && promoAcargar.sinonimos"

153

type="button"

147

type="button"

154

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

148

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

155

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

149

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

156

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

150

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

157

151

158

</button>

152

</button>

159

<button

153

<button

160

*ngIf="!productoEsPromo"

154

*ngIf="!productoEsPromo"

161

type="button"

155

type="button"

162

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

156

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

163

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

157

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

164

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

158

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

165

159

166

</button>

160

</button>

167

161

168

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

162

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

169

163

170

</button>

164

</button>

171

<button

165

<button

172

type="button"

166

type="button"

173

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

167

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

174

(click)="deshacerCarga()">

168

(click)="deshacerCarga()">

175

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

169

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

176

170

177

</button>

171

</button>

178

</div>

172

</div>

179

</div>

173

</div>

180

</div>

174

</div>

181

</div>

175

</div>

182

176

183

177

184

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

178

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

185

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

186

180

187

181

188

182

189

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

183

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

190

184

191

Busque aquí los productos<br>

185

Busque aquí los productos<br>

192

que no tienen código </p>

186

que no tienen código </p>

193

</div>

187

</div>

194

188

195

189

196

</div>

190

</div>

197

</div>

191

</div>

198

192

199

</div>

193

</div>

200

</div>

194

</div>

201

195

202

</div>

196

</div>

203

197

204

</div>

198

</div>

205

199

206

</div>

200

</div>

207

</div>

201

</div>

208

202

GITLAB

Mauricio Cattafi / autoservicio

Borrada descripcion de las cards.

 <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 class="card 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-7">
                 <p class="h3 card-title">Promociones</p>
               </div>
               <div class="col-5 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/testImg3.jpg" class="d-block w-100 m-auto rounded">
               </div>
               <div class="carousel-item">
                 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded">
               </div>
               <div class="carousel-item">
                 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 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-5">
                 <p class="h3 card-title">Ordenar Pedido</p>
               </div>
               <div class="col-7 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="productoAcargar && !productoEsPromo"
             [popover]="popoverDirective"
             [popoverContent]="promociones"
             (promoSeleccionada)="promoSeleccionada($event)"
             class="text-white rounded-sm border-0">
           </app-popover-promos>
           <app-popover-sinonimos
             *ngIf="promoAcargar && productoEsPromo"
             [popover]="popoverDirective"
             [popoverContent]="sinonimos"
             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-6">
                   <p class="h3 card-title">Cargar Productos</p>
                 </div>
                 <div class="col-6 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 el código de<br>
                 barras o QR frente al scanner.
               </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 && !productoEsPromo">
                   <img
                     class="card-img-top d-block w-100 mx-auto rounded-sm"
-                    src="{{apiUrl}}/imagenes/testImg.jpg">
+                    src="{{apiUrl}}/imagenes/testImg3.jpg">
                   <div class="row justify-content-between m-3">
-                    <div class="col-auto text-left px-1">
+                    <div class="col-12 text-left px-1">
                       <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p>
-                      <p class="h6 mb-0"><small>{{productoAcargar.DetArt}}</small></p>
                     </div>
-                    <div class="col-4 text-right my-auto">
+                    <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 && productoEsPromo">
                   <img
                     class="card-img-top d-block w-100 mx-auto rounded-sm"
-                    src="{{apiUrl}}/imagenes/testImg.jpg">
+                    src="{{apiUrl}}/imagenes/testImg3.jpg">
                   <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.nombrePromo}}</p>
-                      <p
-                        class="h6 mb-0"
-                        *ngFor="let producto of promoAcargar.productos">
-                        {{producto.DetArt}}
-                    </p>
                     </div>
                     <div class="col-12 text-right mt-2 align-self-end">
                       <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
                     </div>
                   </div>
                 </div>
               </div>
               <!-- BOTONES DE CARGAR PRODUCTOS-->
               <div
                 class="col-5 pr-0"
                 *ngIf="productoAcargar && tienePromo">
                   <button
                     *ngIf="productoEsPromo && promoAcargar.sinonimos"
                     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="!productoEsPromo"
                     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">
                     <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)="goPage('busqueda-productos')"
           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-6">
                 <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-6 p-0">
                 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2">
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>