Commit 6f586d8547390804972aba64ab8990347da3c06d

Authored by Eric Fernandez
Exists in master

Merge branch 'master' into 'master'

Master(mpuebla)

See merge request !15
1 # See http://help.github.com/ignore-files/ for more about ignoring files. 1 # See http://help.github.com/ignore-files/ for more about ignoring files.
2 2
3 # compiled output 3 # compiled output
4 /dist 4 /dist
5 /tmp 5 /tmp
6 /out-tsc 6 /out-tsc
7 # Only exists if Bazel was run 7 # Only exists if Bazel was run
8 /bazel-out 8 /bazel-out
9 9
10 # dependencies 10 # dependencies
11 /node_modules 11 /node_modules
12 12
13 # profiling files 13 # profiling files
14 chrome-profiler-events.json 14 chrome-profiler-events.json
15 speed-measure-plugin.json 15 speed-measure-plugin.json
16 16
17 # IDEs and editors 17 # IDEs and editors
18 /.idea 18 /.idea
19 .project 19 .project
20 .classpath 20 .classpath
21 .c9/ 21 .c9/
22 *.launch 22 *.launch
23 .settings/ 23 .settings/
24 *.sublime-workspace 24 *.sublime-workspace
25 25
26 # IDE - VSCode 26 # IDE - VSCode
27 .vscode/* 27 .vscode/*
28 !.vscode/settings.json 28 !.vscode/settings.json
29 !.vscode/tasks.json 29 !.vscode/tasks.json
30 !.vscode/launch.json 30 !.vscode/launch.json
31 !.vscode/extensions.json 31 !.vscode/extensions.json
32 .history/* 32 .history/*
33 33
34 # misc 34 # misc
35 /.sass-cache 35 /.sass-cache
36 /connect.lock 36 /connect.lock
37 /coverage 37 /coverage
38 /libpeerconnection.log 38 /libpeerconnection.log
39 npm-debug.log 39 npm-debug.log
40 yarn-error.log 40 yarn-error.log
41 testem.log 41 testem.log
42 /typings 42 /typings
43 43
44 # System Files 44 # System Files
45 .DS_Store 45 .DS_Store
46 Thumbs.db 46 Thumbs.db
47
48 # Project Settings
49 src/etc/AppSettings.ts
47 50
src/app/components/busqueda-productos/busqueda-productos.component.html
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-10 p-0"> 2 <div class="col-10 p-0">
3 <!-- TOP HEADER --> 3 <!-- TOP HEADER -->
4 <app-header></app-header> 4 <app-header></app-header>
5 5
6 <!-- NOMBRE DE SECCION --> 6 <!-- NOMBRE DE SECCION -->
7 <div class="row m-0"> 7 <div class="row m-0">
8 <div class="col-12 p-0"> 8 <div class="col-12 p-0">
9 <p class="h5 py-1 bg-light text-muted text-center"> 9 <p class="h5 py-1 bg-gray text-muted text-center">
10 Búsqueda 10 Búsqueda
11 <i class="fa fa-search"></i> 11 <i class="fa fa-search"></i>
12 </p> 12 </p>
13 </div> 13 </div>
14 </div> 14 </div>
15 15
16 <div class="row m-4 disable-user-select"> 16 <div class="row m-4 disable-user-select">
17 17
18 <!-- FILTROS --> 18 <!-- FILTROS -->
19 <div class="col-sm-2 p-1"> 19 <div class="col-sm-2 p-1">
20 <div class="text-center"> 20 <div class="text-center">
21 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p> 21 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
22 </div> 22 </div>
23 <ul class="list-group"> 23 <ul class="list-group">
24 <li 24 <li
25 [ngClass]="{active: categoria == 1}" 25 [ngClass]="{active: categoria == 1}"
26 (click)="categoria = 1" 26 (click)="categoria = 1"
27 class="list-group-item list-group-item-action text-center my-1 p-2 h6"> 27 class="list-group-item list-group-item-action text-center my-1 p-2 h6">
28 Combos y Promociones 28 Combos y Promociones
29 </li> 29 </li>
30 <li 30 <li
31 [ngClass]="{active: categoria == 2}" 31 [ngClass]="{active: categoria == 2}"
32 (click)="categoria = 2" 32 (click)="categoria = 2"
33 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 33 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
34 Todos 34 Todos
35 </li> 35 </li>
36 <li 36 <li
37 [ngClass]="{active: categoria == 3}" 37 [ngClass]="{active: categoria == 3}"
38 (click)="categoria = 3" 38 (click)="categoria = 3"
39 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 39 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
40 Bebidas 40 Bebidas
41 </li> 41 </li>
42 <li 42 <li
43 [ngClass]="{active: categoria == 4}" 43 [ngClass]="{active: categoria == 4}"
44 (click)="categoria = 4" 44 (click)="categoria = 4"
45 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 45 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
46 Sandwichería 46 Sandwichería
47 </li> 47 </li>
48 <li 48 <li
49 [ngClass]="{active: categoria == 5}" 49 [ngClass]="{active: categoria == 5}"
50 (click)="categoria = 5" 50 (click)="categoria = 5"
51 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 51 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
52 Panaderia 52 Panaderia
53 </li> 53 </li>
54 <li 54 <li
55 [ngClass]="{active: categoria == 6}" 55 [ngClass]="{active: categoria == 6}"
56 (click)="categoria = 6" 56 (click)="categoria = 6"
57 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 57 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
58 Golosinas 58 Golosinas
59 </li> 59 </li>
60 <li 60 <li
61 [ngClass]="{active: categoria == 7}" 61 [ngClass]="{active: categoria == 7}"
62 (click)="categoria = 7" 62 (click)="categoria = 7"
63 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 63 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
64 Tabaqueria 64 Tabaqueria
65 </li> 65 </li>
66 </ul> 66 </ul>
67 </div> 67 </div>
68 68
69 <!-- SEARCH INPUT --> 69 <!-- SEARCH INPUT -->
70 <div *ngIf="productos.length > 0" class="fade-in col-sm-10"> 70 <div *ngIf="productos.length > 0" class="fade-in col-sm-10">
71 71
72 <div class="form-group row search"> 72 <div class="form-group row search">
73 <div class="col-sm-10"> 73 <div class="col-sm-10">
74 <span class="fa fa-search form-control-lg form-control-search pl-3"></span> 74 <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
75 <input 75 <input
76 type="text" 76 type="text"
77 class="form-control form-control-lg shadow-sm rounded-pill px-5" 77 class="form-control form-control-lg shadow-sm rounded-pill px-5"
78 placeholder="Búsqueda productos" 78 placeholder="Búsqueda productos"
79 [(ngModel)]="searchTerm" 79 [(ngModel)]="searchTerm"
80 (ngModelChange)="filterItems()"> 80 (ngModelChange)="filterItems()">
81 </div> 81 </div>
82 <!-- BOTON VOLVER --> 82 <!-- BOTON VOLVER -->
83 <div class="col-sm-2"> 83 <div class="col-sm-2">
84 <button 84 <button
85 type="button" 85 type="button"
86 class="btn btn-light btn-lg shadow-sm" 86 class="btn btn-light btn-lg shadow-sm"
87 [routerLink]="['/inicio']"> 87 [routerLink]="['/inicio']">
88 <span class="font-weight-normal h6">Volver&nbsp;&nbsp;</span> 88 <span class="font-weight-normal h6">Volver&nbsp;&nbsp;</span>
89 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 89 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
90 </button> 90 </button>
91 </div> 91 </div>
92 </div> 92 </div>
93
94 <!-- LISTA DE PRODUCTOS --> 93 <!-- LISTA DE PRODUCTOS -->
95 <div class="row align-items-start vh-70 overflow-scroll disable-user-select"> 94 <div class="row align-items-start vh-70 overflow-scroll disable-user-select">
96 <div 95 <div
97 class="col-4 p-2" 96 class="col-4 p-2"
98 *ngFor="let producto of auxProductos"> 97 *ngFor="let producto of auxProductos">
99 <div class="card-effect bg-white rounded-sm shadow border-0"> 98 <div class="card-effect bg-white rounded-sm shadow border-0">
100 <img src="../../../assets/img/descarga.jpg" class="w-75 m-auto"> 99 <img src="{{apiUrl}}/imagenes/accesoPLAYA.png" class="w-75 m-auto">
101 <div class="p-2"> 100 <div class="p-2">
102 <p class="h6 text-left m-0">{{producto.DetArt}}</p> 101 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
103 <div class="row justify-content-between m-0"> 102 <div class="row justify-content-between m-0">
104 <div class="col-12 p-0"> 103 <div class="col-12 p-0">
105 <div class="text-left"> 104 <div class="text-left">
106 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> 105 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
107 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p> 106 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p>
108 </div> 107 </div>
109 </div> 108 </div>
110 <div class="col-12 my-auto pt-2 pr-2 p-0"> 109 <div class="col-12 my-auto pt-2 pr-2 p-0">
111 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 110 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
112 </div> 111 </div>
113 </div> 112 </div>
114 </div> 113 </div>
115 </div> 114 </div>
116 </div> 115 </div>
117 </div> 116 </div>
118 </div> 117 </div>
119 118
120 <!-- SPINNER --> 119 <!-- SPINNER -->
121 <div *ngIf="productos.length === 0 && showSpinner" class="col-sm-10 align-self-center"> 120 <div *ngIf="productos.length === 0 && showSpinner" class="col-sm-10 align-self-center">
122 <div class="spinner-border spinner-lg text-secondary" role="status"></div> 121 <div class="spinner-border spinner-lg text-secondary" role="status"></div>
123 <span class="text-secondary m-2 h5">Cargando información.</span> 122 <span class="text-secondary m-2 h5">Cargando información.</span>
124 </div> 123 </div>
125 124
126 </div> 125 </div>
127 126
128 </div> 127 </div>
129 128
130 <!-- SIDEBAR --> 129 <!-- SIDEBAR -->
131 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar> 130 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
132 </div> 131 </div>
133 132
src/app/components/busqueda-productos/busqueda-productos.component.ts
1 import { Component, OnInit } 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 { appSettings } from 'src/etc/AppSettings';
4 5
5 @Component({ 6 @Component({
6 selector: 'app-busqueda-productos', 7 selector: 'app-busqueda-productos',
7 templateUrl: './busqueda-productos.component.html', 8 templateUrl: './busqueda-productos.component.html',
8 styleUrls: ['./busqueda-productos.component.scss'] 9 styleUrls: ['./busqueda-productos.component.scss']
9 }) 10 })
10 export class BusquedaProductosComponent implements OnInit { 11 export class BusquedaProductosComponent implements OnInit {
11 12
12 productos: Producto[] = []; 13 private productos: Producto[] = [];
13 auxProductos: Producto[] = []; 14 private auxProductos: Producto[] = [];
14 searchTerm: string = ''; 15 private searchTerm: string = '';
15 showSpinner: boolean = true; 16 private showSpinner: boolean = true;
16 categoria: Categorias = Categorias.todos; 17 private categoria: Categorias = Categorias.todos;
18 private apiUrl : string = appSettings.apiUrl;
17 19
18 constructor(private productoService: ProductoService) { } 20 constructor(private productoService: ProductoService) { }
19 21
20 ngOnInit() { 22 ngOnInit() {
21 23
22 this.productoService.getAll() 24 this.productoService.getAll()
23 .subscribe((data: Producto[]) => { 25 .subscribe((data: Producto[]) => {
24 26
25 this.auxProductos = this.productos = data; 27 this.auxProductos = this.productos = data;
26 }, (error) => { 28 }, (error) => {
27 this.showSpinner = false; 29 this.showSpinner = false;
28 console.error(error); 30 console.error(error);
29 }); 31 });
30 } 32 }
31 33
32 filterItems() { 34 filterItems() {
33 console.log(''); 35 console.log('');
34 this.auxProductos = this.productos.filter(x => x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase())); 36 this.auxProductos = this.productos.filter(x => x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()));
35 } 37 }
36 38
37 } 39 }
38 40
39 enum Categorias { 41 enum Categorias {
40 promosCombos = 1, 42 promosCombos = 1,
41 todos = 2, 43 todos = 2,
42 bebidas = 3, 44 bebidas = 3,
43 sandwicheria = 4, 45 sandwicheria = 4,
44 panaderia = 5, 46 panaderia = 5,
45 golosinas = 6, 47 golosinas = 6,
46 tabaqueria = 7, 48 tabaqueria = 7,
47 } 49 }
48 50
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
1 <app-header></app-header> 1 <app-header></app-header>
2 <div class="row"> 2 <div class="row">
3 <div class="col-10"> 3 <div class="col-10">
4 4
5 <!-- NOMBRE DE SECCION --> 5 <!-- NOMBRE DE SECCION -->
6 <div class="row m-0"> 6 <div class="row m-0">
7 <div class="col-12 p-0"> 7 <div class="col-12 p-0">
8 <p class="h5 py-1 bg-light text-muted text-center">Pago <i class="fa fa-usd"></i></p> 8 <p class="h5 py-1 bg-gray text-muted text-center">Pago <i class="fa fa-usd"></i></p>
9 </div> 9 </div>
10 </div> 10 </div>
11 11
12 <div class="row m-4 d-flex align-items-center"> 12 <div class="row m-4 d-flex align-items-center">
13 <div class="col-4"> 13 <div class="col-4">
14 <h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1> 14 <h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1>
15 </div> 15 </div>
16 <div class="col-8"> 16 <div class="col-8">
17 <h2>¿Desea finalizar su compra?</h2> 17 <h2>¿Desea finalizar su compra?</h2>
18 <h3>Por favor, controle y confirme su compra.</h3> 18 <h3>Por favor, controle y confirme su compra.</h3>
19 </div> 19 </div>
20 <div class="col-sm-7"> 20 <div class="col-sm-7">
21 21
22 <div class="row pr-3 vh-50 overflow-scroll"> 22 <div class="row pr-3 vh-50 overflow-scroll">
23 <div 23 <div
24 class="col-4 p-2" 24 class="col-4 p-2"
25 *ngFor="let producto of productos"> 25 *ngFor="let producto of productos">
26 <div class="card card-effect bg-white rounded-sm shadow border-0"> 26 <div class="card card-effect bg-white rounded-sm shadow border-0">
27 <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto"> 27 <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto">
28 <div class="card-body"> 28 <div class="card-body">
29 <p class="h5 text-left m-0">{{producto.variable}}</p> 29 <p class="h5 text-left m-0">{{producto.variable}}</p>
30 <div class="text-left"> 30 <div class="text-left">
31 <p class="m-0"><small>ASDASDSADASDSA</small></p> 31 <p class="m-0"><small>ASDASDSADASDSA</small></p>
32 <p class="m-0"><small>COD. 1222</small></p> 32 <p class="m-0"><small>COD. 1222</small></p>
33 <p class="m-0"><strong>$ 563</strong></p> 33 <p class="m-0"><strong>$ 563</strong></p>
34 </div> 34 </div>
35 </div> 35 </div>
36 </div> 36 </div>
37 </div> 37 </div>
38 </div> 38 </div>
39 </div> 39 </div>
40 <div class="col-sm-5"> 40 <div class="col-sm-5">
41 <h3>TOTAL: $553</h3> 41 <h3>TOTAL: $553</h3>
42 </div> 42 </div>
43 </div> 43 </div>
44 44
45 <!-- SIDEBAR --> 45 <!-- SIDEBAR -->
46 </div> 46 </div>
47 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar> 47 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
48 </div> 48 </div>
49 49
src/app/components/header/header.component.html
1 <div class="bg-danger py-1 py-sm-2 py-lg-5">
2 <p class="text-center">HEADER</p>
3 </div>
1 <div class="row bg-light p-4 justify-content-between">
2 <div class="col-auto">
3 <img src="{{apiUrl}}/imagenes/logoaxion.png">
4 </div>
5 <div class="col-auto">
6 <img src="{{apiUrl}}/imagenes/logodebo.png">
src/app/components/header/header.component.ts
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { appSettings } from 'src/etc/AppSettings';
2 3
3 @Component({ 4 @Component({
4 selector: 'app-header', 5 selector: 'app-header',
5 templateUrl: './header.component.html', 6 templateUrl: './header.component.html',
6 styleUrls: ['./header.component.scss'] 7 styleUrls: ['./header.component.scss']
7 }) 8 })
8 export class HeaderComponent implements OnInit { 9 export class HeaderComponent implements OnInit {
9 10
11 private apiUrl : string = appSettings.apiUrl;
12
10 constructor() { } 13 constructor() { }
11 14
12 ngOnInit() { 15 ngOnInit() {
13 } 16 }
14 17
15 } 18 }
16 19
src/app/components/inicio/inicio.component.html
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-10 p-0"> 2 <div class="col-10 p-0">
3 <!-- TOP HEADER --> 3 <!-- TOP HEADER -->
4 <app-header></app-header> 4 <app-header></app-header>
5 5
6 <!-- NOMBRE DE SECCION --> 6 <!-- NOMBRE DE SECCION -->
7 <div class="row m-0"> 7 <div class="row m-0">
8 <div class="col-12 p-0"> 8 <div class="col-12 p-0">
9 <p class="h5 py-1 bg-light text-muted text-center">Inicio</p> 9 <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p>
10 </div> 10 </div>
11 </div> 11 </div>
12 12
13 <div class="row m-4 d-flex align-items-center disable-user-select"> 13 <div class="row m-4 d-flex align-items-center disable-user-select">
14 <div class="col-md-5 d-flex align-items-end flex-column"> 14 <div class="col-md-5 d-flex align-items-end flex-column">
15 15
16 <!-- TOOL TIp --> 16 <!-- TOOL TIp -->
17 <div class="popover left bs-example-popover p-4 border-0 shadow rounded mw-100 h-100 mb-auto" 17 <div class="popover left bs-example-popover p-4 border-0 shadow rounded mw-100 h-100 mb-auto"
18 *ngIf="tooltip === true"> 18 *ngIf="tooltip === true">
19 <div class="arrow"></div> 19 <div class="arrow"></div>
20 <h4 class="popover-title mb-3 mt-1"> Este producto forma parte de Combos y Promociones</h4> 20 <h4 class="popover-title mb-3 mt-1"> Este producto forma parte de Combos y Promociones</h4>
21 <div class="popover-content mw-100 h-100 mb-auto"> 21 <div class="popover-content mw-100 h-100 mb-auto">
22 <div class="d-flex flex-column h-75 text-center"> 22 <div class="d-flex flex-column h-75 text-center">
23 <div class="overflow-auto overflow-scroll mb-2"> 23 <div class="overflow-auto overflow-scroll mb-2">
24 24
25 <div class="card bg-white rounded-sm shadow border-0 black-text my-3"> 25 <div class="card bg-white rounded-sm shadow border-0 black-text my-3">
26 <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded"> 26 <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded">
27 <div class="col-6 p-0 text-left my-auto"> 27 <div class="col-6 p-0 text-left my-auto">
28 <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p> 28 <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p>
29 <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p> 29 <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p>
30 </div> 30 </div>
31 <div class="col-6 p-1 text-center my-auto"> 31 <div class="col-6 p-1 text-center my-auto">
32 <p class="m-0 h1 text-right">{{105 | currency}}</p> 32 <p class="m-0 h1 text-right">{{105 | currency}}</p>
33 </div> 33 </div>
34 </div> 34 </div>
35 </div> 35 </div>
36 36
37 </div> 37 </div>
38 </div> 38 </div>
39 </div> 39 </div>
40 </div> 40 </div>
41 41
42 <!-- PROMOCIONES --> 42 <!-- PROMOCIONES -->
43 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> 43 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
44 <div class="card-body text-left p-4"> 44 <div class="card-body text-left p-4">
45 <div class="row"> 45 <div class="row">
46 <div class="col-7"> 46 <div class="col-7">
47 <p class="h3 card-title">Promociones</p> 47 <p class="h3 card-title">Promociones</p>
48 </div> 48 </div>
49 <div class="col-5 p-0"> 49 <div class="col-5 p-0">
50 <img src="../../../assets/icons/primario.promociones.png" alt="" class="icon-dim m-0"> 50 <img src="../../../assets/icons/primario.promociones.png" alt="" class="icon-dim m-0">
51 </div> 51 </div>
52 </div> 52 </div>
53 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> 53 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
54 </div> 54 </div>
55 <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel"> 55 <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel">
56 <ol class="carousel-indicators m-0"> 56 <ol class="carousel-indicators m-0">
57 <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li> 57 <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li>
58 <li data-target="#carouselIndicators" data-slide-to="1" class="bg-dark"></li> 58 <li data-target="#carouselIndicators" data-slide-to="1" class="bg-dark"></li>
59 <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li> 59 <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li>
60 </ol> 60 </ol>
61 <div class="carousel-inner"> 61 <div class="carousel-inner">
62 <div class="carousel-item active"> 62 <div class="carousel-item active">
63 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> 63 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
64 </div> 64 </div>
65 <div class="carousel-item"> 65 <div class="carousel-item">
66 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> 66 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
67 </div> 67 </div>
68 <div class="carousel-item"> 68 <div class="carousel-item">
69 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> 69 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
70 </div> 70 </div>
71 </div> 71 </div>
72 </div> 72 </div>
73 </div> 73 </div>
74 74
75 <!-- ORDENAR --> 75 <!-- ORDENAR -->
76 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 76 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
77 <div class="card-body text-left p-4"> 77 <div class="card-body text-left p-4">
78 <div class="row"> 78 <div class="row">
79 <div class="col-5"> 79 <div class="col-5">
80 <p class="h3 card-title">Ordenar</p> 80 <p class="h3 card-title">Ordenar</p>
81 </div> 81 </div>
82 <div class="col-7 p-0"> 82 <div class="col-7 p-0">
83 <img src="../../../assets/icons/primario.ordenar.png" alt="" class="icon-dim"> 83 <img src="../../../assets/icons/primario.ordenar.png" alt="" class="icon-dim">
84 </div> 84 </div>
85 </div> 85 </div>
86 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> 86 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
87 </div> 87 </div>
88 <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg"> 88 <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg">
89 </div> 89 </div>
90 </div> 90 </div>
91 91
92 <div class="col-md-7 d-flex align-items-end flex-column"> 92 <div class="col-md-7 d-flex align-items-end flex-column">
93 93
94 <!-- CARGAR PRODUCTOS --> 94 <!-- CARGAR PRODUCTOS -->
95 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> 95 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
96 <div class="card-body text-left p-4"> 96 <div class="card-body text-left p-4">
97 <div class="row"> 97 <div class="row">
98 <div class="col-6"> 98 <div class="col-6">
99 <p class="h3 card-title">Cargar Productos</p> 99 <p class="h3 card-title">Cargar Productos</p>
100 </div> 100 </div>
101 <div class="col-6 p-0"> 101 <div class="col-6 p-0">
102 <img src="../../../assets//icons/escanear.png" alt="" class="icon-dim mb-2"> 102 <img src="../../../assets//icons/escanear.png" alt="" class="icon-dim mb-2">
103 </div> 103 </div>
104 </div> 104 </div>
105 <p class="h5 card-text text-muted font-weight-light"> 105 <p class="h5 card-text text-muted font-weight-light">
106 Coloque el código de<br> 106 Coloque el código de<br>
107 barras o QR frente al scanner. 107 barras o QR frente al scanner.
108 </p> 108 </p>
109 </div> 109 </div>
110 <div class="card bg-white border-0 w-75 mx-auto mb-4"> 110 <div class="card bg-white border-0 w-75 mx-auto mb-4">
111 <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg"> 111 <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg">
112 <div class="card-body text-left p-2"> 112 <div class="card-body text-left p-2">
113 <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p> 113 <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p>
114 <p class="m-0 card-text text-muted">COD. 12121222</p> 114 <p class="m-0 card-text text-muted">COD. 12121222</p>
115 </div> 115 </div>
116 </div> 116 </div>
117 </div> 117 </div>
118 118
119 <!-- BUSCAR PRODUCTOS --> 119 <!-- BUSCAR PRODUCTOS -->
120 <div (click)="goPage('busqueda-productos')" 120 <div (click)="goPage('busqueda-productos')"
121 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 121 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
122 <div class="card-body text-left p-4"> 122 <div class="card-body text-left p-4">
123 <div class="row"> 123 <div class="row">
124 <div class="col-6"> 124 <div class="col-6">
125 <p class="h3 card-title">Buscar Productos</p> 125 <p class="h3 card-title">Buscar Productos</p>
126 <p class="h5 card-text text-muted font-weight-light"> 126 <p class="h5 card-text text-muted font-weight-light">
127 Busque aquí los productos<br> 127 Busque aquí los productos<br>
128 que no tienen código </p> 128 que no tienen código </p>
129 </div> 129 </div>
130 <div class="col-6 p-0"> 130 <div class="col-6 p-0">
131 <img src="../../../assets/icons/primario.buscar.png" alt="" class="icon-dim mb-2"> 131 <img src="../../../assets/icons/primario.buscar.png" alt="" class="icon-dim mb-2">
132 </div> 132 </div>
133 </div> 133 </div>
134 134
135 </div> 135 </div>
136 </div> 136 </div>
137 137
138 </div> 138 </div>
139 139
140 </div> 140 </div>
141 141
142 </div> 142 </div>
143 143
144 <!-- SIDEBAR --> 144 <!-- SIDEBAR -->
145 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar> 145 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
146 </div> 146 </div>
src/app/components/sidebar/sidebar.component.html
1 <div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center"> 1 <div class="d-flex align-items-center flex-column h-100 pt-2 text-center">
2 2
3 <h4 class="border-bottom border-white"> Mi compra </h4> 3 <h4 class="border-bottom border-white text-white"> Mi compra </h4>
4 <div class="overflow-auto overflow-scroll mb-2"> 4
5 <div class="card my-2 bg-primary border-0" *ngFor="let prod of productos; let i = index"> 5 <div class="overflow-auto overflow-scroll mb-2 w-100">
6 <img src="{{prod.img}}" class="card-img-top" alt="..."> 6 <div class="my-2 bg-white border-0 rounded-sm" *ngFor="let prod of productos; let i = index">
7 <div class="card-body row m-0 p-0 px-1 py-1 shadow rounded"> 7 <img class="m-auto pt-2" [src]="prod.img">
8 <div class="col-8 p-0 text-left my-auto"> 8 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">
9 <p class="m-0 card-description">{{prod.desc}}</p> 9 <div class="col-12 p-0 pt-2 text-left my-auto">
10 <p class="m-0 card-description">COD: {{prod.cod}}</p> 10 <p class="m-0 h6"><small>{{prod.desc}}</small></p>
11 <p class="m-0 h6"><small>COD: {{prod.cod}}</small></p>
11 </div> 12 </div>
12 <div class="col-4 p-1 text-center my-auto"> 13 <div class="col-12 pr-1 text-right h6 my-auto ">
13 {{prod.precio | currency}} 14 <p class="m-0">{{prod.precio | currency}}</p>
14 </div> 15 </div>
15 </div> 16 </div>
16 <div class="row m-0 p-0"> 17 <div class="row m-0 p-0">
17 <div class="col p-1 pb-1 mt-2"> 18 <div class="col px-2 my-2">
18 <button type="button" class="btn btn-light btn-sm float-left my-auto" (click)="deleteProducto(i)">X</button> 19 <div class="btn-group-sm btn-group float-left my-auto" role="group">
19 <button type="button" class="btn btn-light btn-sm my-auto">Y</button> 20 <button type="button" class="btn btn-light btn-sm my-auto border" (click)="aumentarContador(i)">
20 <div class="btn-group-sm btn-group float-right my-auto" role="group" aria-label="Basic example"> 21 <i class="fa fa-plus" aria-hidden="true"></i>
21 <button type="button" class="btn btn-light btn-sm mb-2" (click)="aumentarContador(i)">+</button> 22 </button>
22 <label for="" class="border border.white px-1">{{prod.cantidad}}</label> 23 <div class="bg-white border border-white px-3 my-auto text-dark h5">
23 <button type="button" class="btn btn-light btn-sm mb-2" (click)="decrementarContador(i)">-</button> 24 <small>{{prod.cantidad}}</small>
25 </div>
26 <button type="button" class="btn btn-light btn-sm my-auto border" (click)="decrementarContador(i)">
27 <i class="fa fa-minus" aria-hidden="true"></i>
28 </button>
29 </div>
30 </div>
31 <div class="col px-2 my-2">
32 <div class="btn-group-sm btn-group float-right my-auto" role="group">
33 <button type="button" class="btn btn-light btn-sm my-auto float-left border mr-2">
34 <i class="fa fa-hand-o-up" aria-hidden="true"></i>
35 </button>
36 <button type="button" class="btn btn-secondary btn-sm my-auto ml-2" (click)="deleteProducto(i)">
37 <i class="fa fa-times" aria-hidden="true"></i>
38 </button>
24 </div> 39 </div>
25 </div> 40 </div>
26 </div> 41 </div>
27 </div> 42 </div>
28 </div> 43 </div>
29 44
30 <div class="card mt-auto blue-gradient border-0"> 45 <div class="card rounded-top-sm mt-auto blue-gradient border-0">
31 <div class="card-body row"> 46 <div class="card-body row">
32 <div class="col"> 47 <div class="col">
33 <h4 class="border-bottom border-secondary text-secondary" *ngIf="cont === 1">({{cont}}) item</h4> 48 <h4 class="border-bottom border-secondary text-secondary pb-2" *ngIf="cont === 1">({{cont}}) item</h4>
34 <h4 class="border-bottom border-secondary text-secondary" *ngIf="cont > 1">({{cont}}) items</h4> 49 <h4 class="border-bottom border-secondary text-secondary pb-2" *ngIf="cont > 1">({{cont}}) items</h4>
35 <h3 class="text-secondary">Total</h3> 50 <h3 class="text-secondary">Total</h3>
36 <h3 class="text-dark"><strong>{{total | currency}}</strong></h3> 51 <h3 class=""><strong>{{total | currency}}</strong></h3>
37 </div> 52 </div>
38 <div class="col 12 p-0"> 53 <div class="col 12 p-0">
39 <button type="button" class="btn btn-light shadow mb-2" routerLink="/confirmacion-carrito"><strong>Finalizar y pagar</strong></button> 54 <button type="button" class="btn btn-light shadow mb-2" routerLink="/confirmacion-carrito">
55 <strong>Finalizar y pagar</strong>
56 </button>
40 <button type="button" class="btn btn-light shadow btn-sm" (click)="clearCar()">Cancelar</button> 57 <button type="button" class="btn btn-light shadow btn-sm" (click)="clearCar()">Cancelar</button>
41 </div> 58 </div>
42 </div> 59 </div>
43 </div>
60 </div>
61 </div>
src/app/components/sidebar/sidebar.component.scss
1 .card-description{ 1 .card-description{
2 font-size: 12px; 2 font-size: 12px;
3 }
3 }
4
5 app-sidebar {
6 background-color: red !important;
7 }
src/app/components/sidebar/sidebar.component.ts
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Producto } from 'src/app/wrappers/producto';
2 3
3 4
4 @Component({ 5 @Component({
5 selector: 'app-sidebar', 6 selector: 'app-sidebar',
6 templateUrl: './sidebar.component.html', 7 templateUrl: './sidebar.component.html',
7 styleUrls: ['./sidebar.component.scss'] 8 styleUrls: ['./sidebar.component.scss']
8 }) 9 })
9 export class SidebarComponent implements OnInit { 10 export class SidebarComponent implements OnInit {
10 11
11 private cont: number = 1; 12 private cont: number = 1;
12 private min: number = 1; 13 private min: number = 1;
13 private max: number = 50; 14 private max: number = 50;
14 private total: number = 0; 15 private total: number = 0;
15 16
16 private productos = [ 17 private productos = [
17 { 18 {
18 "id": 1, 19 "id": 1,
19 "desc": "Galletas Oreo", 20 "Detart": "Galletas Oreo",
20 "cod": 225412, 21 "cod": 225412,
21 "precio": 15, 22 "precio": 15,
22 "img": "./assets/img/descarga.jpg", 23 "img": "./assets/img/logodebo.png",
23 "cantidad": 1 24 "cantidad": 1
24 }, 25 },
25 { 26 {
26 "id": 2, 27 "id": 2,
27 "desc": "Coca cola 500ml", 28 "desc": "Coca cola 500ml",
28 "cod": 512632, 29 "cod": 512632,
29 "precio": 40, 30 "precio": 40,
30 "img": "./assets/img/descarga.jpg", 31 "img": "./assets/img/logodebo.png",
31 "cantidad": 1 32 "cantidad": 1
32 }, 33 },
33 { 34 {
34 "id": 3, 35 "id": 3,
35 "desc": "Pancho grande", 36 "desc": "Pancho grande",
36 "cod": 775987, 37 "cod": 775987,
37 "precio": 45, 38 "precio": 45,
38 "img": "./assets/img/descarga.jpg", 39 "img": "./assets/img/logodebo.png",
39 "cantidad": 1 40 "cantidad": 1
40 } 41 }
41 ]; 42 ];
42 43
43 constructor() { } 44 constructor() { }
44 45
45 ngOnInit() { 46 ngOnInit() {
46 47
47 this.getCantidadProductos(); 48 this.getCantidadProductos();
48 this.getTotal(); 49 this.getTotal();
49 50
50 } 51 }
51 52
52 getCantidadProductos() { 53 getCantidadProductos() {
53 var aux = 0; 54 var aux = 0;
54 for (let i = 0; i < this.productos.length; i++) { 55 for (let i = 0; i < this.productos.length; i++) {
55 ++aux; 56 ++aux;
56 } 57 }
57 return this.cont = aux; 58 return this.cont = aux;
58 } 59 }
59 60
60 getTotal() { 61 getTotal() {
61 62
62 let subTotal = 0; 63 let subTotal = 0;
63 for (let i = 0; i < this.productos.length; i++) { 64 for (let i = 0; i < this.productos.length; i++) {
64 subTotal = subTotal + (this.productos[i].precio * this.productos[i].cantidad); 65 subTotal = subTotal + (this.productos[i].precio * this.productos[i].cantidad);
65 } 66 }
66 console.log(subTotal); 67 console.log(subTotal);
67 return this.total = subTotal; 68 return this.total = subTotal;
68 } 69 }
69 70
70 public aumentarContador(index) { 71 public aumentarContador(index) {
71 72
72 ++this.cont; 73 ++this.cont;
73 for (let i = 0; i < this.productos.length; i++) { 74 for (let i = 0; i < this.productos.length; i++) {
74 if (i === index) { 75 if (i === index) {
75 this.total = this.total + this.productos[i].precio; 76 this.total = this.total + this.productos[i].precio;
76 return (this.productos[i].cantidad === this.max) ? 77 return (this.productos[i].cantidad === this.max) ?
77 this.productos[i].cantidad : ++this.productos[i].cantidad; 78 this.productos[i].cantidad : ++this.productos[i].cantidad;
78 79
79 } 80 }
80 } 81 }
81 } 82 }
82 83
83 decrementarContador(index) { 84 decrementarContador(index) {
84 85
85 for (let i = 0; i < this.productos.length; i++) { 86 for (let i = 0; i < this.productos.length; i++) {
86 if (i === index && this.productos[i].cantidad > 1) { 87 if (i === index && this.productos[i].cantidad > 1) {
87 --this.productos[i].cantidad; 88 --this.productos[i].cantidad;
88 --this.cont; 89 --this.cont;
89 break; 90 break;
90 } 91 }
91 } 92 }
92 93
93 this.getTotal() 94 this.getTotal()
94 } 95 }
95 96
96 setCantidadItems() { 97 setCantidadItems() {
97 98
98 this.cont = 0; 99 this.cont = 0;
99 for (let i = 0; i < this.productos.length; i++) { 100 for (let i = 0; i < this.productos.length; i++) {
100 this.cont += this.productos[i].cantidad; 101 this.cont += this.productos[i].cantidad;
101 } 102 }
102 } 103 }
103 104
104 deleteProducto(index) { 105 deleteProducto(index) {
105 106
106 for (let i = 0; i < this.productos.length; i++) { 107 for (let i = 0; i < this.productos.length; i++) {
107 if (i === index) { 108 if (i === index) {
108 this.cont -= this.productos[i].cantidad; 109 this.cont -= this.productos[i].cantidad;
109 //Elimina del total el precio de todo el item 110 //Elimina del total el precio de todo el item
110 this.total = this.total - (this.productos[i].precio * this.productos[i].cantidad); 111 this.total = this.total - (this.productos[i].precio * this.productos[i].cantidad);
111 this.productos.splice(i, 1); 112 this.productos.splice(i, 1);
112 return; 113 return;
113 } 114 }
114 } 115 }
115 } 116 }
116 117
117 clearCar() { 118 clearCar() {
118 119
119 this.productos = []; 120 this.productos = [];
120 this.total = 0; 121 this.total = 0;
121 this.cont = 0; 122 this.cont = 0;
122 } 123 }
123 } 124 }
124 125
src/app/services/producto.service.ts
1 import { Injectable } from '@angular/core'; 1 import { Injectable } from '@angular/core';
2 import { HttpClient } from '@angular/common/http'; 2 import { HttpClient } from '@angular/common/http';
3 import { Observable } from 'rxjs'; 3 import { Observable } from 'rxjs';
4 import { appSettings } from 'src/etc/AppSettings';
4 5
5 @Injectable({ 6 @Injectable({
6 providedIn: 'root' 7 providedIn: 'root'
7 }) 8 })
8 export class ProductoService { 9 export class ProductoService {
9 10
10 constructor(private http: HttpClient) { } 11 constructor(private http: HttpClient) { }
11 12
12 getAll(): Observable<any> { 13 getAll(): Observable<any> {
13 return this.http.get('http://10.231.45.179:4705/autoservicio/articulos') 14 return this.http.get(`${appSettings.apiUrl}/articulos`);
14 } 15 }
15 16
16 } 17 }
17 18
src/app/wrappers/producto.ts
1 export interface Producto { 1 export interface Producto {
2 CodSec: number; 2 CodSec: number;
3 CodArt: number; 3 CodArt: number;
4 DetArt: string; 4 DetArt: string;
5 CodRub: number; 5 CodRub: number;
6 Costo: number; 6 Costo: number;
7 PreNet: number; 7 PreNet: number;
8 ImpInt: number; 8 ImpInt: number;
9 UniVen: number; 9 UniVen: number;
10 FecCos: Date; 10 FecCos: Date;
11 UltAct: Date; 11 UltAct: Date;
12 CodPro: number; 12 CodPro: number;
13 ExiDep: number; 13 ExiDep: number;
14 ExiVta: number; 14 ExiVta: number;
15 MinDep: number; 15 MinDep: number;
16 MaxDep: number; 16 MaxDep: number;
17 MinPVE: number; 17 MinPVE: number;
18 MaxPVE: number; 18 MaxPVE: number;
19 ENTTur: number; 19 ENTTur: number;
20 SINTur: number; 20 SINTur: number;
21 SALTur: number; 21 SALTur: number;
22 IvaSN: boolean; 22 IvaSN: boolean;
23 DepSN: boolean; 23 DepSN: boolean;
24 RubMay: number; 24 RubMay: number;
25 PreVen: number; 25 PreVen: number;
26 IvaCO: number; 26 IvaCO: number;
27 TIP: string; 27 TIP: string;
28 IMPIVA: number; 28 IMPIVA: number;
29 ENTADM: number; 29 ENTADM: number;
30 SALADM: number; 30 SALADM: number;
31 CODIIN: number; 31 CODIIN: number;
32 PRO: boolean; 32 PRO: boolean;
33 FPP: boolean; 33 FPP: boolean;
34 ESS: boolean; 34 ESS: boolean;
35 FID: Date; 35 FID: Date;
36 NID: number; 36 NID: number;
37 FIV: Date; 37 FIV: Date;
38 NIV: number; 38 NIV: number;
39 COO: string; 39 COO: string;
40 CAG: string; 40 CAG: string;
41 CAP: number; 41 CAP: number;
42 UTL: number; 42 UTL: number;
43 NHA: boolean; 43 NHA: boolean;
44 PID: boolean; 44 PID: boolean;
45 PRV: number; 45 PRV: number;
46 PRD: number; 46 PRD: number;
47 ImpInt2: number; 47 ImpInt2: number;
48 E_HD: string; 48 E_HD: string;
49 C_HD: string; 49 C_HD: string;
50 CLA: number; 50 CLA: number;
51 UNICAP: number; 51 UNICAP: number;
52 ELBPRO: string; 52 ELBPRO: string;
53 PPP: number; 53 PPP: number;
54 ALI: number; 54 ALI: number;
55 BAL_TIPO: string; 55 BAL_TIPO: string;
56 PER_MAY: boolean; 56 PER_MAY: boolean;
57 ES_MAY: boolean; 57 ES_MAY: boolean;
58 CLA_MAY: number; 58 CLA_MAY: number;
59 PME_CMP: string; 59 PME_CMP: string;
60 USA_BAL: boolean; 60 USA_BAL: boolean;
61 DET_LAR: string; 61 DET_LAR: string;
62 ROTULO: string; 62 ROTULO: string;
63 REC_MANUAL: boolean; 63 REC_MANUAL: boolean;
64 E_HD1: string; 64 E_HD1: string;
65 C_HD1: string; 65 C_HD1: string;
66 ImpInt3: number; 66 ImpInt3: number;
67 FUA_MAE_YPF: Date; 67 FUA_MAE_YPF: Date;
68 CPQ: number; 68 CPQ: number;
69 EPQ: string; 69 EPQ: string;
70 BPQ: number; 70 BPQ: number;
71 PUPQ: number; 71 PUPQ: number;
72 CORVTO: boolean; 72 CORVTO: boolean;
73 CORVTO_COSTO: number; 73 CORVTO_COSTO: number;
74 UTLFR: number; 74 UTLFR: number;
75 FAMILIA: number; 75 FAMILIA: number;
76 ES_LUB: boolean; 76 ES_LUB: boolean;
77 ES_FERT: boolean; 77 ES_FERT: boolean;
78 AutoFac: boolean; 78 AutoFac: boolean;
79 LitrosPCD: number; 79 LitrosPCD: number;
80 LisPCD: number; 80 LisPCD: number;
81 ImpLey23966: boolean; 81 ImpLey23966: boolean;
82 es_bio: boolean; 82 es_bio: boolean;
83 ExpArbaRev: boolean; 83 ExpArbaRev: boolean;
84 ES_AGROQ: boolean; 84 ES_AGROQ: boolean;
85 ES_PLAST: boolean; 85 ES_PLAST: boolean;
86 es_bio_por: string; 86 es_bio_por: string;
87 IMP_IMP_INT: boolean; 87 IMP_IMP_INT: boolean;
88 id: number; 88 id: number;
89 nombreImagen?: any; 89 nombreImagen?: any;
90
91 cantidad?:number;
90 } 92 }
91 93
src/etc/AppSettings ejemplo.ts
File was created 1 export const appSettings = {
2 // apiUrl: 'http://10.231.45.117:4705/autoservicio'
3 };
4
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 3
4 html, 4 html,
5 body { 5 body {
6 background-color: rgb(245, 245, 245); 6 background-color: #f0f0f0;
7 overflow: hidden; 7 overflow: hidden;
8 } 8 }
9 9
10 .blur { 10 .blur {
11 filter: blur(10px); 11 filter: blur(10px);
12 -webkit-filter: blur(10px); 12 -webkit-filter: blur(10px);
13 } 13 }
14 14
15 .disable-user-select { 15 .disable-user-select {
16 -webkit-user-select: none; 16 -webkit-user-select: none;
17 -moz-user-select: none; 17 -moz-user-select: none;
18 -ms-user-select: none; 18 -ms-user-select: none;
19 user-select: none; 19 user-select: none;
20 } 20 }
21 21
22 .blue-gradient { 22 .blue-gradient {
23 background: linear-gradient(0deg, rgb(20, 56, 68), rgb(252, 252, 252)); 23 background: linear-gradient(0deg, #8093a4, #fcfcfc);
24 } 24 }
25 25
26 .rounded { 26 .rounded {
27 border-radius: 1.5rem !important; 27 border-radius: 1.5rem !important;
28 } 28 }
29 29
30 .rounded-top-sm {
31 border-top-left-radius: 0.75rem !important;
32 border-top-right-radius: 0.75rem !important;
33 }
34
30 .rounded-sm { 35 .rounded-sm {
31 border-radius: 0.75rem !important; 36 border-radius: 0.75rem !important;
32 } 37 }
33 38
34 .card-effect { 39 .card-effect {
35 &:active, 40 &:active {
36 img {
37 background-color: #c9c9c9b3 !important; 41 background-color: #c9c9c9b3 !important;
38 transition: background-color 0.5s; 42 transition: background-color 0.5s;
39 } 43 }
40 &:focus, 44 &:focus {
41 img {
42 background-color: #c9c9c9b3 !important; 45 background-color: #c9c9c9b3 !important;
43 transition: background-color 0.5s; 46 transition: background-color 0.5s;
44 } 47 }
45 } 48 }
46 49
47 .overflow-scroll { 50 .overflow-scroll {
48 overflow-y: auto !important; 51 overflow-y: auto !important;
49 overflow-x: hidden !important; 52 overflow-x: hidden !important;
50 &::-webkit-scrollbar { 53 &::-webkit-scrollbar {
51 width: 0.5em; 54 width: 0.5em;
52 } 55 }
53 &::-webkit-scrollbar-track { 56 &::-webkit-scrollbar-track {
54 border-radius: 10px; 57 border-radius: 10px;
58 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
55 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 59 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
56 } 60 }
57 &::-webkit-scrollbar-thumb { 61 &::-webkit-scrollbar-thumb {
58 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 62 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
59 outline: 1px solid slategrey; 63 outline: 1px solid slategrey;
60 border-radius: 10px; 64 border-radius: 10px;
61 height: 12px; 65 height: 12px;
62 &:active { 66 &:active {
67 box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);
63 -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9); 68 -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);
64 } 69 }
65 } 70 }
66 &::-webkit-scrollbar-corner { 71 &::-webkit-scrollbar-corner {
67 border-radius: 10px; 72 border-radius: 10px;
68 } 73 }
69 } 74 }
70 75
76 .bg-gray {
77 background-color: #e6e6e6;
78 }
79
80 .bg-primary-gradient {
81 background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
82 }
83
71 .icon-dim { 84 .icon-dim {
72 height: 40px !important; 85 height: 40px !important;
73 width: auto !important; 86 width: auto !important;
74 background-color: white !important; 87 background-color: white !important;
75 } 88 }
76 89
77 .carousel-indicators li{ 90 .carousel-indicators li{
78 width: 10px !important; 91 width: 10px !important;
79 height: 10px !important; 92 height: 10px !important;
80 border-radius: 15px !important; 93 border-radius: 15px !important;
81 border-top: black !important; 94 border-top: black !important;
82 border-bottom: black !important; 95 border-bottom: black !important;