Event framework

Client/package.json

@@ -5,8 +5,8 @@
   "scripts": {
     "ng": "ng",
     "servehelena":"ng serve -host 192.168.43.144",
-    "servebutte":"ng serve -host 192.168.2.5",
+    "servebutte":"ng serve -host 192.168.2.8",
-    "servebutteprod":"ng serve -host 192.168.2.5",
+    "servebutteprod":"ng serve -host 192.168.2.8 --prod",
     "start": "ng serve",
     "build": "ng build",
     "test": "ng test",

Client/src/app/app.module.ts

@@ -1,3 +1,4 @@
+import { EventService } from './services/event.service';
 import { WindowRefService } from './services/window-ref.service';
 import { EmailService } from './services/email.service';
 import { SermonService } from './services/sermon.service';
@@ -38,6 +39,14 @@ import { SermonLargeComponent } from './components/sermon-large/sermon-large.com
 import { AddSermonPopupComponent } from './components/popups/add-sermon-popup/add-sermon-popup.component';
 import { LoginPopupComponent } from './components/popups/login-popup/login-popup.component';
 import { InputPopupComponent } from './components/popups/input-popup/input-popup.component';
+import { EventsPageComponent } from './components/events-page/events-page.component';
+import { AddEventPopupComponent } from './components/popups/add-event-popup/add-event-popup.component';
+import { OkPopupComponent } from './components/popups/ok-popup/ok-popup.component';
+import { YesNoPopupComponent } from './components/popups/yes-no-popup/yes-no-popup.component';
+import { UpdateSermonPopupComponent } from './components/popups/update-sermon-popup/update-sermon-popup.component';
+import { ContactPageComponent } from './components/contact-page/contact-page.component';
+import { SharePopupComponent } from './components/popups/share-popup/share-popup.component';
+
 
 //Directives
 import { FadeInOnScrollDirective } from './directives/fade-in-on-scroll.directive';
@@ -45,13 +54,7 @@ import { IconDirective } from './directives/icon.directive';
 
 //Pipes
 import { DurationPipe } from './pipes/duration.pipe';
-import { OkPopupComponent } from './components/popups/ok-popup/ok-popup.component';
-import { YesNoPopupComponent } from './components/popups/yes-no-popup/yes-no-popup.component';
-import { UpdateSermonPopupComponent } from './components/popups/update-sermon-popup/update-sermon-popup.component';
-import { ContactPageComponent } from './components/contact-page/contact-page.component';
-import { SharePopupComponent } from './components/popups/share-popup/share-popup.component';
 import { SafeUrlPipe } from './pipes/safe-url.pipe';
-import { EventsPageComponent } from './components/events-page/events-page.component';
 
 const Routes =
   [
@@ -123,7 +126,8 @@ const Routes =
     ContactPageComponent,
     SharePopupComponent,
     SafeUrlPipe,
-    EventsPageComponent
+    EventsPageComponent,
+    AddEventPopupComponent
   ],
   imports: [
     BrowserModule,
@@ -140,14 +144,15 @@ const Routes =
     RouterModule.forRoot(Routes)
     
   ],
-  providers: [LoginService,SermonService,ProgressService,EmailService,WindowRefService,{provide:BrowserXhr,useClass:ProgressXhr}],
+  providers: [LoginService,SermonService,EventService,ProgressService,EmailService,WindowRefService,{provide:BrowserXhr,useClass:ProgressXhr}],
   entryComponents: [AddSermonPopupComponent,
                     LoginPopupComponent,
                     OkPopupComponent,
                     InputPopupComponent,
                     YesNoPopupComponent,
                     UpdateSermonPopupComponent,
-                    SharePopupComponent],
+                    SharePopupComponent,
+                    AddEventPopupComponent],
   bootstrap: [AppComponent]
 })
 

Client/src/app/components/events-page/events-page.component.html

@@ -3,7 +3,9 @@
         <p>These are some upcoming events at Old Fashion Baptist Church</p>
         <ul>
             <li *ngFor="let event of events; let i = index;">
-                
+                <p>{{ event.title }}</p>
+                <p>{{ event.startDate | date:'yyyy-MM-dd' }}</p>
+                <p>{{ event.startDate }}</p>
             </li>
         </ul>
         <div class="fab-buttons" >

Client/src/app/components/events-page/events-page.component.ts

@@ -1,3 +1,6 @@
+import { MdDialog, MdDialogConfig, MdSnackBar } from '@angular/material';
+import { EventService } from './../../services/event.service';
+import { AddEventPopupComponent } from './../popups/add-event-popup/add-event-popup.component';
 import { Component, OnInit } from '@angular/core';
 
 import { Event } from '../../interfaces/event';
