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

Update files to reflect changes for angular 5

Transactions
Dan 2017-11-11 18:22:57 -07:00
parent 5b64a72d24
commit e02a10839f
39 changed files with 215 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,14 +10,14 @@ import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component } from '@angular/core'; import { NgModule, Component } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { HttpModule, BrowserXhr } from '@angular/http'; import { HttpModule, BrowserXhr } from '@angular/http';
import { MdButtonModule, import { MatButtonModule,
MdInputModule, MatInputModule,
MdSliderModule, MatSliderModule,
MdSnackBarModule, MatSnackBarModule,
MdDialogModule } from '@angular/material'; MatDialogModule } from '@angular/material';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
//import 'hammerjs'; import 'hammerjs';
//Components //Components
import { AppComponent } from './components/app/app.component'; import { AppComponent } from './components/app/app.component';
@ -149,11 +149,11 @@ const Routes =
HttpModule, HttpModule,
BrowserAnimationsModule, BrowserAnimationsModule,
//Angular Material Components //Angular Material Components
MdButtonModule, MatButtonModule,
MdInputModule, MatInputModule,
MdSliderModule, MatSliderModule,
MdSnackBarModule, MatSnackBarModule,
MdDialogModule, MatDialogModule,
RouterModule.forRoot(Routes) RouterModule.forRoot(Routes)
], ],

12
Client/src/app/components/app/app.component.html
View File

@ -2,13 +2,13 @@
<header> <header>
<div id="header-background" [ngStyle]="{'opacity':headerOpacity}"></div> <div id="header-background" [ngStyle]="{'opacity':headerOpacity}"></div>
<button md-button class="header-button-home" routerLink="/home"><img id="logo" src="assets/images/tiny/logo.png" height="30" alt="logo"> Old Fashion Baptist</button> <button mat-button class="header-button-home" routerLink="/home"><img id="logo" src="assets/images/tiny/logo.png" height="30" alt="logo"> Old Fashion Baptist</button>
<span class="hideOnMobile"></span> <span class="hideOnMobile"></span>
<button md-button class="header-button" routerLink="/whoweare">Who We Are</button> <button mat-button class="header-button" routerLink="/whoweare">Who We Are</button>
<button md-button class="header-button" routerLink="/services">Service Times</button> <button mat-button class="header-button" routerLink="/services">Service Times</button>
<button md-button class="header-button" routerLink="/location">Location</button> <button mat-button class="header-button" routerLink="/location">Location</button>
<button md-button class="header-button" routerLink="/sermons">Sermons</button> <button mat-button class="header-button" routerLink="/sermons">Sermons</button>
<button md-icon-button id="main-menu-button" <button mat-icon-button id="main-menu-button"
(click)="mainMenuClick()"> (click)="mainMenuClick()">
<i ofbicon class="example-icon" style="line-height:20px;">menu</i> <i ofbicon class="example-icon" style="line-height:20px;">menu</i>
</button> </button>

2
Client/src/app/components/audio-player/audio-player.component.html
View File

@ -7,7 +7,7 @@
<span *ngSwitchCase="audioStates.Playing"><i ofbicon (click)="pause()" class="audio-control-button padding5">pause</i></span> <span *ngSwitchCase="audioStates.Playing"><i ofbicon (click)="pause()" class="audio-control-button padding5">pause</i></span>
<span *ngSwitchCase="audioStates.Error"><i ofbicon (click)="play()" class="audio-control-button padding5">play_arrow</i></span> <span *ngSwitchCase="audioStates.Error"><i ofbicon (click)="play()" class="audio-control-button padding5">play_arrow</i></span>
</span> </span>
<md-slider class="slider-control padding5" min="0" [max]="audioDuration" [value]="currentTime" (change)="changeTime($event)"></md-slider> <mat-slider class="slider-control padding5" min="0" [max]="audioDuration" [value]="currentTime" (change)="changeTime($event)"></mat-slider>
<span class="duration padding5">{{ currentTime | duration:audioDuration }}</span> <span class="duration padding5">{{ currentTime | duration:audioDuration }}</span>
<span><i ofbicon class="audio-control-button padding5" (click)="close()">close</i></span> <span><i ofbicon class="audio-control-button padding5" (click)="close()">close</i></span>
</div> </div>

32
Client/src/app/components/contact-page/contact-page.component.html
View File

@ -3,25 +3,25 @@
<br> <br>
<div *ngIf="!formSubmitted"> <div *ngIf="!formSubmitted">
<form class="form" #contactForm="ngForm" (ngSubmit)="onSubmit()"> <form class="form" #contactForm="ngForm" (ngSubmit)="onSubmit()">
<md-input-container class="full-width"> <mat-form-field class="full-width">
<input mdInput type="text" placeholder="Name" required value="" [(ngModel)]="name" name="name" > <input matInput type="text" placeholder="Name" required value="" [(ngModel)]="name" name="name" >
</md-input-container> </mat-form-field>
<md-input-container class="full-width"> <mat-form-field class="full-width">
<input mdInput type="email" placeholder="Email" required value="" [(ngModel)]="email" name="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"> <input matInput type="email" placeholder="Email" required value="" [(ngModel)]="email" name="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">
</md-input-container> </mat-form-field>
<md-input-container class="full-width"> <mat-form-field class="full-width">
<input mdInput type="tel" placeholder="Phone" value="" [(ngModel)]="phone" name="phone"> <input matInput type="tel" placeholder="Phone" value="" [(ngModel)]="phone" name="phone">
</md-input-container> </mat-form-field>
<md-input-container class="full-width"> <mat-form-field class="full-width">
<textarea mdInput type="text" placeholder="Message" required value="" [(ngModel)]="body" name="body" rows="5" ></textarea> <textarea matInput type="text" placeholder="Message" required value="" [(ngModel)]="body" name="body" rows="5" ></textarea>
</md-input-container> </mat-form-field>
<md-input-container class="hide"> <mat-form-field class="hide">
<input mdInput type="text" placeholder="hp" required value="" [(ngModel)]="hp" name="subject"> <input matInput type="text" placeholder="hp" required value="" [(ngModel)]="hp" name="subject">
</md-input-container> </mat-form-field>
<div class="errorMessages" *ngIf="errorMessages.length > 0"> <div class="errorMessages" *ngIf="errorMessages.length > 0">
<p *ngFor="let error of errorMessages">{{error}}</p> <p *ngFor="let error of errorMessages">{{error}}</p>
</div> </div>
<button md-raised-button type="submit" [disabled]="!contactForm.form.valid || submitButtonDisabled">{{submitButtonText}}</button> <button mat-raised-button type="submit" [disabled]="!contactForm.form.valid || submitButtonDisabled">{{submitButtonText}}</button>
</form> </form>
</div> </div>
<div *ngIf="formSubmitted"> <div *ngIf="formSubmitted">

14
Client/src/app/components/contact-page/contact-page.component.ts
View File

