-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcreate_event.html
328 lines (309 loc) · 21.5 KB
/
create_event.html
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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Create Event | USACE</title>
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
<!-- PWA App Manifest File -->
<link rel="manifest" href="./json/manifest.json">
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/loader.css">
<link rel="stylesheet" href="css/a2w.public.min.css" media="screen">
<!-- Firebase OAuth CDN -->
<!-- Reference: https://github.com/firebase/firebaseui-web -->
<script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-auth-compat.js"></script>
<!-- JS -->
<script src="js/a2w.public.min.js"></script>
<script type="text/javascript" src="./js/firebaseSettings.js"></script>
<script defer type="text/javascript" src="./js/create_database_event.js"></script>
<script defer type="text/javascript" src="./js/common.js"></script>
<script src="https://kit.fontawesome.com/f5b800b95b.js" crossorigin="anonymous"></script>
</head>
<body class="" style="padding-top:85px; overflow:auto">
<header>
<nav id="main-navigation" class="navbar navbar-default navbar-fixed-top banner" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container-fluid" style="padding: 0 15px;">
<div class="navbar-header">
<a class="navbar-brand home-nav" id="nav-home" style="width: auto">
<div class="logo_content" style="width: 100%">
<div class="USACE_logo hidden-xs">
<img src="https://water.usace.army.mil/a2w_files/production/images/USACE_logo.png"
alt="United States Army Corps of Engineers logo" width="72" height="49">
</div>
<div class="USACE_logo visible-xs">
<img src="https://water.usace.army.mil/a2w_files/production/images/USACE_logo.png"
alt="United States Army Corps of Engineers logo" width="58" height="40">
</div>
<div class="pull-right">
<div class="main_title visible-xs-inline visible-sm-inline hidden-md hidden-lg"
title="Access to Water Resources Data">A2W</div>
<div class="main_title hidden-xs hidden-sm">Access to Water Resources Data</div>
<div class="secondary_title visible-xs-block visible-sm-block hidden-md hidden-lg"
style="font-size: 18px; color: #ccc;" title="WM Data Dissemination">WM & WQ
</div>
<div class="secondary_title hidden-xs hidden-sm"
style="font-size: 18px; color: #ccc;">WM Data Dissemination</div>
</div>
</div>
</a>
<button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse"
data-target="#navButtonia" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navButtonia">
<ul class="nav navbar-nav navbar-right navbar-icons pull-right">
<li class="navbar-icon map-nav" id="nav-map" title="Map">
<a href="https://water.usace.army.mil/a2w/f?p=100:1#" class="ladda-button"
data-style="expand-right" data-size="l" data-spinner-size="16"
data-spinner-color="#000000" data-toggle="collapse" data-target="#navButtonia">
<span class="ladda-label">
<i alt="Map" class="fa fa-map-marker"></i>
<span> Map</span>
</span>
<span class="ladda-spinner"></span>
</a>
</li>
<li class="navbar-icon reporting-nav" id="nav-reporting" title="Overview">
<a href="https://water.usace.army.mil/a2w/f?p=100:1#" class="ladda-button"
data-style="expand-right" data-size="l" data-spinner-size="16"
data-spinner-color="#000000" data-toggle="collapse" data-target="#navButtonia">
<span class="ladda-label">
<i alt="Overview" class="fa fa-list fa-flip-horizontal"></i>
<span> Overview</span>
</span>
</a>
</li>
<li class="navbar-icon reporting-nav" id="nav-reporting" title="Overview">
<a href="./index.html" class="ladda-button" data-style="expand-right" data-size="l"
data-spinner-size="16" data-spinner-color="#000000" data-toggle="collapse"
data-target="#navButtonia">
<span class="ladda-label">
<i alt="Overview" class="fa fa-magnifying-glass"></i>
<span> Site Search</span>
</span>
</a>
</li>
<li class="navbar-icon reporting-nav" id="nav-reporting" title="Overview">
<a href="./usace_login.html" class="ladda-button" data-style="expand-right"
data-size="l" data-spinner-size="16" data-spinner-color="#000000"
data-toggle="collapse" data-target="#navButtonia">
<span class="ladda-label">
<i alt="Overview" class="fa fa-pencil"></i>
<span> Create Event</span>
</span>
</a>
</li>
<li class="navbar-icon" title="Help" onclick="toggleInfo()">
<a href="" id="helpButton" data-toggle="modal" data-target="#helpDialog" title="Help">
<span alt="Help" class="fa fa-question-circle"></span>
<span> Help</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<section id="infoCover" class="cover">
<div>
<h1>Info</h1>
<ul>
<li>This web application was developed for the USACE by Mitchell Regan and Matthew Postel.</li>
<li>This page is the admin-only page for adding box-annotations to the graphs.</li>
<li>Press the ⓘ in the corner to bring this up or close this at any time!</li>
<li>Upon loading the page on a mobile device, a prompt should appear to "Add Water Data to Home
screen" (at least on Android). This is entirely optional, but is for your convenience! Simply
tap the prompt and hit install!</li>
<li>Speaking of mobile, you will mostly want to use the application in <i>landscape</i> mode for
best use.</li>
</ul>
<h1>Steps of use:</h1>
<ol>
<li>Enter the name of the event into the "Event Title" box.</li>
<li>Also write out the description into the "Event Description" box.</li>
<li>If you have one, add a direct link to an image you desire displayed with the info.</li>
<li>Enter the start date and time of the event.</li>
<li>Enter the end date and time of the event.</li>
<li>Select the timezone the event took place in.</li>
<li>
Use the search bar in the right pane to find a water location the event affected. The results
are sorted in no particular order.
</li>
<li>Select a location from the list of options. Selecting one will fill in the name into the search
bar.</li>
<li>Press "Add To List".</li>
<li>
The name of the location will be added to a list below the search bar.
<ul>
<li>The "X" button may be pressed to remove the location from the list.</li>
</ul>
</li>
<li>Continue to add each affected site.</li>
<li>
When all locations have been added, press the "Submit" button to send the event to the database.
<ul>
<li>If you are not signed in with a whitelisted account, your event will be <b>rejected</b>.</li>
<li>If there are any errors, the system will prompt you further with advice to fix it. Be sure to read carefully.</li>
</ul>
</li>
</ol>
</div>
</section>
<span id="infoToggle" onclick="toggleInfo()">ⓘ</span>
<secion id="main">
<div style="margin-left:auto; margin-right:auto; text-align:center; min-width: 400px;">
<h1>New Historical Event</h1>
<p>This page is for creating a new historical event to show up on the water data graphs. Click <a
onclick="logUserOut()">here</a> to sign out.</p>
<div id="signedOut">
<p>You are not signed in. Please click <a href="./usace_login.html">here</a> to sign-in to your
U.S.A.C.E. account in order to access this page.</p>
</div>
<div id="invalidUser">
<i class="requiredText">You are not signed in as a member of the USACE. These input fields are only
being displayed for testing purposes.</i>
</div>
</div>
<div id="signedIn" style="margin-left:auto; margin-right:auto; min-width: 400px;">
<form id="evtForm"
style="display:flex; flex-direction:row; justify-content:center; margin-left:auto; margin-right:auto;">
<div id="leftForm">
<label for="email">Signed in as:</label><br>
<input type="text" id="email" style="width:100%;" readonly=false><br><br>
<label for="evtTitle">Event Title<i class="requiredText">*</i>:</label><br>
<input type="text" id="evtTitle" name="evtTitle" style="width:100%" required=True><br><br>
<label for="evtDesc">Event Description<i class="requiredText">*</i>:</label><br>
<textarea id="evtDesc" name="evtDesc" required=True form="evtForm" rows=4 cols=40
style="width:100%"></textarea><br><br>
<label for="evtImg">Image URL:</label><br>
<input type="url" id="evtImg" name="evtImg" style="width:100%"><br><br>
<label for="evtStart">Start Date<i class="requiredText">*</i>:</label>
<input type="datetime-local" id="evtStart" name="evtStart" required=True><br>
<label for="evtEnd">End Date<i class="requiredText">*</i>: </label>
<input type="datetime-local" id="evtEnd" name="evtEnd" required=True><br>
<!-- Taken from https://gist.github.com/nodesocket/3919205 -->
<label for="evtTZ">Timezone:</label>
<select name="evtTZ" id="evtTZ">
<option value=-12>(GMT -12:00) Eniwetok, Kwajalein</option>
<option value=-11>(GMT -11:00) Midway Island, Samoa</option>
<option value=-10>(GMT -10:00) Hawaii</option>
<option value=-9.5>(GMT -9:30) Taiohae</option>
<option value=-9>(GMT -9:00) Alaska</option>
<option value=-8>(GMT -8:00) Pacific Time (US & Canada)</option>
<option value=-7>(GMT -7:00) Mountain Time (US & Canada)</option>
<option value=-6 selected="selected">(GMT -6:00) Central Time (US & Canada)</option>
<option value=-5>(GMT -5:00) Eastern Time (US & Canada)</option>
<option value=-4.5>(GMT -4:30) Caracas</option>
<option value=-4>(GMT -4:00) Atlantic Time (Canada)</option>
<option value=-3.5>(GMT -3:30) Newfoundland</option>
<option value=-3>(GMT -3:00) Brazil, Buenos Aires</option>
<option value=-2>(GMT -2:00) Mid-Atlantic</option>
<option value=-1>(GMT -1:00) Cape Verde Islands</option>
<option value=0>(GMT) Western Europe Time</option>
<option value=1>(GMT +1:00) Brussels, Madrid, Paris</option>
<option value=2>(GMT +2:00) Kaliningrad, South Africa</option>
<option value=3>(GMT +3:00) Baghdad, Riyadh, Moscow</option>
<option value=3.5>(GMT +3:30) Tehran</option>
<option value=4>(GMT +4:00) Abu Dhabi, Muscat, Baku, Tbilisi</option>
<option value=4.5>(GMT +4:30) Kabul</option>
<option value=5>(GMT +5:00) Islamabad, Karachi</option>
<option value=5.5>(GMT +5:30) Bombay, Calcutta, New Delhi</option>
<option value=5.75>(GMT +5:45) Kathmandu, Pokhara</option>
<option value=6>(GMT +6:00) Almaty, Dhaka, Colombo</option>
<option value=6.5>(GMT +6:30) Yangon, Mandalay</option>
<option value=7>(GMT +7:00) Bangkok, Hanoi, Jakarta</option>
<option value=8>(GMT +8:00) Beijing, Singapore, Hong Kong</option>
<option value=8.75>(GMT +8:45) Eucla</option>
<option value=9>(GMT +9:00) Tokyo, Seoul, Osaka</option>
<option value=9.5>(GMT +9:30) Adelaide, Darwin</option>
<option value=10>(GMT +10:00) Eastern Australia, Guam</option>
<option value=10.5>(GMT +10:30) Lord Howe Island</option>
<option value=11>(GMT +11:00) Magadan, Solomon Islands</option>
<option value=11.5>(GMT +11:30) Norfolk Island</option>
<option value=12>(GMT +12:00) Auckland, Fiji</option>
<option value=12.75>(GMT +12:45) Chatham Islands</option>
<option value=13>(GMT +13:00) Apia, Nukualofa</option>
<option value=14>(GMT +14:00) Line Islands</option>
</select><br><br>
</div>
<div id="rightForm">
<label for="nameSearch">Affected Water Sites<i class="requiredText">*</i>:</label>
<p id="invalidSiteName" style="text-align: center; display:none;"><i class="requiredText"
style="margin:auto">Invalid location name. Please use the search bar and select one of the
locations from the list.</i></p>
<div id="" class="fade collapse in">
<label for="nameSearch">Search:</label>
<input id="nameSearch" type="text" onkeyup="search()" placeholder="Site Name" />
<label for="citySearch" style="display:none;">City:</label>
<input id="citySearch" type="text" onkeyup="search()" placeholder="City Name"
style="display:none;" />
<label for="countySearch" style="display:none;">County:</label>
<input id="countySearch" type="text" onkeyup="search()" placeholder="County Name"
style="display:none;" />
<button type="button" onclick="addSiteToList()">Add To List</button>
<div id="searchResults" class="listContainer"></div>
</div>
<ul id="addedSites"></ul>
</div>
</form>
<div id="bottomForm">
<button type="submit"
onclick="writeDatabaseEvt(document.getElementById('email').value, document.getElementById('evtTitle').value, document.getElementById('evtDesc').value, document.getElementById('evtStart').value, document.getElementById('evtEnd').value, document.getElementById('evtTZ').value, document.getElementById('evtImg').value)"
style="margin-left:auto; margin-right:auto;">Submit</button>
<p style="margin-left:auto; margin-right:auto;"><i class="requiredText" style="margin:auto">*</i>
indicates required fields</p>
</div>
<!--button onclick="testWriteDb(document.getElementById('evtDesc').value)">TEST</button-->
</div>
</secion>
<section class="container-fluid footer">
<div class="row-fluid footer_links">
<div class="col-md-1"><a id="aboutFooter" class="footer_link"
style="color: white; cursor: pointer;">About Us</a></div>
<div class="col-md-1"><a id="legalFooter" class="footer_link"
style="color: white; cursor: pointer;">Legal</a></div>
<div class="col-md-1"><a target="_blank" style="color: white; cursor: pointer;"
href="http://www.usace.army.mil/Accessibility.aspx">Accessibility</a></div>
<div class="col-md-1"><a style="color: white; cursor: pointer;"
href="mailto:water@usace.army.mil">Contact Us</a></div>
<div class="col-md-1"><a target="_blank" style="color: white; cursor: pointer;"
href="http://www.usace.army.mil/FOIA.aspx">FOIA</a></div>
<div class="col-md-1"><a target="_blank" style="color: white; cursor: pointer;"
href="http://www.usace.army.mil/InformationQualityAct.aspx">Information Quality Act</a></div>
<div class="col-md-1"><a target="_blank" style="color: white; cursor: pointer;"
href="http://www.usace.army.mil/LinkDisclaimer.aspx">Link Disclaimer</a></div>
<div class="col-md-1"><a target="_blank" style="color: white; cursor: pointer;"
href="http://prhome.defense.gov/nofear">No Fear Act</a></div>
<div class="col-md-1"><a target="_blank" style="color: white; cursor: pointer;"
href="http://www.usace.army.mil/PrivacyandSecurity.aspx">Privacy & Security</a></div>
<div class="col-md-1"><a style="color: white; cursor: pointer;"
href="mailto:Bryan.R.Armbrust@usace.army.mil">Public Inquiries</a></div>
<div class="col-md-1"><a target="_blank" style="color: white; cursor: pointer;"
href="http://www.usace.army.mil/SiteMap.aspx">Site Map</a></div>
<div class="col-md-1"><a target="_blank" style="color: white; cursor: pointer;"
href="https://www.usa.gov/">USA.gov</a></div>
</div>
<div class="row-fluid">
<div class="col-md-12 footer_copyright">? 2018 |United States Army Corp of Engineers. All Rights
Reserved.</div>
</div>
</section>
<!-- PWA Service Worker -->
<script>
if (!navigator.serviceWorker.controller) {
navigator.serviceWorker.register("./sw.js").then(function (reg) {
console.info("Service worker has been registered for scope: " + reg.scope);
});
}
</script>
</body>
</html>