diff --git a/Client/src/app/app-routing.module.ts b/Client/src/app/app-routing.module.ts index e50e65b..c981293 100644 --- a/Client/src/app/app-routing.module.ts +++ b/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 } ] diff --git a/Client/src/app/app.module.ts b/Client/src/app/app.module.ts index 6d53dcc..1d95d26 100644 --- a/Client/src/app/app.module.ts +++ b/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, diff --git a/Client/src/app/components/balloon/balloon.component.css b/Client/src/app/components/balloon/balloon.component.css new file mode 100644 index 0000000..00e445e --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/Client/src/app/components/balloon/balloon.component.html b/Client/src/app/components/balloon/balloon.component.html new file mode 100644 index 0000000..cc85f1e --- /dev/null +++ b/Client/src/app/components/balloon/balloon.component.html @@ -0,0 +1,40 @@ + + + + + For general questions please complete the form below. If you are a missionary requesting + support please complete the Missionary Questionnaire form by clicking here. + + + + + + + + + + + + + + + + + + + + 0"> + {{error}} + + {{submitButtonText}} + + + + Thank You! + Your message has been sent. + + + + + + \ No newline at end of file diff --git a/Client/src/app/components/balloon/balloon.component.spec.ts b/Client/src/app/components/balloon/balloon.component.spec.ts new file mode 100644 index 0000000..7211b81 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ BalloonComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(BalloonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Client/src/app/components/balloon/balloon.component.ts b/Client/src/app/components/balloon/balloon.component.ts new file mode 100644 index 0000000..1ba9701 --- /dev/null +++ b/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; + } + +}
+ For general questions please complete the form below. If you are a missionary requesting + support please complete the Missionary Questionnaire form by clicking here. +
{{error}}
Thank You!
Your message has been sent.