@@ -11,18 +14,58 @@ import { LoginService } from '../../services/login.service';
 })
 export class EventsPageComponent implements OnInit {
 
+  private dialogConfig: MdDialogConfig;
+  public loading: boolean = true;
   public events: Event[];
   public loggedIn: boolean;
 
-  constructor(private loginService: LoginService) { 
+  constructor(private loginService: LoginService, 
+              private eventService: EventService,
+              private dialog: MdDialog,
+              private snackbar: MdSnackBar) { 
     this.loginService.isLoggedIn(true).subscribe(is => { this.loggedIn = is });
     this.loginService.onLogin().subscribe(is => { this.loggedIn = is.isLoggedIn; });
   }
 
   ngOnInit() {
+    this.getEvents(true);
+  }
+
+  getEvents(clearExisting: boolean): void{
+    this.loading = true;
+    this.events = this.events || [];
+    if (clearExisting){
+      this.events = [];
+    }
+    this.eventService.getEvents(1).subscribe(
+      events => {
+        console.log(events);
+        this.addEvents(events);
+        this.loading = false;
+      },
+      error => console.log(error)
+    );
+  }
+
+  addEvents(events: Event[]): void{
+    for(let i = 0; i < events.length; i++){
+      this.events.push(events[i]);
+    }
   }
 
   addEvent(){
+    let dialog = this.dialog.open(AddEventPopupComponent,this.dialogConfig);
 
+    dialog.afterClosed().subscribe(e => {
+      e = e as Event;
+      if (e != null){
+        this.events.unshift(e);
+        let snack = this.snackbar.open(e.title + " was added!", "Ok");
+        snack.onAction().subscribe(() => {
+          snack.dismiss();
+        });
+        setTimeout(() => { snack.dismiss(); },3000);
+      }      
+    });
   }
 }

Client/src/app/components/popups/add-event-popup/add-event-popup.component.html

@@ -0,0 +1,28 @@
+<div md-dialog-title>
+    <p>Add Event</p>
+</div>
+<div md-dialog-content>  
+  <form #addEventForm="ngForm" (ngSubmit)="onSubmit()">
+    <md-input-container class="full-width">
+      <input mdInput placeholder="Title" required [(ngModel)]="eventTitle" name="title" >
+    </md-input-container>
+    <md-input-container>
+      <input mdInput placeholder="Start Date" required [ngModel]="eventStartDate | date:'yyyy-MM-ddTHH:mm'" (ngModelChange)="eventStartDate = $event"  name="startDate" type="datetime-local">
+    </md-input-container> 
+    <md-input-container>
+        <input mdInput placeholder="End Date" required [ngModel]="eventEndDate | date:'yyyy-MM-ddTHH:mm'" (ngModelChange)="eventEndDate = $event"  name="endDate" type="datetime-local">
+      </md-input-container> 
+    <md-input-container class="full-width">
+      <input mdInput placeholder="Description" required [(ngModel)]="eventDescription" name="description" >
+    </md-input-container>
+
+    <br><br>
+    <div *ngIf="errorMessages.length > 0" class="errorMessages">
+      <p *ngFor="let error of errorMessages">
+        {{error}}
+      </p>
+    </div>
+    <button md-raised-button class="first" (click)="cancel($event)" >Cancel</button><!--
+  --><button md-raised-button type="submit" [disabled]="!addEventForm.form.valid || addEventButtonDisabled">{{ addEventButtonText }}</button>
+  </form>
+</div>

Client/src/app/components/popups/add-event-popup/add-event-popup.component.spec.ts

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

Client/src/app/components/popups/add-event-popup/add-event-popup.component.ts

@@ -0,0 +1,107 @@
+import { EventService } from './../../../services/event.service';
+import { OkPopupComponent } from './../ok-popup/ok-popup.component';
+import { LoginPopupComponent } from './../login-popup/login-popup.component';
+import { MdDialog, MdDialogRef, MdSnackBar } from '@angular/material';
+import { Event } from './../../../interfaces/event';
+import { LoginService } from './../../../services/login.service';
+import { Component, OnInit } from '@angular/core';
+
+
+@Component({
+  selector: 'app-add-event-popup',
+  templateUrl: './add-event-popup.component.html',
+  styleUrls: ['./add-event-popup.component.css']
+})
+export class AddEventPopupComponent implements OnInit {
+  public addEventButtonText: string = "Add Event";
+  public addEventButtonDisabled: boolean = false;
+
+  public eventTitle: string;
+  public eventStartDate: Date = new Date();
+  public eventEndDate: Date = new Date();
+  public eventDescription: string;
+
+
+  public errorMessages: string[] = [];
+
+  constructor(private mdDialog: MdDialog, private mdDialogRef: MdDialogRef<AddEventPopupComponent>, private loginService: LoginService, private eventService: EventService) { }
+
+  ngOnInit() {
+
+  }
+
+  onSubmit(){
+    this.updateAddButton(false);
+
+    //First check to see if we are logged in
+    this.loginService.isLoggedIn(true).subscribe(is => {
+      if (is === true){
+        this.addEvent();
+      } else {
+        let popup = this.mdDialog.open(LoginPopupComponent);
+        popup.afterClosed().subscribe(r => { 
+          if (r === true){
+            this.addEvent();
+          } else {
+            this.updateAddButton(true);
+          }
+        });
+      }
+    },
+    error =>{
+      this.updateAddButton(true);
+      let errorDialog = this.mdDialog.open(OkPopupComponent,{data:{title:'Error',message:'There was an error adding the event\n' + error}});
+    });
+  }
+
+  updateAddButton(enable: boolean){
+    if (enable){
+      this.addEventButtonText = "Add Event";
+    } else {
+      this.addEventButtonText = "Please Wait...";
+    }
+    this.addEventButtonDisabled = !enable;
+  }
+
+  private addEvent(): void {
+    //Check fields
+    this.errorMessages = [];
+    if (this.eventTitle == null || this.eventTitle == ""){
+      this.errorMessages.push("Please enter a title");
+    }
+    if (this.eventStartDate == null){
+      this.errorMessages.push("Please enter a event start date");
+    }
+    if (this.eventEndDate == null){
+      this.errorMessages.push("Please enter a event end date");
+    }
+    if (this.eventDescription == null || this.eventDescription == ""){
+      this.errorMessages.push("Please enter a description");
+    }
+    if (this.errorMessages.length > 0){ this.updateAddButton(true); return; }
+
+    let e = new Event();
+    e.title = this.eventTitle;
+    e.startDate = this.eventStartDate;
+    e.endDate = this.eventEndDate;
+    e.description = this.eventDescription;
+
+    this.eventService.addEvent(e).subscribe(
+      data=>{
+        console.log(data);
+        this.updateAddButton(true);
+        this.mdDialogRef.close(data.sermon);
+      },
+      error => {
+        alert(error);
+        this.updateAddButton(true);
+        let errorDialog = this.mdDialog.open(OkPopupComponent,{data:{title:'Upload Error',message:'There was an error uploading the sermon\n' + error}});
+      });
+  }
+
+  cancel(evt){
+    evt.preventDefault();
+    this.mdDialogRef.close();
+  }
+
+}

Client/src/app/components/upcoming-events/upcoming-events.component.ts

@@ -25,8 +25,8 @@ export class UpcomingEventsComponent implements OnInit {
     getSermons(): void{
         this.events = [];
         this.loading = true;
-        this.eventService.getEvents(this.numberOfEventsToShow).then(events => { 
+        this.eventService.getEvents(1).subscribe(events => { 
-            this.events = events;  
+            this.events = events.slice(0,this.numberOfEventsToShow);  
             this.loading = false;
             console.log(this.events) 
         });

Client/src/app/constants/urls.ts

@@ -1,3 +1,5 @@
+export const EVENTS_ADD_URL = "//ofbbutte.com/api/events/a/";
+export const EVENTS_BY_PAGE_URL = "//ofbbutte.com/api/events/page/";
 export const SERMONS_BY_ID = '//ofbbutte.com/api/sermons/';
 export const SERMONS_BY_PAGE_URL = '//ofbbutte.com/api/sermons/page/';
 export const SERMONS_BY_SEARCH_URL = '//ofbbutte.com/api/sermons/search';

Client/src/app/interfaces/event.ts

@@ -1,7 +1,7 @@
-export interface Event{
+export class Event{
-    id: number,
+    id: number;
-    title: string,
+    title: string;
-    startDate: Date,
+    startDate: Date;
-    endDate: Date,
+    endDate: Date;
-    description: string
+    description: string;
 }

Client/src/app/services/event.service.ts

@@ -1,14 +1,59 @@
 import { Injectable } from '@angular/core';
+import { Http, Response } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
 import { Event } from '../interfaces/event';
 
+import { EVENTS_BY_PAGE_URL, EVENTS_ADD_URL } from '../constants/urls';
+
 @Injectable()
 export class EventService {
-    getEvents(count: number): Promise<Event[]> {
+
-        let ret = MOCK.slice(0,count);
+    constructor(private http: Http){
-        return new Promise(resolve => {
+
-            setTimeout(() => resolve(ret),1000);
+    }
-        });
+
+    getEvents(page: number): Observable<Event[]> {
+        let url = EVENTS_BY_PAGE_URL + page + "?pageSize=" + 10;
+        return this.http.get(url).map(this.gotData).catch(this.dataError)
     };
+
+    addEvent(event: Event){
+        let fd = new FormData();
+        fd.append("title",event.title);
+        fd.append("description",event.description);
+        fd.append("startDate",new Date(event.startDate).toUTCString());
+        fd.append("endDate",new Date(event.endDate).toUTCString());
+
+        return this.http.post(EVENTS_ADD_URL,fd,{withCredentials:true})
+                        .map(d=>{ return d.json(); })
+                        .catch(this.dataError);
+    }
+
+    gotData(res: Response){ 
+        //if (1 == 1) return MOCK;       
+        let body = res.json();
+        body = body.events.map(e => { return {
+            id: e.id,
+            title: e.title,
+            startDate: new Date(e.startDate),
+            endDate: new Date(e.endDate),
+            description: e.description
+        }});
+        return body || { };
+    }
+
+    dataError(error: Response | any){
+        let errMsg: string;
+        if (error instanceof Response) {
+        const body = error.json() || '';
+        const err = body.error || JSON.stringify(body);
+        errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
+        } else {
+        errMsg = error.message ? error.message : error.toString();
+        }
+        console.error(errMsg);
+        return Observable.throw(errMsg);
+    }
 }
 
 const MOCK: Event[] = [