Mauricio Cattafi / autoservicio

1

<div

1

<div

2

*ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada"

2

*ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada"

3

class="row m-0 fade-in bg-primary-gradient disable-user-select"

3

class="row m-0 fade-in bg-primary-gradient disable-user-select"

4

(click)="reiniciarTimer()">

4

(click)="reiniciarTimer()">

5

5

6

6

7

<app-header></app-header>

7

<app-header></app-header>

8

9

9

10

10

11

11

12

12

13

13

14

</p>

14

</p>

15

</div>

15

</div>

16

</div>

16

</div>

17

18

18

19

19

20

20

21

21

22

22

23

<p class="h2">Mi Compra

23

<p class="h2">Mi Compra

24

24

25

</p>

25

</p>

26

</div>

26

</div>

27

27

28

<p class="h4">Por favor, controle y confirme su compra.</p>

28

<p class="h4">Por favor, controle y confirme su compra.</p>

29

</div>

29

</div>

30

30

31

Pedido a nombre de:

31

Pedido a nombre de:

32

</label>

32

</label>

33

33

34

<input

34

<input

35

[matKeyboard]="'spanish'"

35

type="text"

36

type="text"

36

class="form-control text-center"

37

class="form-control text-center"

37

id="customLabel"

38

id="customLabel"

38

maxlength="24"

39

maxlength="24"

39

[(ngModel)]="pedidoAnombreDe"

40

[(ngModel)]="pedidoAnombreDe"

40

autofocus

41

autofocus

41

>

42

>

42

</div>

43

</div>

43

</div>

44

</div>

44

45

46

46

47

47

48

48

49

49

50

50

51

51

52

52

53

53

<img

54

<img

54

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

55

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

55

class="shadow rounded-sm w-100 m-auto">

56

class="shadow rounded-sm w-100 m-auto">

56

</div>

57

</div>

57

58

58

59

59

60

60

61

</small>

62

</small>

62

</p>

63

</p>

63

64

64

65

65

<small>

66

<small>

66

- {{producto.cantidad}} {{p.DET_LAR}}

67

- {{producto.cantidad}} {{p.DET_LAR}}

67

</small>

68

</small>

68

</p>

69

</p>

69

</div>

70

</div>

70

</div>

71

</div>

71

72

72

73

73

{{producto.cantidad}} x {{producto.PreVen | currency}}

74

{{producto.cantidad}} x {{producto.PreVen | currency}}

74

</span>

75

</span>

75

76

76

77

</span>

78

</span>

78

</div>

79

</div>

79

</div>

80

</div>

80

</div>

81

</div>

81

</div>

82

</div>

82

</div>

83

</div>

83

</div>

84

</div>

84

85

86

86

87

87

88

88

<img

89

<img

89

src="../../../assets/img/qrmp.jpg"

90

src="../../../assets/img/qrmp.jpg"

90

class="w-100 mx-auto d-block shadow rounded-sm">

91

class="w-100 mx-auto d-block shadow rounded-sm">

91

</div>

92

</div>

92

</div>

93

</div>

93

94

95

95

96

96

97

97

98

98

<p class="h5 card-title">Su Ticket</p>

99

<p class="h5 card-title">Su Ticket</p>

99

100

100

101

101

102

102

<small class="font-weight-bold">DESCRIPCIÓN</small>

103

<small class="font-weight-bold">DESCRIPCIÓN</small>

103

</p>

104

</p>

104

105

105

<small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>

106

<small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>

106

</p>

107

</p>

107

</div>

108

</div>

108

</div>

109

</div>

109

110

110

111

111

112

112

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

113

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

113

</p>

114

</p>

114

115

115

116

116

117

117

<small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>

118

<small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>

118

</p>

119

</p>

119

</div>

120

</div>

120

121

121

122

122

<small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>

123

<small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>

123

</p>

124

</p>

124

</div>

125

</div>

125

</div>

126

</div>

126

</div>

127

</div>

127

</div>

128

