add balloon component

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

@@ -21,6 +21,7 @@ import { VideoServicesComponent } from './components/video-services/video-servic
 import { ImageComponent } from './components/image/image.component';
 import { VideoComponent } from './components/video/video.component';
 import { FCCPermitPageComponent } from './components/fcc-permit-page/fcc-permit-page.component';
+import { BalloonComponent } from './components/balloon/balloon.component';
 
 const routes =
   [
@@ -115,6 +116,10 @@ const routes =
       {
         path: 'fmpermit',
         component: FCCPermitPageComponent
+      },
+      {
+        path: 'balloon',
+        component: BalloonComponent
       }
     ]
 

Client/src/app/app.module.ts

@@ -54,6 +54,7 @@ import { SalvationPageComponent } from './components/salvation-page/salvation-pa
 import { MediaPageComponent } from './components/media-page/media-page.component';
 import { VideoPopupComponent } from './components/popups/video-popup/video-popup.component';
 import { FCCPermitPageComponent } from './components/fcc-permit-page/fcc-permit-page.component';
+import { BalloonComponent } from './components/balloon/balloon.component';
 
 //Directives
 import { FadeInOnScrollDirective } from './directives/fade-in-on-scroll.directive';
@@ -88,6 +89,7 @@ import { YoutubePopupComponent } from './components/popups/youtube-popup/youtube
 
 
 
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -129,6 +131,7 @@ import { YoutubePopupComponent } from './components/popups/youtube-popup/youtube
     CampPageComponent,
     MembersPageComponent,
     FCCPermitPageComponent,
+    BalloonComponent,
     AddUserPopupComponent,
     AddTransactionPageComponent,
     AddTransactionPopupComponent,

Client/src/app/components/balloon/balloon.component.css

@@ -0,0 +1,15 @@
+.full-width{
+    width: 100%;
+}
+
+.hide{
+    display: none;
+}
+
+.errorMessages{
+    color: white;
+    background-color: rgb(255,90,90);
+    padding: 10px;
+    border-radius: 3px;
+    margin-bottom: 5px;
+}

Client/src/app/components/balloon/balloon.component.html

@@ -0,0 +1,40 @@
+<secondary-page-component [hideSideBarOnMobile]="true" >
+    <div mainContent>
+      <br>
+      <p>
+        For general questions please complete the form below. If you are a missionary requesting
+        support please complete the <a routerLink="/missionary">Missionary Questionnaire form by clicking here.</a>
+      </p>
+      <br>
+        <div *ngIf="!formSubmitted">            
+            <form class="form" #contactForm="ngForm" (ngSubmit)="onSubmit()">
+              <mat-form-field class="full-width">
+                <input matInput type="text" placeholder="Name" required value="" [(ngModel)]="name" name="name" >
+              </mat-form-field>
+              <mat-form-field class="full-width">
+                <input matInput type="email" placeholder="Email" required value="" [(ngModel)]="email" name="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">
+              </mat-form-field>
+              <mat-form-field class="full-width">
+                <input matInput type="tel" placeholder="Phone" value="" [(ngModel)]="phone" name="phone">
+              </mat-form-field>
+              <mat-form-field class="full-width">
+                <textarea matInput type="text" placeholder="Message" required value="" [(ngModel)]="body" name="body" rows="5" ></textarea>
+              </mat-form-field>
+              <mat-form-field class="hide">
+                <input matInput type="text" placeholder="hp" required value="" [(ngModel)]="hp" name="subject">
+              </mat-form-field> 
+              <div class="errorMessages" *ngIf="errorMessages.length > 0">
+                <p *ngFor="let error of errorMessages">{{error}}</p>  
+              </div>
+              <button mat-raised-button type="submit" [disabled]="!contactForm.form.valid || submitButtonDisabled">{{submitButtonText}}</button>  
+            </form> 
+        </div>
+        <div *ngIf="formSubmitted">
+          <p><b>Thank You!</b></p>
+          <p>Your message has been sent.</p>
+        </div>
+    </div>
+    <div sideBar ofbFadeInOnScroll>
+        
+    </div>
+</secondary-page-component>

Client/src/app/components/balloon/balloon.component.spec.ts

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

Client/src/app/components/balloon/balloon.component.ts

@@ -0,0 +1,79 @@
+import { Router } from '@angular/router';
+import { MatDialogConfig } from '@angular/material';
+import { OkPopupComponent } from '../popups/ok-popup/ok-popup.component';
+import { EmailService } from '../../services/email.service';
+import { Component, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material';
+
+@Component({
+  selector: 'app-contact-page',
+  templateUrl: './balloon.component.html',
+  styleUrls: ['./balloon.component.css']
+})
+export class BalloonComponent implements OnInit {
+  public submitButtonText: string = "Submit";
+  public submitButtonDisabled: boolean = false;
+  public formSubmitted: boolean = false;
+
+  public name: string;
+  public email: string;
+  public phone: string;
+  public body: string;
+  public hp: string = ".";
+
+  public errorMessages: string[] = [];
+
+
+  constructor(private emailService: EmailService, 
+              private MatDialog: MatDialog,
+              private router: Router) { }
+
+  ngOnInit() {
+  }
+
+  onSubmit(){
+    this.errorMessages = [];
+    if (this.name == null || this.name == ""){
+      this.errorMessages.push("Please enter a name");
+    }
+    if (this.email == null || this.email == ""){
+      this.errorMessages.push("Please enter an email address");
+    }
+    if (this.body == null || this.body == ""){
+      this.errorMessages.push("Please enter a message");
+    }
+    if (this.errorMessages.length > 0){ return; }
+
+    this.submitButtonText = "Please Wait...";
+    this.submitButtonDisabled = true;
+    this.emailService.sendEmail(this.name,
+                                this.email,
+                                this.phone,
+                                this.body,
+                                this.hp)
+                      .subscribe(
+                        success => {this.emailSuccess();},
+                        error => {this.emailError();});
+  }
+
+  private emailSuccess(){
+    let opts = new MatDialogConfig;
+    opts.data = { title:'Email Sent','message':'Thank You! Your message has been sent.' };
+    let popup = this.MatDialog.open(OkPopupComponent,opts);
+    this.submitButtonText = "Submit";
+    this.submitButtonDisabled = false;
+    popup.afterClosed().subscribe(()=>{
+      this.formSubmitted = true;
+    });
+  }
+
+  private emailError(){
+    console.error("error");
+    let opts = new MatDialogConfig;
+    opts.data = { title:'Email Error','message':'Please make sure that you have entered a valid email address.' };
+    let popup = this.MatDialog.open(OkPopupComponent,opts);
+    this.submitButtonText = "Submit";
+    this.submitButtonDisabled = false;
+  }
+
+}