-
Notifications
You must be signed in to change notification settings - Fork 1
/
rscvd-status-prototype.html
96 lines (77 loc) · 2.96 KB
/
rscvd-status-prototype.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
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>RSCVD Status Prototype</title>
<link rel="icon" href="/playground/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" media="screen" href="https://dev.rscvd.org/assets/css/style.css">
</head>
<body>
<div id="main_content_wrap" class="outer">
<section id="main_content" class="inner">
<h1>RSCVD Request Status</h1>
<p>Tell us the email you made your requests with and we'll tell your requests status:</p>
<p><input class="oaworks_form" type="text" id="email" placeholder="youremail@ill.org" value="" onkeydown="myFunc()"></p>
<p>For testing purposes, try: interlibraryloan@getty.edu.</p>
<p>In the real system, when you first arrived at this page, you wouldn't see any requests or the table. Only when you put your email in would you see details. This protects privacy, as does displaying only an extremely small amount of un-interesting information.</p>
<!-- TODO: When building this for real expect to pass the search as a param -->
<table width=100%>
<thead>
<th><b>Title</b></th>
<th><b>Status</b></th>
<th><b>Cancel</b></th>
</thead>
<tbody sheetsu="https://sheetsu.com/apis/v1.0su/ef8538ab4328" sheetsu-limit="20" sheetsu-ignore-case="true">
<tr>
<td>{{title}}</td>
<td>{{status}}</td>
<td><a href="https://dev.rscvd.org/cancel?time={{timestamp}}&title={{title}}">Click here</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="//load.sheetsu.com"></script>
<script type="text/javascript">
var myFunc = debounce(function () {
emailValue = emailValue();
addSearchValue({ email: "*" + emailValue + "*" });
resetTableBody();
triggerNewSearch();
}, 400);
function emailValue() {
return document.getElementById("email").value;
}
function tableElement() {
return document.querySelector("tbody[sheetsu]");
}
function resetTableBody() {
document.querySelector("tbody[sheetsu]").innerHTML = tableRow();
}
function addSearchValue(searchValue) {
tableElement().setAttribute("sheetsu-search", JSON.stringify(searchValue));
}
function triggerNewSearch() {
var element = document.querySelector("tbody[sheetsu]");
(new ChangeGetElement(element)).call();
}
function tableRow() {
return '<td>{{title}}</td><td>{{status}}</td><td><a href="https://aurl.org/{{timestamp}}&{{title}}">Click here</a></td>';
}
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
</script>
</body>
</html>