</div>

128

129

129

Total {{getTotal() | currency}}

130

Total {{getTotal() | currency}}

130

</p>

131

</p>

131

</div>

132

</div>

132

</div>

133

</div>

133

</div>

134

</div>

134

</div>

135

</div>

135

136

137

137

138

138

139

139

140

140

141

141

142

142

<button

143

<button

143

type="button"

144

type="button"

144

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

145

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

145

(click)="volverPreviousPage()">

146

(click)="volverPreviousPage()">

146

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

147

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

147

148

148

</button>

149

</button>

149

<button

150

<button

150

type="button"

151

type="button"

151

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

152

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

152

[routerLink]="['/cancelar-compra']">

153

[routerLink]="['/cancelar-compra']">

153

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

154

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

154

155

155

</button>

156

</button>

156

</div>

157

</div>

157

</div>

158

</div>

158

</div>

159

</div>

159

</div>

160

</div>

160

</div>

161

</div>

161

</div>

162

</div>

162

163

164

164

165

165

166

166

Forma de pago

167

Forma de pago

167

</p>

168

</p>

168

169

170

170

<div

171

<div

171

class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"

172

class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"

172

(click)="pagar(1)">

173

(click)="pagar(1)">

173

174

174

<span class="h5 font-weight-bold">Efectivo</span>

175

<span class="h5 font-weight-bold">Efectivo</span>

175

</div>

176

</div>

176

177

177

<img

178

<img

178

src="../../../assets/img/efectivo.png"

179

src="../../../assets/img/efectivo.png"

179

class="w-100 float-right">

180

class="w-100 float-right">

180

</div>

181

</div>

181

</div>

182

</div>

182

183

184

184

<div class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"

185

<div class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"

185

(click)="abrirPagoConTarjeta()">

186

(click)="abrirPagoConTarjeta()">

186

187

187

<span class="h5 font-weight-bold">Tarjeta</span>

188

<span class="h5 font-weight-bold">Tarjeta</span>

188

</div>

189

</div>

189

190

190

<img

191

<img

191

src="../../../assets/img/tarjeta.png"

192

src="../../../assets/img/tarjeta.png"

192

class="w-100 float-right">

193

class="w-100 float-right">

193

</div>

194

</div>

194

</div>

195

</div>

195

196

197

197

<div

198

<div

198

class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"

199

class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"

199

(click)="pagar(9)">

200

(click)="pagar(9)">

200

201

201

<span class="h5 font-weight-bold">Pago Electrónico</span>

202

<span class="h5 font-weight-bold">Pago Electrónico</span>

202

</div>

203

</div>

203

204

204

<img

205

<img

205

src="../../../assets/img/qr.png"

206

src="../../../assets/img/qr.png"

206

class="w-100 float-right">

207

class="w-100 float-right">

207

</div>

208

</div>

208

</div>

209

</div>

209

</div>

210

</div>

210

</div>

211

</div>

211

212

</div>

213

</div>

213

</div>

214

</div>

214

215

<div

216

<div

216

*ngIf="compraConQRfinalizada"

217

*ngIf="compraConQRfinalizada"

217

[routerLink]="['/mensaje-final']"

218

[routerLink]="['/mensaje-final']"

218

class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">

219

class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">

219

220

220

221

221

Su pago fue<br>

222

Su pago fue<br>

222

acreditado

223

acreditado

223

exitosamente

224

exitosamente

224

</p>

225

</p>

225

<p class="font-weight-bold display-4">Recuerde retirar su ticket</p>

226

<p class="font-weight-bold display-4">Recuerde retirar su ticket</p>

226

</div>

227

</div>

227

228

228

229

229

230

230

</div>

231

</div>

231

</div>

232

</div>

232

</div>

233

</div>

233

234

<div

235

<div

235

*ngIf="compraConEfectivofinalizada"

236

*ngIf="compraConEfectivofinalizada"

236

[routerLink]="['/mensaje-final']"

237

