More GUI for the templating frontend

Fixes #151

While there are certainly more things that can be done - such as reading
the list of templates dynamically, it wouldn't be horrible to go into
production with the GUI the way it is right now.

2 files changed, 23 insertions, 5 deletions

diff --git a/web/index.html b/web/index.html
index dd0e7c4..38ba6d5 100644
--- a/web/index.html
+++ b/web/index.html
@@ -138,9 +138,27 @@
     <div class="container-fluid" id="template">
       <div class="row-fluid" id="template-row">
 	<div id="template-parent" class="template">
-		<textarea id="template-input" cols="80" rows="25"></textarea>
-		<button onclick="nmsTemplate.test()">Test</button>
-		<textarea id="template-output" disabled cols="80" rows="25"></textarea>
+		<div class="form-inline">
+			<div class="form-group">
+				<button onclick="nmsTemplate.fromFile('HOWTO.txt')" class="btn btn-info">Load HOWTO.txt</button>
+				<button onclick="nmsTemplate.fromFile('switches.txt')" class="btn btn-info">Load switches.txt</button>
+				<button onclick="nmsTemplate.fromFile('switch.txt')" class="btn btn-info">Load switch.txt</button>
+			</div>
+			<div class="form-group">
+				<label for="template-query-params">Query parameters</label>
+				<input type="text" class="form-control" id="template-query-params" value="?switch=e13-1&foo=bar" />
+			</div>
+			<div class="form-group">
+				<button onclick="nmsTemplate.test()" class="btn btn-primary">Test</button>
+			</div>
+		</div>
+
+		<div class="form-inline">
+			<div class="form-group">
+				<textarea id="template-input" class="form-control" cols="80" rows="25"></textarea>
+				<textarea id="template-output" class="form-control" disabled cols="80" rows="25"></textarea>
+			</div>
+		</div>
 	</div>
       </div>
     </div>
diff --git a/web/js/nms-template.js b/web/js/nms-template.js
index a3cbe92..68e0286 100644
--- a/web/js/nms-template.js
+++ b/web/js/nms-template.js
@@ -7,9 +7,10 @@ var nmsTemplate = nmsTemplate || {
 nmsTemplate.test = function() {
 	var input = document.getElementById("template-input");
 	var output = document.getElementById("template-output");
+	var qp = document.getElementById("template-query-params");
 	$.ajax({
 		type: "POST",
-		url: "/api/templates/test",
+		url: "/api/templates/test" + qp.value,
 		async: false,
 		data: input.value,
 		dataType: "text",
@@ -31,7 +32,6 @@ nmsTemplate.fromFile = function(template) {
 		type: "GET",
 		url: "/templates/" + template,
 		async: false,
-		data: input.value,
 		dataType: "text",
 		success: function (indata, textStatus, jqXHR) {
 			var output = document.getElementById("template-input");