sermonUpload/index.html at master · thomscode/sermonUpload · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!doctype html>

<!--
/**************************************************
*	Thom Williams
*	201102W0001
*	CET-482
*	Senior Project - Sermon Uploader
**************************************************/
-->

<html ng-app="SermonUploader">
	<head>
		<title>Sermon Info Update Page</title> <!-- Page Title -->

		<meta charset="utf-8">
<!-- Stylesheets -->
		<link type="text/css" rel="stylesheet"			href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
		<link type="text/css" rel="stylesheet"			href="./css/flick/jquery-ui.css" />
<!-- Dynamic Stylesheet link -->
<!-- 		<link type="text/css" rel="stylesheet/less" href="./css/main.less" /> -->
		<link type="text/css" rel="stylesheet" href="./css/main.css" />

<!-- Scripts -->
<!-- Dynamic Stylesheet script -->
<!-- 		<script type="text/javascript" src="./js/plugins/less/less.js"></script> -->
		<script type="text/javascript" src="./js/plugins/jquery/jquery.js"></script>
		<script type="text/javascript" src="./js/plugins/jquery/jquery-ui.js"></script>
		<script type="text/javascript" src="./js/plugins/jquery/jquery.form.js"></script>
		<script type="text/javascript" src="./js/plugins/angular/angular.js"></script>
		<script type="text/javascript" src="./js/plugins/angular/angular-sanitize.js"></script>
		<script type="text/javascript" src="./js/plugins/angular/date.js"></script>
		<script type="text/javascript" src="./js/controller.js"></script>
		<script type="text/javascript" src="./js/directive.js"></script>
	</head>

	<body ng-controller="Form">
		<div class="container">
		<h1>Sermon Info Update Page</h1>

<!-- Placeholder div for Bible verses -->
			<div class="bible" ng-bind-html="bible.text"></div>
			<div class="form">

<!-- Date -->
				<div class="clear">
					<label>Date</label>
					<input type="text" placeholder="mm/dd/yyyy" data-ng-model="date" data-ui-date="dateOptions">
				</div>

<!-- Service M, A, E for Morning, Afternoon, Evening -->
				<div class="clear">
					<label>Service</label>
					<div class="select">
						<select data-ng-model="service" data-ng-options="s.option for s in services"></select>
						<span class="fa fa-angle-down"></span>
					</div>
				</div>

