generated from caltechlibrary/template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
call-numbers-form.html
93 lines (88 loc) · 3.95 KB
/
call-numbers-form.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
<!DOCTYPE html>
<html>
<!--
@file call-numbers-form.html
@brief HTML + JS code to ask the user for a range of call numbers
@created 2023-08-09
@license Please see the file named LICENSE in the project directory
@website https://github.com/caltechlibrary/boffo
-->
<head>
<base target="_top" />
<title>Indicate the range of call numbers</title>
<meta charset="utf-8" />
<?!= include('stylesheet.css'); ?>
<?!= include('form-utilities.js'); ?>
<script>
const gs = google.script;
function success(value, data) {
log(`got CN range ${data[0]} -- ${data[1]} at location ${data[2]}`);
delayedClose();
gs.run.getItemsInCallNumberRange(data[0], data[1], data[2]);
}
function failure(error, data) {
log('got an error: ' + error);
delayedClose();
}
function submitForm(which) {
log(`user clicked ${which} on form`);
if (which == "Cancel") {
delayedClose(0);
return;
}
// The server invocations take time, and meanwhile the dialog will be
// visible for several seconds as if nothing happened. If we don't
// show something to the user, they might think something is wrong.
// So, hide the form, and show a message with a spinner.
document.getElementById('dialog').style.display = 'none';
document.getElementById('message').style.display = 'inherit';
const firstCN = document.getElementById("firstCN").value.trim();
const lastCN = document.getElementById("lastCN").value.trim();
const location = document.getElementById("location").value;
gs.run
.withUserObject([firstCN, lastCN, location])
.withSuccessHandler(success)
.withFailureHandler(failure)
.proceed();
}
</script>
</head>
<body>
<div id="dialog">
<div class="explanatory-text">
<p>You can either provide a single call number to search for
items with that call number at the given location, or provide
two call numbers to search for items within a range of call
numbers at the given location.
</p>
</div>
<div class="form">
<form id="form" onsubmit="submitForm(this.submitted); return false;">
<label for="firstCN" class="label">Call number (or beginning of range):</label>
<br/>
<input name="firstCN" id="firstCN" type="text" class="wide field"
autofocus required/>
<br/>
<label for="lastCN" class="label">(Optional) End of range:</label>
<br/>
<input name="lastCN" id="lastCN" type="text" class="wide field"/>
<br/>
<label for="location" class="label">Location:</label>
<br/>
<select name="Location" id="location" class="wide field">
<?!= locationSelectorsList; ?>
</select>
<br/>
<input type="submit" class="button" value="Submit"
onclick="this.form.submitted=this.value"/>
<input type="submit" class="button cancel" value="Cancel"
onclick="this.form.submitted=this.value" formnovalidate/>
</form>
</div>
</div>
<div id="message" class="explanatory-text"
style="display: none; margin-top: 8em">
<p>Starting search <svg width="24" height="24" viewBox="0 -5 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_nOfF{animation:spinner_qtyZ 2s cubic-bezier(0.36,.6,.31,1) infinite}.spinner_fVhf{animation-delay:-.5s}.spinner_piVe{animation-delay:-1s}.spinner_MSNs{animation-delay:-1.5s}@keyframes spinner_qtyZ{0%{r:0}25%{r:3px;cx:4px}50%{r:3px;cx:12px}75%{r:3px;cx:20px}100%{r:0;cx:20px}}</style><circle class="spinner_nOfF" cx="4" cy="12" r="3"/><circle class="spinner_nOfF spinner_fVhf" cx="4" cy="12" r="3"/><circle class="spinner_nOfF spinner_piVe" cx="4" cy="12" r="3"/><circle class="spinner_nOfF spinner_MSNs" cx="4" cy="12" r="3"/></svg></p>
</div>
</body>
</html>