Merge pull request #7 from marcos-vcs/development

Development
marcos-vcs · Jun 9, 2023 · e922fde · e922fde
2 parents e85dbc7 + 96ad8f1
commit e922fde
Show file tree

Hide file tree

Showing 17 changed files with 152 additions and 33 deletions.
diff --git a/android/.idea/misc.xml b/android/.idea/misc.xml
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
     "@angular/language-service": "^14.0.0",
     "@capacitor/cli": "4.2.0",
     "@ionic/angular-toolkit": "^6.0.0",
-    "@ionic/lab": "3.2.13",
+    "@ionic/lab": "^3.2.13",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -11,23 +11,29 @@ import { DatePipe } from '@angular/common';
 import { NewsDetailComponent } from './components/news-detail/news-detail.component';
 import { SocialSharing } from '@awesome-cordova-plugins/social-sharing/ngx';
 import { AboutComponent } from './components/about/about.component';
+import { CardPhotoModule } from './components/card-photo/card-photo.module';
 
 @NgModule({
-  declarations: [AppComponent, NewsDetailComponent, AboutComponent],
-  imports: [
-    BrowserModule,
-    IonicModule.forRoot(),
-    AppRoutingModule,
-    HttpClientModule,
-  ],
-  providers: [
-    SocialSharing,
-    DatePipe,
-    HttpClient,
-    IbgeNoticeApiService,
-    FavoritesQuantityService,
-    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
-  ],
-  bootstrap: [AppComponent],
+    declarations: [
+        AppComponent,
+        NewsDetailComponent,
+        AboutComponent
+    ],
+    providers: [
+        SocialSharing,
+        DatePipe,
+        HttpClient,
+        IbgeNoticeApiService,
+        FavoritesQuantityService,
+        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+    ],
+    bootstrap: [AppComponent],
+    imports: [
+        BrowserModule,
+        IonicModule.forRoot(),
+        AppRoutingModule,
+        HttpClientModule,
+        CardPhotoModule
+    ]
 })
 export class AppModule {}
diff --git a/src/app/components/about/about.component.html b/src/app/components/about/about.component.html
@@ -43,8 +43,9 @@ <h3>Agradecimentos</h3>
 
         <p>Alguns amigos colaboraram na fase de testes e aprimoramento do projeto, são estes:</p>
         <ul>
-          <li>Caio Casimiro</li>
-          <li>Joyce Mara</li>
+          <li><a href="https://www.linkedin.com/in/ozeias-dos-santos-silva-ba937a127/">Ozéias dos Santos</a></li>
+          <li><a href="https://www.linkedin.com/in/eduarda-santos-alves/">Eduarda Santos</a></li>
+          <li><a href="https://www.linkedin.com/in/joyce-mara-m/">Joyce Mara</a></li>
         </ul>
 
       </ion-col>

diff --git a/src/app/components/card-photo/card-photo.component.html b/src/app/components/card-photo/card-photo.component.html
@@ -0,0 +1,6 @@
+<div class="img-container" *ngIf="loading">
+  <ion-skeleton-text id="skeleton" [animated]="true"></ion-skeleton-text>
+</div>
+<div class="img-container" [hidden]="loading">
+  <img *ngIf="photoUrl" [src]="photoUrl" (load)="onPhotoLoad()" (error)="onPhotoError()"/>
+</div>
diff --git a/src/app/components/card-photo/card-photo.component.scss b/src/app/components/card-photo/card-photo.component.scss
@@ -0,0 +1,25 @@
+.img-container {
+  margin-top: 15px;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.img-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+#skeleton{
+  border-radius: 5px;
+  width: 90vw;
+  max-width: 100%;
+  height: 200px;
+  max-height: 100%;
+}
diff --git a/src/app/components/card-photo/card-photo.component.spec.ts b/src/app/components/card-photo/card-photo.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { CardPhotoComponent } from './card-photo.component';
+
+describe('CardPhotoComponent', () => {
+  let component: CardPhotoComponent;
+  let fixture: ComponentFixture<CardPhotoComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CardPhotoComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CardPhotoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/card-photo/card-photo.component.ts b/src/app/components/card-photo/card-photo.component.ts
@@ -0,0 +1,32 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-card-photo',
+  templateUrl: './card-photo.component.html',
+  styleUrls: ['./card-photo.component.scss'],
+})
+export class CardPhotoComponent implements OnInit {
+  @Input() photoUrl: string;
+  loading: boolean;
+  errorImage = '../../../assets/no-found.png';
+
+  constructor(private http: HttpClient) { }
+
+  ngOnInit() {
+    this.loading = true;
+    this.http.get(this.photoUrl, { responseType: 'blob' }).subscribe(
+      () => {},
+      () => {}
+    );
+  }
+
+  onPhotoLoad() {
+    this.loading = false;
+  }
+
+  onPhotoError() {
+    this.photoUrl = this.errorImage;
+    this.loading = false;
+  }
+}
diff --git a/src/app/components/card-photo/card-photo.module.ts b/src/app/components/card-photo/card-photo.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CardPhotoComponent } from './card-photo.component';
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+  declarations: [CardPhotoComponent],
+  imports: [
+    CommonModule,
+    IonicModule,
+  ],
+  exports: [CardPhotoComponent]
+})
+export class CardPhotoModule {}
diff --git a/src/app/components/news-detail/news-detail.component.html b/src/app/components/news-detail/news-detail.component.html
@@ -10,7 +10,9 @@
 <ion-content class="ion-padding">
   <div id="title">{{data.article.title}}</div>
   <div id="subtitle">{{data.article.subtitle}}</div>
