Luis Suarez / autoservicio-axion

1

1

2

2

3

<app-header-publicidad></app-header-publicidad>

3

<app-header-publicidad></app-header-publicidad>

4

5

5

6

6

7

7

8

8

9

9

10

<p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>

10

<p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>

11

</div>

11

</div>

12

</div>

12

</div>

13

</div>

13

</div>

14

14

15

15

16

16

17

17

18

18

19

19

20

<p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>

20

<p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>

21

21

22

22

23

<img

23

<img

24

draggable="false"

24

draggable="false"

25

ondragstart="return false;"

25

ondragstart="return false;"

26

(contextmenu)="false"

26

(contextmenu)="false"

27

class="h-100 d-block mx-auto rotate-90-neg"

27

class="h-100 d-block mx-auto rotate-90-neg"

28

src="assets/img/ir-color.svg"

28

src="assets/img/ir-color.svg"

29

(mousedown)="scrollY(templateCategorias, -100)"

29

(mousedown)="scrollY(templateCategorias, -100)"

30

(mouseup)="mouseup()"

30

(mouseup)="mouseup()"

31

(mouseleave)="mouseup()">

31

(mouseleave)="mouseup()">

32

</div>

32

</div>

33

33

34

<div

34

<div

35

#templateCategorias

35

#templateCategorias

36

class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">

36

class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">

37

<div

37

<div

38

class="row mx-4 mb-2 h-32 justify-content-center tab"

38

class="row mx-4 mb-2 h-32 justify-content-center tab"

39

[ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"

39

[ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"

40

(click)="selectCategoria(-1, 0)">

40

(click)="selectCategoria(-1, 0)">

41

<img

41

<img

42

draggable="false"

42

draggable="false"

43

ondragstart="return false;"

43

ondragstart="return false;"

44

(contextmenu)="false"

44

(contextmenu)="false"

45

class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"

45

class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"

46

src="assets/img/logo-spot.svg">

46

src="assets/img/logo-spot.svg">

47

<small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>

47

<small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>

48

</div>

48

</div>

49

<div

49

<div

50

class="row mx-4 mb-2 h-32 justify-content-center tab"

50

class="row mx-4 mb-2 h-32 justify-content-center tab"

51

[ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"

51

[ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"

52

(click)="selectCategoria(i, categoria.id)"

52

(click)="selectCategoria(i, categoria.id)"

53

*ngFor="let categoria of categorias; let i = index;">

53

*ngFor="let categoria of categorias; let i = index;">

54

<img

54

<img

55

draggable="false"

55

draggable="false"

56

ondragstart="return false;"

56

ondragstart="return false;"

57

(contextmenu)="false"

57

(contextmenu)="false"

58

class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"

58

class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"

59

src="{{urlImagenes}}{{categoria.path_imagen}}">

59

src="{{urlImagenes}}{{categoria.path_imagen}}"

60

onerror="this.src='assets/img/image-not-found.jpg'">

60

<small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>

61

<small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>

61

</div>

62

</div>

62

</div>

63

</div>

63

64

64

<img

65

<img

65

draggable="false"

66

draggable="false"

66

ondragstart="return false;"

67

ondragstart="return false;"

67

(contextmenu)="false"

68

(contextmenu)="false"

68

class="h-100 d-block mx-auto rotate-90"

69

class="h-100 d-block mx-auto rotate-90"

69

src="assets/img/ir-color.svg"

70

src="assets/img/ir-color.svg"

70

(mousedown)="scrollY(templateCategorias, 100)"

71

(mousedown)="scrollY(templateCategorias, 100)"

71

(mouseup)="mouseup()"

72

(mouseup)="mouseup()"

72

(mouseleave)="mouseup()">

73

(mouseleave)="mouseup()">

73

</div>

74

</div>

74

</div>

75

</div>

75

</div>

76

</div>

76

77

77

78

78

79

79

80

80

<div

81

<div

81

class="col px-2 my-1 my-md-3 h-auto"

82

class="col px-2 my-1 my-md-3 h-auto"

82

*ngFor="let articulo of auxArticulos | slice:0:showQuantity;">

83

*ngFor="let articulo of auxArticulos | slice:0:showQuantity;">

83

84

84

85

86

</div>

87

<img

85

<img

88

draggable="false"

86

draggable="false"

89

ondragstart="return false;"

87

ondragstart="return false;"

90

(contextmenu)="false"

88

(contextmenu)="false"

91

src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"

89

src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"

92

onerror="this.src='assets/img/image-not-found.jpg'"

90

onerror="this.src='assets/img/image-not-found.jpg'"

93

class="card-img-top h-55 rounded-sm">

91

class="card-img-top h-55 rounded-sm">

94

92

95

<p class="col-12 px-1 h6 h-auto text-primary text-center min-h-60">{{articulo.DetArt}}</p>

93

<p

94

[ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"

95

class="col-12 px-1 h6 h-auto text-center min-h-60">

96

97

</p>

96

98

97

<small>{{articulo.DET_LAR}}</small>

99

<small>{{articulo.DET_LAR}}</small>

98

</p>

100

</p>

99

101

100

<div

102

<div

101

[ngClass]="{'bg-secondary': articulo.PRO}"

103

[ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"

102

class="row mx-0 justify-content-between bg-primary badge-pill"

104

class="row mx-0 justify-content-between badge-pill"

103

(click)="elegirArticulo(articulo)">

105

(click)="elegirArticulo(articulo)">

104

106

105

107

106

</div>

108

</div>

107

109

108

<img

110

<img

109

draggable="false"

111

draggable="false"

110

ondragstart="return false;"

112

ondragstart="return false;"

111

(contextmenu)="false"

113

(contextmenu)="false"

112

class="d-block ml-auto py-1 icon-30"

114

class="d-block ml-auto py-1 icon-30"

113

src="assets/img/ir.svg">

115

src="assets/img/ir.svg">

114

</div>

116

</div>

115

</div>

117

</div>

116

</div>

118

</div>

117

</div>

119

</div>

118

</div>

120

</div>

119

</div>

121

</div>

120

</div>

122

</div>

121

123

122

124

123

<div

125

<div

124

*ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"

126

*ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"

125

class="col-12 px-0 mb-2">

127

class="col-12 px-0 mb-2">

126

<button

128

<button

127

(click)="increaseShow()"

129

(click)="increaseShow()"

128

class="btn btn-block btn-outline-primary">

130

class="btn btn-block btn-outline-primary">

129

131

130

</button>

132

</button>

131

</div>

133

</div>

132

</div>

134

</div>

133

</div>

135

</div>

134

</div>

136

</div>

135

</div>

137

</div>

136

</div>

138

</div>

137

139

138

140

139

141

140

142

141

143

142

<p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>

144

<p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>

143

</div>

145

</div>

144

146

145

147

146

148

147

149

148

<img

150

<img

149

draggable="false"

151

draggable="false"

150

ondragstart="return false;"

152

ondragstart="return false;"

151

(contextmenu)="false"

153

(contextmenu)="false"

152

class="icon-30 rotate-180-neg"

154

class="icon-30 rotate-180-neg"

153

src="assets/img/ir-fondo-color.svg"

155

src="assets/img/ir-fondo-color.svg"

154

(mousedown)="scrollX(templateCarrito, -100)"

156

(mousedown)="scrollX(templateCarrito, -100)"

155

(mouseup)="mouseup()"

157

(mouseup)="mouseup()"

156

(mouseleave)="mouseup()">

158

(mouseleave)="mouseup()">

157

</div>

159

</div>

158

160

159

161

160

162

161

163

162

164

163

<p class="text-center py-5">No hay articulos en el carrito</p>

165

<p class="text-center py-5">No hay articulos en el carrito</p>

164

</div>

166

</div>

165

167

166

<div

168

<div

167

class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"

169

class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"

168

*ngFor="let articulo of articuloService.carrito; let i = index;">

170

*ngFor="let articulo of articuloService.carrito; let i = index;">

169

171

170

<img

172

<img

171

draggable="false"

173

draggable="false"

172

ondragstart="return false;"

174

ondragstart="return false;"

173

(contextmenu)="false"

175

(contextmenu)="false"

174

class="d-block img-fluid p-2 mx-auto rounded"

176

class="d-block img-fluid p-2 mx-auto rounded"

175

src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"

177

src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"

176

onerror="this.src='assets/img/image-not-found.jpg'">

178

onerror="this.src='assets/img/image-not-found.jpg'">

177

179

178

<small>{{articulo.DetArt}}</small>

180

<small>{{articulo.DetArt}}</small>

179

</p>

181

</p>

180

</div>

182

</div>

181

</div>

183

</div>

182

</div>

184

</div>

183

</div>

185

</div>

184

186

185

187

186

<img

188

<img

187

draggable="false"

189

draggable="false"

188

ondragstart="return false;"

190

ondragstart="return false;"

189

(contextmenu)="false"

191

(contextmenu)="false"

190

class="icon-30"

192

class="icon-30"

191

src="assets/img/ir-fondo-color.svg"

193

src="assets/img/ir-fondo-color.svg"

192

(mousedown)="scrollX(templateCarrito, 100)"

194

(mousedown)="scrollX(templateCarrito, 100)"

193

(mouseup)="mouseup()"

195

(mouseup)="mouseup()"

194

(mouseleave)="mouseup()">

196

(mouseleave)="mouseup()">

195

</div>

197

</div>

196

</div>

198

</div>

197

</div>

199

</div>

198

200

199

<div

201

<div

200

class="col-auto p-0 mt-2 ml-auto h-20"

202

class="col-auto p-0 mt-2 ml-auto h-20"

201

*ngIf="articuloService.carrito.length">

203

*ngIf="articuloService.carrito.length">

202

<div

204

<div

203

class="btn-effect col-auto align-self-center px-0 bg-white"

205

class="btn-effect col-auto align-self-center px-0 bg-white"

204

[routerLink]="['/carrito']">

206

[routerLink]="['/carrito']">

205

207

206

<div class="col-auto align-self-center text-primary">TOTAL</div>

208

<div class="col-auto align-self-center text-primary">TOTAL</div>

207

209

208

<p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>

210

<p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>

209

</div>

211

</div>

210

<div class="col-auto align-self-center text-primary ml-2 bg-light">VER CARRITO</div>

212

<div class="col-auto align-self-center text-primary ml-2 bg-light">VER CARRITO</div>

211

213

212

<img

214

<img

213

draggable="false"

215

draggable="false"

214

ondragstart="return false;"

216

ondragstart="return false;"

215

(contextmenu)="false"

217

(contextmenu)="false"

216

class="p-2 icon-40"

218

class="p-2 icon-40"

217

src="assets/img/carrito.svg">

219

src="assets/img/carrito.svg">

218

</div>

220

</div>

219

</div>

221

</div>

220

</div>

222

</div>

221

</div>

223

</div>

222

224

223

</div>

225

</div>

224

</div>

226

</div>

GITLAB

Luis Suarez / autoservicio-axion

Imagen por defecto cuando no exista la imagen de categorias

 <div class="h-92 bg-white fade-in-left">
   <!-- PUBLICIDADES -->
   <app-header-publicidad></app-header-publicidad>
   <div class="row mx-0 h-80 align-items-end">
     <!-- CABECERA -->
     <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
       <div class="col-12 p-2 align-self-center">
         <div class="px-3">
           <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
         </div>
       </div>
     </div>
     <!-- CUERPO -->
     <div class="row w-100 mr-4 h-70">
       <div class="col-12 h-100 px-0 py-3">
         <div class="row mx-0 h-100">
           <!-- FILTRO CATEGORIAS -->
           <div class="col-5 col-sm-3 col-xl-2 h-100">
             <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
             <div class="row mx-0 h-94 justify-content-center align-items-center">
               <div class="col-auto btn-effect h-5">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="h-100 d-block mx-auto rotate-90-neg"
                   src="assets/img/ir-color.svg"
                   (mousedown)="scrollY(templateCategorias, -100)"
                   (mouseup)="mouseup()"
                   (mouseleave)="mouseup()">
               </div>
               <!-- CATEGORIAS -->
               <div
                 #templateCategorias
                 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
                 <div
                   class="row mx-4 mb-2 h-32 justify-content-center tab"
                   [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
                   (click)="selectCategoria(-1, 0)">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
                     src="assets/img/logo-spot.svg">
                   <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>
                 </div>
                 <div
                   class="row mx-4 mb-2 h-32 justify-content-center tab"
                   [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
                   (click)="selectCategoria(i, categoria.id)"
                   *ngFor="let categoria of categorias; let i = index;">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
-                    src="{{urlImagenes}}{{categoria.path_imagen}}">
+                    src="{{urlImagenes}}{{categoria.path_imagen}}"
+                    onerror="this.src='assets/img/image-not-found.jpg'">
                   <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
                 </div>
               </div>
               <div class="col-auto btn-effect h-5">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="h-100 d-block mx-auto rotate-90"
                   src="assets/img/ir-color.svg"
                   (mousedown)="scrollY(templateCategorias, 100)"
                   (mouseup)="mouseup()"
                   (mouseleave)="mouseup()">
               </div>
             </div>
           </div>
           <!-- LISTA DE ARTICULOS -->
           <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible">
             <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
               <!-- ARTICULO -->
               <div
                 class="col px-2 my-1 my-md-3 h-auto"
                 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
                 <div class="swing-in-top-fwd card h-auto">
-                  <div *ngIf="articulo.PRO">
-                    <i class="fas fa-piggy-bank"></i>
-                  </div>
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                     onerror="this.src='assets/img/image-not-found.jpg'"
                     class="card-img-top h-55 rounded-sm">
                   <div class="row mx-0 py-1 h-auto justify-content-center">
-                    <p class="col-12 px-1 h6 h-auto text-primary text-center min-h-60">{{articulo.DetArt}}</p>
+                    <p
+                    [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
+                      class="col-12 px-1 h6 h-auto text-center min-h-60">
+                      {{articulo.DetArt}}
+                    </p>
                     <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">
                       <small>{{articulo.DET_LAR}}</small>
                     </p>
                     <div class="col-12 px-1 align-self-end btn-effect h-auto">
                       <div
-                        [ngClass]="{'bg-secondary': articulo.PRO}"
+                        [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
-                        class="row mx-0 justify-content-between bg-primary badge-pill"
+                        class="row mx-0 justify-content-between badge-pill"
                         (click)="elegirArticulo(articulo)">
                         <div class="col px-0 align-self-center text-white text-right">
                           {{articulo.PreVen | currency}}
                         </div>
                         <div class="col-5 px-0">
                           <img
                             draggable="false"
                             ondragstart="return false;"
                             (contextmenu)="false"
                             class="d-block ml-auto py-1 icon-30"
                             src="assets/img/ir.svg">
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <!-- BOTON VER MAS -->
             <div class="row mx-0">
               <div
                 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
                 class="col-12 px-0 mb-2">
                 <button
                   (click)="increaseShow()"
                   class="btn btn-block btn-outline-primary">
                   Ver Más
                 </button>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
     <!-- FOOTER CARRITO DE COMPRAS -->
     <div class="row w-90 mx-auto h-auto justify-content-center">
       <div class="col-12 h-75 px-0 border border-primary rounded">
         <!-- CABECERA -->
         <div class="row mx-0 h-15 border-bottom border-primary">
           <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
         </div>
         <!-- CUERPO -->
         <div class="row h-85 mx-0 justify-content-around">
           <!-- BOTON SCROLL IZQUIERDA -->
           <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="icon-30 rotate-180-neg"
               src="assets/img/ir-fondo-color.svg"
               (mousedown)="scrollX(templateCarrito, -100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
           <!-- CARRITO -->
           <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
             <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x">
               <!-- MENSAJE DE ADVERTENCIA -->
               <div *ngIf="!articuloService.carrito.length" class="col h-100">
                 <p class="text-center py-5">No hay articulos en el carrito</p>
               </div>
               <!-- ARTICULOS -->
               <div
                 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
                 *ngFor="let articulo of articuloService.carrito; let i = index;">
                 <div class="swing-in-top-fwd">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="d-block img-fluid p-2 mx-auto rounded"
                     src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                     onerror="this.src='assets/img/image-not-found.jpg'">
                   <p class="d-block mt-auto text-center text-primary text-truncate">
                     <small>{{articulo.DetArt}}</small>
                   </p>
                 </div>
               </div>
             </div>
           </div>
           <!-- BOTON SCROLL DERECHA -->
           <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="icon-30"
               src="assets/img/ir-fondo-color.svg"
               (mousedown)="scrollX(templateCarrito, 100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
         </div>
       </div>
       <!-- VER CARRITO Y TOTAL-->
       <div
         class="col-auto p-0 mt-2 ml-auto h-20"
         *ngIf="articuloService.carrito.length">
         <div
           class="btn-effect col-auto align-self-center px-0 bg-white"
           [routerLink]="['/carrito']">
           <div class="row justify-content-between mx-0">
             <div class="col-auto align-self-center text-primary">TOTAL</div>
             <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total">
               <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
             </div>
             <div class="col-auto align-self-center text-primary ml-2 bg-light">VER CARRITO</div>
             <div class="col-auto p-0 bg-primary d-none d-sm-block">
               <img
                 draggable="false"
                 ondragstart="return false;"
                 (contextmenu)="false"
                 class="p-2 icon-40"
                 src="assets/img/carrito.svg">
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>