atualizaçoes secao 10

secao10/app2/src/app/app.module.ts

@@ -12,6 +12,8 @@ import { DiversaoComponent } from './diversao/diversao.component';
 import { RouterModule } from '@angular/router';
 import { AbstractDisplayComponent } from './shared/abstract.display.component';
 import { OfertaComponent } from './oferta/oferta.component';
+import { ComoUsarComponent } from './oferta/como-usar/como-usar.component';
+import { OndeFicaComponent } from './oferta/onde-fica/onde-fica.component';
 
 @NgModule({
   declarations: [
@@ -21,7 +23,9 @@ import { OfertaComponent } from './oferta/oferta.component';
     RodapeComponent,
     RestaurantesComponent,
     DiversaoComponent,
-    OfertaComponent
+    OfertaComponent,
+    ComoUsarComponent,
+    OndeFicaComponent
   ],
   imports: [
     BrowserModule,

secao10/app2/src/app/app.routes.ts

@@ -1,3 +1,5 @@
+import { OndeFicaComponent } from './oferta/onde-fica/onde-fica.component';
+import { ComoUsarComponent } from './oferta/como-usar/como-usar.component';
 import { OfertaComponent } from './oferta/oferta.component';
 import { DiversaoComponent } from './diversao/diversao.component';
 import { RestaurantesComponent } from './restaurantes/restaurantes.component';
@@ -9,6 +11,11 @@ export const ROUTES: Routes = [
     { path: 'restaurantes', component: RestaurantesComponent},
     { path: 'diversao', component: DiversaoComponent},
     { path: 'oferta', component: HomeComponent},
-    { path: 'oferta/:id', component: OfertaComponent}
-
-]
+    { path: 'oferta/:id', component: OfertaComponent,
+        children: [
+                    {path: '', component: HomeComponent},
+                    {path: 'como-utilizar', component: ComoUsarComponent},
+                    {path: 'onde-fica', component: OndeFicaComponent}
+        ]
+    }
+];

secao10/app2/src/app/oferta/como-usar/como-usar.component.html

@@ -0,0 +1 @@
+<p>como-usar works!</p>

secao10/app2/src/app/oferta/como-usar/como-usar.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComoUsarComponent } from './como-usar.component';
+
+describe('ComoUsarComponent', () => {
+  let component: ComoUsarComponent;
+  let fixture: ComponentFixture<ComoUsarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ComoUsarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ComoUsarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

secao10/app2/src/app/oferta/como-usar/como-usar.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-como-usar',
+  templateUrl: './como-usar.component.html',
+  styleUrls: ['./como-usar.component.css']
+})
+export class ComoUsarComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

secao10/app2/src/app/oferta/oferta.component.html

@@ -1,5 +1,5 @@
 <div class="container">
-  <div class="oferta">
+  <div class="oferta" *ngIf="oferta != undefined">
 
     <div class="row">
       <div class="col">
@@ -9,14 +9,11 @@ <h4>{{oferta.descricao_oferta}}</h4>
     <div class="row">
       <div class="col-md-6">
         <div class="img_capa">
-          <img [src]="oferta.imagens[0].url" />          
+          <img [src]="oferta.imagens[0].url" />
         </div>
 
         <div class="thumbnails">
-
-          <img *ngIf="oferta.imagens[1] != undefined" [src]="oferta.imagens[1].url" />          
-          <img *ngIf="oferta.imagens[2] != undefined" [src]="oferta.imagens[2].url" />          
-          <img *ngIf="oferta.imagens[3] != undefined" [src]="oferta.imagens[3].url" />          
+          <img *ngFor="let imagem of oferta.imagens" [src]="imagem.url" />
         </div>
       </div>
 
@@ -25,7 +22,7 @@ <h4>{{oferta.descricao_oferta}}</h4>
           <div class="col text-center">
             <p>Por apenas</p>
           </div>
-          
+
         </div>
 
         <div class="row">
@@ -39,10 +36,26 @@ <h1>R$ {{oferta.valor}}</h1>
             <button type="button" class="btn btn-warning btn-lg">Adicionar ao carrinho</button>
           </div>
         </div>
-          
+
       </div>
 
     </div>
 
   </div>
+
+  <div class="row" style="margin-top: 25px; margin-bottom: 150px;">
+    <div class="col">     
+      <nav>
+        <div class="nav nav-tabs" id="nav-tab" role="tablist">          
+          <a class="nav-item nav-link" data-toggle="tab" routerLink="como-utilizar" role="tab">Como utilizar?</a>
+          <a class="nav-item nav-link" data-toggle="tab" routerLink="onde-fica" role="tab">Onde fica?</a>                    
+        </div>
+      </nav>
+      <div class="tab-content">
+        <router-outlet></router-outlet>
+      </div>
+
+    </div>
+  </div>
+
 </div>

secao10/app2/src/app/oferta/onde-fica/onde-fica.component.html

@@ -0,0 +1 @@
+<p>onde-fica works!</p>

secao10/app2/src/app/oferta/onde-fica/onde-fica.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OndeFicaComponent } from './onde-fica.component';
+
+describe('OndeFicaComponent', () => {
+  let component: OndeFicaComponent;
+  let fixture: ComponentFixture<OndeFicaComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OndeFicaComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OndeFicaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

secao10/app2/src/app/oferta/onde-fica/onde-fica.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-onde-fica',
+  templateUrl: './onde-fica.component.html',
+  styleUrls: ['./onde-fica.component.css']
+})
+export class OndeFicaComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

secao10/app2/src/app/ofertas.service.ts

@@ -1,3 +1,4 @@
+import { URL_API } from './shared/app.api';
 import { Oferta } from './shared/oferta.model';
 import { Http } from '@angular/http';
 import { Injectable } from '@angular/core';
@@ -8,23 +9,23 @@ export class OfertasService {
     constructor(private http: Http) {}
 
     public getOfertas(): Promise<Oferta[]> {
-        return this.http.get('http://localhost:3000/ofertas?destaque=true')
+        return this.http.get(`${URL_API}?destaque=true`)
             .toPromise()
             .then((resposta: any) => resposta.json());
         //this.http.get('http://localhost:3000/ofertas');  TODO ver depois como isso é implementado
     }
 
 
     public getOfertasPorCategoria(categoria: string): Promise<Oferta[]> {
-        return this.http.get(`http://localhost:3000/ofertas?categoria=${categoria}`)
+        return this.http.get(`${URL_API}?categoria=${categoria}`)
             .toPromise()
             .then((resposta: any) => resposta.json());
         //this.http.get('http://localhost:3000/ofertas');  TODO ver depois como isso é implementado
     }
 
 
     public getOfertasPorId(id: string): Promise<Oferta> {
-        return this.http.get(`http://localhost:3000/ofertas?id=${id}`)
+        return this.http.get(`${URL_API}?id=${id}`)
             .toPromise()
             .then((resposta: any) => resposta.json().shift());
     }

secao10/app2/src/app/shared/app.api.ts

@@ -0,0 +1 @@
+export const URL_API = 'http://localhost:3000/ofertas';