Commit ac964d0816946c62d733eb55334c641f1716b17e
1 parent
e635d1e96e
Exists in
master
and in
1 other branch
Creado componente comanda.
Showing
6 changed files
with
114 additions
and
1 deletions
Show diff stats
src/app/app-routing.module.ts
| ... | ... | @@ -9,6 +9,7 @@ import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.com |
| 9 | 9 | import { PagoComponent } from './components/pago/pago.component'; |
| 10 | 10 | import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component'; |
| 11 | 11 | import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component'; |
| 12 | +import { ComandaComponent } from './components/comanda/comanda.component'; | |
| 12 | 13 | |
| 13 | 14 | const routes: Routes = [ |
| 14 | 15 | { path: '', component: HomeComponent }, |
| ... | ... | @@ -18,6 +19,7 @@ const routes: Routes = [ |
| 18 | 19 | { path: 'pago', component: PagoComponent }, |
| 19 | 20 | { path: 'cancelar-compra', component: CancelarCompraComponent }, |
| 20 | 21 | { path: 'mensaje-final', component: MensajeFinalComponent }, |
| 22 | + { path: 'comanda', component: ComandaComponent }, | |
| 21 | 23 | { |
| 22 | 24 | path: '', |
| 23 | 25 | component: MasterComponent, |
src/app/app.module.ts
| ... | ... | @@ -31,6 +31,7 @@ import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.com |
| 31 | 31 | import { PagoComponent } from './components/pago/pago.component'; |
| 32 | 32 | import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component'; |
| 33 | 33 | import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component'; |
| 34 | +import { ComandaComponent } from './components/comanda/comanda.component'; | |
| 34 | 35 | //#endregion |
| 35 | 36 | |
| 36 | 37 | @NgModule({ |
| ... | ... | @@ -48,7 +49,8 @@ import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final. |
| 48 | 49 | AmbImagenesComponent, |
| 49 | 50 | PagoComponent, |
| 50 | 51 | CancelarCompraComponent, |
| 51 | - MensajeFinalComponent | |
| 52 | + MensajeFinalComponent, | |
| 53 | + ComandaComponent | |
| 52 | 54 | ], |
| 53 | 55 | imports: [ |
| 54 | 56 | BrowserModule, |
src/app/components/comanda/comanda.component.html
| ... | ... | @@ -0,0 +1,37 @@ |
| 1 | +<div class="container-fluid p-0"> | |
| 2 | + <div class="row m-1 fade-in disable-user-select"> | |
| 3 | + <div class="col-2 col-1-5 p-1" *ngFor="let item of itemsArray"> | |
| 4 | + <div | |
| 5 | + class="card rounded-sm shadow-sm" | |
| 6 | + [ngClass]="{ 'green-card': false, 'red-card': false }" | |
| 7 | + > | |
| 8 | + <img | |
| 9 | + class="card-img-top rounded-sm shadow" | |
| 10 | + src="{{ apiImagenes }}/imagenes/cerealitas.jpg" | |
| 11 | + /> | |
| 12 | + <div class="card-body px-1 py-2"> | |
| 13 | + <p class="h6 card-title">Title</p> | |
| 14 | + <p class="card-text">Text</p> | |
| 15 | + <button class="btn btn-block btn-danger shadow p-1">Elaborar</button> | |
| 16 | + <button class="btn btn-block btn-success shadow p-1"> | |
| 17 | + Terminado | |
| 18 | + </button> | |
| 19 | + <div class="row mt-2 m-0"> | |
| 20 | + <div class="col-6 p-0 pr-1"> | |
| 21 | + <button class="btn btn-block btn-secondary btn-sm shadow p-0"> | |
| 22 | + <span class="pr-1 h7"><small>Eliminar</small></span> | |
| 23 | + <i class="fa fa-trash" aria-hidden="true"></i> | |
| 24 | + </button> | |
| 25 | + </div> | |
| 26 | + <div class="col-6 p-0 pl-1"> | |
| 27 | + <button class="btn btn-block btn-light btn-sm shadow p-0"> | |
| 28 | + <span class="pr-1 h7"><small>En espera</small></span> | |
| 29 | + <i class="fa fa-undo text-warning" aria-hidden="true"></i> | |
| 30 | + </button> | |
| 31 | + </div> | |
| 32 | + </div> | |
| 33 | + </div> | |
| 34 | + </div> | |
| 35 | + </div> | |
| 36 | + </div> | |
| 37 | +</div> |
src/app/components/comanda/comanda.component.scss
| ... | ... | @@ -0,0 +1,28 @@ |
| 1 | +@media (min-width: 1200px) { | |
| 2 | + .col-1-5 { | |
| 3 | + flex: 0 0 12.5%; | |
| 4 | + max-width: 12.5%; | |
| 5 | + position: relative; | |
| 6 | + width: 100%; | |
| 7 | + padding-right: 15px; | |
| 8 | + padding-left: 15px; | |
| 9 | + } | |
| 10 | +} | |
| 11 | + | |
| 12 | +.h7 { | |
| 13 | + font-size: 0.75rem; | |
| 14 | +} | |
| 15 | + | |
| 16 | +.red-card { | |
| 17 | + background-color: #8c000e; | |
| 18 | + .card-body { | |
| 19 | + color: #fff; | |
| 20 | + } | |
| 21 | +} | |
| 22 | + | |
| 23 | +.green-card { | |
| 24 | + background-color: #00751B; | |
| 25 | + .card-body { | |
| 26 | + color: #fff; | |
| 27 | + } | |
| 28 | +} |
src/app/components/comanda/comanda.component.spec.ts
| ... | ... | @@ -0,0 +1,25 @@ |
| 1 | +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | |
| 2 | + | |
| 3 | +import { ComandaComponent } from './comanda.component'; | |
| 4 | + | |
| 5 | +describe('ComandaComponent', () => { | |
| 6 | + let component: ComandaComponent; | |
| 7 | + let fixture: ComponentFixture<ComandaComponent>; | |
| 8 | + | |
| 9 | + beforeEach(async(() => { | |
| 10 | + TestBed.configureTestingModule({ | |
| 11 | + declarations: [ ComandaComponent ] | |
| 12 | + }) | |
| 13 | + .compileComponents(); | |
| 14 | + })); | |
| 15 | + | |
| 16 | + beforeEach(() => { | |
| 17 | + fixture = TestBed.createComponent(ComandaComponent); | |
| 18 | + component = fixture.componentInstance; | |
| 19 | + fixture.detectChanges(); | |
| 20 | + }); | |
| 21 | + | |
| 22 | + it('should create', () => { | |
| 23 | + expect(component).toBeTruthy(); | |
| 24 | + }); | |
| 25 | +}); |
src/app/components/comanda/comanda.component.ts
| ... | ... | @@ -0,0 +1,19 @@ |
| 1 | +import { Component, OnInit } from '@angular/core'; | |
| 2 | +import { appSettings } from 'src/etc/AppSettings'; | |
| 3 | + | |
| 4 | +@Component({ | |
| 5 | + selector: 'app-comanda', | |
| 6 | + templateUrl: './comanda.component.html', | |
| 7 | + styleUrls: ['./comanda.component.scss'] | |
| 8 | +}) | |
| 9 | +export class ComandaComponent implements OnInit { | |
| 10 | + | |
| 11 | + private apiImagenes = appSettings.apiImagenes; | |
| 12 | + private itemsArray = [{},{},{},{},{},{},{},{}] | |
| 13 | + | |
| 14 | + constructor() { } | |
| 15 | + | |
| 16 | + ngOnInit() { | |
| 17 | + } | |
| 18 | + | |
| 19 | +} |