Support for Multiple Services and New Location (#102)

package.json

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

src/app/app.component.html

@@ -1,4 +1,5 @@
 <div class="app">
   <router-outlet></router-outlet>
   <bc-footer></bc-footer>
+  <bc-popup></bc-popup>
 </div>

src/app/components/molecules/index.ts

@@ -1,7 +1,9 @@
+import { PopupComponent }       from './popup';
 import { SermonCardComponent }  from './sermon-card';
 import { VerseComponent }       from './verse';
 
 export const MOLECULES = [
+  PopupComponent,
   SermonCardComponent,
   VerseComponent
 ];

src/app/components/molecules/popup.html

@@ -0,0 +1,12 @@
+<aside class="popup" [@popupState]="popupState">
+  <section>
+    <h2>We are Moving</h2>
+    <div>New Location</div>
+    <div class="location">301 E Boughton Rd, Bolingbrook, IL 60440</div>
+    <ul>
+      <li>February 17th - Noon Service @ 1251 Windham Pkwy, Romeoville, IL 60446</li>
+      <li>February 24th - Friends and Family Sabbath</li>
+      <li>February 3rd - New Location</li>
+    </ul>
+  </section>
+</aside>

src/app/components/molecules/popup.scss

@@ -0,0 +1,23 @@
+aside.popup {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  background: #84f1f9;
+  color: black;
+
+  section {
+    padding: 20px;
+  }
+
+  ul {
+    list-style: none;
+    border-left: solid 2px #6d6b6b;
+    padding-left: 20px;
+
+    li {
+      padding: 9px 0;
+    }
+  }
+}

src/app/components/molecules/popup.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit }                          from '@angular/core';
+import { trigger, state, style, animate, transition } from '@angular/animations';
+
+@Component({
+  selector: 'bc-popup',
+  templateUrl: './popup.html',
+  styleUrls: [ './popup.scss' ],
+  animations: [
+    trigger('popupState', [
+      state('shown',  style({ left: '0' })),
+      state('hidden', style({ left: '100%', display: 'none' })),
+      transition('* => *', animate('200ms ease-in-out'))
+    ])
+  ]
+})
+export class PopupComponent implements OnInit {
+
+  popupState: string = 'hidden';
+
+  ngOnInit() {
+    setTimeout(() => this.popupState = 'shown', 1000);
+    setTimeout(() => this.popupState = 'hidden', 10000);
+  }
+}

src/app/components/pages/home.html

@@ -16,28 +16,39 @@ <h2     *ngIf="!live && !!sermon">Latest Sermon</h2>
 <main>
   <section class="join">
     <div class="content">
+      <h3>We're Moving</h3>
+      <div class="time">March 3, 2018</div>
+      <div class="location">301 E Boughton Rd, Bolingbrook, IL 60440</div>
+
+      <h4>Transition Schedule</h4>
+      <ul>
+        <li>February 17th - Noon Service @ 1251 Windham Pkwy, Romeoville, IL 60446</li>
+        <li>February 24th - Friends and Family Sabbath</li>
+        <li>February 3rd - New Location</li>
+      </ul>
+
+      <h3>New Schedule</h3>
       <h4>Worship With Us</h4>
-      <div class="time">Every Saturday at 12:00 PM</div>
-      <div class="location">1251 Windham Pkwy, Romeoville, IL 60446</div>
+      <div class="time">Every Saturday</div>
+      <ul>
+        <li>10:30 AM &amp; 12:30 PM - Services</li>
+        <li>10:00 AM &amp; 1:45 PM - Sabath Café</li>
+        <li>10:30 AM &amp; 12:30 PM - Discipletown Kids (ages 0-11)</li>
+      </ul>
+      <div class="location">301 E Boughton Rd, Bolingbrook, IL 60440</div>
 
-      <h4>Bible Study</h4>
+      <h4>Mid-week Experience</h4>
       <div class="time">Every Wednesday</div>
       <ul>
-        <li>6:00 PM - Prayer Group</li>
+        <li>6:00 PM - Prayer</li>
         <li>7:00 PM - Bible Study</li>
       </ul>
       <div class="location">301 E Boughton Rd, Bolingbrook, IL 60440</div>
 
-      <h4>Growth Groups</h4>
-      <div class="time">Every Saturday</div>
-      <ul>
-        <li>10:45 AM - Adult Growth Group</li>
-        <li>10:45 AM - Discipletown Growth Groups (ages 0-11)</li>
-        <li>11:00 AM - Student Connections Middle School &amp; High School Experience (ages 12-18)</li>
-        <li>12:00 PM - Kids Experience (ages 5-9)</li>
-      </ul>
-      <div class="location">1251 Windham Pkwy, Romeoville, IL 60446</div>
-
+      <h4>Student Connections (ages 12 - 18)</h4>
+      <div class="time">Every Friday</div>
+      <div class="time">7:00 PM - 9:00 PM</div>
+      <div class="location">301 E Boughton Rd, Bolingbrook, IL 60440</div>
     </div>
   </section>
 

src/app/components/pages/home.scss

@@ -35,4 +35,4 @@ main section.join div.content {
   div.time, div.location {
     margin: 5px 0;
   }
-}
+}

src/app/components/pages/locations.html

@@ -2,28 +2,16 @@
 <main>
   <section class="white">
     <div class="content">
-      <h1>Locations</h1>
+      <h1>Location</h1>
 
-      <h3>Service Location</h3>
       <p class="address">
-        Our Services are held at:
-        1251 Windham Pkwy
-        Romeoville, IL 60446
-      </p>
-
-      <div class="wrapper">
-        <iframe frameborder="0" allowfullscreen [src]="service_ref"></iframe>
-      </div>
-
-      <h3>Office Location</h3>
-      <p class="address">
-        Our offices are located at:
+        We are located at:
         301 E Boughton Rd,
         Bolingbrook, IL 60440
       </p>
 
       <div class="wrapper">
-        <iframe frameborder="0" allowfullscreen [src]="office_ref"></iframe>
+        <iframe frameborder="0" allowfullscreen [src]="location_ref"></iframe>
       </div>
     </div>
   </section>

src/app/components/pages/locations.ts

@@ -2,26 +2,23 @@ import { Component, OnInit }                from '@angular/core';
 import { DomSanitizer, SafeResourceUrl }    from '@angular/platform-browser';
 import { Env }                              from '../../services';
 
-const service_query = 'place_id:ChIJhfSXudNeDogRc69spHCK76Q';
-const office_query  = 'place_id:ChIJsWqLHlBaDogRzwidXU9DMnk';
+const location_query  = 'place_id:ChIJsWqLHlBaDogRzwidXU9DMnk';
 
 @Component({
   templateUrl: './locations.html',
   styleUrls: [ './locations.scss' ]
 })
 export class LocationsComponent implements OnInit {
 
-  service_ref: SafeResourceUrl;
-  office_ref: SafeResourceUrl;
+  location_ref: SafeResourceUrl;
 
   constructor(
     private env: Env,
     private sanitizer: DomSanitizer
   ) {}
 
   ngOnInit(): void {
-    this.service_ref = this.getRef(service_query);
-    this.office_ref = this.getRef(office_query);
+    this.location_ref = this.getRef(location_query);
   }
 
   getRef(query: string): SafeResourceUrl {