Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit 97ea4fbc50fefef6bfaf89c2ec28165552fad51e

Authored by Eric Fernandez
2 parents 930ae70b35 10485e5068
Exists in master and in 1 other branch validar_pve

Merge branch 'master' into 'master' 

Master(mpuebla)

See merge request !29
Showing 17 changed files   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ 97ea4fb
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 { HomeComponent } from './components/home/home.component'; 3 import { HomeComponent } from './components/home/home.component';
4 import { InicioComponent } from './components/inicio/inicio.component'; 4 import { InicioComponent } from './components/inicio/inicio.component';
5 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; 5 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
6 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component'; 6 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
7 import { MasterComponent } from './components/master/master.component'; 7 import { MasterComponent } from './components/master/master.component';
8 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component'; 8 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
9 import { PagoComponent } from './components/pago/pago.component'; 9 import { PagoComponent } from './components/pago/pago.component';
10 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component';
10 11
11 const routes: Routes = [ 12 const routes: Routes = [
12 { path: '', component: HomeComponent }, 13 { path: '', component: HomeComponent },
13 { path: 'home', component: HomeComponent }, 14 { path: 'home', component: HomeComponent },
14 { path: 'abm-imagenes', component: AmbImagenesComponent }, 15 { path: 'abm-imagenes', component: AmbImagenesComponent },
15 { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent }, 16 { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
17 { path: 'cancelar-compra', component: CancelarCompraComponent },
16 { 18 {
17 path: '', 19 path: '',
18 component: MasterComponent, 20 component: MasterComponent,
19 children: [ 21 children: [
20 { path: 'inicio', component: InicioComponent }, 22 { path: 'inicio', component: InicioComponent },
21 { path: 'busqueda-productos', component: BusquedaProductosComponent }, 23 { path: 'busqueda-productos', component: BusquedaProductosComponent },
22 { path: 'pago', component: PagoComponent } 24 { path: 'pago', component: PagoComponent }
23 ] 25 ]
24 }, 26 },
25 { path: '**', redirectTo: '/home', pathMatch: 'full' }, 27 { path: '**', redirectTo: '/home', pathMatch: 'full' },
26 ]; 28 ];
27 29
28 @NgModule({ 30 @NgModule({
29 imports: [RouterModule.forRoot(routes)], 31 imports: [RouterModule.forRoot(routes)],
30 exports: [RouterModule] 32 exports: [RouterModule]
31 }) 33 })
32 34
33 export class AppRoutingModule { } 35 export class AppRoutingModule { }
34 36
src/app/app.module.ts
Diff comments   View file @ 97ea4fb
1 //#region MODULES 1 //#region MODULES
2 import { BrowserModule } from '@angular/platform-browser'; 2 import { BrowserModule } from '@angular/platform-browser';
3 import { NgModule } from '@angular/core'; 3 import { NgModule } from '@angular/core';
4 import { AppRoutingModule } from './app-routing.module'; 4 import { AppRoutingModule } from './app-routing.module';
5 import { HttpClientModule } from '@angular/common/http'; 5 import { HttpClientModule } from '@angular/common/http';
6 import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 6 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
7 import { TooltipModule } from 'ngx-bootstrap/tooltip'; 7 import { TooltipModule } from 'ngx-bootstrap/tooltip';
8 import { PopoverModule } from 'ngx-bootstrap/popover'; 8 import { PopoverModule } from 'ngx-bootstrap/popover';
9 //#endregion 9 //#endregion
10 10
11 //#region COMPONENTS 11 //#region COMPONENTS
12 import { AppComponent } from './app.component'; 12 import { AppComponent } from './app.component';
13 import { HeaderComponent } from './components/header/header.component'; 13 import { HeaderComponent } from './components/header/header.component';
14 import { SidebarComponent } from './components/sidebar/sidebar.component'; 14 import { SidebarComponent } from './components/sidebar/sidebar.component';
15 import { HomeComponent } from './components/home/home.component'; 15 import { HomeComponent } from './components/home/home.component';
16 import { InicioComponent } from './components/inicio/inicio.component'; 16 import { InicioComponent } from './components/inicio/inicio.component';
17 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; 17 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
18 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component'; 18 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
19 import { MasterComponent } from './components/master/master.component'; 19 import { MasterComponent } from './components/master/master.component';
20 import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component'; 20 import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component';
21 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component'; 21 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component';
22 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component'; 22 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
23 import { PagoComponent } from './components/pago/pago.component'; 23 import { PagoComponent } from './components/pago/pago.component';
24 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component';
24 //#endregion 25 //#endregion
25 26
26 @NgModule({ 27 @NgModule({
27 declarations: [ 28 declarations: [
28 AppComponent, 29 AppComponent,
29 HeaderComponent, 30 HeaderComponent,
30 SidebarComponent, 31 SidebarComponent,
31 HomeComponent, 32 HomeComponent,
32 InicioComponent, 33 InicioComponent,
33 BusquedaProductosComponent, 34 BusquedaProductosComponent,
34 ConfirmacionCarritoComponent, 35 ConfirmacionCarritoComponent,
35 MasterComponent, 36 MasterComponent,
36 PopoverPromosComponent, 37 PopoverPromosComponent,
37 PopoverSinonimosComponent, 38 PopoverSinonimosComponent,
38 AmbImagenesComponent, 39 AmbImagenesComponent,
39 PagoComponent 40 PagoComponent,
41 CancelarCompraComponent
40 ], 42 ],
41 imports: [ 43 imports: [
42 BrowserModule, 44 BrowserModule,
43 AppRoutingModule, 45 AppRoutingModule,
44 HttpClientModule, 46 HttpClientModule,
45 FormsModule, 47 FormsModule,
46 ReactiveFormsModule, 48 ReactiveFormsModule,
47 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }), 49 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
48 TooltipModule.forRoot(), 50 TooltipModule.forRoot(),
49 PopoverModule.forRoot() 51 PopoverModule.forRoot()
50 ], 52 ],
51 providers: [], 53 providers: [],
52 bootstrap: [AppComponent] 54 bootstrap: [AppComponent]
53 }) 55 })
54 export class AppModule { } 56 export class AppModule { }
55 57
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ 97ea4fb
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 class="col-sm-2 p-1"> 17 <div 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-sm-10"> 33 <div *ngIf="productos.length > 0" class="fade-in col-sm-10">
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-60 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/testImg.jpg" 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 *ngIf="productos.length === 0 && showSpinner" class="col-sm-10 align-self-center"> 95 <div
96 <div class="spinner-border spinner-lg text-secondary" role="status"></div> 96 *ngIf="productos.length === 0 && showSpinner"
97 <span class="text-secondary m-2 h5">Cargando información.</span> 97 class="col-sm-10 p-0 align-self-center text-center">
98 <div class="spinner-border spinner-lg text-secondary" role="status"></div>
99 <span class="text-secondary m-2 h5">Cargando información.</span>
98 </div> 100 </div>
99 101
100 </div> 102 </div>
101 103
102 </div> 104 </div>
103 105
104 </div> 106 </div>
105 107
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ 97ea4fb
1 import { Component, OnInit, APP_BOOTSTRAP_LISTENER } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { ProductoService } from 'src/app/services/producto.service'; 2 import { ProductoService } from 'src/app/services/producto.service';
3 import { Producto } from 'src/app/wrappers/producto'; 3 import { Producto } from 'src/app/wrappers/producto';
4 import { Categoria } from 'src/app/wrappers/categoria'; 4 import { Categoria } from 'src/app/wrappers/categoria';
5 import { appSettings } from 'src/etc/AppSettings'; 5 import { appSettings } from 'src/etc/AppSettings';
6 import { Router } from '@angular/router'; 6 import { Router } from '@angular/router';
7 7
8 @Component({ 8 @Component({
9 selector: 'app-busqueda-productos', 9 selector: 'app-busqueda-productos',
10 templateUrl: './busqueda-productos.component.html', 10 templateUrl: './busqueda-productos.component.html',
11 styleUrls: ['./busqueda-productos.component.scss'] 11 styleUrls: ['./busqueda-productos.component.scss']
12 }) 12 })
13 export class BusquedaProductosComponent implements OnInit { 13 export class BusquedaProductosComponent implements OnInit {
14 14
15 private productos: Producto[] = []; 15 private productos: Producto[] = [];
16 private auxProductos: Producto[] = []; 16 private auxProductos: Producto[] = [];
17 private searchTerm: string = ''; 17 private searchTerm: string = '';
18 private categoriaActive: number = null; 18 private categoriaActive: number = null;
19 private showSpinner: boolean = true; 19 private showSpinner: boolean = true;
20 private apiUrl: string = appSettings.apiUrl; 20 private apiUrl: string = appSettings.apiUrl;
21 private showBtnCargarProducto: boolean = false; 21 private showBtnCargarProducto: boolean = false;
22 private categorias: Categoria[] = []; 22 private categorias: Categoria[] = [];
23 23
24 constructor( 24 constructor(
25 private productoService: ProductoService, 25 private productoService: ProductoService,
26 private router: Router) { } 26 private router: Router) { }
27 27
28 ngOnInit() { 28 ngOnInit() {
29 29
30 this.productoService.getCategorias() 30 this.productoService.getCategorias()
31 .subscribe((categorias: Categoria[]) => { 31 .subscribe((categorias: Categoria[]) => {
32 this.categorias = categorias; 32 this.categorias = categorias;
33 this.categoriaActive = categorias[0].id; 33 this.categoriaActive = categorias[0].id;
34 }); 34 });
35 35
36 this.productoService.productoAcargar = undefined; 36 this.productoService.productoAcargar = undefined;
37 this.productoService.getAll() 37 this.productoService.getAll()
38 .subscribe((data: Producto[]) => { 38 .subscribe((data: Producto[]) => {
39 39
40 this.auxProductos = this.productos = data; 40 this.auxProductos = this.productos = data;
41 }, (error) => { 41 }, (error) => {
42 this.showSpinner = false; 42 this.showSpinner = false;
43 console.error(error); 43 console.error(error);
44 }); 44 });
45 } 45 }
46 46
47 filterItems() { 47 filterItems() {
48 48
49 this.auxProductos = this.productos.filter(x => { 49 this.auxProductos = this.productos.filter(x => {
50 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) && 50 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) &&
51 x.categoria_selfservice == this.categoriaActive; 51 x.categoria_selfservice == this.categoriaActive;
52 }); 52 });
53 } 53 }
54 54
55 agregarAlCarrito(producto: Producto) { 55 agregarAlCarrito(producto: Producto) {
56 56
57 producto.cantidad = 1; 57 producto.cantidad = 1;
58 this.productoService.productos.push(producto); 58 this.productoService.productos.push(producto);
59 } 59 }
60 60
61 private mostrarBotonCargar(producto: Producto) { 61 private mostrarBotonCargar(producto: Producto) {
62 62
63 for (let i = 0; i < this.auxProductos.length; i++) { 63 for (let i = 0; i < this.auxProductos.length; i++) {
64 if (this.auxProductos[i].id !== producto.id) 64 if (this.auxProductos[i].id !== producto.id)
65 this.auxProductos[i].showCargarProducto = false; 65 this.auxProductos[i].showCargarProducto = false;
66 else if (producto.showCargarProducto) return; 66 else if (producto.showCargarProducto) return;
67 } 67 }
68 producto.showCargarProducto = !producto.showCargarProducto 68 producto.showCargarProducto = !producto.showCargarProducto
69 } 69 }
70 70
71 private elegirProducto(producto: Producto) { 71 private elegirProducto(producto: Producto) {
72 72
73 this.productoService.productoAcargar = producto; 73 this.productoService.productoAcargar = producto;
74 this.router.navigate(['inicio']); 74 this.router.navigate(['inicio']);
75 } 75 }
76 } 76 }
77
78 77
src/app/components/cancelar-compra/cancelar-compra.component.html
Diff comments   View file @ 97ea4fb
File was created 1 <div class="container-fluid p-0">
2 <img src="{{apiUrl}}/imagenes/homeBackground.jpg" class="background-image">
3 <div class="row m-0">
4 <div class="col p-0">
5 <div class="vh-100 fade-in d-flex align-content-strech flex-wrap disable-user-select">
6
7 <!-- HEADER -->
8 <div class="row m-0 w-100 bg-primary-gradient-horizontal">
9 <div class="col-6 bg-white rounded-bottom-right">
10 <div class="row h-100">
11 <div class="col d-flex align-items-center">
12 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoaxion.png">
13 </div>
14 </div>
15 </div>
16 </div>
17
18 <!-- INFO -->
19 <div class="row m-0 w-100">
20 <div class="col-4 offset-2">
21 <div class="row h-100">
22 <div class="col-12 py-4">
23 <div class="card h-100 rounded">
24 <img src="{{apiUrl}}/imagenes/atencion.svg" class="w-50 mx-auto mt-auto mb-4">
25 <div class="mb-auto mt-4">
26 <p class="display-3 card-text text-center font-weight-bold">
27 Atención
28 </p>
29 </div>
30 </div>
31 </div>
32 </div>
33 </div>
34 <div class="col-6 text-center text-white my-auto">
35 <p class="display-3 font-weight-bold mb-5">
36 Usted esta a punto<br>de cancelar su compra
37 </p>
38 <p class="display-4 m-0">
39 Perderá los datos y<br>productos ya ingresados
40 </p>
41 <div class="d-flex justify-content-center mt-2">
42 <button
43 type="button"
44 class="btn btn-lg btn-light shadow mr-4"
45 (click)="volverPreviousPage()">
46 <span class="pr-2">Volver a mi compra</span>
47 <i class="fa fa-undo text-warning"></i>
48 </button>
49 <button
50 type="button"
51 class="btn btn-lg btn-light shadow ml-4"
52 (click)="limpiarCarritoYvolver()">
53 <span class="pr-2">Si, terminar</span>
54 <i class="fa fa-times text-danger"></i>
55 </button>
56 </div>
57 </div>
58 </div>
59
60 <!-- FOOTER -->
61 <div class="row m-0 w-100 bg-gray">
62 <div class="col-6 bg-white offset-6 rounded-top-left">
63 <div class="row h-100">
64 <div class="col d-flex align-items-center">
65 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png">
66 </div>
67 </div>
68 </div>
69 </div>
70
71 </div>
72 </div>
73 </div>
74 </div>
75
src/app/components/cancelar-compra/cancelar-compra.component.scss
Diff comments   View file @ 97ea4fb
src/app/components/cancelar-compra/cancelar-compra.component.spec.ts
Diff comments   View file @ 97ea4fb
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { CancelarCompraComponent } from './cancelar-compra.component';
4
5 describe('CancelarCompraComponent', () => {
6 let component: CancelarCompraComponent;
7 let fixture: ComponentFixture<CancelarCompraComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ CancelarCompraComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(CancelarCompraComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/components/cancelar-compra/cancelar-compra.component.ts
Diff comments   View file @ 97ea4fb
File was created 1 import { Component, OnInit } from '@angular/core';
2 import { appSettings } from 'src/etc/AppSettings';
3 import { Location } from '@angular/common';
4 import { Router } from '@angular/router';
5
6 @Component({
7 selector: 'app-cancelar-compra',
8 templateUrl: './cancelar-compra.component.html',
9 styleUrls: ['./cancelar-compra.component.scss']
10 })
11 export class CancelarCompraComponent implements OnInit {
12
13 private apiUrl: string = appSettings.apiUrl;
14
15 constructor(
16 private location: Location,
17 private router: Router
18 ) { }
19
20 ngOnInit() {
21 }
22
23 volverPreviousPage() {
24
25 this.location.back();
26 }
27
28 limpiarCarritoYvolver(){
29
30 this.router.navigate(['/home']);
31 }
32
33 }
34
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ 97ea4fb
1 <div class="row m-0 fade-in bg-primary-gradient disable-user-select"> 1 <div class="row m-0 fade-in bg-primary-gradient disable-user-select">
2 <div class="col-12 p-0 vh-100"> 2 <div class="col-12 p-0 vh-100">
3 3
4 <!-- TOP HEADER --> 4 <!-- TOP HEADER -->
5 <app-header></app-header> 5 <app-header></app-header>
6 6
7 <!-- NOMBRE DE SECCION --> 7 <!-- NOMBRE DE SECCION -->
8 <div class="row m-0"> 8 <div class="row m-0">
9 <div class="col-12 p-0"> 9 <div class="col-12 p-0">
10 <p class="h5 py-1 bg-gray text-muted text-center m-0"> 10 <p class="h5 py-1 bg-gray text-muted text-center m-0">
11 Pagar 11 Pagar
12 <i class="fa fa-usd"></i> 12 <i class="fa fa-usd"></i>
13 </p> 13 </p>
14 </div> 14 </div>
15 </div> 15 </div>
16 16
17 <div class="row m-0"> 17 <div class="row m-0">
18 <div class="col-12"> 18 <div class="col-12">
19 19
20 <!-- TEXTO DE IZQUIERDA --> 20 <!-- TEXTO DE IZQUIERDA -->
21 <div class="row mx-2 mt-4 text-white"> 21 <div class="row mx-2 mt-4 text-white">
22 <div class="col-sm-2 my-auto"> 22 <div class="col-sm-2 my-auto">
23 <p class="h2">Mi Compra 23 <p class="h2">Mi Compra
24 <i class="fa fa-shopping-cart "></i> 24 <i class="fa fa-shopping-cart "></i>
25 </p> 25 </p>
26 </div> 26 </div>
27 <div class="col-sm-4 my-auto"> 27 <div class="col-sm-4 my-auto">
28 <p class="h3">¿Desea finalizar su compra?</p> 28 <p class="h3">¿Desea finalizar su compra?</p>
29 <p class="h4">Por favor, controle y confirme su compra.</p> 29 <p class="h4">Por favor, controle y confirme su compra.</p>
30 </div> 30 </div>
31 </div> 31 </div>
32 32
33 <div class="row"> 33 <div class="row">
34 <!-- GRILLA DE PRODUCTOS DE MI COMPRA --> 34 <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
35 <div class="col-sm-7"> 35 <div class="col-sm-7">
36 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark"> 36 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark">
37 <div class="col-4 p-2" *ngFor="let producto of productos"> 37 <div class="col-4 p-2" *ngFor="let producto of productos">
38 <div class="bg-white rounded-sm shadow border-0"> 38 <div class="bg-white rounded-sm shadow border-0">
39 <img src="{{apiUrl}}/imagenes/testImg.jpg" class="rounded-sm w-100 m-auto"> 39 <img src="{{apiUrl}}/imagenes/testImg.jpg" class="rounded-sm w-100 m-auto">
40 <div class="p-2"> 40 <div class="p-2">
41 <p class="h6 text-left m-0">ZARAZA</p> 41 <p class="h6 text-left m-0">ZARAZA</p>
42 <div class="row justify-content-between m-0"> 42 <div class="row justify-content-between m-0">
43 <div class="col-12 p-0"> 43 <div class="col-12 p-0">
44 <div class="text-left"> 44 <div class="text-left">
45 <p class="m-0 h6"><small>ZARAZA DETALLE</small></p> 45 <p class="m-0 h6"><small>ZARAZA DETALLE</small></p>
46 <p class="m-0 h6"><small>COD. 5656</small></p> 46 <p class="m-0 h6"><small>COD. 5656</small></p>
47 </div> 47 </div>
48 </div> 48 </div>
49 <div class="col-12 my-auto pt-2 pr-2 p-0"> 49 <div class="col-12 my-auto pt-2 pr-2 p-0">
50 <p class="text-right m-0 h6">{{20 | currency}}</p> 50 <p class="text-right m-0 h6">{{20 | currency}}</p>
51 </div> 51 </div>
52 </div> 52 </div>
53 </div> 53 </div>
54 </div> 54 </div>
55 </div> 55 </div>
56 </div> 56 </div>
57 </div> 57 </div>
58 58
59 <div class="col-sm-5"> 59 <div class="col-sm-5">
60 <div class="row ml-3"> 60 <div class="row ml-3">
61 <!-- TICKET --> 61 <!-- TICKET -->
62 <div class="col-sm-7"> 62 <div class="col-sm-7">
63 <div class="card rounded-sm shadow"> 63 <div class="card rounded-sm shadow">
64 <div class="card-body"> 64 <div class="card-body">
65 <p class="h5 card-title">Su Ticket</p> 65 <p class="h5 card-title">Su Ticket</p>
66 <p class="h6 card-text text-left mt-4 pr-2 vh-60 overflow-scroll"> 66 <p class="h6 card-text text-left mt-4 pr-2 vh-60 overflow-scroll">
67 Ticket detalle. 67 Ticket detalle.
68 </p> 68 </p>
69 <p class="h4 card-text text-right mt-3 mb-0"> 69 <p class="h4 card-text text-right mt-3 mb-0">
70 Total {{230 | currency}} 70 Total {{230 | currency}}
71 </p> 71 </p>
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 78
79 <!-- OPCIONES ABAJO DERECHA --> 79 <!-- OPCIONES ABAJO DERECHA -->
80 <div class="row m-0 fixed-bottom"> 80 <div class="row m-0 fixed-bottom">
81 <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> 81 <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
82 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> 82 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
83 <div class="card-body row m-0"> 83 <div class="card-body row m-0">
84 <div class="col-12 p-3"> 84 <div class="col-12 p-3">
85 <button 85 <button
86 type="button" 86 type="button"
87 class="btn btn-block btn-light shadow btn-sm shadow" 87 class="btn btn-block btn-light shadow btn-sm shadow"
88 [routerLink]="['/inicio']"> 88 (click)="volverPreviousPage()">
89 <span class="pr-2">Volver</span> 89 <span class="pr-2">Volver</span>
90 <i class="fa fa-undo text-warning"></i> 90 <i class="fa fa-undo text-warning"></i>
91 </button> 91 </button>
92 <button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1"> 92 <button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1">
93 <span class="font-weight-bold pr-2">Finalizar y Pagar</span> 93 <span class="font-weight-bold pr-2">Finalizar y Pagar</span>
94 <i class="fa fa-check text-success"></i> 94 <i class="fa fa-check text-success"></i>
95 </button> 95 </button>
96 <button 96 <button
97 type="button" 97 type="button"
98 class="btn btn-block btn-light shadow btn-sm shadow" 98 class="btn btn-block btn-light shadow btn-sm shadow"
99 [routerLink]="['home']"> 99 [routerLink]="['/cancelar-compra']">
100 <span class="pr-2">Cancelar</span> 100 <span class="pr-2">Cancelar</span>
101 <i class="fa fa-times text-danger"></i> 101 <i class="fa fa-times text-danger"></i>
102 </button> 102 </button>
103 </div> 103 </div>
104 </div> 104 </div>
105 </div> 105 </div>
106 </div> 106 </div>
107 </div> 107 </div>
108 108
109 </div> 109 </div>
110 </div> 110 </div>
111 111
112 </div> 112 </div>
113 113
114 </div> 114 </div>
115 115
src/app/components/confirmacion-carrito/confirmacion-carrito.component.ts
Diff comments   View file @ 97ea4fb
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { appSettings } from 'src/etc/AppSettings'; 2 import { appSettings } from 'src/etc/AppSettings';
3 import { Location } from '@angular/common';
3 4
4 @Component({ 5 @Component({
5 selector: 'app-confirmacion-carrito', 6 selector: 'app-confirmacion-carrito',
6 templateUrl: './confirmacion-carrito.component.html', 7 templateUrl: './confirmacion-carrito.component.html',
7 styleUrls: ['./confirmacion-carrito.component.scss'] 8 styleUrls: ['./confirmacion-carrito.component.scss']
8 }) 9 })
9 export class ConfirmacionCarritoComponent implements OnInit { 10 export class ConfirmacionCarritoComponent implements OnInit {
10 11
11 productos = [{}, {}, {}]; 12 productos = [{}, {}, {}];
12 private apiUrl: string = appSettings.apiUrl; 13 private apiUrl: string = appSettings.apiUrl;
13 14
14 constructor() { } 15 constructor(private location: Location) { }
15 16
16 ngOnInit() { 17 ngOnInit() {
17 } 18 }
18 19
20 volverPreviousPage() {
21 this.location.back();
22 }
23
19 } 24 }
20 25
src/app/components/home/home.component.html
Diff comments   View file @ 97ea4fb
1 <div class="container-fluid background-image"> 1 <div class="container-fluid p-0">
2 <div class="row"> 2 <img src="{{apiUrl}}/imagenes/homeBackground.jpg" class="background-image">
3 <div class="row m-0">
3 <div class="col p-0"> 4 <div class="col p-0">
4 <div class="vh-100 d-flex align-content-between flex-wrap disable-user-select"> 5 <div
6 class="vh-100 fade-in d-flex align-content-between flex-wrap disable-user-select"
7 [routerLink]="['/inicio']">
5 8
6 <!-- HEADER --> 9 <!-- HEADER -->
7 <div class="row m-0 w-100 bg-primary-gradient-horizontal"> 10 <div class="row m-0 w-100 bg-primary-gradient-horizontal">
8 <div class="col-6 bg-white p-5 rounded-bottom-right"> 11 <div class="col-6 bg-white p-5 rounded-bottom-right">
9 <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">
10 </div> 13 </div>
11 </div> 14 </div>
12 15
13 <!-- INFO DE BIENVENIDA --> 16 <!-- INFO DE BIENVENIDA -->
14 <div class="row w-100"> 17 <div class="row w-100">
15 <div class="col-4 offset-2"> 18 <div class="col-4 offset-2">
16 <img src="{{apiUrl}}/imagenes/accesoPLAYA.png" class="w-100"> 19 <img src="{{apiUrl}}/imagenes/accesoPLAYA.png" class="w-100">
17 </div> 20 </div>
18 <div class="col-6 text-center text-white my-auto"> 21 <div class="col-6 text-center text-white my-auto">
19 <p class="display-2 font-weight-bold mb-5">¡BIENVENIDO!</p> 22 <p class="display-2 font-weight-bold mb-5">¡BIENVENIDO!</p>
20 <p class="display-3 m-0">Toque la pantalla<br>para comenzar</p> 23 <p class="display-3 m-0">Toque la pantalla<br>para comenzar</p>
21 </div> 24 </div>
22 </div> 25 </div>
23 26
24 <!-- FOOTER --> 27 <!-- FOOTER -->
25 <div class="row m-0 w-100 bg-gray"> 28 <div class="row m-0 w-100 bg-gray">
26 <div class="col-6 bg-white offset-6 p-5 rounded-top-left"> 29 <div class="col-6 bg-white offset-6 p-5 rounded-top-left">
27 <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">
28 </div> 31 </div>
29 </div> 32 </div>
30 33
31 </div> 34 </div>
32 </div> 35 </div>
33 </div> 36 </div>
34 </div> 37 </div>
35 38
src/app/components/home/home.component.scss
Diff comments   View file @ 97ea4fb
1 .background-image {
2 background-image: url(http://10.231.45.117:4705/autoservicio/imagenes/homeBackground.jpg);
3 background-repeat: no-repeat;
4 background-size: cover;
5 }
6
7 .w-20 {
8 width: 20% !important;
9 }
10
11 .rounded-bottom-right {
12 border-bottom-right-radius: 10rem;
13 &:before {
14 border-radius: 0 40px 40px 0;
15 background-color: #fff;
16 }
17 }
18
19 .rounded-top-left {
20 border-top-left-radius: 10rem;
21 }
22
23 .bg-gray {
24 background-color: #cccccc;
25 }
26
src/app/components/home/home.component.ts
Diff comments   View file @ 97ea4fb
1 import { Component, OnInit, HostListener } from '@angular/core'; 1 import { Component, OnInit, HostListener } from '@angular/core';
2 import { Router } from '@angular/router'; 2 import { Router } from '@angular/router';
3 import { appSettings } from 'src/etc/AppSettings'; 3 import { appSettings } from 'src/etc/AppSettings';
4 4
5 @Component({ 5 @Component({
6 selector: 'app-home', 6 selector: 'app-home',
7 templateUrl: './home.component.html', 7 templateUrl: './home.component.html',
8 styleUrls: ['./home.component.scss'] 8 styleUrls: ['./home.component.scss']
9 }) 9 })
10 export class HomeComponent implements OnInit { 10 export class HomeComponent implements OnInit {
11 11
12 private apiUrl: string = appSettings.apiUrl; 12 private apiUrl: string = appSettings.apiUrl;
13 13
14 constructor(private router: Router) { } 14 constructor() { }
15 15
16 ngOnInit() { 16 ngOnInit() {
17 } 17 }
18 18
19 @HostListener('document:click', ['$event'])
20 documentClick(event: MouseEvent) {
21 this.router.navigate(['/inicio']);
22 }
23
24 } 19 }
25 20
src/app/components/inicio/inicio.component.html
Diff comments   View file @ 97ea4fb
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 class="card bg-white border-0 shadow rounded w-100 mb-auto"> 15 <div class="card bg-white border-0 shadow rounded w-100 mb-auto">
16 <div class="card-body text-left px-4 py-3"> 16 <div class="card-body text-left px-4 py-3">
17 <div class="row"> 17 <div class="row">
18 <div class="col-7"> 18 <div class="col-7">
19 <p class="h3 card-title">Promociones</p> 19 <p class="h3 card-title">Promociones</p>
20 </div> 20 </div>
21 <div class="col-5 p-0"> 21 <div class="col-5 p-0">
22 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0"> 22 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0">
23 </div> 23 </div>
24 </div> 24 </div>
25 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> 25 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
26 </div> 26 </div>
27 <div id="carouselIndicators" class="carousel slide" data-ride="carousel"> 27 <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
28 <div class="carousel-inner"> 28 <div class="carousel-inner">
29 <div class="carousel-item active"> 29 <div class="carousel-item active">
30 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded"> 30 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded">
31 </div> 31 </div>
32 <div class="carousel-item"> 32 <div class="carousel-item">
33 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded"> 33 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded">
34 </div> 34 </div>
35 <div class="carousel-item"> 35 <div class="carousel-item">
36 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded"> 36 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded">
37 </div> 37 </div>
38 </div> 38 </div>
39 </div> 39 </div>
40 </div> 40 </div>
41 41
42 <!-- ORDENAR --> 42 <!-- ORDENAR -->
43 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 43 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
44 <div class="card-body text-left px-4 py-3"> 44 <div class="card-body text-left px-4 py-3">
45 <div class="row"> 45 <div class="row">
46 <div class="col-5"> 46 <div class="col-5">
47 <p class="h3 card-title">Ordenar Pedido</p> 47 <p class="h3 card-title">Ordenar Pedido</p>
48 </div> 48 </div>
49 <div class="col-7 p-0"> 49 <div class="col-7 p-0">
50 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim"> 50 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim">
51 </div> 51 </div>
52 </div> 52 </div>
53 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> 53 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
54 </div> 54 </div>
55 <img 55 <img
56 class="card-img-bottom d-block w-100 mx-auto rounded" 56 class="card-img-bottom d-block w-100 mx-auto rounded"
57 src="{{apiUrl}}/imagenes/cafe.jpg"> 57 src="{{apiUrl}}/imagenes/cafe.jpg">
58 </div> 58 </div>
59 </div> 59 </div>
60 60
61 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0"> 61 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0">
62 62
63 <!-- CARGAR PRODUCTOS --> 63 <!-- CARGAR PRODUCTOS -->
64 <ng-template #popTemplate> 64 <ng-template #popTemplate>
65 <app-popover-promos 65 <app-popover-promos
66 *ngIf="promociones.length > 0 && sinonimos.length === 0" 66 *ngIf="promociones.length > 0 && sinonimos.length === 0"
67 [popover]="popoverDirective" 67 [popover]="popoverDirective"
68 [popoverContent]="promociones" 68 [popoverContent]="promociones"
69 (promoSeleccionada)="promoSeleccionada($event)" 69 (promoSeleccionada)="promoSeleccionada($event)"
70 class="text-white rounded-sm border-0"> 70 class="text-white rounded-sm border-0">
71 </app-popover-promos> 71 </app-popover-promos>
72 <app-popover-sinonimos 72 <app-popover-sinonimos
73 *ngIf="sinonimos.length > 0" 73 *ngIf="sinonimos.length > 0"
74 [popover]="popoverDirective" 74 [popover]="popoverDirective"
75 [popoverContent]="sinonimos" 75 [popoverContent]="sinonimos"
76 (sinonimoSeleccionado)="sinonimoSeleccionado($event)" 76 (sinonimoSeleccionado)="sinonimoSeleccionado($event)"
77 class="text-white rounded-sm border-0"> 77 class="text-white rounded-sm border-0">
78 </app-popover-sinonimos> 78 </app-popover-sinonimos>
79 </ng-template> 79 </ng-template>
80 <div 80 <div
81 placement="left" 81 placement="left"
82 triggers="" 82 triggers=""
83 [popover]="popTemplate" 83 [popover]="popTemplate"
84 class="w-100" 84 class="w-100"
85 #pop="bs-popover"> 85 #pop="bs-popover">
86 <div class="card bg-white border-0 shadow rounded mb-auto"> 86 <div class="card bg-white border-0 shadow rounded mb-auto">
87 <div class="card-body text-left px-4 py-3"> 87 <div class="card-body text-left px-4 py-3">
88 <div class="row"> 88 <div class="row">
89 <div class="col-6"> 89 <div class="col-6">
90 <p class="h3 card-title">Cargar Productos</p> 90 <p class="h3 card-title">Cargar Productos</p>
91 </div> 91 </div>
92 <div class="col-6 p-0"> 92 <div class="col-6 p-0">
93 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2"> 93 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2">
94 </div> 94 </div>
95 </div> 95 </div>
96 <p class="h5 card-text text-muted font-weight-light"> 96 <p class="h5 card-text text-muted font-weight-light">
97 Coloque el código de<br> 97 Coloque el código de<br>
98 barras o QR frente al scanner. 98 barras o QR frente al scanner.
99 </p> 99 </p>
100 </div> 100 </div>
101 <div class="row m-4"> 101 <div class="row m-4">
102 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm"> 102 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
103 <!-- IMAGEN DE ESCANER --> 103 <!-- IMAGEN DE ESCANER -->
104 <img 104 <img
105 *ngIf="!productoAcargar" 105 *ngIf="!productoAcargar"
106 class="card-img-top d-block w-100 mx-auto rounded-sm" 106 class="card-img-top d-block w-100 mx-auto rounded-sm"
107 src="{{apiUrl}}/imagenes/escanner.jpg"> 107 src="{{apiUrl}}/imagenes/escanner.jpg">
108 108
109 <!-- PRODUCTO A CARGAR --> 109 <!-- PRODUCTO A CARGAR -->
110 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar"> 110 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar">
111 <img 111 <img
112 class="card-img-top d-block w-100 mx-auto rounded-sm" 112 class="card-img-top d-block w-75 mx-auto rounded-sm"
113 src="{{apiUrl}}/imagenes/testImg3.jpg"> 113 src="{{apiUrl}}/imagenes/testImg.jpg">
114 114
115 <div class="row justify-content-between m-3"> 115 <div class="row justify-content-between m-3">
116 <div class="col-12 text-left px-1"> 116 <div class="col-12 text-left px-1">
117 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p> 117 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p>
118 </div> 118 </div>
119 <div class="col-12 text-right mt-2"> 119 <div class="col-12 text-right mt-2">
120 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p> 120 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
121 </div> 121 </div>
122 </div> 122 </div>
123 </div> 123 </div>
124 124
125 <!-- PROMO A CARGAR --> 125 <!-- PROMO A CARGAR -->
126 <div class="fade-in m-0" *ngIf="promoAcargar"> 126 <div class="fade-in m-0" *ngIf="promoAcargar">
127 <img 127 <img
128 class="card-img-top d-block w-100 mx-auto rounded-sm" 128 class="card-img-top d-block w-100 mx-auto rounded-sm"
129 src="{{apiUrl}}/imagenes/testImg3.jpg"> 129 src="{{apiUrl}}/imagenes/testImg.jpg">
130 130
131 <div class="row justify-content-between m-3"> 131 <div class="row justify-content-between m-3">
132 <div class="col-12 text-left px-1"> 132 <div class="col-12 text-left px-1">
133 <p class="h6 font-weight-bold mb-0">{{promoAcargar.nombrePromo}}</p> 133 <p class="h6 font-weight-bold mb-0">{{promoAcargar.nombrePromo}}</p>
134 </div> 134 </div>
135 <div class="col-12 text-right mt-2 align-self-end"> 135 <div class="col-12 text-right mt-2 align-self-end">
136 <p class="h5 font-weight-bold mb-0">{{promoAcargar.precioTotal | currency}}</p> 136 <p class="h5 font-weight-bold mb-0">{{promoAcargar.precioTotal | currency}}</p>
137 </div> 137 </div>
138 </div> 138 </div>
139 </div> 139 </div>
140 140
141 </div> 141 </div>
142 <!-- BOTONES DE CARGAR PRODUCTOS--> 142 <!-- BOTONES DE CARGAR PRODUCTOS-->
143 <div 143 <div
144 class="col-5 pr-0" 144 class="col-5 pr-0"
145 *ngIf="promociones.length > 0"> 145 *ngIf="promociones.length > 0">
146 <button 146 <button
147 *ngIf="sinonimos.length > 0" 147 *ngIf="sinonimos.length > 0"
148 type="button" 148 type="button"
149 class="btn btn-light btn-block shadow-sm" 149 class="btn btn-light btn-block shadow-sm"
150 (click)="pop.show()"> 150 (click)="pop.show()">
151 <span class="pr-2">Personalizar</span> 151 <span class="pr-2">Personalizar</span>
152 <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i> 152 <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i>
153 </button> 153 </button>
154 <button 154 <button
155 *ngIf="!promoAcargar" 155 *ngIf="!promoAcargar"
156 type="button" 156 type="button"
157 class="btn btn-primary btn-block shadow-sm" 157 class="btn btn-primary btn-block shadow-sm"
158 (click)="pop.show()"> 158 (click)="pop.show()">
159 <span class="pr-2">Mostrar promociones</span> 159 <span class="pr-2">Mostrar promociones</span>
160 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i> 160 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i>
161 </button> 161 </button>
162 <button type="button" class="btn btn-light btn-block shadow-sm my-3"> 162 <button type="button" class="btn btn-light btn-block shadow-sm my-3">
163 <span class="pr-2 font-weight-bold">Confirmar</span> 163 <span class="pr-2 font-weight-bold">Confirmar</span>
164 <i class="fa fa-check text-success" aria-hidden="true"></i> 164 <i class="fa fa-check text-success" aria-hidden="true"></i>
165 </button> 165 </button>
166 <button 166 <button
167 type="button" 167 type="button"
168 class="btn btn-light btn-block shadow-sm" 168 class="btn btn-light btn-block shadow-sm"
169 (click)="deshacerCarga()"> 169 (click)="deshacerCarga()">
170 <span class="pr-2">Deshacer</span> 170 <span class="pr-2">Deshacer</span>
171 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 171 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
172 </button> 172 </button>
173 </div> 173 </div>
174 </div> 174 </div>
175 </div> 175 </div>
176 </div> 176 </div>
177 177
178 <!-- BUSCAR PRODUCTOS --> 178 <!-- BUSCAR PRODUCTOS -->
179 <div (click)="goPage('busqueda-productos')" 179 <div (click)="goPage('busqueda-productos')"
180 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 180 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
181 <div class="card-body text-left px-4 py-3"> 181 <div class="card-body text-left px-4 py-3">
182 <div class="row"> 182 <div class="row">
183 <div class="col-6"> 183 <div class="col-6">
184 <p class="h3 card-title">Buscar Productos</p> 184 <p class="h3 card-title">Buscar Productos</p>
185 <p class="h5 card-text text-muted font-weight-light"> 185 <p class="h5 card-text text-muted font-weight-light">
186 Busque aquí los productos<br> 186 Busque aquí los productos<br>
187 que no tienen código </p> 187 que no tienen código </p>
188 </div> 188 </div>
189 <div class="col-6 p-0"> 189 <div class="col-6 p-0">
190 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2"> 190 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2">
191 </div> 191 </div>
192 </div> 192 </div>
193 193
194 </div> 194 </div>
195 </div> 195 </div>
196 196
197 </div> 197 </div>
198 198
199 </div> 199 </div>
200 200
201 </div> 201 </div>
202 </div> 202 </div>
203 203
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ 97ea4fb
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 class="fade-left my-2 bg-white border-0 rounded-sm" *ngFor="let producto of productosCarrito; let i = index"> 10 <div
11 <img class="m-auto pt-2" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}"> 11 class="fade-left my-2 bg-white border-0 rounded-sm"
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}}">
12 <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">
13 <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">
14 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> 16 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
15 <p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p> 17 <p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p>
16 </div> 18 </div>
17 <div class="col-12 pr-1 text-right h6 my-auto "> 19 <div class="col-12 pr-1 text-right h6 my-auto ">
18 <p class="m-0">{{producto.PreVen | currency}}</p> 20 <p class="m-0">{{producto.PreVen | currency}}</p>
19 </div> 21 </div>
20 </div> 22 </div>
21 <div class="row m-0 p-0"> 23 <div class="row m-0 p-0">
22 <div class="col-6 px-2 my-2"> 24 <div class="col-6 px-2 my-2">
23 <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">
24 <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)">
25 <i class="fa fa-plus" aria-hidden="true"></i> 27 <i class="fa fa-plus" aria-hidden="true"></i>
26 </button> 28 </button>
27 <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">
28 <small>{{producto.cantidad}}</small> 30 <small>{{producto.cantidad}}</small>
29 </div> 31 </div>
30 <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)">
31 <i class="fa fa-minus" aria-hidden="true"></i> 33 <i class="fa fa-minus" aria-hidden="true"></i>
32 </button> 34 </button>
33 </div> 35 </div>
34 </div> 36 </div>
35 <div class="col-6 px-2 my-2"> 37 <div class="col-6 px-2 my-2">
36 <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">
37 <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">
38 <i class="fa fa-hand-o-up" aria-hidden="true"></i> 40 <i class="fa fa-hand-o-up" aria-hidden="true"></i>
39 </button> 41 </button>
40 <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)">
41 <i class="fa fa-times" aria-hidden="true"></i> 43 <i class="fa fa-times" aria-hidden="true"></i>
42 </button> 44 </button>
43 </div> 45 </div>
44 </div> 46 </div>
45 </div> 47 </div>
46 </div> 48 </div>
47 </div> 49 </div>
48 50
49 <!-- TOTAL --> 51 <!-- TOTAL -->
50 <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">
51 <div class="card-body row"> 53 <div class="card-body row">
52 <div class="col-12"> 54 <div class="col-12">
53 <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>
54 <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>
55 <p class="h3 text-secondary">Total</p> 57 <p class="h3 text-secondary">Total</p>
56 <p class="h3 font-weight-bold">{{getTotal() | currency}}</p> 58 <p class="h3 font-weight-bold">{{getTotal() | currency}}</p>
57 </div> 59 </div>
58 <div class="col-12"> 60 <div class="col-12">
59 <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">
60 <span class="font-weight-bold pr-1">Finalizar y Pagar</span> 62 <span class="font-weight-bold pr-1">Finalizar y Pagar</span>
61 <i class="fa fa-check text-success" aria-hidden="true"></i> 63 <i class="fa fa-check text-success" aria-hidden="true"></i>
62 </button> 64 </button>
63 <button type="button" class="btn btn-block btn-light shadow btn-sm shadow" (click)="cleanCarrito()"> 65 <button
66 type="button"
67 class="btn btn-block btn-light shadow btn-sm shadow"
68 [routerLink]="['/cancelar-compra']">
64 <span class="pr-1">Cancelar</span> 69 <span class="pr-1">Cancelar</span>
65 <i class="fa fa-times text-danger" aria-hidden="true"></i> 70 <i class="fa fa-times text-danger" aria-hidden="true"></i>
66 </button> 71 </button>
67 </div> 72 </div>
68 </div> 73 </div>
69 </div> 74 </div>
70 </div> 75 </div>
71 76
src/assets/scss/animation.scss
Diff comments   View file @ 97ea4fb
1 .fade-in { 1 .fade-in {
2 margin-top: 25px; 2 -webkit-animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
3 font-size: 21px; 3 animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
4 text-align: center;
5 animation: fadein 1s;
6 -moz-animation: fadein 1s; /* Firefox */
7 -webkit-animation: fadein 1s; /* Safari and Chrome */
8 -o-animation: fadein 1s; /* Opera */
9 } 4 }
10 5
11 @keyframes fadein { 6 @-webkit-keyframes fadein {
12 from { 7 0% {
13 opacity: 0; 8 -webkit-transform: translateZ(80px);
14 } 9 transform: translateZ(80px);
15 to {
16 opacity: 1;
17 }
18 }
19
20 @-moz-keyframes fadein {
21 /* Firefox */
22 from {
23 opacity: 0; 10 opacity: 0;
24 } 11 }
25 to { 12 100% {
13 -webkit-transform: translateZ(0);
14 transform: translateZ(0);
26 opacity: 1; 15 opacity: 1;
27 } 16 }
28 } 17 }
29 18
30 @-webkit-keyframes fadein { 19 @keyframes fadein {
31 /* Safari and Chrome */ 20 0% {
32 from { 21 -webkit-transform: translateZ(80px);
22 transform: translateZ(80px);
33 opacity: 0; 23 opacity: 0;
34 } 24 }
35 to { 25 100% {
26 -webkit-transform: translateZ(0);
27 transform: translateZ(0);
36 opacity: 1; 28 opacity: 1;
37 } 29 }
38 } 30 }
39 31
40 .fade-right { 32 .fade-right {
41 margin-top: 25px;
42 font-size: 21px;
43 text-align: center;
44 animation: faderight 1s; 33 animation: faderight 1s;
45 -moz-animation: faderight 1s; /* Firefox */ 34 -moz-animation: faderight 1s; /* Firefox */
46 -webkit-animation: faderight 1s; /* Safari and Chrome */ 35 -webkit-animation: faderight 1s; /* Safari and Chrome */
47 -o-animation: faderight 1s; /* Opera */ 36 -o-animation: faderight 1s; /* Opera */
48 } 37 }
49 38
50 @keyframes faderight { 39 @keyframes faderight {
51 from { 40 from {
52 opacity: 0; 41 opacity: 0;
53 transform: translateX(-20px); 42 transform: translateX(-20px);
54 } 43 }
55 to { 44 to {
56 opacity: 1; 45 opacity: 1;
57 transform: translateX(0); 46 transform: translateX(0);
58 } 47 }
59 } 48 }
60 49
61 @-moz-keyframes faderight { 50 @-moz-keyframes faderight {
62 /* Firefox */ 51 /* Firefox */
63 from { 52 from {
64 opacity: 0; 53 opacity: 0;
65 -moz-transform: translateX(-20px); 54 -moz-transform: translateX(-20px);
66 } 55 }
67 to { 56 to {
68 opacity: 1; 57 opacity: 1;
69 -moz-transform: translateX(0); 58 -moz-transform: translateX(0);
70 } 59 }
71 } 60 }
72 61
73 @-webkit-keyframes faderight { 62 @-webkit-keyframes faderight {
74 /* Safari and Chrome */ 63 /* Safari and Chrome */
75 from { 64 from {
76 opacity: 0; 65 opacity: 0;
77 -webkit-transform: translateX(-20px); 66 -webkit-transform: translateX(-20px);
78 } 67 }
79 to { 68 to {
80 opacity: 1; 69 opacity: 1;
81 -webkit-transform: translateX(0); 70 -webkit-transform: translateX(0);
82 } 71 }
83 } 72 }
84 73
85 .fade-left { 74 .fade-left {
86 -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;
87 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;
88 } 77 }
89 78
90 @-webkit-keyframes fadeleft { 79 @-webkit-keyframes fadeleft {
91 0% { 80 0% {
92 -webkit-transform: scaleX(0); 81 -webkit-transform: scaleX(0);
93 transform: scaleX(0); 82 transform: scaleX(0);
94 -webkit-transform-origin: 100% 100%; 83 -webkit-transform-origin: 100% 100%;
95 transform-origin: 100% 100%; 84 transform-origin: 100% 100%;
96 opacity: 1; 85 opacity: 1;
97 } 86 }
98 100% { 87 100% {
99 -webkit-transform: scaleX(1); 88 -webkit-transform: scaleX(1);
100 transform: scaleX(1); 89 transform: scaleX(1);
101 -webkit-transform-origin: 100% 100%; 90 -webkit-transform-origin: 100% 100%;
102 transform-origin: 100% 100%; 91 transform-origin: 100% 100%;
103 opacity: 1; 92 opacity: 1;
104 } 93 }
105 } 94 }
106 95
107 @keyframes fadeleft { 96 @keyframes fadeleft {
108 0% { 97 0% {
109 -webkit-transform: scaleX(0); 98 -webkit-transform: scaleX(0);
110 transform: scaleX(0); 99 transform: scaleX(0);
111 -webkit-transform-origin: 100% 100%; 100 -webkit-transform-origin: 100% 100%;
112 transform-origin: 100% 100%; 101 transform-origin: 100% 100%;
113 opacity: 1; 102 opacity: 1;
114 } 103 }
115 100% { 104 100% {
116 -webkit-transform: scaleX(1); 105 -webkit-transform: scaleX(1);
117 transform: scaleX(1); 106 transform: scaleX(1);
118 -webkit-transform-origin: 100% 100%; 107 -webkit-transform-origin: 100% 100%;
119 transform-origin: 100% 100%; 108 transform-origin: 100% 100%;
120 opacity: 1; 109 opacity: 1;
121 } 110 }
122 } 111 }
123 112
124 .fade-bottom { 113 .fade-bottom {
125 -webkit-animation: fade-top 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;
126 animation: fade-top 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;
127 } 116 }
128 117
129 @-webkit-keyframes fade-top { 118 @-webkit-keyframes fade-bottom {
130 0% { 119 0% {
131 -webkit-transform: scaleY(0.4); 120 -webkit-transform: scaleY(0.4);
132 transform: scaleY(0.4); 121 transform: scaleY(0.4);
133 -webkit-transform-origin: 100% 0%; 122 -webkit-transform-origin: 100% 0%;
134 transform-origin: 100% 0%; 123 transform-origin: 100% 0%;
135 } 124 }
136 100% { 125 100% {
137 -webkit-transform: scaleY(1); 126 -webkit-transform: scaleY(1);
138 transform: scaleY(1); 127 transform: scaleY(1);
139 -webkit-transform-origin: 100% 0%; 128 -webkit-transform-origin: 100% 0%;
140 transform-origin: 100% 0%; 129 transform-origin: 100% 0%;
141 } 130 }
142 } 131 }
143 132
144 @keyframes fade-top { 133 @keyframes fade-bottom {
145 0% { 134 0% {
146 -webkit-transform: scaleY(0.4); 135 -webkit-transform: scaleY(0.4);
147 transform: scaleY(0.4); 136 transform: scaleY(0.4);
148 -webkit-transform-origin: 100% 0%; 137 -webkit-transform-origin: 100% 0%;
149 transform-origin: 100% 0%; 138 transform-origin: 100% 0%;
150 } 139 }
151 100% { 140 100% {
152 -webkit-transform: scaleY(1); 141 -webkit-transform: scaleY(1);
153 transform: scaleY(1); 142 transform: scaleY(1);
1 @import "./assets/scss/animation.scss"; 1 @import "./assets/scss/animation.scss";
2 @import "./assets/scss/bootstrap-override.scss"; 2 @import "./assets/scss/bootstrap-override.scss";
3 @import "../node_modules/bootstrap/scss/_variables.scss"; 3 @import "../node_modules/bootstrap/scss/_variables.scss";
4 4
5 html, 5 html,
6 body { 6 body {
7 background-color: #f0f0f0; 7 background-color: #f0f0f0;
8 font-family: bahnschrift; 8 font-family: bahnschrift;
9 } 9 }
10 10
11 .blur { 11 .blur {
12 filter: blur(10px); 12 filter: blur(10px);
13 -webkit-filter: blur(10px); 13 -webkit-filter: blur(10px);
14 } 14 }
15 15
16 .disable-user-select { 16 .disable-user-select {
17 -webkit-user-select: none; 17 -webkit-user-select: none;
18 -moz-user-select: none; 18 -moz-user-select: none;
19 -ms-user-select: none; 19 -ms-user-select: none;
20 user-select: none; 20 user-select: none;
21 } 21 }
22 22
23 .blue-gradient { 23 .blue-gradient {
24 background: linear-gradient(0deg, #ffffff00, $white); 24 background: linear-gradient(0deg, #ffffff00, $white);
25 } 25 }
26 26
27 .rounded { 27 .rounded {
28 border-radius: 1.5rem !important; 28 border-radius: 1.5rem !important;
29 } 29 }
30 30
31 .rounded-top-sm { 31 .rounded-top-sm {
32 border-top-left-radius: 0.75rem !important; 32 border-top-left-radius: 0.75rem !important;
33 border-top-right-radius: 0.75rem !important; 33 border-top-right-radius: 0.75rem !important;
34 } 34 }
35 35
36 .rounded-sm { 36 .rounded-sm {
37 border-radius: 0.75rem !important; 37 border-radius: 0.75rem !important;
38 } 38 }
39 39
40 .card-effect { 40 .card-effect {
41 &:active { 41 &:active {
42 background-color: #c9c9c9b3 !important; 42 background-color: #c9c9c9b3 !important;
43 transition: background-color 0.5s; 43 transition: background-color 0.5s;
44 } 44 }
45 &:focus { 45 &:focus {
46 background-color: #c9c9c9b3 !important; 46 background-color: #c9c9c9b3 !important;
47 transition: background-color 0.5s; 47 transition: background-color 0.5s;
48 } 48 }
49 } 49 }
50 50
51 .overflow-scroll { 51 .overflow-scroll {
52 overflow-y: auto !important; 52 overflow-y: auto !important;
53 overflow-x: hidden !important; 53 overflow-x: hidden !important;
54 &::-webkit-scrollbar { 54 &::-webkit-scrollbar {
55 width: 0.5em; 55 width: 1em;
56 } 56 }
57 &::-webkit-scrollbar-track { 57 &::-webkit-scrollbar-track {
58 border-radius: 10px; 58 border-radius: 10px;
59 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 59 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
60 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 60 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
61 background-color: $white; 61 background-color: $white;
62 } 62 }
63 &::-webkit-scrollbar-thumb { 63 &::-webkit-scrollbar-thumb {
64 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 64 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
65 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 65 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
66 outline: 1px solid slategrey; 66 outline: 1px solid slategrey;
67 border-radius: 10px; 67 border-radius: 10px;
68 height: 12px; 68 height: 12px;
69 &:active { 69 &:active {
70 box-shadow: inset 0 0 8px $primary; 70 box-shadow: inset 0 0 8px $primary;
71 -webkit-box-shadow: inset 0 0 8px $primary; 71 -webkit-box-shadow: inset 0 0 8px $primary;
72 } 72 }
73 } 73 }
74 &::-webkit-scrollbar-corner { 74 &::-webkit-scrollbar-corner {
75 border-radius: 10px; 75 border-radius: 10px;
76 } 76 }
77 } 77 }
78 78
79 .bg-gray { 79 .bg-gray {
80 background-color: #e6e6e6; 80 background-color: #e6e6e6;
81 } 81 }
82 82
83 .bg-primary-gradient { 83 .bg-primary-gradient {
84 background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%); 84 background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
85 } 85 }
86 86
87 .bg-primary-gradient-horizontal { 87 .bg-primary-gradient-horizontal {
88 background: linear-gradient(90deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%); 88 background: linear-gradient(90deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
89 } 89 }
90 90
91 .icon-dim { 91 .icon-dim {
92 height: 40px !important; 92 height: 40px !important;
93 width: auto !important; 93 width: auto !important;
94 background-color: white !important; 94 background-color: white !important;
95 } 95 }
96 96
97 .text-purple { 97 .text-purple {
98 color: $purple; 98 color: $purple;
99 } 99 }
100 100
101 .vh-70 { 101 .vh-70 {
102 min-height: auto !important; 102 min-height: auto !important;
103 max-height: 70vh !important; 103 max-height: 70vh !important;
104 } 104 }
105 105
106 .vh-60 { 106 .vh-60 {
107 min-height: auto !important; 107 min-height: auto !important;
108 max-height: 60vh !important; 108 max-height: 60vh !important;
109 } 109 }
110 110
111 .spinner-lg { 111 .spinner-lg {
112 width: 3rem !important; 112 width: 3rem !important;
113 height: 3rem !important; 113 height: 3rem !important;
114 } 114 }
115 115
116 .sidebar { 116 .sidebar {
117 right: 0; 117 right: 0;
118 } 118 }
119
120 .background-image {
121 background-repeat: no-repeat;
122 background-size: cover;
123 position: fixed;
124 }
125
126 .rounded-bottom-right {
127 border-bottom-right-radius: 10rem;
128 &:before {
129 border-radius: 0 40px 40px 0;
130 background-color: #fff;
131 }
132 }
133
134 .rounded-top-left {
135 border-top-left-radius: 10rem;
136 }
137
138 .bg-gray {
139 background-color: #cccccc;
140 }
119 141