Commit e3899772c182228c834d87e6fca33fdb5007f851
Exists in
master
and in
1 other branch
Merge branch 'master' into 'master'
Master(mpuebla) See merge request !24
Showing
23 changed files
Show diff stats
src/app/app.module.ts
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'; | 15 | import { CarouselComponent } from './components/carousel/carousel.component'; |
16 | import { HomeComponent } from './components/home/home.component'; | 16 | import { HomeComponent } from './components/home/home.component'; |
17 | import { InicioComponent } from './components/inicio/inicio.component'; | 17 | import { InicioComponent } from './components/inicio/inicio.component'; |
18 | import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; | 18 | import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; |
19 | import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component'; | 19 | import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component'; |
20 | import { MasterComponent } from './components/master/master.component'; | 20 | import { MasterComponent } from './components/master/master.component'; |
21 | import { PopoverComponent } from './components/popover/popover.component'; | 21 | import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component'; |
22 | import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component'; | ||
22 | import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component'; | 23 | import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component'; |
23 | //#endregion | 24 | //#endregion |
24 | 25 | ||
25 | @NgModule({ | 26 | @NgModule({ |
26 | declarations: [ | 27 | declarations: [ |
27 | AppComponent, | 28 | AppComponent, |
28 | HeaderComponent, | 29 | HeaderComponent, |
29 | SidebarComponent, | 30 | SidebarComponent, |
30 | CarouselComponent, | 31 | CarouselComponent, |
31 | HomeComponent, | 32 | HomeComponent, |
32 | InicioComponent, | 33 | InicioComponent, |
33 | BusquedaProductosComponent, | 34 | BusquedaProductosComponent, |
34 | ConfirmacionCarritoComponent, | 35 | ConfirmacionCarritoComponent, |
35 | MasterComponent, | 36 | MasterComponent, |
36 | PopoverComponent, | 37 | PopoverPromosComponent, |
38 | PopoverSinonimosComponent, | ||
37 | AmbImagenesComponent | 39 | AmbImagenesComponent |
38 | ], | 40 | ], |
39 | imports: [ | 41 | imports: [ |
40 | BrowserModule, | 42 | BrowserModule, |
41 | AppRoutingModule, | 43 | AppRoutingModule, |
42 | HttpClientModule, | 44 | HttpClientModule, |
43 | FormsModule, | 45 | FormsModule, |
44 | ReactiveFormsModule, | 46 | ReactiveFormsModule, |
45 | ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }), | 47 | ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }), |
46 | TooltipModule.forRoot(), | 48 | TooltipModule.forRoot(), |
47 | PopoverModule.forRoot() | 49 | PopoverModule.forRoot() |
48 | ], | 50 | ], |
49 | providers: [], | 51 | providers: [], |
50 | bootstrap: [AppComponent] | 52 | bootstrap: [AppComponent] |
51 | }) | 53 | }) |
52 | export class AppModule { } | 54 | export class AppModule { } |
53 | 55 |
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-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 | [ngClass]="{active: categoria == 1}" | 23 | [ngClass]="{active: categoria == 1}" |
24 | (click)="categoria = 1" | 24 | (click)="categoria = 1" |
25 | class="list-group-item list-group-item-action text-center my-1 p-2 h6"> | 25 | class="list-group-item list-group-item-action text-center my-1 p-2 h6"> |
26 | Combos y Promociones | 26 | Combos y Promociones |
27 | </li> | 27 | </li> |
28 | <li | 28 | <li |
29 | [ngClass]="{active: categoria == 2}" | 29 | [ngClass]="{active: categoria == 2}" |
30 | (click)="categoria = 2" | 30 | (click)="categoria = 2" |
31 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> | 31 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> |
32 | Todos | 32 | Todos |
33 | </li> | 33 | </li> |
34 | <li | 34 | <li |
35 | [ngClass]="{active: categoria == 3}" | 35 | [ngClass]="{active: categoria == 3}" |
36 | (click)="categoria = 3" | 36 | (click)="categoria = 3" |
37 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> | 37 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> |
38 | Bebidas | 38 | Bebidas |
39 | </li> | 39 | </li> |
40 | <li | 40 | <li |
41 | [ngClass]="{active: categoria == 4}" | 41 | [ngClass]="{active: categoria == 4}" |
42 | (click)="categoria = 4" | 42 | (click)="categoria = 4" |
43 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> | 43 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> |
44 | Sandwichería | 44 | Sandwichería |
45 | </li> | 45 | </li> |
46 | <li | 46 | <li |
47 | [ngClass]="{active: categoria == 5}" | 47 | [ngClass]="{active: categoria == 5}" |
48 | (click)="categoria = 5" | 48 | (click)="categoria = 5" |
49 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> | 49 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> |
50 | Panaderia | 50 | Panaderia |
51 | </li> | 51 | </li> |
52 | <li | 52 | <li |
53 | [ngClass]="{active: categoria == 6}" | 53 | [ngClass]="{active: categoria == 6}" |
54 | (click)="categoria = 6" | 54 | (click)="categoria = 6" |
55 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> | 55 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> |
56 | Golosinas | 56 | Golosinas |
57 | </li> | 57 | </li> |
58 | <li | 58 | <li |
59 | [ngClass]="{active: categoria == 7}" | 59 | [ngClass]="{active: categoria == 7}" |
60 | (click)="categoria = 7" | 60 | (click)="categoria = 7" |
61 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> | 61 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> |
62 | Tabaqueria | 62 | Tabaqueria |
63 | </li> | 63 | </li> |
64 | </ul> | 64 | </ul> |
65 | </div> | 65 | </div> |
66 | 66 | ||
67 | <!-- SEARCH INPUT --> | 67 | <!-- SEARCH INPUT --> |
68 | <div *ngIf="productos.length > 0" class="fade-in col-sm-10"> | 68 | <div *ngIf="productos.length > 0" class="fade-in col-sm-10"> |
69 | 69 | ||
70 | <div class="form-group row search"> | 70 | <div class="form-group row search"> |
71 | <div class="col-sm-10"> | 71 | <div class="col-sm-10"> |
72 | <span class="fa fa-search form-control-lg form-control-search pl-3"></span> | 72 | <span class="fa fa-search form-control-lg form-control-search pl-3"></span> |
73 | <input | 73 | <input |
74 | type="text" | 74 | type="text" |
75 | class="form-control form-control-lg shadow-sm rounded-pill px-5" | 75 | class="form-control form-control-lg shadow-sm rounded-pill px-5" |
76 | placeholder="Búsqueda productos" | 76 | placeholder="Búsqueda productos" |
77 | [(ngModel)]="searchTerm" | 77 | [(ngModel)]="searchTerm" |
78 | (ngModelChange)="filterItems()"> | 78 | (ngModelChange)="filterItems()"> |
79 | </div> | 79 | </div> |
80 | <!-- BOTON VOLVER --> | 80 | <!-- BOTON VOLVER --> |
81 | <div class="col-sm-2"> | 81 | <div class="col-sm-2"> |
82 | <button | 82 | <button |
83 | type="button" | 83 | type="button" |
84 | class="btn btn-light btn-lg shadow-sm" | 84 | class="btn btn-light btn-lg shadow-sm" |
85 | [routerLink]="['/inicio']"> | 85 | [routerLink]="['/inicio']"> |
86 | <span class="font-weight-normal h6 pr-2">Volver</span> | 86 | <span class="font-weight-normal h6 pr-2">Volver</span> |
87 | <i class="fa fa-undo text-warning" aria-hidden="true"></i> | 87 | <i class="fa fa-undo text-warning" aria-hidden="true"></i> |
88 | </button> | 88 | </button> |
89 | </div> | 89 | </div> |
90 | </div> | 90 | </div> |
91 | <!-- LISTA DE PRODUCTOS --> | 91 | <!-- LISTA DE PRODUCTOS --> |
92 | <div class="row align-items-start vh-60 overflow-scroll disable-user-select"> | 92 | <div class="row align-items-start vh-60 overflow-scroll disable-user-select"> |
93 | <div | 93 | <div |
94 | class="col-4 p-2" | 94 | class="col-4 p-2" |
95 | *ngFor="let producto of auxProductos"> | 95 | *ngFor="let producto of auxProductos"> |
96 | <div | 96 | <div |
97 | class="card-effect bg-white rounded-sm shadow border-0" | 97 | class="card-effect bg-white rounded-sm shadow border-0" |
98 | (click)="mostrarBotonCargar(producto)"> | 98 | (click)="mostrarBotonCargar(producto)"> |
99 | <img src="{{apiUrl}}/imagenes/cafe.jpg" class="rounded-sm w-100 m-auto"> | 99 | <img src="{{apiUrl}}/imagenes/testImg.jpg" class="rounded-sm w-100 m-auto"> |
100 | <div class="p-2"> | 100 | <div class="p-2"> |
101 | <p class="h6 text-left m-0">{{producto.DetArt}}</p> | 101 | <p class="h6 text-left m-0">{{producto.DetArt}}</p> |
102 | <div class="row justify-content-between m-0"> | 102 | <div class="row justify-content-between m-0"> |
103 | <div class="col-12 p-0"> | 103 | <div class="col-12 p-0"> |
104 | <div class="text-left"> | 104 | <div class="text-left"> |
105 | <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> | 105 | <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> |
106 | <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p> | 106 | <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p> |
107 | </div> | 107 | </div> |
108 | </div> | 108 | </div> |
109 | <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"> |
110 | <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> | 110 | <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> |
111 | </div> | 111 | </div> |
112 | </div> | 112 | </div> |
113 | <div *ngIf="producto.showCargarProducto" class="row mt-2"> | 113 | <div *ngIf="producto.showCargarProducto" class="row mt-2"> |
114 | <div class="col-sm-12"> | 114 | <div class="col-sm-12"> |
115 | <button | 115 | <button |
116 | type="button" | 116 | type="button" |
117 | class="btn btn-block btn-outline-primary shadow" | 117 | class="btn btn-block btn-outline-primary shadow" |
118 | (click)="elegirProducto(producto)"> | 118 | (click)="elegirProducto(producto)"> |
119 | Cargar Producto | 119 | Cargar Producto |
120 | </button> | 120 | </button> |
121 | </div> | 121 | </div> |
122 | </div> | 122 | </div> |
123 | </div> | 123 | </div> |
124 | </div> | 124 | </div> |
125 | </div> | 125 | </div> |
126 | </div> | 126 | </div> |
127 | </div> | 127 | </div> |
128 | 128 | ||
129 | <!-- SPINNER --> | 129 | <!-- SPINNER --> |
130 | <div *ngIf="productos.length === 0 && showSpinner" class="col-sm-10 align-self-center"> | 130 | <div *ngIf="productos.length === 0 && showSpinner" class="col-sm-10 align-self-center"> |
131 | <div class="spinner-border spinner-lg text-secondary" role="status"></div> | 131 | <div class="spinner-border spinner-lg text-secondary" role="status"></div> |
132 | <span class="text-secondary m-2 h5">Cargando información.</span> | 132 | <span class="text-secondary m-2 h5">Cargando información.</span> |
133 | </div> | 133 | </div> |
134 | 134 | ||
135 | </div> | 135 | </div> |
136 | 136 | ||
137 | </div> | 137 | </div> |
138 | 138 | ||
139 | </div> | 139 | </div> |
140 | 140 |
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-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/cafe.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/cafe.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/cafe.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</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 | 65 | <app-popover-promos |
66 | *ngIf="productoAcargar && !productoEsPromo" | ||
66 | [popover]="popoverDirective" | 67 | [popover]="popoverDirective" |
67 | [popoverContent]="popoverContent" | 68 | [popoverContent]="promociones" |
68 | class="fade-in text-white rounded-sm border-0"> | 69 | (promoSeleccionada)="promoSeleccionada($event)" |
69 | </app-popover> | 70 | class="text-white rounded-sm border-0"> |
71 | </app-popover-promos> | ||
72 | <app-popover-sinonimos | ||
73 | *ngIf="promoAcargar && productoEsPromo" | ||
74 | [popover]="popoverDirective" | ||
75 | [popoverContent]="sinonimos" | ||
76 | class="text-white rounded-sm border-0"> | ||
77 | </app-popover-sinonimos> | ||
70 | </ng-template> | 78 | </ng-template> |
71 | <div | 79 | <div |
72 | placement="left" | 80 | placement="left" |
73 | triggers="" | 81 | triggers="" |
74 | [popover]="popTemplate" | 82 | [popover]="popTemplate" |
75 | class="w-100" | 83 | class="w-100" |
76 | #pop="bs-popover"> | 84 | #pop="bs-popover"> |
77 | <div class="card bg-white border-0 shadow rounded mb-auto"> | 85 | <div class="card bg-white border-0 shadow rounded mb-auto"> |
78 | <div class="card-body text-left px-4 py-3"> | 86 | <div class="card-body text-left px-4 py-3"> |
79 | <div class="row"> | 87 | <div class="row"> |
80 | <div class="col-6"> | 88 | <div class="col-6"> |
81 | <p class="h3 card-title">Cargar Productos</p> | 89 | <p class="h3 card-title">Cargar Productos</p> |
82 | </div> | 90 | </div> |
83 | <div class="col-6 p-0"> | 91 | <div class="col-6 p-0"> |
84 | <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2"> | 92 | <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2"> |
85 | </div> | 93 | </div> |
86 | </div> | 94 | </div> |
87 | <p class="h5 card-text text-muted font-weight-light"> | 95 | <p class="h5 card-text text-muted font-weight-light"> |
88 | Coloque el código de<br> | 96 | Coloque el código de<br> |
89 | barras o QR frente al scanner. | 97 | barras o QR frente al scanner. |
90 | </p> | 98 | </p> |
91 | </div> | 99 | </div> |
92 | <div class="row m-4"> | 100 | <div class="row m-4"> |
93 | <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm"> | 101 | <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm"> |
102 | <!-- IMAGEN DE ESCANER --> | ||
94 | <img | 103 | <img |
95 | *ngIf="!productoAcargar" | 104 | *ngIf="!productoAcargar" |
96 | class="card-img-top d-block w-100 mx-auto rounded-sm" | 105 | class="card-img-top d-block w-100 mx-auto rounded-sm" |
97 | src="{{apiUrl}}/imagenes/escanner.jpg"> | 106 | src="{{apiUrl}}/imagenes/escanner.jpg"> |
98 | <div *ngIf="productoAcargar"> | 107 | |
108 | <!-- PRODUCTO A CARGAR --> | ||
109 | <div class="fade-in m-0" *ngIf="productoAcargar && !productoEsPromo"> | ||
99 | <img | 110 | <img |
100 | class="card-img-top d-block w-100 mx-auto rounded-sm" | 111 | class="card-img-top d-block w-100 mx-auto rounded-sm" |
101 | src="{{apiUrl}}/imagenes/cafe.jpg"> | 112 | src="{{apiUrl}}/imagenes/testImg3.jpg"> |
102 | 113 | ||
103 | <div class="row justify-content-between m-3"> | 114 | <div class="row justify-content-between m-3"> |
104 | <div class="col-auto text-left px-1"> | 115 | <div class="col-12 text-left px-1"> |
105 | <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p> | 116 | <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p> |
106 | <p class="h6 mb-0"><small>{{productoAcargar.DetArt}}</small></p> | ||
107 | </div> | 117 | </div> |
108 | <div class="col-4 text-right my-auto"> | 118 | <div class="col-12 text-right mt-2"> |
109 | <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p> | 119 | <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p> |
110 | </div> | 120 | </div> |
111 | </div> | 121 | </div> |
112 | </div> | 122 | </div> |
123 | |||
124 | <!-- PROMO A CARGAR --> | ||
125 | <div class="fade-in m-0" *ngIf="promoAcargar && productoEsPromo"> | ||
126 | <img | ||
127 | class="card-img-top d-block w-100 mx-auto rounded-sm" | ||
128 | src="{{apiUrl}}/imagenes/testImg3.jpg"> | ||
129 | |||
130 | <div class="row justify-content-between m-3"> | ||
131 | <div class="col-12 text-left px-1"> | ||
132 | <p class="h6 font-weight-bold mb-0">{{promoAcargar.nombrePromo}}</p> | ||
133 | </div> | ||
134 | <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 | </div> | ||
137 | </div> | ||
138 | </div> | ||
139 | |||
113 | </div> | 140 | </div> |
114 | <!-- BOTONES --> | 141 | <!-- BOTONES DE CARGAR PRODUCTOS--> |
115 | <div | 142 | <div |
116 | class="col-5 pr-0" | 143 | class="col-5 pr-0" |
117 | *ngIf="productoAcargar && tienePromo"> | 144 | *ngIf="productoAcargar && tienePromo"> |
118 | <button | 145 | <button |
119 | *ngIf="productoEsPromo" | 146 | *ngIf="productoEsPromo && promoAcargar.sinonimos" |
120 | type="button" | 147 | type="button" |
121 | class="btn btn-light btn-block shadow-sm" | 148 | class="btn btn-light btn-block shadow-sm" |
122 | (click)="pop.show()"> | 149 | (click)="pop.show()"> |
123 | <span class="pr-2">Personalizar</span> | 150 | <span class="pr-2">Personalizar</span> |
124 | <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i> | 151 | <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i> |
125 | </button> | 152 | </button> |
126 | <button | 153 | <button |
127 | *ngIf="!productoEsPromo" | 154 | *ngIf="!productoEsPromo" |
128 | type="button" | 155 | type="button" |
129 | class="btn btn-primary btn-block shadow-sm" | 156 | class="btn btn-primary btn-block shadow-sm" |
130 | (click)="pop.show()"> | 157 | (click)="pop.show()"> |
131 | <span class="pr-2">Mostrar promociones</span> | 158 | <span class="pr-2">Mostrar promociones</span> |
132 | <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i> | 159 | <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i> |
133 | </button> | 160 | </button> |
134 | <button type="button" class="btn btn-light btn-block shadow-sm my-3"> | 161 | <button type="button" class="btn btn-light btn-block shadow-sm my-3"> |
135 | <span class="pr-2 font-weight-bold">Confirmar</span> | 162 | <span class="pr-2 font-weight-bold">Confirmar</span> |
136 | <i class="fa fa-check text-success" aria-hidden="true"></i> | 163 | <i class="fa fa-check text-success" aria-hidden="true"></i> |
137 | </button> | 164 | </button> |
138 | <button | 165 | <button |
139 | type="button" | 166 | type="button" |
140 | class="btn btn-light btn-block shadow-sm" | 167 | class="btn btn-light btn-block shadow-sm" |
141 | (click)="deshacerCarga()"> | 168 | (click)="deshacerCarga()"> |
142 | <span class="pr-2">Deshacer</span> | 169 | <span class="pr-2">Deshacer</span> |
143 | <i class="fa fa-undo text-warning" aria-hidden="true"></i> | 170 | <i class="fa fa-undo text-warning" aria-hidden="true"></i> |
144 | </button> | 171 | </button> |
145 | </div> | 172 | </div> |
146 | </div> | 173 | </div> |
147 | </div> | 174 | </div> |
148 | </div> | 175 | </div> |
149 | 176 | ||
150 | <!-- BUSCAR PRODUCTOS --> | 177 | <!-- BUSCAR PRODUCTOS --> |
151 | <div (click)="goPage('busqueda-productos')" | 178 | <div (click)="goPage('busqueda-productos')" |
152 | class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> | 179 | class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> |
153 | <div class="card-body text-left px-4 py-3"> | 180 | <div class="card-body text-left px-4 py-3"> |
154 | <div class="row"> | 181 | <div class="row"> |
155 | <div class="col-6"> | 182 | <div class="col-6"> |
156 | <p class="h3 card-title">Buscar Productos</p> | 183 | <p class="h3 card-title">Buscar Productos</p> |
157 | <p class="h5 card-text text-muted font-weight-light"> | 184 | <p class="h5 card-text text-muted font-weight-light"> |
158 | Busque aquí los productos<br> | 185 | Busque aquí los productos<br> |
159 | que no tienen código </p> | 186 | que no tienen código </p> |
160 | </div> | 187 | </div> |
161 | <div class="col-6 p-0"> | 188 | <div class="col-6 p-0"> |
162 | <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2"> | 189 | <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2"> |
163 | </div> | 190 | </div> |
164 | </div> | 191 | </div> |
165 | 192 | ||
166 | </div> | 193 | </div> |
167 | </div> | 194 | </div> |
168 | 195 | ||
169 | </div> | 196 | </div> |
170 | 197 | ||
171 | </div> | 198 | </div> |
172 | 199 | ||
173 | </div> | 200 | </div> |
174 | </div> | 201 | </div> |
src/app/components/inicio/inicio.component.ts
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 | 9 | ||
9 | 10 | ||
10 | @Component({ | 11 | @Component({ |
11 | selector: 'app-inicio', | 12 | selector: 'app-inicio', |
12 | templateUrl: './inicio.component.html', | 13 | templateUrl: './inicio.component.html', |
13 | styleUrls: ['./inicio.component.scss'] | 14 | styleUrls: ['./inicio.component.scss'] |
14 | }) | 15 | }) |
15 | export class InicioComponent implements OnInit { | 16 | export class InicioComponent implements OnInit { |
16 | 17 | ||
17 | @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective; | 18 | @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective; |
18 | private productoAcargar: Producto; | 19 | private productoAcargar: Producto; |
20 | private promoAcargar: Promocion; | ||
19 | private tienePromo = false; | 21 | private tienePromo = false; |
20 | private productoEsPromo = false; | 22 | private productoEsPromo = false; |
21 | 23 | ||
22 | popoverContent: Promocion[] = [] | 24 | promociones: Promocion[] = []; |
25 | sinonimos: Sinonimo[] = []; | ||
23 | apiUrl: string = appSettings.apiUrl | 26 | apiUrl: string = appSettings.apiUrl |
24 | 27 | ||
25 | constructor( | 28 | constructor( |
26 | private router: Router, | 29 | private router: Router, |
27 | private productoService: ProductoService) { } | 30 | private productoService: ProductoService) { } |
28 | 31 | ||
29 | ngOnInit() { | 32 | ngOnInit() { |
30 | 33 | ||
31 | this.productoAcargar = this.productoService.productoAcargar; | 34 | this.productoAcargar = this.productoService.productoAcargar; |
32 | if (this.productoAcargar) { | 35 | if (this.productoAcargar) { |
33 | var sector = this.productoAcargar.CodSec; | 36 | var sector = this.productoAcargar.CodSec; |
34 | var codigo = this.productoAcargar.CodArt; | 37 | var codigo = this.productoAcargar.CodArt; |
35 | this.productoService.getPromocion(sector, codigo) | 38 | this.productoService.getPromocion(sector, codigo) |
36 | .subscribe((promociones: Promocion[]) => { | 39 | .subscribe((res: Promocion[]) => { |
37 | 40 | ||
38 | if (promociones.length === 0) { | 41 | if (res.length === 0) { |
39 | //Si no tiene promociones la cargará al carrito despues de un tiempo | 42 | //Si no tiene promociones la cargará al carrito despues de un tiempo |
40 | setTimeout(() => { | 43 | setTimeout(() => { |
41 | this.productoService.productos.push(this.productoAcargar); | 44 | this.productoService.productos.push(this.productoAcargar); |
42 | this.productoAcargar = undefined; | 45 | this.productoAcargar = undefined; |
43 | this.tienePromo = false; | 46 | this.tienePromo = false; |
44 | }, 2000) | 47 | }, 2000) |
45 | } else { | 48 | } else { |
46 | 49 | ||
47 | this.popoverContent = promociones; | 50 | this.promociones = res; |
48 | this.tienePromo = true; | 51 | this.tienePromo = true; |
49 | this.popoverDirective.show(); | 52 | this.popoverDirective.show(); |
50 | } | 53 | } |
51 | }, error => { console.error(error); }) | 54 | }, error => { console.error(error); }) |
52 | } | 55 | } |
53 | } | 56 | } |
54 | 57 | ||
55 | showPopover() { | 58 | showPopover() { |
56 | 59 | ||
57 | this.popoverDirective.show(); | 60 | this.popoverDirective.show(); |
58 | } | 61 | } |
59 | 62 | ||
60 | private goPage(pageUrl) { | 63 | private goPage(pageUrl) { |
64 | |||
61 | this.router.navigate([pageUrl]); | 65 | this.router.navigate([pageUrl]); |
62 | } | 66 | } |
63 | 67 | ||
64 | deshacerCarga() { | 68 | deshacerCarga() { |
69 | if (this.productoEsPromo) { | ||
70 | this.promoAcargar = undefined; | ||
71 | this.productoEsPromo = false; | ||
72 | this.popoverDirective.show(); | ||
73 | } else { | ||
74 | this.productoAcargar = undefined; | ||
75 | this.tienePromo = false; | ||
76 | this.popoverDirective.hide(); | ||
77 | } | ||
78 | } | ||
65 | 79 | ||
66 | this.productoAcargar = undefined; | 80 | promoSeleccionada($event: Promocion) { |
67 | this.tienePromo = false; | 81 | |
82 | this.productoEsPromo = true; | ||
83 | this.promoAcargar = $event; | ||
68 | this.popoverDirective.hide(); | 84 | this.popoverDirective.hide(); |
85 | if (this.promoAcargar.sinonimos) { | ||
86 | var sector = this.promoAcargar.sector; | ||
87 | var codigo = this.promoAcargar.codigo; | ||
88 | this.productoService.getPromocionSinonimos(sector, codigo) | ||
89 | .subscribe((res : Sinonimo[]) => { | ||
90 | |||
91 | this.sinonimos = res; | ||
92 | this.showPopover(); | ||
93 | }) | ||
94 | } | ||
69 | } | 95 | } |
70 | 96 | ||
71 | } | 97 | } |
72 | 98 |
src/app/components/popover-promos/popover-promos.component.html
File was created | 1 | <div class="card-body fade-left"> | |
2 | <div class="row"> | ||
3 | <div class="col text-left"> | ||
4 | <p class="h5 card-title"> | ||
5 | Este producto forma parte<br> | ||
6 | de Combos y Promociones | ||
7 | </p> | ||
8 | </div> | ||
9 | </div> | ||
10 | |||
11 | <div class="overflow-scroll popover-size pr-2"> | ||
12 | <div | ||
13 | class="row my-2" | ||
14 | *ngFor="let promo of popoverContent"> | ||
15 | <div class="col text-dark"> | ||
16 | <div | ||
17 | class="bg-white card-effect rounded-sm p-2 px-3" | ||
18 | (click)="seleccionarPromo(promo)"> | ||
19 | <div class="row justify-content-between"> | ||
20 | <div class="col-12 text-left"> | ||
21 | <p class="h5 mb-0"> | ||
22 | <small class="font-weight-bold">{{promo.nombrePromo}}</small> | ||
23 | </p> | ||
24 | </div> | ||
25 | <div class="col-12 text-right mt-2"> | ||
26 | <p class="h4 font-weight-bold mb-0"> | ||
27 | {{calcularPrecioDePromo(promo.productos) | currency}} | ||
28 | </p> | ||
29 | </div> | ||
30 | </div> | ||
31 | </div> | ||
32 | </div> | ||
33 | </div> | ||
34 | </div> | ||
35 | |||
36 | <div class="row mt-3 justify-content-end"> | ||
37 | <div class="col-auto"> | ||
38 | <button | ||
39 | type="button" | ||
40 | class="btn btn-sm btn-light shadow" | ||
41 | (click)="hide()"> | ||
42 | <span class="pr-2">No, gracias</span> | ||
43 | <i class="fa fa-times text-danger" aria-hidden="true"></i> | ||
44 | </button> | ||
45 | </div> | ||
46 | </div> | ||
47 | |||
48 | </div> | ||
49 |
src/app/components/popover-promos/popover-promos.component.scss
File was created | 1 | .popover-size { | |
2 | max-height: 57vh !important; | ||
3 | min-height: 57vh !important; | ||
4 | } | ||
5 |
src/app/components/popover-promos/popover-promos.component.spec.ts
File was created | 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | |
2 | import { PopoverPromosComponent } from './popover-promos.component'; | ||
3 | |||
4 | describe('PopoverPromosComponent', () => { | ||
5 | let component: PopoverPromosComponent; | ||
6 | let fixture: ComponentFixture<PopoverPromosComponent>; | ||
7 | |||
8 | beforeEach(async(() => { | ||
9 | TestBed.configureTestingModule({ | ||
10 | declarations: [ PopoverPromosComponent ] | ||
11 | }) | ||
12 | .compileComponents(); | ||
13 | })); | ||
14 | |||
15 | beforeEach(() => { | ||
16 | fixture = TestBed.createComponent(PopoverPromosComponent); | ||
17 | component = fixture.componentInstance; | ||
18 | fixture.detectChanges(); | ||
19 | }); | ||
20 | |||
21 | it('should create', () => { | ||
22 | expect(component).toBeTruthy(); | ||
23 | }); | ||
24 | }); | ||
25 |
src/app/components/popover-promos/popover-promos.component.ts
File was created | 1 | import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; | |
2 | import { PopoverDirective } from 'ngx-bootstrap/popover'; | ||
3 | import { Promocion } from 'src/app/wrappers/promocion'; | ||
4 | import { Producto } from 'src/app/wrappers/producto'; | ||
5 | |||
6 | @Component({ | ||
7 | selector: 'app-popover-promos', | ||
8 | templateUrl: './popover-promos.component.html', | ||
9 | styleUrls: ['./popover-promos.component.scss'] | ||
10 | }) | ||
11 | export class PopoverPromosComponent implements OnInit { | ||
12 | |||
13 | @Input() popover: PopoverDirective; | ||
14 | @Input() popoverContent: Promocion[]; | ||
15 | @Output() promoSeleccionada = new EventEmitter<Promocion>(); | ||
16 | |||
17 | constructor() { } | ||
18 | |||
19 | ngOnInit() { | ||
20 | } | ||
21 | |||
22 | hide() { | ||
23 | this.popover.hide(); | ||
24 | } | ||
25 | |||
26 | seleccionarPromo(promo: Promocion) { | ||
27 | |||
28 | this.promoSeleccionada.emit(promo); | ||
29 | } | ||
30 | |||
31 | calcularPrecioDePromo(productos: Producto[]) { | ||
32 | |||
33 | var precio = 0; | ||
34 | productos.forEach(producto => { | ||
35 | precio += producto.PreVen; | ||
36 | }) | ||
37 | |||
38 | return precio; | ||
39 | } | ||
40 | |||
41 | } | ||
42 |
src/app/components/popover-sinonimos/popover-sinonimos.component.html
File was created | 1 | <div class="card-body fade-left"> | |
2 | |||
3 | <div class="row m-0"> | ||
4 | <div class="col text-left"> | ||
5 | <p class="h4 card-title"> | ||
6 | Personalice su pedido | ||
7 | </p> | ||
8 | </div> | ||
9 | </div> | ||
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"> | ||
20 | <div class="col"> | ||
21 | <div class="row" *ngFor="let sinonimo of popoverContent"> | ||
22 | <div class="col pl-4 h6"> | ||
23 | <div class="custom-control custom-radio"> | ||
24 | <input | ||
25 | type="radio" | ||
26 | id="{{sinonimo.CodArt}}" | ||
27 | name="sinonimoOpciones" | ||
28 | class="custom-control-input" | ||
29 | (click)="setSinonimo(sinonimo)"> | ||
30 | <label | ||
31 | class="font-weight-normal custom-control-label" | ||
32 | for="{{sinonimo.CodArt}}"> | ||
33 | {{sinonimo.DetArt}} | ||
34 | </label> | ||
35 | </div> | ||
36 | </div> | ||
37 | </div> | ||
38 | </div> | ||
39 | </div> | ||
40 | |||
41 | <div class="row mt-3 justify-content-end"> | ||
42 | <div class="col-auto"> | ||
43 | <button type="button" class="btn btn-sm btn-light shadow" (click)="hidePopover()"> | ||
44 | <span class="font-weight-bold pr-2">Continuar</span> | ||
45 | <i class="fa fa-check text-success" aria-hidden="true"></i> | ||
46 | </button> | ||
47 | </div> | ||
48 | </div> | ||
49 | |||
50 | </div> | ||
51 |
src/app/components/popover-sinonimos/popover-sinonimos.component.scss
File was created | 1 | .popover-size { | |
2 | max-height: 57vh !important; | ||
3 | min-height: 57vh !important; | ||
4 | } | ||
5 |
src/app/components/popover-sinonimos/popover-sinonimos.component.spec.ts
File was created | 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | |
2 | |||
3 | import { PopoverSinonimosComponent } from './popover-sinonimos.component'; | ||
4 | |||
5 | describe('PopoverSinonimosComponent', () => { | ||
6 | let component: PopoverSinonimosComponent; | ||
7 | let fixture: ComponentFixture<PopoverSinonimosComponent>; | ||
8 | |||
9 | beforeEach(async(() => { | ||
10 | TestBed.configureTestingModule({ | ||
11 | declarations: [ PopoverSinonimosComponent ] | ||
12 | }) | ||
13 | .compileComponents(); | ||
14 | })); | ||
15 | |||
16 | beforeEach(() => { | ||
17 | fixture = TestBed.createComponent(PopoverSinonimosComponent); | ||
18 | component = fixture.componentInstance; | ||
19 | fixture.detectChanges(); | ||
20 | }); | ||
21 | |||
22 | it('should create', () => { | ||
23 | expect(component).toBeTruthy(); | ||
24 | }); | ||
25 | }); | ||
26 |
src/app/components/popover-sinonimos/popover-sinonimos.component.ts
File was created | 1 | import { Component, OnInit, Input } from '@angular/core'; | |
2 | import { PopoverDirective } from 'ngx-bootstrap'; | ||
3 | import { Sinonimo } from 'src/app/wrappers/sinonimo'; | ||
4 | |||
5 | @Component({ | ||
6 | selector: 'app-popover-sinonimos', | ||
7 | templateUrl: './popover-sinonimos.component.html', | ||
8 | styleUrls: ['./popover-sinonimos.component.scss'] | ||
9 | }) | ||
10 | export class PopoverSinonimosComponent implements OnInit { | ||
11 | |||
12 | //Directiva del popover, para poder cerrarlo desde este componente | ||
13 | @Input() popover: PopoverDirective; | ||
14 | @Input() popoverContent: Sinonimo[]; | ||
15 | sinonimoAelegir: Sinonimo; | ||
16 | |||
17 | constructor() { } | ||
18 | |||
19 | ngOnInit() { | ||
20 | } | ||
21 | |||
22 | hidePopover() { | ||
23 | |||
24 | this.popover.hide(); | ||
25 | } | ||
26 | |||
27 | setSinonimo(sinonimo: Sinonimo) { | ||
28 | |||
29 | this.sinonimoAelegir = sinonimo; | ||
30 | } | ||
31 | |||
32 | } | ||
33 |
src/app/components/popover/popover.component.html
1 | <div class="card-body"> | File was deleted | |
2 | <div class="row"> | ||
3 | <div class="col text-left"> | ||
4 | <p class="h5 card-title"> | ||
5 | Este producto forma parte<br> | ||
6 | de Combos y Promociones | ||
7 | </p> | ||
8 | </div> | ||
9 | </div> | ||
10 | |||
11 | <div class="overflow-scroll popover-size pr-2"> | ||
12 | <div | ||
13 | class="row my-2" | ||
14 | *ngFor="let promo of popoverContent"> | ||
15 | <div class="col text-dark"> | ||
16 | <div class="bg-white rounded-sm p-2 px-3"> | ||
17 | <div class="row justify-content-between"> | ||
18 | <div class="col-auto text-left"> | ||
19 | <p class="h5 font-weight-bold mb-0">{{promo.nombrePromo}}</p> | ||
20 | <p | ||
21 | class="h6 mb-0" | ||
22 | *ngFor="let producto of promo.productos"> | ||
23 | {{producto.DetArt}} | ||
24 | </p> | ||
25 | </div> | ||
26 | <div class="col-auto text-right align-self-end"> | ||
27 | <p class="h4 font-weight-bold mb-0">{{28 | currency}}</p> | ||
28 | </div> | ||
29 | </div> | ||
30 | </div> | ||
31 | </div> | ||
32 | </div> | ||
33 | </div> | ||
34 | |||
35 | <div class="row mt-3 justify-content-end"> | ||
36 | <div class="col-auto"> | ||
37 | <button | ||
38 | type="button" | ||
39 | class="btn btn-sm btn-light shadow" | ||
40 | (click)="hide()"> | ||
41 | <span class="pr-2">No, gracias</span> | ||
42 | <i class="fa fa-times text-danger" aria-hidden="true"></i> | ||
43 | </button> | ||
44 | </div> | ||
45 | </div> | ||
46 | |||
47 | </div> | ||
48 | 1 | <div class="card-body"> |
src/app/components/popover/popover.component.scss
1 | .popover-size { | File was deleted | |
2 | max-height: 430px !important; | ||
3 | min-height: 200px !important; | ||
4 | } | ||
5 | 1 | .popover-size { |
src/app/components/popover/popover.component.spec.ts
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | File was deleted | |
2 | |||
3 | import { PopoverComponent } from './popover.component'; | ||
4 | |||
5 | describe('PopoverComponent', () => { | ||
6 | let component: PopoverComponent; | ||
7 | let fixture: ComponentFixture<PopoverComponent>; | ||
8 | |||
9 | beforeEach(async(() => { | ||
10 | TestBed.configureTestingModule({ | ||
11 | declarations: [ PopoverComponent ] | ||
12 | }) | ||
13 | .compileComponents(); | ||
14 | })); | ||
15 | |||
16 | beforeEach(() => { | ||
17 | fixture = TestBed.createComponent(PopoverComponent); | ||
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/popover/popover.component.ts
1 | import { Component, OnInit, Input } from '@angular/core'; | File was deleted | |
2 | import { PopoverDirective } from 'ngx-bootstrap/popover'; | ||
3 | import { Promocion } from 'src/app/wrappers/promocion'; | ||
4 | |||
5 | @Component({ | ||
6 | selector: 'app-popover', | ||
7 | templateUrl: './popover.component.html', | ||
8 | styleUrls: ['./popover.component.scss'] | ||
9 | }) | ||
10 | export class PopoverComponent implements OnInit { | ||
11 | |||
12 | @Input() popover: PopoverDirective; | ||
13 | @Input() popoverContent: Promocion[]; | ||
14 | |||
15 | constructor() { } | ||
16 | |||
17 | ngOnInit() { | ||
18 | } | ||
19 | |||
20 | hide() { | ||
21 | this.popover.hide(); | ||
22 | } | ||
23 | |||
24 | } | ||
25 | 1 | import { Component, OnInit, Input } from '@angular/core'; |
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 | import { appSettings } from 'src/etc/AppSettings'; |
5 | import { Producto } from '../wrappers/producto'; | 5 | import { Producto } from '../wrappers/producto'; |
6 | 6 | ||
7 | @Injectable({ | 7 | @Injectable({ |
8 | providedIn: 'root' | 8 | providedIn: 'root' |
9 | }) | 9 | }) |
10 | export class ProductoService { | 10 | export class ProductoService { |
11 | 11 | ||
12 | productos: Producto[] = []; | 12 | productos: Producto[] = []; |
13 | productoAcargar: Producto; | 13 | productoAcargar: Producto; |
14 | 14 | ||
15 | constructor(private http: HttpClient) { } | 15 | constructor(private http: HttpClient) { } |
16 | 16 | ||
17 | getAll(): Observable<any> { | 17 | getAll(): Observable<any> { |
18 | 18 | ||
19 | return this.http.get(`${appSettings.apiUrl}/articulos`); | 19 | return this.http.get(`${appSettings.apiUrl}/articulos`); |
20 | } | 20 | } |
21 | 21 | ||
22 | setProductos(producto: Producto) { | 22 | setProductos(producto: Producto) { |
23 | 23 | ||
24 | this.productos.push(producto); | 24 | this.productos.push(producto); |
25 | } | 25 | } |
26 | 26 | ||
27 | getPromocion(sector, codigo): Observable<any> { | 27 | getPromocion(sector, codigo): Observable<any> { |
28 | |||
29 | var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`; | ||
30 | // var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${2}/${1306}`; | ||
31 | return this.http.get(url); | ||
32 | } | ||
28 | 33 | ||
34 | getPromocionSinonimos(sector, codigo): Observable<any> { | ||
35 | |||
29 | var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`; | 36 | var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`; |
37 | // var url = `${appSettings.apiUrl}/sinonimos/promo/${2}/${7}`; | ||
30 | return this.http.get(url); | 38 | return this.http.get(url); |
31 | } | 39 | } |
32 | 40 | ||
33 | updateImages(body): Observable<any> { | 41 | updateImages(body): Observable<any> { |
34 | return this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, body); | 42 | return this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, body); |
35 | } | 43 | } |
36 | 44 | ||
37 | } | 45 | } |
38 | 46 |
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 | 90 | ||
91 | cantidad?:number; | 91 | cantidad?: number; |
92 | showCargarProducto?:boolean; | 92 | showCargarProducto?: boolean; |
93 | } | 93 | } |
94 | 94 |
src/app/wrappers/promocion.ts
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; | ||
8 | sector: number, | ||
9 | codigo: number, | ||
7 | } | 10 | } |
8 | 11 |
src/app/wrappers/sinonimo.ts
File was created | 1 | export interface Sinonimo { | |
2 | EMP: number; | ||
3 | ID_SIN: number; | ||
4 | SEC: number; | ||
5 | COD: string; | ||
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; | ||
106 | } | ||
107 |
src/assets/scss/animation.scss
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-left { | 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: fadeleft 1s; | 44 | animation: faderight 1s; |
45 | -moz-animation: fadeleft 1s; /* Firefox */ | 45 | -moz-animation: faderight 1s; /* Firefox */ |
46 | -webkit-animation: fadeleft 1s; /* Safari and Chrome */ | 46 | -webkit-animation: faderight 1s; /* Safari and Chrome */ |
47 | -o-animation: fadeleft 1s; /* Opera */ | 47 | -o-animation: faderight 1s; /* Opera */ |
48 | } | 48 | } |
49 | 49 | ||
50 | @keyframes fadeleft { | 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 fadeleft { | 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 fadeleft { | 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 | |||
85 | .fade-left { | ||
86 | |||
87 | -webkit-animation: fadeleft .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 | } | ||
90 | |||
91 | @-webkit-keyframes fadeleft { | ||
92 | 0% { | ||
93 | -webkit-transform: scaleX(0); | ||
94 | transform: scaleX(0); | ||
95 | -webkit-transform-origin: 100% 100%; | ||
96 | transform-origin: 100% 100%; | ||
97 | opacity: 1; | ||
98 | } | ||
99 | 100% { | ||
100 | -webkit-transform: scaleX(1); | ||
101 | transform: scaleX(1); | ||
102 | -webkit-transform-origin: 100% 100%; | ||
103 | transform-origin: 100% 100%; | ||
104 | opacity: 1; | ||
105 | } | ||
106 | } | ||
107 | |||
108 | @keyframes fadeleft { | ||
109 | 0% { | ||
110 | -webkit-transform: scaleX(0); | ||
111 | transform: scaleX(0); | ||
112 | -webkit-transform-origin: 100% 100%; | ||
113 | transform-origin: 100% 100%; | ||
114 | opacity: 1; | ||
115 | } | ||
116 | 100% { | ||
117 | -webkit-transform: scaleX(1); | ||
118 | transform: scaleX(1); | ||
119 | -webkit-transform-origin: 100% 100%; | ||
120 | transform-origin: 100% 100%; | ||
121 | opacity: 1; | ||
122 | } | ||
123 | } | ||
84 | 124 |
src/assets/scss/bootstrap-override.scss
1 | @import "../../../node_modules/bootstrap/scss/functions"; | 1 | @import "../../../node_modules/bootstrap/scss/functions"; |
2 | @import "../../../node_modules/bootstrap/scss/variables"; | 2 | @import "../../../node_modules/bootstrap/scss/variables"; |
3 | @import "../../../node_modules/bootstrap/scss/mixins"; | 3 | @import "../../../node_modules/bootstrap/scss/mixins"; |
4 | 4 | ||
5 | $primary: #2872ae; | 5 | $primary: #2872ae; |
6 | 6 | ||
7 | $theme-colors: ( | 7 | $theme-colors: ( |
8 | primary: $primary, | 8 | primary: $primary, |
9 | light: white | 9 | light: white |
10 | ); | 10 | ); |
11 | 11 | ||
12 | .popover { | 12 | .popover { |
13 | transform: translate3d(-464px, 0, -34px) !important; | 13 | transform: translate3d(-480px, 0, -34px) !important; |
14 | min-width: 200px !important; | 14 | min-width: 485px !important; |
15 | max-width: 525px !important; | 15 | max-width: 485px !important; |
16 | border: none !important; | 16 | border: none !important; |
17 | border-radius: 1.5rem !important; | 17 | border-radius: 1.5rem !important; |
18 | padding: 0 !important; | 18 | padding: 0 !important; |
19 | background-color: $primary !important; | 19 | background-color: $primary !important; |
20 | .popover-body { | 20 | .popover-body { |
21 | padding: 0 !important; | 21 | padding: 0 !important; |
22 | } | 22 | } |
23 | } | 23 | } |
24 | 24 | ||
25 | .bs-popover-left .arrow::after, | 25 | .bs-popover-left .arrow::after, |
26 | .bs-popover-auto[x-placement^="left"] .arrow::after { | 26 | .bs-popover-auto[x-placement^="left"] .arrow::after { |
27 | border-left-color: $primary !important; | 27 | border-left-color: $primary !important; |
28 | } | 28 | } |
29 | 29 | ||
30 | .bs-popover-right .arrow::after, | 30 | .bs-popover-right .arrow::after, |
31 | .bs-popover-auto[x-placement^="right"] .arrow::after { | 31 | .bs-popover-auto[x-placement^="right"] .arrow::after { |
32 | border-right-color: $primary !important; | 32 | border-right-color: $primary !important; |
33 | } | 33 | } |
34 | 34 | ||
35 | .bs-popover-top .arrow::after, | 35 | .bs-popover-top .arrow::after, |
36 | .bs-popover-auto[x-placement^="top"] .arrow::after { | 36 | .bs-popover-auto[x-placement^="top"] .arrow::after { |
37 | border-top-color: $primary !important; | 37 | border-top-color: $primary !important; |
38 | } | 38 | } |
39 | 39 | ||
40 | .bs-popover-bottom .arrow::after, | 40 | .bs-popover-bottom .arrow::after, |
41 | .bs-popover-auto[x-placement^="bottom"] .arrow::after { | 41 | .bs-popover-auto[x-placement^="bottom"] .arrow::after { |
42 | border-bottom-color: $primary !important; | 42 | border-bottom-color: $primary !important; |
43 | } | 43 | } |
44 | 44 | ||
45 | .list-group-item.active { | 45 | .list-group-item.active { |
46 | background-color: $primary !important; | 46 | background-color: $primary !important; |
47 | border-color: $primary !important; | 47 | border-color: $primary !important; |
48 | } | 48 | } |
49 | 49 | ||
50 | .custom-radio .custom-control-label::before { | ||
51 | background-color: $primary !important; | ||
52 | border-color: $white !important; | ||
53 | border-width: 2px !important; | ||
54 | } | ||
55 | |||
56 | .custom-control-input { | ||
57 | border-color: $white !important; | ||
58 | background-color: $primary !important; | ||
59 | color: $primary !important; | ||
60 | &:checked ~ .custom-control-label::before { | ||
61 | border-color: $white !important; | ||
62 | color: #fff !important; | ||
63 | background-color: $primary !important; | ||
64 | } | ||
65 | &:focus ~ .custom-control-label::before { | ||
66 | border-color: $white !important; | ||
67 | box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.7) !important; | ||
68 | } | ||
69 | } | ||
70 | |||
50 | @import "../../../node_modules/bootstrap/scss/bootstrap"; | 71 | @import "../../../node_modules/bootstrap/scss/bootstrap"; |
51 | 72 |
src/styles.scss
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 | } | 9 | } |
9 | 10 | ||
10 | .blur { | 11 | .blur { |
11 | filter: blur(10px); | 12 | filter: blur(10px); |
12 | -webkit-filter: blur(10px); | 13 | -webkit-filter: blur(10px); |
13 | } | 14 | } |
14 | 15 | ||
15 | .disable-user-select { | 16 | .disable-user-select { |
16 | -webkit-user-select: none; | 17 | -webkit-user-select: none; |
17 | -moz-user-select: none; | 18 | -moz-user-select: none; |
18 | -ms-user-select: none; | 19 | -ms-user-select: none; |
19 | user-select: none; | 20 | user-select: none; |
20 | } | 21 | } |
21 | 22 | ||
22 | .blue-gradient { | 23 | .blue-gradient { |
23 | background: linear-gradient(0deg, #ffffff00, $white); | 24 | background: linear-gradient(0deg, #ffffff00, $white); |
24 | } | 25 | } |
25 | 26 | ||
26 | .rounded { | 27 | .rounded { |
27 | border-radius: 1.5rem !important; | 28 | border-radius: 1.5rem !important; |
28 | } | 29 | } |
29 | 30 | ||
30 | .rounded-top-sm { | 31 | .rounded-top-sm { |
31 | border-top-left-radius: 0.75rem !important; | 32 | border-top-left-radius: 0.75rem !important; |
32 | border-top-right-radius: 0.75rem !important; | 33 | border-top-right-radius: 0.75rem !important; |
33 | } | 34 | } |
34 | 35 | ||
35 | .rounded-sm { | 36 | .rounded-sm { |
36 | border-radius: 0.75rem !important; | 37 | border-radius: 0.75rem !important; |
37 | } | 38 | } |
38 | 39 | ||
39 | .card-effect { | 40 | .card-effect { |
40 | &:active { | 41 | &:active { |
41 | background-color: #c9c9c9b3 !important; | 42 | background-color: #c9c9c9b3 !important; |
42 | transition: background-color 0.5s; | 43 | transition: background-color 0.5s; |
43 | } | 44 | } |
44 | &:focus { | 45 | &:focus { |
45 | background-color: #c9c9c9b3 !important; | 46 | background-color: #c9c9c9b3 !important; |
46 | transition: background-color 0.5s; | 47 | transition: background-color 0.5s; |
47 | } | 48 | } |
48 | } | 49 | } |
49 | 50 | ||
50 | .overflow-scroll { | 51 | .overflow-scroll { |
51 | overflow-y: auto !important; | 52 | overflow-y: auto !important; |
52 | overflow-x: hidden !important; | 53 | overflow-x: hidden !important; |
53 | &::-webkit-scrollbar { | 54 | &::-webkit-scrollbar { |
54 | width: 0.5em; | 55 | width: 0.5em; |
55 | } | 56 | } |
56 | &::-webkit-scrollbar-track { | 57 | &::-webkit-scrollbar-track { |
57 | border-radius: 10px; | 58 | border-radius: 10px; |
58 | 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); |
59 | -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); |
60 | background-color: $white; | 61 | background-color: $white; |
61 | } | 62 | } |
62 | &::-webkit-scrollbar-thumb { | 63 | &::-webkit-scrollbar-thumb { |
63 | 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); |
64 | -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); |
65 | outline: 1px solid slategrey; | 66 | outline: 1px solid slategrey; |
66 | border-radius: 10px; | 67 | border-radius: 10px; |
67 | height: 12px; | 68 | height: 12px; |
68 | &:active { | 69 | &:active { |
69 | box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9); | 70 | box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9); |
70 | -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9); | 71 | -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9); |
71 | } | 72 | } |
72 | } | 73 | } |
73 | &::-webkit-scrollbar-corner { | 74 | &::-webkit-scrollbar-corner { |
74 | border-radius: 10px; | 75 | border-radius: 10px; |
75 | } | 76 | } |
76 | } | 77 | } |
77 | 78 | ||
78 | .bg-gray { | 79 | .bg-gray { |
79 | background-color: #e6e6e6; | 80 | background-color: #e6e6e6; |
80 | } | 81 | } |
81 | 82 | ||
82 | .bg-primary-gradient { | 83 | .bg-primary-gradient { |
83 | 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%); |
84 | } | 85 | } |
85 | 86 | ||
86 | .icon-dim { | 87 | .icon-dim { |
87 | height: 40px !important; | 88 | height: 40px !important; |
88 | width: auto !important; | 89 | width: auto !important; |
89 | background-color: white !important; | 90 | background-color: white !important; |
90 | } | 91 | } |
91 | 92 | ||
92 | .text-purple { | 93 | .text-purple { |
93 | color: $purple; | 94 | color: $purple; |
94 | } | 95 | } |
95 | 96 | ||
96 | .vh-70 { | 97 | .vh-70 { |
97 | min-height: auto !important; | 98 | min-height: auto !important; |
98 | max-height: 70vh !important; | 99 | max-height: 70vh !important; |
99 | } | 100 | } |
100 | 101 | ||
101 | .vh-60 { | 102 | .vh-60 { |
102 | min-height: auto !important; | 103 | min-height: auto !important; |
103 | max-height: 60vh !important; | 104 | max-height: 60vh !important; |
104 | } | 105 | } |
105 | 106 | ||
106 | .spinner-lg { | 107 | .spinner-lg { |
107 | width: 3rem !important; | 108 | width: 3rem !important; |
108 | height: 3rem !important; | 109 | height: 3rem !important; |
109 | } | 110 | } |
110 | 111 | ||
111 | .sidebar { | 112 | .sidebar { |
112 | right: 0; | 113 | right: 0; |
113 | } | 114 | } |
114 | 115 |