Martin Macola / autoservicio

Download as
Browse Code »

Commit 103858e63ea7cddcb99d69e459c9461d72f8e9a0

Authored by Eric Fernandez
2 parents 1ee6ab4e95 930ae70b35
Exists in master

conflictos

Showing 24 changed files   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ 103858e
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 10
11 const routes: Routes = [ 11 const routes: Routes = [
12 { path: '', component: HomeComponent }, 12 { path: '', component: HomeComponent },
13 { path: 'home', component: HomeComponent }, 13 { path: 'home', component: HomeComponent },
14 { path: 'abm-imagenes', component: AmbImagenesComponent }, 14 { path: 'abm-imagenes', component: AmbImagenesComponent },
15 { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
15 { 16 {
16 path: '', 17 path: '',
17 component: MasterComponent, 18 component: MasterComponent,
18 children: [ 19 children: [
19 { path: 'inicio', component: InicioComponent }, 20 { path: 'inicio', component: InicioComponent },
20 { path: 'busqueda-productos', component: BusquedaProductosComponent }, 21 { path: 'busqueda-productos', component: BusquedaProductosComponent },
21 { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
22 { path: 'pago', component: PagoComponent } 22 { path: 'pago', component: PagoComponent }
23 ] 23 ]
24 }, 24 },
25 { path: '**', redirectTo: '/home', pathMatch: 'full' }, 25 { path: '**', redirectTo: '/home', pathMatch: 'full' },
26 ]; 26 ];
27 27
28 @NgModule({ 28 @NgModule({
29 imports: [RouterModule.forRoot(routes)], 29 imports: [RouterModule.forRoot(routes)],
30 exports: [RouterModule] 30 exports: [RouterModule]
31 }) 31 })
32 32
33 export class AppRoutingModule { } 33 export class AppRoutingModule { }
src/app/app.module.ts
Diff comments   View file @ 103858e
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 { CarouselComponent } from './components/carousel/carousel.component';
16 import { HomeComponent } from './components/home/home.component'; 15 import { HomeComponent } from './components/home/home.component';
17 import { InicioComponent } from './components/inicio/inicio.component'; 16 import { InicioComponent } from './components/inicio/inicio.component';
18 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; 17 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
19 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component'; 18 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
20 import { MasterComponent } from './components/master/master.component'; 19 import { MasterComponent } from './components/master/master.component';
21 import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component'; 20 import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component';
22 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component'; 21 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component';
23 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component'; 22 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
24 import { PagoComponent } from './components/pago/pago.component'; 23 import { PagoComponent } from './components/pago/pago.component';
25 //#endregion 24 //#endregion
26 25
27 @NgModule({ 26 @NgModule({
28 declarations: [ 27 declarations: [
29 AppComponent, 28 AppComponent,
30 HeaderComponent, 29 HeaderComponent,
31 SidebarComponent, 30 SidebarComponent,
32 CarouselComponent,
33 HomeComponent, 31 HomeComponent,
34 InicioComponent, 32 InicioComponent,
35 BusquedaProductosComponent, 33 BusquedaProductosComponent,
36 ConfirmacionCarritoComponent, 34 ConfirmacionCarritoComponent,
37 MasterComponent, 35 MasterComponent,
38 PopoverPromosComponent, 36 PopoverPromosComponent,
39 PopoverSinonimosComponent, 37 PopoverSinonimosComponent,
40 AmbImagenesComponent, 38 AmbImagenesComponent,
41 PagoComponent 39 PagoComponent
42 ], 40 ],
43 imports: [ 41 imports: [
44 BrowserModule, 42 BrowserModule,
45 AppRoutingModule, 43 AppRoutingModule,
46 HttpClientModule, 44 HttpClientModule,
47 FormsModule, 45 FormsModule,
48 ReactiveFormsModule, 46 ReactiveFormsModule,
49 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }), 47 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
50 TooltipModule.forRoot(), 48 TooltipModule.forRoot(),
51 PopoverModule.forRoot() 49 PopoverModule.forRoot()
52 ], 50 ],
53 providers: [], 51 providers: [],
54 bootstrap: [AppComponent] 52 bootstrap: [AppComponent]
55 }) 53 })
56 export class AppModule { } 54 export class AppModule { }
57 55
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ 103858e
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-60 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"> 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 *ngIf="productos.length === 0 && showSpinner" class="col-sm-10 align-self-center">
96 <div class="spinner-border spinner-lg text-secondary" role="status"></div> 96 <div class="spinner-border spinner-lg text-secondary" role="status"></div>
97 <span class="text-secondary m-2 h5">Cargando información.</span> 97 <span class="text-secondary m-2 h5">Cargando información.</span>
98 </div> 98 </div>
99 99
100 </div> 100 </div>
101 101
102 </div> 102 </div>
103 103
104 </div> 104 </div>
105 105
src/app/components/carousel/carousel.component.html
View file @ 103858e
1 <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> File was deleted
2 <div class="carousel-inner">
3 <div class="carousel-item active">
4 <div class="card" style="width: 18rem;">
5 <div class="card-body">
6 <h5 class="card-title">Card title</h5>
7 <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
8 <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
9 card's content.</p>
10 <a href="#" class="card-link">Card link</a>
11 <a href="#" class="card-link">Another link</a>
12 </div>
13 </div>
14 </div>
15 <div class="carousel-item">
16 <div class="card" style="width: 18rem;">
17 <div class="card-body">
18 <h5 class="card-title">Card title 2222</h5>
19 <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
20 <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
21 card's content.</p>
22 <a href="#" class="card-link">Card link</a>
23 <a href="#" class="card-link">Another link</a>
24 </div>
25 </div>
26 </div>
27 </div>
28 </div>
src/app/components/carousel/carousel.component.scss
View file @ 103858e
src/app/components/carousel/carousel.component.spec.ts
View file @ 103858e
1 import { async, ComponentFixture, TestBed } from '@angular/core/testing'; File was deleted
2
3 import { CarouselComponent } from './carousel.component';
4
5 describe('CarouselComponent', () => {
6 let component: CarouselComponent;
7 let fixture: ComponentFixture<CarouselComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ CarouselComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(CarouselComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
src/app/components/carousel/carousel.component.ts
View file @ 103858e
1 import { Component, OnInit } from '@angular/core'; File was deleted
2
3 @Component({
4 selector: 'app-carousel',
5 templateUrl: './carousel.component.html',
6 styleUrls: ['./carousel.component.scss']
7 })
8 export class CarouselComponent implements OnInit {
9
10 constructor() { }
11
12 ngOnInit() {
13 }
14
15 }
16 1 import { Component, OnInit } from '@angular/core';
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ 103858e
1 <div class="row"> 1 <div class="row m-0 fade-in bg-primary-gradient disable-user-select">
2 <div class="col-12"> 2 <div class="col-12 p-0 vh-100">
3
4 <!-- TOP HEADER -->
5 <app-header></app-header>
3 6
4 <!-- NOMBRE DE SECCION --> 7 <!-- NOMBRE DE SECCION -->
5 <div class="row m-0"> 8 <div class="row m-0">
6 <div class="col-12 p-0"> 9 <div class="col-12 p-0">
7 <p class="h5 py-1 bg-gray text-muted text-center">Pago <i class="fa fa-usd"></i></p> 10 <p class="h5 py-1 bg-gray text-muted text-center m-0">
11 Pagar
12 <i class="fa fa-usd"></i>
13 </p>
8 </div> 14 </div>
9 </div> 15 </div>
10 16
11 <div class="row m-3 d-flex align-items-center"> 17 <div class="row m-0">
12 <div class="col-4"> 18 <div class="col-12">
13 <h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1> 19
14 </div> 20 <!-- TEXTO DE IZQUIERDA -->
15 <div class="col-8"> 21 <div class="row mx-2 mt-4 text-white">
16 <h2>¿Desea finalizar su compra?</h2> 22 <div class="col-sm-2 my-auto">
17 <h3>Por favor, controle y confirme su compra.</h3> 23 <p class="h2">Mi Compra
18 </div> 24 <i class="fa fa-shopping-cart "></i>
19 <div class="col-sm-7"> 25 </p>
20 26 </div>
21 <div class="row pr-3 vh-50 overflow-scroll"> 27 <div class="col-sm-4 my-auto">
22 <div class="col-4 p-2" *ngFor="let producto of productos"> 28 <p class="h3">¿Desea finalizar su compra?</p>
23 <div class="card card-effect bg-white rounded-sm shadow border-0"> 29 <p class="h4">Por favor, controle y confirme su compra.</p>
24 <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="card-img-top w-75 m-auto"> 30 </div>
25 <div class="card-body"> 31 </div>
26 <p class="h5 text-left m-0">{{producto.variable}}</p> 32
27 <div class="text-left"> 33 <div class="row">
28 <p class="m-0"><small>ASDASDSADASDSA</small></p> 34 <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
29 <p class="m-0"><small>COD. 1222</small></p> 35 <div class="col-sm-7">
30 <p class="m-0"><strong>$ 563</strong></p> 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">
38 <div class="bg-white rounded-sm shadow border-0">
39 <img src="{{apiUrl}}/imagenes/testImg.jpg" class="rounded-sm w-100 m-auto">
40 <div class="p-2">
41 <p class="h6 text-left m-0">ZARAZA</p>
42 <div class="row justify-content-between m-0">
43 <div class="col-12 p-0">
44 <div class="text-left">
45 <p class="m-0 h6"><small>ZARAZA DETALLE</small></p>
46 <p class="m-0 h6"><small>COD. 5656</small></p>
47 </div>
48 </div>
49 <div class="col-12 my-auto pt-2 pr-2 p-0">
50 <p class="text-right m-0 h6">{{20 | currency}}</p>
51 </div>
52 </div>
53 </div>
54 </div>
55 </div>
56 </div>
57 </div>
58
59 <div class="col-sm-5">
60 <div class="row ml-3">
61 <!-- TICKET -->
62 <div class="col-sm-7">
63 <div class="card rounded-sm shadow">
64 <div class="card-body">
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">
67 Ticket detalle.
68 </p>
69 <p class="h4 card-text text-right mt-3 mb-0">
70 Total {{230 | currency}}
71 </p>
72 </div>
31 </div> 73 </div>
32 </div> 74 </div>
33 </div> 75 </div>
34 </div> 76 </div>
35 </div> 77 </div>
36 </div> 78
37 <div class="col-sm-5"> 79 <!-- OPCIONES ABAJO DERECHA -->
38 <h3>TOTAL: $553</h3> 80 <div class="row m-0 fixed-bottom">
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">
83 <div class="card-body row m-0">
84 <div class="col-12 p-3">
85 <button
86 type="button"
87 class="btn btn-block btn-light shadow btn-sm shadow"
88 [routerLink]="['/inicio']">
89 <span class="pr-2">Volver</span>
90 <i class="fa fa-undo text-warning"></i>
91 </button>
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>
94 <i class="fa fa-check text-success"></i>
95 </button>
96 <button
97 type="button"
98 class="btn btn-block btn-light shadow btn-sm shadow"
99 [routerLink]="['home']">
100 <span class="pr-2">Cancelar</span>
101 <i class="fa fa-times text-danger"></i>
102 </button>
103 </div>
104 </div>
105 </div>
106 </div>
107 </div>
108
39 </div> 109 </div>
40 </div> 110 </div>
111
41 </div> 112 </div>
113
42 </div> 114 </div>
43 115
src/app/components/header/header.component.html
Diff comments   View file @ 103858e
1 <div class="row bg-light p-4 justify-content-between"> 1 <div class="row m-0 bg-light p-4 justify-content-between">
2 <div class="col-auto"> 2 <div class="col-auto">
3 <img src="{{apiUrl}}/imagenes/logoaxion.png"> 3 <img src="{{apiUrl}}/imagenes/logoaxion.png">
4 </div> 4 </div>
5 <div class="col-auto"> 5 <div class="col-auto">
6 <img src="{{apiUrl}}/imagenes/logodebo.png"> 6 <img src="{{apiUrl}}/imagenes/logodebo.png">
7 </div> 7 </div>
8 </div> 8 </div>
9 9
src/app/components/home/home.component.html
Diff comments   View file @ 103858e
1 <div class="container-fluid"> 1 <div class="container-fluid background-image">
2 <div class="row"> 2 <div class="row">
3 <div class="col p-0"> 3 <div class="col p-0">
4 <div class="vh-100 d-flex align-items-start flex-column disable-user-select"> 4 <div class="vh-100 d-flex align-content-between flex-wrap disable-user-select">
5 5
6 <!-- HEADER --> 6 <!-- HEADER -->
7 <div class="bg-dark py-1 py-sm-2 py-lg-5 w-100"> 7 <div class="row m-0 w-100 bg-primary-gradient-horizontal">
8 <p class="text-white text-center">HEADER</p> 8 <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">
10 </div>
9 </div> 11 </div>
10 12
11 <div class="h-100 w-100 position-relative"> 13 <!-- INFO DE BIENVENIDA -->
12 <div class="background-image blur"></div> 14 <div class="row w-100">
13 <div class="row position-absolute w-100 h-100"> 15 <div class="col-4 offset-2">
14 <div class="col-5 my-auto"> 16 <img src="{{apiUrl}}/imagenes/accesoPLAYA.png" class="w-100">
15 <!-- CAROUSEL --> 17 </div>
16 <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> 18 <div class="col-6 text-center text-white my-auto">
17 <div class="carousel-inner"> 19 <p class="display-2 font-weight-bold mb-5">¡BIENVENIDO!</p>
18 <div class="carousel-item active"> 20 <p class="display-3 m-0">Toque la pantalla<br>para comenzar</p>
19 <img class="m-auto img-fluid d-block w-75"
20 src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
21 alt="">
22 </div>
23 <div class="carousel-item">
24 <img class="m-auto img-fluid d-block w-75"
25 src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
26 alt="">
27 </div>
28 </div>
29 </div>
30 </div>
31 <div class="col-7 my-auto">
32 <div class="text-center text-white">
33 <h1 class="display-2 font-weight-bold">¡BIENVENIDO!</h1>
34 <h1 class="display-3 font-weight-bold">Toque la pantalla<br>para comenzar.</h1>
35 </div>
36 </div>
37 </div> 21 </div>
38 </div> 22 </div>
39 23
40 <!-- FOOTER --> 24 <!-- FOOTER -->
41 <div class="bg-dark py-1 py-sm-2 py-lg-5 w-100"> 25 <div class="row m-0 w-100 bg-gray">
42 <p class="text-white text-center">FOOTER</p> 26 <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">
28 </div>
43 </div> 29 </div>
src/app/components/home/home.component.scss
Diff comments   View file @ 103858e
1 .background-image { 1 .background-image {
2 background-image: url(http://www.nortecorrientes.com/content/bucket/7/304027w980.jpg); 2 background-image: url(http://10.231.45.117:4705/autoservicio/imagenes/homeBackground.jpg);
3 background-repeat: no-repeat; 3 background-repeat: no-repeat;
4 background-size: cover; 4 background-size: cover;
5 position: absolute; 5 }
6 width: 100%; 6
7 height: 100%; 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;
8 } 25 }
9 26
src/app/components/home/home.component.ts
Diff comments   View file @ 103858e
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 4
4 @Component({ 5 @Component({
5 selector: 'app-home', 6 selector: 'app-home',
6 templateUrl: './home.component.html', 7 templateUrl: './home.component.html',
7 styleUrls: ['./home.component.scss'] 8 styleUrls: ['./home.component.scss']
8 }) 9 })
9 export class HomeComponent implements OnInit { 10 export class HomeComponent implements OnInit {
10 11
12 private apiUrl: string = appSettings.apiUrl;
13
11 constructor(private router: Router) { } 14 constructor(private router: Router) { }
12 15
13 ngOnInit() { 16 ngOnInit() {
14 } 17 }
15 18
16 @HostListener('document:click', ['$event']) 19 @HostListener('document:click', ['$event'])
17 documentClick(event: MouseEvent) { 20 documentClick(event: MouseEvent) {
18 this.router.navigate(['/inicio']); 21 this.router.navigate(['/inicio']);
19 } 22 }
20 23
21 } 24 }
22 25
src/app/components/inicio/inicio.component.html
Diff comments   View file @ 103858e
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="productoAcargar && !productoEsPromo" 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="promoAcargar && productoEsPromo" 73 *ngIf="sinonimos.length > 0"
74 [popover]="popoverDirective" 74 [popover]="popoverDirective"
75 [popoverContent]="sinonimos" 75 [popoverContent]="sinonimos"
76 (sinonimoSeleccionado)="sinonimoSeleccionado($event)"
76 class="text-white rounded-sm border-0"> 77 class="text-white rounded-sm border-0">
77 </app-popover-sinonimos> 78 </app-popover-sinonimos>
78 </ng-template> 79 </ng-template>
79 <div 80 <div
80 placement="left" 81 placement="left"
81 triggers="" 82 triggers=""
82 [popover]="popTemplate" 83 [popover]="popTemplate"
83 class="w-100" 84 class="w-100"
84 #pop="bs-popover"> 85 #pop="bs-popover">
85 <div class="card bg-white border-0 shadow rounded mb-auto"> 86 <div class="card bg-white border-0 shadow rounded mb-auto">
86 <div class="card-body text-left px-4 py-3"> 87 <div class="card-body text-left px-4 py-3">
87 <div class="row"> 88 <div class="row">
88 <div class="col-6"> 89 <div class="col-6">
89 <p class="h3 card-title">Cargar Productos</p> 90 <p class="h3 card-title">Cargar Productos</p>
90 </div> 91 </div>
91 <div class="col-6 p-0"> 92 <div class="col-6 p-0">
92 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2"> 93 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2">
93 </div> 94 </div>
94 </div> 95 </div>
95 <p class="h5 card-text text-muted font-weight-light"> 96 <p class="h5 card-text text-muted font-weight-light">
96 Coloque el código de<br> 97 Coloque el código de<br>
97 barras o QR frente al scanner. 98 barras o QR frente al scanner.
98 </p> 99 </p>
99 </div> 100 </div>
100 <div class="row m-4"> 101 <div class="row m-4">
101 <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">
102 <!-- IMAGEN DE ESCANER --> 103 <!-- IMAGEN DE ESCANER -->
103 <img 104 <img
104 *ngIf="!productoAcargar" 105 *ngIf="!productoAcargar"
105 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"
106 src="{{apiUrl}}/imagenes/escanner.jpg"> 107 src="{{apiUrl}}/imagenes/escanner.jpg">
107 108
108 <!-- PRODUCTO A CARGAR --> 109 <!-- PRODUCTO A CARGAR -->
109 <div class="fade-in m-0" *ngIf="productoAcargar && !productoEsPromo"> 110 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar">
110 <img 111 <img
111 class="card-img-top d-block w-100 mx-auto rounded-sm" 112 class="card-img-top d-block w-100 mx-auto rounded-sm"
112 src="{{apiUrl}}/imagenes/testImg3.jpg"> 113 src="{{apiUrl}}/imagenes/testImg3.jpg">
113 114
114 <div class="row justify-content-between m-3"> 115 <div class="row justify-content-between m-3">
115 <div class="col-12 text-left px-1"> 116 <div class="col-12 text-left px-1">
116 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p> 117 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p>
117 </div> 118 </div>
118 <div class="col-12 text-right mt-2"> 119 <div class="col-12 text-right mt-2">
119 <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>
120 </div> 121 </div>
121 </div> 122 </div>
122 </div> 123 </div>
123 124
124 <!-- PROMO A CARGAR --> 125 <!-- PROMO A CARGAR -->
125 <div class="fade-in m-0" *ngIf="promoAcargar && productoEsPromo"> 126 <div class="fade-in m-0" *ngIf="promoAcargar">
126 <img 127 <img
127 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"
128 src="{{apiUrl}}/imagenes/testImg3.jpg"> 129 src="{{apiUrl}}/imagenes/testImg3.jpg">
129 130
130 <div class="row justify-content-between m-3"> 131 <div class="row justify-content-between m-3">
131 <div class="col-12 text-left px-1"> 132 <div class="col-12 text-left px-1">
132 <p class="h6 font-weight-bold mb-0">{{promoAcargar.nombrePromo}}</p> 133 <p class="h6 font-weight-bold mb-0">{{promoAcargar.nombrePromo}}</p>
133 </div> 134 </div>
134 <div class="col-12 text-right mt-2 align-self-end"> 135 <div class="col-12 text-right mt-2 align-self-end">
135 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p> 136 <p class="h5 font-weight-bold mb-0">{{promoAcargar.precioTotal | currency}}</p>
136 </div> 137 </div>
137 </div> 138 </div>
138 </div> 139 </div>
139 140
140 </div> 141 </div>
141 <!-- BOTONES DE CARGAR PRODUCTOS--> 142 <!-- BOTONES DE CARGAR PRODUCTOS-->
142 <div 143 <div
143 class="col-5 pr-0" 144 class="col-5 pr-0"
144 *ngIf="productoAcargar && tienePromo"> 145 *ngIf="promociones.length > 0">
145 <button 146 <button
146 *ngIf="productoEsPromo && promoAcargar.sinonimos" 147 *ngIf="sinonimos.length > 0"
147 type="button" 148 type="button"
148 class="btn btn-light btn-block shadow-sm" 149 class="btn btn-light btn-block shadow-sm"
149 (click)="pop.show()"> 150 (click)="pop.show()">
150 <span class="pr-2">Personalizar</span> 151 <span class="pr-2">Personalizar</span>
151 <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>
152 </button> 153 </button>
153 <button 154 <button
154 *ngIf="!productoEsPromo" 155 *ngIf="!promoAcargar"
155 type="button" 156 type="button"
156 class="btn btn-primary btn-block shadow-sm" 157 class="btn btn-primary btn-block shadow-sm"
157 (click)="pop.show()"> 158 (click)="pop.show()">
158 <span class="pr-2">Mostrar promociones</span> 159 <span class="pr-2">Mostrar promociones</span>
159 <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>
160 </button> 161 </button>
161 <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">
162 <span class="pr-2 font-weight-bold">Confirmar</span> 163 <span class="pr-2 font-weight-bold">Confirmar</span>
163 <i class="fa fa-check text-success" aria-hidden="true"></i> 164 <i class="fa fa-check text-success" aria-hidden="true"></i>
164 </button> 165 </button>
165 <button 166 <button
166 type="button" 167 type="button"
167 class="btn btn-light btn-block shadow-sm" 168 class="btn btn-light btn-block shadow-sm"
168 (click)="deshacerCarga()"> 169 (click)="deshacerCarga()">
169 <span class="pr-2">Deshacer</span> 170 <span class="pr-2">Deshacer</span>
170 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 171 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
171 </button> 172 </button>
172 </div> 173 </div>
173 </div> 174 </div>
174 </div> 175 </div>
175 </div> 176 </div>
176 177
177 <!-- BUSCAR PRODUCTOS --> 178 <!-- BUSCAR PRODUCTOS -->
178 <div (click)="goPage('busqueda-productos')" 179 <div (click)="goPage('busqueda-productos')"
179 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">
180 <div class="card-body text-left px-4 py-3"> 181 <div class="card-body text-left px-4 py-3">
181 <div class="row"> 182 <div class="row">
182 <div class="col-6"> 183 <div class="col-6">
183 <p class="h3 card-title">Buscar Productos</p> 184 <p class="h3 card-title">Buscar Productos</p>
184 <p class="h5 card-text text-muted font-weight-light"> 185 <p class="h5 card-text text-muted font-weight-light">
185 Busque aquí los productos<br> 186 Busque aquí los productos<br>
186 que no tienen código </p> 187 que no tienen código </p>
187 </div> 188 </div>
188 <div class="col-6 p-0"> 189 <div class="col-6 p-0">
189 <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">
190 </div> 191 </div>
191 </div> 192 </div>
192 193
193 </div> 194 </div>
194 </div> 195 </div>
195 196
196 </div> 197 </div>
197 198
198 </div> 199 </div>
199 200
200 </div> 201 </div>
201 </div> 202 </div>
202 203
src/app/components/inicio/inicio.component.scss
Diff comments   View file @ 103858e
1 .bs-example-popover .popover { 1 .bs-example-popover .popover {
2 position: relative; 2 position: relative;
3 display: block; 3 display: block;
4 float: left; 4 float: left;
5 background-color: #2872ae; 5 background-color: #2872ae;
6 } 6 }
7
8 .black-text {
9 color: black;
10 }
11 7
src/app/components/inicio/inicio.component.ts
Diff comments   View file @ 103858e
1 import { Component, OnInit, ViewChild } from '@angular/core'; 1 import { Component, OnInit, ViewChild } from '@angular/core';
2 import { PopoverDirective } from 'ngx-bootstrap'; 2 import { PopoverDirective } from 'ngx-bootstrap';
3 import { appSettings } from 'src/etc/AppSettings'; 3 import { appSettings } from 'src/etc/AppSettings';
4 import { Producto } from 'src/app/wrappers/producto'; 4 import { Producto } from 'src/app/wrappers/producto';
5 import { ProductoService } from 'src/app/services/producto.service'; 5 import { ProductoService } from 'src/app/services/producto.service';
6 import { Router } from '@angular/router'; 6 import { Router } from '@angular/router';
7 import { Promocion } from 'src/app/wrappers/promocion'; 7 import { Promocion } from 'src/app/wrappers/promocion';
8 import { Sinonimo } from 'src/app/wrappers/sinonimo'; 8 import { Sinonimo } from 'src/app/wrappers/sinonimo';
9 import { HostListener } from '@angular/core'; 9 import { HostListener } from '@angular/core';
10
11 @Component({ 10
12 selector: 'app-inicio', 11 @Component({
13 templateUrl: './inicio.component.html', 12 selector: 'app-inicio',
14 styleUrls: ['./inicio.component.scss'] 13 templateUrl: './inicio.component.html',
15 }) 14 styleUrls: ['./inicio.component.scss']
16 export class InicioComponent implements OnInit { 15 })
17 16 export class InicioComponent implements OnInit {
18 @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) { 17
19 this.busqueda += e.key; 18 @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) {
20 }; 19 this.busqueda += e.key;
21 20 };
22 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
23 private productoAcargar: Producto; 21
24 private promoAcargar: Promocion; 22 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
25 private tienePromo = false; 23 private productoAcargar: Producto;
26 private productoEsPromo = false; 24 private promoAcargar: Promocion;
27 private busqueda: string = ''; 25 private tienePromo = false;
28 26 private productoEsPromo = false;
29 promociones: Promocion[] = []; 27 private busqueda: string = '';
30 sinonimos: Sinonimo[] = []; 28 private sinonimoAcargar: Sinonimo;
31 apiUrl: string = appSettings.apiUrl 29
32 30 promociones: Promocion[] = [];
33 constructor( 31 sinonimos: Sinonimo[] = [];
34 private router: Router, 32 apiUrl: string = appSettings.apiUrl
33
34 constructor(
35 private router: Router,
36 private productoService: ProductoService) { }
35 private productoService: ProductoService) { } 37
36 38 ngOnInit() {
37 ngOnInit() { 39
38 40 this.vaciarBusqueda();
39 this.vaciarBusqueda(); 41
40 42 this.productoAcargar = this.productoService.productoAcargar;
41 this.productoAcargar = this.productoService.productoAcargar; 43 this.getPromociones();
42 if (this.productoAcargar) { 44 }
43 var sector = this.productoAcargar.CodSec; 45
44 var codigo = this.productoAcargar.CodArt; 46 getPromociones() {
45 this.productoService.getPromocion(sector, codigo) 47 if (this.productoAcargar) {
46 .subscribe((res: Promocion[]) => {
47 48 var sector = this.productoAcargar.CodSec;
48 if (res.length === 0) { 49 var codigo = this.productoAcargar.CodArt;
49 //Si no tiene promociones la cargará al carrito despues de un tiempo 50 this.productoService.getPromocion(sector, codigo)
50 setTimeout(() => { 51 .subscribe((res: Promocion[]) => {
51 this.productoService.productos.push(this.productoAcargar);
52 this.productoAcargar = undefined; 52
53 this.tienePromo = false; 53 if (res.length === 0) {
54 }, 2000) 54 //Si no tiene promociones la cargará al carrito despues de un tiempo
55 } else { 55 setTimeout(() => {
56 56 this.productoService.productos.push(this.productoAcargar);
57 this.promociones = res; 57 this.productoAcargar = undefined;
58 this.tienePromo = true; 58 }, 2000)
59 this.popoverDirective.show(); 59 } else {
60 } 60
61 }, error => { console.error(error); }) 61 this.promociones = res;
62 } 62 this.popoverDirective.show();
63 } 63 }
64 64 }, error => { console.error(error); })
65 showPopover() { 65 }
66 66 }
67 this.popoverDirective.show(); 67
68 } 68 showPopover() {
69 69
70 this.popoverDirective.show();
71 }
72
73 private goPage(pageUrl) {
74
75 this.router.navigate([pageUrl]);
76 }
70 private goPage(pageUrl) { 77
71
72 this.router.navigate([pageUrl]); 78 deshacerCarga() {
73 } 79
74 80 if (this.sinonimoAcargar || this.sinonimos.length > 0) {
75 deshacerCarga() { 81 this.sinonimos = [];
76 if (this.productoEsPromo) { 82 this.sinonimoAcargar = undefined;
77 this.promoAcargar = undefined; 83 this.popoverDirective.hide();
78 this.productoEsPromo = false; 84 }
79 this.popoverDirective.show(); 85
80 } else { 86 if (this.promoAcargar) {
81 this.productoAcargar = undefined; 87 this.promoAcargar = undefined;
82 this.tienePromo = false;
83 this.popoverDirective.hide(); 88 this.popoverDirective.show();
84 } 89 } else {
85 } 90 this.productoAcargar = undefined;
86 91 this.promociones = [];
87 promoSeleccionada($event: Promocion) { 92 this.popoverDirective.hide();
88 93 }
89 this.productoEsPromo = true; 94 }
90 this.promoAcargar = $event; 95
96 promoSeleccionada($event: Promocion) {
97
98 this.promoAcargar = $event;
99 this.popoverDirective.hide();
100 if (this.promoAcargar.sinonimos) {
101 var sector = this.promoAcargar.sector;
102 var codigo = this.promoAcargar.codigo;
103 this.productoService.getPromocionSinonimos(sector, codigo)
104 .subscribe((res: Sinonimo[]) => {
91 this.popoverDirective.hide(); 105 res.forEach(resSinonimo => {
92 if (this.promoAcargar.sinonimos) { 106 resSinonimo.productos.forEach(productoSinonimo => {
93 var sector = this.promoAcargar.sector; 107 this.promoAcargar.productos.forEach(productoPromo => {
94 var codigo = this.promoAcargar.codigo; 108 if (productoPromo.id === productoSinonimo.id) {
95 this.productoService.getPromocionSinonimos(sector, codigo) 109 productoSinonimo.esPadre = true;
96 .subscribe((res : Sinonimo[]) => { 110 }
111 });
112
113 })
114 })
115 this.sinonimos = res;
116 this.showPopover();
97 117 })
98 this.sinonimos = res; 118 }
99 this.showPopover(); 119 }
100 }) 120
101 } 121 vaciarBusqueda() {
102 } 122
103 123 setTimeout(() => {
104 vaciarBusqueda() { 124 this.busqueda = '';
105 125 }, 2000);
106 setTimeout(() => { 126 }
107 this.busqueda = ''; 127
108 }, 2000); 128 sinonimoSeleccionado($event: Sinonimo) {
109 } 129
src/app/components/popover-promos/popover-promos.component.html
Diff comments   View file @ 103858e
1 <div class="card-body fade-left"> 1 <div class="card-body fade-left">
2 <div class="row"> 2 <div class="row">
3 <div class="col text-left"> 3 <div class="col text-left">
4 <p class="h5 card-title"> 4 <p class="h5 card-title">
5 Este producto forma parte<br> 5 Este producto forma parte<br>
6 de Combos y Promociones 6 de Combos y Promociones
7 </p> 7 </p>
8 </div> 8 </div>
9 </div> 9 </div>
10 10
11 <div class="overflow-scroll popover-size pr-2"> 11 <div class="overflow-scroll popover-size pr-2">
12 <div 12 <div
13 class="row my-2" 13 class="row my-2"
14 *ngFor="let promo of popoverContent"> 14 *ngFor="let promo of popoverContent">
15 <div class="col text-dark"> 15 <div class="col text-dark">
16 <div 16 <div
17 class="bg-white card-effect rounded-sm p-2 px-3" 17 class="bg-white card-effect rounded-sm p-2 px-3"
18 (click)="seleccionarPromo(promo)"> 18 (click)="seleccionarPromo(promo)">
19 <div class="row justify-content-between"> 19 <div class="row justify-content-between">
20 <div class="col-12 text-left"> 20 <div class="col-12 text-left">
21 <p class="h5 mb-0"> 21 <p class="h5 mb-0">
22 <small class="font-weight-bold">{{promo.nombrePromo}}</small> 22 <small class="font-weight-bold">{{promo.nombrePromo}}</small>
23 </p> 23 </p>
24 </div> 24 </div>
25 <div class="col-12 text-right mt-2"> 25 <div class="col-12 text-right mt-2">
26 <p class="h4 font-weight-bold mb-0"> 26 <p class="h4 font-weight-bold mb-0">
27 {{calcularPrecioDePromo(promo.productos) | currency}} 27 {{calcularPrecioDePromo(promo) | currency}}
28 </p> 28 </p>
29 </div> 29 </div>
30 </div> 30 </div>
31 </div> 31 </div>
32 </div> 32 </div>
33 </div> 33 </div>
34 </div> 34 </div>
35 35
36 <div class="row mt-3 justify-content-end"> 36 <div class="row mt-3 justify-content-end">
37 <div class="col-auto"> 37 <div class="col-auto">
38 <button 38 <button
39 type="button" 39 type="button"
40 class="btn btn-sm btn-light shadow" 40 class="btn btn-sm btn-light shadow"
41 (click)="hide()"> 41 (click)="hide()">
42 <span class="pr-2">No, gracias</span> 42 <span class="pr-2">No, gracias</span>
43 <i class="fa fa-times text-danger" aria-hidden="true"></i> 43 <i class="fa fa-times text-danger" aria-hidden="true"></i>
44 </button> 44 </button>
45 </div> 45 </div>
46 </div> 46 </div>
47 47
48 </div> 48 </div>
49 49
src/app/components/popover-promos/popover-promos.component.ts
Diff comments   View file @ 103858e
1 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; 1 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
2 import { PopoverDirective } from 'ngx-bootstrap/popover'; 2 import { PopoverDirective } from 'ngx-bootstrap/popover';
3 import { Promocion } from 'src/app/wrappers/promocion'; 3 import { Promocion } from 'src/app/wrappers/promocion';
4 import { Producto } from 'src/app/wrappers/producto'; 4 import { Producto } from 'src/app/wrappers/producto';
5 5
6 @Component({ 6 @Component({
7 selector: 'app-popover-promos', 7 selector: 'app-popover-promos',
8 templateUrl: './popover-promos.component.html', 8 templateUrl: './popover-promos.component.html',
9 styleUrls: ['./popover-promos.component.scss'] 9 styleUrls: ['./popover-promos.component.scss']
10 }) 10 })
11 export class PopoverPromosComponent implements OnInit { 11 export class PopoverPromosComponent implements OnInit {
12 12
13 @Input() popover: PopoverDirective; 13 @Input() popover: PopoverDirective;
14 @Input() popoverContent: Promocion[]; 14 @Input() popoverContent: Promocion[];
15 @Output() promoSeleccionada = new EventEmitter<Promocion>(); 15 @Output() promoSeleccionada = new EventEmitter<Promocion>();
16 16
17 constructor() { } 17 constructor() { }
18 18
19 ngOnInit() { 19 ngOnInit() {
20 } 20 }
21 21
22 hide() { 22 hide() {
23 this.popover.hide(); 23 this.popover.hide();
24 } 24 }
25 25
26 seleccionarPromo(promo: Promocion) { 26 seleccionarPromo(promo: Promocion) {
27 27
28 this.promoSeleccionada.emit(promo); 28 this.promoSeleccionada.emit(promo);
29 } 29 }
30 30
31 calcularPrecioDePromo(productos: Producto[]) { 31 calcularPrecioDePromo(promo: Promocion) {
32 32
33 var precio = 0; 33 promo.precioTotal = 0;
34 productos.forEach(producto => { 34 promo.productos.forEach(producto => {
35 precio += producto.PreVen; 35 promo.precioTotal += producto.PreVen;
36 }) 36 })
37 37 return promo.precioTotal;
38 return precio;
39 } 38 }
40 39
41 } 40 }
42 41
src/app/components/popover-sinonimos/popover-sinonimos.component.html
Diff comments   View file @ 103858e
1 <div class="card-body fade-left"> 1 <div class="card-body fade-left">
2 2
3 <div class="row m-0"> 3 <div class="row m-0">
4 <div class="col text-left"> 4 <div class="col text-left">
5 <p class="h4 card-title"> 5 <p class="h4 card-title">
6 Personalice su pedido 6 Personalice su pedido
7 </p> 7 </p>
8 </div> 8 </div>
9 </div> 9 </div>
10 10
11 <div class="row m-0">
12 <div class="col text-left">
13 <p class="h5 card-title">
14 Elija una opción
15 </p>
16 </div>
17 </div>
18
19 <div class="row m-0 overflow-scroll popover-size pr-2 my-2"> 11 <div class="row m-0 overflow-scroll popover-size pr-2 my-2">
20 <div class="col"> 12 <div class="col">
21 <div class="row" *ngFor="let sinonimo of popoverContent"> 13 <div class="row mb-2" *ngFor="let sinonimo of popoverContent">
22 <div class="col pl-4 h6"> 14 <div class="col">
23 <div class="custom-control custom-radio"> 15
24 <input 16 <div class="row m-0">
25 type="radio" 17 <div class="col text-left">
26 id="{{sinonimo.CodArt}}" 18 <p class="h5 card-title">
27 name="sinonimoOpciones" 19 Elija una opción
28 class="custom-control-input" 20 </p>
29 (click)="setSinonimo(sinonimo)"> 21 </div>
30 <label
31 class="font-weight-normal custom-control-label"
32 for="{{sinonimo.CodArt}}">
33 {{sinonimo.DetArt}}
34 </label>
35 </div> 22 </div>
23
24 <div class="row my-3 d-flex justify-content-between" *ngFor="let producto of sinonimo.productos">
25 <div class="col-8 pl-4 h6 m-0">
26 <div class="custom-control custom-radio">
27 <input
28 type="radio"
29 [id]="producto.id"
30 [checked]="producto.esPadre"
31 name="sinonimoOpciones"
32 class="custom-control-input"
33 (click)="setSinonimo(sinonimo)">
34 <label class="font-weight-normal custom-control-label" [for]="producto.id">
35 {{producto.DetArt}}
36 </label>
37 </div>
38 </div>
39 <div class="col-auto">
40 <div class="btn-group-sm btn-group float-left my-auto" role="group">
41 <button type="button" class="btn btn-light btn-sm my-auto border">
42 <i class="fa fa-plus" aria-hidden="true"></i>
43 </button>
44 <div class="bg-white border border-white px-3 my-auto text-dark h5">
45 <small>{{producto.cantidad}}</small>
46 </div>
47 <button type="button" class="btn btn-light btn-sm my-auto border">
48 <i class="fa fa-minus" aria-hidden="true"></i>
49 </button>
50 </div>
51 </div>
52 </div>
53
36 </div> 54 </div>
37 </div> 55 </div>
src/app/components/popover-sinonimos/popover-sinonimos.component.ts
Diff comments   View file @ 103858e
1 import { Component, OnInit, Input } from '@angular/core'; 1 import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
2 import { PopoverDirective } from 'ngx-bootstrap'; 2 import { PopoverDirective } from 'ngx-bootstrap';
3 import { Producto } from 'src/app/wrappers/producto';
3 import { Sinonimo } from 'src/app/wrappers/sinonimo'; 4 import { Sinonimo } from 'src/app/wrappers/sinonimo';
4 5
5 @Component({ 6 @Component({
6 selector: 'app-popover-sinonimos', 7 selector: 'app-popover-sinonimos',
7 templateUrl: './popover-sinonimos.component.html', 8 templateUrl: './popover-sinonimos.component.html',
8 styleUrls: ['./popover-sinonimos.component.scss'] 9 styleUrls: ['./popover-sinonimos.component.scss']
9 }) 10 })
10 export class PopoverSinonimosComponent implements OnInit { 11 export class PopoverSinonimosComponent implements OnInit {
11 12
12 //Directiva del popover, para poder cerrarlo desde este componente 13 //Directiva del popover, para poder cerrarlo desde este componente
13 @Input() popover: PopoverDirective; 14 @Input() popover: PopoverDirective;
14 @Input() popoverContent: Sinonimo[]; 15 @Input() popoverContent: Sinonimo[];
15 sinonimoAelegir: Sinonimo; 16 @Output() sinonimoSeleccionado = new EventEmitter<Sinonimo>();
17 sinonimo: Sinonimo;
16 18
17 constructor() { } 19 constructor() { }
18 20
19 ngOnInit() { 21 ngOnInit() {
22
23 //Seteo en la variable a emitir el sinonimo que sea padre
24 this.popoverContent.forEach(sinonimo => {
25 // this.sinonimo = sinonimo.esPadre ? sinonimo : undefined;
26 })
20 } 27 }
21 28
22 hidePopover() { 29 hidePopover() {
23 30
31 this.sinonimoSeleccionado.emit(this.sinonimo);
24 this.popover.hide(); 32 this.popover.hide();
25 } 33 }
26 34
27 setSinonimo(sinonimo: Sinonimo) { 35 setSinonimo(sinonimo: Sinonimo) {
28 36
29 this.sinonimoAelegir = sinonimo; 37 this.sinonimo = sinonimo;
30 } 38 }
31 39
32 } 40 }
33 41
src/app/wrappers/producto.ts
Diff comments   View file @ 103858e
1 export interface Producto { 1 export interface Producto {
2 CodSec: number; 2 CodSec: number;
3 CodArt: number; 3 CodArt: number;
4 DetArt: string; 4 DetArt: string;
5 CodRub: number; 5 CodRub: number;
6 Costo: number; 6 Costo: number;
7 PreNet: number; 7 PreNet: number;
8 ImpInt: number; 8 ImpInt: number;
9 UniVen: number; 9 UniVen: number;
10 FecCos: Date; 10 FecCos: Date;
11 UltAct: Date; 11 UltAct: Date;
12 CodPro: number; 12 CodPro: number;
13 ExiDep: number; 13 ExiDep: number;
14 ExiVta: number; 14 ExiVta: number;
15 MinDep: number; 15 MinDep: number;
16 MaxDep: number; 16 MaxDep: number;
17 MinPVE: number; 17 MinPVE: number;
18 MaxPVE: number; 18 MaxPVE: number;
19 ENTTur: number; 19 ENTTur: number;
20 SINTur: number; 20 SINTur: number;
21 SALTur: number; 21 SALTur: number;
22 IvaSN: boolean; 22 IvaSN: boolean;
23 DepSN: boolean; 23 DepSN: boolean;
24 RubMay: number; 24 RubMay: number;
25 PreVen: number; 25 PreVen: number;
26 IvaCO: number; 26 IvaCO: number;
27 TIP: string; 27 TIP: string;
28 IMPIVA: number; 28 IMPIVA: number;
29 ENTADM: number; 29 ENTADM: number;
30 SALADM: number; 30 SALADM: number;
31 CODIIN: number; 31 CODIIN: number;
32 PRO: boolean; 32 PRO: boolean;
33 FPP: boolean; 33 FPP: boolean;
34 ESS: boolean; 34 ESS: boolean;
35 FID: Date; 35 FID: Date;
36 NID: number; 36 NID: number;
37 FIV: Date; 37 FIV: Date;
38 NIV: number; 38 NIV: number;
39 COO: string; 39 COO: string;
40 CAG: string; 40 CAG: string;
41 CAP: number; 41 CAP: number;
42 UTL: number; 42 UTL: number;
43 NHA: boolean; 43 NHA: boolean;
44 PID: boolean; 44 PID: boolean;
45 PRV: number; 45 PRV: number;
46 PRD: number; 46 PRD: number;
47 ImpInt2: number; 47 ImpInt2: number;
48 E_HD: string; 48 E_HD: string;
49 C_HD: string; 49 C_HD: string;
50 CLA: number; 50 CLA: number;
51 UNICAP: number; 51 UNICAP: number;
52 ELBPRO: string; 52 ELBPRO: string;
53 PPP: number; 53 PPP: number;
54 ALI: number; 54 ALI: number;
55 BAL_TIPO: string; 55 BAL_TIPO: string;
56 PER_MAY: boolean; 56 PER_MAY: boolean;
57 ES_MAY: boolean; 57 ES_MAY: boolean;
58 CLA_MAY: number; 58 CLA_MAY: number;
59 PME_CMP: string; 59 PME_CMP: string;
60 USA_BAL: boolean; 60 USA_BAL: boolean;
61 DET_LAR: string; 61 DET_LAR: string;
62 ROTULO: string; 62 ROTULO: string;
63 REC_MANUAL: boolean; 63 REC_MANUAL: boolean;
64 E_HD1: string; 64 E_HD1: string;
65 C_HD1: string; 65 C_HD1: string;
66 ImpInt3: number; 66 ImpInt3: number;
67 FUA_MAE_YPF: Date; 67 FUA_MAE_YPF: Date;
68 CPQ: number; 68 CPQ: number;
69 EPQ: string; 69 EPQ: string;
70 BPQ: number; 70 BPQ: number;
71 PUPQ: number; 71 PUPQ: number;
72 CORVTO: boolean; 72 CORVTO: boolean;
73 CORVTO_COSTO: number; 73 CORVTO_COSTO: number;
74 UTLFR: number; 74 UTLFR: number;
75 FAMILIA: number; 75 FAMILIA: number;
76 ES_LUB: boolean; 76 ES_LUB: boolean;
77 ES_FERT: boolean; 77 ES_FERT: boolean;
78 AutoFac: boolean; 78 AutoFac: boolean;
79 LitrosPCD: number; 79 LitrosPCD: number;
80 LisPCD: number; 80 LisPCD: number;
81 ImpLey23966: boolean; 81 ImpLey23966: boolean;
82 es_bio: boolean; 82 es_bio: boolean;
83 ExpArbaRev: boolean; 83 ExpArbaRev: boolean;
84 ES_AGROQ: boolean; 84 ES_AGROQ: boolean;
85 ES_PLAST: boolean; 85 ES_PLAST: boolean;
86 es_bio_por: string; 86 es_bio_por: string;
87 IMP_IMP_INT: boolean; 87 IMP_IMP_INT: boolean;
88 id: number; 88 id: number;
89 nombreImagen?: any; 89 nombreImagen?: any;
90 categoria_selfservice: number; 90 categoria_selfservice: number;
91 cantidad?: number; 91 cantidad?: number;
92 showCargarProducto?: boolean; 92 showCargarProducto?: boolean;
93 esPadre?: boolean;
93 } 94 }
94 95
src/app/wrappers/promocion.ts
Diff comments   View file @ 103858e
1 import { Producto } from './producto'; 1 import { Producto } from './producto';
2 2
3 export interface Promocion { 3 export interface Promocion {
4 idPromo: number; 4 idPromo: number;
5 nombrePromo: string; 5 nombrePromo: string;
6 productos: Producto[]; 6 productos: Producto[];
7 sinonimos: boolean; 7 sinonimos: boolean;
8 sector: number, 8 sector: number,
9 codigo: number, 9 codigo: number,
10 precioTotal? : number,
10 } 11 }
11 12
src/app/wrappers/sinonimo.ts
Diff comments   View file @ 103858e
1 import { Producto } from './producto';
2
1 export interface Sinonimo { 3 export interface Sinonimo {
2 EMP: number; 4
3 ID_SIN: number; 5 ID_SIN: number,
4 SEC: number; 6 descripcion: string,
5 COD: string; 7 productos: Producto[],
6 DET: string;
7 E_HD: string[];
8 C_HD: string[];
9 CodSec: number;
10 CodArt: number;
11 DetArt: string;
12 CodRub: number;
13 Costo: number;
14 PreNet: number;
15 ImpInt: number;
16 UniVen: number;
17 FecCos: Date;
18 UltAct: Date;
19 CodPro: number;
20 ExiDep: number;
21 ExiVta: number;
22 MinDep: number;
23 MaxDep: number;
24 MinPVE: number;
25 MaxPVE: number;
26 ENTTur: number;
27 SINTur: number;
28 SALTur: number;
29 IvaSN: boolean;
30 DepSN: boolean;
31 RubMay: number;
32 PreVen: number;
33 IvaCO: number;
34 TIP: string;
35 IMPIVA: number;
36 ENTADM: number;
37 SALADM: number;
38 CODIIN: number;
39 PRO: boolean;
40 FPP: boolean;
41 ESS: boolean;
42 FID: Date;
43 NID: number;
44 FIV: Date;
45 NIV: number;
46 COO: string;
47 CAG: string;
48 CAP: number;
49 UTL: number;
50 NHA: boolean;
51 PID: boolean;
52 PRV: number;
53 PRD: number;
54 ImpInt2: number;
55 CLA: number;
56 UNICAP: number;
57 ELBPRO: string;
58 PPP: number;
59 ALI: number;
60 BAL_TIPO: string;
61 PER_MAY: boolean;
62 ES_MAY: boolean;
63 CLA_MAY: number;
64 PME_CMP: string;
65 USA_BAL: boolean;
66 DET_LAR: string;
67 ROTULO: string;
68 REC_MANUAL: boolean;
69 E_HD1: string;
70 C_HD1: string;
71 ImpInt3: number;
72 FUA_MAE_YPF: Date;
73 CPQ: number;
74 EPQ: string;
75 BPQ: number;
76 PUPQ: number;
77 CORVTO: boolean;
78 CORVTO_COSTO: number;
79 UTLFR: number;
80 FAMILIA: number;
81 ES_LUB: boolean;
82 ES_FERT: boolean;
83 AutoFac: boolean;
84 LitrosPCD: number;
85 LisPCD: number;
86 id: number;
87 ImpLey23966: boolean;
88 es_bio: boolean;
89 ExpArbaRev: boolean;
90 ES_AGROQ: boolean;
91 ES_PLAST: boolean;
92 es_bio_por: string;
93 ID_MARCA: number;
94 ID_ATRB1: number;
95 ID_ATRB2: number;
96 ID_ART_REF: number;
97 ILPC: boolean;
98 CantAgrupar: number;
99 E_HD2: string;
100 PPV: number;
101 PPD: number;
102 MOD_DET: boolean;
103 C_HD2: string;
104 nombreImagen?: any;
105 IMP_IMP_INT: boolean;
src/assets/scss/animation.scss
Diff comments   View file @ 103858e
1 .fade-in { 1 .fade-in {
2 margin-top: 25px; 2 margin-top: 25px;
3 font-size: 21px; 3 font-size: 21px;
4 text-align: center; 4 text-align: center;
5 animation: fadein 1s; 5 animation: fadein 1s;
6 -moz-animation: fadein 1s; /* Firefox */ 6 -moz-animation: fadein 1s; /* Firefox */
7 -webkit-animation: fadein 1s; /* Safari and Chrome */ 7 -webkit-animation: fadein 1s; /* Safari and Chrome */
8 -o-animation: fadein 1s; /* Opera */ 8 -o-animation: fadein 1s; /* Opera */
9 } 9 }
10 10
11 @keyframes fadein { 11 @keyframes fadein {
12 from { 12 from {
13 opacity: 0; 13 opacity: 0;
14 } 14 }
15 to { 15 to {
16 opacity: 1; 16 opacity: 1;
17 } 17 }
18 } 18 }
19 19
20 @-moz-keyframes fadein { 20 @-moz-keyframes fadein {
21 /* Firefox */ 21 /* Firefox */
22 from { 22 from {
23 opacity: 0; 23 opacity: 0;
24 } 24 }
25 to { 25 to {
26 opacity: 1; 26 opacity: 1;
27 } 27 }
28 } 28 }
29 29
30 @-webkit-keyframes fadein { 30 @-webkit-keyframes fadein {
31 /* Safari and Chrome */ 31 /* Safari and Chrome */
32 from { 32 from {
33 opacity: 0; 33 opacity: 0;
34 } 34 }
35 to { 35 to {
36 opacity: 1; 36 opacity: 1;
37 } 37 }
38 } 38 }
39 39
40 .fade-right { 40 .fade-right {
41 margin-top: 25px; 41 margin-top: 25px;
42 font-size: 21px; 42 font-size: 21px;
43 text-align: center; 43 text-align: center;
44 animation: faderight 1s; 44 animation: faderight 1s;
45 -moz-animation: faderight 1s; /* Firefox */ 45 -moz-animation: faderight 1s; /* Firefox */
46 -webkit-animation: faderight 1s; /* Safari and Chrome */ 46 -webkit-animation: faderight 1s; /* Safari and Chrome */
47 -o-animation: faderight 1s; /* Opera */ 47 -o-animation: faderight 1s; /* Opera */
48 } 48 }
49 49
50 @keyframes faderight { 50 @keyframes faderight {
51 from { 51 from {
52 opacity: 0; 52 opacity: 0;
53 transform: translateX(-20px); 53 transform: translateX(-20px);
54 } 54 }
55 to { 55 to {
56 opacity: 1; 56 opacity: 1;
57 transform: translateX(0); 57 transform: translateX(0);
58 } 58 }
59 } 59 }
60 60
61 @-moz-keyframes faderight { 61 @-moz-keyframes faderight {
62 /* Firefox */ 62 /* Firefox */
63 from { 63 from {
64 opacity: 0; 64 opacity: 0;
65 -moz-transform: translateX(-20px); 65 -moz-transform: translateX(-20px);
66 } 66 }
67 to { 67 to {
68 opacity: 1; 68 opacity: 1;
69 -moz-transform: translateX(0); 69 -moz-transform: translateX(0);
70 } 70 }
71 } 71 }
72 72
73 @-webkit-keyframes faderight { 73 @-webkit-keyframes faderight {
74 /* Safari and Chrome */ 74 /* Safari and Chrome */
75 from { 75 from {
76 opacity: 0; 76 opacity: 0;
77 -webkit-transform: translateX(-20px); 77 -webkit-transform: translateX(-20px);
78 } 78 }
79 to { 79 to {
80 opacity: 1; 80 opacity: 1;
81 -webkit-transform: translateX(0); 81 -webkit-transform: translateX(0);
82 } 82 }
83 } 83 }
84 84
85 .fade-left { 85 .fade-left {
86 86 -webkit-animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
87 -webkit-animation: fadeleft .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;
88 animation: fadeleft .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
89 } 88 }
90 89
91 @-webkit-keyframes fadeleft { 90 @-webkit-keyframes fadeleft {
92 0% { 91 0% {
93 -webkit-transform: scaleX(0); 92 -webkit-transform: scaleX(0);
94 transform: scaleX(0); 93 transform: scaleX(0);
95 -webkit-transform-origin: 100% 100%; 94 -webkit-transform-origin: 100% 100%;
96 transform-origin: 100% 100%; 95 transform-origin: 100% 100%;
97 opacity: 1; 96 opacity: 1;
98 } 97 }
99 100% { 98 100% {
100 -webkit-transform: scaleX(1); 99 -webkit-transform: scaleX(1);
101 transform: scaleX(1); 100 transform: scaleX(1);
102 -webkit-transform-origin: 100% 100%; 101 -webkit-transform-origin: 100% 100%;
103 transform-origin: 100% 100%; 102 transform-origin: 100% 100%;
104 opacity: 1; 103 opacity: 1;
105 } 104 }
106 } 105 }
107 106
108 @keyframes fadeleft { 107 @keyframes fadeleft {
109 0% { 108 0% {
110 -webkit-transform: scaleX(0); 109 -webkit-transform: scaleX(0);
111 transform: scaleX(0); 110 transform: scaleX(0);
112 -webkit-transform-origin: 100% 100%; 111 -webkit-transform-origin: 100% 100%;
113 transform-origin: 100% 100%; 112 transform-origin: 100% 100%;
114 opacity: 1; 113 opacity: 1;
115 } 114 }
116 100% { 115 100% {
117 -webkit-transform: scaleX(1); 116 -webkit-transform: scaleX(1);
118 transform: scaleX(1); 117 transform: scaleX(1);
119 -webkit-transform-origin: 100% 100%; 118 -webkit-transform-origin: 100% 100%;
120 transform-origin: 100% 100%; 119 transform-origin: 100% 100%;
121 opacity: 1; 120 opacity: 1;
122 } 121 }
123 } 122 }
123
124 .fade-bottom {
125 -webkit-animation: fade-top 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;
127 }
128
129 @-webkit-keyframes fade-top {
130 0% {
131 -webkit-transform: scaleY(0.4);
132 transform: scaleY(0.4);
133 -webkit-transform-origin: 100% 0%;
134 transform-origin: 100% 0%;
135 }
136 100% {
137 -webkit-transform: scaleY(1);
138 transform: scaleY(1);
139 -webkit-transform-origin: 100% 0%;
140 transform-origin: 100% 0%;
141 }
142 }
143
144 @keyframes fade-top {
145 0% {
146 -webkit-transform: scaleY(0.4);
147 transform: scaleY(0.4);
148 -webkit-transform-origin: 100% 0%;
149 transform-origin: 100% 0%;
150 }
151 100% {
152 -webkit-transform: scaleY(1);
153 transform: scaleY(1);
154 -webkit-transform-origin: 100% 0%;
155 transform-origin: 100% 0%;
156 }
157 }
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: 0.5em;
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 rgba(255, 0, 0, 0.9); 70 box-shadow: inset 0 0 8px $primary;
71 -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9); 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 {
88 background: linear-gradient(90deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
89 }
90
87 .icon-dim { 91 .icon-dim {
88 height: 40px !important; 92 height: 40px !important;
89 width: auto !important; 93 width: auto !important;
90 background-color: white !important; 94 background-color: white !important;
91 } 95 }
92 96
93 .text-purple { 97 .text-purple {
94 color: $purple; 98 color: $purple;
95 } 99 }
96 100
97 .vh-70 { 101 .vh-70 {
98 min-height: auto !important; 102 min-height: auto !important;
99 max-height: 70vh !important; 103 max-height: 70vh !important;
100 } 104 }
101 105
102 .vh-60 { 106 .vh-60 {
103 min-height: auto !important; 107 min-height: auto !important;
104 max-height: 60vh !important; 108 max-height: 60vh !important;
105 } 109 }
106 110
107 .spinner-lg { 111 .spinner-lg {
108 width: 3rem !important; 112 width: 3rem !important;
109 height: 3rem !important; 113 height: 3rem !important;
110 } 114 }
111 115
112 .sidebar { 116 .sidebar {
113 right: 0; 117 right: 0;
114 } 118 }
115 119