@ -1,9 +1,9 @@
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { MdDialogConfig } from '@angular/material'; import { MatDialogConfig } from '@angular/material';
import { OkPopupComponent } from './../popups/ok-popup/ok-popup.component'; import { OkPopupComponent } from './../popups/ok-popup/ok-popup.component';
import { EmailService } from './../../services/email.service'; import { EmailService } from './../../services/email.service';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { MdDialog } from '@angular/material'; import { MatDialog } from '@angular/material';
@Component({ @Component({
selector: 'app-contact-page', selector: 'app-contact-page',
@ -25,7 +25,7 @@ export class ContactPageComponent implements OnInit {
constructor(private emailService: EmailService, constructor(private emailService: EmailService,
private mdDialog: MdDialog, private MatDialog: MatDialog,
private router: Router) { } private router: Router) { }
ngOnInit() { ngOnInit() {
@ -57,9 +57,9 @@ export class ContactPageComponent implements OnInit {
} }
private emailSuccess(){ private emailSuccess(){
let opts = new MdDialogConfig; let opts = new MatDialogConfig;
opts.data = { title:'Email Sent','message':'Thank You! Your message has been sent.' }; opts.data = { title:'Email Sent','message':'Thank You! Your message has been sent.' };
let popup = this.mdDialog.open(OkPopupComponent,opts); let popup = this.MatDialog.open(OkPopupComponent,opts);
this.submitButtonText = "Submit"; this.submitButtonText = "Submit";
this.submitButtonDisabled = false; this.submitButtonDisabled = false;
popup.afterClosed().subscribe(()=>{ popup.afterClosed().subscribe(()=>{
@ -69,9 +69,9 @@ export class ContactPageComponent implements OnInit {
private emailError(){ private emailError(){
console.error("error"); console.error("error");
let opts = new MdDialogConfig; let opts = new MatDialogConfig;
opts.data = { title:'Email Error','message':'Please make sure that you have entered a valid email address.' }; opts.data = { title:'Email Error','message':'Please make sure that you have entered a valid email address.' };
let popup = this.mdDialog.open(OkPopupComponent,opts); let popup = this.MatDialog.open(OkPopupComponent,opts);
this.submitButtonText = "Submit"; this.submitButtonText = "Submit";
this.submitButtonDisabled = false; this.submitButtonDisabled = false;
} }

6
Client/src/app/components/event-large/event-large.component.html
View File

@ -1,6 +1,6 @@
<div class="wrapper" [@inout]="startFadeIn"> <div class="wrapper" [@inout]="startFadeIn">
<div class="photo"> <div class="photo">
<button md-button (click)="toggleState()"> <button mat-button (click)="toggleState()">
<img src="{{imgSrc}}" /> <img src="{{imgSrc}}" />
</button> </button>
</div><!-- </div><!--
@ -22,11 +22,11 @@
<div class="buttons"> <div class="buttons">
<span class="action pct10 filler"></span><!-- <span class="action pct10 filler"></span><!--
--><span class="action pct10 filler"></span><!-- --><span class="action pct10 filler"></span><!--
--><button md-button class="action pct10" (click)="share()" ><i ofbicon>share</i> Share</button> --><button mat-button class="action pct10" (click)="share()" ><i ofbicon>share</i> Share</button>
</div> </div>
<div class="buttons-edit" *ngIf="loggedIn"> <div class="buttons-edit" *ngIf="loggedIn">
<div class="border"></div> <div class="border"></div>
<span class="action filler"></span><!-- <span class="action filler"></span><!--
--><button md-button class="action" (click)="delete()" ><i ofbicon>delete_forever</i> Delete</button> --><button mat-button class="action" (click)="delete()" ><i ofbicon>delete_forever</i> Delete</button>
</div> </div>
</div> </div>

8
Client/src/app/components/event-large/event-large.component.ts
View File

@ -1,5 +1,5 @@
import { Component, AfterContentInit, Input, Inject } from '@angular/core'; import { Component, AfterContentInit, Input, Inject } from '@angular/core';
import { MdDialog, MdDialogConfig } from '@angular/material'; import { MatDialog, MatDialogConfig } from '@angular/material';
import { trigger, state, style, transition, animate } from '@angular/animations'; import { trigger, state, style, transition, animate } from '@angular/animations';
import { EventService } from './../../services/event.service'; import { EventService } from './../../services/event.service';
@ -71,7 +71,7 @@ export class EventLargeComponent implements AfterContentInit {
return "/api2/cim/" + monthName + "/" + this.startDate.getDate(); return "/api2/cim/" + monthName + "/" + this.startDate.getDate();
} }
constructor(private dialog: MdDialog, constructor(private dialog: MatDialog,
private eventService: EventService){ private eventService: EventService){
} }
@ -84,13 +84,13 @@ export class EventLargeComponent implements AfterContentInit {
} }
share(){ share(){
let opts = new MdDialogConfig; let opts = new MatDialogConfig;
opts.data = { prefix: 'e', id: this.id, title: this.title, description: this.description }; opts.data = { prefix: 'e', id: this.id, title: this.title, description: this.description };
let dialog = this.dialog.open(SharePopupComponent, opts); let dialog = this.dialog.open(SharePopupComponent, opts);
} }
delete(){ delete(){
let opts = new MdDialogConfig; let opts = new MatDialogConfig;
opts.data = { title:'Delete','message':'Are you sure you want to delete "' + this.title + '"?' }; opts.data = { title:'Delete','message':'Are you sure you want to delete "' + this.title + '"?' };
let dialog = this.dialog.open(YesNoPopupComponent, opts); let dialog = this.dialog.open(YesNoPopupComponent, opts);

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

@ -13,15 +13,15 @@
></event-large-component> ></event-large-component>
</li> </li>
</ul> </ul>
<button md-button *ngIf="showAllButtonVisible" id="showAllButton" class="width100" style="text-align: center;" routerLink="/events" > <button mat-button *ngIf="showAllButtonVisible" id="showAllButton" class="width100" style="text-align: center;" routerLink="/events" >
<i ofbicon >expand_more</i><span *ngIf="!loading"> Show All</span> <i ofbicon >expand_more</i><span *ngIf="!loading"> Show All</span>
</button> </button>
<div class="fab-buttons" > <div class="fab-buttons" >
<button md-fab *ngIf="loggedIn" (click)="addEvent()"><i ofbicon>add</i></button> <button mat-fab *ngIf="loggedIn" (click)="addEvent()"><i ofbicon>add</i></button>
<div id="audio-player-filler" *ngIf="audioPlayerOpen"></div> <div id="audio-player-filler" *ngIf="audioPlayerOpen"></div>
</div> </div>
</div> </div>
<div sideBar class="side-bar"> <div sideBar class="side-bar">
<button md-raised-button *ngIf="loggedIn" class="width100" (click)="addEvent()" >Add Event</button> <button mat-raised-button *ngIf="loggedIn" class="width100" (click)="addEvent()" >Add Event</button>
</div> </div>
</secondary-page-component> </secondary-page-component>

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

@ -1,5 +1,5 @@
import { GoogleAnalyticsService } from './../../services/google-analytics.service'; import { GoogleAnalyticsService } from './../../services/google-analytics.service';
import { MdDialog, MdDialogConfig, MdSnackBar } from '@angular/material'; import { MatDialog, MatDialogConfig, MatSnackBar } from '@angular/material';
import { ActivatedRoute, Params } from '@angular/router'; import { ActivatedRoute, Params } from '@angular/router';
import { EventService } from './../../services/event.service'; import { EventService } from './../../services/event.service';
import { AudioPlayerService } from './../../services/audio-player.service'; import { AudioPlayerService } from './../../services/audio-player.service';
@ -17,7 +17,7 @@ import { LoginService } from '../../services/login.service';
}) })
export class EventsPageComponent implements OnInit { export class EventsPageComponent implements OnInit {
private dialogConfig: MdDialogConfig; private dialogConfig: MatDialogConfig;
public loading: boolean = true; public loading: boolean = true;
public events: Event[]; public events: Event[];
public loggedIn: boolean = false; public loggedIn: boolean = false;
@ -26,8 +26,8 @@ export class EventsPageComponent implements OnInit {
constructor(private loginService: LoginService, constructor(private loginService: LoginService,
private eventService: EventService, private eventService: EventService,
private dialog: MdDialog, private dialog: MatDialog,
private snackbar: MdSnackBar, private snackbar: MatSnackBar,
private activatedRoute: ActivatedRoute, private activatedRoute: ActivatedRoute,
private audioPlayerService: AudioPlayerService, private audioPlayerService: AudioPlayerService,
private googleAnalyticsService: GoogleAnalyticsService) { private googleAnalyticsService: GoogleAnalyticsService) {

4
Client/src/app/components/icon-button/icon-button.component.ts
View File

@ -3,8 +3,8 @@ import { trigger, transition, state, style, animate } from '@angular/animations'
@Component({ @Component({
selector: 'icon-button-component', selector: 'icon-button-component',
template: `<button md-button *ngIf="routerLink" [@menuOpened]="menuOpened" class="width100" style="text-align: left;" routerLink="{{routerLink}}"><i ofbicon [iconName]="icon"></i> {{text}}</button> template: `<button mat-button *ngIf="routerLink" [@menuOpened]="menuOpened" class="width100" style="text-align: left;" routerLink="{{routerLink}}"><i ofbicon [iconName]="icon"></i> {{text}}</button>
<button md-button *ngIf="!routerLink" [@menuOpened]="menuOpened" class="width100" style="text-align: left;"><i ofbicon [iconName]="icon"></i> {{text}}</button>`, <button mat-button *ngIf="!routerLink" [@menuOpened]="menuOpened" class="width100" style="text-align: left;"><i ofbicon [iconName]="icon"></i> {{text}}</button>`,
styles: ['.width100{width: 100%;}button{font-size: 16px;margin-bottom: 10px;}'], styles: ['.width100{width: 100%;}button{font-size: 16px;margin-bottom: 10px;}'],
animations: [trigger( animations: [trigger(
'menuOpened', 'menuOpened',

2
Client/src/app/components/menu/menu.component.html
View File

@ -3,7 +3,7 @@
<div id="menu-background" [@backgroundMenuOpen]="menuOpen" (click)="menuClick($event)"> <div id="menu-background" [@backgroundMenuOpen]="menuOpen" (click)="menuClick($event)">
<div id="header-menu" [@menuOpen]="menuOpen"> <div id="header-menu" [@menuOpen]="menuOpen">
<ul class="width100"> <ul class="width100">
<button md-icon-button id="close-button" (click)="menuClick($event)"><i ofbicon>close</i></button> <button mat-icon-button id="close-button" (click)="menuClick($event)"><i ofbicon>close</i></button>
<li class="width100"><icon-button-component [menuOpen]="menuOpen" animationDelay="0" icon="help_outline" routerLink="/whoweare" text="Who We Are"></icon-button-component></li> <li class="width100"><icon-button-component [menuOpen]="menuOpen" animationDelay="0" icon="help_outline" routerLink="/whoweare" text="Who We Are"></icon-button-component></li>
<li class="width100"><icon-button-component [menuOpen]="menuOpen" animationDelay="50" icon="access_time" routerLink="/services" text="Service Times"></icon-button-component></li> <li class="width100"><icon-button-component [menuOpen]="menuOpen" animationDelay="50" icon="access_time" routerLink="/services" text="Service Times"></icon-button-component></li>
<li class="width100"><icon-button-component [menuOpen]="menuOpen" animationDelay="100" icon="place" routerLink="/location" text="Location"></icon-button-component></li> <li class="width100"><icon-button-component [menuOpen]="menuOpen" animationDelay="100" icon="place" routerLink="/location" text="Location"></icon-button-component></li>

6
Client/src/app/components/menu/menu.component.ts
View File

@ -7,7 +7,7 @@ import { trigger,
style, style,
transition, transition,
animate } from '@angular/animations'; animate } from '@angular/animations';
import { MdDialog } from '@angular/material'; import { MatDialog } from '@angular/material';
import { LoginPopupComponent } from '../popups/login-popup/login-popup.component'; import { LoginPopupComponent } from '../popups/login-popup/login-popup.component';
@Component({ @Component({
@ -42,7 +42,7 @@ export class MenuComponent {
@Output() @Output()
closed: EventEmitter<boolean> = new EventEmitter<boolean>(); closed: EventEmitter<boolean> = new EventEmitter<boolean>();
constructor(private mdDialog: MdDialog){ constructor(private MatDialog: MatDialog){
} }
@ -54,6 +54,6 @@ export class MenuComponent {
showLogin(event){ showLogin(event){
event.preventDefault(); event.preventDefault();
let dialog = this.mdDialog.open(LoginPopupComponent); let dialog = this.MatDialog.open(LoginPopupComponent);
} }
} }

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

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

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

@ -1,7 +1,7 @@
import { EventService } from './../../../services/event.service'; import { EventService } from './../../../services/event.service';
import { OkPopupComponent } from './../ok-popup/ok-popup.component'; import { OkPopupComponent } from './../ok-popup/ok-popup.component';
import { LoginPopupComponent } from './../login-popup/login-popup.component'; import { LoginPopupComponent } from './../login-popup/login-popup.component';
import { MdDialog, MdDialogRef, MdSnackBar } from '@angular/material'; import { MatDialog, MatDialogRef, MatSnackBar } from '@angular/material';
import { Event } from './../../../interfaces/event'; import { Event } from './../../../interfaces/event';
import { LoginService } from './../../../services/login.service'; import { LoginService } from './../../../services/login.service';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
@ -33,7 +33,7 @@ export class AddEventPopupComponent implements OnInit {
public errorMessages: string[] = []; public errorMessages: string[] = [];
constructor(private mdDialog: MdDialog, private mdDialogRef: MdDialogRef<AddEventPopupComponent>, private loginService: LoginService, private eventService: EventService) { } constructor(private MatDialog: MatDialog, private MatDialogRef: MatDialogRef<AddEventPopupComponent>, private loginService: LoginService, private eventService: EventService) { }
ngOnInit() { ngOnInit() {
@ -47,7 +47,7 @@ export class AddEventPopupComponent implements OnInit {
if (is === true){ if (is === true){
this.addEvent(); this.addEvent();
} else { } else {
let popup = this.mdDialog.open(LoginPopupComponent); let popup = this.MatDialog.open(LoginPopupComponent);
popup.afterClosed().subscribe(r => { popup.afterClosed().subscribe(r => {
if (r === true){ if (r === true){
this.addEvent(); this.addEvent();
@ -59,7 +59,7 @@ export class AddEventPopupComponent implements OnInit {
}, },
error =>{ error =>{
this.updateAddButton(true); this.updateAddButton(true);
let errorDialog = this.mdDialog.open(OkPopupComponent,{data:{title:'Error',message:'There was an error adding the event\n' + error}}); let errorDialog = this.MatDialog.open(OkPopupComponent,{data:{title:'Error',message:'There was an error adding the event\n' + error}});
}); });
} }
@ -98,17 +98,17 @@ export class AddEventPopupComponent implements OnInit {
this.eventService.addEvent(e).subscribe( this.eventService.addEvent(e).subscribe(
data=>{ data=>{
this.updateAddButton(true); this.updateAddButton(true);
this.mdDialogRef.close(data.sermon); this.MatDialogRef.close(data.sermon);
}, },
error => { error => {
this.updateAddButton(true); this.updateAddButton(true);
let errorDialog = this.mdDialog.open(OkPopupComponent,{data:{title:'Upload Error',message:'There was an error uploading the sermon\n' + error}}); let errorDialog = this.MatDialog.open(OkPopupComponent,{data:{title:'Upload Error',message:'There was an error uploading the sermon\n' + error}});
}); });
} }
cancel(evt){ cancel(evt){
evt.preventDefault(); evt.preventDefault();
this.mdDialogRef.close(); this.MatDialogRef.close();
} }
} }

30
Client/src/app/components/popups/add-sermon-popup/add-sermon-popup.component.html
View File

@ -2,25 +2,25 @@
Add Sermon<br> Add Sermon<br>
<div *ngIf="monitorProgress"> <div *ngIf="monitorProgress">
<span class="progressPct">{{ uploadProgress/uploadTotal | percent:'1.0-2' }}</span> <span class="progressPct">{{ uploadProgress/uploadTotal | percent:'1.0-2' }}</span>
<md-slider class="progressBar" min="0" [max]="uploadTotal" step="1" [value]="uploadProgress"></md-slider> <mat-slider class="progressBar" min="0" [max]="uploadTotal" step="1" [value]="uploadProgress"></mat-slider>
</div> </div>
</div> </div>
<div md-dialog-content> <div md-dialog-content>
<form #addSermonForm="ngForm" (ngSubmit)="onSubmit()"> <form #addSermonForm="ngForm" (ngSubmit)="onSubmit()">
<md-input-container class="full-width"> <mat-form-field class="full-width">
<input mdInput placeholder="Title" required [(ngModel)]="sermonTitle" name="title" > <input matInput placeholder="Title" required [(ngModel)]="sermonTitle" name="title" >
</md-input-container> </mat-form-field>
<md-input-container> <mat-form-field>
<input mdInput placeholder="Date" required [ngModel]="sermonDate | date:'yyyy-MM-ddTHH:mm'" (ngModelChange)="sermonDate = $event" name="date" type="datetime-local"> <input matInput placeholder="Date" required [ngModel]="sermonDate | date:'yyyy-MM-ddTHH:mm'" (ngModelChange)="sermonDate = $event" name="date" type="datetime-local">
</md-input-container> </mat-form-field>
<md-input-container class="full-width"> <mat-form-field class="full-width">
<input mdInput placeholder="Speaker" required [(ngModel)]="sermonSpeaker" name="speaker" > <input matInput placeholder="Speaker" required [(ngModel)]="sermonSpeaker" name="speaker" >
</md-input-container> </mat-form-field>
<md-input-container class="full-width"> <mat-form-field class="full-width">
<input mdInput placeholder="Description" required [(ngModel)]="sermonDescription" name="description" > <input matInput placeholder="Description" required [(ngModel)]="sermonDescription" name="description" >
</md-input-container> </mat-form-field>
<input type="file" (change)="onFileChange($event)" placeholder="Choose File" accept=".mp3,audio/mpeg3" > <input type="file" (change)="onFileChange($event)" placeholder="Choose File" accept=".mp3,audio/mpeg3" >
<br><br> <br><br>
@ -29,7 +29,7 @@
{{error}} {{error}}
</p> </p>
</div> </div>
<button md-raised-button class="first" (click)="cancel($event)" >Cancel</button><!-- <button mat-raised-button class="first" (click)="cancel($event)" >Cancel</button><!--
--><button md-raised-button type="submit" [disabled]="!addSermonForm.form.valid || addSermonButtonDisabled">{{ addSermonButtonText }}</button> --><button mat-raised-button type="submit" [disabled]="!addSermonForm.form.valid || addSermonButtonDisabled">{{ addSermonButtonText }}</button>
</form> </form>
</div> </div>

14
Client/src/app/components/popups/add-sermon-popup/add-sermon-popup.component.ts
View File

@ -2,7 +2,7 @@ import { OkPopupComponent } from './../ok-popup/ok-popup.component';
import { Observable, Subscription } from 'rxjs'; import { Observable, Subscription } from 'rxjs';
import { ProgressService } from './../../../services/xhr-progress.service'; import { ProgressService } from './../../../services/xhr-progress.service';
import { LoginPopupComponent } from './../login-popup/login-popup.component'; import { LoginPopupComponent } from './../login-popup/login-popup.component';
import { MdDialog, MdDialogRef, MdSnackBar } from '@angular/material'; import { MatDialog, MatDialogRef, MatSnackBar } from '@angular/material';
import { Sermon } from './../../../interfaces/sermon'; import { Sermon } from './../../../interfaces/sermon';
import { SermonService } from './../../../services/sermon.service'; import { SermonService } from './../../../services/sermon.service';
import { LoginService } from './../../../services/login.service'; import { LoginService } from './../../../services/login.service';
@ -33,7 +33,7 @@ export class AddSermonPopupComponent implements OnInit, OnDestroy {
private progressSubscription: Subscription; private progressSubscription: Subscription;
constructor(private progressService: ProgressService, private mdDialog: MdDialog, private mdDialogRef: MdDialogRef<AddSermonPopupComponent>, private loginService: LoginService, private sermonService: SermonService) { } constructor(private progressService: ProgressService, private MatDialog: MatDialog, private MatDialogRef: MatDialogRef<AddSermonPopupComponent>, private loginService: LoginService, private sermonService: SermonService) { }
ngOnInit() { ngOnInit() {
this.progressSubscription = this.progressService.uploadProgress.subscribe(evt => { this.progressSubscription = this.progressService.uploadProgress.subscribe(evt => {
@ -54,7 +54,7 @@ export class AddSermonPopupComponent implements OnInit, OnDestroy {
if (is === true){ if (is === true){
this.addSermon(); this.addSermon();
} else { } else {
let popup = this.mdDialog.open(LoginPopupComponent); let popup = this.MatDialog.open(LoginPopupComponent);
popup.afterClosed().subscribe(r => { popup.afterClosed().subscribe(r => {
if (r === true){ if (r === true){
this.addSermon(); this.addSermon();
@ -66,7 +66,7 @@ export class AddSermonPopupComponent implements OnInit, OnDestroy {
}, },
error =>{ error =>{
this.updateAddButton(true); this.updateAddButton(true);
let errorDialog = this.mdDialog.open(OkPopupComponent,{data:{title:'Upload Error',message:'There was an error uploading the sermon\n' + error}}); let errorDialog = this.MatDialog.open(OkPopupComponent,{data:{title:'Upload Error',message:'There was an error uploading the sermon\n' + error}});
}); });
} }
@ -119,14 +119,14 @@ export class AddSermonPopupComponent implements OnInit, OnDestroy {
this.updateAddButton(true); this.updateAddButton(true);
this.monitorProgress = false; this.monitorProgress = false;
clearInterval(timer); clearInterval(timer);
this.mdDialogRef.close(data.sermon); this.MatDialogRef.close(data.sermon);
}, },
error => { error => {
alert(error); alert(error);
this.updateAddButton(true); this.updateAddButton(true);
this.monitorProgress = false; this.monitorProgress = false;
clearInterval(timer); clearInterval(timer);
let errorDialog = this.mdDialog.open(OkPopupComponent,{data:{title:'Upload Error',message:'There was an error uploading the sermon\n' + error}}); let errorDialog = this.MatDialog.open(OkPopupComponent,{data:{title:'Upload Error',message:'There was an error uploading the sermon\n' + error}});
}); });
} }
@ -136,7 +136,7 @@ export class AddSermonPopupComponent implements OnInit, OnDestroy {
cancel(evt){ cancel(evt){
evt.preventDefault(); evt.preventDefault();
this.mdDialogRef.close(); this.MatDialogRef.close();
} }
} }

8
Client/src/app/components/popups/input-popup/input-popup.component.html
View File

@ -1,10 +1,10 @@
<div md-dialog-title>{{title}}</div> <div md-dialog-title>{{title}}</div>
<div md-dialog-content> <div md-dialog-content>
{{message}}<br> {{message}}<br>
<md-input-container> <mat-form-field>
<input mdInput [(ngModel)]="searchTerm" (keyup.enter)="onEnter()" name="search" placeholder="Search"> <input matInput [(ngModel)]="searchTerm" (keyup.enter)="onEnter()" name="search" placeholder="Search">
</md-input-container> </mat-form-field>
</div> </div>
<div md-dialog-actions class="align-right display-block"> <div md-dialog-actions class="align-right display-block">
<button md-raised-button (click)="ok()" class="display-inline">OK</button> <button mat-raised-button (click)="ok()" class="display-inline">OK</button>
</div> </div>

10
Client/src/app/components/popups/input-popup/input-popup.component.ts
View File

@ -1,5 +1,5 @@
import { MdDialogRef } from '@angular/material'; import { MatDialogRef } from '@angular/material';
import { MD_DIALOG_DATA } from '@angular/material'; import { MAT_DIALOG_DATA } from '@angular/material';
import { Component, OnInit, Inject } from '@angular/core'; import { Component, OnInit, Inject } from '@angular/core';
@Component({ @Component({
@ -13,7 +13,7 @@ export class InputPopupComponent implements OnInit {
public message: string; public message: string;
public searchTerm: string = ""; public searchTerm: string = "";
constructor(@Inject(MD_DIALOG_DATA) public data: any, private mdDialogRef: MdDialogRef<InputPopupComponent>) { constructor(@Inject(MAT_DIALOG_DATA) public data: any, private MatDialogRef: MatDialogRef<InputPopupComponent>) {
this.title = data.title; this.title = data.title;
this.message = data.message; this.message = data.message;
} }
@ -22,11 +22,11 @@ export class InputPopupComponent implements OnInit {
} }
ok(){ ok(){
this.mdDialogRef.close(this.searchTerm); this.MatDialogRef.close(this.searchTerm);
} }
onEnter(){ onEnter(){
this.mdDialogRef.close(this.searchTerm); this.MatDialogRef.close(this.searchTerm);
} }
} }

16
Client/src/app/components/popups/login-popup/login-popup.component.html
View File

@ -3,13 +3,13 @@
</div> </div>
<div md-dialog-content> <div md-dialog-content>
<form class="form" #loginForm="ngForm" (ngSubmit)="onSubmit()"> <form class="form" #loginForm="ngForm" (ngSubmit)="onSubmit()">
<md-input-container class="input-container"> <mat-form-field class="input-container">
<input mdInput placeholder="Username" required value="" [(ngModel)]="username" name="username"> <input matInput placeholder="Username" required value="" [(ngModel)]="username" name="username">
</md-input-container> </mat-form-field>
<md-input-container class="input-container"> <mat-form-field class="input-container">
<input type="password" mdInput placeholder="Password" required value="" [(ngModel)]="password" name="password"> <input type="password" matInput placeholder="Password" required value="" [(ngModel)]="password" name="password">
</md-input-container> </mat-form-field>
<button md-raised-button type="button" class="first" (click)="cancel()">Cancel</button><!-- <button mat-raised-button type="button" class="first" (click)="cancel()">Cancel</button><!--
--><button md-raised-button type="submit" [disabled]="!loginForm.form.valid || loginButtonDisabled">{{loginButtonText}}</button> --><button mat-raised-button type="submit" [disabled]="!loginForm.form.valid || loginButtonDisabled">{{loginButtonText}}</button>
</form> </form>
</div> </div>

12
Client/src/app/components/popups/login-popup/login-popup.component.ts
View File

@ -1,5 +1,5 @@
import { OkPopupComponent } from './../ok-popup/ok-popup.component'; import { OkPopupComponent } from './../ok-popup/ok-popup.component';
import { MdSnackBar, MdDialogRef, MdDialog, MdDialogConfig } from '@angular/material'; import { MatSnackBar, MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material';
import { LoginService } from './../../../services/login.service'; import { LoginService } from './../../../services/login.service';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
@ -15,7 +15,7 @@ export class LoginPopupComponent implements OnInit {
public username: string; public username: string;
public password: string; public password: string;
constructor(private mdDialog: MdDialog, private mdDialogRef: MdDialogRef<LoginPopupComponent>, private loginService: LoginService, private snackbar: MdSnackBar) { } constructor(private MatDialog: MatDialog, private MatDialogRef: MatDialogRef<LoginPopupComponent>, private loginService: LoginService, private snackbar: MatSnackBar) { }
ngOnInit() { ngOnInit() {
} }
@ -26,7 +26,7 @@ export class LoginPopupComponent implements OnInit {
this.loginService.login(this.username,this.password).subscribe( this.loginService.login(this.username,this.password).subscribe(
data => { data => {
if (data.message === 'Logged In'){ if (data.message === 'Logged In'){
this.mdDialogRef.close(true); this.MatDialogRef.close(true);
let s = this.snackbar.open("Logged In","OK"); let s = this.snackbar.open("Logged In","OK");
s.onAction().subscribe(()=>{ s.dismiss(); }); s.onAction().subscribe(()=>{ s.dismiss(); });
s.afterOpened().subscribe(()=>{ setTimeout(()=>{ s.dismiss(); },3000); }); s.afterOpened().subscribe(()=>{ setTimeout(()=>{ s.dismiss(); },3000); });
@ -45,13 +45,13 @@ export class LoginPopupComponent implements OnInit {
} }
showLoginError(message: string){ showLoginError(message: string){
let opts = new MdDialogConfig; let opts = new MatDialogConfig;
opts.data = { title:'Login Error','message':message }; opts.data = { title:'Login Error','message':message };
let popup = this.mdDialog.open(OkPopupComponent,opts); let popup = this.MatDialog.open(OkPopupComponent,opts);
} }
cancel(){ cancel(){
this.mdDialogRef.close(); this.MatDialogRef.close();
} }
} }

2
Client/src/app/components/popups/ok-popup/ok-popup.component.html
View File

@ -1,5 +1,5 @@
<div md-dialog-title>{{title}}</div> <div md-dialog-title>{{title}}</div>
<div md-dialog-content>{{message}}</div> <div md-dialog-content>{{message}}</div>
<div md-dialog-actions> <div md-dialog-actions>
<button md-raised-button (click)="close()">OK</button> <button mat-raised-button (click)="close()">OK</button>
</div> </div>

8
Client/src/app/components/popups/ok-popup/ok-popup.component.ts
View File

@ -1,5 +1,5 @@
import { MdDialogRef } from '@angular/material'; import { MatDialogRef } from '@angular/material';
import { MD_DIALOG_DATA } from '@angular/material'; import { MAT_DIALOG_DATA } from '@angular/material';
import { Component, OnInit, Inject } from '@angular/core'; import { Component, OnInit, Inject } from '@angular/core';
@Component({ @Component({
@ -12,7 +12,7 @@ export class OkPopupComponent implements OnInit {
public title: string; public title: string;
public message: string; public message: string;
constructor(@Inject(MD_DIALOG_DATA) public data: any, private mdDialogRef: MdDialogRef<OkPopupComponent>) { constructor(@Inject(MAT_DIALOG_DATA) public data: any, private MatDialogRef: MatDialogRef<OkPopupComponent>) {
this.title = data.title; this.title = data.title;
this.message = data.message; this.message = data.message;
} }
@ -21,7 +21,7 @@ export class OkPopupComponent implements OnInit {
} }
close(){ close(){
this.mdDialogRef.close(); this.MatDialogRef.close();
} }
} }

8
Client/src/app/components/popups/share-popup/share-popup.component.html
View File

@ -30,10 +30,10 @@
<span class="st-label">Copy Link</span> <span class="st-label">Copy Link</span>
</div> </div>
</a> </a>
<md-input-container class="width100"> <mat-form-field class="width100">
<input mdInput #shareText value="{{shareUrl}}"> <input matInput #shareText value="{{shareUrl}}">
</md-input-container> </mat-form-field>
</div> </div>
<div md-dialog-actions> <div md-dialog-actions>
<button md-raised-button (click)="close()">OK</button> <button mat-raised-button (click)="close()">OK</button>
</div> </div>

12
Client/src/app/components/popups/share-popup/share-popup.component.ts
View File

@ -1,7 +1,7 @@
import { GoogleAnalyticsService } from './../../../services/google-analytics.service'; import { GoogleAnalyticsService } from './../../../services/google-analytics.service';
import { MdDialogRef, MdSnackBar } from '@angular/material'; import { MatDialogRef, MatSnackBar } from '@angular/material';
import { DOCUMENT } from '@angular/platform-browser'; import { DOCUMENT } from '@angular/platform-browser';
import { MD_DIALOG_DATA } from '@angular/material'; import { MAT_DIALOG_DATA } from '@angular/material';
import { Component, OnInit, Inject } from '@angular/core'; import { Component, OnInit, Inject } from '@angular/core';
@Component({ @Component({
@ -22,10 +22,10 @@ export class SharePopupComponent implements OnInit {
private shareBaseUrl: string = "/api2/share/"; private shareBaseUrl: string = "/api2/share/";
public shareUrl: string; public shareUrl: string;
constructor(@Inject(MD_DIALOG_DATA) public data: any, constructor(@Inject(MAT_DIALOG_DATA) public data: any,
@Inject(DOCUMENT) private document, @Inject(DOCUMENT) private document,
private mdDialogRef: MdDialogRef<SharePopupComponent>, private MatDialogRef: MatDialogRef<SharePopupComponent>,
private snackbar: MdSnackBar, private snackbar: MatSnackBar,
private googleAnalyticsService: GoogleAnalyticsService) { private googleAnalyticsService: GoogleAnalyticsService) {
this.id = data.id; this.id = data.id;
let port = this.document.location.port ? ":"+this.document.location.port : ""; let port = this.document.location.port ? ":"+this.document.location.port : "";
@ -38,7 +38,7 @@ export class SharePopupComponent implements OnInit {
} }
close(){ close(){
this.mdDialogRef.close(); this.MatDialogRef.close();
} }
copyLink(target){ copyLink(target){

2
Client/src/app/components/popups/update-sermon-popup/update-sermon-popup.component.css
View File

@ -1,6 +1,6 @@
md-input-container{ mat-form-field{
display:block; display:block;
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;

28
Client/src/app/components/popups/update-sermon-popup/update-sermon-popup.component.html
View File

@ -4,20 +4,20 @@
<div md-dialog-content> <div md-dialog-content>
<form #updateSermonForm="ngForm" (ngSubmit)="onSubmit()"> <form #updateSermonForm="ngForm" (ngSubmit)="onSubmit()">
<md-input-container class="example-full-width"> <mat-form-field class="example-full-width">
<input mdInput required [(ngModel)]="sermonTitle" name="title" placeholder="Title"> <input matInput required [(ngModel)]="sermonTitle" name="title" placeholder="Title">
</md-input-container> </mat-form-field>
<md-input-container> <mat-form-field>
<input mdInput required [ngModel]="sermonDate | date:'yyyy-MM-ddTHH:mm'" (ngModelChange)="sermonDate = $event" name="date" type="datetime-local" placeholder="Choose a date"> <input matInput required [ngModel]="sermonDate | date:'yyyy-MM-ddTHH:mm'" (ngModelChange)="sermonDate = $event" name="date" type="datetime-local" placeholder="Choose a date">
</md-input-container> </mat-form-field>
<md-input-container class="example-full-width"> <mat-form-field class="example-full-width">
<input mdInput required [(ngModel)]="sermonSpeaker" name="speaker" placeholder="Speaker"> <input matInput required [(ngModel)]="sermonSpeaker" name="speaker" placeholder="Speaker">
</md-input-container> </mat-form-field>
<md-input-container class="example-full-width"> <mat-form-field class="example-full-width">
<input mdInput required [(ngModel)]="sermonDescription" name="description" placeholder="Description"> <input matInput required [(ngModel)]="sermonDescription" name="description" placeholder="Description">
</md-input-container> </mat-form-field>
<button md-raised-button class="first" type="button" (click)="cancel()" >Cancel</button><!-- <button mat-raised-button class="first" type="button" (click)="cancel()" >Cancel</button><!--
--><button md-raised-button type="submit" [disabled]="!updateSermonForm.form.valid || updateSermonButtonDisabled">{{ updateSermonButtonText }}</button> --><button mat-raised-button type="submit" [disabled]="!updateSermonForm.form.valid || updateSermonButtonDisabled">{{ updateSermonButtonText }}</button>
</form> </form>
</div> </div>

18
Client/src/app/components/popups/update-sermon-popup/update-sermon-popup.component.ts
View File

@ -3,7 +3,7 @@ import { OkPopupComponent } from './../ok-popup/ok-popup.component';
import { Sermon } from './../../../interfaces/sermon'; import { Sermon } from './../../../interfaces/sermon';
import { SermonService } from './../../../services/sermon.service'; import { SermonService } from './../../../services/sermon.service';
import { LoginService } from './../../../services/login.service'; import { LoginService } from './../../../services/login.service';
import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '@angular/material'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { Component, OnInit, Inject } from '@angular/core'; import { Component, OnInit, Inject } from '@angular/core';
@Component({ @Component({
@ -21,9 +21,9 @@ export class UpdateSermonPopupComponent implements OnInit {
public sermonSpeaker: string; public sermonSpeaker: string;
public sermonDescription: string; public sermonDescription: string;
constructor(@Inject(MD_DIALOG_DATA) private data: any, constructor(@Inject(MAT_DIALOG_DATA) private data: any,
private mdDialog: MdDialog, private MatDialog: MatDialog,
private mdDialogRef: MdDialogRef<UpdateSermonPopupComponent>, private MatDialogRef: MatDialogRef<UpdateSermonPopupComponent>,
private loginService: LoginService, private loginService: LoginService,
private sermonService: SermonService) { private sermonService: SermonService) {
@ -46,7 +46,7 @@ export class UpdateSermonPopupComponent implements OnInit {
if (is === true){ if (is === true){
this.updateSermon(); this.updateSermon();
} else { } else {
let popup = this.mdDialog.open(LoginPopupComponent); let popup = this.MatDialog.open(LoginPopupComponent);
popup.afterClosed().subscribe(r => { popup.afterClosed().subscribe(r => {
if (r === true){ if (r === true){
this.updateSermon(); this.updateSermon();
@ -58,7 +58,7 @@ export class UpdateSermonPopupComponent implements OnInit {
}, },
error =>{ error =>{
this.updateButton(true); this.updateButton(true);
let errorDialog = this.mdDialog.open(OkPopupComponent,{data:{title:'Upload Error',message:'There was an error uploading the sermon\n' + error}}); let errorDialog = this.MatDialog.open(OkPopupComponent,{data:{title:'Upload Error',message:'There was an error uploading the sermon\n' + error}});
}); });
} }
@ -73,11 +73,11 @@ export class UpdateSermonPopupComponent implements OnInit {
//Start monitoring Progress //Start monitoring Progress
this.sermonService.updateSermon(s).subscribe( this.sermonService.updateSermon(s).subscribe(
data=>{ data=>{
this.mdDialogRef.close(data.sermon); this.MatDialogRef.close(data.sermon);
}, },
error => { error => {
this.updateButton(true); this.updateButton(true);
let errorDialog = this.mdDialog.open(OkPopupComponent,{data:{title:'Update Error',message:'There was an error updating the sermon\n' + error}}); let errorDialog = this.MatDialog.open(OkPopupComponent,{data:{title:'Update Error',message:'There was an error updating the sermon\n' + error}});
}); });
} }
@ -91,7 +91,7 @@ export class UpdateSermonPopupComponent implements OnInit {
} }
cancel(){ cancel(){
this.mdDialogRef.close(); this.MatDialogRef.close();
} }
} }

4
Client/src/app/components/popups/yes-no-popup/yes-no-popup.component.html
View File

@ -1,6 +1,6 @@
<div md-dialog-title>{{title}}</div> <div md-dialog-title>{{title}}</div>
<div md-dialog-content>{{message}}</div> <div md-dialog-content>{{message}}</div>
<div md-dialog-actions> <div md-dialog-actions>
<button md-raised-button (click)="yes()">YES</button> <button mat-raised-button (click)="yes()">YES</button>
<button md-raised-button (click)="no()">NO</button> <button mat-raised-button (click)="no()">NO</button>
</div> </div>

10
Client/src/app/components/popups/yes-no-popup/yes-no-popup.component.ts
View File

@ -1,5 +1,5 @@
import { MdDialogRef } from '@angular/material'; import { MatDialogRef } from '@angular/material';
import { MD_DIALOG_DATA } from '@angular/material'; import { MAT_DIALOG_DATA } from '@angular/material';
import { Component, OnInit, Inject } from '@angular/core'; import { Component, OnInit, Inject } from '@angular/core';
@Component({ @Component({
@ -12,7 +12,7 @@ export class YesNoPopupComponent implements OnInit {
public title: string; public title: string;
public message: string; public message: string;
constructor(@Inject(MD_DIALOG_DATA) public data: any, private mdDialogRef: MdDialogRef<YesNoPopupComponent>) { constructor(@Inject(MAT_DIALOG_DATA) public data: any, private MatDialogRef: MatDialogRef<YesNoPopupComponent>) {
this.title = data.title; this.title = data.title;
this.message = data.message; this.message = data.message;
} }
@ -21,11 +21,11 @@ export class YesNoPopupComponent implements OnInit {
} }
yes(){ yes(){
this.mdDialogRef.close(true); this.MatDialogRef.close(true);
} }
no(){ no(){
this.mdDialogRef.close(false); this.MatDialogRef.close(false);
} }
} }

12
Client/src/app/components/sermon-large/sermon-large-pic.component.html
View File

@ -1,6 +1,6 @@
<div class="wrapper" [@inout]="startFadeIn"> <div class="wrapper" [@inout]="startFadeIn">
<div class="photo"> <div class="photo">
<button md-button (click)="play()"> <button mat-button (click)="play()">
<img src="../../assets/images/tiny/facebookplay.png" /> <img src="../../assets/images/tiny/facebookplay.png" />
</button> </button>
</div><!-- </div><!--
@ -20,13 +20,13 @@
</p> </p>
</div> </div>
<div class="buttons"> <div class="buttons">
<button md-button class="action pct40" (click)="play()" ><i ofbicon>headset</i> Listen</button><!-- <button mat-button class="action pct40" (click)="play()" ><i ofbicon>headset</i> Listen</button><!--
--><button md-button class="action pct50" (click)="download()" ><i ofbicon>file_download</i> Download</button><!-- --><button mat-button class="action pct50" (click)="download()" ><i ofbicon>file_download</i> Download</button><!--
--><button md-button class="action pct10" (click)="share()" ><i ofbicon>share</i> Share</button> --><button mat-button class="action pct10" (click)="share()" ><i ofbicon>share</i> Share</button>
</div> </div>
<div class="buttons-edit" *ngIf="loggedIn"> <div class="buttons-edit" *ngIf="loggedIn">
<div class="border"></div> <div class="border"></div>
<button md-button class="action" (click)="edit()" ><i ofbicon>edit</i> Edit</button><!-- <button mat-button class="action" (click)="edit()" ><i ofbicon>edit</i> Edit</button><!--
--><button md-button class="action" (click)="delete()" ><i ofbicon>delete_forever</i> Delete</button> --><button mat-button class="action" (click)="delete()" ><i ofbicon>delete_forever</i> Delete</button>
</div> </div>
</div> </div>

10
Client/src/app/components/sermon-large/sermon-large.component.html
View File

@ -7,13 +7,13 @@
<div class="info"> <div class="info">
<div class="description">{{ description }}</div><!-- <div class="description">{{ description }}</div><!--
--><div class="action-buttons"> --><div class="action-buttons">
<button md-button class="action pct40" (click)="play()" ><i ofbicon>headset</i> Listen</button><!-- <button mat-button class="action pct40" (click)="play()" ><i ofbicon>headset</i> Listen</button><!--
--><button md-button class="action pct50" (click)="download()" ><i ofbicon>file_download</i> Download</button><!-- --><button mat-button class="action pct50" (click)="download()" ><i ofbicon>file_download</i> Download</button><!--
--><button md-button class="action pct10" (click)="share()" ><i ofbicon>share</i> Share</button> --><button mat-button class="action pct10" (click)="share()" ><i ofbicon>share</i> Share</button>
</div><!-- </div><!--
--><div class="action-buttons" *ngIf="loggedIn"> --><div class="action-buttons" *ngIf="loggedIn">
<button md-button class="action" (click)="edit()" ><i ofbicon>edit</i> Edit</button><!-- <button mat-button class="action" (click)="edit()" ><i ofbicon>edit</i> Edit</button><!--
--><button md-button class="action" (click)="delete()" ><i ofbicon>delete_forever</i> Delete</button> --><button mat-button class="action" (click)="delete()" ><i ofbicon>delete_forever</i> Delete</button>
</div> </div>
</div> </div>

12
Client/src/app/components/sermon-large/sermon-large.component.ts
View File

@ -3,7 +3,7 @@ import { Sermon } from './../../interfaces/sermon';
import { UpdateSermonPopupComponent } from './../popups/update-sermon-popup/update-sermon-popup.component'; import { UpdateSermonPopupComponent } from './../popups/update-sermon-popup/update-sermon-popup.component';
import { SermonService } from './../../services/sermon.service'; import { SermonService } from './../../services/sermon.service';
import { YesNoPopupComponent } from './../popups/yes-no-popup/yes-no-popup.component'; import { YesNoPopupComponent } from './../popups/yes-no-popup/yes-no-popup.component';
import { MdDialog, MdDialogConfig, MdSnackBar } from '@angular/material'; import { MatDialog, MatDialogConfig, MatSnackBar } from '@angular/material';
import { Component, OnInit, Input, AfterContentInit } from '@angular/core'; import { Component, OnInit, Input, AfterContentInit } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations'; import { trigger, state, style, transition, animate } from '@angular/animations';
import { SermonSmallComponent } from '../sermon-small/sermon-small.component'; import { SermonSmallComponent } from '../sermon-small/sermon-small.component';
@ -53,9 +53,9 @@ export class SermonLargeComponent extends SermonSmallComponent implements OnInit
public loggedIn: boolean; public loggedIn: boolean;
constructor(private aplayer: AudioPlayerService constructor(private aplayer: AudioPlayerService
,private dialog: MdDialog ,private dialog: MatDialog
,private sermonService: SermonService ,private sermonService: SermonService
,private snackbar: MdSnackBar) { ,private snackbar: MatSnackBar) {
super(aplayer); super(aplayer);
} }
@ -71,13 +71,13 @@ export class SermonLargeComponent extends SermonSmallComponent implements OnInit
} }
share(){ share(){
let opts = new MdDialogConfig; let opts = new MatDialogConfig;
opts.data = { prefix: 's', id: this.id, title: this.title, description: this.description }; opts.data = { prefix: 's', id: this.id, title: this.title, description: this.description };
let dialog = this.dialog.open(SharePopupComponent, opts); let dialog = this.dialog.open(SharePopupComponent, opts);
} }
edit(){ edit(){
let config = new MdDialogConfig(); let config = new MatDialogConfig();
config.data = { config.data = {
id: this.id, id: this.id,
title: this.title, title: this.title,
@ -105,7 +105,7 @@ export class SermonLargeComponent extends SermonSmallComponent implements OnInit
} }
delete(){ delete(){
let opts = new MdDialogConfig; let opts = new MatDialogConfig;
opts.data = { title:'Delete','message':'Are you sure you want to delete "' + this.title + '"?' }; opts.data = { title:'Delete','message':'Are you sure you want to delete "' + this.title + '"?' };
let dialog = this.dialog.open(YesNoPopupComponent, opts); let dialog = this.dialog.open(YesNoPopupComponent, opts);

2
Client/src/app/components/sermon-small/sermon-small.component.html
View File

@ -1,7 +1,7 @@
<div class="wrapper" [@inout]="startFadeIn"> <div class="wrapper" [@inout]="startFadeIn">
<div class="inner-wrapper"> <div class="inner-wrapper">
<div class="title"> <div class="title">
<button md-button (click)="play()"></button> <button mat-button (click)="play()"></button>
<date-component class="title-date" [date]="date"></date-component> <date-component class="title-date" [date]="date"></date-component>
<span class="title-text">{{ title }}</span> <span class="title-text">{{ title }}</span>
</div> </div>

20
Client/src/app/components/sermons/sermons.component.html
View File

@ -1,9 +1,9 @@
<secondary-page-component [hideSideBarOnMobile]="true" > <secondary-page-component [hideSideBarOnMobile]="true" >
<div mainContent> <div mainContent>
<div class="mobile-search"> <div class="mobile-search">
<md-input-container class="width100"> <mat-form-field class="width100">
<input #searchMobile mdInput placeholder="Search Sermons" [value]="searchTerm" (keyup)="searchChange(searchMobile.value)"> <input #searchMobile matInput placeholder="Search Sermons" [value]="searchTerm" (keyup)="searchChange(searchMobile.value)">
</md-input-container> </mat-form-field>
<br><br> <br><br>
</div> </div>
<ul> <ul>
@ -19,23 +19,23 @@
[loggedIn]="loggedIn" [loggedIn]="loggedIn"
></sermon-large-component> ></sermon-large-component>
</li> </li>
<button md-button [disabled]="loading" class="width100" style="text-align: center;" (click)="loadMoreSermonsClick()"> <button mat-button [disabled]="loading" class="width100" style="text-align: center;" (click)="loadMoreSermonsClick()">
<i ofbicon *ngIf="loading">access_time</i><span *ngIf="loading"> Loading...</span> <i ofbicon *ngIf="loading">access_time</i><span *ngIf="loading"> Loading...</span>
<i ofbicon *ngIf="!loading">expand_more</i><span *ngIf="!loading"> Load More</span> <i ofbicon *ngIf="!loading">expand_more</i><span *ngIf="!loading"> Load More</span>
</button> </button>
</ul> </ul>
<div class="fab-buttons" > <div class="fab-buttons" >
<button md-fab (click)="searchFabClick()"><i ofbicon>search</i></button> <button mat-fab (click)="searchFabClick()"><i ofbicon>search</i></button>
<button md-fab *ngIf="loggedIn" (click)="addSermon()"><i ofbicon>add</i></button> <button mat-fab *ngIf="loggedIn" (click)="addSermon()"><i ofbicon>add</i></button>
<div id="audio-player-filler" *ngIf="audioPlayerOpen"></div> <div id="audio-player-filler" *ngIf="audioPlayerOpen"></div>
</div> </div>
</div> </div>
<div sideBar class="side-bar"> <div sideBar class="side-bar">
<div class="search-bar"> <div class="search-bar">
<md-input-container class="width100"> <mat-form-field class="width100">
<input #search mdInput placeholder="Search Sermons" [value]="searchTerm" (keyup)="searchChange(search.value)"> <input #search matInput placeholder="Search Sermons" [value]="searchTerm" (keyup)="searchChange(search.value)">
</md-input-container> </mat-form-field>
</div> </div>
<button md-raised-button *ngIf="loggedIn" class="width100" (click)="addSermon()" >Add Sermon</button> <button mat-raised-button *ngIf="loggedIn" class="width100" (click)="addSermon()" >Add Sermon</button>
</div> </div>
</secondary-page-component> </secondary-page-component>

10
Client/src/app/components/sermons/sermons.component.ts
View File

@ -7,7 +7,7 @@ import { Location } from '@angular/common';
import { SermonService } from '../../services/sermon.service'; import { SermonService } from '../../services/sermon.service';
import { LoginService } from '../../services/login.service'; import { LoginService } from '../../services/login.service';
import { Sermon } from '../../interfaces/sermon'; import { Sermon } from '../../interfaces/sermon';
import { MdSnackBar, MdDialog, MdDialogConfig } from '@angular/material'; import { MatSnackBar, MatDialog, MatDialogConfig } from '@angular/material';
import { AddSermonPopupComponent } from '../popups/add-sermon-popup/add-sermon-popup.component'; import { AddSermonPopupComponent } from '../popups/add-sermon-popup/add-sermon-popup.component';
@ -28,12 +28,12 @@ export class SermonsComponent implements OnInit {
public loggedIn: boolean = false; public loggedIn: boolean = false;
public audioPlayerOpen: boolean; public audioPlayerOpen: boolean;
private searchWait: any; private searchWait: any;
private dialogConfig: MdDialogConfig; private dialogConfig: MatDialogConfig;
constructor(private loginService: LoginService, constructor(private loginService: LoginService,
private snackbar: MdSnackBar, private snackbar: MatSnackBar,
private dialog: MdDialog, private dialog: MatDialog,
private sermonService: SermonService, private sermonService: SermonService,
private route: ActivatedRoute, private route: ActivatedRoute,
private location: Location, private location: Location,
@ -126,7 +126,7 @@ export class SermonsComponent implements OnInit {
} }
searchFabClick(){ searchFabClick(){
let opts = new MdDialogConfig; let opts = new MatDialogConfig;
opts.data = { title:'Search','message':'' }; opts.data = { title:'Search','message':'' };
let dialog = this.dialog.open(InputPopupComponent,opts); let dialog = this.dialog.open(InputPopupComponent,opts);

6
Client/src/app/components/whoweare/whoweare.component.html
View File

@ -7,9 +7,9 @@
to spread the word of God as well as encourage and challenge believers in their Christian life. to spread the word of God as well as encourage and challenge believers in their Christian life.
<br><br> <br><br>
<div class="container-3-col"> <div class="container-3-col">
<button md-raised-button routerLink="/services"><i ofbicon>access_time</i> Service Schedule</button><!-- <button mat-raised-button routerLink="/services"><i ofbicon>access_time</i> Service Schedule</button><!--
--><button md-raised-button routerLink="/location"><i ofbicon>directions</i> Directions</button><!-- --><button mat-raised-button routerLink="/location"><i ofbicon>directions</i> Directions</button><!--
--><button md-raised-button routerLink="/contact"><i ofbicon>mail_outline</i> Contact Us</button> --><button mat-raised-button routerLink="/contact"><i ofbicon>mail_outline</i> Contact Us</button>
</div> </div>
</div> </div>
<br><br> <br><br>

4
Client/src/app/services/audio-player.service.ts
View File

@ -1,7 +1,9 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Sermon } from '../interfaces/sermon'; import { Sermon } from '../interfaces/sermon';
import { AudioStates } from '../enum/audio-states'; import { AudioStates } from '../enum/audio-states';
import { Subject, BehaviorSubject, Observable } from 'rxjs'; import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
@Injectable() @Injectable()
export class AudioPlayerService { export class AudioPlayerService {

3
Client/src/app/services/login.service.ts
View File

@ -1,7 +1,8 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Http, Response, RequestOptions } from '@angular/http'; import { Http, Response, RequestOptions } from '@angular/http';
import { Observable, Subject } from 'rxjs'; import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map'; import 'rxjs/add/operator/map';

2
Client/src/app/services/xhr-progress.service.ts
View File

@ -1,4 +1,4 @@
import { Subject } from 'rxjs'; import { Subject } from 'rxjs/Subject';
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';