Better support for multiple services (closes #108)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bolingbrook-church",
-  "version": "1.3.14",
+  "version": "1.4.0",
   "license": "MIT",
   "angular-cli": {},
   "scripts": {

src/app/components/molecules/sermon-card.html

@@ -1,10 +1,9 @@
 <a class="card" [routerLink]="route">
   <div class="wrapper">
-    <img [src]="image" [alt]="sermon.name">
+    <img [src]="image" [alt]="sermon.title">
     <div class="data">
-      <div *ngIf="sermon.image" class="icon" [style.background-image]="icon"></div>
       <div class="text">
-        <div class="title">{{ sermon.series }}</div>
+        <div class="title">{{ sermon.title }}</div>
         <div class="speaker">{{ sermon.speaker }}</div>
       </div>
       <span class="date">{{ sermon.date | date:'longDate' }}</span>

src/app/components/molecules/sermon-card.spec.ts

@@ -4,14 +4,6 @@ import { Sermon, SeriesImageService, Observable } from '../../services';
 
 describe('SermonCardComponent', () => {
 
-  describe('get image', () => {
-    it('should return a wrapped youtube url', () => {
-      const scc = new SermonCardComponent(null);
-      scc.sermon = { youtube: 'blah' } as Sermon;
-      expect(scc.image).to.contain('blah');
-    });
-  });
-
   describe('get route', () => {
     it('should return a route by date', () => {
       const scc = new SermonCardComponent(null);
@@ -20,12 +12,4 @@ describe('SermonCardComponent', () => {
     });
   });
 
-  describe('on init', () => {
-    it('should do nothing if there is no sermon image', () => {
-      const scc = new SermonCardComponent(null);
-      scc.sermon = { } as Sermon;
-      scc.ngOnInit();
-    });
-  });
-
 });

src/app/components/molecules/sermon-card.ts

@@ -8,26 +8,18 @@ import { Sermon, SeriesImageService } from '../../services';
   templateUrl: './sermon-card.html',
   styleUrls: [ './sermon-card.scss' ]
 })
-export class SermonCardComponent implements OnInit {
+export class SermonCardComponent {
 
   @Input()
   sermon: Sermon;
 
-  icon: SafeStyle;
-
   constructor(
     private service: SeriesImageService
   ) {}
 
-  ngOnInit() {
-    if (this.sermon.image) {
-      this.service.getSeriesImageStyle(this.sermon.image)
-        .subscribe(style => { this.icon = style; });
-    }
-  }
-
   get image(): string {
-    return `https://i.ytimg.com/vi/${this.sermon.youtube}/hqdefault.jpg`;
+    const youtube = this.sermon.services[0].youtube
+    return `https://i.ytimg.com/vi/${youtube}/hqdefault.jpg`;
   }
 
   get route(): string[] {

src/app/components/pages/admin/sermons.html

@@ -17,8 +17,8 @@ <h4>Add Another Sermon</h4>
 
       <div class="row">
         <mat-form-field>
-            <input matInput #newSermonDate type="date" name="new_sermon_date" placeholder="Date of Service">
-          </mat-form-field>
+          <input matInput #newSermonDate type="date" name="new_sermon_date" placeholder="Date of Service">
+        </mat-form-field>
         <button class="add" mat-mini-fab (click)="addSermon(newSermonDate.value)" [disabled]="!newSermonDate.value">
           <mat-icon>add</mat-icon>
         </button>
@@ -30,29 +30,38 @@ <h4>Sermons</h4>
         <mat-expansion-panel *ngFor="let s of sermons; let idx = index;">
           <mat-expansion-panel-header>
             <mat-panel-title>{{s.date}}</mat-panel-title>
-            <mat-panel-description>{{s.series}}</mat-panel-description>
+            <mat-panel-description>{{s.title}}</mat-panel-description>
           </mat-expansion-panel-header>
 
           <mat-form-field>
-            <input matInput [name]="'sermon_series_' + idx" [(ngModel)]="s.series" placeholder="Title / Series">
+            <input matInput [name]="'sermon_title_' + idx" [(ngModel)]="s.title" placeholder="Title">
+          </mat-form-field>
+          <mat-form-field>
+            <input matInput [name]="'sermon_series_' + idx" [(ngModel)]="s.series" placeholder="Series">
           </mat-form-field>
           <mat-form-field>
             <input matInput [name]="'sermon_speaker_' + idx" [(ngModel)]="s.speaker" placeholder="Speaker">
           </mat-form-field>
           <mat-form-field>
-            <input matInput [name]="'sermon_youtube_' + idx" [(ngModel)]="s.youtube" placeholder="Youtube ID">
+            <textarea matInput [name]="'sermon_description_' + idx" [(ngModel)]="s.description" placeholder="Description"></textarea>
           </mat-form-field>
           <mat-form-field>
-            <input matInput [name]="'sermon_second_youtube_' + idx" [(ngModel)]="s.second_youtube" placeholder="Second Youtube ID">
+            <input matInput [name]="'sermon_tags_' + idx" [(ngModel)]="s.tags" placeholder="Tags (comma separated)">
           </mat-form-field>
 
-          <mat-select placeholder="Series Image" [name]="'image_' + idx" [(ngModel)]="s.image">
-            <mat-option>None</mat-option>
-            <mat-option *ngFor="let i of images" [value]="i.name">
-              <div class="icon" [style.background-image]="i.style"></div> {{ i.name }}
-            </mat-option>
-          </mat-select>
-
+          <div class="services">
+            <div class="service" *ngFor="let ws of s.services; let ws_idx = index;">
+              <mat-form-field>
+                <input matInput [name]="'sermon_start_' + idx + ws_idx" type="time" [(ngModel)]="ws.start" name="start time" placeholder="Start Time">
+              </mat-form-field>
+              <mat-form-field>
+                <input matInput [name]="'sermon_identifier_' + idx + ws_idx" [(ngModel)]="ws.identifier" placeholder="Identifier">
+              </mat-form-field>
+              <mat-form-field>
+                <input matInput [name]="'sermon_youtube_' + idx + ws_idx" [(ngModel)]="ws.youtube" placeholder="Youtube ID">
+              </mat-form-field>
+            </div>
+          </div>
 
           <div class="command-row">
             <button mat-mini-fab class="add" (click)="saveSermon(s)">

src/app/components/pages/admin/sermons.ts

@@ -1,6 +1,7 @@
 import { OnInit, Component }  from '@angular/core';
 import { Router }             from '@angular/router';
 import { Secured }            from './secured';
+import * as moment            from 'moment'
 
 import {
   FirebaseService,
@@ -10,6 +11,7 @@ import {
   SeriesImageService,
   Sermon,
   SermonService,
+  WorshipService
 } from '../../../services';
 
 @Component({
@@ -68,11 +70,10 @@ export class SermonsComponent extends Secured implements OnInit {
   }
 
   addSermon(date: string): void {
-    const sermon = {
-      date: date,
-      series: '',
-      speaker: ''
-    } as Sermon;
+    const sermon = new Sermon(date, '', '', '', '', '', [
+      new WorshipService('10:30:00', 'Morning', ''),
+      new WorshipService('12:30:00', 'Afternoon', ''),
+    ]);
 
     this.service
       .saveSermon(sermon)

src/app/components/pages/giving.spec.ts

@@ -1,6 +1,6 @@
 import { expect, sinon, async, MockBuilder, stubOf }  from 'testing';
 import { GivingComponent }                            from './giving';
-import { Analytics, Observable }                      from 'app/services';
+import { Analytics, Observable, Aperture }            from 'app/services';
 
 /* tslint:disable: no-unused-expression */
 describe('GivingComponent', () => {
@@ -11,7 +11,9 @@ describe('GivingComponent', () => {
         .withStub('event', Observable.empty())
         .build();
 
-      const giving = new GivingComponent(analytics);
+      const aperture = { browser: false } as Aperture
+
+      const giving = new GivingComponent(analytics, aperture);
       expect(giving.give('easy')).to.be.false;
     });
 
@@ -27,7 +29,10 @@ describe('GivingComponent', () => {
 
         const location = {} as Location;
 
-        const giving = new GivingComponent(analytics);
+        const aperture = { browser: false } as Aperture
+
+        const giving = new GivingComponent(analytics, aperture);
+        giving.ngOnInit()
         giving._location = location;
         giving.give(type);
 
@@ -43,7 +48,9 @@ describe('GivingComponent', () => {
         .withStub('event', Observable.of(''))
         .build();
 
-      const giving = new GivingComponent(analytics);
+      const aperture = { browser: false } as Aperture
+
+      const giving = new GivingComponent(analytics, aperture);
       const response = giving.showEnvelope();
 
       expect(response).to.be.false;
@@ -54,7 +61,9 @@ describe('GivingComponent', () => {
 
   describe('hiding the envelope', () => {
     it('just hide the envelope', () => {
-      const giving = new GivingComponent(undefined);
+      const aperture = { browser: false } as Aperture
+
+      const giving = new GivingComponent(undefined, aperture);
       giving.envelopeShown = true;
       giving.hideEnvelope();
 

src/app/components/pages/giving.ts

@@ -1,19 +1,24 @@
-import { Component }    from '@angular/core';
-import { Analytics }    from '../../services';
+import { Component, OnInit }   from '@angular/core';
+import { Analytics, Aperture } from '../../services';
 
 @Component({
   templateUrl: './giving.html',
   styleUrls: [ './giving.scss' ]
 })
-export class GivingComponent {
+export class GivingComponent implements OnInit {
 
   envelopeShown: boolean = false;
-  _location: Location = location;
+  _location: Location
 
   constructor(
-    private analytics: Analytics
+    private analytics: Analytics,
+    private aperture: Aperture
   ) {}
 
+  ngOnInit() {
+    this._location = this.aperture.browser ? window.location : {} as Location
+  }
+
   give(type: string): boolean {
     this.analytics.event('nav', 'leave', 'donate')
       .subscribe(() => {

src/app/components/pages/home.html

@@ -1,6 +1,6 @@
 <bc-header [video]="sources" image="/assets/messages.png" shade="0.4">
 
-  <button *ngIf="live" class="live" mat-raised-button routerLink="/sermons/live">
+  <button *ngIf="live" class="live" mat-raised-button [routerLink]="['/sermons', today]">
     <mat-icon>live_tv</mat-icon> WATCH LIVE SERMON
   </button>
 

src/app/components/pages/home.ts

@@ -10,6 +10,7 @@ import
 export class HomeComponent implements OnInit {
 
   live: boolean = false;
+  today: string
   sources: BackgroundVideoSource[];
   sermon: Sermon;
 
@@ -33,7 +34,8 @@ export class HomeComponent implements OnInit {
       .liveToday()
       .subscribe((liveToday) => {
         const now = moment.tz('America/Chicago');
-        this.live = (liveToday && now.day() === 6 && now.hour() >= 10 &&  now.hour() < 14);
+        this.today =  now.format('YYYY-MM-DD')
+        this.live = liveToday && now.hour() >= 10 && now.hour() < 14;
       });
   }
 

src/app/components/pages/sermons/sermon.html

@@ -1,27 +1,22 @@
 <bc-header></bc-header>
 <main>
-  <section *ngIf="youtube_live_issues && live">
-    <h2>Experiencing Issues</h2>
-    <p>
-      Unfortunately, we are having techincal issues with our live streaming. We are working hard to address
-      the issue and will be back soon.
-    </p>
-  </section>
+
 
   <section class="video">
-    <iframe *ngIf="youtube_url"
-            id="sermonVideo"
-            [src]="youtube_url"
-            frameborder="0"
-            webkitallowfullscreen=""
-            mozallowfullscreen=""
-            allowfullscreen="">
-    </iframe>
+
+    <div class="video" *ngFor="let service of services">
+      <iframe *ngIf="service.url"
+              [src]="service.url"
+              frameborder="0"
+              webkitallowfullscreen=""
+              mozallowfullscreen=""
+              allowfullscreen="">
+      </iframe>
+    </div>
 
     <div class="data" *ngIf="sermon">
-      <div *ngIf="sermon.image" class="icon" [style.background-image]="icon"></div>
       <div class="text">
-        <div class="title">{{ sermon.series }}</div>
+        <div class="title">{{ sermon.title }}</div>
         <div class="speaker">{{ sermon.speaker }}</div>
       </div>
       <span class="date">{{ sermon.date | date:'longDate' }}</span>