[PE-300] Hotfix/passport-eventsimage

src/app/app.module.ts

@@ -74,7 +74,6 @@ import { ActivitiesViewPage } from '../pages/activities/view/activities-view.pag
 import { AssessmentsPage } from '../pages/assessments/assessments.page';
 import { AssessmentsGroupPage } from '../pages/assessments/group/assessments-group.page';
 import { EventCheckinPage } from '../pages/events/checkin/event-checkin.page';
-import { EventsComponent } from '../components/events/events.component';
 import { EventsDownloadPage } from '../pages/events/download/events-download.page';
 import { EventsListPage } from '../pages/events/list/list.page';
 import { EventsPreviewPage } from '../pages/events/download/events-preview.page';
@@ -115,6 +114,7 @@ import { EscapeHtmlPipe } from '../pipes/keep-html.pipe';
 import { OrderByPipe } from '../pipes/OrderBy';
 // directives
 import { CardHeightDirective } from '../components/event/card-height.directive';
+import { ImgDirective } from '../components/event/img.directive';
 // configs
 import { default as Configure } from '../configs/config';
 // AoT requires an exported function for factories
@@ -134,9 +134,9 @@ export function HttpLoaderFactory(http: Http) {
     AssessmentsPage,
     CutWithoutDotPipe,
     CardHeightDirective,
+    ImgDirective,
     EventCheckinPage,
     EventComponent,
-    EventsComponent,
     EventsDownloadPage,
     EventsListPage,
     EventsPreviewPage,
@@ -274,7 +274,6 @@ export function HttpLoaderFactory(http: Http) {
     AssessmentsPage,
     EventCheckinPage,
     EventComponent,
-    EventsComponent,
     EventsDownloadPage,
     EventsListPage,
     EventsPreviewPage,

src/components/event/event.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { NavController } from 'ionic-angular';
 import { EventService } from '../../services/event.service';
 import { CardHeightDirective } from './card-height.directive';
@@ -7,11 +7,26 @@ import * as moment from 'moment';
 
 @Component({
   selector: 'event',
-  templateUrl: 'event.html'
+  templateUrl: 'event.html',
+  host: {
+    event: '[event]',
+  }
 })
-export class EventComponent {
+export class EventComponent implements OnInit {
   @Input() event: any;
-
+  @Input() eventLogo: string;
+  @Input() eventLogoRecommend: string;
+
+  constructor(
+    public navCtrl: NavController,
+    private eventService: EventService
+  ) { }
+
+  ngOnInit() {
+    this.eventLogo = this.event.eventLogo;
+    this.eventLogoRecommend = this.event.eventLogoRecommend;
+  }
+
   // Check event has been booked
   isBookedEvent(event) {
     return (event.isBooked === true && moment().isBefore(moment.utc(event.end).local()));
@@ -21,10 +36,6 @@ export class EventComponent {
   isAttendedEvent(event) {
     return (event.isBooked === true && moment().isAfter(moment.utc(event.end).local()));
   }
-  constructor(
-    public navCtrl: NavController,
-    private eventService: EventService
-  ) {}
 
   download() {
     this.eventService.downloadAttachment(this.event);

src/components/event/event.html

@@ -19,9 +19,10 @@
       <p class="lighter">{{ event.location }}</p>
       <p class="lighter">{{ event.activity.name }}</p>
     </ion-col>
+
     <ion-col col-6 class="event-logo">
-        <img *ngIf="event.isOriginal" [src]="eventLogo" />
-        <img *ngIf="!event.isOriginal" [src]="eventLogoRecommend" />
+      <img *ngIf="event.isOriginal && eventLogo" [src]="eventLogo" />
+      <img *ngIf="!event.isOriginal && eventLogoRecommend" [src]="eventLogoRecommend" />
     </ion-col>
   </ion-row>
 </ion-card>

src/components/event/img.directive.ts

@@ -0,0 +1,20 @@
+import { Directive, Input } from '@angular/core';
+
+@Directive({
+  selector: 'img[src]',
+  host: {
+    '[src]': 'src',
+    '(error)': 'handleError()',
+  },
+})
+
+export class ImgDirective {
+  @Input() src: string;
+
+  // Handle error when:
+  // - broken link
+  // - bad image
+  handleError() {
+    this.src = '';
+  }
+}

src/pages/events/view/events-view.html

@@ -23,8 +23,8 @@
         <p class="lighter">{{ event.activity.name }}</p>
       </ion-col>
       <ion-col col-6>
-        <img *ngIf="event.isOriginal" [src]="eventLogo" />
-        <img *ngIf="!event.isOriginal" [src]="eventLogoRecommend" />
+        <img *ngIf="event.isOriginal && eventLogo" [src]="eventLogo" />
+        <img *ngIf="!event.isOriginal && eventLogoRecommend" [src]="eventLogoRecommend" />
       </ion-col>
     </ion-row>
   </ion-list>

src/pages/events/view/events-view.page.ts

@@ -51,7 +51,7 @@ export class EventsViewPage {
   public submissions: Array<any> = [];
   public isReadonly: boolean = false;
   public config: any = {};
- 
+
   constructor(
     private navParams: NavParams,
     private navCtrl: NavController,