Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit 57d67af9e78a046355ddd2c561bff4abad09dfdc

Authored by Eric Fernandez
2 parents 9772da4939 f09b30280b
Exists in master and in 1 other branch validar_pve

Merge branch 'master' into 'master' 

Master(mpuebla)

See merge request !32
Showing 12 changed files   Show diff stats
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ 57d67af
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-12 p-0"> 2 <div class="col-12 p-0">
3 3
4 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
7 <p class="h5 py-1 bg-gray text-muted text-center"> 7 <p class="h5 py-1 bg-gray text-muted text-center">
8 Búsqueda 8 Búsqueda
9 <i class="fa fa-search"></i> 9 <i class="fa fa-search"></i>
10 </p> 10 </p>
11 </div> 11 </div>
12 </div> 12 </div>
13 13
14 <div class="row m-3 disable-user-select"> 14 <div class="row m-3 disable-user-select">
15 15
16 <!-- FILTROS --> 16 <!-- FILTROS -->
17 <div *ngIf="verCategorias" class="col-sm-2 p-1"> 17 <div *ngIf="verCategorias" class="col-sm-2 p-1">
18 <div class="text-center"> 18 <div class="text-center">
19 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p> 19 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
20 </div> 20 </div>
21 <ul class="list-group"> 21 <ul class="list-group">
22 <li 22 <li
23 *ngFor="let categoria of categorias" 23 *ngFor="let categoria of categorias"
24 [ngClass]="{active: categoriaActive == categoria.id}" 24 [ngClass]="{active: categoriaActive == categoria.id}"
25 (click)="categoriaActive = categoria.id; filterItems()" 25 (click)="categoriaActive = categoria.id; filterItems()"
26 class="list-group-item list-group-item-action text-center my-1 p-2 h6"> 26 class="list-group-item list-group-item-action text-center my-1 p-2 h6">
27 {{categoria.detalle}} 27 {{categoria.detalle}}
28 </li> 28 </li>
29 </ul> 29 </ul>
30 </div> 30 </div>
31 31
32 <!-- SEARCH INPUT --> 32 <!-- SEARCH INPUT -->
33 <div *ngIf="productos.length > 0" class="fade-in col"> 33 <div *ngIf="productos.length > 0" class="fade-in col">
34 34
35 <div class="form-group row search"> 35 <div class="form-group row search">
36 <div class="col-sm-10"> 36 <div class="col-sm-10">
37 <span class="fa fa-search form-control-lg form-control-search pl-3"></span> 37 <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
38 <input 38 <input
39 type="text" 39 type="text"
40 class="form-control form-control-lg shadow-sm rounded-pill px-5" 40 class="form-control form-control-lg shadow-sm rounded-pill px-5"
41 placeholder="Búsqueda productos" 41 placeholder="Búsqueda productos"
42 [(ngModel)]="searchTerm" 42 [(ngModel)]="searchTerm"
43 (ngModelChange)="filterItems()"> 43 (ngModelChange)="filterItems()">
44 </div> 44 </div>
45 <!-- BOTON VOLVER --> 45 <!-- BOTON VOLVER -->
46 <div class="col-sm-2"> 46 <div class="col-sm-2">
47 <button 47 <button
48 type="button" 48 type="button"
49 class="btn btn-light btn-lg shadow-sm" 49 class="btn btn-light btn-lg shadow-sm"
50 [routerLink]="['/inicio']"> 50 [routerLink]="['/inicio']">
51 <span class="font-weight-normal h6 pr-2">Volver</span> 51 <span class="font-weight-normal h6 pr-2">Volver</span>
52 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 52 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
53 </button> 53 </button>
54 </div> 54 </div>
55 </div> 55 </div>
56 <!-- LISTA DE PRODUCTOS --> 56 <!-- LISTA DE PRODUCTOS -->
57 <div class="row align-items-start vh-70 overflow-scroll disable-user-select"> 57 <div class="row align-items-start vh-70 overflow-scroll disable-user-select">
58 <div 58 <div
59 class="col-4 p-2" 59 class="col-4 p-2"
60 *ngFor="let producto of auxProductos"> 60 *ngFor="let producto of auxProductos">
61 <div 61 <div
62 class="card-effect bg-white rounded-sm shadow border-0" 62 class="card-effect bg-white rounded-sm shadow border-0"
63 (click)="mostrarBotonCargar(producto)"> 63 (click)="mostrarBotonCargar(producto)">
64 <img src="{{apiUrl}}/imagenes/testImg.jpg" class="rounded-sm w-100 m-auto"> 64 <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto">
65 <div class="p-2"> 65 <div class="p-2">
66 <p class="h6 text-left m-0">{{producto.DetArt}}</p> 66 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
67 <div class="row justify-content-between m-0"> 67 <div class="row justify-content-between m-0">
68 <div class="col-12 p-0"> 68 <div class="col-12 p-0">
69 <div class="text-left"> 69 <div class="text-left">
70 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> 70 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
71 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p> 71 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p>
72 </div> 72 </div>
73 </div> 73 </div>
74 <div class="col-12 my-auto pt-2 pr-2 p-0"> 74 <div class="col-12 my-auto pt-2 pr-2 p-0">
75 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 75 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
76 </div> 76 </div>
77 </div> 77 </div>
78 <div *ngIf="producto.showCargarProducto" class="row mt-2 fade-bottom"> 78 <div *ngIf="producto.showCargarProducto" class="row mt-2 fade-bottom">
79 <div class="col-sm-12"> 79 <div class="col-sm-12">
80 <button 80 <button
81 type="button" 81 type="button"
82 class="btn btn-block btn-outline-primary shadow" 82 class="btn btn-block btn-outline-primary shadow"
83 (click)="elegirProducto(producto)"> 83 (click)="elegirProducto(producto)">
84 Cargar Producto 84 Cargar Producto
85 </button> 85 </button>
86 </div> 86 </div>
87 </div> 87 </div>
88 </div> 88 </div>
89 </div> 89 </div>
90 </div> 90 </div>
91 </div> 91 </div>
92 </div> 92 </div>
93 93
94 <!-- SPINNER --> 94 <!-- SPINNER -->
95 <div 95 <div
96 *ngIf="productos.length === 0 && showSpinner" 96 *ngIf="productos.length === 0 && showSpinner"
97 class="col-sm-10 p-0 align-self-center text-center"> 97 class="col-sm-10 p-0 align-self-center text-center">
98 <div class="spinner-border spinner-lg text-secondary" role="status"></div> 98 <div class="spinner-border spinner-lg text-secondary" role="status"></div>
99 <span class="text-secondary m-2 h5">Cargando información.</span> 99 <span class="text-secondary m-2 h5">Cargando información.</span>
100 </div> 100 </div>
101 101
102 </div> 102 </div>
103 103
104 </div> 104 </div>
105 105
106 </div> 106 </div>
107 107
src/app/components/cancelar-compra/cancelar-compra.component.html
Diff comments   View file @ 57d67af
1 <div class="container-fluid p-0"> 1 <div class="container-fluid p-0">
2 <img src="{{apiUrl}}/imagenes/homeBackground.jpg" class="background-image"> 2 <img src="{{apiUrl}}/imagenes/homeBackground.jpg" class="background-image">
3 <div class="row m-0"> 3 <div class="row m-0">
4 <div class="col p-0"> 4 <div class="col p-0">
5 <div class="vh-100 fade-in d-flex align-content-strech flex-wrap disable-user-select"> 5 <div class="vh-100 fade-in d-flex align-content-strech flex-wrap disable-user-select">
6 6
7 <!-- HEADER --> 7 <!-- HEADER -->
8 <div class="row m-0 w-100 bg-primary-gradient-horizontal"> 8 <div class="row m-0 w-100 bg-primary-gradient-horizontal">
9 <div class="col-6 bg-white rounded-bottom-right"> 9 <div class="col-6 bg-white rounded-bottom-right">
10 <div class="row h-100"> 10 <div class="row h-100">
11 <div class="col d-flex align-items-center"> 11 <div class="col d-flex align-items-center">
12 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoaxion.png"> 12 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoaxion.png">
13 </div> 13 </div>
14 </div> 14 </div>
15 </div> 15 </div>
16 </div> 16 </div>
17 17
18 <!-- INFO --> 18 <!-- INFO -->
19 <div class="row m-0 w-100"> 19 <div class="row h-75 py-5 m-0 w-100">
20 <div class="col-4 offset-2"> 20 <div class="col-4 offset-2">
21 <div class="row h-100"> 21 <div class="row h-100">
22 <div class="col-12 py-4"> 22 <div class="col-12 py-4">
23 <div class="card h-100 rounded"> 23 <div class="card h-100 rounded">
24 <img src="{{apiUrl}}/imagenes/atencion.svg" class="w-50 mx-auto mt-auto mb-4"> 24 <img src="{{apiUrl}}/imagenes/atencion.svg" class="w-50 mx-auto mt-auto mb-4">
25 <div class="mb-auto mt-4"> 25 <div class="mb-auto mt-4">
26 <p class="display-3 card-text text-center font-weight-bold"> 26 <p class="display-3 card-text text-center font-weight-bold">
27 Atención 27 Atención
28 </p> 28 </p>
29 </div> 29 </div>
30 </div> 30 </div>
31 </div> 31 </div>
32 </div> 32 </div>
33 </div> 33 </div>
34 <div class="col-6 text-center text-white my-auto"> 34 <div class="col-6 text-center text-white my-auto">
35 <p class="display-3 font-weight-bold mb-5"> 35 <p class="display-3 font-weight-bold mb-5">
36 Usted esta a punto<br>de cancelar su compra 36 Usted esta a punto<br>de cancelar su compra
37 </p> 37 </p>
38 <p class="display-4 m-0"> 38 <p class="display-4 m-0">
39 Perderá los datos y<br>productos ya ingresados 39 Perderá los datos y<br>productos ya ingresados
40 </p> 40 </p>
41 <div class="d-flex justify-content-center mt-2"> 41 <div class="d-flex justify-content-center mt-2">
42 <button 42 <button
43 type="button" 43 type="button"
44 class="btn btn-lg btn-light shadow mr-4" 44 class="btn btn-lg btn-light shadow mr-4"
45 (click)="volverPreviousPage()"> 45 (click)="volverPreviousPage()">
46 <span class="pr-2">Volver a mi compra</span> 46 <span class="pr-2">Volver a mi compra</span>
47 <i class="fa fa-undo text-warning"></i> 47 <i class="fa fa-undo text-warning"></i>
48 </button> 48 </button>
49 <button 49 <button
50 type="button" 50 type="button"
51 class="btn btn-lg btn-light shadow ml-4" 51 class="btn btn-lg btn-light shadow ml-4"
52 (click)="limpiarCarritoYvolver()"> 52 (click)="limpiarCarritoYvolver()">
53 <span class="pr-2">Si, terminar</span> 53 <span class="pr-2">Si, terminar</span>
54 <i class="fa fa-times text-danger"></i> 54 <i class="fa fa-times text-danger"></i>
55 </button> 55 </button>
56 </div> 56 </div>
57 </div> 57 </div>
58 </div> 58 </div>
59 59
60 <!-- FOOTER --> 60 <!-- FOOTER -->
61 <div class="row m-0 w-100 bg-gray"> 61 <div class="row m-0 w-100 bg-gray">
62 <div class="col-6 bg-white offset-6 rounded-top-left"> 62 <div class="col-6 bg-white offset-6 rounded-top-left">
63 <div class="row h-100"> 63 <div class="row h-100">
64 <div class="col d-flex align-items-center"> 64 <div class="col d-flex align-items-center">
65 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png"> 65 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png">
66 </div> 66 </div>
67 </div> 67 </div>
68 </div> 68 </div>
69 </div> 69 </div>
70 70
71 </div> 71 </div>
72 </div> 72 </div>
73 </div> 73 </div>
74 </div> 74 </div>
75 75
src/app/components/home/home.component.html
Diff comments   View file @ 57d67af
1 <div class="container-fluid p-0"> 1 <div class="container-fluid p-0">
2 <img src="{{apiUrl}}/imagenes/homeBackground.jpg" class="background-image"> 2 <img src="{{apiUrl}}/imagenes/homeBackground.jpg" class="background-image vh-100">
3 <div class="row m-0"> 3 <div class="row m-0">
4 <div class="col p-0"> 4 <div class="col p-0">
5 <div 5 <div
6 class="vh-100 fade-in d-flex align-content-between flex-wrap disable-user-select" 6 class="vh-100 fade-in d-flex align-content-between flex-wrap disable-user-select"
7 [routerLink]="['/inicio']"> 7 [routerLink]="['/inicio']">
8 8
9 <!-- HEADER --> 9 <!-- HEADER -->
10 <div class="row m-0 w-100 bg-primary-gradient-horizontal"> 10 <div class="row m-0 w-100 bg-primary-gradient-horizontal">
11 <div class="col-6 bg-white p-5 rounded-bottom-right"> 11 <div class="col-6 bg-white p-3 rounded-bottom-right">
12 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoaxion.png"> 12 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoaxion.png">
13 </div> 13 </div>
14 </div> 14 </div>
15 15
16 <!-- INFO DE BIENVENIDA --> 16 <!-- INFO DE BIENVENIDA -->
17 <div class="row w-100"> 17 <div class="row w-100">
18 <div class="col-4 offset-2"> 18 <div class="col-4 offset-2">
19 <img src="{{apiUrl}}/imagenes/accesoPLAYA.png" class="w-100"> 19 <img src="{{apiUrl}}/imagenes/accesoPLAYA.png" class="w-100">
20 </div> 20 </div>
21 <div class="col-6 text-center text-white my-auto"> 21 <div class="col-6 text-center text-white my-auto">
22 <p class="display-2 font-weight-bold mb-5">¡BIENVENIDO!</p> 22 <p class="display-2 font-weight-bold mb-5">¡BIENVENIDO!</p>
23 <p class="display-3 m-0">Toque la pantalla<br>para comenzar</p> 23 <p class="display-3 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p>
24 </div> 24 </div>
25 </div> 25 </div>
26 26
27 <!-- FOOTER --> 27 <!-- FOOTER -->
28 <div class="row m-0 w-100 bg-gray"> 28 <div class="row m-0 w-100 bg-gray">
29 <div class="col-6 bg-white offset-6 p-5 rounded-top-left"> 29 <div class="col-6 bg-white offset-6 p-3 rounded-top-left">
30 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png"> 30 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png">
31 </div> 31 </div>
32 </div> 32 </div>
33 33
34 </div> 34 </div>
35 </div> 35 </div>
36 </div> 36 </div>
37 </div> 37 </div>
38 38
src/app/components/inicio/inicio.component.html
Diff comments   View file @ 57d67af
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-12 p-0"> 2 <div class="col-12 p-0">
3 3
4 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
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 10
11 <div class="row m-3 d-flex align-items-start disable-user-select"> 11 <div class="row m-3 d-flex align-items-start disable-user-select">
12 <div class="col-md-5 d-flex align-items-end flex-column"> 12 <div class="col-md-5 d-flex align-items-end flex-column">
13 13
14 <!-- PROMOCIONES --> 14 <!-- PROMOCIONES -->
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 <div class="card-body text-left px-4 py-3"> 18 <div class="card-body text-left px-4 py-3">
19 <div class="row"> 19 <div class="row">
20 <div class="col-7"> 20 <div class="col-7">
21 <p class="h3 card-title">Promociones</p> 21 <p class="h3 card-title">Promociones</p>
22 </div> 22 </div>
23 <div class="col-5 p-0"> 23 <div class="col-5 p-0">
24 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0"> 24 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0">
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 <div id="carouselIndicators" class="carousel slide" data-ride="carousel"> 29 <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
30 <div class="carousel-inner"> 30 <div class="carousel-inner">
31 <div class="carousel-item active"> 31 <div class="carousel-item active">
32 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded"> 32 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded">
33 </div> 33 </div>
34 <div class="carousel-item"> 34 <div class="carousel-item">
35 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded"> 35 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded">
36 </div> 36 </div>
37 <div class="carousel-item"> 37 <div class="carousel-item">
38 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded"> 38 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded">
39 </div> 39 </div>
40 </div> 40 </div>
41 </div> 41 </div>
42 </div> 42 </div>
43 43
44 <!-- ORDENAR --> 44 <!-- ORDENAR -->
45 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 45 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
46 <div class="card-body text-left px-4 py-3"> 46 <div class="card-body text-left px-4 py-3">
47 <div class="row"> 47 <div class="row">
48 <div class="col-5"> 48 <div class="col-5">
49 <p class="h3 card-title">Ordenar Pedido</p> 49 <p class="h3 card-title">Ordenar Pedido</p>
50 </div> 50 </div>
51 <div class="col-7 p-0"> 51 <div class="col-7 p-0">
52 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim"> 52 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim">
53 </div> 53 </div>
54 </div> 54 </div>
55 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> 55 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
56 </div> 56 </div>
57 <img 57 <img
58 class="card-img-bottom d-block w-100 mx-auto rounded" 58 class="card-img-bottom d-block w-100 mx-auto rounded"
59 src="{{apiUrl}}/imagenes/cafe.jpg"> 59 src="{{apiUrl}}/imagenes/cafe.jpg">
60 </div> 60 </div>
61 </div> 61 </div>
62 62
63 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0"> 63 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0">
64 64
65 <!-- CARGAR PRODUCTOS --> 65 <!-- CARGAR PRODUCTOS -->
66 <ng-template #popTemplate> 66 <ng-template #popTemplate>
67 <app-popover-promos 67 <app-popover-promos
68 *ngIf="promociones.length > 0 && sinonimos.length === 0" 68 *ngIf="promociones.length > 0 && sinonimos.length === 0"
69 [popover]="popoverDirective" 69 [popover]="popoverDirective"
70 [popoverContent]="promociones" 70 [popoverContent]="promociones"
71 (promoSeleccionada)="promoSeleccionada($event)" 71 (promoSeleccionada)="promoSeleccionada($event)"
72 class="text-white rounded-sm border-0"> 72 class="text-white rounded-sm border-0">
73 </app-popover-promos> 73 </app-popover-promos>
74 <app-popover-sinonimos 74 <app-popover-sinonimos
75 *ngIf="sinonimos.length > 0" 75 *ngIf="sinonimos.length > 0"
76 [popover]="popoverDirective" 76 [popover]="popoverDirective"
77 [popoverContent]="sinonimos" 77 [popoverContent]="sinonimos"
78 (sinonimoSeleccionado)="sinonimoSeleccionado($event)" 78 (sinonimoSeleccionado)="sinonimoSeleccionado($event)"
79 class="text-white rounded-sm border-0"> 79 class="text-white rounded-sm border-0">
80 </app-popover-sinonimos> 80 </app-popover-sinonimos>
81 </ng-template> 81 </ng-template>
82 <div 82 <div
83 placement="left" 83 placement="left"
84 triggers="" 84 triggers=""
85 [popover]="popTemplate" 85 [popover]="popTemplate"
86 class="w-100" 86 class="w-100"
87 #pop="bs-popover"> 87 #pop="bs-popover">
88 <div class="card bg-white border-0 shadow rounded mb-auto"> 88 <div class="card bg-white border-0 shadow rounded mb-auto">
89 <div class="card-body text-left px-4 py-3"> 89 <div class="card-body text-left px-4 py-3">
90 <div class="row"> 90 <div class="row">
91 <div class="col-6"> 91 <div class="col-6">
92 <p class="h3 card-title">Cargar Productos</p> 92 <p class="h3 card-title">Cargar Productos</p>
93 </div> 93 </div>
94 <div class="col-6 p-0"> 94 <div class="col-6 p-0">
95 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2"> 95 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2">
96 </div> 96 </div>
97 </div> 97 </div>
98 <p class="h5 card-text text-muted font-weight-light"> 98 <p class="h5 card-text text-muted font-weight-light">
99 Coloque el código de<br> 99 Coloque un producto frente<br>
100 barras o QR frente al scanner. 100 al lector de códigos o selecciónelo en pantalla
101 </p> 101 </p>
102 </div> 102 </div>
103 <div class="row m-4"> 103 <div class="row m-4">
104 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm"> 104 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
105 <!-- IMAGEN DE ESCANER --> 105 <!-- IMAGEN DE ESCANER -->
106 <img 106 <img
107 *ngIf="!productoAcargar" 107 *ngIf="!productoAcargar"
108 class="card-img-top d-block w-100 mx-auto rounded-sm" 108 class="card-img-top d-block w-100 mx-auto rounded-sm"
109 src="{{apiUrl}}/imagenes/escanner.jpg"> 109 src="{{apiUrl}}/imagenes/escanner.jpg">
110 110
111 <!-- PRODUCTO A CARGAR --> 111 <!-- PRODUCTO A CARGAR -->
112 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar"> 112 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar">
113 <img 113 <img
114 class="card-img-top d-block w-75 mx-auto rounded-sm" 114 class="card-img-top d-block w-75 mx-auto rounded-sm"
115 src="{{apiUrl}}/imagenes/testImg.jpg"> 115 src="{{apiUrl}}/imagenes/{{productoAcargar.imagenes[0].imagen}}">
116 116
117 <div class="row justify-content-between m-3"> 117 <div class="row justify-content-between m-3">
118 <div class="col-12 text-left px-1"> 118 <div class="col-12 text-left px-1">
119 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p> 119 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p>
120 </div> 120 </div>
121 <div class="col-12 text-right mt-2"> 121 <div class="col-12 text-right mt-2">
122 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p> 122 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
123 </div> 123 </div>
124 </div> 124 </div>
125 </div> 125 </div>
126 126
127 <!-- PROMO A CARGAR --> 127 <!-- PROMO A CARGAR -->
128 <div class="fade-in m-0" *ngIf="promoAcargar"> 128 <div class="fade-in m-0" *ngIf="promoAcargar">
129 <img 129 <img
130 class="card-img-top d-block w-100 mx-auto rounded-sm" 130 class="card-img-top d-block w-100 mx-auto rounded-sm"
131 src="{{apiUrl}}/imagenes/testImg.jpg"> 131 src="{{apiUrl}}/imagenes/{{promoAcargar.imagenes[0].imagen}}">
132 132
133 <div class="row justify-content-between m-3"> 133 <div class="row justify-content-between m-3">
134 <div class="col-12 text-left px-1"> 134 <div class="col-12 text-left px-1">
135 <p class="h6 font-weight-bold mb-0">{{promoAcargar.nombrePromo}}</p> 135 <p class="h6 font-weight-bold mb-0">{{promoAcargar.nombrePromo}}</p>
136 </div> 136 </div>
137 <div class="col-12 text-right mt-2 align-self-end"> 137 <div class="col-12 text-right mt-2 align-self-end">
138 <p class="h5 font-weight-bold mb-0">{{promoAcargar.precioTotal | currency}}</p> 138 <p class="h5 font-weight-bold mb-0">{{promoAcargar.precioTotal | currency}}</p>
139 </div> 139 </div>
140 </div> 140 </div>
141 </div> 141 </div>
142 142
143 </div> 143 </div>
144 <!-- BOTONES DE CARGAR PRODUCTOS--> 144 <!-- BOTONES DE CARGAR PRODUCTOS-->
145 <div 145 <div
146 class="col-5 pr-0" 146 class="col-5 pr-0"
147 *ngIf="promociones.length > 0"> 147 *ngIf="promociones.length > 0">
148 <button 148 <button
149 *ngIf="sinonimos.length > 0" 149 *ngIf="sinonimos.length > 0"
150 type="button" 150 type="button"
151 class="btn btn-light btn-block shadow-sm" 151 class="btn btn-light btn-block shadow-sm"
152 (click)="pop.show()"> 152 (click)="pop.show()">
153 <span class="pr-2">Personalizar</span> 153 <span class="pr-2">Personalizar</span>
154 <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i> 154 <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i>
155 </button> 155 </button>
156 <button 156 <button
157 *ngIf="!promoAcargar" 157 *ngIf="!promoAcargar"
158 type="button" 158 type="button"
159 class="btn btn-primary btn-block shadow-sm" 159 class="btn btn-primary btn-block shadow-sm"
160 (click)="pop.show()"> 160 (click)="pop.show()">
161 <span class="pr-2">Mostrar promociones</span> 161 <span class="pr-2">Mostrar promociones</span>
162 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i> 162 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i>
163 </button> 163 </button>
164 <button type="button" class="btn btn-light btn-block shadow-sm my-3"> 164 <button type="button" class="btn btn-light btn-block shadow-sm my-3">
165 <span class="pr-2 font-weight-bold">Confirmar</span> 165 <span class="pr-2 font-weight-bold">Confirmar</span>
166 <i class="fa fa-check text-success" aria-hidden="true"></i> 166 <i class="fa fa-check text-success" aria-hidden="true"></i>
167 </button> 167 </button>
168 <button 168 <button
169 type="button" 169 type="button"
170 class="btn btn-light btn-block shadow-sm" 170 class="btn btn-light btn-block shadow-sm"
171 (click)="deshacerCarga()"> 171 (click)="deshacerCarga()">
172 <span class="pr-2">Deshacer</span> 172 <span class="pr-2">Deshacer</span>
173 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 173 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
174 </button> 174 </button>
175 </div> 175 </div>
176 </div> 176 </div>
177 </div> 177 </div>
178 </div> 178 </div>
179 179
180 <!-- BUSCAR PRODUCTOS --> 180 <!-- BUSCAR PRODUCTOS -->
181 <div (click)="irBusquedaProductos(true)" 181 <div (click)="irBusquedaProductos(true)"
182 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 182 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
183 <div class="card-body text-left px-4 py-3"> 183 <div class="card-body text-left px-4 py-3">
184 <div class="row"> 184 <div class="row">
185 <div class="col-6"> 185 <div class="col-6">
186 <p class="h3 card-title">Buscar Productos</p> 186 <p class="h3 card-title">Buscar Productos</p>
187 <p class="h5 card-text text-muted font-weight-light"> 187 <p class="h5 card-text text-muted font-weight-light">
188 Busque aquí los productos<br> 188 Busque aquí los productos<br>
189 que no tienen código </p> 189 que no tienen código </p>
190 </div> 190 </div>
191 <div class="col-6 p-0"> 191 <div class="col-6 p-0">
192 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2"> 192 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2">
193 </div> 193 </div>
194 </div> 194 </div>
195 195
196 </div> 196 </div>
197 </div> 197 </div>
198 198
199 </div> 199 </div>
200 200
201 </div> 201 </div>
202 202
203 </div> 203 </div>
204 </div> 204 </div>
205 205
src/app/components/inicio/inicio.component.ts
Diff comments   View file @ 57d67af
1 import { Component, OnInit, ViewChild } from '@angular/core'; 1 import { Component, OnInit, ViewChild } from '@angular/core';
2 import { PopoverDirective } from 'ngx-bootstrap'; 2 import { PopoverDirective } from 'ngx-bootstrap';
3 import { appSettings } from 'src/etc/AppSettings'; 3 import { appSettings } from 'src/etc/AppSettings';
4 import { Producto } from 'src/app/wrappers/producto'; 4 import { Producto } from 'src/app/wrappers/producto';
5 import { ProductoService } from 'src/app/services/producto.service'; 5 import { ProductoService } from 'src/app/services/producto.service';
6 import { Router } from '@angular/router'; 6 import { Router } from '@angular/router';
7 import { Promocion } from 'src/app/wrappers/promocion'; 7 import { Promocion } from 'src/app/wrappers/promocion';
8 import { Sinonimo } from 'src/app/wrappers/sinonimo'; 8 import { Sinonimo } from 'src/app/wrappers/sinonimo';
9 import { HostListener } from '@angular/core'; 9 import { HostListener } from '@angular/core';
10 10
11 @Component({ 11 @Component({
12 selector: 'app-inicio', 12 selector: 'app-inicio',
13 templateUrl: './inicio.component.html', 13 templateUrl: './inicio.component.html',
14 styleUrls: ['./inicio.component.scss'] 14 styleUrls: ['./inicio.component.scss']
15 }) 15 })
16 export class InicioComponent implements OnInit { 16 export class InicioComponent implements OnInit {
17 17
18 @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) { 18 @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) {
19 19
20 if (e.keyCode == 13) { 20 if (e.keyCode == 13) {
21 this.buscarByCodigoBarras(this.busqueda); 21 this.buscarByCodigoBarras(this.busqueda);
22 this.busqueda = ''; 22 this.busqueda = '';
23 } else { 23 } else {
24 this.busqueda += e.key; 24 this.busqueda += e.key;
25 } 25 }
26 26
27 }; 27 };
28 28
29 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective; 29 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
30 private productoAcargar: Producto; 30 private productoAcargar: Producto;
31 private productos: Producto[]; 31 private productos: Producto[];
32 private promoAcargar: Promocion; 32 private promoAcargar: Promocion;
33 private tienePromo = false; 33 private tienePromo = false;
34 private productoEsPromo = false; 34 private productoEsPromo = false;
35 private busqueda: string = ''; 35 private busqueda: string = '';
36 private sinonimoAcargar: Sinonimo; 36 private sinonimoAcargar: Sinonimo;
37 37
38 promociones: Promocion[] = []; 38 promociones: Promocion[] = [];
39 sinonimos: Sinonimo[] = []; 39 sinonimos: Sinonimo[] = [];
40 apiUrl: string = appSettings.apiUrl 40 apiUrl: string = appSettings.apiUrl
41 41
42 constructor( 42 constructor(
43 private router: Router, 43 private router: Router,
44 private productoService: ProductoService) { } 44 private productoService: ProductoService) { }
45 45
46 ngOnInit() { 46 ngOnInit() {
47 47
48 this.productoAcargar = this.productoService.productoAcargar; 48 this.productoAcargar = this.productoService.productoAcargar;
49 this.getPromociones(); 49 this.getPromociones();
50 this.getProductos(); 50 this.getProductos();
51 } 51 }
52 52
53 getPromociones() { 53 getPromociones() {
54 if (this.productoAcargar) { 54 if (this.productoAcargar) {
55 var sector = this.productoAcargar.CodSec; 55 var sector = this.productoAcargar.CodSec;
56 var codigo = this.productoAcargar.CodArt; 56 var codigo = this.productoAcargar.CodArt;
57 this.productoService.getPromocion(sector, codigo) 57 this.productoService.getPromocion(sector, codigo)
58 .subscribe((res: Promocion[]) => { 58 .subscribe((res: Promocion[]) => {
59 59
60 if (res.length === 0) { 60 if (res.length === 0) {
61 //Si no tiene promociones la cargará al carrito despues de un tiempo 61 //Si no tiene promociones la cargará al carrito despues de un tiempo
62 setTimeout(() => { 62 setTimeout(() => {
63 this.productoService.productos.push(this.productoAcargar); 63 this.productoService.productos.push(this.productoAcargar);
64 this.productoAcargar = undefined; 64 this.productoAcargar = undefined;
65 }, 2000) 65 }, 2000)
66 } else { 66 } else {
67 67
68 this.promociones = res; 68 this.promociones = res;
69 this.popoverDirective.show(); 69 this.popoverDirective.show();
70 } 70 }
71 }, error => { console.error(error); }) 71 }, error => { console.error(error); })
72 } 72 }
73 } 73 }
74 74
75 showPopover() { 75 showPopover() {
76 76
77 this.popoverDirective.show(); 77 this.popoverDirective.show();
78 } 78 }
79 79
80 getProductos() { 80 getProductos() {
81 this.productoService.getAll() 81 this.productoService.getAll()
82 .subscribe((productos: Producto[]) => { 82 .subscribe((productos: Producto[]) => {
83 this.productos = productos; 83 this.productos = productos;
84 }); 84 });
85 } 85 }
86 86
87 private irBusquedaProductos(verPromociones) { 87 private irBusquedaProductos(verPromociones) {
88 88
89 this.productoService.verCategoriasProductos = verPromociones; 89 this.productoService.verCategoriasProductos = verPromociones;
90 this.router.navigate(['busqueda-productos']); 90 this.router.navigate(['busqueda-productos']);
91 } 91 }
92 92
93 deshacerCarga() { 93 deshacerCarga() {
94 94
95 if (this.sinonimoAcargar || this.sinonimos.length > 0) { 95 if (this.sinonimoAcargar || this.sinonimos.length > 0) {
96 this.sinonimos = []; 96 this.sinonimos = [];
97 this.sinonimoAcargar = undefined; 97 this.sinonimoAcargar = undefined;
98 this.popoverDirective.hide(); 98 this.popoverDirective.hide();
99 } 99 }
100 100
101 if (this.promoAcargar) { 101 if (this.promoAcargar) {
102 this.promoAcargar = undefined; 102 this.promoAcargar = undefined;
103 this.popoverDirective.show(); 103 this.popoverDirective.show();
104 } else { 104 } else {
105 this.productoAcargar = undefined; 105 this.productoAcargar = undefined;
106 this.promociones = []; 106 this.promociones = [];
107 this.popoverDirective.hide(); 107 this.popoverDirective.hide();
108 } 108 }
109 } 109 }
110 110
111 promoSeleccionada($event: Promocion) { 111 promoSeleccionada($event: Promocion) {
112 112
113 this.promoAcargar = $event; 113 this.promoAcargar = $event;
114 this.popoverDirective.hide(); 114 this.popoverDirective.hide();
115 if (this.promoAcargar.sinonimos) { 115 if (this.promoAcargar.sinonimos) {
116 var sector = this.promoAcargar.sector; 116 var sector = this.promoAcargar.sector;
117 var codigo = this.promoAcargar.codigo; 117 var codigo = this.promoAcargar.codigo;
118 this.productoService.getPromocionSinonimos(sector, codigo) 118 this.productoService.getPromocionSinonimos(sector, codigo)
119 .subscribe((res: Sinonimo[]) => { 119 .subscribe((res: Sinonimo[]) => {
120
120 res.forEach(resSinonimo => { 121 res.forEach(resSinonimo => {
121 resSinonimo.productos.forEach(productoSinonimo => { 122
122 this.promoAcargar.productos.forEach(productoPromo => { 123 this.promoAcargar.productos.forEach(productoPromo => {
123 if (productoPromo.id === productoSinonimo.id) { 124
124 productoSinonimo.esPadre = true; 125 if (productoPromo.idSinonimo === resSinonimo.ID_SIN) {
125 } 126 resSinonimo.cantidad = productoPromo.cantidad;
126 }); 127 resSinonimo.productoPadre = productoPromo.id;
127 128 }
128 }) 129 });
130
129 }) 131 })
130 this.sinonimos = res; 132 this.sinonimos = res;
131 this.showPopover(); 133 this.showPopover();
132 }) 134 })
133 } 135 }
134 } 136 }
135 137
136 sinonimoSeleccionado($event: Sinonimo) { 138 sinonimoSeleccionado($event: Sinonimo) {
137 139
138 console.log($event); 140 console.log($event);
139 this.sinonimoAcargar = $event; 141 this.sinonimoAcargar = $event;
140 } 142 }
141 143
142 buscarByCodigoBarras(busqueda) { 144 buscarByCodigoBarras(busqueda) {
143 145
144 let producto = this.productos.filter(producto => { 146 let producto = this.productos.filter(producto => {
145 return producto.codigoBarra == busqueda; 147 return producto.codigoBarra == busqueda;
146 }); 148 });
147 149
148 if (producto.length) { 150 if (producto.length) {
149 151
150 this.productoAcargar = producto[0]; 152 this.productoAcargar = producto[0];
151 this.getPromociones(); 153 this.getPromociones();
152 154
153 } else { 155 } else {
154 alert('No se encuentra el producto'); 156 alert('No se encuentra el producto');
155 } 157 }
156 158
157 } 159 }
158 160
159 } 161 }
160 162
src/app/components/popover-sinonimos/popover-sinonimos.component.html
Diff comments   View file @ 57d67af
1 <div class="card-body fade-left"> 1 <div class="card-body fade-left">
2 2
3 <div class="row m-0"> 3 <div class="row m-0">
4 <div class="col text-left"> 4 <div class="col text-left">
5 <p class="h4 card-title"> 5 <p class="h4 card-title">
6 Personalice su pedido 6 Personalice su pedido
7 </p> 7 </p>
8 </div> 8 </div>
9 </div> 9 </div>
10 10
11 <div class="row m-0 overflow-scroll popover-size pr-2 my-2"> 11 <div class="row m-0 overflow-scroll popover-size pr-2 my-2">
12 <div class="col"> 12 <div class="col">
13 <div class="row mb-2" *ngFor="let sinonimo of popoverContent"> 13 <div class="row mb-2" *ngFor="let sinonimo of popoverContent; let i = index">
14 <div class="col"> 14 <div class="col">
15 15
16 <div class="row m-0"> 16 <div class="row m-0">
17 <div class="col text-left"> 17 <div class="col text-left">
18 <p class="h5 card-title"> 18 <p class="h5 card-title">
19 Elija una opción 19 Elija una opción - Cantidad Restante {{cantidadRestanteSinonimos[i]}}
20 </p> 20 </p>
21 </div> 21 </div>
22 </div> 22 </div>
23 23
24 <div class="row my-3 d-flex justify-content-between" *ngFor="let producto of sinonimo.productos"> 24 <div class="row my-3 d-flex justify-content-between" *ngFor="let producto of sinonimo.productos">
25 <div class="col-8 pl-4 h6 m-0"> 25 <div class="col-7 pl-4 h6 text-right">
26 <div class="custom-control custom-radio"> 26 <p class="m-0 font-weight-normal">
27 <input 27 {{producto.DetArt}}
28 type="radio" 28 </p>
29 [id]="producto.id"
30 [checked]="producto.esPadre"
31 name="sinonimoOpciones"
32 class="custom-control-input"
33 (click)="setSinonimo(sinonimo)">
34 <label class="font-weight-normal custom-control-label" [for]="producto.id">
35 {{producto.DetArt}}
36 </label>
37 </div>
38 </div> 29 </div>
39 <div class="col-auto"> 30 <div class="col-auto">
40 <div class="btn-group-sm btn-group float-left my-auto" role="group"> 31 <div class="btn-group float-left my-auto" role="group">
41 <button type="button" class="btn btn-light btn-sm my-auto border"> 32 <button
33 type="button"
34 class="btn btn-light my-auto border"
35 (click)="sumarCantidad(producto, i)">
42 <i class="fa fa-plus" aria-hidden="true"></i> 36 <i class="fa fa-plus" aria-hidden="true"></i>
43 </button> 37 </button>
44 <div class="bg-white border border-white px-3 my-auto text-dark h5"> 38 <div class="bg-white border border-white px-3 py-1 my-auto text-dark h5">
45 <small>{{producto.cantidad}}</small> 39 <small
40 [ngClass]="{'font-weight-bold': producto.cantidad > 0}">
41 {{producto.cantidad}}
42 </small>
46 </div> 43 </div>
47 <button type="button" class="btn btn-light btn-sm my-auto border"> 44 <button
45 type="button"
46 class="btn btn-light my-auto border"
47 (click)="restarCantidad(producto, i)">
48 <i class="fa fa-minus" aria-hidden="true"></i> 48 <i class="fa fa-minus" aria-hidden="true"></i>
49 </button> 49 </button>
50 </div> 50 </div>
51 </div> 51 </div>
52 </div> 52 </div>
53 53
54 </div> 54 </div>
55 </div> 55 </div>
56 </div> 56 </div>
57 </div> 57 </div>
58 58
59 <div class="row mt-3 justify-content-end"> 59 <div class="row mt-3 justify-content-end">
src/app/components/popover-sinonimos/popover-sinonimos.component.ts
Diff comments   View file @ 57d67af
1 import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; 1 import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
2 import { PopoverDirective } from 'ngx-bootstrap'; 2 import { PopoverDirective } from 'ngx-bootstrap';
3 import { Producto } from 'src/app/wrappers/producto'; 3 import { Producto } from 'src/app/wrappers/producto';
4 import { Sinonimo } from 'src/app/wrappers/sinonimo'; 4 import { Sinonimo } from 'src/app/wrappers/sinonimo';
5 5
6 @Component({ 6 @Component({
7 selector: 'app-popover-sinonimos', 7 selector: 'app-popover-sinonimos',
8 templateUrl: './popover-sinonimos.component.html', 8 templateUrl: './popover-sinonimos.component.html',
9 styleUrls: ['./popover-sinonimos.component.scss'] 9 styleUrls: ['./popover-sinonimos.component.scss']
10 }) 10 })
11 export class PopoverSinonimosComponent implements OnInit { 11 export class PopoverSinonimosComponent implements OnInit {
12 12
13 //Directiva del popover, para poder cerrarlo desde este componente 13 //Directiva del popover, para poder cerrarlo desde este componente
14 @Input() popover: PopoverDirective; 14 @Input() popover: PopoverDirective;
15 @Input() popoverContent: Sinonimo[]; 15 @Input() popoverContent: Sinonimo[];
16 @Output() sinonimoSeleccionado = new EventEmitter<Sinonimo>(); 16 @Output() sinonimoSeleccionado = new EventEmitter<Sinonimo>();
17 sinonimo: Sinonimo; 17 sinonimo: Sinonimo;
18 18
19 private cantidadRestanteSinonimos: number[] = [];
20
19 constructor() { } 21 constructor() { }
20 22
21 ngOnInit() { 23 ngOnInit() {
22 24
23 //Seteo en la variable a emitir el sinonimo que sea padre 25 //Seteo en la variable a emitir el sinonimo que sea padre
24 this.popoverContent.forEach(sinonimo => { 26 this.popoverContent.forEach(sinonimo => {
25 // this.sinonimo = sinonimo.esPadre ? sinonimo : undefined; 27
28 this.cantidadRestanteSinonimos.push(0);
29 this.sinonimo = sinonimo.productoPadre ? sinonimo : undefined;
30 sinonimo.productos.forEach(producto => {
31
32 producto.cantidad = (producto.id === sinonimo.productoPadre) ? sinonimo.cantidad : 0;
33 })
26 }) 34 })
27 } 35 }
28 36
29 hidePopover() { 37 hidePopover() {
30 38
31 this.sinonimoSeleccionado.emit(this.sinonimo); 39 this.sinonimoSeleccionado.emit(this.sinonimo);
32 this.popover.hide(); 40 this.popover.hide();
33 } 41 }
34 42
35 setSinonimo(sinonimo: Sinonimo) { 43 setSinonimo(sinonimo: Sinonimo) {
36 44
37 this.sinonimo = sinonimo; 45 this.sinonimo = sinonimo;
38 } 46 }
39 47
48 sumarCantidad(producto: Producto, i: number) {
49
50 if (this.cantidadRestanteSinonimos[i] === 0) return;
51 producto.cantidad++;
52 this.cantidadRestanteSinonimos[i]--;
53 }
54
55 restarCantidad(producto: Producto, i: number) {
56
57 if (this.cantidadRestanteSinonimos[i] === this.popoverContent[i].cantidad) return;
58 if (producto.cantidad === 0) return;
59 producto.cantidad--;
60 this.cantidadRestanteSinonimos[i]++;
61 }
62
40 } 63 }
41 64
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ 57d67af
1 <div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center"> 1 <div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center">
2 2
3 <p class="h4 border-bottom border-white text-white mt-4 pb-2"> 3 <p class="h4 border-bottom border-white text-white mt-4 pb-2">
4 Mi compra 4 Mi compra
5 <i class="fa fa-shopping-cart" aria-hidden="true"></i> 5 <i class="fa fa-shopping-cart" aria-hidden="true"></i>
6 </p> 6 </p>
7 7
8 <div class="overflow-auto overflow-scroll mb-2 w-100"> 8 <div class="overflow-auto overflow-scroll mb-2 w-100">
9 <!-- PRODUCTOS CARRITO --> 9 <!-- PRODUCTOS CARRITO -->
10 <div 10 <div
11 class="fade-left my-2 bg-white border-0 rounded-sm" 11 class="slide-in-bl my-2 bg-white border-0 rounded-sm"
12 *ngFor="let producto of productosCarrito.slice().reverse(); let i = index"> 12 *ngFor="let producto of productosCarrito.slice().reverse(); let i = index">
13 <img class="w-100 m-auto rounded-sm shadow" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}"> 13 <img class="w-100 m-auto rounded-sm shadow" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}">
14 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm"> 14 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">
15 <div class="col-12 p-0 pt-2 text-left my-auto"> 15 <div class="col-12 p-0 pt-2 text-left my-auto">
16 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> 16 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
17 <p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p> 17 <p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p>
18 </div> 18 </div>
19 <div class="col-12 pr-1 text-right h6 my-auto "> 19 <div class="col-12 pr-1 text-right h6 my-auto ">
20 <p class="m-0">{{producto.PreVen | currency}}</p> 20 <p class="m-0">{{producto.PreVen | currency}}</p>
21 </div> 21 </div>
22 </div> 22 </div>
23 <div class="row m-0 p-0"> 23 <div class="row m-0 p-0">
24 <div class="col-6 px-2 my-2"> 24 <div class="col-6 px-2 my-2">
25 <div class="btn-group-sm btn-group float-left my-auto" role="group"> 25 <div class="btn-group-sm btn-group float-left my-auto" role="group">
26 <button type="button" class="btn btn-light btn-sm my-auto border" (click)="aumentarContador(i)"> 26 <button type="button" class="btn btn-light btn-sm my-auto border" (click)="aumentarContador(i)">
27 <i class="fa fa-plus" aria-hidden="true"></i> 27 <i class="fa fa-plus" aria-hidden="true"></i>
28 </button> 28 </button>
29 <div class="bg-white border border-white px-3 my-auto text-dark h5"> 29 <div class="bg-white border border-white px-3 my-auto text-dark h5">
30 <small>{{producto.cantidad}}</small> 30 <small>{{producto.cantidad}}</small>
31 </div> 31 </div>
32 <button type="button" class="btn btn-light btn-sm my-auto border" (click)="decrementarContador(i)"> 32 <button type="button" class="btn btn-light btn-sm my-auto border" (click)="decrementarContador(i)">
33 <i class="fa fa-minus" aria-hidden="true"></i> 33 <i class="fa fa-minus" aria-hidden="true"></i>
34 </button> 34 </button>
35 </div> 35 </div>
36 </div> 36 </div>
37 <div class="col-6 px-2 my-2"> 37 <div class="col-6 px-2 my-2">
38 <div class="btn-group-sm btn-group float-right my-auto" role="group"> 38 <div class="btn-group-sm btn-group float-right my-auto" role="group">
39 <button type="button" class="btn btn-light btn-sm my-auto float-left border mr-2"> 39 <button type="button" class="btn btn-light btn-sm my-auto float-left border mr-2">
40 <i class="fa fa-hand-o-up" aria-hidden="true"></i> 40 <i class="fa fa-hand-o-up" aria-hidden="true"></i>
41 </button> 41 </button>
42 <button type="button" class="btn btn-secondary btn-sm my-auto ml-2" (click)="deleteProducto(i)"> 42 <button type="button" class="btn btn-secondary btn-sm my-auto ml-2" (click)="deleteProducto(i)">
43 <i class="fa fa-times" aria-hidden="true"></i> 43 <i class="fa fa-times" aria-hidden="true"></i>
44 </button> 44 </button>
45 </div> 45 </div>
46 </div> 46 </div>
47 </div> 47 </div>
48 </div> 48 </div>
49 </div> 49 </div>
50 50
51 <!-- TOTAL --> 51 <!-- TOTAL -->
52 <div class="card rounded-top-sm mt-auto blue-gradient border-0"> 52 <div class="card rounded-top-sm mt-auto blue-gradient border-0">
53 <div class="card-body row"> 53 <div class="card-body row">
54 <div class="col-12"> 54 <div class="col-12">
55 <p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont === 1">({{cont}}) item</p> 55 <p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont === 1">({{cont}}) item</p>
56 <p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont > 1">({{cont}}) items</p> 56 <p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont > 1">({{cont}}) items</p>
57 <p class="h3 text-secondary">Total</p> 57 <p class="h3 text-secondary">Total</p>
58 <p class="h3 font-weight-bold">{{getTotal() | currency}}</p> 58 <p class="h3 font-weight-bold">{{getTotal() | currency}}</p>
59 </div> 59 </div>
60 <div class="col-12"> 60 <div class="col-12">
61 <button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1" routerLink="/confirmacion-carrito"> 61 <button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1" routerLink="/confirmacion-carrito">
62 <span class="font-weight-bold pr-1">Finalizar y Pagar</span> 62 <span class="font-weight-bold pr-1">Finalizar y Pagar</span>
63 <i class="fa fa-check text-success" aria-hidden="true"></i> 63 <i class="fa fa-check text-success" aria-hidden="true"></i>
64 </button> 64 </button>
65 <button 65 <button
66 type="button" 66 type="button"
67 class="btn btn-block btn-light shadow btn-sm shadow" 67 class="btn btn-block btn-light shadow btn-sm shadow"
68 [routerLink]="['/cancelar-compra']"> 68 [routerLink]="['/cancelar-compra']">
69 <span class="pr-1">Cancelar</span> 69 <span class="pr-1">Cancelar</span>
70 <i class="fa fa-times text-danger" aria-hidden="true"></i> 70 <i class="fa fa-times text-danger" aria-hidden="true"></i>
71 </button> 71 </button>
72 </div> 72 </div>
73 </div> 73 </div>
74 </div> 74 </div>
75 </div> 75 </div>
76 76
src/app/components/sidebar/sidebar.component.ts
Diff comments   View file @ 57d67af
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Producto } from 'src/app/wrappers/producto'; 2 import { Producto } from 'src/app/wrappers/producto';
3 import { appSettings } from 'src/etc/AppSettings'; 3 import { appSettings } from 'src/etc/AppSettings';
4 import { ProductoService } from 'src/app/services/producto.service'; 4 import { ProductoService } from 'src/app/services/producto.service';
5 5
6 6
7 @Component({ 7 @Component({
8 selector: 'app-sidebar', 8 selector: 'app-sidebar',
9 templateUrl: './sidebar.component.html', 9 templateUrl: './sidebar.component.html',
10 styleUrls: ['./sidebar.component.scss'], 10 styleUrls: ['./sidebar.component.scss'],
11 }) 11 })
12 export class SidebarComponent implements OnInit { 12 export class SidebarComponent implements OnInit {
13 13
14 private cont: number = 1; 14 private cont: number = 1;
15 private min: number = 1; 15 private min: number = 1;
16 private max: number = 50; 16 private max: number = 50;
17 private total: number = 0; 17 private total: number = 0;
18 private apiUrl: string = appSettings.apiUrl; 18 private apiUrl: string = appSettings.apiUrl;
19 19
20 public productosCarrito: Producto[] = []; 20 public productosCarrito: Producto[] = [];
21 21
22 constructor(private productoService: ProductoService) { 22 constructor(private productoService: ProductoService) {
23 23
24 this.productosCarrito = this.productoService.productos; 24 this.productosCarrito = this.productoService.productos;
25 } 25 }
26 26
27 ngOnInit() { 27 ngOnInit() {
28 28
29 } 29 }
30 30
31 getCantidadProductos() { 31 getCantidadProductos() {
32 32
33 for (let i = 0; i < this.productosCarrito.length; i++) { 33 for (let i = 0; i < this.productosCarrito.length; i++) {
34 this.productosCarrito[i].cantidad = 1 34 this.productosCarrito[i].cantidad = 1
35 this.cont++; 35 this.cont++;
36 } 36 }
37 return this.cont; 37 return this.cont;
38 } 38 }
39 39
40 getTotal() { 40 getTotal() {
41 41
42 let subTotal = 0; 42 let subTotal = 0;
43 for (let i = 0; i < this.productosCarrito.length; i++) { 43 for (let i = 0; i < this.productosCarrito.length; i++) {
44 subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad); 44 subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad);
45 } 45 }
46 return this.total = subTotal; 46 return this.total = subTotal;
47 } 47 }
48 48
49 public aumentarContador(index) { 49 public aumentarContador(index) {
50 50
51 this.cont++; 51 this.cont++;
52 for (let i = 0; i < this.productosCarrito.length; i++) { 52 for (let i = 0; i < this.productosCarrito.length; i++) {
53 if (i === index) { 53 if (i === index) {
54 this.total = this.total + this.productosCarrito[i].PreVen; 54 this.total = this.total + this.productosCarrito[i].PreVen;
55 return (this.productosCarrito[i].cantidad === this.max) ? 55 return (this.productosCarrito[i].cantidad === this.max) ?
56 this.productosCarrito[i].cantidad : this.productosCarrito[i].cantidad++; 56 this.productosCarrito[i].cantidad : this.productosCarrito[i].cantidad++;
57 57
58 } 58 }
59 } 59 }
60 } 60 }
61 61
62 decrementarContador(index) { 62 decrementarContador(index) {
63 63
64 for (let i = 0; i < this.productosCarrito.length; i++) { 64 for (let i = 0; i < this.productosCarrito.length; i++) {
65 if (i === index && this.productosCarrito[i].cantidad > this.min) { 65 if (i === index && this.productosCarrito[i].cantidad > this.min) {
66 this.productosCarrito[i].cantidad--; 66 this.productosCarrito[i].cantidad--;
67 this.cont--; 67 this.cont--;
68 break; 68 break;
69 } 69 }
70 } 70 }
71 71
72 this.getTotal() 72 this.getTotal()
73 } 73 }
74 74
75 setCantidadItems() { 75 setCantidadItems() {
76 76
77 this.cont = 0; 77 this.cont = 0;
78 for (let i = 0; i < this.productosCarrito.length; i++) { 78 for (let i = 0; i < this.productosCarrito.length; i++) {
79 this.cont += this.productosCarrito[i].cantidad; 79 this.cont += this.productosCarrito[i].cantidad;
80 } 80 }
81 } 81 }
82 82
83 deleteProducto(index: number) { 83 deleteProducto(index: number) {
84 84
85 for (let i = 0; i < this.productosCarrito.length; i++) { 85 for (let i = 0; i < this.productosCarrito.length; i++) {
86 if (i === index) { 86 if (i === index) {
87 this.cont -= this.productosCarrito[i].cantidad; 87 this.cont -= this.productosCarrito[i].cantidad;
88 //Elimina del total el PreVen de todo el item 88 //Elimina del total el PreVen de todo el item
89 this.total = this.total - (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad); 89 this.total = this.total - (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad);
90 this.productosCarrito.splice(i, 1); 90 this.productosCarrito.reverse().splice(i, 1);
91 return; 91 return;
92 } 92 }
93 } 93 }
94 } 94 }
95 95
96 cleanCarrito() { 96 cleanCarrito() {
97 97
98 this.productoService.productos = this.productosCarrito = []; 98 this.productoService.productos = this.productosCarrito = [];
99 this.total = 0; 99 this.total = 0;
100 this.cont = 0; 100 this.cont = 0;
101 } 101 }
102 } 102 }
103 103
src/app/wrappers/producto.ts
Diff comments   View file @ 57d67af
1 export interface Producto { 1 export interface Producto {
2 CodSec: number; 2 CodSec: number;
3 CodArt: number; 3 CodArt: number;
4 DetArt: string; 4 DetArt: string;
5 CodRub: number; 5 CodRub: number;
6 Costo: number; 6 Costo: number;
7 PreNet: number; 7 PreNet: number;
8 ImpInt: number; 8 ImpInt: number;
9 UniVen: number; 9 UniVen: number;
10 FecCos: Date; 10 FecCos: Date;
11 UltAct: Date; 11 UltAct: Date;
12 CodPro: number; 12 CodPro: number;
13 ExiDep: number; 13 ExiDep: number;
14 ExiVta: number; 14 ExiVta: number;
15 MinDep: number; 15 MinDep: number;
16 MaxDep: number; 16 MaxDep: number;
17 MinPVE: number; 17 MinPVE: number;
18 MaxPVE: number; 18 MaxPVE: number;
19 ENTTur: number; 19 ENTTur: number;
20 SINTur: number; 20 SINTur: number;
21 SALTur: number; 21 SALTur: number;
22 IvaSN: boolean; 22 IvaSN: boolean;
23 DepSN: boolean; 23 DepSN: boolean;
24 RubMay: number; 24 RubMay: number;
25 PreVen: number; 25 PreVen: number;
26 IvaCO: number; 26 IvaCO: number;
27 TIP: string; 27 TIP: string;
28 IMPIVA: number; 28 IMPIVA: number;
29 ENTADM: number; 29 ENTADM: number;
30 SALADM: number; 30 SALADM: number;
31 CODIIN: number; 31 CODIIN: number;
32 PRO: boolean; 32 PRO: boolean;
33 FPP: boolean; 33 FPP: boolean;
34 ESS: boolean; 34 ESS: boolean;
35 FID: Date; 35 FID: Date;
36 NID: number; 36 NID: number;
37 FIV: Date; 37 FIV: Date;
38 NIV: number; 38 NIV: number;
39 COO: string; 39 COO: string;
40 CAG: string; 40 CAG: string;
41 CAP: number; 41 CAP: number;
42 UTL: number; 42 UTL: number;
43 NHA: boolean; 43 NHA: boolean;
44 PID: boolean; 44 PID: boolean;
45 PRV: number; 45 PRV: number;
46 PRD: number; 46 PRD: number;
47 ImpInt2: number; 47 ImpInt2: number;
48 E_HD: string; 48 E_HD: string;
49 C_HD: string; 49 C_HD: string;
50 CLA: number; 50 CLA: number;
51 UNICAP: number; 51 UNICAP: number;
52 ELBPRO: string; 52 ELBPRO: string;
53 PPP: number; 53 PPP: number;
54 ALI: number; 54 ALI: number;
55 BAL_TIPO: string; 55 BAL_TIPO: string;
56 PER_MAY: boolean; 56 PER_MAY: boolean;
57 ES_MAY: boolean; 57 ES_MAY: boolean;
58 CLA_MAY: number; 58 CLA_MAY: number;
59 PME_CMP: string; 59 PME_CMP: string;
60 USA_BAL: boolean; 60 USA_BAL: boolean;
61 DET_LAR: string; 61 DET_LAR: string;
62 ROTULO: string; 62 ROTULO: string;
63 REC_MANUAL: boolean; 63 REC_MANUAL: boolean;
64 E_HD1: string; 64 E_HD1: string;
65 C_HD1: string; 65 C_HD1: string;
66 ImpInt3: number; 66 ImpInt3: number;
67 FUA_MAE_YPF: Date; 67 FUA_MAE_YPF: Date;
68 CPQ: number; 68 CPQ: number;
69 EPQ: string; 69 EPQ: string;
70 BPQ: number; 70 BPQ: number;
71 PUPQ: number; 71 PUPQ: number;
72 CORVTO: boolean; 72 CORVTO: boolean;
73 CORVTO_COSTO: number; 73 CORVTO_COSTO: number;
74 UTLFR: number; 74 UTLFR: number;
75 FAMILIA: number; 75 FAMILIA: number;
76 ES_LUB: boolean; 76 ES_LUB: boolean;
77 ES_FERT: boolean; 77 ES_FERT: boolean;
78 AutoFac: boolean; 78 AutoFac: boolean;
79 LitrosPCD: number; 79 LitrosPCD: number;
80 LisPCD: number; 80 LisPCD: number;
81 ImpLey23966: boolean; 81 ImpLey23966: boolean;
82 es_bio: boolean; 82 es_bio: boolean;
83 ExpArbaRev: boolean; 83 ExpArbaRev: boolean;
84 ES_AGROQ: boolean; 84 ES_AGROQ: boolean;
85 ES_PLAST: boolean; 85 ES_PLAST: boolean;
86 es_bio_por: string; 86 es_bio_por: string;
87 IMP_IMP_INT: boolean; 87 IMP_IMP_INT: boolean;
88 id: number; 88 id: number;
89 nombreImagen?: any; 89 nombreImagen?: any;
90 categoria_selfservice: number; 90 categoria_selfservice: number;
91 cantidad?: number; 91 cantidad?: number;
92 showCargarProducto?: boolean; 92 showCargarProducto?: boolean;
93 esPadre?: boolean; 93 esPadre?: boolean;
94 codigoBarra: string; 94 codigoBarra: string;
95 idSinonimo?: number;
95 } 96 }
96 97
src/app/wrappers/sinonimo.ts
Diff comments   View file @ 57d67af
1 import { Producto } from './producto'; 1 import { Producto } from './producto';
2 2
3 export interface Sinonimo { 3 export interface Sinonimo {
4 4
5 ID_SIN: number, 5 ID_SIN: number,
6 descripcion: string, 6 descripcion: string,
7 productos: Producto[], 7 productos: Producto[],
8 productoPadre?: number;
9 cantidad? : number;
8 } 10 }
9 11
src/assets/scss/animation.scss
Diff comments   View file @ 57d67af
1 .fade-in { 1 .fade-in {
2 -webkit-animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both; 2 -webkit-animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
3 animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both; 3 animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
4 } 4 }
5 5
6 @-webkit-keyframes fadein { 6 @-webkit-keyframes fadein {
7 0% { 7 0% {
8 -webkit-transform: translateZ(80px); 8 -webkit-transform: translateZ(80px);
9 transform: translateZ(80px); 9 transform: translateZ(80px);
10 opacity: 0; 10 opacity: 0;
11 } 11 }
12 100% { 12 100% {
13 -webkit-transform: translateZ(0); 13 -webkit-transform: translateZ(0);
14 transform: translateZ(0); 14 transform: translateZ(0);
15 opacity: 1; 15 opacity: 1;
16 } 16 }
17 } 17 }
18 18
19 @keyframes fadein { 19 @keyframes fadein {
20 0% { 20 0% {
21 -webkit-transform: translateZ(80px); 21 -webkit-transform: translateZ(80px);
22 transform: translateZ(80px); 22 transform: translateZ(80px);
23 opacity: 0; 23 opacity: 0;
24 } 24 }
25 100% { 25 100% {
26 -webkit-transform: translateZ(0); 26 -webkit-transform: translateZ(0);
27 transform: translateZ(0); 27 transform: translateZ(0);
28 opacity: 1; 28 opacity: 1;
29 } 29 }
30 } 30 }
31 31
32 .fade-right { 32 .fade-right {
33 animation: faderight 1s; 33 animation: faderight 1s;
34 -moz-animation: faderight 1s; /* Firefox */ 34 -moz-animation: faderight 1s; /* Firefox */
35 -webkit-animation: faderight 1s; /* Safari and Chrome */ 35 -webkit-animation: faderight 1s; /* Safari and Chrome */
36 -o-animation: faderight 1s; /* Opera */ 36 -o-animation: faderight 1s; /* Opera */
37 } 37 }
38 38
39 @keyframes faderight { 39 @keyframes faderight {
40 from { 40 from {
41 opacity: 0; 41 opacity: 0;
42 transform: translateX(-20px); 42 transform: translateX(-20px);
43 } 43 }
44 to { 44 to {
45 opacity: 1; 45 opacity: 1;
46 transform: translateX(0); 46 transform: translateX(0);
47 } 47 }
48 } 48 }
49 49
50 @-moz-keyframes faderight { 50 @-moz-keyframes faderight {
51 /* Firefox */ 51 /* Firefox */
52 from { 52 from {
53 opacity: 0; 53 opacity: 0;
54 -moz-transform: translateX(-20px); 54 -moz-transform: translateX(-20px);
55 } 55 }
56 to { 56 to {
57 opacity: 1; 57 opacity: 1;
58 -moz-transform: translateX(0); 58 -moz-transform: translateX(0);
59 } 59 }
60 } 60 }
61 61
62 @-webkit-keyframes faderight { 62 @-webkit-keyframes faderight {
63 /* Safari and Chrome */ 63 /* Safari and Chrome */
64 from { 64 from {
65 opacity: 0; 65 opacity: 0;
66 -webkit-transform: translateX(-20px); 66 -webkit-transform: translateX(-20px);
67 } 67 }
68 to { 68 to {
69 opacity: 1; 69 opacity: 1;
70 -webkit-transform: translateX(0); 70 -webkit-transform: translateX(0);
71 } 71 }
72 } 72 }
73 73
74 .fade-left { 74 .fade-left {
75 -webkit-animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; 75 -webkit-animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
76 animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; 76 animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
77 } 77 }
78 78
79 @-webkit-keyframes fadeleft { 79 @-webkit-keyframes fadeleft {
80 0% { 80 0% {
81 -webkit-transform: scaleX(0); 81 -webkit-transform: scaleX(0);
82 transform: scaleX(0); 82 transform: scaleX(0);
83 -webkit-transform-origin: 100% 100%; 83 -webkit-transform-origin: 100% 100%;
84 transform-origin: 100% 100%; 84 transform-origin: 100% 100%;
85 opacity: 1; 85 opacity: 1;
86 } 86 }
87 100% { 87 100% {
88 -webkit-transform: scaleX(1); 88 -webkit-transform: scaleX(1);
89 transform: scaleX(1); 89 transform: scaleX(1);
90 -webkit-transform-origin: 100% 100%; 90 -webkit-transform-origin: 100% 100%;
91 transform-origin: 100% 100%; 91 transform-origin: 100% 100%;
92 opacity: 1; 92 opacity: 1;
93 } 93 }
94 } 94 }
95 95
96 @keyframes fadeleft { 96 @keyframes fadeleft {
97 0% { 97 0% {
98 -webkit-transform: scaleX(0); 98 -webkit-transform: scaleX(0);
99 transform: scaleX(0); 99 transform: scaleX(0);
100 -webkit-transform-origin: 100% 100%; 100 -webkit-transform-origin: 100% 100%;
101 transform-origin: 100% 100%; 101 transform-origin: 100% 100%;
102 opacity: 1; 102 opacity: 1;
103 } 103 }
104 100% { 104 100% {
105 -webkit-transform: scaleX(1); 105 -webkit-transform: scaleX(1);
106 transform: scaleX(1); 106 transform: scaleX(1);
107 -webkit-transform-origin: 100% 100%; 107 -webkit-transform-origin: 100% 100%;
108 transform-origin: 100% 100%; 108 transform-origin: 100% 100%;
109 opacity: 1; 109 opacity: 1;
110 } 110 }
111 } 111 }
112 112
113 .fade-bottom { 113 .fade-bottom {
114 -webkit-animation: fade-bottom 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; 114 -webkit-animation: fade-bottom 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
115 animation: fade-bottom 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; 115 animation: fade-bottom 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
116 } 116 }
117 117
118 @-webkit-keyframes fade-bottom { 118 @-webkit-keyframes fade-bottom {
119 0% { 119 0% {
120 -webkit-transform: scaleY(0.4); 120 -webkit-transform: scaleY(0.4);
121 transform: scaleY(0.4); 121 transform: scaleY(0.4);
122 -webkit-transform-origin: 100% 0%; 122 -webkit-transform-origin: 100% 0%;
123 transform-origin: 100% 0%; 123 transform-origin: 100% 0%;
124 } 124 }
125 100% { 125 100% {
126 -webkit-transform: scaleY(1); 126 -webkit-transform: scaleY(1);
127 transform: scaleY(1); 127 transform: scaleY(1);
128 -webkit-transform-origin: 100% 0%; 128 -webkit-transform-origin: 100% 0%;
129 transform-origin: 100% 0%; 129 transform-origin: 100% 0%;
130 } 130 }
131 } 131 }
132 132
133 @keyframes fade-bottom { 133 @keyframes fade-bottom {
134 0% { 134 0% {
135 -webkit-transform: scaleY(0.4); 135 -webkit-transform: scaleY(0.4);
136 transform: scaleY(0.4); 136 transform: scaleY(0.4);
137 -webkit-transform-origin: 100% 0%; 137 -webkit-transform-origin: 100% 0%;
138 transform-origin: 100% 0%; 138 transform-origin: 100% 0%;
139 } 139 }
140 100% { 140 100% {
141 -webkit-transform: scaleY(1); 141 -webkit-transform: scaleY(1);
142 transform: scaleY(1); 142 transform: scaleY(1);
143 -webkit-transform-origin: 100% 0%; 143 -webkit-transform-origin: 100% 0%;
144 transform-origin: 100% 0%; 144 transform-origin: 100% 0%;
145 } 145 }
146 } 146 }
147
148 .slide-in-bl {
149 -webkit-animation: slide-in-bl 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
150 animation: slide-in-bl 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
151 }
152
153 @-webkit-keyframes slide-in-bl {
154 0% {
155 -webkit-transform: translateY(1000px) translateX(-1000px);
156 transform: translateY(1000px) translateX(-1000px);
157 opacity: 0;
158 }
159 100% {
160 -webkit-transform: translateY(0) translateX(0);
161 transform: translateY(0) translateX(0);
162 opacity: 1;
163 }
164 }
165
166 @keyframes slide-in-bl {
167 0% {
168 -webkit-transform: translateY(1000px) translateX(-1000px);
169 transform: translateY(1000px) translateX(-1000px);
170 opacity: 0;
171 }
172 100% {
173 -webkit-transform: translateY(0) translateX(0);
174 transform: translateY(0) translateX(0);
175 opacity: 1;
176 }
177 }
147 178