[routerLink]="['/mensaje-final']"

237

class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">

238

class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">

238

239

239

240

240

Retire su ticket<br>

241

Retire su ticket<br>

241

y diríjase a caja para<br>

242

y diríjase a caja para<br>

242

efectuar el pago.

243

efectuar el pago.

243

</p>

244

</p>

244

</div>

245

</div>

245

246

246

247

247

248

248

</div>

249

</div>

249

</div>

250

</div>

250

</div>

251

</div>

251

252

GITLAB

Mauricio Cattafi / autoservicio

Agregado teclado virtual.

 <div
   *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada"
   class="row m-0 fade-in bg-primary-gradient disable-user-select"
   (click)="reiniciarTimer()">
   <div class="col-12 p-0 vh-100">
     <!-- TOP HEADER -->
     <app-header></app-header>
     <!-- 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 m-0">
           &nbsp;
         </p>
       </div>
     </div>
     <div class="row m-0">
       <div class="col-10 px-1">
         <!-- TEXTO DE IZQUIERDA -->
         <div *ngIf="!verQR" class="row mx-2 mt-4 text-white">
           <div class="col-sm-auto my-auto">
             <p class="h2">Mi Compra
               <i class="fa fa-shopping-cart "></i>
             </p>
           </div>
           <div class="col-sm-9 my-auto">
             <p class="h4">Por favor, controle y confirme su compra.</p>
           </div>
           <label for="customLabel" class="col-auto font-weight-bold h4 m-0">
             Pedido a nombre de:
           </label>
           <div class="col-12 col-sm-6 col-md-5 col-lg-5">
             <input