<!-- Speaker (Both the speaker's title and name) -->
<!-- Title values are limited to Pastor, Missionary, and Evangelist -->
				<div class="clear">
					<label>Speaker</label>
					<div class="select short">
						<select data-ng-model="speakerTitle" data-ng-options="title.value as title.option for title in speakerTitles"></select>
						<span class="fa fa-angle-down"></span>
					</div>
					<input type="text" class="short speaker autofill" placeholder="Name" data-ng-model="name" data-tc-title-fix="speakerTitle">
				</div>

<!-- Sermon Title (The name of the sermon)-->
				<div class="clear extra">
					<label>Sermon Title</label>
					<input type="text" placeholder="Sermon Title" data-ng-model="sermonTitle">
				</div>

<!-- Text (Bible reference used for the sermon) -->
				<div class="clear">
					<label>Text</label>
					<div class="select book">
						<select data-ng-model="bible.book" data-ng-options="book.bname for book in bible.books" data-ng-change="bookChange()"></select>
						<span class="fa fa-angle-down"></span>
					</div>
					<div class="select number">
						<select data-ng-model="bible.startChap" data-ng-options="chap for chap in bible.startChaps" data-ng-change="startChapChange()"></select>
						<span class="fa fa-angle-down"></span>
					</div>
					:
					<div class="select number">
						<select data-ng-model="bible.startVerse" data-ng-options="verse for verse in bible.startVerses" data-ng-change="startVerseChange()"></select>
						<span class="fa fa-angle-down"></span>
					</div>
					-
					<div class="select number">
						<select data-ng-model="bible.endChap" data-ng-options="chap for chap in bible.endChaps" data-ng-change="endChapChange()"></select>
						<span class="fa fa-angle-down"></span>
					</div>
					:
					<div class="select number">
						<select data-ng-model="bible.endVerse" data-ng-options="verse for verse in bible.endVerses" data-ng-change="endVerseChange()"></select>
						<span class="fa fa-angle-down"></span>
					</div>
				</div>

<!-- Sermon Type (Category) -->
				<div class="clear">
					<label>Sermon Type</label>
					<div class="select">
						<select data-ng-model="type" data-ng-options="type.sermon_type for type in types"></select>
						<span class="fa fa-angle-down"></span>
					</div>
				</div>

<!-- Special Info (Information about the speaker or service that will help reference it later) -->
				<div class="clear extra">
					<label>Special Info</label>
					<input type="text" placeholder="Special Information" data-ng-model="specialInfo">
				</div>

<!-- File (The audio recording in MP3 of the sermon) -->
				<div class="clear">
					<form enctype="multipart/form-data">
						<label>Filename</label>
						<input type="file" name="file" accept="audio/mp3" data-ng-model="sermon" data-tc-file="modal" data-file-name="fileName">
						<button data-tc-upload-hide>Choose A Sermon To Upload</button>
						<div class="clear extra"></div>
						<label></label>
						<button data-ng-click="submitForm()">Upload The Sermon</button>
						<button data-ng-click="resetForm()">Reset The Form</button>
					</form>
				</div>

<!-- Instructions -->
				<p>
					Press the "Upload The Sermon" button to upload the sermon to the internet.<br>
					Press the "Reset The Form" button to clear out the form.<br>
				</p>
			</div>
		</div>

<!--
--------------------------------------------------------------------------------
			Form Submit Modal
--------------------------------------------------------------------------------
-->

<!--
--------------------------------------------------------------------------------
This section is hidden by default until the "Upload The Sermon" button is
pressed. Each section has a success, error, and processing spinner that can
be displayed and hidden to show the progress.
The File Upload and Conversion steps also have progress bars.
--------------------------------------------------------------------------------
-->


		<div class="modal" data-ng-show="modal.visible" data-tc-modal="modal">
<!-- Display this section when more information is needed in the form -->
			<div class="moreInfo" data-ng-show="modal.info.error">
				<p data-ng-show="modal.info.error && (modal.info.name || modal.info.title || modal.info.file || modal.info.fileSize)">
					Please correct the following information before proceeding:
				</p>
				<p data-ng-show="modal.info.error && modal.info.name"><span class="fa fa-asterisk red"></span> Please enter a name for the speaker.</p>
				<p data-ng-show="modal.info.error && modal.info.title"><span class="fa fa-asterisk red"></span> Please enter a title for the sermon.</p>
				<p data-ng-show="modal.info.error && modal.info.file"><span class="fa fa-asterisk red"></span> Please select a file to upload</p>
				<p data-ng-show="modal.info.error && modal.info.fileSize"><span class="fa fa-asterisk red"></span> The selected file is too large. Please select a file smaller than 100MB.</p>
			</div>

<!-- Display this section when an error has occured and the user needs to start over -->
			<div class="error" data-ng-show="modal.error">
				<span class="fa" data-ng-class="{'fa-times-circle red': modal.error}"></span>
				<p class="text">There was an error in the submission process. Please try again.</p>
			</div>

<!-- Display this section when the file starts the upload process -->
			<div class="upload">
				<span class="fa" data-ng-class="{spinner: modal.upload.spinner, 'fa-check-circle green': modal.upload.success, 'fa-times-circle red': modal.upload.error}"></span>
				<p class="text" data-ng-show="modal.upload.text">Uploading sermon audio to Church server</p>
				<div data-ng-show="modal.upload.progress" data-tc-progress-bar="modal.upload.percent"></div>
			</div>

<!-- Display this section if the upload was successful when the file is being converted -->
			<div class="convert">
				<span class="fa" data-ng-class="{spinner: modal.convert.spinner, 'fa-check-circle green': modal.convert.success, 'fa-times-circle red': modal.convert.error}"></span>
				<p class="text" data-ng-show="modal.convert.text">Preparing sermon audio for web-site</p>
				<div data-ng-show="modal.convert.progress" data-tc-progress-bar="modal.convert.percent"></div>
			</div>

<!-- Display this section if the speaker's name is not already in the database -->
			<div class="newSpeaker">
				<span class="fa" data-ng-class="{spinner: modal.newSpeaker.spinner, 'fa-check-circle green': modal.newSpeaker.success, 'fa-times-circle red': modal.newSpeaker.error}"></span>
				<p class="text" data-ng-show="modal.newSpeaker.text">Adding speaker to list</p>
			</div>

<!-- Display this section when the information is being added to the website database -->
			<div class="remote">
				<span class="fa" data-ng-class="{spinner: modal.remote.spinner, 'fa-check-circle green': modal.remote.success, 'fa-times-circle red': modal.remote.error}"></span>
				<p class="text" data-ng-show="modal.remote.text">Sending information to web-site</p>
			</div>

<!-- Display this section when the information is being added to the church onsite database -->
			<div class="local">
				<span class="fa" data-ng-class="{spinner: modal.local.spinner, 'fa-check-circle green': modal.local.success, 'fa-times-circle red': modal.local.error}"></span>
				<p class="text" data-ng-show="modal.local.text">Sending sermon information to Church server</p>
			</div>

			<div class="complete" data-ng-show="modal.complete">
				<span class="fa fa-check-circle green"></span>
				<p class="text">The sermon has successfully been submitted.</p>
				<button data-ng-click="goToSermonsPage()">View Sermons Page</button>
			</div>

		</div>

	</body>
</html>