Commit 686e52a717cf0ebb1df1be4f70dc73c93af7d0a3

Authored by Marcelo Puebla
1 parent 5f5417202b

Arreglos en el archivo de routing y terminado filtro basice categorias

1 { 1 {
2 "name": "autoservicio-axion", 2 "name": "autoservicio-axion",
3 "version": "0.0.0", 3 "version": "0.0.0",
4 "main": "main.js", 4 "main": "main.js",
5 "scripts": { 5 "scripts": {
6 "ng": "ng", 6 "ng": "ng",
7 "start": "ng serve --port 4206 --host 0.0.0.0 --disableHostCheck", 7 "start": "ng serve --port 4206 --host 0.0.0.0 --disableHostCheck",
8 "build": "ng build", 8 "build": "ng build",
9 "build-prod": "ng build --prod", 9 "build-prod": "ng build --prod --aot=true --build--optimizer=true",
10 "test": "ng test", 10 "test": "ng test",
11 "lint": "ng lint", 11 "lint": "ng lint",
12 "e2e": "ng e2e", 12 "e2e": "ng e2e",
13 "electron": "electron .", 13 "electron": "electron .",
14 "electron-build": "ng build --prod && electron .", 14 "electron-build": "ng build --prod --aot=true --build--optimizer=true && electron .",
15 "build-exe": "electron-packager . --platform=win32 --arch=x64 --asar" 15 "build-exe": "electron-packager . --platform=win32 --arch=x64 --asar"
16 }, 16 },
17 "private": true, 17 "private": true,
18 "dependencies": { 18 "dependencies": {
19 "@angular/animations": "~8.2.14", 19 "@angular/animations": "~8.2.14",
20 "@angular/common": "~8.2.14", 20 "@angular/common": "~8.2.14",
21 "@angular/compiler": "~8.2.14", 21 "@angular/compiler": "~8.2.14",
22 "@angular/core": "~8.2.14", 22 "@angular/core": "~8.2.14",
23 "@angular/forms": "~8.2.14", 23 "@angular/forms": "~8.2.14",
24 "@angular/platform-browser": "~8.2.14", 24 "@angular/platform-browser": "~8.2.14",
25 "@angular/platform-browser-dynamic": "~8.2.14", 25 "@angular/platform-browser-dynamic": "~8.2.14",
26 "@angular/router": "~8.2.14", 26 "@angular/router": "~8.2.14",
27 "bootstrap": "^4.4.1", 27 "bootstrap": "^4.4.1",
28 "electron-debug": "^3.0.1", 28 "electron-debug": "^3.0.1",
29 "hammerjs": "^2.0.8", 29 "hammerjs": "^2.0.8",
30 "jquery": "^3.4.1", 30 "jquery": "^3.4.1",
31 "js-sha256": "^0.9.0", 31 "js-sha256": "^0.9.0",
32 "popper.js": "^1.16.0", 32 "popper.js": "^1.16.0",
33 "rxjs": "~6.4.0", 33 "rxjs": "~6.4.0",
34 "tslib": "^1.10.0", 34 "tslib": "^1.10.0",
35 "zone.js": "~0.9.1" 35 "zone.js": "~0.9.1"
36 }, 36 },
37 "devDependencies": { 37 "devDependencies": {
38 "@angular-devkit/build-angular": "~0.803.20", 38 "@angular-devkit/build-angular": "~0.803.20",
39 "@angular/cli": "~8.3.20", 39 "@angular/cli": "~8.3.20",
40 "@angular/compiler-cli": "~8.2.14", 40 "@angular/compiler-cli": "~8.2.14",
41 "@angular/language-service": "~8.2.14", 41 "@angular/language-service": "~8.2.14",
42 "@types/jasmine": "~3.3.8", 42 "@types/jasmine": "~3.3.8",
43 "@types/jasminewd2": "~2.0.3", 43 "@types/jasminewd2": "~2.0.3",
44 "@types/node": "~8.9.4", 44 "@types/node": "~8.9.4",
45 "codelyzer": "^5.0.0", 45 "codelyzer": "^5.0.0",
46 "devtron": "^1.4.0", 46 "devtron": "^1.4.0",
47 "electron": "^7.1.6", 47 "electron": "^7.1.6",
48 "jasmine-core": "~3.4.0", 48 "jasmine-core": "~3.4.0",
49 "jasmine-spec-reporter": "~4.2.1", 49 "jasmine-spec-reporter": "~4.2.1",
50 "karma": "~4.1.0", 50 "karma": "~4.1.0",
51 "karma-chrome-launcher": "~2.2.0", 51 "karma-chrome-launcher": "~2.2.0",
52 "karma-coverage-istanbul-reporter": "~2.0.1", 52 "karma-coverage-istanbul-reporter": "~2.0.1",
53 "karma-jasmine": "~2.0.1", 53 "karma-jasmine": "~2.0.1",
54 "karma-jasmine-html-reporter": "^1.4.0", 54 "karma-jasmine-html-reporter": "^1.4.0",
55 "protractor": "~5.4.0", 55 "protractor": "~5.4.0",
56 "ts-node": "~7.0.0", 56 "ts-node": "~7.0.0",
57 "tslint": "~5.15.0", 57 "tslint": "~5.15.0",
58 "typescript": "~3.5.3" 58 "typescript": "~3.5.3"
59 } 59 }
60 } 60 }
61 61
src/app/app-routing.module.ts
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 { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; 3 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
4 import { AdminComponent } from './modules/admin/admin.component'; 4 import { AdminComponent } from './modules/admin/admin.component';
5 import { FormasPagoModule } from './modules/formas-pago/formas-pago.module';
6 import { OpcionPedidoModule } from './modules/opcion-pedido/opcion-pedido.module';
7 5
8 const routes: Routes = [ 6 const routes: Routes = [
9 { path: '', component: SplashScreenComponent }, 7 { path: '', component: SplashScreenComponent },
10 { 8 {
11 path: '', 9 path: '',
12 component: AdminComponent, 10 component: AdminComponent,
13 children: [ 11 children: [
14 { path: 'formas-pago', loadChildren: () => FormasPagoModule }, 12 {
15 { path: 'opcion-pedido', loadChildren: () => OpcionPedidoModule }, 13 path: 'formas-pago',
14 loadChildren: () => import('./modules/formas-pago/formas-pago.module').then(m => m.FormasPagoModule)
15 },
16 {
17 path: 'opcion-pedido',
18 loadChildren: () => import('./modules/opcion-pedido/opcion-pedido.module').then(m => m.OpcionPedidoModule)
19 },
20 {
21 path: 'seleccion-productos',
22 loadChildren: () => import('./modules/seleccion-productos/seleccion-productos.module').then(m => m.SeleccionProductosModule)
23 },
16 ] 24 ]
17 }, 25 },
18 { path: '**', redirectTo: '', pathMatch: 'full' }, 26 { path: '**', redirectTo: '', pathMatch: 'full' },
19 ]; 27 ];
20 28
21 @NgModule({ 29 @NgModule({
22 imports: [RouterModule.forRoot(routes)], 30 imports: [RouterModule.forRoot(routes, { useHash: true })],
23 exports: [RouterModule] 31 exports: [RouterModule]
24 }) 32 })
src/app/modules/opcion-pedido/opcion-pedido.component.html
1 <div class="h-92 bg-white"> 1 <div class="h-92 bg-white">
2 <div class="row mx-0 h-15"> 2 <div class="row mx-0 h-15">
3 <div class="col-12 px-0 h-80 my-auto"> 3 <div class="col-12 px-0 h-80 my-auto">
4 <img class="d-block mx-auto h-100" src="assets/img/logo-spot.svg"> 4 <img class="d-block mx-auto h-100" src="assets/img/logo-spot.svg">
5 </div> 5 </div>
6 </div> 6 </div>
7 <div class="h-85"> 7 <div class="h-85">
8 <div class="row h-25 mx-0 justify-content-center text-center"> 8 <div class="row h-25 mx-0 justify-content-center text-center">
9 <div class="col-12 px-0 h-auto align-self-center"> 9 <div class="col-12 px-0 h-auto align-self-center">
10 <p class="h6 mb-5 text-center">TU PEDIDO ES PARA:</p> 10 <p class="h6 mb-5 text-center">TU PEDIDO ES PARA:</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 <div class="row h-15 justify-content-center mx-0"> 13 <div class="row h-15 justify-content-center mx-0">
14 <div class="col-auto px-0 h-auto align-self-start"> 14 <div class="col-auto px-0 h-auto align-self-start">
15 <div 15 <div
16 class="btn-effect col-auto align-self-center px-0 bg-white" 16 class="btn-effect col-auto align-self-center px-0 bg-white"
17 (click)="goBack()"> 17 (click)="goTo('/seleccion-productos')">
18 <div class="row mx-0 bg-primary badge-pill"> 18 <div class="row mx-0 bg-primary badge-pill">
19 <div class="col-auto p-0"> 19 <div class="col-auto p-0">
20 <img class="p-1 img-plato" src="assets/img/icono-plato.svg"> 20 <img class="p-1 img-plato" src="assets/img/icono-plato.svg">
21 </div> 21 </div>
22 <div class="col-auto align-self-center text-white">comer acá</div> 22 <div class="col-auto align-self-center text-white">comer acá</div>
23 <div class="col-auto align-self-center p-0"> 23 <div class="col-auto align-self-center p-0">
24 <img class="p-1 img-ir" src="assets/img/ir.svg"> 24 <img class="p-1 img-ir" src="assets/img/ir.svg">
25 </div> 25 </div>
26 </div> 26 </div>
27 </div> 27 </div>
28 </div> 28 </div>
29 </div> 29 </div>
30 <div class="row h-15 justify-content-center mx-0"> 30 <div class="row h-15 justify-content-center mx-0">
31 <div class="col-auto px-0 h-auto align-self-start"> 31 <div class="col-auto px-0 h-auto align-self-start">
32 <div 32 <div
33 class="btn-effect col-auto align-self-center px-0 bg-white" 33 class="btn-effect col-auto align-self-center px-0 bg-white"
34 (click)="goBack()"> 34 (click)="goTo('/seleccion-productos')">
35 <div class="row mx-0 bg-primary badge-pill"> 35 <div class="row mx-0 bg-primary badge-pill">
36 <div class="col-auto p-0"> 36 <div class="col-auto p-0">
37 <img class="p-1 img-plato" src="assets/img/icono-take-away.svg"> 37 <img class="p-1 img-plato" src="assets/img/icono-take-away.svg">
38 </div> 38 </div>
39 <div class="col-auto align-self-center text-white">para llevar</div> 39 <div class="col-auto align-self-center text-white">para llevar</div>
40 <div class="col-auto align-self-center p-0"> 40 <div class="col-auto align-self-center p-0">
41 <img class="p-1 img-ir" src="assets/img/ir.svg"> 41 <img class="p-1 img-ir" src="assets/img/ir.svg">
42 </div> 42 </div>
43 </div> 43 </div>
44 </div> 44 </div>
45 </div> 45 </div>
46 </div> 46 </div>
47 </div> 47 </div>
48 </div> 48 </div>
49 49
src/app/modules/opcion-pedido/opcion-pedido.component.ts
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Router } from '@angular/router';
2 3
3 @Component({ 4 @Component({
4 selector: 'app-opcion-pedido', 5 selector: 'app-opcion-pedido',
5 templateUrl: './opcion-pedido.component.html', 6 templateUrl: './opcion-pedido.component.html',
6 styleUrls: ['./opcion-pedido.component.scss'] 7 styleUrls: ['./opcion-pedido.component.scss']
7 }) 8 })
8 export class OpcionPedidoComponent implements OnInit { 9 export class OpcionPedidoComponent implements OnInit {
9 10
10 constructor() { } 11 constructor(
12 private router: Router,
13 ) { }
11 14
12 ngOnInit() { 15 ngOnInit() {
13 } 16 }
14 17
18 goTo(path) {
19 this.router.navigate([path]);
20 }
21
15 } 22 }
16 23
src/app/modules/seleccion-productos/seleccion-productos-routing.module.ts
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 { SeleccionProductosComponent } from './seleccion-productos.component';
3 4
4 5 const routes: Routes = [
5 const routes: Routes = []; 6 { path: '', component: SeleccionProductosComponent }
7 ];
6 8
7 @NgModule({ 9 @NgModule({
8 imports: [RouterModule.forChild(routes)], 10 imports: [RouterModule.forChild(routes)],
9 exports: [RouterModule] 11 exports: [RouterModule]
10 }) 12 })
11 export class SeleccionProductosRoutingModule { } 13 export class SeleccionProductosRoutingModule { }
12 14
src/app/modules/seleccion-productos/seleccion-productos.component.html
1 <p>seleccion-productos works!</p> 1 <div class="h-92 bg-white">
2 <!-- PUBLICIDADES -->
3 <div class="row mx-0 h-10">
4 <div class="col-12 p-3 h-100">
5 <div class="bg-dark h-100"></div>
6 </div>
7 </div>
8 <div class="h-90">
9 <!-- CABECERA -->
10 <div class="row mx-4 h-auto border border-primary rounded-sm">
11 <div class="col-12 p-2 align-self-center">
12 <div class="px-3">
13 <span class="">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</span>
14 </div>
15 </div>
16 </div>
17 <!-- CUERPO -->
18 <div class="row mr-4 h-75">
19 <div class="col-12 h-100 px-0 py-3">
20 <div class="row mx-0 h-100">
21 <!-- FILTRO CATEGORIAS -->
22 <div class="col-md-3 col-xl-2 h-100">
23 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
24 <div class="row mx-0 h-94 align-items-center">
25 <div class="col-12 h-5">
26 <img
27 draggable="false"
28 ondragstart="return false;"
29 (contextmenu)="false"
30 class="h-100 d-block mx-auto rotate-90-neg"
31 src="assets/img/ir-color.svg"
32 (mousedown)="scroll(elem, -80)" (mouseup)="mouseup()" (mouseleave)="mouseup()">
33 </div>
34 <div #elem class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
35 <div
36 class="row mx-4 mb-2 h-32 justify-content-center tab"
37 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
38 (click)="selectCategoria(i)"
39 *ngFor="let categoria of categorias; let i = index;">
40 <img class="col-12 h-50 align-self-end" src="assets/img/ir-color.svg">
41 <small
42 class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}
43 </small>
44 </div>
45 </div>
46 <div class="col-12 h-5">
47 <img
48 draggable="false"
49 ondragstart="return false;"
50 (contextmenu)="false"
51 class="h-100 d-block mx-auto rotate-90"
52 src="assets/img/ir-color.svg"
53 (mousedown)="scroll(elem, 80)" (mouseup)="mouseup()" (mouseleave)="mouseup()">
54 </div>
55 </div>
56 </div>
57 <div class="col-md-9 col-xl-10 bg-danger">
58 </div>
59 </div>
60 </div>
61 </div>
62 <div class="row mx-0 h-20 bg-primary">
63
64 </div>
65 </div>
66
67 </div>
2 68
src/app/modules/seleccion-productos/seleccion-productos.component.scss
1 $primary: #aa006b;
2
3 .rounded-right {
4 border-top-right-radius: 1.5rem !important;
5 border-bottom-right-radius: 1.5rem !important;
6 }
7
8 .box-categorias {
9 height: calc(100% - 100px) !important;
10 }
11
12 .active {
13 background-color: white;
14 border-bottom: 3px solid $primary !important;
15 }
16
17 .border-bottom-effect {
18 border: none;
19 position: relative;
20 &:hover {
21 border: none;
22 }
23 &::after {
24 content: "";
25 position: absolute;
26 width: 0px;
27 height: 3px;
28 left: 50%;
29 bottom: 0;
30 background-color: $primary;
31 transition: all ease-in-out 0.2s;
32 }
33 &:hover::after {
34 width: 100%;
35 left: 0;
36 }
37 }
38
src/app/modules/seleccion-productos/seleccion-productos.component.ts
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 2
3 @Component({ 3 @Component({
4 selector: 'app-seleccion-productos', 4 selector: 'app-seleccion-productos',
5 templateUrl: './seleccion-productos.component.html', 5 templateUrl: './seleccion-productos.component.html',
6 styleUrls: ['./seleccion-productos.component.scss'] 6 styleUrls: ['./seleccion-productos.component.scss']
7 }) 7 })
8 export class SeleccionProductosComponent implements OnInit { 8 export class SeleccionProductosComponent implements OnInit {
9 timeoutHandler: any;
10 categorias = [
11 { id: 1, selected: false },
12 { id: 2, selected: false },
13 { id: 3, selected: false },
14 ];
9 15
10 constructor() { } 16 constructor() { }
11 17
12 ngOnInit() { 18 ngOnInit() {
13 } 19 }
14 20
21 selectCategoria(index: number) {
22 this.categorias.forEach((categoria, i) => {
23 categoria.selected = index === i ? true : false;
24 });
25 }
26
27 mouseup() {
28 if (!this.timeoutHandler) return;
29 clearInterval(this.timeoutHandler);
30 }
31
32 scroll(el: HTMLElement, value) {
33 el.scroll({ behavior: 'smooth', top: (value + el.scrollTop) });
34 this.timeoutHandler = setInterval(() => {
35 el.scroll({ behavior: 'smooth', top: (value + el.scrollTop) });
36 }, 500);
37 }
38
15 } 39 }
16 40
src/assets/img/ir-color.svg
File was created 1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 <!-- Creator: CorelDRAW X7 -->
4 <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="19.8306mm" height="19.8306mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
5 viewBox="0 0 523 523"
6 xmlns:xlink="http://www.w3.org/1999/xlink">
7 <defs>
8 <style type="text/css">
9 <![CDATA[
10 .fil0 {fill:#AA006B;fill-rule:nonzero}
11 ]]>
12 </style>
13 </defs>
14 <g id="Capa_x0020_1">
15 <metadata id="CorelCorpID_0Corel-Layer"/>
16 <path class="fil0" d="M262 0c72,0 137,29 185,77 47,47 76,112 76,185 0,72 -29,137 -76,185 -48,47 -113,76 -185,76 -73,0 -138,-29 -185,-76 -48,-48 -77,-113 -77,-185 0,-73 29,-138 77,-185 47,-48 112,-77 185,-77zm169 92c-43,-43 -103,-70 -169,-70 -66,0 -126,27 -170,70 -43,44 -70,104 -70,170 0,66 27,126 70,169 44,43 104,70 170,70 66,0 126,-27 169,-70 43,-43 70,-103 70,-169 0,-66 -27,-126 -70,-170zm-202 32l110 138 -110 137 -16 -16 95 -121 -95 -122 16 -16z"/>
17 </g>
18 </svg>
19
1 @import "scss/styles-bootstrap.scss"; 1 @import "scss/styles-bootstrap.scss";
2 @import "scss/height-width.scss"; 2 @import "scss/height-width.scss";
3 @import "scss/animations.scss"; 3 @import "scss/animations.scss";
4 @import "scss/icons.scss"; 4 @import "scss/icons.scss";
5 @import "node_modules/bootstrap/scss/_variables.scss"; 5 @import "node_modules/bootstrap/scss/_variables.scss";
6 6
7 @font-face { 7 @font-face {
8 font-family: "Gotham"; 8 font-family: "Gotham";
9 font-style: normal; 9 font-style: normal;
10 font-weight: normal; 10 font-weight: normal;
11 src: url("assets/fonts/gotham-medium.woff") format("woff"); 11 src: url("assets/fonts/gotham-medium.woff") format("woff");
12 } 12 }
13 13
14 html, 14 html,
15 body { 15 body {
16 min-height: 100vh; 16 min-height: 100vh;
17 max-height: 100vh; 17 max-height: 100vh;
18 height: 100vh; 18 height: 100vh;
19 background-color: #fcf2e3; 19 background-color: #fcf2e3;
20 font-family: "Gotham"; 20 font-family: "Gotham";
21 overflow: hidden; 21 overflow: hidden;
22 user-select: none; 22 user-select: none;
23 } 23 }
24 24
25 .btn-effect { 25 .btn-effect {
26 transition: all 0.3s; 26 transition: all 0.3s;
27 &:hover { 27 &:hover {
28 cursor: pointer; 28 cursor: pointer;
29 opacity: 0.8; 29 opacity: 0.7;
30 } 30 }
31 &:active { 31 &:active {
32 transform: scale(1.02); 32 transform: scale(1.02);
33 } 33 }
34 } 34 }
35 35
36 .cursor-pointer { 36 .cursor-pointer {
37 cursor: pointer; 37 cursor: pointer;
38 } 38 }
39 39
40 p { 40 p {
41 margin: 0 !important; 41 margin: 0 !important;
42 } 42 }
43 43
44 .rounded { 44 .rounded {
45 border-radius: 1.5rem !important; 45 border-radius: 1.5rem !important;
46 } 46 }
47 47
48 .rounded-sm { 48 .rounded-sm {
49 border-radius: 0.5rem !important; 49 border-radius: 0.5rem !important;
50 } 50 }
51 51
52 .img-in-top { 52 .img-in-top {
53 position: absolute; 53 position: absolute;
54 top: -35px; 54 top: -35px;
55 left: 50%; 55 left: 50%;
56 height: 70px; 56 height: 70px;
57 -webkit-transform: translateX(-50%); 57 -webkit-transform: translateX(-50%);
58 transform: translateX(-50%); 58 transform: translateX(-50%);
59 } 59 }
60
61 .rotate-90 {
62 transform: rotate(90deg);
63 }
64
65 .rotate-90-neg {
66 transform: rotate(-90deg);
67 }
68
69 .scroll-y {
70 overflow-y: auto;
71 scrollbar-width: none;
72 &::-webkit-scrollbar {
73 display: none;
74 }
75 }
60 76
1 { 1 {
2 "compileOnSave": false, 2 "compileOnSave": false,
3 "compilerOptions": { 3 "compilerOptions": {
4 "baseUrl": "./", 4 "baseUrl": "./",
5 "outDir": "./dist/out-tsc", 5 "outDir": "./dist/out-tsc",
6 "sourceMap": true, 6 "sourceMap": true,
7 "declaration": false, 7 "declaration": false,
8 "downlevelIteration": true, 8 "downlevelIteration": true,
9 "experimentalDecorators": true, 9 "experimentalDecorators": true,
10 "module": "esnext", 10 "module": "esnext",
11 "moduleResolution": "node", 11 "moduleResolution": "node",
12 "importHelpers": true, 12 "importHelpers": true,
13 "target": "es2015", 13 "target": "es5",
14 "typeRoots": [ 14 "typeRoots": [
15 "node_modules/@types" 15 "node_modules/@types"
16 ], 16 ],
17 "lib": [ 17 "lib": [
18 "es2018", 18 "es2018",
19 "dom" 19 "dom"
20 ] 20 ]
21 }, 21 },
22 "angularCompilerOptions": { 22 "angularCompilerOptions": {
23 "fullTemplateTypeCheck": true, 23 "fullTemplateTypeCheck": true,
24 "strictInjectionParameters": true 24 "strictInjectionParameters": true
25 } 25 }
26 } 26 }
27 27