Merge pull request #111 from FelipeMarques06/paginasCriticas

Construção da página de Críticas literárias

src/app/app-routing.module.ts

@@ -93,6 +93,11 @@ const routes: Routes = [
     loadChildren: () => import('./biblioteconomia/biblioteconomia.module').then(c => c.BiblioteconomiaModule),
     ...canActivate(enviarSemLogin)
   },
+  {
+    path: 'criticas',
+    loadChildren: () => import('./criticas/criticas.module').then(c => c.CriticasModule),
+    ...canActivate(enviarSemLogin)
+  },
   {
     path:'**',
     component: AppNotFoundComponent

src/app/criticas/critica/critica.component.html

@@ -0,0 +1,27 @@
+<div class="grid-container" *ngIf="criticas$ | async as critica; else loading">
+  <mat-toolbar color="accent">
+    <div class="titulo">
+      <h1 class="mat-h1"> CRÍTICAS LITERÁRIAS</h1>
+    </div>
+  </mat-toolbar>
+  <mat-grid-list cols="2" rowHeight="180px">
+    <mat-grid-tile *ngFor="let critica of criticas$ | async" [colspan]="critica.cols" [rowspan]="critica.rows">
+      <mat-card class="dashboard-card">
+        <mat-card-title-group>
+          <mat-card-title>{{critica.titulo}}</mat-card-title>
+          <mat-card-subtitle>{{critica.subtitulo}}</mat-card-subtitle>
+          <img mat-card-image class="imgcard" [src]="critica.img" [alt]="critica.titulo">
+        </mat-card-title-group>
+        <mat-card-content>
+          {{critica.resumo}}
+        </mat-card-content>
+      </mat-card>
+    </mat-grid-tile>
+  </mat-grid-list>
+</div>
+<ng-template #loading>
+  <div class="loading-spinner">
+    <mat-spinner></mat-spinner>
+  </div>
+</ng-template>
+

src/app/criticas/critica/critica.component.scss

@@ -0,0 +1,41 @@
+.grid-container {
+  margin: 20px;
+  max-width: 1080px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.dashboard-card {
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  right: 15px;
+  bottom: 15px;
+}
+
+.more-button {
+  position: absolute;
+  top: 5px;
+  right: 10px;
+}
+
+.dashboard-card-content {
+  text-align: justify;
+}
+
+.imgcard {
+  max-width: 150px;
+  max-height: 175px;
+}
+
+.loading-spinner{
+  background-color: rgb(221, 221, 221);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5rem;
+}
+
+.titulo{
+  margin-left: 400px;
+}

src/app/criticas/critica/critica.component.spec.ts

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

src/app/criticas/critica/critica.component.ts

@@ -0,0 +1,35 @@
+import { Critica } from './../modelos/critica';
+import { Component, OnInit } from '@angular/core';
+import { catchError, map, Observable, of } from 'rxjs';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { CriticaService } from '../service/critica.service';
+
+@Component({
+  selector: 'app-critica',
+  templateUrl: './critica.component.html',
+  styleUrls: ['./critica.component.scss']
+})
+export class CriticaComponent {
+
+  criticas$: Observable<Critica[]>;
+  criticas= this.breakpointObserver.observe(Breakpoints.Handset).pipe(
+    map(({ matches }) => {
+      if (matches) {
+        return this.criticas$;
+      }
+      return this.criticas$;
+    })
+  )
+
+  constructor(
+    private breakpointObserver: BreakpointObserver,
+    private criticaService: CriticaService
+  ) {
+    this.criticas$ = criticaService.listagemCriticas()
+      .pipe(
+        catchError(error =>{
+          return of([])
+        })
+      )
+  }
+}

src/app/criticas/criticas-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { CriticaComponent } from './critica/critica.component';
+
+const routes: Routes = [
+  {
+    path:'', component:CriticaComponent
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class CriticasRoutingModule { }

src/app/criticas/criticas.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CriticasRoutingModule } from './criticas-routing.module';
+import { CriticaComponent } from './critica/critica.component';
+import { MatListModule } from '@angular/material/list';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { AppMaterialModule } from '../app-compartilhado/app-material/app-material.module';
+import { AppCompartilhadoModule } from '../app-compartilhado/app-compartilhado.module';
+
+
+@NgModule({
+  declarations: [
+    CriticaComponent
+  ],
+  imports: [
+    CommonModule,
+    CriticasRoutingModule,
+    AppCompartilhadoModule,
+    AppMaterialModule,
+    MatTooltipModule,
+    MatButtonModule,
+    MatListModule
+  ]
+})
+export class CriticasModule { }

src/app/criticas/modelos/critica.ts

@@ -0,0 +1,9 @@
+export interface Critica {
+  titulo: string;
+  subtitulo: string;
+  img: string;
+  resumo: string;
+  completo: string;
+  cols: number,
+  rows: number
+}

src/app/criticas/service/critica.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CriticaService } from './critica.service';
+
+describe('CriticaService', () => {
+  let service: CriticaService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CriticaService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/criticas/service/critica.service.ts

@@ -0,0 +1,21 @@
+import { Critica } from './../modelos/critica';
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { first, tap } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CriticaService {
+
+  private readonly uriApi ="../../assets/critica.json"
+
+  constructor(private criticasDashboard: HttpClient) { }
+  listagemCriticas () {
+    return this.criticasDashboard.get<Critica[]>(this.uriApi)
+    .pipe(
+      first(),
+      tap(apiCriticas => console.log(apiCriticas))
+    )
+  }
+}

src/assets/critica.json

@@ -0,0 +1,56 @@
+[
+{
+  "titulo": "Dom Casmurro",
+  "subtitulo":"Machado de Assis",
+  "img": "../../assets/imagens/critica1.jpg",
+  "resumo":"É uma das grandes obras de Machado de Assis e confirma o olhar certeiro e crítico que o autor estendia sobre toda a sociedade brasileira. Também a temática do ciúme, provoca polêmicas em torno do caráter de uma das principais personagens femininas da literatura brasileira: Capitu.",
+  "completo":"Há uma discussão em torno da obra que alimenta os espíritos mais inflamados: Capitu traiu ou não seu marido Bento Santiago, o Bentinho? O romance, entretanto, presta-se a muitas leituras, e é interessante ver como a recepção ao livro se modificou com o passar do tempo. Quando foi lançado, era visto como o relato inquestionável de uma situação de adultério, do ponto de vista do marido traído. Depois dos anos 1960, quando questões relativas aos direitos da mulher assumiram importância maior em todo o mundo, surgiram interpretações que indicavam outra possibilidade: a de que a narrativa pudesse ser expressão de um ciúme doentio, que cega o narrador e o faz conceber uma situação imaginária de traição. Machado de Assis, autor sutil e de penetração aguda em questões sociais, arma o problema e testa seu leitor. É impressionante como isso vale ainda hoje, mais de um século depois do lançamento do livro. O romance é a história de um homem de posses que ama uma moça pobre e esperta e se casa com ela. Em sua velhice, ele escreve um romance de memórias para compreender melhor a vida.",
+  "cols": 1,
+  "rows": 2
+},
+{
+  "titulo": "O Cortiço",
+  "subtitulo":"Aluísio Azevedo",
+  "img": "../../assets/imagens/critica2.jpg",
+  "resumo":"Tendo como cenário uma habitação coletiva, o romance difunde as teses naturalistas, que explicam o comportamento dos personagens com base na influência do meio, da raça e do momento histórico.",
+  "completo":"O cortiço se projeta na obra mais do que os próprios personagens que ali vivem. Em um trecho do romance o narrador compara o cortiço a uma estrutura biológica (floresta), um organismo vivo que cresce e se desenvolve, aumentando as forças daninhas e determinando o caráter moral de quem habita seu interior. Mais do que empregar os preceitos do naturalismo, a obra mostra práticas recorrentes no Brasil do século XIX. Na situação de capitalismo incipiente, o explorador vivia muito próximo ao explorado, daí a estalagem de João Romão estar junto aos pobres moradores do cortiço. Ao lado, o burguês Miranda, de projeção social mais elevada que João Romão, vive em seu palacete com ares aristocráticos e teme o o crescimento do cortiço. Por isso pode-se dizer que “O Cortiço” não é somente um romance naturalista, mas uma alegoria do Brasil. O autor naturalista tinha uma tese a sustentar sua história. A intenção era provar, por meio da obra literária, como o meio, a raça e a história determinam o homem e o levam à degradação. A obra está a serviço de um argumento.",
+  "cols": 1,
+  "rows": 2
+},
+{
+  "titulo": "Um estudo em vermelho",
+  "subtitulo":"Arthur Doyle",
+  "img": "../../assets/imagens/critica3.jpg",
+  "resumo":"A obra narra o primeiro encontro do detetive Sherlock Holmes com seu fiel amigo Dr watson, imersos em mais um intrigante mistério a ser solucionado; a minúcia da narrativa permite ao leitor conhecer os costumes da época e os acontecimentos históricos, enriquecendo a trama do caso.",
+  "completo":"No início da história acompanhamos a vida de John Watson, um homem que se formou na Universidade de Londres no curso de medicina e não satisfeito com o diploma obtido, ingressa no curso para médico do exército e posteriormente é convocado e serve no exército inglês durante a Segunda Guerra Afegã. Após ser ferido durante o conflito Watson fica doente e sua saúde sofre um grande declínio, ele entra em licença médica e é enviado de volta para a Inglaterra com o objetivo de recuperar-se. Sem ter qualquer familiar, Watson resolve morar em Londres, mas na cidade ele acaba gastando praticamente todo o seu dinheiro ao se hospedar em um hotel e preocupado ele vê a necessidade de morar em um lugar mais barato. Em um bar Watson acabada encontrando de forma inesperada Stamford, um velho colega de trabalho que lhe apresenta a solução para o seu problema. Esse seu colega diz que tem outro conhecido que deseja encontrar um companheiro para dividir o aluguel de uma casa ou apartamento, mas ele é um homem de ideias esquisitas.",
+  "cols": 1,
+  "rows": 2
+},
+{
+  "titulo": "Gabriela, Cravo e Canela",
+  "subtitulo":"Jorge Amado",
+  "img": "../../assets/imagens/critica4.jpg",
+  "resumo":"O romance entre o sírio Nacib e a mulata Gabriela, um dos mais sedutores personagens femininos criados por Jorge Amado, tem como plano de fundo, em meados dos anos 1920, a luta pela modernização de Ilhéus, em desenvolvimento graças às exportações do cacau.",
+  "completo":"O livro consegue ser interessante por diversos aspectos, aborda valores morais, a hipocrisia, política local, bem como a história do cacau no Brasil. Lugares com Bataclã (o maior cabaré da cidade), o Bar Vesúvio, foram descritos e detalhados ao longo da obra. As conversas são baseadas nas fofocas que ocorreram na cidade. Gabriela, Cravo e Canela, é composta de vários núcleos, não limita-se ao romance entre os personagens Nacib e Gabriela. Personagens cativantes se fazem presentes na obra, como a luxuriosa Glória, a jovem revolucionária Malvina. Neste romance, a oposição entre os costumes tradicionais e a modernidade, o culto e o popular, são representados pelo personagens Nacib e Gabriela. Nacib possui uma vida confortável, casa própria e comida em abundância, não possui a felicidade, apenas quando está junto a Gabriela, que apesar de pouco ter, vive feliz.",
+  "cols": 1,
+  "rows": 2
+},
+{
+  "titulo": "O beco das ilusões perdidas",
+  "subtitulo":"William Gresham",
+  "img": "../../assets/imagens/critica5.jpg",
+  "resumo":"O jovem Stan Carlisle, carroceiro de um circo de variedades, assiste, em um misto de repulsa e curiosidade, a uma das principais atrações do lugar: um alcoólatra, decadente e entregue à própria imundice, é apresentado como um selvagem, sendo objeto de espanto, nojo e escárnio da multidão voyeurística. ",
+  "completo":"O beco das ilusões perdidas é um clássico noir que tem como ambientação a cidade de Nova York e aqui acompanhamos a história de Santon Stan Carlisle, um jovem ambicioso, inteligente, implacável, esperto, mas também carrancudo. Stan é um carroceiro que trabalha em um circo de variedades e em determinado momento assiste com uma certa aversão e asco, mas também com uma profunda curiosidade uma das principais atrações: um certo alcoólatra e decadente visto como um homem selvagem que ao mesmo tempo é alvo das zombarias e nojo da multidão polvorosa que insisti em humilhá-lho. Stan fica pensando e se perguntando como um homem pode se sujeitar a tal de indignidade, pois tal exposição somente leva o sujeito ao campo da humilhação, não há nada digno no seu trabalho. Diante de tal cenário Stan jura que tal desgraça jamais vai acontecer com ele, mas se algo semelhante acontecer, ele não sabe como vai se comportar.",
+  "cols": 1,
+  "rows": 2
+},
+{
+  "titulo": "A ilha misteriora",
+  "subtitulo":"Julio Verne",
+  "img": "../../assets/imagens/critica6.jpg",
+  "resumo":"Júlio Verne aborda a luta do homem contra as forças da natureza. O homem é frágil e está consciente de que a natureza pode esmagá-lo, porém, uma vez armado de conhecimentos científicos e habilidades técnicas, não apenas se livra do poderio dela como também a submete, à sua própria vontade de ferro.",
+  "completo":"Aqui acompanhamos a vida e aventuras de cinco pessoas que naufragaram do ar: Cyrus Smith (o engenheiro ferroviário da União), o criado Neb, o marinheiro Bonadventure Pencroft; seu filho adotivo Herbert; e o jornalista Gideon Spilett. O grupo ainda conta com a companhia de Top, o cão de Cyrus. O grupo estava no meio da Guerra Civil Americana e queriam fugir desse inferno de qualquer forma, mas a única forma que esses amigos encontraram para escapar dessa guerra foi através dos céus, fugindo por meio de um balão de ar quente. Contudo, o destino costuma pregar peças e por vezes ser cruel, tendo em vista que eles conseguiram fugir da Guerra Civil Americana e dos Confederados, mas foram surpreendidos por uma forte tempestade que deixou o balão desgovernado por dias. O grande problema é que eles são lançados em uma ilha desconhecida, de origem vulcânica no meio do nada no Pacífico Sul, longe de qualquer civilização. A ilha é um local novo para o grupo desbravar e procurar formar de sobreviver, o grande problema é que eles estão sem qualquer tipo de armas, ferramentas e até mesmo objetos pessoais para ajudar nessa empreitada, eles precisam começar praticamente do zero para arregimentar a sua sobrevivência. ",
+  "cols": 1,
+  "rows": 2
+}
+]

src/assets/menuNavegador.json

@@ -3,5 +3,6 @@
   {"linkMenu": "/feed", "labelMenu":"Feed de Notícias", "hab": true},
   {"linkMenu": "/reportagem", "labelMenu":"Especial do Mês", "hab": true},
   {"linkMenu": "/duvidas", "labelMenu":"Dúvidas Frequentes", "hab": true},
-  {"linkMenu": "/ajuda", "labelMenu":"Possíveis Erros", "hab": true}
+  {"linkMenu": "/ajuda", "labelMenu":"Possíveis Erros", "hab": true},
+  {"linkMenu": "/criticas", "labelMenu":"Críticas Literárias", "hab": true}
 ]