+              [matKeyboard]="'spanish'"
               type="text"
               class="form-control text-center"
               id="customLabel"
               maxlength="24"
               [(ngModel)]="pedidoAnombreDe"
               autofocus
             >
           </div>
         </div>
         <div [ngClass]="{'mt-5': verQR}" class="row m-0">
           <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
           <div *ngIf="!verQR" class="col-sm-9 pr-1">
             <div class="row mx-1 pr-1 vh-70 overflow-scroll text-dark">
               <div class="mh-100 col-4 p-2" *ngFor="let producto of productos">
                 <div class="row m-0 h-100 bg-white rounded-sm shadow border-0">
                   <div class="d-flex align-items-end flex-column">
                     <div class="w-100">
                       <img
                         src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}"
                         class="shadow rounded-sm w-100 m-auto">
                     </div>
                     <div class="w-100 pt-2 px-2">
                       <p class="h6 text-left">
                         <small class="font-weight-bold">
                           {{producto.DET_LAR}}
                         </small>
                       </p>
                       <div *ngIf="producto.tieneSinonimos">
                         <p *ngFor="let p of producto.productos" class="h6 text-left m-0">
                           <small>
                             - {{producto.cantidad}} {{p.DET_LAR}}
                           </small>
                         </p>
                       </div>
                     </div>
                     <div class="w-100 d-flex justify-content-between mt-auto mb-1 px-2">
                       <span class="text-left m-0 px-1 h6">
                         {{producto.cantidad}} x {{producto.PreVen | currency}}
                       </span>
                       <span class="text-right m-0 px-1 h6">
                         {{producto.cantidad * producto.PreVen | currency}}
                       </span>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
           <!-- CODIGO QR -->
           <div *ngIf="verQR" class="col-sm-9">
             <div class="col-6 offset-3 border-0 mb-auto">
               <img
                 src="../../../assets/img/qrmp.jpg"
                 class="w-100 mx-auto d-block shadow rounded-sm">
             </div>
           </div>
           <!-- TICKET -->
           <div class="col-sm-3 px-1">
             <div class="card shadow">
               <div class="card-body">
                 <p class="h5 card-title">Su Ticket</p>
                 <div class="row mt-4 m-0">
                   <div class="col-12 p-0 mb-2">
                     <p class="h6 m-0 card-text text-left">
                       <small class="font-weight-bold">DESCRIPCIÓN</small>
                     </p>
                     <p class="h6 m-0 card-text text-left">
                       <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
                     </p>
                   </div>
                 </div>
                 <div class="row vh-50 px-2 overflow-scroll m-0">
                   <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
                     <p class="h6 m-0 card-text text-left">
                       <small>{{producto.DET_LAR}}</small>
                     </p>
                     <div class="row d-flex justify-content-between m-0">
                       <div class="col p-0">
                         <p class="h6 m-0 card-text text-left">
                           <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
                         </p>
                       </div>
                       <div class="col p-0">
                         <p class="h6 m-0 card-text text-right">
                           <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
                         </p>
                       </div>
                     </div>
                   </div>
                 </div>
                 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
                   Total {{getTotal() | currency}}
                 </p>
               </div>
             </div>
           </div>
         </div>
         <!-- OPCIONES ABAJO DERECHA -->
         <div class="row m-0 fixed-bottom">
           <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
             <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
               <div class="card-body row m-0 p-1">
                 <div class="col-12 p-3">
                   <button
                     type="button"
                     class="btn btn-block btn-light shadow btn-sm shadow"
                     (click)="volverPreviousPage()">
                     <span class="pr-2">Volver</span>
                     <i class="fa fa-undo text-warning"></i>
                   </button>
                   <button
                     type="button"
                     class="btn btn-block btn-light shadow btn-sm shadow"
                     [routerLink]="['/cancelar-compra']">
                     <span class="pr-2">Cancelar</span>
                     <i class="fa fa-times text-danger"></i>
                   </button>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
       <!-- FORMAS DE PAGO -->
       <div *ngIf="!verQR" class="col-2 px-1">
         <p class="h4 text-white text-center mt-4 mx-2 pb-2 border-bottom border-white">
           Forma de pago
         </p>
         <!-- EFECTIVO -->
         <div
           class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"
           (click)="pagar(1)">
           <div class="col-7 text-center my-auto px-2">
             <span class="h5 font-weight-bold">Efectivo</span>
           </div>
           <div class="col-5 my-auto p-0">
             <img
               src="../../../assets/img/efectivo.png"
               class="w-100 float-right">
           </div>
         </div>
         <!-- TARJETA -->
         <div class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"
           (click)="abrirPagoConTarjeta()">
           <div class="col-7 text-center my-auto px-2">
             <span class="h5 font-weight-bold">Tarjeta</span>
           </div>
           <div class="col-5 my-auto p-0">
             <img
             src="../../../assets/img/tarjeta.png"
             class="w-100 float-right">
           </div>
         </div>
         <!-- QR -->
         <div
           class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"
           (click)="pagar(9)">
           <div class="col-7 text-center my-auto px-2">
             <span class="h5 font-weight-bold">Pago Electrónico</span>
           </div>
           <div class="col-5 my-auto p-0">
             <img
             src="../../../assets/img/qr.png"
             class="w-100 float-right">
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
 <div
   *ngIf="compraConQRfinalizada"
   [routerLink]="['/mensaje-final']"
   class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
   <div class="col-12 text-center text-white my-auto">
     <p class="font-weight-bold display-4">
       Su pago fue<br>
       acreditado
       exitosamente
     </p>
     <p class="font-weight-bold display-4">Recuerde retirar su ticket</p>
   </div>
   <div class="row z-index-0 fixed-top m-0 w-100">
     <div class="col-12 p-3">
       <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
     </div>
   </div>
 </div>
 <div
   *ngIf="compraConEfectivofinalizada"
   [routerLink]="['/mensaje-final']"
   class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
   <div class="col-12 text-center text-white my-auto">
     <p class="font-weight-bold display-4">
       Retire su ticket<br>
       y diríjase a caja para<br>
       efectuar el pago.
     </p>
   </div>
   <div class="row z-index-0 fixed-top m-0 w-100">
     <div class="col-12 p-3">
       <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
     </div>
   </div>
 </div>