diff --git a/package.json b/package.json index 8629340..f99087f 100644 --- a/package.json +++ b/package.json @@ -6,12 +6,12 @@ "ng": "ng", "start": "ng serve --port 4206 --host 0.0.0.0 --disableHostCheck", "build": "ng build", - "build-prod": "ng build --prod", + "build-prod": "ng build --prod --aot=true --build--optimizer=true", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "electron": "electron .", - "electron-build": "ng build --prod && electron .", + "electron-build": "ng build --prod --aot=true --build--optimizer=true && electron .", "build-exe": "electron-packager . --platform=win32 --arch=x64 --asar" }, "private": true, diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 9564aa2..23b2729 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -2,8 +2,6 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; import { AdminComponent } from './modules/admin/admin.component'; -import { FormasPagoModule } from './modules/formas-pago/formas-pago.module'; -import { OpcionPedidoModule } from './modules/opcion-pedido/opcion-pedido.module'; const routes: Routes = [ { path: '', component: SplashScreenComponent }, @@ -11,15 +9,25 @@ const routes: Routes = [ path: '', component: AdminComponent, children: [ - { path: 'formas-pago', loadChildren: () => FormasPagoModule }, - { path: 'opcion-pedido', loadChildren: () => OpcionPedidoModule }, + { + path: 'formas-pago', + loadChildren: () => import('./modules/formas-pago/formas-pago.module').then(m => m.FormasPagoModule) + }, + { + path: 'opcion-pedido', + loadChildren: () => import('./modules/opcion-pedido/opcion-pedido.module').then(m => m.OpcionPedidoModule) + }, + { + path: 'seleccion-productos', + loadChildren: () => import('./modules/seleccion-productos/seleccion-productos.module').then(m => m.SeleccionProductosModule) + }, ] }, { path: '**', redirectTo: '', pathMatch: 'full' }, ]; @NgModule({ - imports: [RouterModule.forRoot(routes)], + imports: [RouterModule.forRoot(routes, { useHash: true })], exports: [RouterModule] }) export class AppRoutingModule { } diff --git a/src/app/modules/opcion-pedido/opcion-pedido.component.html b/src/app/modules/opcion-pedido/opcion-pedido.component.html index 6249117..1f21f07 100644 --- a/src/app/modules/opcion-pedido/opcion-pedido.component.html +++ b/src/app/modules/opcion-pedido/opcion-pedido.component.html @@ -14,7 +14,7 @@
+ (click)="goTo('/seleccion-productos')">
@@ -31,7 +31,7 @@
+ (click)="goTo('/seleccion-productos')">
diff --git a/src/app/modules/opcion-pedido/opcion-pedido.component.ts b/src/app/modules/opcion-pedido/opcion-pedido.component.ts index d6e712d..6d36a77 100644 --- a/src/app/modules/opcion-pedido/opcion-pedido.component.ts +++ b/src/app/modules/opcion-pedido/opcion-pedido.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; @Component({ selector: 'app-opcion-pedido', @@ -7,9 +8,15 @@ import { Component, OnInit } from '@angular/core'; }) export class OpcionPedidoComponent implements OnInit { - constructor() { } + constructor( + private router: Router, + ) { } ngOnInit() { } + goTo(path) { + this.router.navigate([path]); + } + } diff --git a/src/app/modules/seleccion-productos/seleccion-productos-routing.module.ts b/src/app/modules/seleccion-productos/seleccion-productos-routing.module.ts index 826eaae..07ba1d8 100644 --- a/src/app/modules/seleccion-productos/seleccion-productos-routing.module.ts +++ b/src/app/modules/seleccion-productos/seleccion-productos-routing.module.ts @@ -1,8 +1,10 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; +import { SeleccionProductosComponent } from './seleccion-productos.component'; - -const routes: Routes = []; +const routes: Routes = [ + { path: '', component: SeleccionProductosComponent } +]; @NgModule({ imports: [RouterModule.forChild(routes)], diff --git a/src/app/modules/seleccion-productos/seleccion-productos.component.html b/src/app/modules/seleccion-productos/seleccion-productos.component.html index 89e8233..a97ef69 100644 --- a/src/app/modules/seleccion-productos/seleccion-productos.component.html +++ b/src/app/modules/seleccion-productos/seleccion-productos.component.html @@ -1 +1,67 @@ -

seleccion-productos works!

+
+ +
+
+
+
+
+
+ +
+
+
+ SELECCIONÁ TÚ COMIDA Y/O BEBIDA +
+
+
+ +
+
+
+ +
+

CATEGORÍAS

+
+
+ +
+
+
+ + {{categoria.id}} + +
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+ +
diff --git a/src/app/modules/seleccion-productos/seleccion-productos.component.scss b/src/app/modules/seleccion-productos/seleccion-productos.component.scss index e69de29..47a3ae8 100644 --- a/src/app/modules/seleccion-productos/seleccion-productos.component.scss +++ b/src/app/modules/seleccion-productos/seleccion-productos.component.scss @@ -0,0 +1,37 @@ +$primary: #aa006b; + +.rounded-right { + border-top-right-radius: 1.5rem !important; + border-bottom-right-radius: 1.5rem !important; +} + +.box-categorias { + height: calc(100% - 100px) !important; +} + +.active { + background-color: white; + border-bottom: 3px solid $primary !important; +} + +.border-bottom-effect { + border: none; + position: relative; + &:hover { + border: none; + } + &::after { + content: ""; + position: absolute; + width: 0px; + height: 3px; + left: 50%; + bottom: 0; + background-color: $primary; + transition: all ease-in-out 0.2s; + } + &:hover::after { + width: 100%; + left: 0; + } +} diff --git a/src/app/modules/seleccion-productos/seleccion-productos.component.ts b/src/app/modules/seleccion-productos/seleccion-productos.component.ts index e5f8cf5..27703f4 100644 --- a/src/app/modules/seleccion-productos/seleccion-productos.component.ts +++ b/src/app/modules/seleccion-productos/seleccion-productos.component.ts @@ -6,10 +6,34 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./seleccion-productos.component.scss'] }) export class SeleccionProductosComponent implements OnInit { + timeoutHandler: any; + categorias = [ + { id: 1, selected: false }, + { id: 2, selected: false }, + { id: 3, selected: false }, + ]; constructor() { } ngOnInit() { } + selectCategoria(index: number) { + this.categorias.forEach((categoria, i) => { + categoria.selected = index === i ? true : false; + }); + } + + mouseup() { + if (!this.timeoutHandler) return; + clearInterval(this.timeoutHandler); + } + + scroll(el: HTMLElement, value) { + el.scroll({ behavior: 'smooth', top: (value + el.scrollTop) }); + this.timeoutHandler = setInterval(() => { + el.scroll({ behavior: 'smooth', top: (value + el.scrollTop) }); + }, 500); + } + } diff --git a/src/assets/img/ir-color.svg b/src/assets/img/ir-color.svg new file mode 100644 index 0000000..21016df --- /dev/null +++ b/src/assets/img/ir-color.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + diff --git a/src/styles.scss b/src/styles.scss index 56f0f88..cd0122c 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -26,7 +26,7 @@ body { transition: all 0.3s; &:hover { cursor: pointer; - opacity: 0.8; + opacity: 0.7; } &:active { transform: scale(1.02); @@ -57,3 +57,19 @@ p { -webkit-transform: translateX(-50%); transform: translateX(-50%); } + +.rotate-90 { + transform: rotate(90deg); +} + +.rotate-90-neg { + transform: rotate(-90deg); +} + +.scroll-y { + overflow-y: auto; + scrollbar-width: none; + &::-webkit-scrollbar { + display: none; + } +} diff --git a/tsconfig.json b/tsconfig.json index 30956ae..ef498e9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,7 +10,7 @@ "module": "esnext", "moduleResolution": "node", "importHelpers": true, - "target": "es2015", + "target": "es5", "typeRoots": [ "node_modules/@types" ],