-  <div><img style="margin-top:10px;margin-bottom: 5px;" [src]="data.photos.image_fulltext" onerror="this.onerror=null;this.src='../../../assets/no-found.png'" width="100%"></div>
+  <div>
+    <app-card-photo [photoUrl]="data.photos.image_fulltext"></app-card-photo>
+  </div>
   <div id="publicacao-date">
     <div id="metadatas">{{data.article.metadata}}</div>
     Publicado em: {{data.data_publicacao.toString().split(' ')[0]}}

diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts
@@ -5,9 +5,11 @@ import { FormsModule } from '@angular/forms';
 import { HomePage } from './home.page';
 import { SwiperModule } from 'swiper/angular';
 import { HomePageRoutingModule } from './home-routing.module';
+import { CardPhotoModule } from '../components/card-photo/card-photo.module';
 
 @NgModule({
   imports: [
+    CardPhotoModule,
     SwiperModule,
     CommonModule,
     FormsModule,

diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html
@@ -73,8 +73,8 @@
                   <legend>Variação</legend>
                   R${{coin.varBid}}
                   <span *ngIf="coin.varBid < '0'">&nbsp;<ion-icon style="font-size: 17px; margin-bottom: -2px;"
-                      color="success" name="trending-down-outline"></ion-icon></span>
-                  <span *ngIf="coin.varBid > '0'">&nbsp;<ion-icon color="danger"
+                      color="danger" name="trending-down-outline"></ion-icon></span>
+                  <span *ngIf="coin.varBid > '0'">&nbsp;<ion-icon color="success"
                       name="trending-up-outline"></ion-icon></span>
                 </fieldset>
               </ion-col>
@@ -107,8 +107,7 @@
         {{item.titulo}}
       </ion-card-title>
       <ion-item *ngIf="item" (click)="openDetails(item)">
-        <ion-img class="mt-15" [src]="item.photos.image_intro" (ionError)="item.photos.image_intro = errorImage"
-          width="100%" #img></ion-img>
+          <app-card-photo [photoUrl]="item.photos.image_intro"></app-card-photo>
       </ion-item>
 
       <ion-card-subtitle *ngIf="item">

diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts
@@ -21,8 +21,9 @@ import { SocialSharing } from '@awesome-cordova-plugins/social-sharing/ngx';
   selector: 'app-home',
   templateUrl: 'home.page.html',
   styleUrls: ['home.page.scss'],
-  encapsulation: ViewEncapsulation.None,
+  encapsulation: ViewEncapsulation.None
 })
+
 export class HomePage implements OnInit {
   //#region variaveis
   @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
@@ -31,7 +32,7 @@ export class HomePage implements OnInit {
   startDate: Date;
   endDate: Date;
   atualFilter: string;
-  configuration: Configuration;
+  configuration: Configuration = new Configuration();
   coins: CoinsMetadata[] = [];
   news: News = new News();
   searchValue = '';

diff --git a/src/app/pages/favorites/favorites.module.ts b/src/app/pages/favorites/favorites.module.ts
@@ -4,9 +4,16 @@ import { FormsModule } from '@angular/forms';
 import { IonicModule } from '@ionic/angular';
 import { FavoritesPageRoutingModule } from './favorites-routing.module';
 import { FavoritesPage } from './favorites.page';
+import { CardPhotoModule } from 'src/app/components/card-photo/card-photo.module';
 
 @NgModule({
-  imports: [CommonModule, FormsModule, IonicModule, FavoritesPageRoutingModule],
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    FavoritesPageRoutingModule,
+    CardPhotoModule,
+  ],
   declarations: [FavoritesPage],
 })
 export class FavoritesPageModule {}
diff --git a/src/app/pages/favorites/favorites.page.html b/src/app/pages/favorites/favorites.page.html
@@ -59,8 +59,7 @@
         {{item.titulo}}
       </ion-card-title>
       <ion-item *ngIf="item" (click)="openDetails(item)">
-        <ion-img class="mt-15" [src]="item.photos.image_intro" (ionError)="item.photos.image_intro = errorImage"
-          width="100%"></ion-img>
+        <app-card-photo [photoUrl]="item.photos.image_intro"></app-card-photo>
       </ion-item>
 
       <ion-card-subtitle *ngIf="item">

diff --git a/src/app/pages/favorites/favorites.page.ts b/src/app/pages/favorites/favorites.page.ts
@@ -19,7 +19,7 @@ import { StorageService } from 'src/app/services/storage.service';
 })
 export class FavoritesPage implements OnInit {
   //#region variaveis
-  configuration: Configuration;
+  configuration: Configuration = new Configuration();
   news: Item[] = [];
   atualFilter: string;
   searchValue = '';
@@ -121,7 +121,6 @@ export class FavoritesPage implements OnInit {
         this.startDate.setDate(this.startDate.getDate() + 1);
         intervalos.push(this.getFormattedDate(this.startDate));
       }
-      console.log(intervalos);
       this.news = this.news.filter((f) => {
         intervalos.includes(f.data_publicacao);
       });