Update

Author: daniel-oliv3

webapp-027/src/app/app-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

webapp-027/src/app/app.component.css

@@ -0,0 +1,28 @@
+/*Principal*/
+.espaco {
+  margin: 20px;
+  padding: 20px;
+}
+
+.panel {
+  border: 1px solid gray;
+  border-radius: 5px;
+}
+
+.logo {
+  width: 8rem;
+  height: 8rem;
+}
+
+.btn {
+  margin-left: 10px;
+}
+
+.btn-size {
+  width: 150px;
+}
+
+
+
+
+

webapp-027/src/app/app.component.html

@@ -0,0 +1,27 @@
+<!--Principal-->
+<div class="container panel panel-default espaco">
+
+
+  <!-- Navegação -->
+  <div class="row">
+    <!--Logo-->
+    <div class="col-sm-6 col-xs-12">
+
+      <img src="../assets/logo1.png" class="logo">
+    </div>
+
+    <!--Botoes-->
+    <div class="col-sm-6 col-xs-12 text-right">
+      <button (click)="MostrarLoja()" class="btn btn-primary btn-size"> Loja </button>
+      <button (click)="MostrarStock()" class="btn btn-primary btn-size"> Estoque </button>
+    </div>
+  </div>
+
+
+
+
+
+  <app-loja *ngIf="loja_visivel"></app-loja>
+
+  <app-stock *ngIf="stock_visivel"></app-stock>
+</div>

webapp-027/src/app/app.component.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'webapp-027'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('webapp-027');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('webapp-027 app is running!');
+  });
+});

webapp-027/src/app/app.component.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'webapp-027';
+
+//variaveis que controlam a visibilidade dos componentes
+  loja_visivel: boolean = true;
+  stock_visivel: boolean = false;
+
+
+//Função MostrarLoja, apresenta a loja e remove o stock
+  MostrarLoja(){
+    this.loja_visivel = true;
+    this.stock_visivel = false;
+  }
+
+//Função MostrarStock, apresenta a stock e remove a loja
+  MostrarStock(){
+    this.loja_visivel = false;
+    this.stock_visivel = true;
+  }
+
+}

webapp-027/src/app/app.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { LojaComponent } from './loja/loja.component';
+import { StockComponent } from './stock/stock.component';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    LojaComponent,
+    StockComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

webapp-027/src/app/loja/loja.component.css

@@ -0,0 +1,18 @@
+/* Loja */
+.espaco{
+  margin: 20px;
+  padding: 20px;
+}
+
+.panel {
+  border: 1px solid gray;
+  border-radius: 5px;
+}
+
+.btn {
+  margin-left: 10px;
+}
+
+.btn-size {
+  width: 150px;
+}

webapp-027/src/app/loja/loja.component.html

@@ -0,0 +1,31 @@
+<!-- Loja -->
+<div class="row panel panel-default espaco">
+
+
+  <!-- Titulo -->
+  <div class="row"><h3> Loja </h3></div>
+
+
+  <!-- Conteudo Dinamico -->
+  <div class="row">
+    <i *ngFor="let produto of produtos">
+      <div class="col-xs-3">
+        <img src="../../assets/{{ produto.icon }}" alt=""><span> {{ produto.nome }}</span>
+      </div>
+    </i>
+  </div>
+
+
+  <!-- Botões -->
+  <div class="row text-right">
+      <button (click)="AdcAbacaxi()" class="btn btn-primary">+ Abacaxi</button>
+      <button (click)="AdcBanana()" class="btn btn-primary">+ Banana</button>
+      <button (click)="AdcLaranja()" class="btn btn-primary">+ Laranja</button>
+  </div>
+
+
+
+
+
+
+</div>

webapp-027/src/app/loja/loja.component.spec.ts

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

webapp-027/src/app/loja/loja.component.ts

@@ -0,0 +1,38 @@
+/* Loja */
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-loja',
+  templateUrl: './loja.component.html',
+  styleUrls: ['./loja.component.css']
+})
+export class LojaComponent {
+
+  produtos = [];
+
+
+  AdcAbacaxi(){
+    //Adiciona um abacaxi ao componente
+    this.produtos.push({
+      'icon': 'ico_abacaxi.png',
+      'nome': 'Abacaxi'
+    });
+  }
+
+  AdcBanana(){
+    //Adiciona uma banana ao componente
+    this.produtos.push({
+      'icon': 'ico_banana.png',
+      'nome': 'Banana'
+    });
+  }
+
+  AdcLaranja(){
+    //Adiciona uma laranja ao componente
+    this.produtos.push({
+      'icon': 'ico_laranja.png',
+      'nome': 'Laranja'
+    });
+  }
+
+}

webapp-027/src/app/stock/stock.component.css

@@ -0,0 +1 @@
+<p>Estoque</p>

webapp-027/src/app/stock/stock.component.html

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

webapp-027/src/app/stock/stock.component.spec.ts

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

webapp-027/src/app/stock/stock.component.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

webapp-027/src/assets/.gitkeep

@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

webapp-027/src/assets/abacaxi.png

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Loja</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <!--CDN Bootstrap-->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">
+</head>
+<body>
+
+
+  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>
+  <app-root></app-root>
+</body>
+</html>

webapp-027/src/assets/banana.png

@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));