Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit fa6e2c0215b85b3ab1d62e441cb6421016e788bf

Authored by Marcelo Puebla
1 parent aff73e1808
Exists in master and in 2 other branches 20200117-axion-responsive, develop

Arreglo en navegacion

Showing 5 changed files with 17 additions and 7 deletions   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ fa6e2c0
1 import { NgModule } from '@angular/core'; 1 import { NgModule } from '@angular/core';
2 import { Routes, RouterModule } from '@angular/router'; 2 import { Routes, RouterModule } from '@angular/router';
3 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; 3 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
4 import { AdminComponent } from './modules/admin/admin.component'; 4 import { AdminComponent } from './modules/admin/admin.component';
5 5
6 const routes: Routes = [ 6 const routes: Routes = [
7 { path: '', component: SplashScreenComponent }, 7 { path: '', component: SplashScreenComponent },
8 { 8 {
9 path: '', 9 path: '',
10 component: AdminComponent, 10 component: AdminComponent,
11 children: [ 11 children: [
12 { 12 {
13 path: 'formas-pago', 13 path: 'formas-pago',
14 loadChildren: () => import('./modules/formas-pago/formas-pago.module').then(m => m.FormasPagoModule) 14 loadChildren: () => import('./modules/formas-pago/formas-pago.module').then(m => m.FormasPagoModule)
15 }, 15 },
16 { 16 {
17 path: 'opcion-pedido', 17 path: 'opcion-pedido',
18 loadChildren: () => import('./modules/opcion-pedido/opcion-pedido.module').then(m => m.OpcionPedidoModule) 18 loadChildren: () => import('./modules/opcion-pedido/opcion-pedido.module').then(m => m.OpcionPedidoModule)
19 }, 19 },
20 { 20 {
21 path: 'seleccion-articulos', 21 path: 'seleccion-articulos',
22 loadChildren: () => import('./modules/seleccion-articulos/seleccion-articulos.module').then(m => m.SeleccionArticulosModule) 22 loadChildren: () => import('./modules/seleccion-articulos/seleccion-articulos.module').then(m => m.SeleccionArticulosModule)
23 }, 23 },
24 {
25 path: 'carrito', loadChildren: () => import('./modules/carrito/carrito.module').then(m => m.CarritoModule)
26 },
24 ] 27 ]
25 }, 28 },
26 {
27 path: 'carrito', loadChildren: () => import('./modules/carrito/carrito.module').then(m => m.CarritoModule)
28 },
29 { path: '**', redirectTo: '', pathMatch: 'full' }, 29 { path: '**', redirectTo: '', pathMatch: 'full' },
30 ]; 30 ];
31 31
32 @NgModule({ 32 @NgModule({
33 imports: [RouterModule.forRoot(routes, { useHash: true })], 33 imports: [RouterModule.forRoot(routes, { useHash: true })],
34 exports: [RouterModule] 34 exports: [RouterModule]
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ fa6e2c0
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <app-header-publicidad></app-header-publicidad> 3 <app-header-publicidad></app-header-publicidad>
4 4
5 <div class="h-85"> 5 <div class="h-85">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 px-0 py-2 align-self-center"> 8 <div class="col-12 px-0 py-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p> 10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 14
15 <!-- ARTICULOS --> 15 <!-- ARTICULOS -->
16 <div class="row mx-2 mt-4 h-80 scroll-y"> 16 <div class="row mx-2 mt-4 h-80 scroll-y">
17 <div 17 <div
18 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate" 18 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate"
19 *ngFor="let item of [{},{},{},{},{},{},{},{},{}]"> 19 *ngFor="let item of [{},{},{},{},{},{},{},{},{}]">
20 <!-- ARTICULO --> 20 <!-- ARTICULO -->
21 <div class="h-100 px-2 py-4 border border-primary rounded-sm"> 21 <div class="h-100 px-2 py-4 border border-primary rounded-sm">
22 <div class="row mx-0 h-100"> 22 <div class="row mx-0 h-100">
23 <!-- NOMBRE E IMAGEN --> 23 <!-- NOMBRE E IMAGEN -->
24 <div class="col-3 h-100 border-right border-primary align-self-center"> 24 <div class="col-3 h-100 border-right border-primary align-self-center">
25 <img class="d-block mx-auto h-55" src="assets/img/icono-efectivo.svg"> 25 <img class="d-block mx-auto h-55" src="assets/img/icono-efectivo.svg">
26 <div class="row mx-0 h-45"> 26 <div class="row mx-0 h-45">
27 <p class="col text-primary align-self-end"><small>{{'CORTADO'}}</small></p> 27 <p class="col text-primary align-self-end"><small>{{'CORTADO'}}</small></p>
28 </div> 28 </div>
29 </div> 29 </div>
30 <!-- CANTIDAD --> 30 <!-- CANTIDAD -->
31 <div class="col-3 border-right border-primary"> 31 <div class="col-3 border-right border-primary">
32 <p><small>CANT</small></p> 32 <p><small>CANT</small></p>
33 <div class="row mt-2 mx-0"> 33 <div class="row mt-2 mx-0">
34 <div class="col-12 h-auto"> 34 <div class="col-12 h-auto">
35 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 35 <div class="row mx-0 justify-content-between bg-primary badge-pill">
36 <div class="col-auto px-0"> 36 <div class="col-auto px-0">
37 <!-- BOTON MENOS --> 37 <!-- BOTON MENOS -->
38 <img class="d-block ml-auto py-2 icon-20 btn-effect" src="assets/img/menos-blanco.svg"> 38 <img class="d-block ml-auto py-2 icon-20 btn-effect" src="assets/img/menos-blanco.svg">
39 </div> 39 </div>
40 <div class="col px-0 align-self-center text-white"> 40 <div class="col px-0 align-self-center text-white">
41 <p><small>{{55}}</small></p> 41 <p><small>{{55}}</small></p>
42 </div> 42 </div>
43 <div class="col-auto px-0"> 43 <div class="col-auto px-0">
44 <!-- BOTON MAS --> 44 <!-- BOTON MAS -->
45 <img class="d-block ml-auto py-2 icon-20 btn-effect" src="assets/img/mas-blanco.svg"> 45 <img class="d-block ml-auto py-2 icon-20 btn-effect" src="assets/img/mas-blanco.svg">
46 </div> 46 </div>
47 </div> 47 </div>
48 </div> 48 </div>
49 </div> 49 </div>
50 </div> 50 </div>
51 <!-- OPCIONALES --> 51 <!-- OPCIONALES -->
52 <div class="col-3 border-right border-primary"> 52 <div class="col-3 border-right border-primary">
53 <p><small>OPCIONALES</small></p> 53 <p><small>OPCIONALES</small></p>
54 <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div> 54 <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div>
55 <div class="row mx-0 mt-2 justify-content-center"> 55 <div class="row mx-0 mt-2 justify-content-center">
56 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white"> 56 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white">
57 <span> 57 <span>
58 <small class="pr-2">CAMBIAR</small> 58 <small class="pr-2">CAMBIAR</small>
59 <img class="icon-20" src="assets/img/ir.svg"> 59 <img class="icon-20" src="assets/img/ir.svg">
60 </span> 60 </span>
61 </div> 61 </div>
62 </div> 62 </div>
63 </div> 63 </div>
64 <!-- ELIMINAR --> 64 <!-- ELIMINAR -->
65 <div class="col-3 align-self-center"> 65 <div class="col-3 align-self-center">
66 <div class="row mx-0 justify-content-center"> 66 <div class="row mx-0 justify-content-center">
67 <div class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"> 67 <div class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white">
68 <span> 68 <span>
69 <small class="pr-2">ELIMINAR</small> 69 <small class="pr-2">ELIMINAR</small>
70 <img class="icon-20 rotate-45" src="assets/img/mas-blanco.svg"> 70 <img class="icon-20 rotate-45" src="assets/img/mas-blanco.svg">
71 </span> 71 </span>
72 </div> 72 </div>
73 </div> 73 </div>
74 </div> 74 </div>
75 </div> 75 </div>
76 </div> 76 </div>
77 </div> 77 </div>
78 </div> 78 </div>
79 <div class="row mx-3 mt-4 h-auto justify-content-end"> 79 <div class="row mx-3 mt-4 h-auto justify-content-end">
80 <div class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"> 80 <div class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white">
81 <span> 81 <span>
82 <small class="pr-2">CONTINUAR</small> 82 <small class="pr-2">CONTINUAR</small>
83 <img class="icon-20" src="assets/img/ir.svg"> 83 <img class="icon-20" src="assets/img/ir.svg">
84 </span> 84 </span>
85 </div> 85 </div>
86 </div> 86 </div>
87 <div class="row mx-3 mt-2 h-auto justify-content-end"> 87 <div class="row mx-3 mt-2 h-auto justify-content-end">
88 <div 88 <div
89 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 89 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
90 [routerLink]="['/seleccion-articulos']"> 90 (click)="goBack()">
91 <span> 91 <span>
92 <small class="pr-2">SEGUIR COMPRANDO</small> 92 <small class="pr-2">SEGUIR COMPRANDO</small>
93 <img class="icon-20" src="assets/img/ir.svg"> 93 <img class="icon-20" src="assets/img/ir.svg">
94 </span> 94 </span>
95 </div> 95 </div>
96 </div> 96 </div>
97 </div> 97 </div>
98 98
99 </div> 99 </div>
100 100
src/app/modules/carrito/carrito.component.ts
Diff comments   View file @ fa6e2c0
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Location } from '@angular/common';
2 3
3 @Component({ 4 @Component({
4 selector: 'app-carrito', 5 selector: 'app-carrito',
5 templateUrl: './carrito.component.html', 6 templateUrl: './carrito.component.html',
6 styleUrls: ['./carrito.component.scss'] 7 styleUrls: ['./carrito.component.scss']
7 }) 8 })
8 export class CarritoComponent implements OnInit { 9 export class CarritoComponent implements OnInit {
9 10
10 constructor() { } 11 constructor(
12 private location: Location,
13 ) { }
11 14
12 ngOnInit() { 15 ngOnInit() {
13 } 16 }
14 17
18 goBack() {
19 this.location.back();
20 }
21
15 } 22 }
16 23
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ fa6e2c0
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <app-header-publicidad></app-header-publicidad> 3 <app-header-publicidad></app-header-publicidad>
4 4
5 <div class="row mx-0 h-90 align-items-end"> 5 <div class="row mx-0 h-90 align-items-end">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 p-2 align-self-center"> 8 <div class="col-12 p-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
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 <!-- CUERPO --> 14 <!-- CUERPO -->
15 <div class="row w-100 mr-4 h-70"> 15 <div class="row w-100 mr-4 h-70">
16 <div class="col-12 h-100 px-0 py-3"> 16 <div class="col-12 h-100 px-0 py-3">
17 <div class="row mx-0 h-100"> 17 <div class="row mx-0 h-100">
18 <!-- FILTRO CATEGORIAS --> 18 <!-- FILTRO CATEGORIAS -->
19 <div class="col-5 col-sm-3 col-xl-2 h-100"> 19 <div class="col-5 col-sm-3 col-xl-2 h-100">
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 <div class="row mx-0 h-94 align-items-center"> 21 <div class="row mx-0 h-94 align-items-center">
22 <div class="col-12 h-5"> 22 <div class="col-12 h-5">
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, -80)" 29 (mousedown)="scrollY(templateCategorias, -80)"
30 (mouseup)="mouseup()" 30 (mouseup)="mouseup()"
31 (mouseleave)="mouseup()"> 31 (mouseleave)="mouseup()">
32 </div> 32 </div>
33 <!-- CATEGORIAS --> 33 <!-- CATEGORIAS -->
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': categoria.selected, 'border-bottom-effect': !categoria.selected }" 39 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
40 (click)="selectCategoria(i)" 40 (click)="selectCategoria(i)"
41 *ngFor="let categoria of categorias; let i = index;"> 41 *ngFor="let categoria of categorias; let i = index;">
42 <img 42 <img
43 class="col-12 h-50 align-self-end d-none d-sm-block" 43 class="col-12 h-50 align-self-end d-none d-sm-block"
44 src="assets/img/ir-color.svg"> 44 src="assets/img/ir-color.svg">
45 <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small> 45 <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small>
46 </div> 46 </div>
47 </div> 47 </div>
48 <div class="col-12 h-5"> 48 <div class="col-12 h-5">
49 <img 49 <img
50 draggable="false" 50 draggable="false"
51 ondragstart="return false;" 51 ondragstart="return false;"
52 (contextmenu)="false" 52 (contextmenu)="false"
53 class="h-100 d-block mx-auto rotate-90" 53 class="h-100 d-block mx-auto rotate-90"
54 src="assets/img/ir-color.svg" 54 src="assets/img/ir-color.svg"
55 (mousedown)="scrollY(templateCategorias, 80)" 55 (mousedown)="scrollY(templateCategorias, 80)"
56 (mouseup)="mouseup()" 56 (mouseup)="mouseup()"
57 (mouseleave)="mouseup()"> 57 (mouseleave)="mouseup()">
58 </div> 58 </div>
59 </div> 59 </div>
60 </div> 60 </div>
61 <!-- LISTA DE ARTICULOS --> 61 <!-- LISTA DE ARTICULOS -->
62 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y"> 62 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y">
63 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100"> 63 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100">
64 <!-- ARTICULO --> 64 <!-- ARTICULO -->
65 <div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]"> 65 <div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
66 <div class="card h-100"> 66 <div class="card h-100">
67 <img src="assets/img/ir-color.svg" class="card-img-top h-55"> 67 <img src="assets/img/ir-color.svg" class="card-img-top h-55">
68 <div class="row mx-0 py-1 h-auto justify-content-center"> 68 <div class="row mx-0 py-1 h-auto justify-content-center">
69 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p> 69 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p>
70 <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p> 70 <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p>
71 <div class="col-12 px-1 align-self-end btn-effect h-auto"> 71 <div class="col-12 px-1 align-self-end btn-effect h-auto">
72 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 72 <div class="row mx-0 justify-content-between bg-primary badge-pill">
73 <div class="col px-0 align-self-center text-white text-right"> 73 <div class="col px-0 align-self-center text-white text-right">
74 {{55 | currency}} 74 {{55 | currency}}
75 </div> 75 </div>
76 <div class="col-5 px-0"> 76 <div class="col-5 px-0">
77 <img class="d-block ml-auto py-1 icon-30" src="assets/img/ir.svg"> 77 <img class="d-block ml-auto py-1 icon-30" src="assets/img/ir.svg">
78 </div> 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 </div>
85 </div> 85 </div>
86 </div> 86 </div>
87 </div> 87 </div>
88 </div> 88 </div>
89 <!-- FOOTER CARRITO DE COMPRAS --> 89 <!-- FOOTER CARRITO DE COMPRAS -->
90 <div class="row w-90 mx-auto h-auto justify-content-center"> 90 <div class="row w-90 mx-auto h-auto justify-content-center">
91 <div class="col-12 h-75 px-0 border border-primary rounded"> 91 <div class="col-12 h-75 px-0 border border-primary rounded">
92 <div class="row mx-0 h-15 border-bottom border-primary"> 92 <div class="row mx-0 h-15 border-bottom border-primary">
93 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 93 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
94 </div> 94 </div>
95 <div class="row h-85 mx-0 justify-content-between"> 95 <div class="row h-85 mx-0 justify-content-between">
96 <div class="col-auto h-20 align-self-center"> 96 <div class="col-auto h-20 align-self-center">
97 <img 97 <img
98 draggable="false" 98 draggable="false"
99 ondragstart="return false;" 99 ondragstart="return false;"
100 (contextmenu)="false" 100 (contextmenu)="false"
101 class="icon-30 rotate-180-neg" 101 class="icon-30 rotate-180-neg"
102 src="assets/img/ir-fondo-color.svg" 102 src="assets/img/ir-fondo-color.svg"
103 (mousedown)="scrollX(templateCarrito, -100)" 103 (mousedown)="scrollX(templateCarrito, -100)"
104 (mouseup)="mouseup()" 104 (mouseup)="mouseup()"
105 (mouseleave)="mouseup()"> 105 (mouseleave)="mouseup()">
106 </div> 106 </div>
107 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 107 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
108 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x"> 108 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x">
109 <div 109 <div
110 class="col-10 col-sm-4 col-lg-2 col-xl-auto px-2 px-xl-4 h-100 align-self-center border-right border-primary" 110 class="col-10 col-sm-4 col-lg-2 col-xl-auto px-2 px-xl-4 h-100 align-self-center border-right border-primary"
111 (click)="selectCategoria(i)" 111 (click)="selectCategoria(i)"
112 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;"> 112 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">
113 <img 113 <img
114 class="d-block h-55 p-2 mx-auto" 114 class="d-block h-55 p-2 mx-auto"
115 src="assets/img/ir-color.svg"> 115 src="assets/img/ir-color.svg">
116 <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p> 116 <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p>
117 </div> 117 </div>
118 </div> 118 </div>
119 </div> 119 </div>
120 <div class="col-auto h-20 align-self-center"> 120 <div class="col-auto h-20 align-self-center">
121 <img 121 <img
122 draggable="false" 122 draggable="false"
123 ondragstart="return false;" 123 ondragstart="return false;"
124 (contextmenu)="false" 124 (contextmenu)="false"
125 class="icon-30" 125 class="icon-30"
126 src="assets/img/ir-fondo-color.svg" 126 src="assets/img/ir-fondo-color.svg"
127 (mousedown)="scrollX(templateCarrito, 100)" 127 (mousedown)="scrollX(templateCarrito, 100)"
128 (mouseup)="mouseup()" 128 (mouseup)="mouseup()"
129 (mouseleave)="mouseup()"> 129 (mouseleave)="mouseup()">
130 </div> 130 </div>
131 </div> 131 </div>
132 </div> 132 </div>
133 <div class="col-auto p-0 mt-2 ml-auto h-20"> 133 <div class="col-auto p-0 mt-2 ml-auto h-20">
134 <div 134 <div
135 class="btn-effect col-auto align-self-center px-0 bg-white" 135 class="btn-effect col-auto align-self-center px-0 bg-white"
136 [routerLink]="['/carrito']" skipLocationChange> 136 [routerLink]="['/carrito']">
137 <div class="row mx-0 bg-light"> 137 <div class="row mx-0 bg-light">
138 <div class="col-auto align-self-center text-primary">VER CARRITO</div> 138 <div class="col-auto align-self-center text-primary">VER CARRITO</div>
139 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 139 <div class="col-auto p-0 bg-primary d-none d-sm-block">
140 <img class="p-2 icon-40" src="assets/img/carrito.svg"> 140 <img class="p-2 icon-40" src="assets/img/carrito.svg">
141 </div> 141 </div>
142 </div> 142 </div>
143 </div> 143 </div>
144 </div> 144 </div>
145 </div> 145 </div>
146 </div> 146 </div>
147 147
148 </div> 148 </div>
149 149
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ fa6e2c0
1 import { Component, OnInit } from "@angular/core"; 1 import { Component, OnInit } from "@angular/core";
2 2
3 @Component({ 3 @Component({
4 selector: "app-seleccion-articulos", 4 selector: "app-seleccion-articulos",
5 templateUrl: "./seleccion-articulos.component.html", 5 templateUrl: "./seleccion-articulos.component.html",
6 styleUrls: ["./seleccion-articulos.component.scss"] 6 styleUrls: ["./seleccion-articulos.component.scss"]
7 }) 7 })
8 export class SeleccionArticulosComponent implements OnInit { 8 export class SeleccionArticulosComponent implements OnInit {
9 timeoutHandler: any; 9 timeoutHandler: any;
10 categorias = [ 10 categorias = [
11 { id: 1, selected: false }, 11 { id: 1, selected: false },
12 { id: 2, selected: false }, 12 { id: 2, selected: false },
13 { id: 3, selected: false } 13 { id: 3, selected: false },
14 { id: 4, selected: false },
15 { id: 5, selected: false },
16 { id: 6, selected: false }
14 ]; 17 ];
15 18
16 constructor() {} 19 constructor() {}
17 20
18 ngOnInit() {} 21 ngOnInit() {}
19 22
20 selectCategoria(index: number) { 23 selectCategoria(index: number) {
21 this.categorias.forEach((categoria, i) => { 24 this.categorias.forEach((categoria, i) => {
22 categoria.selected = index === i ? true : false; 25 categoria.selected = index === i ? true : false;
23 }); 26 });
24 } 27 }
25 28
26 mouseup() { 29 mouseup() {
27 if (!this.timeoutHandler) return; 30 if (!this.timeoutHandler) return;
28 clearInterval(this.timeoutHandler); 31 clearInterval(this.timeoutHandler);
29 } 32 }
30 33
31 scrollY(el: HTMLElement, value) { 34 scrollY(el: HTMLElement, value) {
32 el.scroll({ behavior: "smooth", top: value + el.scrollTop }); 35 el.scroll({ behavior: "smooth", top: value + el.scrollTop });
33 this.timeoutHandler = setInterval(() => { 36 this.timeoutHandler = setInterval(() => {
34 el.scroll({ behavior: "smooth", top: value + el.scrollTop }); 37 el.scroll({ behavior: "smooth", top: value + el.scrollTop });
35 }, 500); 38 }, 500);
36 } 39 }
37 40
38 scrollX(el: HTMLElement, value) { 41 scrollX(el: HTMLElement, value) {
39 el.scroll({ behavior: "smooth", left: value + el.scrollLeft }); 42 el.scroll({ behavior: "smooth", left: value + el.scrollLeft });
40 this.timeoutHandler = setInterval(() => { 43 this.timeoutHandler = setInterval(() => {
41 el.scroll({ behavior: "smooth", left: value + el.scrollLeft }); 44 el.scroll({ behavior: "smooth", left: value + el.scrollLeft });
42 }, 500); 45 }, 500);
43 } 46 }
44 } 47 }
45 48