djabsher
/
UIAngular
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Event framework

Transactions
Dan 2017-09-06 17:48:19 -06:00
parent 3766fedbb5
commit c85d04352c
12 changed files with 283 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Client/package.json
View File

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

23
Client/src/app/app.module.ts
View File

@ -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]
})

4
Client/src/app/components/events-page/events-page.component.html
View File

@ -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" >

45
Client/src/app/components/events-page/events-page.component.ts
View File

@ -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);
}
});
}
}

0
Client/src/app/components/popups/add-event-popup/add-event-popup.component.css 100644
View File

28
Client/src/app/components/popups/add-event-popup/add-event-popup.component.html 100644
View File

@ -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>

25
Client/src/app/components/popups/add-event-popup/add-event-popup.component.spec.ts 100644
View File

@ -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();
});
});

107
Client/src/app/components/popups/add-event-popup/add-event-popup.component.ts 100644
View File

@ -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();
}
}

4
Client/src/app/components/upcoming-events/upcoming-events.component.ts
View File

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

2
Client/src/app/constants/urls.ts
View File

@ -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';

12
Client/src/app/interfaces/event.ts
View File

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

55
Client/src/app/services/event.service.ts
View File

@ -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);
return new Promise(resolve => {
setTimeout(() => resolve(ret),1000);
});
constructor(private http: Http){
}
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[] = [