Commit ac964d0816946c62d733eb55334c641f1716b17e
1 parent
e635d1e96e
Exists in
master
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 | +} |