Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 686e52a717cf0ebb1df1be4f70dc73c93af7d0a3

Authored by Marcelo Puebla
1 parent 5f5417202b
Exists in master and in 2 other branches 20200117-axion-responsive, develop

Arreglos en el archivo de routing y terminado filtro basice categorias

Showing 11 changed files with 193 additions and 15 deletions   Show diff stats
... ... @@ -6,12 +6,12 @@
6 6 "ng": "ng",
7 7 "start": "ng serve --port 4206 --host 0.0.0.0 --disableHostCheck",
8 8 "build": "ng build",
9   - "build-prod": "ng build --prod",
  9 + "build-prod": "ng build --prod --aot=true --build--optimizer=true",
10 10 "test": "ng test",
11 11 "lint": "ng lint",
12 12 "e2e": "ng e2e",
13 13 "electron": "electron .",
14   - "electron-build": "ng build --prod && electron .",
  14 + "electron-build": "ng build --prod --aot=true --build--optimizer=true && electron .",
15 15 "build-exe": "electron-packager . --platform=win32 --arch=x64 --asar"
16 16 },
17 17 "private": true,
src/app/app-routing.module.ts
Diff comments   View file @ 686e52a
... ... @@ -2,8 +2,6 @@ import { NgModule } from '@angular/core';
2 2 import { Routes, RouterModule } from '@angular/router';
3 3 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
4 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 6 const routes: Routes = [
9 7 { path: '', component: SplashScreenComponent },
... ... @@ -11,15 +9,25 @@ const routes: Routes = [
11 9 path: '',
12 10 component: AdminComponent,
13 11 children: [
14   - { path: 'formas-pago', loadChildren: () => FormasPagoModule },
15   - { path: 'opcion-pedido', loadChildren: () => OpcionPedidoModule },
  12 + {
  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 26 { path: '**', redirectTo: '', pathMatch: 'full' },
19 27 ];
20 28  
21 29 @NgModule({
22   - imports: [RouterModule.forRoot(routes)],
  30 + imports: [RouterModule.forRoot(routes, { useHash: true })],
23 31 exports: [RouterModule]
24 32 })
25 33 export class AppRoutingModule { }
src/app/modules/opcion-pedido/opcion-pedido.component.html
Diff comments   View file @ 686e52a
... ... @@ -14,7 +14,7 @@
14 14 <div class="col-auto px-0 h-auto align-self-start">
15 15 <div
16 16 class="btn-effect col-auto align-self-center px-0 bg-white"
17   - (click)="goBack()">
  17 + (click)="goTo('/seleccion-productos')">
18 18 <div class="row mx-0 bg-primary badge-pill">
19 19 <div class="col-auto p-0">
20 20 <img class="p-1 img-plato" src="assets/img/icono-plato.svg">
... ... @@ -31,7 +31,7 @@
31 31 <div class="col-auto px-0 h-auto align-self-start">
32 32 <div
33 33 class="btn-effect col-auto align-self-center px-0 bg-white"
34   - (click)="goBack()">
  34 + (click)="goTo('/seleccion-productos')">
35 35 <div class="row mx-0 bg-primary badge-pill">
36 36 <div class="col-auto p-0">
37 37 <img class="p-1 img-plato" src="assets/img/icono-take-away.svg">
src/app/modules/opcion-pedido/opcion-pedido.component.ts
Diff comments   View file @ 686e52a
1 1 import { Component, OnInit } from '@angular/core';
  2 +import { Router } from '@angular/router';
2 3  
3 4 @Component({
4 5 selector: 'app-opcion-pedido',
... ... @@ -7,9 +8,15 @@ import { Component, OnInit } from &#39;@angular/core&#39;;
7 8 })
8 9 export class OpcionPedidoComponent implements OnInit {
9 10  
10   - constructor() { }
  11 + constructor(
  12 + private router: Router,
  13 + ) { }
11 14  
12 15 ngOnInit() {
13 16 }
14 17  
  18 + goTo(path) {
  19 + this.router.navigate([path]);
  20 + }
  21 +
15 22 }
src/app/modules/seleccion-productos/seleccion-productos-routing.module.ts
Diff comments   View file @ 686e52a
1 1 import { NgModule } from '@angular/core';
2 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 9 @NgModule({
8 10 imports: [RouterModule.forChild(routes)],
src/app/modules/seleccion-productos/seleccion-productos.component.html
Diff comments   View file @ 686e52a
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>
src/app/modules/seleccion-productos/seleccion-productos.component.scss
Diff comments   View file @ 686e52a
... ... @@ -0,0 +1,37 @@
  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 +}
src/app/modules/seleccion-productos/seleccion-productos.component.ts
Diff comments   View file @ 686e52a
... ... @@ -6,10 +6,34 @@ import { Component, OnInit } from &#39;@angular/core&#39;;
6 6 styleUrls: ['./seleccion-productos.component.scss']
7 7 })
8 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 16 constructor() { }
11 17  
12 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 }
src/assets/img/ir-color.svg
Diff comments   View file @ 686e52a
... ... @@ -0,0 +1,18 @@
  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>
... ... @@ -26,7 +26,7 @@ body {
26 26 transition: all 0.3s;
27 27 &:hover {
28 28 cursor: pointer;
29   - opacity: 0.8;
  29 + opacity: 0.7;
30 30 }
31 31 &:active {
32 32 transform: scale(1.02);
... ... @@ -57,3 +57,19 @@ p {
57 57 -webkit-transform: translateX(-50%);
58 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 +}
... ... @@ -10,7 +10,7 @@
10 10 "module": "esnext",
11 11 "moduleResolution": "node",
12 12 "importHelpers": true,
13   - "target": "es2015",
  13 + "target": "es5",
14 14 "typeRoots": [
15 15 "node_modules/@types"
16 16 ],