-
Notifications
You must be signed in to change notification settings - Fork 0
/
template.html
232 lines (212 loc) · 10.4 KB
/
template.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
<!-- S4S Discovery Data Server Documentation Page Generator Handlebars template -->
<!-- Ver 20180411 -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{{serverName}} Services ({{deployMode}})</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<style>
body { font-size: 110%; }
table { padding: 12px 24px 0 0; }
.sem-col { vertical-align: top; width: 150px; padding-left: 24px; }
a { font-size: 115%; padding-left: 24px; }
a:link { color: blue; text-decoration: none; }
a:hover { color: red; text-decoration: none; }
label, input { display: block; }
input.text { margin-bottom: 12px; width: 95%; padding: .4em; }
fieldset { padding: 0; border: 0; margin-top: 25px; }
.ui-dialog { font-size: 67.5%; }
.pre { background-color: #d3d3d3; margin: 30px 0 0 0; border: 1px solid black; padding: 3px 0 3px 10px; font-size: 130%; }
.version { font-size: 70%; vertical-align: 3%; }
.footer { background-color: #d3d3d3; margin: 30px 0 50px 0; border: 1px solid black; text-align: center; padding: 4px; }
</style>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<script>
// Define the various service calls
var calls = JSON.parse('{{{calls}}}');
var jsonFieldName = 'json-field';
var callDesc; // the specific clicked call
var callDescSubst; // the clicked call after URL parameters are substituted
var clicked; // its prop name in 'calls'
// Define the response dialog
$(function() {
$("#response-modal").dialog ({
autoOpen: false,
height: 450,
width: 700,
position: { my: "top-55%", at: "center", of: window },
modal: true
});
});
// Define the data entry dialog
$(function() {
$("#dialog-form").dialog ({
autoOpen: false,
height: 400,
width: 525,
position: { my: "center", at: "center top+40%", of: window },
modal: true,
buttons: {
"Do it!": function() {
ajaxCall();
},
Reset: function() {
clearInputs();
},
Cancel: function() {
$(this).dialog("close");
}
},
open: function () {
$(document).keydown(function (event) {
var ENTER_KEY = 13;
if (event.which == ENTER_KEY) {
ajaxCall();
event.preventDefault();
}
});
},
close: function () {
clearInputs();
}
});
// Handle clicks on page links
$(".clickme")
.click(function() {
// Identify the call
callDesc = this.innerHTML;
clicked = this.id;
// Submit request and display response if no parameters
if (calls[clicked].params == undefined && calls[clicked].post == undefined) {
ajaxCall();
return false;
}
// Else clear the form
$("#fieldset").html("");
// Construct the form's URL parameters
if (calls[clicked].params != undefined) {
calls[clicked].params.forEach(function (p) {
$("#fieldset").append('<label for="' + p.name + '">:' + p.name + ' (' + p.desc + ')</label>');
$("#fieldset").append('<input type="text" name="' + p.name + '" id="' +
p.name + '" class="text ui-widget-content ui-corner-all" />');
})
}
// Construct the form's POST parameters
if (calls[clicked].post != undefined) {
if (typeof calls[clicked].post == "string") {
// One big textarea (post string is the label)
var label = calls[clicked].post;
$("#fieldset").append('<label for="' + jsonFieldName + '">' + label + '</label>');
$("#fieldset").append('<textarea cols=65 rows=10 name="' + jsonFieldName + '" id="' +
jsonFieldName + '" class="text ui-widget-content ui-corner-all" />');
} else {
// A set of input fields
calls[clicked].post.forEach(function (p) {
$("#fieldset").append('<label for="' + p.name + '">' + p.name + ' (' + p.desc + ')</label>');
$("#fieldset").append('<input type="text" name="' + p.name + '" id="' +
p.name + '" class="text ui-widget-content ui-corner-all" />');
})
}
}
$("#dialog-form").dialog("option", "title", "Set parameters for: '" + callDesc + "'");
$("#dialog-form").dialog("open");
return false;
});
});
// Clear input elements (by class) in the data entry dialog
function clearInputs() {
$(".ui-widget-content").each (function () {
$(this).val("");
});
}
// Construct the Ajax settings object
function ajaxSettings() {
var settings = {};
// Set type
settings.type = clicked.split('_')[0];
// Setup for POST params (if required)
if (calls[clicked].post != undefined) {
if (typeof calls[clicked].post == 'string') {
// Assume one chunk of JSON, name set by 'jsonFieldName'
settings.data = $('#' + jsonFieldName).val();
settings.contentType = 'application/json';
} else {
// Array of fields (attr-value pairs)
var params = {};
calls[clicked].post.forEach(function (p) {
params[p.name] = $('#' + p.name).val();
})
settings.data = params;
}
}
var finalUrl = calls[clicked].path;
callDescSubst = callDesc;
// Substitute URL parameters (if present)
if (calls[clicked].params != undefined) {
calls[clicked].params.forEach(function (p) {
var regExp = new RegExp(':' + p.name, 'g');
var paramVal = $('#' + p.name).val();
finalUrl = finalUrl.replace(regExp, paramVal);
callDescSubst = callDescSubst.replace(regExp, paramVal);
})
}
settings.url = finalUrl;
settings.cache = false;
settings.dataType = 'text';
//alert(JSON.stringify(settings));
return settings;
}
// Ajax call to data service
function ajaxCall() {
var startTime = new Date();
var request = $.ajax(ajaxSettings());
// Success
request.done(function (res) {
var timeDiff = new Date() - startTime;
// Populate the dialog with the results, set the title, and show it
$("#response-modal").html('<pre style="font-size:130%;">'
+ JSON.stringify(JSON.parse(res),null,3).replace(/\</g,'<').replace(/\>/g, '>')
+ '</pre>');
$("#response-modal").dialog("option", "title", "Results for: '" + callDescSubst
+ "' (" + res.length + " bytes, elapsed time: " + timeDiff + "ms)");
$("#response-modal").dialog("open");
});
// Failure
request.error(function (jqXHR, textStatus, errorThrown) {
// Populate the dialog with error results, set the title, and show it
$("#response-modal").text(jqXHR.responseText == "" ? "Timeout or no response." : jqXHR.responseText);
$("#response-modal").dialog("option", "title", textStatus.toUpperCase() + " for: '" + callDescSubst + "'");
$("#response-modal").dialog("open");
});
}
</script>
</head>
<body>
<!-- The response dialog "template" -->
<div id="response-modal" title="Results">
</div>
<!-- The data entry dialog "template" -->
<div id="dialog-form" title="Set input values">
<form>
<fieldset id="fieldset">
</fieldset>
</form>
</div>
<!-- Supported data service calls -->
{{#each callUrls}}{{#if pre}}{{#if pre.desc}}<h2 class="pre">{{pre.desc}} <span class="version">(ver {{pre.version}})</span></h2>{{else}}{{{pre}}}{{/if}}{{/if}}
<table>
<tr><td colspan="2"><b><a href="" id="{{url.id}}" class="clickme">{{url.route}}</a></b></td></tr>
<tr><td class="sem-col">Description: </td><td>{{{desc}}}</td></tr>
{{#if params}}<tr><td class="sem-col">Path parameters: </td><td>{{#each params}}':{{this.name}}' = {{{this.desc}}}<br>{{/each}}</td></tr>{{/if}}
{{#ifarray post}}<tr><td class="sem-col">Post parameters: </td><td>{{#each post}}'{{this.name}}' = {{{this.desc}}}<br>{{/each}}</td></tr>
{{else}}{{#if post}}<tr><td class="sem-col">Post data: </td><td>{{{post}}}</td></tr>{{/if}}{{/ifarray}}
{{#if return}}<tr><td class="sem-col">Return value: </td><td>{{{return}}}</td></tr>{{/if}}
{{#if error}}<tr><td class="sem-col">Error: </td><td>{{{error}}}</td></tr>{{/if}}
</table>
{{/each}}
<!-- the footer -->
<div class="footer">Generated: {{{timestamp}}}</div>
</body>
</html>