Marcelo Puebla / autoservicio-axion

Download as
Browse Code ยป

Commit 24186ad22a2065d28dcb9b671953d1a32d039779

Authored by Marcelo Puebla
2 parents 5b34ba606e c880672f84
Exists in develop

Merge branch 'develop' into 'develop' 

Develop

See merge request !65
Showing 2 changed files   Show diff stats
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.ts
Diff comments   View file @ 24186ad
1 import { Component, OnInit, Input, HostListener, Output, EventEmitter } from '@angular/core'; 1 import { Component, OnInit, HostListener, Output, EventEmitter } from '@angular/core';
2 import { ICategoria } from 'src/app/interfaces/ICategoria'; 2 import { ICategoria } from 'src/app/interfaces/ICategoria';
3 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; 3 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
4 import { CategoriaService } from 'src/app/services/categoria/categoria.service'; 4 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
5 import { APP_SETTINGS } from 'src/etc/AppSettings'; 5 import { APP_SETTINGS } from 'src/etc/AppSettings';
6 6
7 @Component({ 7 @Component({
8 selector: 'app-filtro-categorias', 8 selector: 'app-filtro-categorias',
9 templateUrl: './filtro-categorias.component.html', 9 templateUrl: './filtro-categorias.component.html',
10 styleUrls: ['./filtro-categorias.component.scss'] 10 styleUrls: ['./filtro-categorias.component.scss']
11 }) 11 })
12 export class FiltroCategoriasComponent implements OnInit { 12 export class FiltroCategoriasComponent implements OnInit {
13 @Output() getProductos = new EventEmitter<any>(); 13 @Output() getProductos = new EventEmitter<any>();
14 @Output() setProductos = new EventEmitter<any>(); 14 @Output() setProductos = new EventEmitter<any>();
15 @Output() filterItems = new EventEmitter<any>(); 15 @Output() filterItems = new EventEmitter<any>();
16 categorias: ICategoria[] = []; 16 categorias: ICategoria[] = [];
17 timeoutHandler: any; 17 timeoutHandler: any;
18 categoriaActive = null; 18 categoriaActive = null;
19 allActive = true; 19 allActive = true;
20 queMostrar = 'todos'; 20 queMostrar = 'todos';
21 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 21 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
22 22
23 constructor( 23 constructor(
24 private categoriaService: CategoriaService, 24 private categoriaService: CategoriaService,
25 private inactiveScreen: InactiveScreenService, 25 private inactiveScreen: InactiveScreenService,
26 ) { } 26 ) { }
27 27
28 ngOnInit() { } 28 ngOnInit() { }
29 29
30 getCategorias() { 30 getCategorias() {
31 this.categoriaService.getAll() 31 this.categoriaService.getAll()
32 .subscribe((categorias: ICategoria[]) => { 32 .subscribe((categorias: ICategoria[]) => {
33 switch (this.queMostrar) { 33 switch (this.queMostrar) {
34 case 'todos': 34 case 'todos':
35 this.categorias = categorias; 35 this.categorias = categorias;
36 this.categoriaActive = 0; 36 this.categoriaActive = 0;
37 break; 37 break;
38 case 'promociones': 38 case 'promociones':
39 this.categorias = categorias; 39 this.categorias = categorias;
40 this.categoriaActive = 19; 40 this.categoriaActive = 19;
41 break; 41 break;
42 case 'ordenar': 42 case 'ordenar':
43 this.categorias = categorias.filter((categoria: ICategoria) => { 43 this.categorias = categorias.filter((categoria: ICategoria) => {
44 return categoria.ES_PEDIDO; 44 return categoria.ES_PEDIDO;
45 }); 45 });
46 this.categoriaActive = 4; 46 this.categoriaActive = 4;
47 break; 47 break;
48 default: 48 default:
49 this.categorias = categorias; 49 this.categorias = categorias;
50 this.categoriaActive = 0; 50 this.categoriaActive = 0;
51 break; 51 break;
52 } 52 }
53 !localStorage.getItem('articulos') ? 53 !localStorage.getItem('articulos') ?
54 this.getProductos.emit() : 54 this.getProductos.emit() :
55 this.setProductos.emit(); 55 this.setProductos.emit();
56 }); 56 });
57 } 57 }
58 58
59 selectCategoria(index: number, idCategoria?: number) { 59 selectCategoria(index: number, idCategoria?: number) {
60 if (this.categoriaActive === idCategoria) return; 60 if (this.categoriaActive === idCategoria) return;
61 this.categoriaActive = idCategoria; 61 this.categoriaActive = idCategoria;
62 this.allActive = idCategoria === 0 ? true : false; 62 this.allActive = idCategoria === 0 ? true : false;
63 this.categorias.forEach((categoria, i) => { 63 this.categorias.forEach((categoria, i) => {
64 categoria.selected = index === i ? true : false; 64 categoria.selected = index === i ? true : false;
65 }); 65 });
66 this.filterItems.emit(); 66 this.filterItems.emit();
67 } 67 }
68 68
69 @HostListener('scroll', ['$event']) 69 @HostListener('scroll', ['$event'])
70 scrollEvent(event: Event) { 70 scrollEvent(event: Event) {
71 clearTimeout(this.inactiveScreen.timerReposo); 71 clearTimeout(this.inactiveScreen.timerReposo);
72 this.inactiveScreen.startTimeOutInactividad(); 72 this.inactiveScreen.startTimeOutInactividad();
73 } 73 }
74 74
75 mouseup() { 75 mouseup() {
76 if (!this.timeoutHandler) return; 76 if (!this.timeoutHandler) return;
77 clearInterval(this.timeoutHandler); 77 clearInterval(this.timeoutHandler);
78 } 78 }
79 79
80 scrollY(el: HTMLElement, value) { 80 scrollY(el: HTMLElement, value) {
81 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 81 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
82 this.timeoutHandler = setInterval(() => { 82 this.timeoutHandler = setInterval(() => {
83 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 83 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
84 }, 500); 84 }, 500);
85 } 85 }
86 } 86 }
87 87
src/scss/styles-bootstrap.scss
Diff comments   View file @ 24186ad
1 @import "node_modules/bootstrap/scss/functions"; 1 @import "node_modules/bootstrap/scss/functions";
2 @import "node_modules/bootstrap/scss/variables"; 2 @import "node_modules/bootstrap/scss/variables";
3 @import "node_modules/bootstrap/scss/mixins"; 3 @import "node_modules/bootstrap/scss/mixins";
4 4
5 $primary: #aa006b; 5 $primary: #aa006b;
6 $secondary: #00acd8; 6 $secondary: #00acd8;
7 $info: #f4b223; 7 $info: #f4b223;
8 $light: #e6e7e9; 8 $light: #e6e7e9;
9 $dark: #61666c; 9 $dark: #61666c;
10 $theme-colors: ( 10 $theme-colors: (
11 primary: $primary, 11 primary: $primary,
12 secondary: $secondary, 12 secondary: $secondary,
13 info: $info, 13 info: $info,
14 light: $light, 14 light: $light,
15 dark: $dark 15 dark: $dark
16 ); 16 );
17 $border-radius: 1.5rem; 17 $border-radius: 1.5rem;
18 $border-radius-lg: 2.5rem; 18 $border-radius-lg: 2.5rem;
19 $border-radius-sm: 0.5rem; 19 $border-radius-sm: 0.5rem;
20 20
21 .custom-modal { 21 .custom-modal {
22 max-width: 90% !important; 22 max-width: 90% !important;
23 & > .modal-content { 23 & > .modal-content {
24 background-color: $primary !important; 24 background-color: $primary !important;
25 color: white; 25 color: white;
26 border: none !important; 26 border: none !important;
27 border-radius: $border-radius !important; 27 border-radius: $border-radius !important;
28 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; 28 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
29 } 29 }
30 } 30 }
31 31
32 .carousel-control { 32 .carousel-control {
33 visibility: hidden !important; 33 visibility: hidden !important;
34 } 34 }
35 35
36 .carousel, 36 .carousel,
37 .carousel-inner, 37 .carousel-inner,
38 .carousel-item, 38 .carousel-item,
39 .item { 39 .item {
40 height: 100% !important; 40 height: 100% !important;
41 } 41 }
42 42
43 .custom-checkbox .custom-control-label::before {
44 border-radius: 50% !important;
45 }
46
43 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { 47 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
44 background-color: $primary !important; 48 background-color: $primary !important;
45 } 49 }
46 50
47 .custom-control-input:checked ~ .custom-control-label::before { 51 .custom-checkbox .custom-control-input:checked:focus ~ .custom-control-label::before {
48 border-color: $primary !important; 52 box-shadow: none !important;
49 background-color: $primary !important; 53 }
54 .custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
55 box-shadow: none !important;
50 } 56 }
51 57
52 .custom-control-input:checked ~ .custom-control-label::before { 58 .custom-control-input:checked ~ .custom-control-label::before {
53 color: #fff; 59 background-color: white !important;
54 border-color: $primary !important; 60 border-color: white !important;
61 border-width: 2px;
62 }
63
64 .custom-checkbox .custom-control-input:active ~ .custom-control-label::before {
55 background-color: $primary !important; 65 background-color: $primary !important;
56 } 66 }
57 67
58 .modal-promo > div { 68 .modal-promo > div {
59 border: none !important; 69 border: none !important;
60 border-radius: $border-radius; 70 border-radius: $border-radius;
61 margin-left: 10px !important; 71 margin-left: 10px !important;
62 } 72 }
63 73
64 .modal-content.media-pantalla { 74 .modal-content.media-pantalla {
65 margin-top: auto !important; 75 margin-top: auto !important;
66 margin-bottom: 50px !important; 76 margin-bottom: 50px !important;
67 } 77 }
68 78
69 .card { 79 .card {
70 border: none !important; 80 border: none !important;
71 } 81 }
72 82
73 @import "node_modules/bootstrap/scss/bootstrap"; 83 @import "node_modules/bootstrap/scss/bootstrap";
74 84