-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
230 lines (208 loc) · 10 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Salina Public Library Gaming Sign In</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://unpkg.com/prefixfree@1.0.0/prefixfree.min.js"></script>
<script src="https://wzrd.in/standalone/formdata-polyfill@latest"></script>
<script src="https://wzrd.in/standalone/promise-polyfill@latest"></script>
<script src="https://wzrd.in/standalone/whatwg-fetch@latest"></script>
<style>
/** Hide .games until system is selected **/
.games {
display: none;
}
.is-hidden {
display: none;
}
</style>
</head>
<body class="body">
<div class="container-fluid">
<form name="submit-to-google-sheet" autocomplete="off">
<!-- Send blank values for the other columns in spreadsheet so it doesn't send undefined -->
<input type="hidden" name="Initials" value="">
<input type="hidden" name="System" value="">
<input type="hidden" name="TimeIn" value="">
<input type="hidden" name="TimeOut" value="">
<input type="hidden" name="TotalTime" value="">
<input type="hidden" name="Notes" value="">
<h1 class="display-4"><img src="square-logo.png" height="120">Gaming Sign In</h1>
<!--<p class="lead">Complete this form for access to a gaming system.</p>-->
<div class="alert alert-warning">All patrons 10 years and younger must have a guardian with them.</div>
<!-- Row for Name and Age -->
<div class="form-row">
<!-- Column for First Name -->
<div class="form-group col-md-4">
<label>First Name</label>
<input name="FirstName" type="text" class="form-control form-control-lg" required>
</div>
<!-- Column for Last Name -->
<div class="form-group col-md-4">
<label>Last Name</label>
<input type="text" name="LastName" class="form-control form-control-lg" required>
</div>
<!-- Column for Age -->
<div class="form-group col-md-4">
<label>Age</label>
<select name="Age" class="form-control form-control-lg" required>
<option selected disabled>Choose...</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18+">18+</option>
</select>
</div>
</div><!-- End of row for Name and Age -->
<!-- Row for Library Card -->
<div class="form-row">
<div class="form-group col-md-12">
<label>Library Card Number</label>
<input type="text" name="LibraryCard" class="form-control form-control-lg">
<small id="libraryCardHelp" class="form-text text-muted">Scan your library card. If you do not have a card, leave this blank. You will need to provide a current photo ID to the help desk.</small>
</div>
</div><!-- End of row for Library Card -->
<!-- Row for Gaming System and Game Disc Choice -->
<div class="form-row">
<!-- Column for Game System - 50% -->
<div class="form-group col-md-6">
<label>Gaming System</label>
<select name="GameSystem" class="form-control form-control-lg" id="GamesSelector" required>
<option selected disabled>Choose...</option>
<option value="PS4">PS4</option>
<option value="PS4-VR">PS4 VR</option>
<option value="Nintendo-Switch">Nintendo Switch</option>
<option value="Wii">Wii</option>
</select>
</div>
<!-- Column for Game Disc Choice - 50% -->
<div class="form-group col-md-6">
<!-- Drop down for PS4 games -->
<div id="PS4" class="games PS4">
<label>Game Disc</label>
<select name="Disc" class="form-control form-control-lg">
<option selected disabled value="None">Choose...</option>
<option value="None">None</option>
<option value="PS4-Need for Speed">Need for Speed</option>
<option value="PS4-COD: Black Ops II">COD: Black Ops II</option>
<option value="PS4-COD: WWII">COD: WWII</option>
<option value="PS4-Hasbro Fun Pack">Hasbro Fun Pack</option>
<option value="PS4-Jackbox">Jackbox</option>
<option value="PS4-Madden NFL 1">Madden NFL 16</option>
<option value="PS4-Minecraft">Minecraft</option>
<option value="PS4-MLB 16">MLB 16</option>
<option value="PS4-Mortal Kombat XL">Mortal Kombat XL</option>
<option value="PS4-Need for Speed">Need for Speed</option>
<option value="PS4-Overcooked!">Overcooked!</option>
<option value="PS4-Overwatch">Overwatch</option>
<option value="PS4-Pac-Man Collection">Pac-Man Collection</option>
</select>
</div>
<!-- Drop down for PS4 VR games -->
<div id="PS4-VR" class="games PS4-VR">
<label>Game Disc</label>
<select name="Disc" class="form-control form-control-lg">
<option selected disabled value="None">Choose...</option>
<option value="None">None</option>
<option value="PS4 VR-Batman Arkham">Batman Arkham</option>
<option value="PS4 VR-Battlezone">Battlezone</option>
<option value="PS4 VR-Job Simulator">Job Simulator</option>
<option value="PS4 VR-Moss">Moss</option>
<option value="PS4 VR-RIGS">RIGS</option>
<option value="PS4 VR-Robinson">Robinson</option>
<option value="PS4 VR-Superhot">Superhot</option>
<option value="PS4 VR-VR Worlds">VR Worlds</option>
</select>
</div>
<!-- Drop down for Nintendo Switch games -->
<div id="Nintendo-Switch" class="games Nintendo-Switch">
<label>Game Disc</label>
<select name="Disc" class="form-control form-control-lg">
<option value="None">None</option>
</select>
</div>
<!-- Drop down for Wii games -->
<div id="Wii" class="games Wii">
<label>Game Disc</label>
<select name="Disc" class="form-control form-control-lg">
<option selected disabled value="None">Choose...</option>
<option value="None">None</option>
<option value="Wii-Mario Party 9">Mario Party 9</option>
<option value="Wii-Sports">Wii Sports</option>
<option value="Wii-Sports Resort">Wii Sports Resort</option>
<option value="Wii-Super Smash Bros">Super Smash Bros</option>
</select>
</div>
</div><!-- End of column for Game Disc Choice -->
</div><!-- End of row for Game System and Game Disc Choice -->
<button type="submit" class="btn btn-primary form-control-lg">
<span class="spinner-grow spinner-grow-sm is-hidden" role="status" aria-hidden="true"></span>
Submit
</button>
<!-- Success modal -->
<div class="modal fade bd-example-modal-sm" id="success-message" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-success">Success!</h4>
</div>
<div class="modal-body">
<p>Thank you, please visit the Help Desk.</p>
</div>
</div>
</div>
</div>
</form>
</div><!-- End of container -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Script for sending data to Google Spreadsheet -->
<script>
$(function() {
$('#GamesSelector').change(function(){
$('.games').hide();
$('#' + $(this).val()).show();
});
});
const scriptURL = 'MacroScriptURL'
const form = document.forms['submit-to-google-sheet']
const loading = document.querySelector('.spinner-grow')
const success = document.querySelector('#success-message')
const body = document.querySelector('.body')
form.addEventListener('submit', e => {
e.preventDefault()
showLoadingIndicator()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => showSuccessMessage(response))
.catch(error => console.error('Error!', error.message))
})
function showLoadingIndicator() {
loading.classList.remove('is-hidden')
}
function showSuccessMessage(response) {
console.log('Success!', response);
setTimeout(() => {
loading.classList.add('is-hidden')
$('#success-message').modal('show')
setTimeout(() => {
$('#success-message').modal('hide')
form.reset()
}, 3000);
}, 1000)
}
</script>
</body>
</html>